@parcel/transformer-postcss 2.0.0-nightly.148 → 2.0.0-nightly.1482

package/lib/loadPlugins.js

@@ -4,29 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = loadExternalPlugins;
-
 async function loadExternalPlugins(plugins, relative, options) {
   if (Array.isArray(plugins)) {
-    return Promise.all(plugins.map(p => loadPlugin(p, relative, null, options.packageManager)).filter(Boolean));
+    return Promise.all(plugins.map(p => loadPlugin(p, relative, null, options.packageManager, options.shouldAutoInstall)).filter(Boolean));
   } else if (typeof plugins === 'object') {
-    let mapPlugins = await Promise.all(Object.keys(plugins).map(p => loadPlugin(p, relative, plugins[p], options.packageManager)));
+    let mapPlugins = await Promise.all(Object.keys(plugins).map(p => loadPlugin(p, relative, plugins[p], options.packageManager, options.shouldAutoInstall)));
     return mapPlugins.filter(Boolean);
   } else {
     return [];
   }
 }
-
-async function loadPlugin(pluginArg, relative, options = {}, packageManager) {
+async function loadPlugin(pluginArg, relative, options = {}, packageManager, shouldAutoInstall) {
   if (typeof pluginArg !== 'string') {
     return pluginArg;
   }
-
-  let plugin = await packageManager.require(pluginArg, relative);
+  let plugin = await packageManager.require(pluginArg, relative, {
+    shouldAutoInstall
+  });
   plugin = plugin.default || plugin;
-
   if (options != null && typeof options === 'object' && Object.keys(options).length > 0) {
     plugin = plugin(options);
   }
-
   return plugin.default || plugin;
 }

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-postcss",
-  "version": "2.0.0-nightly.148+da3cf2a5",
+  "version": "2.0.0-nightly.1482+cd447dc4e",
   "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,17 +16,22 @@
   "main": "lib/PostCSSTransformer.js",
   "source": "src/PostCSSTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0-nightly.1480+cd447dc4e"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-nightly.148+da3cf2a5",
-    "@parcel/utils": "2.0.0-nightly.148+da3cf2a5",
-    "css-modules-loader-core": "^1.1.0",
+    "@parcel/diagnostic": "2.0.0-nightly.1482+cd447dc4e",
+    "@parcel/plugin": "2.0.0-nightly.1482+cd447dc4e",
+    "@parcel/rust": "2.11.1-nightly.3105+cd447dc4e",
+    "@parcel/utils": "2.0.0-nightly.1482+cd447dc4e",
+    "clone": "^2.1.1",
     "nullthrows": "^1.1.1",
-    "postcss": "^7.0.5",
-    "postcss-value-parser": "^3.3.1",
-    "semver": "^5.4.1"
+    "postcss-value-parser": "^4.2.0",
+    "semver": "^7.5.2"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.5",
+    "postcss-modules": "^4.3.1"
   },
-  "gitHead": "da3cf2a5386d71d25eae5418ebef5d9bfb9e5d62"
+  "gitHead": "cd447dc4edaa3a6ff6b40fbfd41998656dad3515"
 }

package/src/PostCSSTransformer.js

@@ -1,212 +1,295 @@
 // @flow
 
-import type {FilePath, MutableAsset} from '@parcel/types';
+import type {FilePath, Asset, MutableAsset, PluginOptions} from '@parcel/types';
 
-import {md5FromString} from '@parcel/utils';
+import {hashString} from '@parcel/rust';
+import {glob} from '@parcel/utils';
 import {Transformer} from '@parcel/plugin';
-import FileSystemLoader from 'css-modules-loader-core/lib/file-system-loader';
 import nullthrows from 'nullthrows';
 import path from 'path';
-import postcss from 'postcss';
 import semver from 'semver';
 import valueParser from 'postcss-value-parser';
+import typeof * as Postcss from 'postcss';
 
-import loadPlugins from './loadPlugins';
+import {load} from './loadConfig';
+import {POSTCSS_RANGE} from './constants';
+import {md, generateJSONCodeHighlights} from '@parcel/diagnostic';
 
 const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
 const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
+const LEGACY_MODULE_RE = /@value|:export|(:global|:local|:import)(?!\s*\()/i;
 const MODULE_BY_NAME_RE = /\.module\./;
 
-type ParcelPostCSSConfig = {
-  plugins: Array<mixed>,
-  from: FilePath,
-  to: FilePath,
-  ...
-};
-
-export default new Transformer({
-  async getConfig({asset, resolve, options}): Promise<?ParcelPostCSSConfig> {
-    let configFile: mixed = await asset.getConfig(
-      ['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'],
-      {packageKey: 'postcss'},
+export default (new Transformer({
+  loadConfig({config, options, logger}) {
+    return load({config, options, logger});
+  },
+
+  canReuseAST({ast}) {
+    return (
+      ast.type === 'postcss' && semver.satisfies(ast.version, POSTCSS_RANGE)
     );
+  },
+
+  async parse({asset, config, options}) {
+    let isLegacy = await isLegacyCssModule(asset);
+    if (!config && !isLegacy) {
+      return;
+    }
+
+    const postcss = await loadPostcss(options, asset.filePath);
+
+    return {
+      type: 'postcss',
+      version: '8.2.1',
+      program: postcss
+        .parse(await asset.getCode(), {
+          from: asset.filePath,
+        })
+        .toJSON(),
+    };
+  },
 
-    // Use a basic, modules-only PostCSS config if the file opts in by a name
-    // like foo.module.css
-    if (configFile == null && asset.filePath.match(MODULE_BY_NAME_RE)) {
-      configFile = {
-        plugins: {
-          'postcss-modules': {},
+  async transform({asset, config, options, resolve, logger}) {
+    asset.type = 'css';
+    let isLegacy = await isLegacyCssModule(asset);
+    if (isLegacy && !config) {
+      config = {
+        raw: {},
+        filePath: '',
+        hydrated: {
+          plugins: [],
+          from: asset.filePath,
+          to: asset.filePath,
+          modules: {},
         },
       };
-    }
 
-    if (configFile == null) {
-      return;
+      // TODO: warning?
     }
 
-    if (typeof configFile !== 'object') {
-      throw new Error('PostCSS config should be an object.');
+    if (!config) {
+      return [asset];
     }
 
-    if (
-      configFile.plugins == null ||
-      typeof configFile.plugins !== 'object' ||
-      Object.keys(configFile.plugins) === 0
-    ) {
-      throw new Error('PostCSS config must have plugins');
-    }
+    const postcss: Postcss = await loadPostcss(options, asset.filePath);
+    let ast = nullthrows(await asset.getAST());
+    let program = postcss.fromJSON(ast.program);
 
-    let originalModulesConfig;
-    let configFilePlugins = configFile.plugins;
-    if (
-      configFilePlugins != null &&
-      typeof configFilePlugins === 'object' &&
-      configFilePlugins['postcss-modules'] != null
-    ) {
-      originalModulesConfig = configFilePlugins['postcss-modules'];
-      // $FlowFixMe
-      delete configFilePlugins['postcss-modules'];
-    }
+    let plugins = [...config.hydrated.plugins];
+    let cssModules: ?{|[string]: string|} = null;
+    if (config.hydrated.modules) {
+      asset.meta.cssModulesCompiled = 'postcss';
 
-    let plugins = await loadPlugins(configFilePlugins, asset.filePath, options);
+      let code = asset.isASTDirty() ? null : await asset.getCode();
+      if (
+        Object.keys(config.hydrated.modules).length === 0 &&
+        code &&
+        !isLegacy &&
+        !LEGACY_MODULE_RE.test(code)
+      ) {
+        let filename = path.basename(config.filePath);
+        let message;
+        let configKey;
+        let hint;
+        if (config.raw.modules) {
+          message = md`The "modules" option in __${filename}__ can be replaced with configuration for @parcel/transformer-css to improve build performance.`;
+          configKey = '/modules';
+          hint = md`Remove the "modules" option from __${filename}__`;
+        } else {
+          message = md`The "postcss-modules" plugin in __${filename}__ can be replaced with configuration for @parcel/transformer-css to improve build performance.`;
+          configKey = '/plugins/postcss-modules';
+          hint = md`Remove the "postcss-modules" plugin from __${filename}__`;
+        }
+        if (filename === 'package.json') {
+          configKey = `/postcss${configKey}`;
+        }
 
-    if (originalModulesConfig || configFile.modules) {
+        let hints = [
+          'Enable the "cssModules" option for "@parcel/transformer-css" in your package.json',
+        ];
+        if (plugins.length === 0) {
+          message += md` Since there are no other plugins, __${filename}__ can be deleted safely.`;
+          hints.push(md`Delete __${filename}__`);
+        } else {
+          hints.push(hint);
+        }
+
+        let codeFrames;
+        if (path.extname(filename) !== '.js') {
+          let contents = await asset.fs.readFile(config.filePath, 'utf8');
+          codeFrames = [
+            {
+              language: 'json',
+              filePath: config.filePath,
+              code: contents,
+              codeHighlights: generateJSONCodeHighlights(contents, [
+                {
+                  key: configKey,
+                  type: 'key',
+                },
+              ]),
+            },
+          ];
+        } else {
+          codeFrames = [
+            {
+              filePath: config.filePath,
+              codeHighlights: [
+                {
+                  start: {line: 1, column: 1},
+                  end: {line: 1, column: 1},
+                },
+              ],
+            },
+          ];
+        }
+
+        logger.warn({
+          message,
+          hints,
+          documentationURL:
+            'https://parceljs.org/languages/css/#enabling-css-modules-globally',
+          codeFrames,
+        });
+      }
+
+      // TODO: should this be resolved from the project root?
       let postcssModules = await options.packageManager.require(
         'postcss-modules',
         asset.filePath,
+        {
+          range: '^4.3.0',
+          saveDev: true,
+          shouldAutoInstall: options.shouldAutoInstall,
+        },
       );
 
       plugins.push(
         postcssModules({
-          getJSON: (filename, json) => (asset.meta.cssModules = json),
-          Loader: createLoader(asset, resolve),
-          generateScopedName: (name, filename, css) =>
-            `_${name}_${md5FromString(filename + css).substr(0, 5)}`,
-          ...originalModulesConfig,
+          getJSON: (filename, json) => (cssModules = json),
+          Loader: await createLoader(asset, resolve, options),
+          generateScopedName: (name, filename) =>
+            `${name}_${hashString(
+              path.relative(options.projectRoot, filename),
+            ).substr(0, 6)}`,
+          ...config.hydrated.modules,
         }),
       );
-    }
 
-    return {
-      plugins,
-      from: asset.filePath,
-      to: asset.filePath,
-    };
-  },
-
-  canReuseAST({ast}) {
-    return ast.type === 'postcss' && semver.satisfies(ast.version, '^7.0.0');
-  },
-
-  async parse({asset, config}) {
-    if (!config) {
-      return;
-    }
-
-    return {
-      type: 'postcss',
-      version: '7.0.0',
-      program: postcss.parse(await asset.getCode(), {
-        from: asset.filePath,
-      }),
-    };
-  },
-
-  async transform({asset, config}) {
-    if (!config) {
-      return [asset];
-    }
+      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 ast = nullthrows(asset.ast);
-    if (COMPOSES_RE.test(await asset.getCode())) {
-      ast.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({
-                moduleSpecifier: importPath,
-                loc: {
-                  filePath: importPath,
-                  start: decl.source.start,
-                  end: {
-                    line: decl.source.start.line,
-                    column: decl.source.start.column + importPath.length,
+            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 {messages, root} = await postcss(config.plugins).process(
-      ast.program,
-      config,
+    // $FlowFixMe Added in Flow 0.121.0 upgrade in #4381
+    let {messages, root} = await postcss(plugins).process(
+      program,
+      config.hydrated,
     );
-    ast.program = root;
-    ast.isDirty = true;
+    asset.setAST({
+      type: 'postcss',
+      version: '8.2.1',
+      program: root.toJSON(),
+    });
     for (let msg of messages) {
       if (msg.type === 'dependency') {
-        // $FlowFixMe merely a convention
-        msg = (msg: {|
-          type: 'dependency',
-          plugin: string,
-          file: string,
-          parent: string,
-        |});
-
-        asset.addIncludedFile({
-          filePath: msg.file,
-        });
+        asset.invalidateOnFileChange(msg.file);
+      } else if (msg.type === 'dir-dependency') {
+        let pattern = `${msg.dir}/${msg.glob ?? '**/*'}`;
+        let files = await glob(pattern, asset.fs, {onlyFiles: true});
+        for (let file of files) {
+          asset.invalidateOnFileChange(path.normalize(file));
+        }
+        asset.invalidateOnFileCreate({glob: pattern});
       }
     }
 
     let assets = [asset];
-    if (asset.meta.cssModules) {
-      let code = JSON.stringify(asset.meta.cssModules, null, 2);
-      let deps = asset.getDependencies().filter(dep => !dep.isURL);
+    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.moduleSpecifier)})`)
-            .join(', ')}, ${code});
+            .map(dep => `require(${JSON.stringify(dep.specifier)})`)
+            .join(', ')}, ${JSON.stringify(cssModules, null, 2)});
         `;
       } else {
-        code = `module.exports = ${code};`;
+        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',
-        filePath: asset.filePath + '.js',
-        code,
+        content: code,
       });
     }
     return assets;
   },
 
-  generate({asset}) {
-    let ast = nullthrows(asset.ast);
+  async generate({asset, ast, options}) {
+    const postcss: Postcss = await loadPostcss(options, asset.filePath);
 
     let code = '';
-    postcss.stringify(ast.program, c => {
+    postcss.stringify(postcss.fromJSON(ast.program), c => {
       code += c;
     });
 
     return {
-      code,
+      content: code,
     };
   },
-});
+}): Transformer);
 
-function createLoader(
+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, '');
@@ -224,6 +307,7 @@ function createLoader(
         source,
         rootRelativePath,
         undefined,
+        // $FlowFixMe[method-unbinding]
         this.fetch.bind(this),
       );
       return exportTokens;
@@ -234,3 +318,20 @@ function createLoader(
     }
   };
 }
+
+function loadPostcss(options: PluginOptions, from: FilePath): Promise<Postcss> {
+  return options.packageManager.require('postcss', from, {
+    range: POSTCSS_RANGE,
+    saveDev: true,
+    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/constants.js

@@ -0,0 +1,3 @@
+// @flow
+
+export const POSTCSS_RANGE = '^8.2.1';