From 093d1f724d648bb823926ded701eac4a464be787 Mon Sep 17 00:00:00 2001 From: Date: Sat, 1 Jul 2017 12:49:47 -0700 Subject: [PATCH] Refactor module (loader) rules - Removed unnecessary url-loader targeting .woff files - Replaced file-loader with url-loader (file is fallback for url) - PostCSS plugins are all loaded manually vs postcss.config.js --- package-lock.json | 70 ++++++------------- package.json | 8 ++- resources/assets/build/config.js | 4 ++ resources/assets/build/postcss.config.js | 15 ++++ resources/assets/build/webpack.config.js | 13 ++-- .../assets/build/webpack.config.optimize.js | 11 --- yarn.lock | 34 +++------ 7 files changed, 62 insertions(+), 93 deletions(-) create mode 100644 resources/assets/build/postcss.config.js diff --git a/package-lock.json b/package-lock.json index 9fbc400..ab0d58f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -154,8 +154,7 @@ "ansi-styles": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz", - "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=", - "dev": true + "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=" }, "anymatch": { "version": "1.3.0", @@ -792,8 +791,7 @@ "chalk": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz", - "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==", - "dev": true + "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==" }, "chokidar": { "version": "1.7.0", @@ -930,8 +928,7 @@ "color-convert": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz", - "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=", - "dev": true + "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=" }, "color-diff": { "version": "0.1.7", @@ -942,8 +939,7 @@ "color-name": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.2.tgz", - "integrity": "sha1-XIq3K2S9IhXWF66VWeuxSEdc+Y0=", - "dev": true + "integrity": "sha1-XIq3K2S9IhXWF66VWeuxSEdc+Y0=" }, "color-string": { "version": "0.3.0", @@ -2127,9 +2123,9 @@ } }, "enhanced-resolve": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.2.0.tgz", - "integrity": "sha512-Vlr4UydY821fadrNdW00y4FwebPe6TnD9dK0HhwhsqXEVpVCZnlZiGMcysrLT0+zENzA5Q/k9NCTXW0qbNRsxg==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz", + "integrity": "sha512-2qbxE7ek3YxPJ1ML6V+satHkzHpJQKWkRHmRx6mfAoW59yP8YH8BFplbegSP+u2hBd6B6KCOpvJQ3dZAP+hkpg==", "dev": true }, "entities": { @@ -2195,8 +2191,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.8.1", @@ -3863,8 +3858,7 @@ "has-flag": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", - "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", - "dev": true + "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=" }, "has-gulplog": { "version": "0.1.0", @@ -3885,9 +3879,9 @@ "dev": true }, "hash.js": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.2.tgz", - "integrity": "sha512-SsNl8Ro2uz5xUTRYq8ysWzX8B7jCj7pLvX3opktaI6ZrTT2YElqjFVJXHJZe+5Aby20c9UC7elCjJDe1dhTaAw==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz", + "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==", "dev": true }, "hawk": { @@ -5566,32 +5560,6 @@ "integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=", "dev": true }, - "optimize-css-assets-webpack-plugin": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-2.0.0.tgz", - "integrity": "sha1-UcrnEjDskaTBV2SXFeR0mODLRgs=", - "dev": true, - "dependencies": { - "source-list-map": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz", - "integrity": "sha1-xVCyq1Qn9rPyH1r+rYjE9Vh7IQY=", - "dev": true - }, - "underscore": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz", - "integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=", - "dev": true - }, - "webpack-sources": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.1.5.tgz", - "integrity": "sha1-qh86vw8NdNtxEcQOUAuE+WZkB1A=", - "dev": true - } - } - }, "optionator": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", @@ -5853,8 +5821,7 @@ "postcss": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.4.tgz", - "integrity": "sha1-VzrN33P0LsskqmGNQO49WnwEplQ=", - "dev": true + "integrity": "sha1-VzrN33P0LsskqmGNQO49WnwEplQ=" }, "postcss-calc": { "version": "5.3.1", @@ -7088,6 +7055,11 @@ "integrity": "sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=", "dev": true }, + "postcss-safe-parser": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-3.0.0.tgz", + "integrity": "sha1-AhTXOut22okyMH2To3oZMuhBJNM=" + }, "postcss-scss": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.4.1.tgz", @@ -8105,8 +8077,7 @@ "source-map": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", - "dev": true + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" }, "source-map-resolve": { "version": "0.3.1", @@ -8601,8 +8572,7 @@ "supports-color": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz", - "integrity": "sha1-kswUuz2tiSjKVlbDPhmhnyCvXHo=", - "dev": true + "integrity": "sha1-kswUuz2tiSjKVlbDPhmhnyCvXHo=" }, "svg-tags": { "version": "1.0.0", diff --git a/package.json b/package.json index 0c1aae8..b5a45ed 100644 --- a/package.json +++ b/package.json @@ -80,8 +80,10 @@ "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js", "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js", "rmdist": "rimraf dist", - "lint": "eslint resources/assets/scripts resources/assets/build", - "test": "npm run lint" + "lint": "npm run -s lint:scripts && npm run -s lint:styles", + "lint:scripts": "eslint resources/assets/scripts resources/assets/build", + "lint:styles": "stylelint resources/assets/styles/**/*.{css,sass,scss,sss,less}", + "test": "npm run -s lint" }, "engines": { "node": ">= 6.9.4" @@ -105,8 +107,8 @@ "imagemin-webpack-plugin": "~1.5.0-beta.0", "import-glob": "~1.5", "node-sass": "~4.5", - "optimize-css-assets-webpack-plugin": "~2.0", "postcss-loader": "~2.0", + "postcss-safe-parser": "^3.0.0", "resolve-url-loader": "~2.1", "rimraf": "~2.6", "sass-loader": "~6.0", diff --git a/resources/assets/build/config.js b/resources/assets/build/config.js index 10b5a0f..602c3e0 100644 --- a/resources/assets/build/config.js +++ b/resources/assets/build/config.js @@ -35,6 +35,10 @@ module.exports = merge(config, { manifest: {}, }); +if (process.env.NODE_ENV === undefined) { + process.env.NODE_ENV = isProduction ? 'production' : 'development'; +} + /** * If your publicPath differs between environments, but you know it at compile time, * then set SAGE_DIST_PATH as an environment variable before compiling. diff --git a/resources/assets/build/postcss.config.js b/resources/assets/build/postcss.config.js new file mode 100644 index 0000000..6e6dd87 --- /dev/null +++ b/resources/assets/build/postcss.config.js @@ -0,0 +1,15 @@ +/* eslint-disable */ + +const cssnanoConfig = { + preset: ['default', { discardComments: { removeAll: true } }] +}; + +module.exports = ({ file, options }) => { + return { + parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined, + plugins: { + cssnano: options.enabled.optimize ? cssnanoConfig : false, + autoprefixer: true, + }, + }; +}; diff --git a/resources/assets/build/webpack.config.js b/resources/assets/build/webpack.config.js index 477bc26..c58a4db 100644 --- a/resources/assets/build/webpack.config.js +++ b/resources/assets/build/webpack.config.js @@ -2,12 +2,11 @@ const webpack = require('webpack'); const merge = require('webpack-merge'); -const autoprefixer = require('autoprefixer'); const CleanPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const StyleLintPlugin = require('stylelint-webpack-plugin'); - const CopyGlobsPlugin = require('copy-globs-webpack-plugin'); + const config = require('./config'); const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]'; @@ -50,8 +49,8 @@ let webpackConfig = { { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } }, { loader: 'postcss', options: { + config: { path: __dirname, ctx: config }, sourceMap: config.enabled.sourceMaps, - plugins: [autoprefixer()], }, }, ], @@ -66,8 +65,8 @@ let webpackConfig = { { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } }, { loader: 'postcss', options: { + config: { path: __dirname, ctx: config }, sourceMap: config.enabled.sourceMaps, - plugins: [autoprefixer()], }, }, { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } }, @@ -78,16 +77,18 @@ let webpackConfig = { { test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/, include: config.paths.assets, - loader: 'file', + loader: 'url', options: { + limit: 4096, name: `[path]${assetsFilenames}.[ext]`, }, }, { test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/, include: /node_modules|bower_components/, - loader: 'file', + loader: 'url', options: { + limit: 4096, publicPath: '../', name: `vendor/${config.cacheBusting}.[ext]`, }, diff --git a/resources/assets/build/webpack.config.optimize.js b/resources/assets/build/webpack.config.optimize.js index 9480cfc..d757579 100644 --- a/resources/assets/build/webpack.config.optimize.js +++ b/resources/assets/build/webpack.config.optimize.js @@ -1,23 +1,12 @@ 'use strict'; // eslint-disable-line -const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const { default: ImageminPlugin } = require('imagemin-webpack-plugin'); const imageminMozjpeg = require('imagemin-mozjpeg'); -const cssnano = require('cssnano'); const config = require('./config'); module.exports = { plugins: [ - new OptimizeCssAssetsPlugin({ - cssProcessor: cssnano, - cssProcessorOptions: { - discardComments: { removeAll: true }, - autoprefixer: {}, - safe: true, - }, - canPrint: true, - }), new ImageminPlugin({ optipng: { optimizationLevel: 7 }, gifsicle: { optimizationLevel: 3 }, diff --git a/yarn.lock b/yarn.lock index 3d3a5fa..e94e781 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1732,8 +1732,8 @@ engine.io@1.8.0: ws "1.1.1" enhanced-resolve@^3.0.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.2.0.tgz#7b60300c98e155a9caa06bf4550ec010bf74f6f8" + version "3.3.0" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz#950964ecc7f0332a42321b673b38dc8ff15535b3" dependencies: graceful-fs "^4.1.2" memory-fs "^0.4.0" @@ -2632,8 +2632,8 @@ hash-base@^2.0.0: inherits "^2.0.1" hash.js@^1.0.0, hash.js@^1.0.3: - version "1.1.2" - resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.2.tgz#bf5c887825cfe40b9efde7bf11bd2db26e6bf01b" + version "1.1.3" + resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846" dependencies: inherits "^2.0.3" minimalistic-assert "^1.0.0" @@ -4132,13 +4132,6 @@ opn@4.0.2: object-assign "^4.0.1" pinkie-promise "^2.0.0" -optimize-css-assets-webpack-plugin@~2.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-2.0.0.tgz#51cae71230ec91a4c157649715e47498e0cb460b" - dependencies: - underscore "^1.8.3" - webpack-sources "^0.1.0" - optionator@^0.8.1, optionator@^0.8.2: version "0.8.2" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64" @@ -4857,6 +4850,12 @@ postcss-resolve-nested-selector@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e" +postcss-safe-parser@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-3.0.0.tgz#0214d73aeb76da8932307d93a37a1932e84124d3" + dependencies: + postcss "^6.0.1" + postcss-scss@^0.4.0: version "0.4.1" resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.4.1.tgz#ad771b81f0f72f5f4845d08aa60f93557653d54c" @@ -5611,7 +5610,7 @@ sort-keys@^1.0.0: dependencies: is-plain-obj "^1.0.0" -source-list-map@^0.1.7, source-list-map@~0.1.7: +source-list-map@^0.1.7: version "0.1.8" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106" @@ -6219,10 +6218,6 @@ underscore@1.7.x: version "1.7.0" resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209" -underscore@^1.8.3: - version "1.8.3" - resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022" - uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" @@ -6449,13 +6444,6 @@ webpack-sources@1.0.1, webpack-sources@^1.0.1: source-list-map "^2.0.0" source-map "~0.5.3" -webpack-sources@^0.1.0: - version "0.1.5" - resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750" - dependencies: - source-list-map "~0.1.7" - source-map "~0.5.3" - webpack@*, webpack@~3.0: version "3.0.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.0.0.tgz#ee9bcebf21247f7153cb410168cab45e3a59d4d7"