Add 'webpack.postcss.plugins' config to set plugins for PostCSS

packages/slate-tools/cli/commands/build.js

@@ -1,3 +1,7 @@
+// Set NODE_ENV so slate.config.js can return different values for
+// production vs development builds
+process.env.NODE_ENV = 'production';
+
 /*
  * Run Webpack with the webpack.prod.conf.js configuration file. Write files to disk.
  *

packages/slate-tools/cli/commands/start.js

@@ -1,3 +1,7 @@
+// Set NODE_ENV so slate.config.js can return different values for
+// production vs development builds
+process.env.NODE_ENV = 'development';
+
 const argv = require('minimist')(process.argv.slice(2));
 const figures = require('figures');
 const chalk = require('chalk');

packages/slate-tools/slate-tools.schema.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const os = require('os');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
 const commonPaths = require('@shopify/slate-config/common/paths.schema');
 
 module.exports = {
@@ -70,11 +72,15 @@ module.exports = {
 
   // Extends webpack development config using 'webpack-merge'
   // https://www.npmjs.com/package/webpack-merge
-  'webpack.config.extend.dev': {},
+  'webpack.extend': {},
 
-  // Extends webpack production config using 'webpack-merge'
-  // https://www.npmjs.com/package/webpack-merge
-  'webpack.config.extend.prod': {},
+  'webpack.postcss.plugins': (config) => [
+    autoprefixer,
+
+    process.env.NODE_ENV === 'production'
+      ? cssnano(config.get('webpack.cssnano.settings'))
+      : null,
+  ],
 
   // Optimization settings for the cssnano plugin
   'webpack.cssnano.settings': {zindex: false, reduceIdents: false},

packages/slate-tools/tools/webpack/config/__tests__/dev.test.js

@@ -1,6 +1,6 @@
-test(`merges contents of 'webpack.config.extend.dev' into webpack config`, () => {
+test(`merges contents of 'webpack.extend' into webpack config`, () => {
   global.slateUserConfig = {
-    'webpack.config.extend.dev': {some: 'value'},
+    'webpack.extend': {some: 'value'},
   };
 
   jest.mock('../parts/core', () => {
@@ -18,8 +18,6 @@ test(`merges contents of 'webpack.config.extend.dev' into webpack config`, () =>
   require('../dev');
 
   expect(merge).toBeCalledWith(
-    expect.arrayContaining([
-      global.slateUserConfig['webpack.config.extend.dev'],
-    ]),
+    expect.arrayContaining([global.slateUserConfig['webpack.extend']]),
   );
 });

packages/slate-tools/tools/webpack/config/__tests__/prod.test.js

@@ -1,6 +1,6 @@
-test(`merges contents of 'webpack.config.extend.prod' into webpack config`, () => {
+test(`merges contents of 'webpack.extend' into webpack config`, () => {
   global.slateUserConfig = {
-    'webpack.config.extend.prod': {some: 'value'},
+    'webpack.extend': {some: 'value'},
   };
 
   jest.mock('../parts/core');
@@ -16,8 +16,6 @@ test(`merges contents of 'webpack.config.extend.prod' into webpack config`, () =
   require('../prod');
 
   expect(merge).toBeCalledWith(
-    expect.arrayContaining([
-      global.slateUserConfig['webpack.config.extend.prod'],
-    ]),
+    expect.arrayContaining([global.slateUserConfig['webpack.extend']]),
   );
 });

packages/slate-tools/tools/webpack/config/dev.js

@@ -2,12 +2,13 @@ const path = require('path');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const autoprefixer = require('autoprefixer');
+
 const SlateConfig = require('@shopify/slate-config');
 
 const core = require('./parts/core');
 const babel = require('./parts/babel');
 const entry = require('./parts/entry');
+const sass = require('./parts/sass');
 
 const commonExcludes = require('./utilities/common-excludes');
 const getLayoutEntrypoints = require('./utilities/get-layout-entrypoints');
@@ -26,6 +27,7 @@ module.exports = merge([
   core,
   entry,
   babel,
+  sass,
   {
     mode: 'development',
 
@@ -44,35 +46,6 @@ module.exports = merge([
             },
           ],
         },
-        {
-          test: /\.s[ac]ss$/,
-          exclude: commonExcludes(),
-          use: [
-            {
-              loader: 'style-loader',
-              options: {
-                hmr: true,
-              },
-            },
-            {
-              loader: 'css-loader',
-              // Enabling sourcemaps in styles causes style-loader to inject
-              // styles using a <link> tag instead of <style> tag. This causes
-              // a FOUC content, which can cause issues with JS that is reading
-              // the DOM for styles (width, height, visibility) on page load.
-              options: {importLoaders: 2, sourceMap: false},
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                ident: 'postcss',
-                sourceMap: false,
-                plugins: () => [autoprefixer],
-              },
-            },
-            {loader: 'sass-loader', options: {sourceMap: false}},
-          ],
-        },
       ],
     },
 
@@ -113,5 +86,5 @@ module.exports = merge([
       new HtmlWebpackIncludeLiquidStylesPlugin(),
     ],
   },
-  config.get('webpack.config.extend.dev'),
+  config.get('webpack.extend'),
 ]);

packages/slate-tools/tools/webpack/config/parts/__tests__/sass.test.js

@@ -0,0 +1,37 @@
+beforeEach(jest.resetModules);
+
+test(`passes 'webpack.cssnano.settings' config to cssnano`, () => {
+  const oldNodeEnv = process.env.NODE_ENV;
+  process.env.NODE_ENV = 'production';
+
+  jest.mock('cssnano');
+
+  const cssnano = require('cssnano');
+  const SlateConfig = require('@shopify/slate-config');
+  const config = new SlateConfig(require('../../../../../slate-tools.schema'));
+
+  require('../sass');
+
+  expect(cssnano).toBeCalledWith(config.get('webpack.cssnano.settings'));
+
+  process.env.NODE_ENV = oldNodeEnv;
+});
+
+test(`passes 'webpack.postcss.plugins' config to PostCSS Loader`, () => {
+  const oldNodeEnv = process.env.NODE_ENV;
+  process.env.NODE_ENV = 'development';
+
+  const SlateConfig = require('@shopify/slate-config');
+  const config = new SlateConfig(require('../../../../../slate-tools.schema'));
+
+  const part = require('../sass');
+  const postcssLoader = part.module.rules[0].use.find(
+    (item) => item.loader === 'postcss-loader',
+  );
+
+  expect(postcssLoader.options.plugins).toMatchObject(
+    config.get('webpack.postcss.plugins'),
+  );
+
+  process.env.NODE_ENV = oldNodeEnv;
+});

packages/slate-tools/tools/webpack/config/parts/sass.js

@@ -0,0 +1,67 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const SlateConfig = require('@shopify/slate-config');
+
+const commonExcludes = require('../utilities/common-excludes');
+const config = new SlateConfig(require('../../../../slate-tools.schema'));
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+const part = {
+  module: {
+    rules: [],
+  },
+  plugins: [],
+};
+
+const sassRule = {
+  test: /\.s[ac]ss$/,
+  exclude: commonExcludes(),
+};
+
+const styleLoader = {
+  loader: 'style-loader',
+  options: {
+    hmr: isDevelopment,
+  },
+};
+
+const cssLoader = {
+  loader: 'css-loader',
+  // Enabling sourcemaps in styles when using HMR causes style-loader to inject
+  // styles using a <link> tag instead of <style> tag. This causes
+  // a FOUC content, which can cause issues with JS that is reading
+  // the DOM for styles (width, height, visibility) on page load.
+  options: {importLoaders: 2, sourceMap: !isDevelopment},
+};
+
+const postcssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    ident: 'postcss',
+    sourceMap: !isDevelopment,
+    plugins: config.get('webpack.postcss.plugins'),
+  },
+};
+
+const cssVarLoader = {loader: '@shopify/slate-cssvar-loader'};
+
+const sassLoader = {loader: 'sass-loader', options: {sourceMap: false}};
+
+const extractStyles = new ExtractTextPlugin({
+  filename: '[name].css.liquid',
+  allChunks: true,
+});
+
+if (isDevelopment) {
+  sassRule.use = [styleLoader, cssLoader, postcssLoader, sassLoader];
+  part.module.rules.push(sassRule);
+} else {
+  sassRule.use = extractStyles.extract({
+    fallback: styleLoader,
+    use: [cssVarLoader, cssLoader, postcssLoader, sassLoader],
+  });
+  part.module.rules.push(sassRule);
+  part.plugins.push(extractStyles);
+}
+
+module.exports = part;

packages/slate-tools/tools/webpack/config/prod.js

@@ -10,7 +10,7 @@ const SlateLiquidAssetsPlugin = require('@shopify/html-webpack-liquid-asset-tags
 const SlateTagPlugin = require('@shopify/slate-tag-webpack-plugin');
 
 const babel = require('./parts/babel');
-const sass = require('./parts/sass.prod');
+const sass = require('./parts/sass');
 const entry = require('./parts/entry');
 const core = require('./parts/core');
 
@@ -113,5 +113,5 @@ module.exports = merge([
       },
     },
   },
-  config.get('webpack.config.extend.prod'),
+  config.get('webpack.extend'),
 ]);