@parcel/transformer-css 2.0.0-nightly.146 → 2.0.0-nightly.1470

package/lib/CSSTransformer.js

@@ -4,174 +4,375 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _plugin = require("@parcel/plugin");
-
-var _utils = require("@parcel/utils");
-
-var _postcss = _interopRequireDefault(require("postcss"));
-
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
-
-var _semver = _interopRequireDefault(require("semver"));
-
-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);
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
 }
-
-var _default = new _plugin.Transformer({
-  canReuseAST({
-    ast
-  }) {
-    return ast.type === 'postcss' && _semver.default.satisfies(ast.version, '^7.0.0');
-  },
-
-  async parse({
-    asset
+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 native() {
+  const data = _interopRequireWildcard(require("lightningcss"));
+  native = 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(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 {
+  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 (!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: '7.0.0',
-      isDirty: false,
-      program: _postcss.default.parse(code, {
-        from: asset.filePath
-      })
-    };
+    return 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.
-
-    if (asset.isSplittable == null) {
-      asset.isSplittable = true;
+      shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
+      sourceMap: asset.env.sourceMap
+    });
+    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,
+          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 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 + 1
+              },
+              end: {
+                line: warning.loc.line,
+                column: warning.loc.column + 1
+              }
+            }]
+          }]
+        });
+      }
     }
-
-    ast.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];
+    asset.setBuffer(Buffer.from(res.code));
+    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 ' + 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
+            }
+          });
+        } 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: (0, _utils.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 = _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(); // }
+    }
+    let assets = [asset];
+    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 = '';
+      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 = (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$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);
+              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)}]` + '}';
+          }
         }
-      }
-    });
-    return [asset];
-  },
+        s += '`;\n';
 
-  async generate({
-    asset
-  }) {
-    let code;
-
-    if (!asset.ast || !asset.ast.isDirty) {
-      code = await asset.getCode();
-    } else {
-      code = '';
+        // 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;
+      };
 
-      _postcss.default.stringify(asset.ast.program, c => {
-        code += c;
+      // 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 (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;
+        }
+      }
+      assets.push({
+        type: 'js',
+        content: depjs + js,
+        dependencies: [],
+        env
       });
     }
-
-    return {
-      code
-    };
+    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,10 +1,14 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.0.0-nightly.146+f2a62434",
+  "version": "2.0.0-nightly.1470+3e7d56816",
   "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,23 @@
   "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.1468+3e7d56816"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-nightly.146+f2a62434",
-    "@parcel/utils": "2.0.0-nightly.146+f2a62434",
-    "postcss": "^7.0.5",
-    "postcss-value-parser": "^3.3.1",
-    "semver": "^5.4.1"
+    "@parcel/diagnostic": "2.0.0-nightly.1470+3e7d56816",
+    "@parcel/plugin": "2.0.0-nightly.1470+3e7d56816",
+    "@parcel/source-map": "^2.1.1",
+    "@parcel/utils": "2.0.0-nightly.1470+3e7d56816",
+    "browserslist": "^4.6.6",
+    "lightningcss": "^1.22.1",
+    "nullthrows": "^1.1.1"
+  },
+  "devDependencies": {
+    "lightningcss-wasm": "^1.22.1"
+  },
+  "browser": {
+    "lightningcss": "./wasm-wrapper.js"
   },
-  "gitHead": "f2a62434adbba86bdd56774833d70d7852988ed1"
+  "gitHead": "3e7d56816da81fd30b8906c9d5f389401373029f"
 }

package/src/CSSTransformer.js

@@ -1,178 +1,376 @@
-// @flow
+// @flow strict-local
 
-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} from '@parcel/utils';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-import semver from 'semver';
+import {
+  remapSourceLocation,
+  relativePath,
+  globToRegex,
+  normalizeSeparators,
+} from '@parcel/utils';
+import {type SourceLocation as LightningSourceLocation} from 'lightningcss';
+import * as native from 'lightningcss';
+import browserslist from 'browserslist';
+import nullthrows from 'nullthrows';
+import ThrowableDiagnostic, {errorToDiagnostic} from '@parcel/diagnostic';
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
-const IMPORT_RE = /@import/;
+const {transform, transformStyleAttribute, browserslistToTargets} = native;
 
-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;
+export default (new Transformer({
+  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 (!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: '7.0.0',
-      isDirty: false,
-      program: postcss.parse(code, {
-        from: asset.filePath,
-      }),
-    };
+    return 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(),
+      // $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?.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,
+          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 + 1,
+                  },
+                  end: {
+                    line: warning.loc.line,
+                    column: warning.loc.column + 1,
+                  },
+                },
+              ],
+            },
+          ],
+        });
+      }
     }
 
-    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(Buffer.from(res.code));
+
+    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 (res.dependencies) {
+      for (let dep of res.dependencies) {
+        let loc = convertLoc(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;
-
-        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,
-              ),
+      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}],
+              ]),
             });
-            isDirty = true;
+          } 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)}]` + '}';
           }
-        });
+        }
+
+        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}],
+            ]),
+          });
+        }
 
-        if (isDirty) {
-          decl.value = parsed.toString();
-          ast.isDirty = true;
+        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 (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}],
+            ]),
+          });
+
+          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;
+}
+
+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},
+  };
+}

package/wasm-wrapper.js

@@ -0,0 +1,26 @@
+import {transform, transformStyleAttribute} from 'lightningcss-wasm';
+
+export {default, browserslistToTargets} from 'lightningcss-wasm';
+
+// Hydrate Uint8Array into Buffer
+
+function transformWrapper(config) {
+  let result = transform(config);
+  return {
+    ...result,
+    code: Buffer.from(result.code),
+    map: result.map ? Buffer.from(result.map) : result.map,
+  };
+}
+function transformStyleAttributeWrapper(config) {
+  let result = transformStyleAttribute(config);
+  return {
+    ...result,
+    code: Buffer.from(result.code),
+  };
+}
+
+export {
+  transformWrapper as transform,
+  transformStyleAttributeWrapper as transformStyleAttribute,
+};