@parcel/transformer-css 2.0.0-nightly.130 → 2.0.0-nightly.1303

package/lib/CSSTransformer.js

@@ -5,173 +5,374 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _plugin = require("@parcel/plugin");
+function _path() {
+  const data = _interopRequireDefault(require("path"));
 
-var _utils = require("@parcel/utils");
+  _path = function () {
+    return data;
+  };
 
-var _postcss = _interopRequireDefault(require("postcss"));
+  return data;
+}
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@parcel/source-map"));
 
-var _semver = _interopRequireDefault(require("semver"));
+  _sourceMap = function () {
+    return data;
+  };
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  return data;
+}
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
-const IMPORT_RE = /@import/;
+function _plugin() {
+  const data = require("@parcel/plugin");
 
-function canHaveDependencies(filePath, code) {
-  return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
+  _plugin = function () {
+    return data;
+  };
+
+  return data;
 }
 
-var _default = new _plugin.Transformer({
-  canReuseAST({
-    ast
-  }) {
-    return ast.type === 'postcss' && _semver.default.satisfies(ast.version, '^7.0.0');
-  },
+function _lightningcss() {
+  const data = require("lightningcss");
 
-  async parse({
-    asset
-  }) {
-    // This is set by other transformers (e.g. Stylus) to indicate that it has already processed
-    // all dependencies, and that the CSS transformer can skip this asset completely. This is
-    // required because when stylus processes e.g. url() it replaces them with a dependency id
-    // to be filled in later. When the CSS transformer runs, it would pick that up and try to
-    // resolve a dependency for the id which obviously doesn't exist. Also, it's faster to do
-    // it this way since the resulting CSS doesn't need to be re-parsed.
-    if (asset.meta.hasDependencies === false) {
-      return null;
-    }
+  _lightningcss = function () {
+    return data;
+  };
+
+  return data;
+}
 
-    let code = await asset.getCode();
+function _utils() {
+  const data = require("@parcel/utils");
 
-    if (!canHaveDependencies(asset.filePath, code)) {
-      return null;
-    }
+  _utils = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _browserslist() {
+  const data = _interopRequireDefault(require("browserslist"));
+
+  _browserslist = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
+
+  _nullthrows = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _diagnostic() {
+  const data = _interopRequireWildcard(require("@parcel/diagnostic"));
+
+  _diagnostic = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-    return {
-      type: 'postcss',
-      version: '7.0.0',
-      isDirty: false,
-      program: _postcss.default.parse(code, {
-        from: asset.filePath
-      })
-    };
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = new (_plugin().Transformer)({
+  async loadConfig({
+    config,
+    options
+  }) {
+    let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: '@parcel/transformer-css'
+    });
+    return conf === null || conf === void 0 ? void 0 : conf.contents;
   },
 
-  transform({
-    asset
+  async transform({
+    asset,
+    config,
+    options,
+    logger
   }) {
     // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
     // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
+    let env = asset.env;
     asset.setEnvironment({
       context: 'browser',
       engines: {
         browsers: asset.env.engines.browsers
       },
-      minify: asset.env.minify
-    }); // When this asset is an bundle entry, allow that bundle to be split to load shared assets separately.
-    // Only set here if it is null to allow previous transformers to override this behavior.
+      shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
+      sourceMap: asset.env.sourceMap
+    });
+    let [code, originalMap] = await Promise.all([asset.getBuffer(), asset.getMap()]);
+    let targets = getTargets(asset.env.engines.browsers);
+    let res;
 
-    if (asset.isSplittable == null) {
-      asset.isSplittable = true;
-    }
+    try {
+      if (asset.meta.type === 'attr') {
+        res = (0, _lightningcss().transformStyleAttribute)({
+          code,
+          analyzeDependencies: true,
+          errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
+          targets
+        });
+      } else {
+        let cssModules = false;
 
-    let ast = asset.ast; // Check for `hasDependencies` being false here as well, as it's possible
-    // another transformer (such as PostCSSTransformer) has already parsed an
-    // ast and CSSTransformer's parse was never called.
+        if (asset.meta.type !== 'tag' && asset.meta.cssModulesCompiled == null) {
+          let cssModulesConfig = config === null || config === void 0 ? void 0 : config.cssModules;
 
-    if (!ast || asset.meta.hasDependencies === false) {
-      return [asset];
-    }
+          if (asset.isSource && (typeof cssModulesConfig === 'boolean' || cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.global) || /\.module\./.test(asset.filePath)) {
+            if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.dashedIdents && !asset.isSource) {
+              cssModulesConfig.dashedIdents = false;
+            }
 
-    ast.program.walkAtRules('import', rule => {
-      let params = (0, _postcssValueParser.default)(rule.params);
-      let [name, ...media] = params.nodes;
-      let moduleSpecifier;
+            cssModules = cssModulesConfig !== null && cssModulesConfig !== void 0 ? cssModulesConfig : true;
+          }
+        }
 
-      if (name.type === 'function' && name.value === 'url' && name.nodes.length) {
-        name = name.nodes[0];
+        res = (0, _lightningcss().transform)({
+          filename: _path().default.relative(options.projectRoot, asset.filePath),
+          code,
+          cssModules,
+          analyzeDependencies: asset.meta.hasDependencies !== false,
+          sourceMap: !!asset.env.sourceMap,
+          drafts: config === null || config === void 0 ? void 0 : config.drafts,
+          pseudoClasses: config === null || config === void 0 ? void 0 : config.pseudoClasses,
+          errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
+          targets
+        });
       }
+    } catch (err) {
+      var _err$data;
 
-      moduleSpecifier = name.value;
+      err.filePath = asset.filePath;
+      let diagnostic = (0, _diagnostic().errorToDiagnostic)(err, {
+        origin: '@parcel/transformer-css'
+      });
 
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + rule);
+      if (((_err$data = err.data) === null || _err$data === void 0 ? void 0 : _err$data.type) === 'AmbiguousUrlInCustomProperty' && err.data.url) {
+        let p = '/' + (0, _utils().relativePath)(options.projectRoot, _path().default.resolve(_path().default.dirname(asset.filePath), err.data.url), false);
+        diagnostic[0].hints = [`Replace with: url(${p})`];
+        diagnostic[0].documentationURL = 'https://parceljs.org/languages/css/#url()';
       }
 
-      if ((0, _utils.isURL)(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: (0, _utils.createDependencyLocation)(rule.source.start, moduleSpecifier, 0, 8)
+      throw new (_diagnostic().default)({
+        diagnostic
+      });
+    }
+
+    if (res.warnings) {
+      for (let warning of res.warnings) {
+        logger.warn({
+          message: warning.message,
+          codeFrames: [{
+            filePath: asset.filePath,
+            codeHighlights: [{
+              start: {
+                line: warning.loc.line,
+                column: warning.loc.column
+              },
+              end: {
+                line: warning.loc.line,
+                column: warning.loc.column
+              }
+            }]
+          }]
         });
-      } else {
-        // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
-        // TODO: run CSSPackager on inline style tags.
-        // let inlineHTML =
-        //   this.options.rendition && this.options.rendition.inlineHTML;
-        // if (inlineHTML) {
-        //   name.value = asset.addURLDependency(dep, {loc: rule.source.start});
-        //   rule.params = params.toString();
-        // } else {
-        media = _postcssValueParser.default.stringify(media).trim();
-        let dep = {
-          moduleSpecifier,
-          // Offset by 8 as it does not include `@import `
-          loc: (0, _utils.createDependencyLocation)(rule.source.start, moduleSpecifier, 0, 8),
-          meta: {
-            media
-          }
-        };
-        asset.addDependency(dep);
-        rule.remove(); // }
       }
+    }
 
-      ast.isDirty = true;
-    });
-    ast.program.walkDecls(decl => {
-      if (URL_RE.test(decl.value)) {
-        let parsed = (0, _postcssValueParser.default)(decl.value);
-        let isDirty = false;
-        parsed.walk(node => {
-          if (node.type === 'function' && node.value === 'url' && node.nodes.length > 0 && !node.nodes[0].value.startsWith('#') // IE's `behavior: url(#default#VML)`
-          ) {
-              node.nodes[0].value = asset.addURLDependency(node.nodes[0].value, {
-                loc: (0, _utils.createDependencyLocation)(decl.source.start, node.nodes[0].value)
+    asset.setBuffer(res.code);
+
+    if (res.map != null) {
+      let vlqMap = JSON.parse(res.map.toString());
+      let map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(vlqMap);
+
+      if (originalMap) {
+        map.extends(originalMap);
+      }
+
+      asset.setMap(map);
+    }
+
+    if (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = dep.loc;
+
+        if (originalMap) {
+          loc = (0, _utils().remapSourceLocation)(loc, originalMap);
+        }
+
+        if (dep.type === 'import' && !res.exports) {
+          asset.addDependency({
+            specifier: dep.url,
+            specifierType: 'url',
+            loc,
+            packageConditions: ['style'],
+            meta: {
+              // For the glob resolver to distinguish between `@import` and other URL dependencies.
+              isCSSImport: true,
+              media: dep.media
+            }
+          });
+        } else if (dep.type === 'url') {
+          asset.addURLDependency(dep.url, {
+            loc,
+            meta: {
+              placeholder: dep.placeholder
+            }
+          });
+        }
+      }
+    }
+
+    let assets = [asset];
+
+    if (res.exports != null) {
+      let exports = res.exports;
+      asset.symbols.ensure();
+      asset.symbols.set('default', 'default');
+      let dependencies = new Map();
+      let locals = new Map();
+      let c = 0;
+      let depjs = '';
+      let js = '';
+
+      for (let key in exports) {
+        locals.set(exports[key].name, key);
+      }
+
+      let seen = new Set();
+
+      let add = key => {
+        if (seen.has(key)) {
+          return;
+        }
+
+        seen.add(key);
+        let e = exports[key];
+        let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
+
+        for (let ref of e.composes) {
+          s += ' ';
+
+          if (ref.type === 'local') {
+            add((0, _nullthrows().default)(locals.get(ref.name)));
+            s += '${' + `module.exports[${JSON.stringify((0, _nullthrows().default)(locals.get(ref.name)))}]` + '}';
+          } else if (ref.type === 'global') {
+            s += ref.name;
+          } else if (ref.type === 'dependency') {
+            let d = dependencies.get(ref.specifier);
+
+            if (d == null) {
+              d = `dep_${c++}`;
+              depjs += `import * as ${d} from ${JSON.stringify(ref.specifier)};\n`;
+              dependencies.set(ref.specifier, d);
+              asset.addDependency({
+                specifier: ref.specifier,
+                specifierType: 'esm',
+                packageConditions: ['style']
               });
-              isDirty = true;
             }
-        });
 
-        if (isDirty) {
-          decl.value = parsed.toString();
-          ast.isDirty = true;
+            s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
+          }
+        }
+
+        s += '`;\n'; // If the export is referenced internally (e.g. used @keyframes), add a self-reference
+        // to the JS so the symbol is retained during tree-shaking.
+
+        if (e.isReferenced) {
+          s += `module.exports[${JSON.stringify(key)}];\n`;
         }
+
+        js += s;
+      }; // It's possible that the exports can be ordered differently between builds.
+      // Sorting by key is safe as the order is irrelevant but needs to be deterministic.
+
+
+      for (let key of Object.keys(exports).sort()) {
+        asset.symbols.set(key, exports[key].name);
+        add(key);
       }
-    });
-    return [asset];
-  },
 
-  async generate({
-    asset
-  }) {
-    let code;
+      if (res.dependencies) {
+        for (let dep of res.dependencies) {
+          if (dep.type === 'import') {
+            // TODO: Figure out how to treeshake this
+            let d = `dep_$${c++}`;
+            depjs += `import * as ${d} from ${JSON.stringify(dep.url)};\n`;
+            js += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+            asset.symbols.set('*', '*');
+          }
+        }
+      }
 
-    if (!asset.ast || !asset.ast.isDirty) {
-      code = await asset.getCode();
-    } else {
-      code = '';
+      if (res.references != null) {
+        let references = res.references;
+
+        for (let symbol in references) {
+          let reference = references[symbol];
+          asset.addDependency({
+            specifier: reference.specifier,
+            specifierType: 'esm',
+            packageConditions: ['style'],
+            symbols: new Map([[reference.name, {
+              local: symbol,
+              isWeak: false,
+              loc: null
+            }]])
+          });
+          asset.meta.hasReferences = true;
+        }
+      }
 
-      _postcss.default.stringify(asset.ast.program, c => {
-        code += c;
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: [],
+        env
       });
     }
 
-    return {
-      code
-    };
+    return assets;
   }
 
 });
 
-exports.default = _default;
+exports.default = _default;
+let cache = new Map();
+
+function getTargets(browsers) {
+  if (browsers == null) {
+    return undefined;
+  }
+
+  let cached = cache.get(browsers);
+
+  if (cached != null) {
+    return cached;
+  }
+
+  let targets = (0, _lightningcss().browserslistToTargets)((0, _browserslist().default)(browsers));
+  cache.set(browsers, targets);
+  return targets;
+}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.0.0-nightly.130+870013ca",
+  "version": "2.0.0-nightly.1303+cd4336412",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -12,15 +16,17 @@
   "main": "lib/CSSTransformer.js",
   "source": "src/CSSTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0-nightly.1301+cd4336412"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-nightly.130+870013ca",
-    "@parcel/utils": "2.0.0-nightly.130+870013ca",
-    "postcss": "^7.0.5",
-    "postcss-value-parser": "^3.3.1",
-    "semver": "^5.4.1"
+    "@parcel/diagnostic": "2.0.0-nightly.1303+cd4336412",
+    "@parcel/plugin": "2.0.0-nightly.1303+cd4336412",
+    "@parcel/source-map": "^2.1.1",
+    "@parcel/utils": "2.0.0-nightly.1303+cd4336412",
+    "browserslist": "^4.6.6",
+    "lightningcss": "^1.16.1",
+    "nullthrows": "^1.1.1"
   },
-  "gitHead": "870013cab1003cb422fd425af50c934407df9ecb"
+  "gitHead": "cd4336412242b6d6da40ef6cba8e7ac99c72b090"
 }

package/src/CSSTransformer.js

@@ -1,178 +1,311 @@
-// @flow
-
-import type {FilePath} from '@parcel/types';
+// @flow strict-local
 
+import path from 'path';
+import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
-import {createDependencyLocation, isURL} from '@parcel/utils';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-import semver from 'semver';
-
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
-const IMPORT_RE = /@import/;
+import {
+  transform,
+  transformStyleAttribute,
+  browserslistToTargets,
+} from 'lightningcss';
+import {remapSourceLocation, relativePath} from '@parcel/utils';
+import browserslist from 'browserslist';
+import nullthrows from 'nullthrows';
+import ThrowableDiagnostic, {errorToDiagnostic} from '@parcel/diagnostic';
 
-function canHaveDependencies(filePath: FilePath, code: string) {
-  return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
-}
-
-export default new Transformer({
-  canReuseAST({ast}) {
-    return ast.type === 'postcss' && semver.satisfies(ast.version, '^7.0.0');
-  },
-
-  async parse({asset}) {
-    // This is set by other transformers (e.g. Stylus) to indicate that it has already processed
-    // all dependencies, and that the CSS transformer can skip this asset completely. This is
-    // required because when stylus processes e.g. url() it replaces them with a dependency id
-    // to be filled in later. When the CSS transformer runs, it would pick that up and try to
-    // resolve a dependency for the id which obviously doesn't exist. Also, it's faster to do
-    // it this way since the resulting CSS doesn't need to be re-parsed.
-    if (asset.meta.hasDependencies === false) {
-      return null;
-    }
-
-    let code = await asset.getCode();
-    if (!canHaveDependencies(asset.filePath, code)) {
-      return null;
-    }
-
-    return {
-      type: 'postcss',
-      version: '7.0.0',
-      isDirty: false,
-      program: postcss.parse(code, {
-        from: asset.filePath,
-      }),
-    };
+export default (new Transformer({
+  async loadConfig({config, options}) {
+    let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: '@parcel/transformer-css',
+    });
+    return conf?.contents;
   },
-
-  transform({asset}) {
+  async transform({asset, config, options, logger}) {
     // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
     // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
+    let env = asset.env;
     asset.setEnvironment({
       context: 'browser',
       engines: {
         browsers: asset.env.engines.browsers,
       },
-      minify: asset.env.minify,
+      shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
+      sourceMap: asset.env.sourceMap,
     });
 
-    // When this asset is an bundle entry, allow that bundle to be split to load shared assets separately.
-    // Only set here if it is null to allow previous transformers to override this behavior.
-    if (asset.isSplittable == null) {
-      asset.isSplittable = true;
+    let [code, originalMap] = await Promise.all([
+      asset.getBuffer(),
+      asset.getMap(),
+    ]);
+
+    let targets = getTargets(asset.env.engines.browsers);
+    let res;
+    try {
+      if (asset.meta.type === 'attr') {
+        res = transformStyleAttribute({
+          code,
+          analyzeDependencies: true,
+          errorRecovery: config?.errorRecovery || false,
+          targets,
+        });
+      } else {
+        let cssModules = false;
+        if (
+          asset.meta.type !== 'tag' &&
+          asset.meta.cssModulesCompiled == null
+        ) {
+          let cssModulesConfig = config?.cssModules;
+          if (
+            (asset.isSource &&
+              (typeof cssModulesConfig === 'boolean' ||
+                cssModulesConfig?.global)) ||
+            /\.module\./.test(asset.filePath)
+          ) {
+            if (cssModulesConfig?.dashedIdents && !asset.isSource) {
+              cssModulesConfig.dashedIdents = false;
+            }
+
+            cssModules = cssModulesConfig ?? true;
+          }
+        }
+
+        res = transform({
+          filename: path.relative(options.projectRoot, asset.filePath),
+          code,
+          cssModules,
+          analyzeDependencies: asset.meta.hasDependencies !== false,
+          sourceMap: !!asset.env.sourceMap,
+          drafts: config?.drafts,
+          pseudoClasses: config?.pseudoClasses,
+          errorRecovery: config?.errorRecovery || false,
+          targets,
+        });
+      }
+    } catch (err) {
+      err.filePath = asset.filePath;
+      let diagnostic = errorToDiagnostic(err, {
+        origin: '@parcel/transformer-css',
+      });
+      if (err.data?.type === 'AmbiguousUrlInCustomProperty' && err.data.url) {
+        let p =
+          '/' +
+          relativePath(
+            options.projectRoot,
+            path.resolve(path.dirname(asset.filePath), err.data.url),
+            false,
+          );
+        diagnostic[0].hints = [`Replace with: url(${p})`];
+        diagnostic[0].documentationURL =
+          'https://parceljs.org/languages/css/#url()';
+      }
+
+      throw new ThrowableDiagnostic({
+        diagnostic,
+      });
     }
 
-    let ast = asset.ast;
-    // Check for `hasDependencies` being false here as well, as it's possible
-    // another transformer (such as PostCSSTransformer) has already parsed an
-    // ast and CSSTransformer's parse was never called.
-    if (!ast || asset.meta.hasDependencies === false) {
-      return [asset];
+    if (res.warnings) {
+      for (let warning of res.warnings) {
+        logger.warn({
+          message: warning.message,
+          codeFrames: [
+            {
+              filePath: asset.filePath,
+              codeHighlights: [
+                {
+                  start: {
+                    line: warning.loc.line,
+                    column: warning.loc.column,
+                  },
+                  end: {
+                    line: warning.loc.line,
+                    column: warning.loc.column,
+                  },
+                },
+              ],
+            },
+          ],
+        });
+      }
     }
 
-    ast.program.walkAtRules('import', rule => {
-      let params = valueParser(rule.params);
-      let [name, ...media] = params.nodes;
-      let moduleSpecifier;
-      if (
-        name.type === 'function' &&
-        name.value === 'url' &&
-        name.nodes.length
-      ) {
-        name = name.nodes[0];
+    asset.setBuffer(res.code);
+
+    if (res.map != null) {
+      let vlqMap = JSON.parse(res.map.toString());
+      let map = new SourceMap(options.projectRoot);
+      map.addVLQMap(vlqMap);
+
+      if (originalMap) {
+        map.extends(originalMap);
       }
 
-      moduleSpecifier = name.value;
+      asset.setMap(map);
+    }
+
+    if (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = dep.loc;
+        if (originalMap) {
+          loc = remapSourceLocation(loc, originalMap);
+        }
 
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + rule);
+        if (dep.type === 'import' && !res.exports) {
+          asset.addDependency({
+            specifier: dep.url,
+            specifierType: 'url',
+            loc,
+            packageConditions: ['style'],
+            meta: {
+              // For the glob resolver to distinguish between `@import` and other URL dependencies.
+              isCSSImport: true,
+              media: dep.media,
+            },
+          });
+        } else if (dep.type === 'url') {
+          asset.addURLDependency(dep.url, {
+            loc,
+            meta: {
+              placeholder: dep.placeholder,
+            },
+          });
+        }
       }
+    }
 
-      if (isURL(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: createDependencyLocation(
-            rule.source.start,
-            moduleSpecifier,
-            0,
-            8,
-          ),
-        });
-      } else {
-        // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
-        // TODO: run CSSPackager on inline style tags.
-        // let inlineHTML =
-        //   this.options.rendition && this.options.rendition.inlineHTML;
-        // if (inlineHTML) {
-        //   name.value = asset.addURLDependency(dep, {loc: rule.source.start});
-        //   rule.params = params.toString();
-        // } else {
-        media = valueParser.stringify(media).trim();
-        let dep = {
-          moduleSpecifier,
-          // Offset by 8 as it does not include `@import `
-          loc: createDependencyLocation(
-            rule.source.start,
-            moduleSpecifier,
-            0,
-            8,
-          ),
-          meta: {
-            media,
-          },
-        };
-        asset.addDependency(dep);
-        rule.remove();
-        // }
+    let assets = [asset];
+
+    if (res.exports != null) {
+      let exports = res.exports;
+      asset.symbols.ensure();
+      asset.symbols.set('default', 'default');
+
+      let dependencies = new Map();
+      let locals = new Map();
+      let c = 0;
+      let depjs = '';
+      let js = '';
+
+      let jsDeps = [];
+
+      for (let key in exports) {
+        locals.set(exports[key].name, key);
       }
-      ast.isDirty = true;
-    });
 
-    ast.program.walkDecls(decl => {
-      if (URL_RE.test(decl.value)) {
-        let parsed = valueParser(decl.value);
-        let isDirty = false;
+      let seen = new Set();
+      let add = key => {
+        if (seen.has(key)) {
+          return;
+        }
+        seen.add(key);
 
-        parsed.walk(node => {
-          if (
-            node.type === 'function' &&
-            node.value === 'url' &&
-            node.nodes.length > 0 &&
-            !node.nodes[0].value.startsWith('#') // IE's `behavior: url(#default#VML)`
-          ) {
-            node.nodes[0].value = asset.addURLDependency(node.nodes[0].value, {
-              loc: createDependencyLocation(
-                decl.source.start,
-                node.nodes[0].value,
-              ),
-            });
-            isDirty = true;
+        let e = exports[key];
+        let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
+
+        for (let ref of e.composes) {
+          s += ' ';
+          if (ref.type === 'local') {
+            add(nullthrows(locals.get(ref.name)));
+            s +=
+              '${' +
+              `module.exports[${JSON.stringify(
+                nullthrows(locals.get(ref.name)),
+              )}]` +
+              '}';
+          } else if (ref.type === 'global') {
+            s += ref.name;
+          } else if (ref.type === 'dependency') {
+            let d = dependencies.get(ref.specifier);
+            if (d == null) {
+              d = `dep_${c++}`;
+              depjs += `import * as ${d} from ${JSON.stringify(
+                ref.specifier,
+              )};\n`;
+              dependencies.set(ref.specifier, d);
+              asset.addDependency({
+                specifier: ref.specifier,
+                specifierType: 'esm',
+                packageConditions: ['style'],
+              });
+            }
+            s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
           }
-        });
+        }
 
-        if (isDirty) {
-          decl.value = parsed.toString();
-          ast.isDirty = true;
+        s += '`;\n';
+
+        // If the export is referenced internally (e.g. used @keyframes), add a self-reference
+        // to the JS so the symbol is retained during tree-shaking.
+        if (e.isReferenced) {
+          s += `module.exports[${JSON.stringify(key)}];\n`;
         }
+
+        js += s;
+      };
+
+      // It's possible that the exports can be ordered differently between builds.
+      // Sorting by key is safe as the order is irrelevant but needs to be deterministic.
+      for (let key of Object.keys(exports).sort()) {
+        asset.symbols.set(key, exports[key].name);
+        add(key);
       }
-    });
 
-    return [asset];
-  },
+      if (res.dependencies) {
+        for (let dep of res.dependencies) {
+          if (dep.type === 'import') {
+            // TODO: Figure out how to treeshake this
+            let d = `dep_$${c++}`;
+            depjs += `import * as ${d} from ${JSON.stringify(dep.url)};\n`;
+            js += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+            asset.symbols.set('*', '*');
+          }
+        }
+      }
+
+      if (res.references != null) {
+        let references = res.references;
+        for (let symbol in references) {
+          let reference = references[symbol];
+          asset.addDependency({
+            specifier: reference.specifier,
+            specifierType: 'esm',
+            packageConditions: ['style'],
+            symbols: new Map([
+              [reference.name, {local: symbol, isWeak: false, loc: null}],
+            ]),
+          });
+
+          asset.meta.hasReferences = true;
+        }
+      }
 
-  async generate({asset}) {
-    let code;
-    if (!asset.ast || !asset.ast.isDirty) {
-      code = await asset.getCode();
-    } else {
-      code = '';
-      postcss.stringify(asset.ast.program, c => {
-        code += c;
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: jsDeps,
+        env,
       });
     }
 
-    return {
-      code,
-    };
+    return assets;
   },
-});
+}): Transformer);
+
+let cache = new Map();
+
+function getTargets(browsers) {
+  if (browsers == null) {
+    return undefined;
+  }
+
+  let cached = cache.get(browsers);
+  if (cached != null) {
+    return cached;
+  }
+
+  let targets = browserslistToTargets(browserslist(browsers));
+
+  cache.set(browsers, targets);
+  return targets;
+}