perf(styles): extract css from js into stylesheets

package.json

@@ -26,11 +26,12 @@
     "clean": "rm -rf ./build && rm -rf ./intl && mkdir -p build && mkdir -p intl",
     "deploy": "npm run deploy:s3 && npm run deploy:fastly",
     "deploy:fastly": "node ./bin/configure-fastly.js",
-    "deploy:s3": "npm run deploy:s3:all && npm run deploy:s3:svg && npm run deploy:s3:js",
+    "deploy:s3": "npm run deploy:s3:all && npm run deploy:s3:svg && npm run deploy:s3:js && npm run deploy:s3:css",
     "deploy:s3cmd": "s3cmd sync -P --delete-removed --add-header=Cache-Control:no-cache,public,max-age=3600 --add-header=x-amz-meta-surrogate-key:static-assets",
-    "deploy:s3:all": "npm run deploy:s3cmd -- --exclude '.DS_Store' --exclude '*.svg' --exclude '*.js' ./build/ s3://$S3_BUCKET_NAME/",
+    "deploy:s3:all": "npm run deploy:s3cmd -- --exclude '.DS_Store' --exclude '*.svg' --exclude '*.js' --exclude '*.css' ./build/ s3://$S3_BUCKET_NAME/",
     "deploy:s3:svg": "npm run deploy:s3cmd -- --exclude '*' --include '*.svg' --mime-type 'image/svg+xml' ./build/ s3://$S3_BUCKET_NAME/",
     "deploy:s3:js": "npm run deploy:s3cmd -- --exclude '*' --include '*.js' --mime-type 'application/javascript' ./build/ s3://$S3_BUCKET_NAME/",
+    "deploy:s3:css": "npm run deploy:s3cmd -- --exclude '*' --include '*.css' --mime-type 'text/css' ./build/ s3://$S3_BUCKET_NAME/",
     "i18n:push": "./bin/tx-push-www --execute",
     "translate:urls": "node ./bin/get-localized-urls localized-urls.json",
     "translate:files": "node ./bin/build-locales node_modules/scratch-l10n/www intl",
@@ -105,6 +106,7 @@
     "lodash.mergewith": "4.6.2",
     "lodash.omit": "3.1.0",
     "lodash.uniqby": "4.7.0",
+    "mini-css-extract-plugin": "^1.6.2",
     "minilog": "2.0.8",
     "node-sass": "4.14.1",
     "pako": "0.2.8",

src/template.ejs

@@ -31,6 +31,8 @@
         <!-- Favicon & CSS normalize -->
         <link rel="shortcut icon" href="/favicon.ico" />
         <link rel="stylesheet" href="/css/lib/normalize.min.css" />
+        <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.chunks.common.css[0] %>" />
+        <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.route.name].css[0] %>" />
 
         <!-- Polyfills -->
         <script src="/js/polyfill.min.js"></script>

webpack.config.js

@@ -7,6 +7,7 @@ const webpack = require('webpack');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 // PostCss
 const autoprefixer = require('autoprefixer');
@@ -92,7 +93,7 @@ module.exports = {
             {
                 test: /\.scss$/,
                 use: [
-                    'style-loader',
+                    MiniCssExtractPlugin.loader,
                     'css-loader',
                     {
                         loader: 'postcss-loader',
@@ -108,7 +109,7 @@ module.exports = {
             {
                 test: /\.css$/,
                 use: [
-                    'style-loader',
+                    MiniCssExtractPlugin.loader,
                     'css-loader',
                     {
                         loader: 'postcss-loader',
@@ -142,6 +143,7 @@ module.exports = {
         }
     },
     plugins: [
+        new MiniCssExtractPlugin(),
         new VersionPlugin({length: 5})
     ].concat(pageRoutes
         .map(function (route) {