@parcel/transformer-css 2.0.0-beta.3.1 → 2.0.0-dev.1510

package/lib/CSSTransformer.js

@@ -4,275 +4,387 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
 function _sourceMap() {
   const data = _interopRequireDefault(require("@parcel/source-map"));
-
   _sourceMap = function () {
     return data;
   };
-
   return data;
 }
-
 function _plugin() {
   const data = require("@parcel/plugin");
-
   _plugin = function () {
     return data;
   };
-
   return data;
 }
-
 function _utils() {
   const data = require("@parcel/utils");
-
   _utils = function () {
     return data;
   };
-
   return data;
 }
-
-function _postcss() {
-  const data = _interopRequireDefault(require("postcss"));
-
-  _postcss = function () {
+function native() {
+  const data = _interopRequireWildcard(require("lightningcss"));
+  native = function () {
     return data;
   };
-
   return data;
 }
-
-function _nullthrows() {
-  const data = _interopRequireDefault(require("nullthrows"));
-
-  _nullthrows = function () {
+function _browserslist() {
+  const data = _interopRequireDefault(require("browserslist"));
+  _browserslist = function () {
     return data;
   };
-
   return data;
 }
-
-function _postcssValueParser() {
-  const data = _interopRequireDefault(require("postcss-value-parser"));
-
-  _postcssValueParser = function () {
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
+  _nullthrows = function () {
     return data;
   };
-
   return data;
 }
-
-function _semver() {
-  const data = _interopRequireDefault(require("semver"));
-
-  _semver = function () {
+function _diagnostic() {
+  const data = _interopRequireWildcard(require("@parcel/diagnostic"));
+  _diagnostic = function () {
     return data;
   };
-
   return data;
 }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
-const IMPORT_RE = /@import/;
-
-function canHaveDependencies(filePath, code) {
-  return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
-}
-
-var _default = new (_plugin().Transformer)({
-  canReuseAST({
-    ast
-  }) {
-    return ast.type === 'postcss' && _semver().default.satisfies(ast.version, '^8.2.1');
-  },
-
-  async parse({
-    asset
+const {
+  transform,
+  transformStyleAttribute,
+  browserslistToTargets
+} = native();
+var _default = exports.default = new (_plugin().Transformer)({
+  async loadConfig({
+    config,
+    options
   }) {
-    // 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;
+    var _contents$cssModules, _contents$cssModules2, _contents$cssModules3, _contents$cssModules4;
+    let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: '@parcel/transformer-css'
+    });
+    let contents = conf === null || conf === void 0 ? void 0 : conf.contents;
+    if (typeof (contents === null || contents === void 0 || (_contents$cssModules = contents.cssModules) === null || _contents$cssModules === void 0 ? void 0 : _contents$cssModules.include) === 'string') {
+      contents.cssModules.include = [(0, _utils().globToRegex)(contents.cssModules.include)];
+    } else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules2 = contents.cssModules) === null || _contents$cssModules2 === void 0 ? void 0 : _contents$cssModules2.include)) {
+      contents.cssModules.include = contents.cssModules.include.map(include => typeof include === 'string' ? (0, _utils().globToRegex)(include) : include);
     }
-
-    let code = await asset.getCode();
-
-    if (code != null && !canHaveDependencies(asset.filePath, code)) {
-      return null;
+    if (typeof (contents === null || contents === void 0 || (_contents$cssModules3 = contents.cssModules) === null || _contents$cssModules3 === void 0 ? void 0 : _contents$cssModules3.exclude) === 'string') {
+      contents.cssModules.exclude = [(0, _utils().globToRegex)(contents.cssModules.exclude)];
+    } else if (Array.isArray(contents === null || contents === void 0 || (_contents$cssModules4 = contents.cssModules) === null || _contents$cssModules4 === void 0 ? void 0 : _contents$cssModules4.exclude)) {
+      contents.cssModules.exclude = contents.cssModules.exclude.map(exclude => typeof exclude === 'string' ? (0, _utils().globToRegex)(exclude) : exclude);
     }
-
-    return {
-      type: 'postcss',
-      version: '8.2.1',
-      program: _postcss().default.parse(code, {
-        from: asset.filePath
-      }).toJSON()
-    };
+    return contents;
   },
-
   async transform({
-    asset
+    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
       },
       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;
-    } // 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.
-
-
-    let ast = await asset.getAST();
-
-    if (!ast || asset.meta.hasDependencies === false) {
-      return [asset];
+    });
+    let [code, originalMap] = await Promise.all([asset.getBuffer(), asset.getMap(),
+    // $FlowFixMe native.default is the init function only when bundled for the browser build
+    process.browser && native().default()]);
+    let targets = getTargets(asset.env.engines.browsers);
+    let res;
+    try {
+      if (asset.meta.type === 'attr') {
+        res = transformStyleAttribute({
+          code,
+          analyzeDependencies: true,
+          errorRecovery: (config === null || config === void 0 ? void 0 : config.errorRecovery) || false,
+          targets
+        });
+      } else {
+        let cssModules = false;
+        if (asset.meta.type !== 'tag' && asset.meta.cssModulesCompiled == null) {
+          let cssModulesConfig = config === null || config === void 0 ? void 0 : config.cssModules;
+          let isCSSModule = /\.module\./.test(asset.filePath);
+          if (asset.isSource) {
+            var _cssModulesConfig$exc;
+            let projectRootPath = _path().default.relative(options.projectRoot, asset.filePath);
+            if (typeof cssModulesConfig === 'boolean') {
+              isCSSModule = true;
+            } else if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.include) {
+              isCSSModule = cssModulesConfig.include.some(include => include.test(projectRootPath));
+            } else if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.global) {
+              isCSSModule = true;
+            }
+            if (cssModulesConfig !== null && cssModulesConfig !== void 0 && (_cssModulesConfig$exc = cssModulesConfig.exclude) !== null && _cssModulesConfig$exc !== void 0 && _cssModulesConfig$exc.some(exclude => exclude.test(projectRootPath))) {
+              isCSSModule = false;
+            }
+          }
+          if (isCSSModule) {
+            if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.dashedIdents && !asset.isSource) {
+              cssModulesConfig.dashedIdents = false;
+            }
+            cssModules = cssModulesConfig !== null && cssModulesConfig !== void 0 ? cssModulesConfig : true;
+          }
+        }
+        res = transform({
+          filename: (0, _utils().normalizeSeparators)(_path().default.relative(options.projectRoot, asset.filePath)),
+          code,
+          cssModules,
+          analyzeDependencies: asset.meta.hasDependencies !== false ? {
+            preserveImports: true
+          } : 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;
+      err.filePath = asset.filePath;
+      let diagnostic = (0, _diagnostic().errorToDiagnostic)(err, {
+        origin: '@parcel/transformer-css'
+      });
+      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()';
+      }
+      throw new (_diagnostic().default)({
+        diagnostic
+      });
     }
-
-    let program = _postcss().default.fromJSON(ast.program);
-
-    let originalSourceMap = await asset.getMap();
-
-    let createLoc = (start, specifier, lineOffset, colOffset) => {
-      let loc = (0, _utils().createDependencyLocation)(start, specifier, lineOffset, colOffset);
-
-      if (originalSourceMap) {
-        loc = (0, _utils().remapSourceLocation)(loc, originalSourceMap);
+    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 + 1
+              },
+              end: {
+                line: warning.loc.line,
+                column: warning.loc.column + 1
+              }
+            }]
+          }]
+        });
       }
-
-      return loc;
-    };
-
-    let isDirty = false;
-    program.walkAtRules('import', rule => {
-      let params = (0, _postcssValueParser().default)(rule.params);
-      let [name, ...media] = params.nodes;
-      let moduleSpecifier;
-
-      if (name.type === 'function' && name.value === 'url' && name.nodes.length) {
-        name = name.nodes[0];
+    }
+    if (res.map != null) {
+      let vlqMap = JSON.parse(Buffer.from(res.map).toString());
+      let map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(vlqMap);
+      if (originalMap) {
+        map.extends(originalMap);
       }
-
-      moduleSpecifier = name.value;
-
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + String(rule));
+      asset.setMap(map);
+    }
+    if (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = convertLoc(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,
+              placeholder: dep.placeholder
+            }
+          });
+        } else if (dep.type === 'url') {
+          asset.addURLDependency(dep.url, {
+            loc,
+            meta: {
+              placeholder: dep.placeholder
+            }
+          });
+        }
       }
-
-      if ((0, _utils().isURL)(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: createLoc((0, _nullthrows().default)(rule.source.start), asset.filePath, 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 = _postcssValueParser().default.stringify(media).trim();
-        let dep = {
-          moduleSpecifier,
-          // Offset by 8 as it does not include `@import `
-          loc: createLoc((0, _nullthrows().default)(rule.source.start), moduleSpecifier, 0, 8),
-          meta: {
-            media
-          }
-        };
-        asset.addDependency(dep);
-        rule.remove(); // }
+    }
+    let assets = [asset];
+    let buffer = Buffer.from(res.code);
+    if (res.exports != null) {
+      var _asset$uniqueKey;
+      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 cssImports = '';
+      for (let key in exports) {
+        locals.set(exports[key].name, key);
       }
-
-      isDirty = true;
-    });
-    program.walkDecls(decl => {
-      if (URL_RE.test(decl.value)) {
-        let parsed = (0, _postcssValueParser().default)(decl.value);
-        let isDeclDirty = 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)`
-          ) {
-              let url = asset.addURLDependency(node.nodes[0].value, {
-                loc: createLoc((0, _nullthrows().default)(decl.source.start), node.nodes[0].value, 0, node.nodes[0].sourceIndex)
+      (_asset$uniqueKey = asset.uniqueKey) !== null && _asset$uniqueKey !== void 0 ? _asset$uniqueKey : asset.uniqueKey = asset.id;
+      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') {
+            let exported = (0, _nullthrows().default)(locals.get(ref.name));
+            add(exported);
+            s += '${' + `module.exports[${JSON.stringify(exported)}]` + '}';
+            asset.addDependency({
+              specifier: (0, _nullthrows().default)(asset.uniqueKey),
+              specifierType: 'esm',
+              symbols: new Map([[exported, {
+                local: ref.name,
+                isWeak: false,
+                loc: null
+              }]])
+            });
+          } 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);
+              cssImports += `@import "${ref.specifier}";\n`;
+              asset.addDependency({
+                specifier: ref.specifier,
+                specifierType: 'esm',
+                packageConditions: ['style']
               });
-              isDeclDirty = node.nodes[0].value !== url;
-              node.nodes[0].value = url;
             }
-        });
-
-        if (isDeclDirty) {
-          decl.value = parsed.toString();
-          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`;
+          asset.addDependency({
+            specifier: (0, _nullthrows().default)(asset.uniqueKey),
+            specifierType: 'esm',
+            symbols: new Map([[key, {
+              local: exports[key].name,
+              isWeak: false,
+              loc: null
+            }]])
+          });
         }
+        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);
       }
-    });
-
-    if (isDirty) {
-      asset.setAST({ ...ast,
-        program: program.toJSON()
+      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;
+          cssImports += `@import "${reference.specifier}";\n`;
+        }
+      }
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: [],
+        env
       });
-    }
 
-    return [asset];
-  },
-
-  async generate({
-    asset,
-    ast,
-    options
-  }) {
-    let result = await (0, _postcss().default)().process(_postcss().default.fromJSON(ast.program), {
-      from: undefined,
-      to: options.projectRoot + '/index',
-      map: {
-        annotation: false,
-        inline: false,
-        sourcesContent: false
-      },
-      // Pass postcss's own stringifier to it to silence its warning
-      // as we don't want to perform any transformations -- only generate
-      stringifier: _postcss().default.stringify
-    });
-    let map = null;
-    let originalSourceMap = await asset.getMap();
-
-    if (result.map != null) {
-      map = new (_sourceMap().default)(options.projectRoot);
-      map.addVLQMap(result.map.toJSON());
-
-      if (originalSourceMap) {
-        map.extends(originalSourceMap.toBuffer());
+      // Prepend @import rules for each composes dependency so packager knows where to insert them.
+      if (cssImports.length > 0) {
+        buffer = Buffer.concat([Buffer.from(cssImports), buffer]);
       }
-    } else {
-      map = originalSourceMap;
     }
-
-    return {
-      content: result.css,
-      map
-    };
+    asset.setBuffer(buffer);
+    return assets;
   }
-
 });
-
-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 = browserslistToTargets((0, _browserslist().default)(browsers));
+  cache.set(browsers, targets);
+  return targets;
+}
+function convertLoc(loc) {
+  return {
+    filePath: loc.filePath,
+    start: {
+      line: loc.start.line,
+      column: loc.start.column
+    },
+    end: {
+      line: loc.end.line,
+      column: loc.end.column + 1
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.0.0-beta.3.1",
+  "version": "2.0.0-dev.1510+a9bb85adf",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,22 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.0.0-beta.1"
+    "parcel": "^2.0.0-dev.1508+a9bb85adf"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-beta.3.1",
-    "@parcel/source-map": "2.0.0-rc.1.0",
-    "@parcel/utils": "2.0.0-beta.3.1",
-    "nullthrows": "^1.1.1",
-    "postcss": "^8.2.1",
-    "postcss-value-parser": "^4.1.0",
-    "semver": "^5.4.1"
+    "@parcel/diagnostic": "2.0.0-dev.1510+a9bb85adf",
+    "@parcel/plugin": "2.0.0-dev.1510+a9bb85adf",
+    "@parcel/source-map": "^2.1.1",
+    "@parcel/utils": "2.0.0-dev.1510+a9bb85adf",
+    "browserslist": "^4.6.6",
+    "lightningcss": "^1.22.1",
+    "nullthrows": "^1.1.1"
   },
-  "gitHead": "daece49d003ba804bbdaa3a7ed3d6aaf446f166d"
+  "devDependencies": {
+    "lightningcss-wasm": "^1.22.1"
+  },
+  "browser": {
+    "lightningcss": "lightningcss-wasm"
+  },
+  "gitHead": "a9bb85adf8f3b38631e178b3aacaa30c78696e36"
 }

package/src/CSSTransformer.js

@@ -1,219 +1,390 @@
-// @flow
+// @flow strict-local
 
-import type {Root} from 'postcss';
-import type {FilePath} from '@parcel/types';
+import type {SourceLocation} from '@parcel/types';
 
+import path from 'path';
 import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
 import {
-  createDependencyLocation,
-  isURL,
   remapSourceLocation,
+  relativePath,
+  globToRegex,
+  normalizeSeparators,
 } from '@parcel/utils';
-import postcss from 'postcss';
+import {type SourceLocation as LightningSourceLocation} from 'lightningcss';
+import * as native from 'lightningcss';
+import browserslist from 'browserslist';
 import nullthrows from 'nullthrows';
-import valueParser from 'postcss-value-parser';
-import semver from 'semver';
+import ThrowableDiagnostic, {errorToDiagnostic} from '@parcel/diagnostic';
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
-const IMPORT_RE = /@import/;
-
-function canHaveDependencies(filePath: FilePath, code: string) {
-  return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
-}
+const {transform, transformStyleAttribute, browserslistToTargets} = native;
 
 export default (new Transformer({
-  canReuseAST({ast}) {
-    return ast.type === 'postcss' && semver.satisfies(ast.version, '^8.2.1');
-  },
-
-  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;
+  async loadConfig({config, options}) {
+    let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: '@parcel/transformer-css',
+    });
+    let contents = conf?.contents;
+    if (typeof contents?.cssModules?.include === 'string') {
+      contents.cssModules.include = [globToRegex(contents.cssModules.include)];
+    } else if (Array.isArray(contents?.cssModules?.include)) {
+      contents.cssModules.include = contents.cssModules.include.map(include =>
+        typeof include === 'string' ? globToRegex(include) : include,
+      );
     }
-
-    let code = await asset.getCode();
-    if (code != null && !canHaveDependencies(asset.filePath, code)) {
-      return null;
+    if (typeof contents?.cssModules?.exclude === 'string') {
+      contents.cssModules.exclude = [globToRegex(contents.cssModules.exclude)];
+    } else if (Array.isArray(contents?.cssModules?.exclude)) {
+      contents.cssModules.exclude = contents.cssModules.exclude.map(exclude =>
+        typeof exclude === 'string' ? globToRegex(exclude) : exclude,
+      );
     }
-
-    return {
-      type: 'postcss',
-      version: '8.2.1',
-      program: postcss
-        .parse(code, {
-          from: asset.filePath,
-        })
-        .toJSON(),
-    };
+    return contents;
   },
-
-  async 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,
       },
       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(),
+      // $FlowFixMe native.default is the init function only when bundled for the browser build
+      process.browser && native.default(),
+    ]);
 
-    // 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.
-    let ast = await asset.getAST();
-    if (!ast || asset.meta.hasDependencies === false) {
-      return [asset];
+    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;
+          let isCSSModule = /\.module\./.test(asset.filePath);
+          if (asset.isSource) {
+            let projectRootPath = path.relative(
+              options.projectRoot,
+              asset.filePath,
+            );
+            if (typeof cssModulesConfig === 'boolean') {
+              isCSSModule = true;
+            } else if (cssModulesConfig?.include) {
+              isCSSModule = cssModulesConfig.include.some(include =>
+                include.test(projectRootPath),
+              );
+            } else if (cssModulesConfig?.global) {
+              isCSSModule = true;
+            }
+
+            if (
+              cssModulesConfig?.exclude?.some(exclude =>
+                exclude.test(projectRootPath),
+              )
+            ) {
+              isCSSModule = false;
+            }
+          }
+
+          if (isCSSModule) {
+            if (cssModulesConfig?.dashedIdents && !asset.isSource) {
+              cssModulesConfig.dashedIdents = false;
+            }
+
+            cssModules = cssModulesConfig ?? true;
+          }
+        }
+
+        res = transform({
+          filename: normalizeSeparators(
+            path.relative(options.projectRoot, asset.filePath),
+          ),
+          code,
+          cssModules,
+          analyzeDependencies:
+            asset.meta.hasDependencies !== false
+              ? {
+                  preserveImports: true,
+                }
+              : 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 program: Root = postcss.fromJSON(ast.program);
-    let originalSourceMap = await asset.getMap();
-    let createLoc = (start, specifier, lineOffset, colOffset) => {
-      let loc = createDependencyLocation(
-        start,
-        specifier,
-        lineOffset,
-        colOffset,
-      );
-      if (originalSourceMap) {
-        loc = remapSourceLocation(loc, originalSourceMap);
+    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 + 1,
+                  },
+                  end: {
+                    line: warning.loc.line,
+                    column: warning.loc.column + 1,
+                  },
+                },
+              ],
+            },
+          ],
+        });
       }
-      return loc;
-    };
-
-    let isDirty = false;
-    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];
+    }
+
+    if (res.map != null) {
+      let vlqMap = JSON.parse(Buffer.from(res.map).toString());
+      let map = new SourceMap(options.projectRoot);
+      map.addVLQMap(vlqMap);
+
+      if (originalMap) {
+        map.extends(originalMap);
       }
 
-      moduleSpecifier = name.value;
+      asset.setMap(map);
+    }
 
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + String(rule));
+    if (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = convertLoc(dep.loc);
+        if (originalMap) {
+          loc = 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,
+              placeholder: dep.placeholder,
+            },
+          });
+        } else if (dep.type === 'url') {
+          asset.addURLDependency(dep.url, {
+            loc,
+            meta: {
+              placeholder: dep.placeholder,
+            },
+          });
+        }
       }
+    }
 
-      if (isURL(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: createLoc(nullthrows(rule.source.start), asset.filePath, 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: createLoc(nullthrows(rule.source.start), moduleSpecifier, 0, 8),
-          meta: {
-            media,
-          },
-        };
-        asset.addDependency(dep);
-        rule.remove();
-        // }
+    let assets = [asset];
+    let buffer = Buffer.from(res.code);
+
+    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 cssImports = '';
+
+      let jsDeps = [];
+
+      for (let key in exports) {
+        locals.set(exports[key].name, key);
       }
-      isDirty = true;
-    });
 
-    program.walkDecls(decl => {
-      if (URL_RE.test(decl.value)) {
-        let parsed = valueParser(decl.value);
-        let isDeclDirty = 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)`
-          ) {
-            let url = asset.addURLDependency(node.nodes[0].value, {
-              loc: createLoc(
-                nullthrows(decl.source.start),
-                node.nodes[0].value,
-                0,
-                node.nodes[0].sourceIndex,
-              ),
+      asset.uniqueKey ??= asset.id;
+
+      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') {
+            let exported = nullthrows(locals.get(ref.name));
+            add(exported);
+            s += '${' + `module.exports[${JSON.stringify(exported)}]` + '}';
+            asset.addDependency({
+              specifier: nullthrows(asset.uniqueKey),
+              specifierType: 'esm',
+              symbols: new Map([
+                [exported, {local: ref.name, isWeak: false, loc: null}],
+              ]),
             });
-            isDeclDirty = node.nodes[0].value !== url;
-            node.nodes[0].value = url;
+          } 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);
+              cssImports += `@import "${ref.specifier}";\n`;
+              asset.addDependency({
+                specifier: ref.specifier,
+                specifierType: 'esm',
+                packageConditions: ['style'],
+              });
+            }
+            s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
           }
-        });
+        }
 
-        if (isDeclDirty) {
-          decl.value = parsed.toString();
-          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`;
+          asset.addDependency({
+            specifier: nullthrows(asset.uniqueKey),
+            specifierType: 'esm',
+            symbols: new Map([
+              [key, {local: exports[key].name, isWeak: false, loc: null}],
+            ]),
+          });
         }
+
+        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);
       }
-    });
 
-    if (isDirty) {
-      asset.setAST({
-        ...ast,
-        program: program.toJSON(),
-      });
-    }
+      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('*', '*');
+          }
+        }
+      }
 
-    return [asset];
-  },
+      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}],
+            ]),
+          });
 
-  async generate({asset, ast, options}) {
-    let result = await postcss().process(postcss.fromJSON(ast.program), {
-      from: undefined,
-      to: options.projectRoot + '/index',
-      map: {
-        annotation: false,
-        inline: false,
-        sourcesContent: false,
-      },
-      // Pass postcss's own stringifier to it to silence its warning
-      // as we don't want to perform any transformations -- only generate
-      stringifier: postcss.stringify,
-    });
+          asset.meta.hasReferences = true;
+          cssImports += `@import "${reference.specifier}";\n`;
+        }
+      }
+
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: jsDeps,
+        env,
+      });
 
-    let map = null;
-    let originalSourceMap = await asset.getMap();
-    if (result.map != null) {
-      map = new SourceMap(options.projectRoot);
-      map.addVLQMap(result.map.toJSON());
-      if (originalSourceMap) {
-        map.extends(originalSourceMap.toBuffer());
+      // Prepend @import rules for each composes dependency so packager knows where to insert them.
+      if (cssImports.length > 0) {
+        buffer = Buffer.concat([Buffer.from(cssImports), buffer]);
       }
-    } else {
-      map = originalSourceMap;
     }
 
-    return {
-      content: result.css,
-      map,
-    };
+    asset.setBuffer(buffer);
+    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;
+}
+
+function convertLoc(loc: LightningSourceLocation): SourceLocation {
+  return {
+    filePath: loc.filePath,
+    start: {line: loc.start.line, column: loc.start.column},
+    end: {line: loc.end.line, column: loc.end.column + 1},
+  };
+}