diff --git a/package-lock.json b/package-lock.json index 4bf74b320..bec5321bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2114,6 +2114,12 @@ "@babel/types": "^7.3.0" } }, + "@types/json-schema": { + "version": "7.0.8", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz", + "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==", + "dev": true + }, "@types/node": { "version": "12.6.2", "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.2.tgz", @@ -14852,6 +14858,92 @@ "tiny-warning": "^1.0.3" } }, + "mini-css-extract-plugin": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz", + "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0", + "webpack-sources": "^1.1.0" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true + }, + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true + }, + "fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "json5": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", + "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "dev": true + }, + "schema-utils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz", + "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.7", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "minilog": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/minilog/-/minilog-2.0.8.tgz", diff --git a/package.json b/package.json index 54f6ca27e..d06c43faa 100644 --- a/package.json +++ b/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", diff --git a/src/template.ejs b/src/template.ejs index afa720981..61880c318 100644 --- a/src/template.ejs +++ b/src/template.ejs @@ -31,6 +31,8 @@ + + diff --git a/webpack.config.js b/webpack.config.js index b1880bc1b..44645de5c 100644 --- a/webpack.config.js +++ b/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) {