diff --git a/config/webpack.config.extract.js b/config/webpack.config.extract.js index b1d4d6e63..25f80bae7 100644 --- 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 index fa4384609..fdbe50e80 100644 --- 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 index ea39e3ec1..1967e7bc3 100644 --- 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 index cd2001e48..2b919282a 100644 --- 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 } }