@parcel/transformer-postcss 2.3.0 → 2.4.0

package/lib/PostCSSTransformer.js

@@ -79,6 +79,16 @@ 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*;?/;
@@ -130,13 +140,16 @@ var _default = new (_plugin().Transformer)({
     asset,
     config,
     options,
-    resolve
+    resolve,
+    logger
   }) {
     asset.type = 'css';
     let isLegacy = await isLegacyCssModule(asset);
 
     if (isLegacy && !config) {
       config = {
+        raw: {},
+        filePath: '',
         hydrated: {
           plugins: [],
           from: asset.filePath,
@@ -157,7 +170,72 @@ var _default = new (_plugin().Transformer)({
     let cssModules = null;
 
     if (config.hydrated.modules) {
-      asset.meta.cssModulesCompiled = true; // TODO: should this be resolved from the project root?
+      asset.meta.cssModulesCompiled = true;
+      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}__`;
+        }
+
+        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',
@@ -170,7 +248,6 @@ var _default = new (_plugin().Transformer)({
         generateScopedName: (name, filename) => `${name}_${(0, _hash().hashString)(_path().default.relative(options.projectRoot, filename)).substr(0, 6)}`,
         ...config.hydrated.modules
       }));
-      let code = asset.isASTDirty() ? null : await asset.getCode();
 
       if (code == null || COMPOSES_RE.test(code)) {
         program.walkDecls(decl => {

package/lib/loadConfig.js

@@ -25,6 +25,16 @@ function _utils() {
   return data;
 }
 
+function _diagnostic() {
+  const data = require("@parcel/diagnostic");
+
+  _diagnostic = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _nullthrows() {
   const data = _interopRequireDefault(require("nullthrows"));
 
@@ -51,7 +61,7 @@ var _loadPlugins = _interopRequireDefault(require("./loadPlugins"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-async function configHydrator(configFile, config, resolveFrom, options) {
+async function configHydrator(configFile, config, resolveFrom, options, logger) {
   if (configFile == null) {
     return;
   } // Load the custom config...
@@ -85,8 +95,62 @@ async function configHydrator(configFile, config, resolveFrom, options) {
     }
   }
 
+  let redundantPlugins = pluginArray.filter(p => p === 'autoprefixer' || p === 'postcss-preset-env');
+
+  if (redundantPlugins.length > 0) {
+    let filename = _path().default.basename(resolveFrom);
+
+    let message;
+    let hints = [];
+
+    if (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}__`);
+    } else {
+      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');
+      codeFrames = [{
+        language: 'json',
+        filePath: resolveFrom,
+        code: contents,
+        codeHighlights: (0, _diagnostic().generateJSONCodeHighlights)(contents, redundantPlugins.map(plugin => ({
+          key: `/plugins/${plugin}`,
+          type: 'key'
+        })))
+      }];
+    } else {
+      codeFrames = [{
+        filePath: resolveFrom,
+        codeHighlights: [{
+          start: {
+            line: 1,
+            column: 1
+          },
+          end: {
+            line: 1,
+            column: 1
+          }
+        }]
+      }];
+    }
+
+    logger.warn({
+      message,
+      hints,
+      documentationURL: 'https://parceljs.org/languages/css/#default-plugins',
+      codeFrames
+    });
+  }
+
   return {
     raw: configFile,
+    filePath: resolveFrom,
     hydrated: {
       plugins,
       from: config.searchPath,
@@ -142,5 +206,5 @@ async function load({
     }
   }
 
-  return configHydrator(contents, config, configFile === null || configFile === void 0 ? void 0 : configFile.filePath, options);
+  return configHydrator(contents, config, configFile === null || configFile === void 0 ? void 0 : configFile.filePath, options, logger);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-postcss",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,19 +17,21 @@
   "source": "src/PostCSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.3.0"
+    "parcel": "^2.4.0"
   },
   "dependencies": {
-    "@parcel/hash": "^2.3.0",
-    "@parcel/plugin": "^2.3.0",
-    "@parcel/utils": "^2.3.0",
+    "@parcel/diagnostic": "2.4.0",
+    "@parcel/hash": "2.4.0",
+    "@parcel/plugin": "2.4.0",
+    "@parcel/utils": "2.4.0",
     "clone": "^2.1.1",
     "nullthrows": "^1.1.1",
     "postcss-value-parser": "^4.2.0",
     "semver": "^5.7.1"
   },
   "devDependencies": {
-    "postcss": "^8.4.5"
+    "postcss": "^8.4.5",
+    "postcss-modules": "^4.3.1"
   },
-  "gitHead": "65ffb58e88024258c31e1f480241f293e29b25c5"
+  "gitHead": "b1bbfdab2e902d33c0b6ff75bfba2d22283a8de6"
 }

package/src/PostCSSTransformer.js

@@ -13,6 +13,7 @@ import typeof * as Postcss from 'postcss';
 
 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*;?/;
@@ -49,11 +50,13 @@ export default (new Transformer({
     };
   },
 
-  async transform({asset, config, options, resolve}) {
+  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,
@@ -78,6 +81,76 @@ export default (new Transformer({
     if (config.hydrated.modules) {
       asset.meta.cssModulesCompiled = true;
 
+      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}__`;
+        }
+
+        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',
@@ -101,7 +174,6 @@ export default (new Transformer({
         }),
       );
 
-      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) || [];

package/src/loadConfig.js

@@ -7,6 +7,7 @@ import type {
 } 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';
 import {POSTCSS_RANGE} from './constants';
@@ -15,6 +16,7 @@ import loadExternalPlugins from './loadPlugins';
 
 type ConfigResult = {|
   raw: any,
+  filePath: string,
   hydrated: {|
     plugins: Array<any>,
     from: FilePath,
@@ -26,8 +28,9 @@ type ConfigResult = {|
 async function configHydrator(
   configFile: any,
   config: Config,
-  resolveFrom: ?FilePath,
+  resolveFrom: FilePath,
   options: PluginOptions,
+  logger: PluginLogger,
 ): Promise<?ConfigResult> {
   if (configFile == null) {
     return;
@@ -71,8 +74,67 @@ async function configHydrator(
     }
   }
 
+  let redundantPlugins = pluginArray.filter(
+    p => p === 'autoprefixer' || p === 'postcss-preset-env',
+  );
+  if (redundantPlugins.length > 0) {
+    let filename = path.basename(resolveFrom);
+    let message;
+    let hints = [];
+    if (redundantPlugins.length === pluginArray.length) {
+      message = 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(md`Delete __${filename}__`);
+    } else {
+      message = md`Parcel includes CSS transpilation and vendor prefixing by default. PostCSS config __${filename}__ contains the following redundant plugins: ${[
+        ...redundantPlugins,
+      ].map(p =>
+        md.underline(p),
+      )}. Removing these may improve build performance.`;
+      hints.push(md`Remove the above plugins from __${filename}__`);
+    }
+
+    let codeFrames;
+    if (path.extname(filename) !== '.js') {
+      let contents = await options.inputFS.readFile(resolveFrom, 'utf8');
+      codeFrames = [
+        {
+          language: 'json',
+          filePath: resolveFrom,
+          code: contents,
+          codeHighlights: generateJSONCodeHighlights(
+            contents,
+            redundantPlugins.map(plugin => ({
+              key: `/plugins/${plugin}`,
+              type: 'key',
+            })),
+          ),
+        },
+      ];
+    } else {
+      codeFrames = [
+        {
+          filePath: resolveFrom,
+          codeHighlights: [
+            {
+              start: {line: 1, column: 1},
+              end: {line: 1, column: 1},
+            },
+          ],
+        },
+      ];
+    }
+
+    logger.warn({
+      message,
+      hints,
+      documentationURL: 'https://parceljs.org/languages/css/#default-plugins',
+      codeFrames,
+    });
+  }
+
   return {
     raw: configFile,
+    filePath: resolveFrom,
     hydrated: {
       plugins,
       from: config.searchPath,
@@ -143,5 +205,11 @@ export async function load({
     }
   }
 
-  return configHydrator(contents, config, configFile?.filePath, options);
+  return configHydrator(
+    contents,
+    config,
+    configFile?.filePath,
+    options,
+    logger,
+  );
 }