fix: 🔧 Make webpack use the postcss config

cozy · Feb 7, 2019 · 1aec8a2 · 1aec8a2
1 parent db1d702
commit 1aec8a2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/config/webpack.config.extract.js b/config/webpack.config.extract.js
@@ -4,7 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const webpack = require('webpack')
 const path = require('path')
 
-module.exports = ({ filename }) => ({
+module.exports = ({ filename, production }) => ({
   resolve: {
     extensions: ['.styl']
   },
@@ -23,7 +23,9 @@ module.exports = ({ filename }) => ({
             loader: 'postcss-loader',
             options: {
               config: {
-                path: path.join(__dirname, '../postcss.config.js')
+                ctx: {
+                  env: production ? 'production' : 'development'
+                }
               },
               sourceMap: true
             }
@@ -51,7 +53,9 @@ module.exports = ({ filename }) => ({
             loader: 'postcss-loader',
             options: {
               config: {
-                path: path.join(__dirname, '../postcss.config.js')
+                ctx: {
+                  env: production ? 'production' : 'development'
+                }
               },
               sourceMap: true
             }

diff --git a/config/webpack.config.inline-styles.js b/config/webpack.config.inline-styles.js
@@ -3,7 +3,7 @@
 const webpack = require('webpack')
 const path = require('path')
 
-module.exports = {
+module.exports = ({ production }) => ({
   resolve: {
     extensions: ['.styl']
   },
@@ -24,7 +24,9 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               config: {
-                path: path.join(__dirname, '../postcss.config.js')
+                ctx: {
+                  env: production ? 'production' : 'development'
+                }
               },
               sourceMap: true
             }
@@ -45,4 +47,4 @@ module.exports = {
       }
     })
   ]
-}
+})
diff --git a/config/webpack.js b/config/webpack.js
@@ -7,7 +7,7 @@ const vars = require('./webpack.vars')
 
 const cssConfig = vars => {
   if (vars.mobile) {
-    return require('./webpack.config.inline-styles.js')
+    return require('./webpack.config.inline-styles.js')(vars)
   } else {
     return require('./webpack.config.extract')(vars)
   }
@@ -21,7 +21,7 @@ module.exports = (env = {}) => {
     addAnalyzer ? require('./webpack.config.analyzer.js') : {},
     require('./webpack.config.jsx.js'),
     require(production ? './webpack.config.prod' : './webpack.config.dev'),
-    cssConfig({ filename, mobile }),
+    cssConfig({ filename, mobile, production }),
     {
       output: {
         filename: filename('js', mobile ? 'mobile' : ''),

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,23 +1,23 @@
 const path = require('path')
 
-const { production } = require('./config/webpack.vars')
+module.exports = ({ options }) => {
+  let plugins = [
+    require('postcss-import')({
+      path: [path.resolve(__dirname, 'src/styles/')]
+    }),
+    require('autoprefixer')(['last 2 versions', 'not dead', 'not ie <= 11'])
+  ]
 
-const commons = [
-  require('postcss-import')({
-    path: [path.resolve(__dirname, 'src/styles/')],
-    plugins: production ? [
-      require('autoprefixer')(['last 2 versions']),
-      require('postcss-discard-empty')
-    ] : []
-  })
-]
+  if (options.env === 'production') {
+    plugins = plugins.concat([
+      require('postcss-discard-empty'),
+      require('postcss-discard-duplicates'),
+      require('css-mqpacker'),
+      require('csswring')({
+        removeAllComments: true
+      })
+    ])
+  }
 
-module.exports = {
-  plugins: production ? commons.concat([
-    require('postcss-discard-duplicates'),
-    require('css-mqpacker'),
-    require('csswring')({
-      removeAllComments: true
-    })
-  ]) : commons
+  return { plugins }
 }