@parcel/transformer-postcss 2.8.3 → 2.9.0

package/lib/PostCSSTransformer.js

@@ -4,98 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 function _hash() {
   const data = require("@parcel/hash");
-
   _hash = function () {
     return data;
   };
-
   return data;
 }
-
 function _utils() {
   const data = require("@parcel/utils");
-
   _utils = function () {
     return data;
   };
-
   return data;
 }
-
 function _plugin() {
   const data = require("@parcel/plugin");
-
   _plugin = function () {
     return data;
   };
-
   return data;
 }
-
 function _nullthrows() {
   const data = _interopRequireDefault(require("nullthrows"));
-
   _nullthrows = function () {
     return data;
   };
-
   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 _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,
@@ -108,24 +79,20 @@ var _default = new (_plugin().Transformer)({
       logger
     });
   },
-
   canReuseAST({
     ast
   }) {
     return ast.type === 'postcss' && _semver().default.satisfies(ast.version, _constants.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',
@@ -135,7 +102,6 @@ var _default = new (_plugin().Transformer)({
       }).toJSON()
     };
   },
-
   async transform({
     asset,
     config,
@@ -145,7 +111,6 @@ var _default = new (_plugin().Transformer)({
   }) {
     asset.type = 'css';
     let isLegacy = await isLegacyCssModule(asset);
-
     if (isLegacy && !config) {
       config = {
         raw: {},
@@ -156,30 +121,27 @@ var _default = new (_plugin().Transformer)({
           to: asset.filePath,
           modules: {}
         }
-      }; // TODO: warning?
+      };
+
+      // 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 = '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';
@@ -189,22 +151,17 @@ var _default = new (_plugin().Transformer)({
           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 = [{
@@ -231,16 +188,15 @@ var _default = new (_plugin().Transformer)({
             }]
           }];
         }
-
         logger.warn({
           message,
           hints,
           documentationURL: 'https://parceljs.org/languages/css/#enabling-css-modules-globally',
           codeFrames
         });
-      } // TODO: should this be resolved from the project root?
-
+      }
 
+      // 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,
@@ -252,11 +208,9 @@ var _default = new (_plugin().Transformer)({
         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 => {
@@ -278,9 +232,9 @@ var _default = new (_plugin().Transformer)({
           }
         });
       }
-    } // $FlowFixMe Added in Flow 0.121.0 upgrade in #4381
-
+    }
 
+    // $FlowFixMe Added in Flow 0.121.0 upgrade in #4381
     let {
       messages,
       root
@@ -290,61 +244,50 @@ var _default = new (_plugin().Transformer)({
       version: '8.2.1',
       program: root.toJSON()
     });
-
     for (let msg of messages) {
       if (msg.type === 'dependency') {
         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 (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.
+        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
       });
     }
-
     return assets;
   },
-
   async generate({
     asset,
     ast,
@@ -359,11 +302,8 @@ var _default = new (_plugin().Transformer)({
       content: code
     };
   }
-
 });
-
 exports.default = _default;
-
 async function createLoader(asset, resolve, options) {
   let {
     default: FileSystemLoader
@@ -372,32 +312,26 @@ async function createLoader(asset, resolve, options) {
     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
+      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]
+      } = await this.core.load(source, rootRelativePath, undefined,
+      // $FlowFixMe[method-unbinding]
       this.fetch.bind(this));
       return exportTokens;
     }
-
     get finalSource() {
       return '';
     }
-
   };
 }
-
 function loadPostcss(options, from) {
   return options.packageManager.require('postcss', from, {
     range: _constants.POSTCSS_RANGE,
@@ -405,12 +339,10 @@ function loadPostcss(options, from) {
     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

@@ -4,88 +4,59 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.load = load;
-
 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 _diagnostic() {
   const data = require("@parcel/diagnostic");
-
   _diagnostic = 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 }; }
-
 async function configHydrator(configFile, config, resolveFrom, options, logger) {
   if (configFile == null) {
     return;
-  } // Load the custom config...
-
+  }
 
+  // Load the custom config...
   let modulesConfig;
   let configFilePlugins = (0, _clone().default)(configFile.plugins);
-
   if (configFilePlugins != null && typeof configFilePlugins === 'object' && configFilePlugins['postcss-modules'] != null) {
     modulesConfig = configFilePlugins['postcss-modules'];
     delete configFilePlugins['postcss-modules'];
   }
-
   if (!modulesConfig && configFile.modules) {
     modulesConfig = {};
   }
+  let plugins = await (0, _loadPlugins.default)(configFilePlugins, (0, _nullthrows().default)(resolveFrom), options);
 
-  let plugins = await (0, _loadPlugins.default)(configFilePlugins, (0, _nullthrows().default)(resolveFrom), options); // contents is either:
+  // 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({
@@ -94,16 +65,12 @@ async function configHydrator(configFile, config, resolveFrom, options, logger)
       });
     }
   }
-
   let redundantPlugins = pluginArray.filter(p => p === 'autoprefixer' || p === 'postcss-preset-env');
-
   if (redundantPlugins.length > 0) {
     let filename = _path().default.basename(resolveFrom);
-
     let isPackageJson = filename === 'package.json';
     let message;
     let hints = [];
-
     if (!isPackageJson && redundantPlugins.length === pluginArray.length) {
       message = (0, _diagnostic().md)`Parcel includes CSS transpilation and vendor prefixing by default. PostCSS config __${filename}__ contains only redundant plugins. Deleting it may significantly improve build performance.`;
       hints.push((0, _diagnostic().md)`Delete __${filename}__`);
@@ -111,9 +78,7 @@ async function configHydrator(configFile, config, resolveFrom, options, logger)
       message = (0, _diagnostic().md)`Parcel includes CSS transpilation and vendor prefixing by default. PostCSS config __${filename}__ contains the following redundant plugins: ${[...redundantPlugins].map(p => _diagnostic().md.underline(p))}. Removing these may improve build performance.`;
       hints.push((0, _diagnostic().md)`Remove the above plugins from __${filename}__`);
     }
-
     let codeFrames;
-
     if (_path().default.extname(filename) !== '.js') {
       let contents = await options.inputFS.readFile(resolveFrom, 'utf8');
       let prefix = isPackageJson ? '/postcss' : '';
@@ -141,7 +106,6 @@ async function configHydrator(configFile, config, resolveFrom, options, logger)
         }]
       }];
     }
-
     logger.warn({
       message,
       hints,
@@ -149,7 +113,6 @@ async function configHydrator(configFile, config, resolveFrom, options, logger)
       codeFrames
     });
   }
-
   return {
     raw: configFile,
     filePath: resolveFrom,
@@ -161,7 +124,6 @@ async function configHydrator(configFile, config, resolveFrom, options, logger)
     }
   };
 }
-
 async function load({
   config,
   options,
@@ -170,12 +132,10 @@ async function load({
   if (!config.isSource) {
     return;
   }
-
-  let configFile = await config.getConfig(['.postcssrc', '.postcssrc.json', '.postcssrc.js', '.postcssrc.cjs', 'postcss.config.js', 'postcss.config.cjs'], {
+  let configFile = await config.getConfig(['.postcssrc', '.postcssrc.json', '.postcssrc.js', '.postcssrc.cjs', '.postcssrc.mjs', 'postcss.config.js', 'postcss.config.cjs', 'postcss.config.mjs'], {
     packageKey: 'postcss'
   });
   let contents = null;
-
   if (configFile) {
     config.addDevDependency({
       specifier: 'postcss',
@@ -183,31 +143,20 @@ async function load({
       range: _constants.POSTCSS_RANGE
     });
     contents = configFile.contents;
-
     let isDynamic = configFile && _path().default.extname(configFile.filePath).endsWith('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.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).length === 0) {
       throw new Error('PostCSS config must have plugins');
     }
   }
-
   return configHydrator(contents, config, configFile === null || configFile === void 0 ? void 0 : configFile.filePath, options, logger);
 }

package/lib/loadPlugins.js

@@ -4,7 +4,6 @@ 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, options.shouldAutoInstall)).filter(Boolean));
@@ -15,20 +14,16 @@ async function loadExternalPlugins(plugins, relative, options) {
     return [];
   }
 }
-
 async function loadPlugin(pluginArg, relative, options = {}, packageManager, shouldAutoInstall) {
   if (typeof pluginArg !== 'string') {
     return pluginArg;
   }
-
   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,6 +1,6 @@
 {
   "name": "@parcel/transformer-postcss",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,13 +17,13 @@
   "source": "src/PostCSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.8.3"
+    "parcel": "^2.9.0"
   },
   "dependencies": {
-    "@parcel/diagnostic": "2.8.3",
-    "@parcel/hash": "2.8.3",
-    "@parcel/plugin": "2.8.3",
-    "@parcel/utils": "2.8.3",
+    "@parcel/diagnostic": "2.9.0",
+    "@parcel/hash": "2.9.0",
+    "@parcel/plugin": "2.9.0",
+    "@parcel/utils": "2.9.0",
     "clone": "^2.1.1",
     "nullthrows": "^1.1.1",
     "postcss-value-parser": "^4.2.0",
@@ -33,5 +33,5 @@
     "postcss": "^8.4.5",
     "postcss-modules": "^4.3.1"
   },
-  "gitHead": "349a6caf40ec8abb6a49fcae0765f8f8deb2073d"
+  "gitHead": "dd9435be8afed35c5ffc161cf4b586fd6c78fc1f"
 }

package/src/loadConfig.js

@@ -6,7 +6,6 @@ import type {
   PluginLogger,
 } from '@parcel/types';
 import path from 'path';
-import {relativePath} from '@parcel/utils';
 import {md, generateJSONCodeHighlights} from '@parcel/diagnostic';
 import nullthrows from 'nullthrows';
 import clone from 'clone';
@@ -165,8 +164,10 @@ export async function load({
       '.postcssrc.json',
       '.postcssrc.js',
       '.postcssrc.cjs',
+      '.postcssrc.mjs',
       'postcss.config.js',
       'postcss.config.cjs',
+      'postcss.config.mjs',
     ],
     {packageKey: 'postcss'},
   );
@@ -189,17 +190,6 @@ export async function load({
         message:
           'WARNING: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.',
       });
-
-      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') {