Correctly emit warnings for unnecessary PostCSS plugins in package.js…

…on (#8024)

packages/core/integration-tests/test/integration/postcss-modules-config-package/foo.css

@@ -0,0 +1,3 @@
+.foo {
+  color: #fff;
+}

packages/core/integration-tests/test/integration/postcss-modules-config-package/foo.js

@@ -0,0 +1,5 @@
+const map = require('./foo.css');
+
+module.exports = {
+  foo: map.foo,
+};

packages/core/integration-tests/test/integration/postcss-modules-config-package/index.css

@@ -0,0 +1,3 @@
+body {
+  background: blue;
+}

packages/core/integration-tests/test/integration/postcss-modules-config-package/index.js

@@ -0,0 +1,6 @@
+require('./index.css');
+var foo = require('./foo');
+
+module.exports = function () {
+  return foo.foo;
+};

packages/core/integration-tests/test/integration/postcss-modules-config-package/package.json

@@ -0,0 +1,10 @@
+{
+  "postcss": {
+    "modules": true,
+    "plugins": {
+      "autoprefixer": {
+        "grid": true
+      }
+    }
+  }
+}

packages/core/integration-tests/test/postcss.js

@@ -46,6 +46,37 @@ describe('postcss', () => {
     assert(css.includes(`.${cssClass}`));
   });
 
+  it('should build successfully with only postcss-modules config in package.json', async () => {
+    let b = await bundle(
+      path.join(
+        __dirname,
+        '/integration/postcss-modules-config-package/index.js',
+      ),
+    );
+
+    assertBundles(b, [
+      {
+        name: 'index.js',
+        assets: ['foo.css', 'foo.js', 'index.css', 'index.js'],
+      },
+      {
+        name: 'index.css',
+        assets: ['foo.css', 'index.css'],
+      },
+    ]);
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+
+    let value = output();
+    assert(/foo_[0-9a-z]/.test(value));
+
+    let cssClass = value.match(/(foo_[0-9a-z])/)[1];
+
+    let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
+    assert(css.includes(`.${cssClass}`));
+  });
+
   it('should support transforming with postcss twice with the same result', async () => {
     let b = await bundle(
       path.join(__dirname, '/integration/postcss-plugins/index.js'),

packages/transformers/postcss/src/PostCSSTransformer.js

@@ -101,6 +101,9 @@ export default (new Transformer({
           configKey = '/plugins/postcss-modules';
           hint = 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',

packages/transformers/postcss/src/loadConfig.js

@@ -79,9 +79,10 @@ async function configHydrator(
   );
   if (redundantPlugins.length > 0) {
     let filename = path.basename(resolveFrom);
+    let isPackageJson = filename === 'package.json';
     let message;
     let hints = [];
-    if (redundantPlugins.length === pluginArray.length) {
+    if (!isPackageJson && 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 {
@@ -96,6 +97,7 @@ async function configHydrator(
     let codeFrames;
     if (path.extname(filename) !== '.js') {
       let contents = await options.inputFS.readFile(resolveFrom, 'utf8');
+      let prefix = isPackageJson ? '/postcss' : '';
       codeFrames = [
         {
           language: 'json',
@@ -104,7 +106,7 @@ async function configHydrator(
           codeHighlights: generateJSONCodeHighlights(
             contents,
             redundantPlugins.map(plugin => ({
-              key: `/plugins/${plugin}`,
+              key: `${prefix}/plugins/${plugin}`,
               type: 'key',
             })),
           ),