fix: compatibility with postcss@8 (#479)

webpack-contrib · Sep 15, 2020 · 218b0f8 · 218b0f8
1 parent ca1389c
commit 218b0f8
Show file tree

Hide file tree

Showing 10 changed files with 1,678 additions and 180 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
   ],
   "peerDependencies": {
     "webpack": "^4.0.0 || ^5.0.0",
-    "postcss": "^7.0.0"
+    "postcss": "^7.0.0 || ^8.0.1"
   },
   "dependencies": {
     "cosmiconfig": "^7.0.0",
@@ -61,7 +61,7 @@
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "del-cli": "^3.0.1",
-    "eslint": "^7.8.1",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "husky": "^4.3.0",
@@ -72,11 +72,11 @@
     "memfs": "^3.2.0",
     "midas": "^2.0.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.32",
+    "postcss": "^8.0.1",
+    "postcss-dark-theme-class": "^0.4.0",
     "postcss-import": "^12.0.1",
     "postcss-js": "^2.0.0",
     "postcss-nested": "^4.2.3",
-    "postcss-rtl": "^1.7.3",
     "postcss-short": "^5.0.0",
     "prettier": "^2.1.1",
     "sass": "^1.26.10",

diff --git a/test/__snapshots__/postcssOptins.test.js.snap b/test/__snapshots__/postcssOptins.test.js.snap
@@ -367,15 +367,35 @@ Object {
 exports[`"postcssOptions" option should work with the "config" options and resolve "from" and "to" options: warnings 1`] = `Array []`;
 
 exports[`"postcssOptions" option should work with the "config" options and use plugins: css 1`] = `
-"a { color: rgba(0, 0, 0, 1.0) }
+"a { color: black }
 
-[dir=ltr] .foo { float: right;
+.foo {
+  float: right;
 }
 
-[dir=rtl] .foo {
-  float: left;
+.bar {
+  border-top-color: blue;
+  border-right-color: blue;
+  border-left-color: blue;
+  background-color: #fafafa;
 }
-"
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.is-light) { /* :root is <html> for HTML documents */
+    --text-color: white
+  }
+  html:not(.is-light) body {
+    background: black
+  }
+}
+
+:root.is-dark { /* :root is <html> for HTML documents */
+    --text-color: white
+  }
+
+html.is-dark body {
+    background: black
+  }"
 `;
 
 exports[`"postcssOptions" option should work with the "config" options and use plugins: errors 1`] = `Array []`;
@@ -739,13 +759,13 @@ a {
 }
 
 .phone_title {
-    width: 500px;
+    width: 100px;
   }
 
 @media (max-width: 500px) {
 
 .phone_title {
-      width: auto
+      width: 100px
   }
     }
 

diff --git a/test/fixtures/config-scope/with-config/index.js b/test/fixtures/config-scope/with-config/index.js
@@ -0,0 +1,3 @@
+import style from './style.css'
+
+export default style
diff --git a/test/fixtures/config-scope/with-config/postcss.config.js b/test/fixtures/config-scope/with-config/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = function () {
+  return {
+    plugins: [['postcss-short', { prefix: 'x' }]],
+  }
+};
diff --git a/test/fixtures/config-scope/with-config/style.css b/test/fixtures/config-scope/with-config/style.css
@@ -0,0 +1,19 @@
+a { color: black }
+
+.foo {
+  float: right;
+}
+
+.bar {
+  -x-border-color: blue blue *;
+  -x-color: * #fafafa;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root { /* :root is <html> for HTML documents */
+    --text-color: white
+  }
+  body {
+    background: black
+  }
+}
diff --git a/test/fixtures/plugin/new-api.plugin.js b/test/fixtures/plugin/new-api.plugin.js
@@ -0,0 +1,11 @@
+module.exports = (opts = {}) => {
+  return {
+    postcssPlugin: 'postcss-new-api-plugin',
+    Declaration: {
+      width: (node) => {
+        node.value = '100px';
+      },
+    },
+  };
+};
+module.exports.postcss = true;
diff --git a/test/loader.test.js b/test/loader.test.js
@@ -24,6 +24,7 @@ describe('loader', () => {
   it('should throw an error on invalid syntax', async () => {
     const compiler = getCompiler('./css/index.js', {
       postcssOptions: {
+        hideNothingWarning: true,
         parser: 'sugarss',
       },
     });
@@ -97,6 +98,9 @@ describe('loader', () => {
                 },
                 {
                   loader: path.resolve(__dirname, '../src'),
+                  options: {
+                    postcssOptions: { hideNothingWarning: true },
+                  },
                 },
                 {
                   loader: require.resolve('./helpers/astLoader'),
@@ -121,6 +125,7 @@ describe('loader', () => {
     const compiler = getCompiler('./sss/index.js', {
       postcssOptions: {
         parser: 'sugarss',
+        hideNothingWarning: true,
       },
     });
     const stats = await compile(compiler);

diff --git a/test/postcssOptins.test.js b/test/postcssOptins.test.js
@@ -343,6 +343,8 @@ describe('"postcssOptions" option', () => {
           require.resolve('./fixtures/plugin/other-plugin'),
           myPostcssPlugin({ color: 'white', alpha: 0 }),
           { 'postcss-short': { prefix: 'z' } },
+          // New API
+          require.resolve('./fixtures/plugin/new-api.plugin'),
         ],
       },
     });
@@ -685,10 +687,10 @@ describe('"postcssOptions" option', () => {
   });
 
   it('should work with the "config" options and use plugins', async () => {
-    const compiler = getCompiler('./config-scope/css/index.js', {
+    const compiler = getCompiler('./config-scope/with-config/index.js', {
       postcssOptions: {
         config: true,
-        plugins: ['postcss-rtl'],
+        plugins: ['postcss-dark-theme-class'],
       },
     });
     const stats = await compile(compiler);

diff --git a/test/sourceMap.test.js b/test/sourceMap.test.js
@@ -19,6 +19,7 @@ describe('"sourceMap" option', () => {
       './css/index.js',
       {
         sourceMap: true,
+        postcssOptions: { hideNothingWarning: true },
       },
       {
         devtool: false,
@@ -51,6 +52,7 @@ describe('"sourceMap" option', () => {
       './css/index.js',
       {
         sourceMap: true,
+        postcssOptions: { hideNothingWarning: true },
       },
       {
         devtool: 'source-map',
@@ -81,7 +83,9 @@ describe('"sourceMap" option', () => {
   it('should generate source maps when value is not specified and the "devtool" with "source-map" value', async () => {
     const compiler = getCompiler(
       './css/index.js',
-      {},
+      {
+        postcssOptions: { hideNothingWarning: true },
+      },
       {
         devtool: 'source-map',
       }
@@ -119,6 +123,7 @@ describe('"sourceMap" option', () => {
             prev: false,
             sourcesContent: true,
           },
+          hideNothingWarning: true,
         },
       },
       {
@@ -165,6 +170,7 @@ describe('"sourceMap" option', () => {
                   options: {
                     postcssOptions: {
                       map: true,
+                      hideNothingWarning: true,
                     },
                   },
                 },
@@ -228,6 +234,7 @@ describe('"sourceMap" option', () => {
                         sourcesContent: true,
                         annotation: true,
                       },
+                      hideNothingWarning: true,
                     },
                   },
                 },
@@ -282,6 +289,7 @@ describe('"sourceMap" option', () => {
       './css/index.js',
       {
         sourceMap: false,
+        postcssOptions: { hideNothingWarning: true },
       },
       {
         devtool: false,
@@ -301,6 +309,7 @@ describe('"sourceMap" option', () => {
       './css/index.js',
       {
         sourceMap: false,
+        postcssOptions: { hideNothingWarning: true },
       },
       {
         devtool: 'source-map',
@@ -318,7 +327,9 @@ describe('"sourceMap" option', () => {
   it('should not generate source maps when value is not specified and the "devtool" option with "source-map" value', async () => {
     const compiler = getCompiler(
       './css/index.js',
-      {},
+      {
+        postcssOptions: { hideNothingWarning: true },
+      },
       {
         devtool: false,
       }
@@ -348,6 +359,9 @@ describe('"sourceMap" option', () => {
                 },
                 {
                   loader: path.resolve(__dirname, '../src'),
+                  options: {
+                    postcssOptions: { hideNothingWarning: true },
+                  },
                 },
                 {
                   loader: 'sass-loader',
@@ -387,9 +401,7 @@ describe('"sourceMap" option', () => {
   it('should generate source maps when previous loader returns source maps ("less-loader")', async () => {
     const compiler = getCompiler(
       './less/index.js',
-      {
-        config: false,
-      },
+      {},
       {
         devtool: 'source-map',
         module: {
@@ -403,6 +415,9 @@ describe('"sourceMap" option', () => {
                 },
                 {
                   loader: path.resolve(__dirname, '../src'),
+                  options: {
+                    postcssOptions: { hideNothingWarning: true },
+                  },
                 },
                 {
                   loader: 'less-loader',
@@ -444,6 +459,7 @@ describe('"sourceMap" option', () => {
             inline: true,
             annotation: false,
           },
+          hideNothingWarning: true,
         },
       },
       {
@@ -467,6 +483,7 @@ describe('"sourceMap" option', () => {
             inline: true,
             annotation: false,
           },
+          hideNothingWarning: true,
         },
       },
       {