@parcel/transformer-postcss 2.0.0 → 2.2.0

package/lib/PostCSSTransformer.js

@@ -103,6 +103,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
 const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
+const LEGACY_MODULE_RE = /@value|(:global|:local)(?!\s*\()/i;
+const MODULE_BY_NAME_RE = /\.module\./;
 
 var _default = new (_plugin().Transformer)({
   loadConfig({
@@ -128,7 +130,9 @@ var _default = new (_plugin().Transformer)({
     config,
     options
   }) {
-    if (!config) {
+    let isLegacy = await isLegacyCssModule(asset);
+
+    if (!config && !isLegacy) {
       return;
     }
 
@@ -149,52 +153,64 @@ var _default = new (_plugin().Transformer)({
     resolve
   }) {
     asset.type = 'css';
+    let isLegacy = await isLegacyCssModule(asset);
+
+    if (isLegacy && !config) {
+      config = {
+        hydrated: {
+          plugins: [],
+          from: asset.filePath,
+          to: asset.filePath,
+          modules: {}
+        }
+      }; // TODO: warning?
+    }
 
     if (!config) {
       return [asset];
     }
 
     const postcss = await loadPostcss(options, asset.filePath);
+    let ast = (0, _nullthrows().default)(await asset.getAST());
+    let program = postcss.fromJSON(ast.program);
     let plugins = [...config.hydrated.plugins];
     let cssModules = null;
 
     if (config.hydrated.modules) {
+      asset.meta.cssModulesCompiled = true;
       plugins.push((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)}`,
+        generateScopedName: (name, filename) => `${name}_${(0, _hash().hashString)(_path().default.relative(options.projectRoot, filename)).substr(0, 6)}`,
         ...config.hydrated.modules
       }));
-    }
-
-    let ast = (0, _nullthrows().default)(await asset.getAST());
-    let program = postcss.fromJSON(ast.program);
-    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);
-          parsed.walk(node => {
-            if (node.type === 'string') {
-              asset.addDependency({
-                specifier: importPath,
-                specifierType: 'url',
-                loc: {
-                  filePath: asset.filePath,
-                  start: decl.source.start,
-                  end: {
-                    line: decl.source.start.line,
-                    column: decl.source.start.column + importPath.length
+      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);
+            parsed.walk(node => {
+              if (node.type === 'string') {
+                asset.addDependency({
+                  specifier: importPath,
+                  specifierType: 'url',
+                  loc: {
+                    filePath: asset.filePath,
+                    start: decl.source.start,
+                    end: {
+                      line: decl.source.start.line,
+                      column: decl.source.start.column + importPath.length
+                    }
                   }
-                }
-              });
-            }
-          });
-        }
-      });
+                });
+              }
+            });
+          }
+        });
+      }
     } // $FlowFixMe Added in Flow 0.121.0 upgrade in #4381
 
 
@@ -318,4 +334,13 @@ function loadPostcss(options, from) {
     saveDev: true,
     shouldAutoInstall: options.shouldAutoInstall
   });
+}
+
+async function isLegacyCssModule(asset) {
+  if (!MODULE_BY_NAME_RE.test(asset.filePath)) {
+    return false;
+  }
+
+  let code = await asset.getCode();
+  return LEGACY_MODULE_RE.test(code);
 }

package/lib/loadConfig.js

@@ -51,20 +51,7 @@ var _loadPlugins = _interopRequireDefault(require("./loadPlugins"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MODULE_BY_NAME_RE = /\.module\./;
-
 async function configHydrator(configFile, config, resolveFrom, options) {
-  // Use a basic, modules-only PostCSS config if the file opts in by a name
-  // like foo.module.css
-  if (configFile == null && config.searchPath.match(MODULE_BY_NAME_RE)) {
-    configFile = {
-      plugins: {
-        'postcss-modules': {}
-      }
-    };
-    resolveFrom = __filename;
-  }
-
   if (configFile == null) {
     return;
   } // Load the custom config...
@@ -114,6 +101,10 @@ async function load({
   options,
   logger
 }) {
+  if (!config.isSource) {
+    return;
+  }
+
   let configFile = await config.getConfig(['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'], {
     packageKey: 'postcss'
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-postcss",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,21 +17,21 @@
   "source": "src/PostCSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.0.0"
+    "parcel": "^2.2.0"
   },
   "dependencies": {
-    "@parcel/hash": "^2.0.0",
-    "@parcel/plugin": "^2.0.0",
-    "@parcel/utils": "^2.0.0",
+    "@parcel/hash": "^2.2.0",
+    "@parcel/plugin": "^2.2.0",
+    "@parcel/utils": "^2.2.0",
     "clone": "^2.1.1",
     "css-modules-loader-core": "^1.1.0",
     "nullthrows": "^1.1.1",
     "postcss-modules": "^3.2.2",
     "postcss-value-parser": "^4.1.0",
-    "semver": "^5.4.1"
+    "semver": "^5.7.1"
   },
   "devDependencies": {
     "postcss": "^8.3.0"
   },
-  "gitHead": "84da50ae6943bff9741e2fc76d2f4968074cbbd6"
+  "gitHead": "4745cd3023f8d5a5adcf9e565d5b82d1418dc262"
 }

package/src/PostCSSTransformer.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type {FilePath, MutableAsset, PluginOptions} from '@parcel/types';
+import type {FilePath, Asset, MutableAsset, PluginOptions} from '@parcel/types';
 
 import {hashString} from '@parcel/hash';
 import {glob} from '@parcel/utils';
@@ -18,6 +18,8 @@ import {POSTCSS_RANGE} from './constants';
 
 const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
 const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
+const LEGACY_MODULE_RE = /@value|(:global|:local)(?!\s*\()/i;
+const MODULE_BY_NAME_RE = /\.module\./;
 
 export default (new Transformer({
   loadConfig({config, options, logger}) {
@@ -31,7 +33,8 @@ export default (new Transformer({
   },
 
   async parse({asset, config, options}) {
-    if (!config) {
+    let isLegacy = await isLegacyCssModule(asset);
+    if (!config && !isLegacy) {
       return;
     }
 
@@ -50,55 +53,70 @@ export default (new Transformer({
 
   async transform({asset, config, options, resolve}) {
     asset.type = 'css';
+    let isLegacy = await isLegacyCssModule(asset);
+    if (isLegacy && !config) {
+      config = {
+        hydrated: {
+          plugins: [],
+          from: asset.filePath,
+          to: asset.filePath,
+          modules: {},
+        },
+      };
+
+      // TODO: warning?
+    }
+
     if (!config) {
       return [asset];
     }
 
     const postcss: Postcss = await loadPostcss(options, asset.filePath);
+    let ast = nullthrows(await asset.getAST());
+    let program = postcss.fromJSON(ast.program);
 
     let plugins = [...config.hydrated.plugins];
     let cssModules: ?{|[string]: string|} = null;
     if (config.hydrated.modules) {
+      asset.meta.cssModulesCompiled = true;
       plugins.push(
         postcssModules({
           getJSON: (filename, json) => (cssModules = json),
           Loader: createLoader(asset, resolve),
           generateScopedName: (name, filename) =>
-            `_${name}_${hashString(
+            `${name}_${hashString(
               path.relative(options.projectRoot, filename),
             ).substr(0, 6)}`,
           ...config.hydrated.modules,
         }),
       );
-    }
 
-    let ast = nullthrows(await asset.getAST());
-    let program = postcss.fromJSON(ast.program);
-    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);
-
-          parsed.walk(node => {
-            if (node.type === 'string') {
-              asset.addDependency({
-                specifier: importPath,
-                specifierType: 'url',
-                loc: {
-                  filePath: asset.filePath,
-                  start: decl.source.start,
-                  end: {
-                    line: decl.source.start.line,
-                    column: decl.source.start.column + importPath.length,
+      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);
+
+            parsed.walk(node => {
+              if (node.type === 'string') {
+                asset.addDependency({
+                  specifier: importPath,
+                  specifierType: 'url',
+                  loc: {
+                    filePath: asset.filePath,
+                    start: decl.source.start,
+                    end: {
+                      line: decl.source.start.line,
+                      column: decl.source.start.column + importPath.length,
+                    },
                   },
-                },
-              });
-            }
-          });
-        }
-      });
+                });
+              }
+            });
+          }
+        });
+      }
     }
 
     // $FlowFixMe Added in Flow 0.121.0 upgrade in #4381
@@ -218,3 +236,12 @@ function loadPostcss(options: PluginOptions, from: FilePath): Promise<Postcss> {
     shouldAutoInstall: options.shouldAutoInstall,
   });
 }
+
+async function isLegacyCssModule(asset: Asset | MutableAsset) {
+  if (!MODULE_BY_NAME_RE.test(asset.filePath)) {
+    return false;
+  }
+
+  let code = await asset.getCode();
+  return LEGACY_MODULE_RE.test(code);
+}

package/src/loadConfig.js

@@ -13,8 +13,6 @@ import {POSTCSS_RANGE} from './constants';
 
 import loadExternalPlugins from './loadPlugins';
 
-const MODULE_BY_NAME_RE = /\.module\./;
-
 type ConfigResult = {|
   raw: any,
   hydrated: {|
@@ -31,17 +29,6 @@ async function configHydrator(
   resolveFrom: ?FilePath,
   options: PluginOptions,
 ): Promise<?ConfigResult> {
-  // Use a basic, modules-only PostCSS config if the file opts in by a name
-  // like foo.module.css
-  if (configFile == null && config.searchPath.match(MODULE_BY_NAME_RE)) {
-    configFile = {
-      plugins: {
-        'postcss-modules': {},
-      },
-    };
-    resolveFrom = __filename;
-  }
-
   if (configFile == null) {
     return;
   }
@@ -104,6 +91,10 @@ export async function load({
   options: PluginOptions,
   logger: PluginLogger,
 |}): Promise<?ConfigResult> {
+  if (!config.isSource) {
+    return;
+  }
+
   let configFile: any = await config.getConfig(
     ['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'],
     {packageKey: 'postcss'},