Add rule to webpack config to handle .css files

packages/slate-tools/package.json

@@ -56,6 +56,7 @@
     "inquirer": "^5.0.1",
     "ip": "^1.1.5",
     "jest": "22.4.2",
+    "mini-css-extract-plugin": "^0.4.3",
     "minimatch": "^3.0.4",
     "minimist": "1.2.0",
     "node-sass": "^4.7.2",

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

@@ -9,6 +9,7 @@ const core = require('./parts/core');
 const babel = require('./parts/babel');
 const entry = require('./parts/entry');
 const sass = require('./parts/sass');
+const css = require('./parts/css');
 
 const getLayoutEntrypoints = require('./utilities/get-layout-entrypoints');
 const getTemplateEntrypoints = require('./utilities/get-template-entrypoints');
@@ -27,6 +28,7 @@ module.exports = merge([
   entry,
   babel,
   sass,
+  css,
   {
     mode: 'development',
 

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

@@ -0,0 +1,53 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const SlateConfig = require('@shopify/slate-config');
+const config = new SlateConfig(require('../../../../slate-tools.schema'));
+
+const isDev = process.env.NODE_ENV === 'development';
+
+const part = {
+  module: {
+    rules: [],
+  },
+  plugins: [],
+};
+
+const cssRule = {
+  test: /\.css$/,
+};
+
+const styleLoader = {
+  loader: 'style-loader',
+  options: {
+    hmr: isDev,
+  },
+};
+
+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: {sourceMap: !isDev},
+};
+
+const postcssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    ident: 'postcss',
+    sourceMap: !isDev,
+    plugins: config.get('webpack.postcss.plugins'),
+  },
+};
+
+const cssVarLoader = {loader: '@shopify/slate-cssvar-loader'};
+
+cssRule.use = [
+  isDev ? styleLoader : MiniCssExtractPlugin.loader,
+  cssVarLoader,
+  cssLoader,
+  postcssLoader,
+];
+part.module.rules.push(cssRule);
+
+module.exports = part;

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

@@ -1,8 +1,8 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const SlateConfig = require('@shopify/slate-config');
 const config = new SlateConfig(require('../../../../slate-tools.schema'));
 
-const isDevelopment = process.env.NODE_ENV === 'development';
+const isDev = process.env.NODE_ENV === 'development';
 
 const part = {
   module: {
@@ -13,13 +13,12 @@ const part = {
 
 const sassRule = {
   test: /\.s[ac]ss$/,
-  exclude: config.get('webpack.commonExcludes'),
 };
 
 const styleLoader = {
   loader: 'style-loader',
   options: {
-    hmr: isDevelopment,
+    hmr: isDev,
   },
 };
 
@@ -47,21 +46,14 @@ const sassLoader = {
   options: {sourceMap: config.get('webpack.sourceMap.styles')},
 };
 
-const extractStyles = new ExtractTextPlugin({
-  filename: '[name].css.liquid',
-  allChunks: true,
-});
+sassRule.use = [
+  isDev ? styleLoader : MiniCssExtractPlugin.loader,
+  cssVarLoader,
+  cssLoader,
+  postcssLoader,
+  sassLoader,
+];
 
-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);
-}
+part.module.rules.push(sassRule);
 
 module.exports = part;

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

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const merge = require('webpack-merge');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const SlateConfig = require('@shopify/slate-config');
@@ -13,6 +14,7 @@ const babel = require('./parts/babel');
 const sass = require('./parts/sass');
 const entry = require('./parts/entry');
 const core = require('./parts/core');
+const css = require('./parts/css');
 
 const packageJson = require('../../../package.json');
 const getChunkName = require('../get-chunk-name');
@@ -26,6 +28,7 @@ module.exports = merge([
   entry,
   babel,
   sass,
+  css,
   {
     mode: 'production',
     devtool: 'hidden-source-map',
@@ -47,6 +50,10 @@ module.exports = merge([
     },
 
     plugins: [
+      new MiniCssExtractPlugin({
+        filename: '[name].css.liquid',
+      }),
+
       new CleanWebpackPlugin(['dist'], {
         root: config.get('paths.theme'),
       }),

yarn.lock

@@ -289,6 +289,10 @@ agentkeepalive@^3.3.0:
   dependencies:
     humanize-ms "^1.2.1"
 
+ajv-errors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
+
 ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
@@ -7757,6 +7761,14 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+mini-css-extract-plugin@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -10093,6 +10105,14 @@ schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"