@parcel/transformer-css 2.0.0-beta.1 → 2.0.0-nightly.1002

package/lib/CSSTransformer.js

@@ -5,32 +5,113 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _sourceMap = _interopRequireDefault(require("@parcel/source-map"));
+function _hash() {
+  const data = require("@parcel/hash");
 
-var _plugin = require("@parcel/plugin");
+  _hash = function () {
+    return data;
+  };
 
-var _utils = require("@parcel/utils");
+  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 () {
+    return data;
+  };
+
+  return data;
+}
+
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
+
+  _nullthrows = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _postcssValueParser() {
+  const data = _interopRequireDefault(require("postcss-value-parser"));
+
+  _postcssValueParser = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _semver() {
+  const data = _interopRequireDefault(require("semver"));
 
-var _postcss = _interopRequireDefault(require("postcss"));
+  _semver = function () {
+    return data;
+  };
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+  return data;
+}
+
+function _path() {
+  const data = _interopRequireDefault(require("path"));
 
-var _semver = _interopRequireDefault(require("semver"));
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
+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({
+var _default = new (_plugin().Transformer)({
   canReuseAST({
     ast
   }) {
-    return ast.type === 'postcss' && _semver.default.satisfies(ast.version, '^7.0.0');
+    return ast.type === 'postcss' && _semver().default.satisfies(ast.version, '^8.2.1');
   },
 
   async parse({
@@ -42,109 +123,134 @@ var _default = new _plugin.Transformer({
     // 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) {
+    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)) {
+    if (code != null && !canHaveDependencies(asset.filePath, code) && !isCSSModule) {
       return null;
     }
 
     return {
       type: 'postcss',
-      version: '7.0.0',
-      program: _postcss.default.parse(code, {
+      version: '8.2.1',
+      program: _postcss().default.parse(code, {
         from: asset.filePath
-      })
+      }).toJSON()
     };
   },
 
   async transform({
-    asset
+    asset,
+    resolve,
+    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;
     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;
-    } // Check for `hasDependencies` being false here as well, as it's possible
+      shouldOptimize: asset.env.shouldOptimize,
+      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 ast = await asset.getAST();
 
-    if (!ast || asset.meta.hasDependencies === false) {
+    if (!ast || asset.meta.hasDependencies === false && !isCSSModule) {
       return [asset];
     }
 
+    let program = _postcss().default.fromJSON(ast.program);
+
+    let assets = [asset];
+
+    if (isCSSModule) {
+      assets = await compileCSSModules(asset, env, program, resolve, options);
+    }
+
+    if (asset.meta.hasDependencies === false) {
+      return assets;
+    }
+
+    let originalSourceMap = await asset.getMap();
+
+    let createLoc = (start, specifier, lineOffset, colOffset, o) => {
+      let loc = (0, _utils().createDependencyLocation)(start, specifier, lineOffset, colOffset, o);
+
+      if (originalSourceMap) {
+        loc = (0, _utils().remapSourceLocation)(loc, originalSourceMap);
+      }
+
+      return loc;
+    };
+
     let isDirty = false;
-    ast.program.walkAtRules('import', rule => {
-      let params = (0, _postcssValueParser.default)(rule.params);
+    program.walkAtRules('import', rule => {
+      let params = (0, _postcssValueParser().default)(rule.params);
       let [name, ...media] = params.nodes;
-      let moduleSpecifier;
+      let specifier;
 
       if (name.type === 'function' && name.value === 'url' && name.nodes.length) {
         name = name.nodes[0];
       }
 
-      moduleSpecifier = name.value;
-
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + rule);
-      }
-
-      if ((0, _utils.isURL)(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: (0, _utils.createDependencyLocation)(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: (0, _utils.createDependencyLocation)(rule.source.start, moduleSpecifier, 0, 8),
-          meta: {
-            media
-          }
-        };
-        asset.addDependency(dep);
-        rule.remove(); // }
-      }
+      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(); // }
 
       isDirty = true;
     });
-    ast.program.walkDecls(decl => {
+    program.walkDecls(decl => {
       if (URL_RE.test(decl.value)) {
-        let parsed = (0, _postcssValueParser.default)(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: (0, _utils.createDependencyLocation)(decl.source.start, node.nodes[0].value)
-              });
-              isDeclDirty = node.nodes[0].value !== url;
-              node.nodes[0].value = url;
-            }
+            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) {
@@ -155,60 +261,43 @@ var _default = new _plugin.Transformer({
     });
 
     if (isDirty) {
-      asset.setAST(ast);
+      asset.setAST({ ...ast,
+        program: program.toJSON()
+      });
     }
 
-    return [asset];
+    return assets;
   },
 
   async generate({
+    asset,
     ast,
     options
   }) {
-    let root = ast.program; // $FlowFixMe
-
-    if (Object.getPrototypeOf(ast.program) === Object.prototype) {
-      root = _postcss.default.root(ast.program);
-
-      let convert = (parent, node, index) => {
-        let type = node.type === 'atrule' ? 'atRule' : node.type;
-
-        let result = _postcss.default[type](node);
-
-        result.parent = parent;
-
-        if (parent) {
-          parent.nodes[index] = result;
-        }
-
-        if (result.walk) {
-          // $FlowFixMe
-          const container = result;
-          container.each((node, index) => {
-            convert(container, node, index);
-          });
-        }
-      };
-
-      root.each((node, index) => convert(root, node, index));
-    }
-
-    let result = await (0, _postcss.default)().process(root, {
+    let result = await (0, _postcss().default)().process(_postcss().default.fromJSON(ast.program), {
       from: undefined,
       to: options.projectRoot + '/index',
       map: {
         annotation: false,
-        inline: 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
+      stringifier: _postcss().default.stringify
     });
-    let map;
+    let map = null;
+    let originalSourceMap = await asset.getMap();
 
     if (result.map != null) {
-      map = new _sourceMap.default();
-      map.addRawMappings(result.map.toJSON());
+      map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(result.map.toJSON());
+
+      if (originalSourceMap) {
+        map.extends(originalSourceMap.toBuffer());
+      }
+    } else {
+      map = originalSourceMap;
     }
 
     return {
@@ -219,4 +308,123 @@ var _default = new _plugin.Transformer({
 
 });
 
-exports.default = _default;
+exports.default = _default;
+
+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
+            });
+          }
+        });
+      }
+    });
+  }
+
+  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();
+
+    for (let [k, v] of cssModulesList) {
+      asset.symbols.set(k, v);
+    }
+
+    asset.symbols.set('default', 'default');
+    assets.push({
+      type: 'js',
+      content: code,
+      env
+    });
+  }
+
+  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
+
+
+      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;
+    }
+
+    get finalSource() {
+      return '';
+    }
+
+  };
+}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-nightly.1002+5530a6ef",
   "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,16 +16,21 @@
   "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.1000+5530a6ef"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-beta.1",
-    "@parcel/source-map": "2.0.0-alpha.4.13",
-    "@parcel/utils": "2.0.0-beta.1",
-    "postcss": "^7.0.5",
-    "postcss-value-parser": "^3.3.1",
-    "semver": "^5.4.1"
+    "@parcel/hash": "2.3.2-nightly.2625+5530a6ef",
+    "@parcel/plugin": "2.0.0-nightly.1002+5530a6ef",
+    "@parcel/source-map": "^2.0.0",
+    "@parcel/utils": "2.0.0-nightly.1002+5530a6ef",
+    "nullthrows": "^1.1.1",
+    "postcss": "^8.4.5",
+    "postcss-value-parser": "^4.2.0",
+    "semver": "^5.7.1"
+  },
+  "devDependencies": {
+    "postcss-modules": "^4.3.0"
   },
-  "gitHead": "74335525be92e23bac4ed1bf30595443cfb238e3"
+  "gitHead": "5530a6eff8b619873353baeb0457ae4ec591e9fa"
 }

package/src/CSSTransformer.js

@@ -1,25 +1,31 @@
 // @flow
 
-import type {FilePath} from '@parcel/types';
-import type {Container, Node} from 'postcss';
+import type {Root} from 'postcss';
+import type {FilePath, MutableAsset, PluginOptions} from '@parcel/types';
 
+import {hashString} from '@parcel/hash';
 import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
-import {createDependencyLocation, isURL} from '@parcel/utils';
+import {createDependencyLocation, remapSourceLocation} from '@parcel/utils';
 import postcss from 'postcss';
+import nullthrows from 'nullthrows';
 import valueParser from 'postcss-value-parser';
 import semver from 'semver';
+import path from 'path';
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
+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);
 }
 
-export default new Transformer({
+export default (new Transformer({
   canReuseAST({ast}) {
-    return ast.type === 'postcss' && semver.satisfies(ast.version, '^7.0.0');
+    return ast.type === 'postcss' && semver.satisfies(ast.version, '^8.2.1');
   },
 
   async parse({asset}) {
@@ -29,54 +35,88 @@ export default new Transformer({
     // 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) {
+    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)) {
+    if (
+      code != null &&
+      !canHaveDependencies(asset.filePath, code) &&
+      !isCSSModule
+    ) {
       return null;
     }
 
     return {
       type: 'postcss',
-      version: '7.0.0',
-      program: postcss.parse(code, {
-        from: asset.filePath,
-      }),
+      version: '8.2.1',
+      program: postcss
+        .parse(code, {
+          from: asset.filePath,
+        })
+        .toJSON(),
     };
   },
 
-  async transform({asset}) {
+  async transform({asset, resolve, 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;
     asset.setEnvironment({
       context: 'browser',
       engines: {
         browsers: asset.env.engines.browsers,
       },
-      minify: asset.env.minify,
+      shouldOptimize: asset.env.shouldOptimize,
+      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 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 ast = await asset.getAST();
-    if (!ast || asset.meta.hasDependencies === false) {
+    if (!ast || (asset.meta.hasDependencies === false && !isCSSModule)) {
       return [asset];
     }
 
+    let program: Root = postcss.fromJSON(ast.program);
+    let assets = [asset];
+    if (isCSSModule) {
+      assets = await compileCSSModules(asset, env, program, resolve, options);
+    }
+
+    if (asset.meta.hasDependencies === false) {
+      return assets;
+    }
+
+    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);
+      }
+      return loc;
+    };
+
     let isDirty = false;
-    ast.program.walkAtRules('import', rule => {
+    program.walkAtRules('import', rule => {
       let params = valueParser(rule.params);
       let [name, ...media] = params.nodes;
-      let moduleSpecifier;
+      let specifier;
       if (
         name.type === 'function' &&
         name.value === 'url' &&
@@ -85,52 +125,39 @@ export default new Transformer({
         name = name.nodes[0];
       }
 
-      moduleSpecifier = name.value;
+      specifier = name.value;
 
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + rule);
+      if (!specifier) {
+        throw new Error('Could not find import name for ' + String(rule));
       }
 
-      if (isURL(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: createDependencyLocation(
-            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: createDependencyLocation(
-            rule.source.start,
-            moduleSpecifier,
-            0,
-            8,
-          ),
-          meta: {
-            media,
-          },
-        };
-        asset.addDependency(dep);
-        rule.remove();
-        // }
-      }
+      // 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,
+        },
+      };
+      asset.addDependency(dep);
+      rule.remove();
+      // }
       isDirty = true;
     });
 
-    ast.program.walkDecls(decl => {
+    program.walkDecls(decl => {
       if (URL_RE.test(decl.value)) {
         let parsed = valueParser(decl.value);
         let isDeclDirty = false;
@@ -142,14 +169,23 @@ export default new Transformer({
             node.nodes.length > 0 &&
             !node.nodes[0].value.startsWith('#') // IE's `behavior: url(#default#VML)`
           ) {
-            let url = asset.addURLDependency(node.nodes[0].value, {
-              loc: createDependencyLocation(
-                decl.source.start,
-                node.nodes[0].value,
-              ),
+            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 = node.nodes[0].value !== url;
-            node.nodes[0].value = url;
+            isDeclDirty = urlNode.value !== url;
+            urlNode.type = 'string';
+            urlNode.quote = '"';
+            urlNode.value = url;
           }
         });
 
@@ -161,54 +197,39 @@ export default new Transformer({
     });
 
     if (isDirty) {
-      asset.setAST(ast);
+      asset.setAST({
+        ...ast,
+        program: program.toJSON(),
+      });
     }
 
-    return [asset];
+    return assets;
   },
 
-  async generate({ast, options}) {
-    let root = ast.program;
-
-    // $FlowFixMe
-    if (Object.getPrototypeOf(ast.program) === Object.prototype) {
-      root = postcss.root(ast.program);
-      let convert = (parent: Container, node: Node, index: number) => {
-        let type = node.type === 'atrule' ? 'atRule' : node.type;
-        let result = postcss[type](node);
-        result.parent = parent;
-        if (parent) {
-          parent.nodes[index] = result;
-        }
-
-        if (result.walk) {
-          // $FlowFixMe
-          const container = (result: Container);
-          container.each((node, index) => {
-            convert(container, node, index);
-          });
-        }
-      };
-
-      root.each((node, index) => convert(root, node, index));
-    }
-
-    let result = await postcss().process(root, {
+  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;
+    let map = null;
+    let originalSourceMap = await asset.getMap();
     if (result.map != null) {
-      map = new SourceMap();
-      map.addRawMappings(result.map.toJSON());
+      map = new SourceMap(options.projectRoot);
+      map.addVLQMap(result.map.toJSON());
+      if (originalSourceMap) {
+        map.extends(originalSourceMap.toBuffer());
+      }
+    } else {
+      map = originalSourceMap;
     }
 
     return {
@@ -216,4 +237,140 @@ export default new Transformer({
       map,
     };
   },
-});
+}): Transformer);
+
+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 = 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,
+            });
+          }
+        });
+      }
+    });
+  }
+
+  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,
+    });
+  }
+  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;
+    }
+
+    get finalSource() {
+      return '';
+    }
+  };
+}