@parcel/transformer-postcss 2.0.0-nightly.130 → 2.0.0-nightly.1303

package/lib/PostCSSTransformer.js

@@ -5,205 +5,358 @@ 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;
+  };
 
-var _fileSystemLoader = _interopRequireDefault(require("css-modules-loader-core/lib/file-system-loader"));
+  return data;
+}
 
-var _nullthrows = _interopRequireDefault(require("nullthrows"));
+function _utils() {
+  const data = require("@parcel/utils");
 
-var _path = _interopRequireDefault(require("path"));
+  _utils = function () {
+    return data;
+  };
 
-var _postcss = _interopRequireDefault(require("postcss"));
+  return data;
+}
 
-var _semver = _interopRequireDefault(require("semver"));
+function _plugin() {
+  const data = require("@parcel/plugin");
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+  _plugin = function () {
+    return data;
+  };
 
-var _loadPlugins = _interopRequireDefault(require("./loadPlugins"));
+  return data;
+}
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  _nullthrows = function () {
+    return data;
+  };
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  return data;
+}
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _path() {
+  const data = _interopRequireDefault(require("path"));
 
-const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
-const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
-const MODULE_BY_NAME_RE = /\.module\./;
+  _path = function () {
+    return data;
+  };
 
-var _default = new _plugin.Transformer({
-  async getConfig({
-    asset,
-    resolve,
-    options
-  }) {
-    let configFile = await asset.getConfig(['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'], {
-      packageKey: 'postcss'
-    }); // 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': {}
-        }
-      };
-    }
+  return data;
+}
 
-    if (configFile == null) {
-      return;
-    }
+function _semver() {
+  const data = _interopRequireDefault(require("semver"));
 
-    if (typeof configFile !== 'object') {
-      throw new Error('PostCSS config should be an object.');
-    }
+  _semver = function () {
+    return data;
+  };
 
-    if (configFile.plugins == null || typeof configFile.plugins !== 'object' || Object.keys(configFile.plugins) === 0) {
-      throw new Error('PostCSS config must have plugins');
-    }
+  return data;
+}
 
-    let originalModulesConfig;
-    let configFilePlugins = configFile.plugins;
+function _postcssValueParser() {
+  const data = _interopRequireDefault(require("postcss-value-parser"));
 
-    if (configFilePlugins != null && typeof configFilePlugins === 'object' && configFilePlugins['postcss-modules'] != null) {
-      originalModulesConfig = configFilePlugins['postcss-modules']; // $FlowFixMe
+  _postcssValueParser = function () {
+    return data;
+  };
 
-      delete configFilePlugins['postcss-modules'];
-    }
+  return data;
+}
 
-    let plugins = await (0, _loadPlugins.default)(configFilePlugins, asset.filePath, options);
+var _loadConfig = require("./loadConfig");
 
-    if (originalModulesConfig || configFile.modules) {
-      let postcssModules = await options.packageManager.require('postcss-modules', asset.filePath);
-      plugins.push(postcssModules(_objectSpread({
-        getJSON: (filename, json) => asset.meta.cssModules = json,
-        Loader: createLoader(asset, resolve),
-        generateScopedName: (name, filename, css) => `_${name}_${(0, _utils.md5FromString)(filename + css).substr(0, 5)}`
-      }, originalModulesConfig)));
-    }
+var _constants = require("./constants");
 
-    return {
-      plugins,
-      from: asset.filePath,
-      to: asset.filePath
-    };
+function _diagnostic() {
+  const data = require("@parcel/diagnostic");
+
+  _diagnostic = function () {
+    return data;
+  };
+
+  return data;
+}
+
+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|:export|(:global|:local|:import)(?!\s*\()/i;
+const MODULE_BY_NAME_RE = /\.module\./;
+
+var _default = new (_plugin().Transformer)({
+  loadConfig({
+    config,
+    options,
+    logger
+  }) {
+    return (0, _loadConfig.load)({
+      config,
+      options,
+      logger
+    });
   },
 
   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()
     };
   },
 
   async transform({
     asset,
-    config
+    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: {}
+        }
+      }; // TODO: warning?
+    }
+
     if (!config) {
       return [asset];
     }
 
-    let ast = (0, _nullthrows.default)(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 = (0, _postcssValueParser.default)(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
-                  }
-                }
-              });
-            }
-          });
+    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 = 'postcss';
+      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().default.basename(config.filePath);
+
+        let message;
+        let configKey;
+        let hint;
+
+        if (config.raw.modules) {
+          message = (0, _diagnostic().md)`The "modules" option in __${filename}__ can be replaced with configuration for @parcel/transformer-css to improve build performance.`;
+          configKey = '/modules';
+          hint = (0, _diagnostic().md)`Remove the "modules" option from __${filename}__`;
+        } else {
+          message = (0, _diagnostic().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 = (0, _diagnostic().md)`Remove the "postcss-modules" plugin from __${filename}__`;
+        }
+
+        if (filename === 'package.json') {
+          configKey = `/postcss${configKey}`;
         }
+
+        let hints = ['Enable the "cssModules" option for "@parcel/transformer-css" in your package.json'];
+
+        if (plugins.length === 0) {
+          message += (0, _diagnostic().md)` Since there are no other plugins, __${filename}__ can be deleted safely.`;
+          hints.push((0, _diagnostic().md)`Delete __${filename}__`);
+        } else {
+          hints.push(hint);
+        }
+
+        let codeFrames;
+
+        if (_path().default.extname(filename) !== '.js') {
+          let contents = await asset.fs.readFile(config.filePath, 'utf8');
+          codeFrames = [{
+            language: 'json',
+            filePath: config.filePath,
+            code: contents,
+            codeHighlights: (0, _diagnostic().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) => 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
+      }));
+
+      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)(config.plugins).process(ast.program, config);
-    ast.program = root;
-    ast.isDirty = true;
+    } = await postcss(plugins).process(program, config.hydrated);
+    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;
-        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',
-        code
+        content: code
       });
     }
 
     return assets;
   },
 
-  generate({
-    asset
+  async generate({
+    asset,
+    ast,
+    options
   }) {
-    let ast = (0, _nullthrows.default)(asset.ast);
+    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 {
-      code
+      content: code
     };
   }
 
@@ -211,15 +364,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
 
 
@@ -230,7 +386,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;
     }
 
@@ -239,4 +396,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;