refactor: update uikit build process to move the rest of the way over…

… to using Webpack -- tighter integration and easier coordination of the different steps involved in building Pattern Lab's UI

packages/uikit-workshop/package.json

@@ -4,8 +4,8 @@
   "description": "Front-end assets and templates for the default Pattern Lab workshop view",
   "main": "gulpfile.js",
   "scripts": {
-    "build": "gulp && webpack-cli --config webpack.config.js --progress",
-    "watch": "gulp && webpack-cli --config webpack.config.js --progress --watch"
+    "build": "webpack-cli --config webpack.config.js --progress",
+    "watch": "webpack-cli --config webpack.config.js --progress --watch"
   },
   "authors": [
     {
@@ -56,7 +56,21 @@
     "webpack-cli": "^3.1.0",
     "webpack": "4.16.3",
     "workbox-build": "^3.4.1",
-    "yargs": "^12.0.1"
+    "yargs": "^12.0.1",
+    "copy-webpack-plugin": "^4.5.2",
+    "sass-loader": "^7.1.0",
+    "clean-css-loader": "^1.0.1",
+    "no-emit-webpack-plugin": "^1.0.0",
+    "autoprefixer": "^9.1.0",
+    "critical": "^1.3.4",
+    "html-webpack-plugin": "github:jantimon/html-webpack-plugin#webpack-4",
+    "mini-css-extract-plugin": "^0.4.1",
+    "html-loader": "^0.5.5",
+    "css-loader": "^1.0.0",
+    "postcss-loader": "^3.0.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "critical-css-webpack-plugin": "^0.2.0",
+    "raw-loader": "^0.5.1"
   },
   "publishConfig": {
     "access": "public"

packages/uikit-workshop/webpack.config.js

@@ -1,18 +1,93 @@
 // webpack.config.js
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const NoEmitPlugin = require('no-emit-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+// const webpack = require('webpack');
+const CriticalCssPlugin = require('critical-css-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+// @todo: wire these two ocnfigs up to use cosmicconfig!
+const config = {
+  buildDir: './dist',
+  prod: true, // or false for local dev
+  sourceMaps: true,
+};
+
+// organize the series of plugins to run our Sass through as an external array -- this is necessary since we need to add additional loaders when compiling Sass to standalone CSS files vs compiling Sass and returning an inline-able <style> block of CSS (which we need to do both)
+const scssLoaders = [
+  {
+    loader: 'css-loader',
+    options: {
+      sourceMap: config.sourceMaps,
+    },
+  },
+  {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: config.sourceMaps,
+      plugins: () => [
+        autoprefixer({
+          browsers: [
+            'last 2 version',
+            'safari 5',
+            'ie 8',
+            'ie 9',
+            'opera 12.1',
+            'android 4',
+          ],
+        }),
+      ],
+    },
+  },
+  {
+    loader: 'clean-css-loader',
+    options: {
+      compatibility: 'ie9',
+      level: 1, // @todo: test bumping this up to 2
+      inline: ['remote'],
+    },
+  },
+  {
+    loader: 'sass-loader',
+    options: {
+      sourceMap: config.sourceMaps,
+      outputStyle: 'expanded',
+    },
+  },
+];
 
 module.exports = {
   entry: {
-    'patternlab-pattern': './src/scripts/patternlab-pattern',
-    'patternlab-viewer': './src/scripts/patternlab-viewer',
+    'js/patternlab-pattern': './src/scripts/patternlab-pattern.js',
+    'js/patternlab-viewer': './src/scripts/patternlab-viewer.js',
+    'css/pattern-lab': './src/sass/pattern-lab.scss',
   },
   output: {
-    path: `${process.cwd()}/dist/styleguide/js`,
+    path: path.resolve(process.cwd(), `${config.buildDir}/styleguide`),
     filename: '[name].js',
     chunkFilename: `[name]-chunk-[chunkhash].js`,
   },
   module: {
     rules: [
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              interpolate: true,
+              minimize: config.prod ? true : false,
+              minifyCSS: false,
+              minifyJS: config.prod ? true : false,
+              // super important -- this prevents the embedded iframe srcdoc HTML from breaking!
+              preventAttributesEscaping: true,
+            },
+          },
+        ],
+      },
       {
         test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
@@ -23,28 +98,86 @@ module.exports = {
           },
         },
       },
+      {
+        test: /\.scss$/,
+        oneOf: [
+          {
+            // if .scss files are included by JS or HTML files, inline and don't spit out a file
+            issuer: /(\.js$|\.html$)/,
+            use: [scssLoaders].reduce((acc, val) => acc.concat(val), []),
+          },
+          {
+            // otherwise extract the result and write out a .css file per usual
+            use: [MiniCssExtractPlugin.loader, scssLoaders].reduce(
+              (acc, val) => acc.concat(val),
+              []
+            ),
+          },
+        ],
+      },
     ],
   },
   cache: true,
-  mode: 'production',
+  mode: config.prod ? 'production' : 'development',
   optimization: {
     mergeDuplicateChunks: true,
     concatenateModules: true,
-    minimizer: [
-      new UglifyJsPlugin({
-        sourceMap: true,
-        parallel: true,
-        cache: true,
-        uglifyOptions: {
-          compress: true,
-          mangle: true,
-          output: {
-            comments: false,
-            beautify: false,
-          },
-        },
-      }),
-    ],
+    minimizer: config.prod
+      ? [
+          new UglifyJsPlugin({
+            sourceMap: true,
+            parallel: true,
+            cache: true,
+            uglifyOptions: {
+              compress: true,
+              mangle: true,
+              output: {
+                comments: false,
+                beautify: false,
+              },
+            },
+          }),
+        ]
+      : [],
   },
-  plugins: [],
+  plugins: [
+    // clear out the buildDir on every fresh Webpack build
+    new CleanWebpackPlugin([config.buildDir]),
+    new HtmlWebpackPlugin({
+      filename: '../index.html',
+      template: 'src/html/index.html',
+      inject: false,
+    }),
+    new MiniCssExtractPlugin({
+      filename: `[name].css`,
+      chunkFilename: `[id].css`,
+      allChunks: true,
+    }),
+    new NoEmitPlugin(['css/pattern-lab.js']),
+    new CriticalCssPlugin({
+      base: path.resolve(__dirname, config.buildDir),
+      src: 'index.html',
+      dest: 'index.html',
+      inline: true,
+      minify: true,
+      extract: true,
+      width: 1300,
+      height: 900,
+      penthouse: {
+        keepLargerMediaQueries: true,
+
+        // @todo: troubleshoot why forceInclude works w/ Penthouse directly but not w/ Critical
+        forceInclude: [
+          '.pl-c-body--theme-light',
+          '.pl-c-body--theme-sidebar',
+          '.pl-c-body--theme-sidebar .pl-c-viewport',
+          '.pl-c-body--theme-density-compact',
+        ],
+        timeout: 30000, // ms; abort critical CSS generation after this timeout
+        maxEmbeddedBase64Length: 1000,
+        renderWaitTime: 1000,
+        blockJSRequests: false,
+      },
+    }),
+  ],
 };