@parcel/transformer-css 2.3.2 → 2.5.0

package/lib/CSSTransformer.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-function _hash() {
-  const data = require("@parcel/hash");
+function _path() {
+  const data = _interopRequireDefault(require("path"));
 
-  _hash = function () {
+  _path = function () {
     return data;
   };
 
@@ -35,118 +35,76 @@ function _plugin() {
   return data;
 }
 
-function _utils() {
-  const data = require("@parcel/utils");
+function _css() {
+  const data = require("@parcel/css");
 
-  _utils = function () {
+  _css = function () {
     return data;
   };
 
   return data;
 }
 
-function _postcss() {
-  const data = _interopRequireDefault(require("postcss"));
+function _utils() {
+  const data = require("@parcel/utils");
 
-  _postcss = function () {
+  _utils = function () {
     return data;
   };
 
   return data;
 }
 
-function _nullthrows() {
-  const data = _interopRequireDefault(require("nullthrows"));
+function _browserslist() {
+  const data = _interopRequireDefault(require("browserslist"));
 
-  _nullthrows = function () {
+  _browserslist = function () {
     return data;
   };
 
   return data;
 }
 
-function _postcssValueParser() {
-  const data = _interopRequireDefault(require("postcss-value-parser"));
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
 
-  _postcssValueParser = function () {
+  _nullthrows = function () {
     return data;
   };
 
   return data;
 }
 
-function _semver() {
-  const data = _interopRequireDefault(require("semver"));
+function _diagnostic() {
+  const data = _interopRequireWildcard(require("@parcel/diagnostic"));
 
-  _semver = function () {
+  _diagnostic = function () {
     return data;
   };
 
   return data;
 }
 
-function _path() {
-  const data = _interopRequireDefault(require("path"));
+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); }
 
-  _path = function () {
-    return data;
-  };
-
-  return data;
-}
+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; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const URL_RE = /url\s*\(/;
-const IMPORT_RE = /@import/;
-const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
-const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
-const MODULE_BY_NAME_RE = /\.module\./;
-
-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
+  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.
-    let isCSSModule = asset.meta.cssModulesCompiled !== true && MODULE_BY_NAME_RE.test(asset.filePath);
-
-    if (asset.meta.hasDependencies === false && !isCSSModule) {
-      return null;
-    }
-
-    let code = await asset.getCode();
-
-    if (code != null && !canHaveDependencies(asset.filePath, code) && !isCSSModule) {
-      return null;
-    }
-
-    return {
-      type: 'postcss',
-      version: '8.2.1',
-      program: _postcss().default.parse(code, {
-        from: asset.filePath
-      }).toJSON()
-    };
+    let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: '@parcel/transformer-css'
+    });
+    return conf === null || conf === void 0 ? void 0 : conf.contents;
   },
 
   async transform({
     asset,
-    resolve,
+    config,
     options
   }) {
     // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
@@ -158,273 +116,200 @@ var _default = new (_plugin().Transformer)({
         browsers: asset.env.engines.browsers
       },
       shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
       sourceMap: asset.env.sourceMap
     });
-    let isCSSModule = asset.meta.cssModulesCompiled !== true && MODULE_BY_NAME_RE.test(asset.filePath); // 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 [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 = (0, _css().transformStyleAttribute)({
+          code,
+          analyzeDependencies: true,
+          targets
+        });
+      } else {
+        var _config$cssModules;
+
+        res = (0, _css().transform)({
+          filename: _path().default.relative(options.projectRoot, asset.filePath),
+          code,
+          cssModules: asset.meta.type !== 'tag' && ((_config$cssModules = config === null || config === void 0 ? void 0 : config.cssModules) !== null && _config$cssModules !== void 0 ? _config$cssModules : asset.meta.cssModulesCompiled == null && /\.module\./.test(asset.filePath)),
+          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,
+          targets
+        });
+      }
+    } catch (err) {
+      var _err$data;
 
-    let ast = await asset.getAST();
+      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()';
+      }
 
-    if (!ast || asset.meta.hasDependencies === false && !isCSSModule) {
-      return [asset];
+      throw new (_diagnostic().default)({
+        diagnostic
+      });
     }
 
-    let program = _postcss().default.fromJSON(ast.program);
+    asset.setBuffer(res.code);
 
-    let assets = [asset];
+    if (res.map != null) {
+      let vlqMap = JSON.parse(res.map.toString());
+      let map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(vlqMap);
 
-    if (isCSSModule) {
-      assets = await compileCSSModules(asset, env, program, resolve, options);
-    }
+      if (originalMap) {
+        map.extends(originalMap);
+      }
 
-    if (asset.meta.hasDependencies === false) {
-      return assets;
+      asset.setMap(map);
     }
 
-    let originalSourceMap = await asset.getMap();
+    if (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = dep.loc;
 
-    let createLoc = (start, specifier, lineOffset, colOffset, o) => {
-      let loc = (0, _utils().createDependencyLocation)(start, specifier, lineOffset, colOffset, o);
+        if (originalMap) {
+          loc = (0, _utils().remapSourceLocation)(loc, originalMap);
+        }
 
-      if (originalSourceMap) {
-        loc = (0, _utils().remapSourceLocation)(loc, originalSourceMap);
+        if (dep.type === 'import' && !res.exports) {
+          asset.addDependency({
+            specifier: dep.url,
+            specifierType: 'url',
+            loc,
+            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
+            }
+          });
+        }
       }
+    }
 
-      return loc;
-    };
-
-    let isDirty = false;
-    program.walkAtRules('import', rule => {
-      let params = (0, _postcssValueParser().default)(rule.params);
-      let [name, ...media] = params.nodes;
-      let specifier;
+    let assets = [asset];
 
-      if (name.type === 'function' && name.value === 'url' && name.nodes.length) {
-        name = name.nodes[0];
+    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);
       }
 
-      specifier = name.value;
-
-      if (!specifier) {
-        throw new Error('Could not find import name for ' + String(rule));
-      } // 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 = {
-        specifier,
-        specifierType: 'url',
-        // Offset by 8 as it does not include `@import `
-        loc: createLoc((0, _nullthrows().default)(rule.source.start), specifier, 0, 8),
-        meta: {
-          // For the glob resolver to distinguish between `@import` and other URL dependencies.
-          isCSSImport: true,
-          media
-        }
-      };
-      asset.addDependency(dep);
-      rule.remove(); // }
+      let seen = new Set();
 
-      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 urlNode = node.nodes[0];
-            let url = asset.addURLDependency(urlNode.value, {
-              loc: decl.source && decl.source.start && createLoc(decl.source.start, urlNode.value, 0, decl.source.start.offset + urlNode.sourceIndex + 1, 0)
-            });
-            isDeclDirty = urlNode.value !== url;
-            urlNode.type = 'string';
-            urlNode.quote = '"';
-            urlNode.value = url;
-          }
-        });
-
-        if (isDeclDirty) {
-          decl.value = parsed.toString();
-          isDirty = true;
+      let add = key => {
+        if (seen.has(key)) {
+          return;
         }
-      }
-    });
 
-    if (isDirty) {
-      asset.setAST({ ...ast,
-        program: program.toJSON()
-      });
-    }
+        seen.add(key);
+        let e = exports[key];
+        let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
 
-    return assets;
-  },
+        for (let ref of e.composes) {
+          s += ' ';
 
-  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 (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 (result.map != null) {
-      map = new (_sourceMap().default)(options.projectRoot);
-      map.addVLQMap(result.map.toJSON());
+            if (d == null) {
+              d = `dep_${c++}`;
+              depjs += `import * as ${d} from ${JSON.stringify(ref.specifier)};\n`;
+              dependencies.set(ref.specifier, d);
+            }
 
-      if (originalSourceMap) {
-        map.extends(originalSourceMap.toBuffer());
-      }
-    } else {
-      map = originalSourceMap;
-    }
+            s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
+          }
+        }
 
-    return {
-      content: result.css,
-      map
-    };
-  }
+        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`;
+        }
 
-exports.default = _default;
+        js += s;
+      };
 
-async function compileCSSModules(asset, env, program, resolve, options) {
-  let cssModules;
-  let code = asset.isASTDirty() ? null : await asset.getCode();
-
-  if (code == null || COMPOSES_RE.test(code)) {
-    program.walkDecls(decl => {
-      let [, importPath] = FROM_IMPORT_RE.exec(decl.value) || [];
-
-      if (decl.prop === 'composes' && importPath != null) {
-        let parsed = (0, _postcssValueParser().default)(decl.value);
-        let start = decl.source.start;
-        parsed.walk(node => {
-          if (node.type === 'string') {
-            asset.addDependency({
-              specifier: importPath,
-              specifierType: 'url',
-              loc: start ? {
-                filePath: asset.filePath,
-                start,
-                end: {
-                  line: start.line,
-                  column: start.column + importPath.length
-                }
-              } : undefined
-            });
-          }
-        });
+      for (let key in exports) {
+        asset.symbols.set(key, exports[key].name);
+        add(key);
       }
-    });
-  }
-
-  let postcssModules = await options.packageManager.require('postcss-modules', asset.filePath, {
-    range: '^4.3.0',
-    saveDev: true,
-    shouldAutoInstall: options.shouldAutoInstall
-  });
-  let {
-    root
-  } = await (0, _postcss().default)([postcssModules({
-    getJSON: (filename, json) => cssModules = json,
-    Loader: await createLoader(asset, resolve, options),
-    generateScopedName: (name, filename) => `${name}_${(0, _hash().hashString)(_path().default.relative(options.projectRoot, filename)).substr(0, 6)}`
-  })]).process(program, {
-    from: asset.filePath,
-    to: asset.filePath
-  });
-  asset.setAST({
-    type: 'postcss',
-    version: '8.2.1',
-    program: root.toJSON()
-  });
-  let assets = [asset];
-
-  if (cssModules) {
-    // $FlowFixMe
-    let cssModulesList = Object.entries(cssModules);
-    let deps = asset.getDependencies().filter(dep => dep.priority === 'sync');
-    let code;
-
-    if (deps.length > 0) {
-      code = `
-        module.exports = Object.assign({}, ${deps.map(dep => `require(${JSON.stringify(dep.specifier)})`).join(', ')}, ${JSON.stringify(cssModules, null, 2)});
-      `;
-    } else {
-      code = cssModulesList.map( // This syntax enables shaking the invidual statements, so that unused classes don't even exist in JS.
-      ([className, classNameHashed]) => `module.exports[${JSON.stringify(className)}] = ${JSON.stringify(classNameHashed)};`).join('\n');
-    }
 
-    asset.symbols.ensure();
+      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('*', '*');
+          }
+        }
+      }
 
-    for (let [k, v] of cssModulesList) {
-      asset.symbols.set(k, v);
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: [],
+        env
+      });
     }
 
-    asset.symbols.set('default', 'default');
-    assets.push({
-      type: 'js',
-      content: code,
-      env
-    });
+    return assets;
   }
 
-  return assets;
-}
-
-async function createLoader(asset, resolve, options) {
-  let {
-    default: FileSystemLoader
-  } = await options.packageManager.require('postcss-modules/build/css-loader-core/loader', asset.filePath);
-  return class extends FileSystemLoader {
-    async fetch(composesPath, relativeTo) {
-      let importPath = composesPath.replace(/^["']|["']$/g, '');
-      let resolved = await resolve(relativeTo, importPath);
-
-      let rootRelativePath = _path().default.resolve(_path().default.dirname(relativeTo), resolved);
-
-      let root = _path().default.resolve('/'); // fixes an issue on windows which is part of the css-modules-loader-core
-      // see https://github.com/css-modules/css-modules-loader-core/issues/230
+});
 
+exports.default = _default;
+let cache = new Map();
 
-      if (rootRelativePath.startsWith(root)) {
-        rootRelativePath = rootRelativePath.substr(root.length);
-      }
+function getTargets(browsers) {
+  if (browsers == null) {
+    return undefined;
+  }
 
-      let source = await asset.fs.readFile(resolved, 'utf-8');
-      let {
-        exportTokens
-      } = await this.core.load(source, rootRelativePath, undefined, // $FlowFixMe[method-unbinding]
-      this.fetch.bind(this));
-      return exportTokens;
-    }
+  let cached = cache.get(browsers);
 
-    get finalSource() {
-      return '';
-    }
+  if (cached != null) {
+    return cached;
+  }
 
-  };
+  let targets = (0, _css().browserslistToTargets)((0, _browserslist().default)(browsers));
+  cache.set(browsers, targets);
+  return targets;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.3.2",
+  "version": "2.5.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,20 +17,16 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.3.2"
+    "parcel": "^2.5.0"
   },
   "dependencies": {
-    "@parcel/hash": "2.3.2",
-    "@parcel/plugin": "2.3.2",
+    "@parcel/css": "^1.8.1",
+    "@parcel/diagnostic": "2.5.0",
+    "@parcel/plugin": "2.5.0",
     "@parcel/source-map": "^2.0.0",
-    "@parcel/utils": "2.3.2",
-    "nullthrows": "^1.1.1",
-    "postcss": "^8.4.5",
-    "postcss-value-parser": "^4.2.0",
-    "semver": "^5.7.1"
+    "@parcel/utils": "2.5.0",
+    "browserslist": "^4.6.6",
+    "nullthrows": "^1.1.1"
   },
-  "devDependencies": {
-    "postcss-modules": "^4.3.0"
-  },
-  "gitHead": "47379bf8fabeb2cfe03ade8802d942388b153e5b"
+  "gitHead": "5cfb846d742eb86b1232e531be6e0e513551d838"
 }

package/src/CSSTransformer.js

@@ -1,68 +1,26 @@
-// @flow
+// @flow strict-local
 
-import type {Root} from 'postcss';
-import type {FilePath, MutableAsset, PluginOptions} from '@parcel/types';
-
-import {hashString} from '@parcel/hash';
+import path from 'path';
 import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
-import {createDependencyLocation, remapSourceLocation} from '@parcel/utils';
-import postcss from 'postcss';
+import {
+  transform,
+  transformStyleAttribute,
+  browserslistToTargets,
+} from '@parcel/css';
+import {remapSourceLocation, relativePath} from '@parcel/utils';
+import browserslist from 'browserslist';
 import nullthrows from 'nullthrows';
-import valueParser from 'postcss-value-parser';
-import semver from 'semver';
-import path from 'path';
-
-const URL_RE = /url\s*\(/;
-const IMPORT_RE = /@import/;
-const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
-const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
-const MODULE_BY_NAME_RE = /\.module\./;
-
-function canHaveDependencies(filePath: FilePath, code: string) {
-  return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
-}
+import ThrowableDiagnostic, {errorToDiagnostic} from '@parcel/diagnostic';
 
 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.
-    let isCSSModule =
-      asset.meta.cssModulesCompiled !== true &&
-      MODULE_BY_NAME_RE.test(asset.filePath);
-    if (asset.meta.hasDependencies === false && !isCSSModule) {
-      return null;
-    }
-
-    let code = await asset.getCode();
-    if (
-      code != null &&
-      !canHaveDependencies(asset.filePath, code) &&
-      !isCSSModule
-    ) {
-      return null;
-    }
-
-    return {
-      type: 'postcss',
-      version: '8.2.1',
-      program: postcss
-        .parse(code, {
-          from: asset.filePath,
-        })
-        .toJSON(),
-    };
+  async loadConfig({config, options}) {
+    let conf = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: '@parcel/transformer-css',
+    });
+    return conf?.contents;
   },
-
-  async transform({asset, resolve, options}) {
+  async transform({asset, config, options}) {
     // 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;
@@ -72,305 +30,214 @@ export default (new Transformer({
         browsers: asset.env.engines.browsers,
       },
       shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
       sourceMap: asset.env.sourceMap,
     });
 
-    let isCSSModule =
-      asset.meta.cssModulesCompiled !== true &&
-      MODULE_BY_NAME_RE.test(asset.filePath);
+    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,
+          targets,
+        });
+      } else {
+        res = transform({
+          filename: path.relative(options.projectRoot, asset.filePath),
+          code,
+          cssModules:
+            asset.meta.type !== 'tag' &&
+            (config?.cssModules ??
+              (asset.meta.cssModulesCompiled == null &&
+                /\.module\./.test(asset.filePath))),
+          analyzeDependencies: asset.meta.hasDependencies !== false,
+          sourceMap: !!asset.env.sourceMap,
+          drafts: config?.drafts,
+          pseudoClasses: config?.pseudoClasses,
+          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()';
+      }
 
-    // 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 && !isCSSModule)) {
-      return [asset];
+      throw new ThrowableDiagnostic({
+        diagnostic,
+      });
     }
 
-    let program: Root = postcss.fromJSON(ast.program);
-    let assets = [asset];
-    if (isCSSModule) {
-      assets = await compileCSSModules(asset, env, program, resolve, options);
-    }
+    asset.setBuffer(res.code);
 
-    if (asset.meta.hasDependencies === false) {
-      return assets;
-    }
+    if (res.map != null) {
+      let vlqMap = JSON.parse(res.map.toString());
+      let map = new SourceMap(options.projectRoot);
+      map.addVLQMap(vlqMap);
 
-    let originalSourceMap = await asset.getMap();
-    let createLoc = (start, specifier, lineOffset, colOffset, o) => {
-      let loc = createDependencyLocation(
-        start,
-        specifier,
-        lineOffset,
-        colOffset,
-        o,
-      );
-      if (originalSourceMap) {
-        loc = remapSourceLocation(loc, originalSourceMap);
+      if (originalMap) {
+        map.extends(originalMap);
       }
-      return loc;
-    };
 
-    let isDirty = false;
-    program.walkAtRules('import', rule => {
-      let params = valueParser(rule.params);
-      let [name, ...media] = params.nodes;
-      let specifier;
-      if (
-        name.type === 'function' &&
-        name.value === 'url' &&
-        name.nodes.length
-      ) {
-        name = name.nodes[0];
+      asset.setMap(map);
+    }
+
+    if (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = dep.loc;
+        if (originalMap) {
+          loc = remapSourceLocation(loc, originalMap);
+        }
+
+        if (dep.type === 'import' && !res.exports) {
+          asset.addDependency({
+            specifier: dep.url,
+            specifierType: 'url',
+            loc,
+            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];
 
-      specifier = name.value;
+    if (res.exports != null) {
+      let exports = res.exports;
+      asset.symbols.ensure();
+      asset.symbols.set('default', 'default');
 
-      if (!specifier) {
-        throw new Error('Could not find import name for ' + String(rule));
+      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);
       }
 
-      // 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 = {
-        specifier,
-        specifierType: 'url',
-        // Offset by 8 as it does not include `@import `
-        loc: createLoc(nullthrows(rule.source.start), specifier, 0, 8),
-        meta: {
-          // For the glob resolver to distinguish between `@import` and other URL dependencies.
-          isCSSImport: true,
-          media,
-        },
+      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(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);
+            }
+            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;
       };
-      asset.addDependency(dep);
-      rule.remove();
-      // }
-      isDirty = true;
-    });
 
-    program.walkDecls(decl => {
-      if (URL_RE.test(decl.value)) {
-        let parsed = valueParser(decl.value);
-        let isDeclDirty = false;
+      for (let key in exports) {
+        asset.symbols.set(key, exports[key].name);
+        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)`
-          ) {
-            let urlNode = node.nodes[0];
-            let url = asset.addURLDependency(urlNode.value, {
-              loc:
-                decl.source &&
-                decl.source.start &&
-                createLoc(
-                  decl.source.start,
-                  urlNode.value,
-                  0,
-                  decl.source.start.offset + urlNode.sourceIndex + 1,
-                  0,
-                ),
-            });
-            isDeclDirty = urlNode.value !== url;
-            urlNode.type = 'string';
-            urlNode.quote = '"';
-            urlNode.value = url;
+      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 (isDeclDirty) {
-          decl.value = parsed.toString();
-          isDirty = true;
         }
       }
-    });
 
-    if (isDirty) {
-      asset.setAST({
-        ...ast,
-        program: program.toJSON(),
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: jsDeps,
+        env,
       });
     }
 
     return assets;
   },
-
-  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,
-    });
-
-    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());
-      }
-    } else {
-      map = originalSourceMap;
-    }
-
-    return {
-      content: result.css,
-      map,
-    };
-  },
 }): Transformer);
 
-async function compileCSSModules(asset, env, program, resolve, options) {
-  let cssModules;
+let cache = new Map();
 
-  let code = asset.isASTDirty() ? null : await asset.getCode();
-  if (code == null || COMPOSES_RE.test(code)) {
-    program.walkDecls(decl => {
-      let [, importPath] = FROM_IMPORT_RE.exec(decl.value) || [];
-      if (decl.prop === 'composes' && importPath != null) {
-        let parsed = valueParser(decl.value);
-        let start = (decl.source.start: any);
-
-        parsed.walk(node => {
-          if (node.type === 'string') {
-            asset.addDependency({
-              specifier: importPath,
-              specifierType: 'url',
-              loc: start
-                ? {
-                    filePath: asset.filePath,
-                    start,
-                    end: {
-                      line: start.line,
-                      column: start.column + importPath.length,
-                    },
-                  }
-                : undefined,
-            });
-          }
-        });
-      }
-    });
+function getTargets(browsers) {
+  if (browsers == null) {
+    return undefined;
   }
 
-  let postcssModules = await options.packageManager.require(
-    'postcss-modules',
-    asset.filePath,
-    {
-      range: '^4.3.0',
-      saveDev: true,
-      shouldAutoInstall: options.shouldAutoInstall,
-    },
-  );
-
-  let {root} = await postcss([
-    postcssModules({
-      getJSON: (filename, json) => (cssModules = json),
-      Loader: await createLoader(asset, resolve, options),
-      generateScopedName: (name, filename) =>
-        `${name}_${hashString(
-          path.relative(options.projectRoot, filename),
-        ).substr(0, 6)}`,
-    }),
-  ]).process(program, {from: asset.filePath, to: asset.filePath});
-  asset.setAST({
-    type: 'postcss',
-    version: '8.2.1',
-    program: root.toJSON(),
-  });
-
-  let assets = [asset];
-  if (cssModules) {
-    // $FlowFixMe
-    let cssModulesList = (Object.entries(cssModules): Array<[string, string]>);
-    let deps = asset.getDependencies().filter(dep => dep.priority === 'sync');
-    let code: string;
-    if (deps.length > 0) {
-      code = `
-        module.exports = Object.assign({}, ${deps
-          .map(dep => `require(${JSON.stringify(dep.specifier)})`)
-          .join(', ')}, ${JSON.stringify(cssModules, null, 2)});
-      `;
-    } else {
-      code = cssModulesList
-        .map(
-          // This syntax enables shaking the invidual statements, so that unused classes don't even exist in JS.
-          ([className, classNameHashed]) =>
-            `module.exports[${JSON.stringify(className)}] = ${JSON.stringify(
-              classNameHashed,
-            )};`,
-        )
-        .join('\n');
-    }
-
-    asset.symbols.ensure();
-    for (let [k, v] of cssModulesList) {
-      asset.symbols.set(k, v);
-    }
-    asset.symbols.set('default', 'default');
-
-    assets.push({
-      type: 'js',
-      content: code,
-      env,
-    });
+  let cached = cache.get(browsers);
+  if (cached != null) {
+    return cached;
   }
-  return assets;
-}
 
-async function createLoader(
-  asset: MutableAsset,
-  resolve: (from: FilePath, to: string) => Promise<FilePath>,
-  options: PluginOptions,
-) {
-  let {default: FileSystemLoader} = await options.packageManager.require(
-    'postcss-modules/build/css-loader-core/loader',
-    asset.filePath,
-  );
-  return class ParcelFileSystemLoader extends FileSystemLoader {
-    async fetch(composesPath, relativeTo) {
-      let importPath = composesPath.replace(/^["']|["']$/g, '');
-      let resolved = await resolve(relativeTo, importPath);
-      let rootRelativePath = path.resolve(path.dirname(relativeTo), resolved);
-      let root = path.resolve('/');
-      // fixes an issue on windows which is part of the css-modules-loader-core
-      // see https://github.com/css-modules/css-modules-loader-core/issues/230
-      if (rootRelativePath.startsWith(root)) {
-        rootRelativePath = rootRelativePath.substr(root.length);
-      }
-
-      let source = await asset.fs.readFile(resolved, 'utf-8');
-      let {exportTokens} = await this.core.load(
-        source,
-        rootRelativePath,
-        undefined,
-        // $FlowFixMe[method-unbinding]
-        this.fetch.bind(this),
-      );
-      return exportTokens;
-    }
+  let targets = browserslistToTargets(browserslist(browsers));
 
-    get finalSource() {
-      return '';
-    }
-  };
+  cache.set(browsers, targets);
+  return targets;
 }