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

package/lib/PostCSSTransformer.js

@@ -5,30 +5,88 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _utils = require("@parcel/utils");
+function _hash() {
+  const data = require("@parcel/hash");
 
-var _plugin = require("@parcel/plugin");
+  _hash = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _utils() {
+  const data = require("@parcel/utils");
+
+  _utils = function () {
+    return data;
+  };
+
+  return data;
+}
 
-var _fileSystemLoader = _interopRequireDefault(require("css-modules-loader-core/lib/file-system-loader"));
+function _plugin() {
+  const data = require("@parcel/plugin");
 
-var _nullthrows = _interopRequireDefault(require("nullthrows"));
+  _plugin = function () {
+    return data;
+  };
 
-var _path = _interopRequireDefault(require("path"));
+  return data;
+}
 
-var _postcss = _interopRequireDefault(require("postcss"));
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
 
-var _semver = _interopRequireDefault(require("semver"));
+  _nullthrows = function () {
+    return data;
+  };
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+  return data;
+}
+
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _semver() {
+  const data = _interopRequireDefault(require("semver"));
+
+  _semver = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _postcssValueParser() {
+  const data = _interopRequireDefault(require("postcss-value-parser"));
+
+  _postcssValueParser = function () {
+    return data;
+  };
+
+  return data;
+}
 
 var _loadConfig = require("./loadConfig");
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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({
+var _default = new (_plugin().Transformer)({
   loadConfig({
     config,
     options,
@@ -41,39 +99,30 @@ var _default = new _plugin.Transformer({
     });
   },
 
-  preSerializeConfig({
-    config
-  }) {
-    return (0, _loadConfig.preSerialize)(config);
-  },
-
-  postDeserializeConfig({
-    config,
-    options
-  }) {
-    return (0, _loadConfig.postDeserialize)(config, options);
-  },
-
   canReuseAST({
     ast
   }) {
-    return ast.type === 'postcss' && _semver.default.satisfies(ast.version, '^7.0.0');
+    return ast.type === 'postcss' && _semver().default.satisfies(ast.version, _constants.POSTCSS_RANGE);
   },
 
   async parse({
     asset,
-    config
+    config,
+    options
   }) {
-    if (!config) {
+    let isLegacy = await isLegacyCssModule(asset);
+
+    if (!config && !isLegacy) {
       return;
     }
 
+    const postcss = await loadPostcss(options, asset.filePath);
     return {
       type: 'postcss',
-      version: '7.0.0',
-      program: _postcss.default.parse((await asset.getCode()), {
+      version: '8.2.1',
+      program: postcss.parse(await asset.getCode(), {
         from: asset.filePath
-      })
+      }).toJSON()
     };
   },
 
@@ -84,91 +133,130 @@ 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; // TODO: should this be resolved from the project root?
+
       let postcssModules = await options.packageManager.require('postcss-modules', asset.filePath, {
-        autoinstall: options.autoinstall
+        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}_${(0, _utils.md5FromString)(filename + css).substr(0, 5)}`,
+        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)}`,
         ...config.hydrated.modules
       }));
-    }
-
-    let ast = (0, _nullthrows.default)((await asset.getAST()));
-    let code = asset.isASTDirty() ? null : await asset.getCode();
-
-    if (code == null || COMPOSES_RE.test(code)) {
-      ast.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({
-                moduleSpecifier: importPath,
-                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
 
 
     let {
       messages,
       root
-    } = await (0, _postcss.default)(plugins).process(ast.program, config.hydrated);
-    ast.program = root;
+    } = await postcss(plugins).process(program, config.hydrated);
     asset.setAST({
       type: 'postcss',
-      version: '7.0.0',
-      program: root
+      version: '8.2.1',
+      program: root.toJSON()
     });
 
     for (let msg of messages) {
       if (msg.type === 'dependency') {
-        msg = msg;
-        asset.addIncludedFile({
-          filePath: msg.file
+        asset.invalidateOnFileChange(msg.file);
+      } else if (msg.type === 'dir-dependency') {
+        var _msg$glob;
+
+        let pattern = `${msg.dir}/${(_msg$glob = msg.glob) !== null && _msg$glob !== void 0 ? _msg$glob : '**/*'}`;
+        let files = await (0, _utils().glob)(pattern, asset.fs, {
+          onlyFiles: true
+        });
+
+        for (let file of files) {
+          asset.invalidateOnFileChange(_path().default.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);
+      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.moduleSpecifier)})`).join(', ')}, ${code});
+          module.exports = Object.assign({}, ${deps.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',
         content: code
       });
     }
@@ -176,15 +264,16 @@ var _default = new _plugin.Transformer({
     return assets;
   },
 
-  generate({
-    ast
+  async generate({
+    asset,
+    ast,
+    options
   }) {
+    const postcss = await loadPostcss(options, asset.filePath);
     let code = '';
-
-    _postcss.default.stringify(ast.program, c => {
+    postcss.stringify(postcss.fromJSON(ast.program), c => {
       code += c;
     });
-
     return {
       content: code
     };
@@ -194,15 +283,18 @@ var _default = new _plugin.Transformer({
 
 exports.default = _default;
 
-function createLoader(asset, resolve) {
-  return class extends _fileSystemLoader.default {
+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 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
+      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
 
 
@@ -213,7 +305,8 @@ function createLoader(asset, resolve) {
       let source = await asset.fs.readFile(resolved, 'utf-8');
       let {
         exportTokens
-      } = await this.core.load(source, rootRelativePath, undefined, this.fetch.bind(this));
+      } = await this.core.load(source, rootRelativePath, undefined, // $FlowFixMe[method-unbinding]
+      this.fetch.bind(this));
       return exportTokens;
     }
 
@@ -222,4 +315,21 @@ function createLoader(asset, resolve) {
     }
 
   };
+}
+
+function loadPostcss(options, from) {
+  return options.packageManager.require('postcss', from, {
+    range: _constants.POSTCSS_RANGE,
+    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/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POSTCSS_RANGE = void 0;
+const POSTCSS_RANGE = '^8.2.1';
+exports.POSTCSS_RANGE = POSTCSS_RANGE;

package/lib/loadConfig.js

@@ -4,35 +4,61 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.load = load;
-exports.preSerialize = preSerialize;
-exports.postDeserialize = postDeserialize;
 
-var _path = _interopRequireDefault(require("path"));
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+
+  _path = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _utils() {
+  const data = require("@parcel/utils");
+
+  _utils = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
+
+  _nullthrows = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _clone() {
+  const data = _interopRequireDefault(require("clone"));
+
+  _clone = function () {
+    return data;
+  };
+
+  return data;
+}
+
+var _constants = require("./constants");
 
 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, 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': {}
-      }
-    };
-  }
-
+async function configHydrator(configFile, config, resolveFrom, options) {
   if (configFile == null) {
     return;
   } // Load the custom config...
 
 
   let modulesConfig;
-  let configFilePlugins = configFile.plugins;
+  let configFilePlugins = (0, _clone().default)(configFile.plugins);
 
   if (configFilePlugins != null && typeof configFilePlugins === 'object' && configFilePlugins['postcss-modules'] != null) {
     modulesConfig = configFilePlugins['postcss-modules'];
@@ -43,8 +69,23 @@ async function configHydrator(configFile, config, options) {
     modulesConfig = {};
   }
 
-  let plugins = await (0, _loadPlugins.default)(configFilePlugins, config.searchPath, options);
-  return config.setResult({
+  let plugins = await (0, _loadPlugins.default)(configFilePlugins, (0, _nullthrows().default)(resolveFrom), options); // contents is either:
+  // from JSON:    { plugins: { 'postcss-foo': { ...opts } } }
+  // from JS (v8): { plugins: [ { postcssPlugin: 'postcss-foo', ...visitor callback functions } ]
+  // from JS (v7): { plugins: [ [Function: ...] ]
+
+  let pluginArray = Array.isArray(configFilePlugins) ? configFilePlugins : Object.keys(configFilePlugins);
+
+  for (let p of pluginArray) {
+    if (typeof p === 'string') {
+      config.addDevDependency({
+        specifier: p,
+        resolveFrom: (0, _nullthrows().default)(resolveFrom)
+      });
+    }
+  }
+
+  return {
     raw: configFile,
     hydrated: {
       plugins,
@@ -52,7 +93,7 @@ async function configHydrator(configFile, config, options) {
       to: config.searchPath,
       modules: modulesConfig
     }
-  });
+  };
 }
 
 async function load({
@@ -60,69 +101,46 @@ async function load({
   options,
   logger
 }) {
+  if (!config.isSource) {
+    return;
+  }
+
   let configFile = await config.getConfig(['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'], {
     packageKey: 'postcss'
   });
   let contents = null;
 
   if (configFile) {
+    config.addDevDependency({
+      specifier: 'postcss',
+      resolveFrom: config.searchPath,
+      range: _constants.POSTCSS_RANGE
+    });
     contents = configFile.contents;
-    let isDynamic = configFile && _path.default.extname(configFile.filePath) === '.js';
+    let isDynamic = configFile && _path().default.extname(configFile.filePath) === '.js';
 
     if (isDynamic) {
+      // We have to invalidate on startup in case the config is non-deterministic,
+      // e.g. using unknown environment variables, reading from the filesystem, etc.
       logger.warn({
         message: 'WARNING: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.'
       });
-      config.shouldInvalidateOnStartup();
+      config.invalidateOnStartup(); // Also add the config as a dev dependency so we attempt to reload in watch mode.
+
+      config.addDevDependency({
+        specifier: (0, _utils().relativePath)(_path().default.dirname(config.searchPath), configFile.filePath),
+        resolveFrom: config.searchPath
+      });
     }
 
     if (typeof contents !== 'object') {
       throw new Error('PostCSS config should be an object.');
     }
 
-    if (contents.plugins == null || typeof contents.plugins !== 'object' || Object.keys(contents.plugins) === 0) {
+    if (contents.plugins == null || typeof contents.plugins !== 'object' || Object.keys(contents.plugins).length === 0) {
       throw new Error('PostCSS config must have plugins');
     }
-
-    let configFilePlugins = Array.isArray(contents.plugins) ? contents.plugins : Object.keys(contents.plugins);
-
-    for (let p of configFilePlugins) {
-      // JavaScript configs can use an array of functions... opt out of all caching...
-      if (typeof p === 'function') {
-        contents.__contains_functions = true; // This should enforce the config to be revalidated as it can contain functions and is JS
-
-        config.shouldInvalidateOnStartup();
-        config.shouldReload();
-      }
-
-      if (typeof p === 'string') {
-        if (p.startsWith('.')) {
-          logger.warn({
-            message: 'WARNING: Using relative PostCSS plugins means losing out on caching features of Parcel. Bundle this plugin up in a package or use a monorepo to resolve this issue.'
-          });
-          config.shouldInvalidateOnStartup();
-        }
-
-        config.addDevDependency(p);
-      }
-    }
   }
 
-  return configHydrator(contents, config, options);
-}
-
-function preSerialize(config) {
-  if (!config.result) return; // Ensure we dont pass functions to the serialiser
-
-  if (config.result.raw.__contains_functions) {
-    config.result.raw = {};
-  } // This gets re-hydrated in Deserialize, so never store this.
-  // It also usually contains a bunch of functions so bad idea anyway...
-
-
-  config.result.hydrated = {};
-}
-
-function postDeserialize(config, options) {
-  return configHydrator(config.result.raw, config, options);
+  return configHydrator(contents, config, configFile === null || configFile === void 0 ? void 0 : configFile.filePath, options);
 }

package/lib/loadPlugins.js

@@ -7,22 +7,22 @@ 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, options.autoinstall)).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, options.autoinstall)));
+    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, autoinstall) {
+async function loadPlugin(pluginArg, relative, options = {}, packageManager, shouldAutoInstall) {
   if (typeof pluginArg !== 'string') {
     return pluginArg;
   }
 
   let plugin = await packageManager.require(pluginArg, relative, {
-    autoinstall
+    shouldAutoInstall
   });
   plugin = plugin.default || plugin;
 

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-postcss",
-  "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,17 +16,20 @@
   "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.1000+5530a6ef"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-beta.1",
-    "@parcel/utils": "2.0.0-beta.1",
-    "css-modules-loader-core": "^1.1.0",
+    "@parcel/hash": "2.3.2-nightly.2625+5530a6ef",
+    "@parcel/plugin": "2.0.0-nightly.1002+5530a6ef",
+    "@parcel/utils": "2.0.0-nightly.1002+5530a6ef",
+    "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": "^5.7.1"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.5"
   },
-  "gitHead": "74335525be92e23bac4ed1bf30595443cfb238e3"
+  "gitHead": "5530a6eff8b619873353baeb0457ae4ec591e9fa"
 }

package/src/PostCSSTransformer.js

@@ -1,156 +1,202 @@
 // @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/hash';
+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 {load, preSerialize, postDeserialize} from './loadConfig';
+import {load} from './loadConfig';
+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({
+export default (new Transformer({
   loadConfig({config, options, logger}) {
     return load({config, options, logger});
   },
 
-  preSerializeConfig({config}) {
-    return preSerialize(config);
-  },
-
-  postDeserializeConfig({config, options}) {
-    return postDeserialize(config, options);
-  },
-
   canReuseAST({ast}) {
-    return ast.type === 'postcss' && semver.satisfies(ast.version, '^7.0.0');
+    return (
+      ast.type === 'postcss' && semver.satisfies(ast.version, POSTCSS_RANGE)
+    );
   },
 
-  async parse({asset, config}) {
-    if (!config) {
+  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: '7.0.0',
-      program: postcss.parse(await asset.getCode(), {
-        from: asset.filePath,
-      }),
+      version: '8.2.1',
+      program: postcss
+        .parse(await asset.getCode(), {
+          from: asset.filePath,
+        })
+        .toJSON(),
     };
   },
 
   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;
+
+      // TODO: should this be resolved from the project root?
       let postcssModules = await options.packageManager.require(
         'postcss-modules',
         asset.filePath,
-        {autoinstall: options.autoinstall},
+        {
+          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)}`,
+          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,
         }),
       );
-    }
 
-    let ast = nullthrows(await asset.getAST());
-    let code = asset.isASTDirty() ? null : await asset.getCode();
-    if (code == null || COMPOSES_RE.test(code)) {
-      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: 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
     let {messages, root} = await postcss(plugins).process(
-      ast.program,
+      program,
       config.hydrated,
     );
-    ast.program = root;
     asset.setAST({
       type: 'postcss',
-      version: '7.0.0',
-      program: root,
+      version: '8.2.1',
+      program: root.toJSON(),
     });
     for (let msg of messages) {
       if (msg.type === 'dependency') {
-        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',
         content: code,
       });
     }
     return assets;
   },
 
-  generate({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;
     });
 
@@ -158,12 +204,17 @@ export default new Transformer({
       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, '');
@@ -181,6 +232,7 @@ function createLoader(
         source,
         rootRelativePath,
         undefined,
+        // $FlowFixMe[method-unbinding]
         this.fetch.bind(this),
       );
       return exportTokens;
@@ -191,3 +243,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';

package/src/loadConfig.js

@@ -1,34 +1,41 @@
 // @flow
-import type {Config, PluginOptions} from '@parcel/types';
-import type {PluginLogger} from '@parcel/logger';
+import type {
+  Config,
+  FilePath,
+  PluginOptions,
+  PluginLogger,
+} from '@parcel/types';
 import path from 'path';
+import {relativePath} from '@parcel/utils';
+import nullthrows from 'nullthrows';
+import clone from 'clone';
+import {POSTCSS_RANGE} from './constants';
 
 import loadExternalPlugins from './loadPlugins';
 
-const MODULE_BY_NAME_RE = /\.module\./;
+type ConfigResult = {|
+  raw: any,
+  hydrated: {|
+    plugins: Array<any>,
+    from: FilePath,
+    to: FilePath,
+    modules: any,
+  |},
+|};
 
 async function configHydrator(
   configFile: any,
   config: Config,
+  resolveFrom: ?FilePath,
   options: PluginOptions,
-) {
-  // 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': {},
-      },
-    };
-  }
-
+): Promise<?ConfigResult> {
   if (configFile == null) {
     return;
   }
 
   // Load the custom config...
   let modulesConfig;
-  let configFilePlugins = configFile.plugins;
+  let configFilePlugins = clone(configFile.plugins);
   if (
     configFilePlugins != null &&
     typeof configFilePlugins === 'object' &&
@@ -44,11 +51,27 @@ async function configHydrator(
 
   let plugins = await loadExternalPlugins(
     configFilePlugins,
-    config.searchPath,
+    nullthrows(resolveFrom),
     options,
   );
 
-  return config.setResult({
+  // contents is either:
+  // from JSON:    { plugins: { 'postcss-foo': { ...opts } } }
+  // from JS (v8): { plugins: [ { postcssPlugin: 'postcss-foo', ...visitor callback functions } ]
+  // from JS (v7): { plugins: [ [Function: ...] ]
+  let pluginArray = Array.isArray(configFilePlugins)
+    ? configFilePlugins
+    : Object.keys(configFilePlugins);
+  for (let p of pluginArray) {
+    if (typeof p === 'string') {
+      config.addDevDependency({
+        specifier: p,
+        resolveFrom: nullthrows(resolveFrom),
+      });
+    }
+  }
+
+  return {
     raw: configFile,
     hydrated: {
       plugins,
@@ -56,7 +79,7 @@ async function configHydrator(
       to: config.searchPath,
       modules: modulesConfig,
     },
-  });
+  };
 }
 
 export async function load({
@@ -67,7 +90,11 @@ export async function load({
   config: Config,
   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'},
@@ -75,15 +102,32 @@ export async function load({
 
   let contents = null;
   if (configFile) {
+    config.addDevDependency({
+      specifier: 'postcss',
+      resolveFrom: config.searchPath,
+      range: POSTCSS_RANGE,
+    });
+
     contents = configFile.contents;
     let isDynamic = configFile && path.extname(configFile.filePath) === '.js';
     if (isDynamic) {
+      // We have to invalidate on startup in case the config is non-deterministic,
+      // e.g. using unknown environment variables, reading from the filesystem, etc.
       logger.warn({
         message:
           'WARNING: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.',
       });
 
-      config.shouldInvalidateOnStartup();
+      config.invalidateOnStartup();
+
+      // Also add the config as a dev dependency so we attempt to reload in watch mode.
+      config.addDevDependency({
+        specifier: relativePath(
+          path.dirname(config.searchPath),
+          configFile.filePath,
+        ),
+        resolveFrom: config.searchPath,
+      });
     }
 
     if (typeof contents !== 'object') {
@@ -93,55 +137,11 @@ export async function load({
     if (
       contents.plugins == null ||
       typeof contents.plugins !== 'object' ||
-      Object.keys(contents.plugins) === 0
+      Object.keys(contents.plugins).length === 0
     ) {
       throw new Error('PostCSS config must have plugins');
     }
-
-    let configFilePlugins = Array.isArray(contents.plugins)
-      ? contents.plugins
-      : Object.keys(contents.plugins);
-    for (let p of configFilePlugins) {
-      // JavaScript configs can use an array of functions... opt out of all caching...
-      if (typeof p === 'function') {
-        contents.__contains_functions = true;
-
-        // This should enforce the config to be revalidated as it can contain functions and is JS
-        config.shouldInvalidateOnStartup();
-        config.shouldReload();
-      }
-
-      if (typeof p === 'string') {
-        if (p.startsWith('.')) {
-          logger.warn({
-            message:
-              'WARNING: Using relative PostCSS plugins means losing out on caching features of Parcel. Bundle this plugin up in a package or use a monorepo to resolve this issue.',
-          });
-
-          config.shouldInvalidateOnStartup();
-        }
-
-        config.addDevDependency(p);
-      }
-    }
-  }
-
-  return configHydrator(contents, config, options);
-}
-
-export function preSerialize(config: Config) {
-  if (!config.result) return;
-
-  // Ensure we dont pass functions to the serialiser
-  if (config.result.raw.__contains_functions) {
-    config.result.raw = {};
   }
 
-  // This gets re-hydrated in Deserialize, so never store this.
-  // It also usually contains a bunch of functions so bad idea anyway...
-  config.result.hydrated = {};
-}
-
-export function postDeserialize(config: Config, options: PluginOptions) {
-  return configHydrator(config.result.raw, config, options);
+  return configHydrator(contents, config, configFile?.filePath, options);
 }

package/src/loadPlugins.js

@@ -17,7 +17,7 @@ export default async function loadExternalPlugins(
             relative,
             null,
             options.packageManager,
-            options.autoinstall,
+            options.shouldAutoInstall,
           ),
         )
         .filter(Boolean),
@@ -31,7 +31,7 @@ export default async function loadExternalPlugins(
           relative,
           _plugins[p],
           options.packageManager,
-          options.autoinstall,
+          options.shouldAutoInstall,
         ),
       ),
     );
@@ -46,14 +46,14 @@ async function loadPlugin(
   relative: FilePath,
   options: mixed = {},
   packageManager: PackageManager,
-  autoinstall: boolean,
+  shouldAutoInstall: boolean,
 ): mixed {
   if (typeof pluginArg !== 'string') {
     return pluginArg;
   }
 
   let plugin = await packageManager.require(pluginArg, relative, {
-    autoinstall,
+    shouldAutoInstall,
   });
   plugin = plugin.default || plugin;