@parcel/transformer-css 2.1.1 → 2.2.0

package/lib/CSSTransformer.js

@@ -5,6 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+function _hash() {
+  const data = require("@parcel/hash");
+
+  _hash = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _sourceMap() {
   const data = _interopRequireDefault(require("@parcel/source-map"));
 
@@ -65,6 +75,26 @@ function _postcssValueParser() {
   return data;
 }
 
+function _postcssModules() {
+  const data = _interopRequireDefault(require("postcss-modules"));
+
+  _postcssModules = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _fileSystemLoader() {
+  const data = _interopRequireDefault(require("css-modules-loader-core/lib/file-system-loader"));
+
+  _fileSystemLoader = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _semver() {
   const data = _interopRequireDefault(require("semver"));
 
@@ -75,10 +105,23 @@ function _semver() {
   return data;
 }
 
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const URL_RE = /url\s*\("?(?![a-z]+:)/;
 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);
@@ -100,13 +143,15 @@ 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;
     }
 
@@ -120,10 +165,13 @@ var _default = new (_plugin().Transformer)({
   },
 
   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: {
@@ -131,22 +179,33 @@ var _default = new (_plugin().Transformer)({
       },
       shouldOptimize: asset.env.shouldOptimize,
       sourceMap: asset.env.sourceMap
-    }); // Check for `hasDependencies` being false here as well, as it's possible
+    });
+    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) => {
-      let loc = (0, _utils().createDependencyLocation)(start, specifier, lineOffset, colOffset);
+    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);
@@ -203,11 +262,13 @@ var _default = new (_plugin().Transformer)({
         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: decl.source && decl.source.start && createLoc(decl.source.start, node.nodes[0].value, 0, node.nodes[0].sourceIndex)
+              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 = 'word';
+              urlNode.value = url;
             }
         });
 
@@ -224,7 +285,7 @@ var _default = new (_plugin().Transformer)({
       });
     }
 
-    return [asset];
+    return assets;
   },
 
   async generate({
@@ -266,4 +327,115 @@ 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 {
+    root
+  } = await (0, _postcss().default)([(0, _postcssModules().default)({
+    getJSON: (filename, json) => cssModules = json,
+    Loader: createLoader(asset, resolve),
+    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;
+}
+
+function createLoader(asset, resolve) {
+  return class extends _fileSystemLoader().default {
+    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,6 +1,6 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,19 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.1.1"
+    "parcel": "^2.2.0"
   },
   "dependencies": {
-    "@parcel/plugin": "^2.1.1",
+    "@parcel/hash": "^2.2.0",
+    "@parcel/plugin": "^2.2.0",
     "@parcel/source-map": "^2.0.0",
-    "@parcel/utils": "^2.1.1",
+    "@parcel/utils": "^2.2.0",
+    "css-modules-loader-core": "^1.1.0",
     "nullthrows": "^1.1.1",
     "postcss": "^8.3.0",
+    "postcss-modules": "^3.2.2",
     "postcss-value-parser": "^4.1.0",
     "semver": "^5.7.1"
   },
-  "gitHead": "f53ffe772a8259d94ca2937d02fde149454112f3"
+  "gitHead": "4745cd3023f8d5a5adcf9e565d5b82d1418dc262"
 }

package/src/CSSTransformer.js

@@ -1,18 +1,25 @@
 // @flow
 
 import type {Root} from 'postcss';
-import type {FilePath} from '@parcel/types';
+import type {FilePath, MutableAsset} from '@parcel/types';
 
+import {hashString} from '@parcel/hash';
 import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
 import {createDependencyLocation, remapSourceLocation} from '@parcel/utils';
 import postcss from 'postcss';
 import nullthrows from 'nullthrows';
 import valueParser from 'postcss-value-parser';
+import postcssModules from 'postcss-modules';
+import FileSystemLoader from 'css-modules-loader-core/lib/file-system-loader';
 import semver from 'semver';
+import path from 'path';
 
 const URL_RE = /url\s*\("?(?![a-z]+:)/;
 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);
@@ -30,12 +37,19 @@ 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;
     }
 
@@ -50,9 +64,10 @@ export default (new Transformer({
     };
   },
 
-  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: {
@@ -62,22 +77,36 @@ export default (new Transformer({
       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: 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) => {
+    let createLoc = (start, specifier, lineOffset, colOffset, o) => {
       let loc = createDependencyLocation(
         start,
         specifier,
         lineOffset,
         colOffset,
+        o,
       );
       if (originalSourceMap) {
         loc = remapSourceLocation(loc, originalSourceMap);
@@ -142,19 +171,22 @@ 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, {
+            let urlNode = node.nodes[0];
+            let url = asset.addURLDependency(urlNode.value, {
               loc:
                 decl.source &&
                 decl.source.start &&
                 createLoc(
                   decl.source.start,
-                  node.nodes[0].value,
+                  urlNode.value,
+                  0,
+                  decl.source.start.offset + urlNode.sourceIndex + 1,
                   0,
-                  node.nodes[0].sourceIndex,
                 ),
             });
-            isDeclDirty = node.nodes[0].value !== url;
-            node.nodes[0].value = url;
+            isDeclDirty = urlNode.value !== url;
+            urlNode.type = 'word';
+            urlNode.value = url;
           }
         });
 
@@ -172,7 +204,7 @@ export default (new Transformer({
       });
     }
 
-    return [asset];
+    return assets;
   },
 
   async generate({asset, ast, options}) {
@@ -207,3 +239,124 @@ export default (new Transformer({
     };
   },
 }): 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 {root} = await postcss([
+    postcssModules({
+      getJSON: (filename, json) => (cssModules = json),
+      Loader: createLoader(asset, resolve),
+      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;
+}
+
+function createLoader(
+  asset: MutableAsset,
+  resolve: (from: FilePath, to: string) => Promise<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 '';
+    }
+  };
+}