From f75968e4209fc8be919d7fa9447677115cd09a2f Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Fri, 11 May 2018 17:32:02 -0400 Subject: [PATCH 01/18] first pass at integrating `offline-plugin` --- package.json | 1 + src/app.js | 3 +++ src/app/lib/offline-plugin.js | 3 +++ webpack/webpack.config.base.js | 4 ++++ yarn.lock | 16 +++++++++++++++- 5 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/app/lib/offline-plugin.js diff --git a/package.json b/package.json index 15b47d4..07e8db8 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.4.0", "node-sass": "^4.9.0", + "offline-plugin": "^5.0.3", "postcss": "^6.0.22", "postcss-cssnext": "^3.1.0", "postcss-import": "^11.1.0", diff --git a/src/app.js b/src/app.js index a7ddce0..25f3fc0 100644 --- a/src/app.js +++ b/src/app.js @@ -1,3 +1,6 @@ +// offline-plugin +import './app/lib/offline-plugin'; + // components js import Tabs from './components/tabs/Tabs'; diff --git a/src/app/lib/offline-plugin.js b/src/app/lib/offline-plugin.js new file mode 100644 index 0000000..1a0eded --- /dev/null +++ b/src/app/lib/offline-plugin.js @@ -0,0 +1,3 @@ +import * as OfflinePluginRuntime from 'offline-plugin/runtime'; // eslint-disable-line import/no-extraneous-dependencies + +OfflinePluginRuntime.install(); diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js index 76c176c..6b627a1 100644 --- a/webpack/webpack.config.base.js +++ b/webpack/webpack.config.base.js @@ -1,5 +1,6 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const OfflinePlugin = require('offline-plugin'); module.exports = { context: path.resolve(__dirname, '../src'), @@ -97,6 +98,9 @@ module.exports = { template: path.resolve(__dirname, '../src/templates/index.html'), filename: 'index.html', favicon: path.resolve(__dirname, '../src/templates/images/favicon.png') + }), + new OfflinePlugin({ + AppCache: false }) ] }; diff --git a/yarn.lock b/yarn.lock index 6f704f8..3377a4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2691,6 +2691,10 @@ ejs@^2.3.1: version "2.5.7" resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a" +ejs@^2.3.4: + version "2.6.1" + resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0" + electron-to-chromium@^1.2.5: version "1.2.6" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.6.tgz#f38ad51d1919b06bc07275c62629db803ddca05a" @@ -4884,7 +4888,7 @@ loader-runner@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2" -loader-utils@^0.2.16: +loader-utils@0.2.x, loader-utils@^0.2.16: version "0.2.17" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" dependencies: @@ -5734,6 +5738,16 @@ obuf@^1.0.0, obuf@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e" +offline-plugin@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/offline-plugin/-/offline-plugin-5.0.3.tgz#61488c5c5842d8576aa677384b5bbd3e60949289" + dependencies: + deep-extend "^0.4.0" + ejs "^2.3.4" + loader-utils "0.2.x" + minimatch "^3.0.3" + slash "^1.0.0" + on-finished@~2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947" From 4f8961624d40c51576bb6b497ea9eeb6de437b59 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Fri, 11 May 2018 17:57:36 -0400 Subject: [PATCH 02/18] first pass at asset hashing (just js & css for now) --- webpack/webpack.config.base.js | 1 - webpack/webpack.config.dev.js | 3 +++ webpack/webpack.config.prod.js | 7 +++++-- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js index 76c176c..b6db4d3 100644 --- a/webpack/webpack.config.base.js +++ b/webpack/webpack.config.base.js @@ -7,7 +7,6 @@ module.exports = { app: ['./app.js'] }, output: { - filename: '[name].js', path: path.resolve(__dirname, '../dist') }, resolveLoader: { diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js index 5e54e50..007c87d 100644 --- a/webpack/webpack.config.dev.js +++ b/webpack/webpack.config.dev.js @@ -14,6 +14,9 @@ const postcssResponsiveType = require('postcss-responsive-type'); const cssMqpacker = require('css-mqpacker'); module.exports = webpackMerge(webpackConfigBase, { + output: { + filename: '[name].js' + }, module: { rules: [ { diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js index d41b697..fec1466 100644 --- a/webpack/webpack.config.prod.js +++ b/webpack/webpack.config.prod.js @@ -16,6 +16,9 @@ const cssMqpacker = require('css-mqpacker'); const cssnano = require('cssnano'); module.exports = webpackMerge(webpackConfigBase, { + output: { + filename: '[name].[hash].js' + }, module: { rules: [ { @@ -56,8 +59,8 @@ module.exports = webpackMerge(webpackConfigBase, { }, plugins: [ new MiniCssExtractPlugin({ - filename: '[name].css', - chunkFilename: '[id].css' + filename: '[name].[hash].css', + chunkFilename: '[id].[hash].css' }), new CleanWebpackPlugin([ 'dist' From b3358b88bfe7145413e728e26bdf122f6e7e7b12 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Fri, 11 May 2018 18:00:34 -0400 Subject: [PATCH 03/18] dependency updates --- package.json | 14 +-- yarn.lock | 266 ++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 209 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index 15b47d4..e41585e 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "babel-core": "^6.26.3", "babel-eslint": "^8.2.3", "babel-loader": "^7.1.4", - "babel-preset-env": "^1.6.1", - "caniuse-lite": "^1.0.30000832", + "babel-preset-env": "^1.7.0", + "caniuse-lite": "^1.0.30000839", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.11", "css-mqpacker": "^6.0.2", @@ -44,7 +44,7 @@ "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.11.0", "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-react": "^7.7.0", + "eslint-plugin-react": "^7.8.0", "file-loader": "^1.1.11", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", @@ -53,7 +53,7 @@ "postcss": "^6.0.22", "postcss-cssnext": "^3.1.0", "postcss-import": "^11.1.0", - "postcss-loader": "^2.1.4", + "postcss-loader": "^2.1.5", "postcss-nested": "^3.0.0", "postcss-remove-root": "0.0.2", "postcss-reporter": "^5.0.0", @@ -63,9 +63,9 @@ "stylelint": "^9.2.0", "stylelint-config-standard": "^18.2.0", "url-loader": "^1.0.1", - "webpack": "^4.6.0", - "webpack-cli": "^2.0.15", - "webpack-dev-server": "^3.1.3", + "webpack": "^4.8.2", + "webpack-cli": "^2.1.3", + "webpack-dev-server": "^3.1.4", "webpack-merge": "^4.1.2" }, "dependencies": { diff --git a/yarn.lock b/yarn.lock index 6f704f8..6a71fbc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -117,6 +117,118 @@ version "0.7.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd" +"@webassemblyjs/ast@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.4.2.tgz#ab715aa1fec9dd23c025204dba39690c119418ea" + dependencies: + "@webassemblyjs/helper-wasm-bytecode" "1.4.2" + "@webassemblyjs/wast-parser" "1.4.2" + debug "^3.1.0" + webassemblyjs "1.4.2" + +"@webassemblyjs/floating-point-hex-parser@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.4.2.tgz#9296fb64caa37bf98c8064aa329680e3e2bfacc7" + +"@webassemblyjs/helper-buffer@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.4.2.tgz#3cacecd5a6bfcb67932ed8219f81f92d8b2dafbb" + +"@webassemblyjs/helper-code-frame@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.4.2.tgz#20526637c3849f12b08f8661248477eef9642329" + dependencies: + "@webassemblyjs/wast-printer" "1.4.2" + +"@webassemblyjs/helper-fsm@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.4.2.tgz#e41050282994b5be077b95b65b66ecd5a92c5e88" + +"@webassemblyjs/helper-wasm-bytecode@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.4.2.tgz#b48c289c7921056aa12d71e78a17070ffe90c49c" + +"@webassemblyjs/helper-wasm-section@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.4.2.tgz#520e02c0cc3e5e9b5f44f58abc04ba5eda6e5476" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/helper-buffer" "1.4.2" + "@webassemblyjs/helper-wasm-bytecode" "1.4.2" + "@webassemblyjs/wasm-gen" "1.4.2" + +"@webassemblyjs/leb128@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.4.2.tgz#d13f368abdcefc54428f55a265a993de610f8893" + dependencies: + leb "^0.3.0" + +"@webassemblyjs/validation@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/validation/-/validation-1.4.2.tgz#55cf5b219e25900c85773fc35beb9d12ae0ede53" + dependencies: + "@webassemblyjs/ast" "1.4.2" + +"@webassemblyjs/wasm-edit@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.4.2.tgz#bde9a581065f63f257ed511d7d9cf04f8cd04524" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/helper-buffer" "1.4.2" + "@webassemblyjs/helper-wasm-bytecode" "1.4.2" + "@webassemblyjs/helper-wasm-section" "1.4.2" + "@webassemblyjs/wasm-gen" "1.4.2" + "@webassemblyjs/wasm-opt" "1.4.2" + "@webassemblyjs/wasm-parser" "1.4.2" + "@webassemblyjs/wast-printer" "1.4.2" + debug "^3.1.0" + +"@webassemblyjs/wasm-gen@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.4.2.tgz#0899297f9426073736df799287845a73c597cf90" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/helper-wasm-bytecode" "1.4.2" + "@webassemblyjs/leb128" "1.4.2" + +"@webassemblyjs/wasm-opt@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.4.2.tgz#c44ad48e109aec197e3bf69875c54537d76ba2e9" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/helper-buffer" "1.4.2" + "@webassemblyjs/wasm-gen" "1.4.2" + "@webassemblyjs/wasm-parser" "1.4.2" + +"@webassemblyjs/wasm-parser@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.4.2.tgz#3bf7e10cfe336db0ecdea0a5d7ed8a63b7a7754a" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/helper-wasm-bytecode" "1.4.2" + "@webassemblyjs/leb128" "1.4.2" + "@webassemblyjs/wasm-parser" "1.4.2" + webassemblyjs "1.4.2" + +"@webassemblyjs/wast-parser@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.4.2.tgz#6499c38cf8895a81394f7e40d4681a85aaa84498" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/floating-point-hex-parser" "1.4.2" + "@webassemblyjs/helper-code-frame" "1.4.2" + "@webassemblyjs/helper-fsm" "1.4.2" + long "^3.2.0" + webassemblyjs "1.4.2" + +"@webassemblyjs/wast-printer@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.4.2.tgz#ee70a828f0d9730b55b9a5c3ed694094ba68ba57" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/wast-parser" "1.4.2" + long "^3.2.0" + abbrev@1: version "1.1.0" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f" @@ -1026,9 +1138,9 @@ babel-plugin-transform-strict-mode@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" -babel-preset-env@^1.6.1: - version "1.6.1" - resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48" +babel-preset-env@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a" dependencies: babel-plugin-check-es2015-constants "^6.22.0" babel-plugin-syntax-trailing-function-commas "^6.22.0" @@ -1057,7 +1169,7 @@ babel-preset-env@^1.6.1: babel-plugin-transform-es2015-unicode-regex "^6.22.0" babel-plugin-transform-exponentiation-operator "^6.22.0" babel-plugin-transform-regenerator "^6.22.0" - browserslist "^2.1.2" + browserslist "^3.2.6" invariant "^2.2.2" semver "^5.3.0" @@ -1453,13 +1565,6 @@ browserslist@^2.0.0, browserslist@^2.1.5: caniuse-lite "^1.0.30000684" electron-to-chromium "^1.3.14" -browserslist@^2.1.2: - version "2.5.1" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6" - dependencies: - caniuse-lite "^1.0.30000744" - electron-to-chromium "^1.3.24" - browserslist@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.1.0.tgz#6a1ccc302ddf48e70480e2ee1a9acc293eceb306" @@ -1467,6 +1572,13 @@ browserslist@^3.0.0: caniuse-lite "^1.0.30000808" electron-to-chromium "^1.3.33" +browserslist@^3.2.6: + version "3.2.7" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.7.tgz#aa488634d320b55e88bab0256184dbbcca1e6de9" + dependencies: + caniuse-lite "^1.0.30000835" + electron-to-chromium "^1.3.45" + buffer-indexof@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.0.tgz#f54f647c4f4e25228baa656a2e57e43d5f270982" @@ -1621,17 +1733,13 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000684, caniuse-lite@^1.0.30000697: version "1.0.30000697" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000697.tgz#125fb00604b63fbb188db96a667ce2922dcd6cdd" -caniuse-lite@^1.0.30000744: - version "1.0.30000748" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000748.tgz#44c8d6da52ad65a5d7b9dca4efebd0bdd982ba09" - caniuse-lite@^1.0.30000808: version "1.0.30000808" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc" -caniuse-lite@^1.0.30000832: - version "1.0.30000832" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000832.tgz#22a277f1d623774cc9aea2f7c1a65cb1603c63b8" +caniuse-lite@^1.0.30000835, caniuse-lite@^1.0.30000839: + version "1.0.30000839" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000839.tgz#41fcc036cf1cb77a0e0be041210f77f1ced44a7b" caseless@~0.11.0: version "0.11.0" @@ -2381,7 +2489,7 @@ date-now@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b" -dateformat@^3.0.2: +dateformat@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" @@ -2444,9 +2552,9 @@ deep-equal@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" -deep-extend@^0.4.0: - version "0.4.2" - resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f" +deep-extend@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f" deep-extend@~0.4.0: version "0.4.1" @@ -2687,9 +2795,9 @@ ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" -ejs@^2.3.1: - version "2.5.7" - resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a" +ejs@^2.5.9: + version "2.6.1" + resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0" electron-to-chromium@^1.2.5: version "1.2.6" @@ -2699,14 +2807,14 @@ electron-to-chromium@^1.3.14: version "1.3.15" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369" -electron-to-chromium@^1.3.24: - version "1.3.27" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz#78ecb8a399066187bb374eede35d9c70565a803d" - electron-to-chromium@^1.3.33: version "1.3.33" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz#bf00703d62a7c65238136578c352d6c5c042a545" +electron-to-chromium@^1.3.45: + version "1.3.45" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.45.tgz#458ac1b1c5c760ce8811a16d2bfbd97ec30bafb8" + elegant-spinner@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e" @@ -2898,9 +3006,9 @@ eslint-plugin-jsx-a11y@^6.0.3: emoji-regex "^6.1.0" jsx-ast-utils "^2.0.0" -eslint-plugin-react@^7.7.0: - version "7.7.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160" +eslint-plugin-react@^7.8.0: + version "7.8.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.8.0.tgz#53a731e9a3a95c90e14c0f1a1f6aa95a5ba62a11" dependencies: doctrine "^2.0.2" has "^1.0.1" @@ -4521,6 +4629,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" +isbinaryfile@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.2.tgz#4a3e974ec0cba9004d3fc6cde7209ea69368a621" + isexe@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0" @@ -4558,7 +4670,7 @@ isstream@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" -istextorbinary@^2.1.0: +istextorbinary@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53" dependencies: @@ -4790,6 +4902,10 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" +leb@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/leb/-/leb-0.3.0.tgz#32bee9fad168328d6aea8522d833f4180eed1da3" + levn@^0.3.0, levn@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee" @@ -4969,6 +5085,10 @@ lodash@^4.13.1, lodash@^4.17.3, lodash@^4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" +lodash@^4.17.10: + version "4.17.10" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" + lodash@~4.16.4: version "4.16.6" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777" @@ -5006,6 +5126,10 @@ loglevelnext@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.3.tgz#0f69277e73bbbf2cd61b94d82313216bf87ac66e" +long@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b" + longest-streak@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e" @@ -5106,15 +5230,16 @@ media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" -mem-fs-editor@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-3.0.2.tgz#dd0a6eaf2bb8a6b37740067aa549eb530105af9f" +mem-fs-editor@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-4.0.2.tgz#55a79b1e824da631254c4c95ba6366602c77af90" dependencies: commondir "^1.0.1" - deep-extend "^0.4.0" - ejs "^2.3.1" + deep-extend "^0.5.1" + ejs "^2.5.9" glob "^7.0.3" - globby "^6.1.0" + globby "^8.0.0" + isbinaryfile "^3.0.2" mkdirp "^0.5.0" multimatch "^2.0.0" rimraf "^2.2.8" @@ -6378,9 +6503,9 @@ postcss-load-plugins@^2.3.0: cosmiconfig "^2.1.1" object-assign "^4.1.0" -postcss-loader@^2.1.4: - version "2.1.4" - resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.4.tgz#f44a6390e03c84108b2b2063182d1a1011b2ce76" +postcss-loader@^2.1.5: + version "2.1.5" + resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.5.tgz#3c6336ee641c8f95138172533ae461a83595e788" dependencies: loader-utils "^1.1.0" postcss "^6.0.0" @@ -8825,15 +8950,25 @@ wbuf@^1.1.0, wbuf@^1.4.0: dependencies: minimalistic-assert "^1.0.0" +webassemblyjs@1.4.2: + version "1.4.2" + resolved "https://registry.yarnpkg.com/webassemblyjs/-/webassemblyjs-1.4.2.tgz#3b07b506917c97153d83441d8a88ffa2d25cc07d" + dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/validation" "1.4.2" + "@webassemblyjs/wasm-parser" "1.4.2" + "@webassemblyjs/wast-parser" "1.4.2" + long "^3.2.0" + webpack-addons@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/webpack-addons/-/webpack-addons-1.1.5.tgz#2b178dfe873fb6e75e40a819fa5c26e4a9bc837a" dependencies: jscodeshift "^0.4.0" -webpack-cli@^2.0.15: - version "2.0.15" - resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-2.0.15.tgz#7532066556b03bd3292285ac08537e28844616c2" +webpack-cli@^2.1.3: + version "2.1.3" + resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-2.1.3.tgz#65d166851abaa56067ef3f716b02a97ba6bbe84d" dependencies: chalk "^2.3.2" cross-spawn "^6.0.5" @@ -8860,11 +8995,11 @@ webpack-cli@^2.0.15: webpack-addons "^1.1.5" yargs "^11.1.0" yeoman-environment "^2.0.0" - yeoman-generator "^2.0.3" + yeoman-generator "^2.0.4" -webpack-dev-middleware@3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.1.2.tgz#be4d0c36a4fa7d69d6904093418514caa9df3a40" +webpack-dev-middleware@3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.1.3.tgz#8b32aa43da9ae79368c1bf1183f2b6cf5e1f39ed" dependencies: loud-rejection "^1.6.0" memory-fs "~0.4.1" @@ -8874,9 +9009,9 @@ webpack-dev-middleware@3.1.2: url-join "^4.0.0" webpack-log "^1.0.1" -webpack-dev-server@^3.1.3: - version "3.1.3" - resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.3.tgz#5cecfd8a9d60c4638284813f1cf9562f04e5c1c5" +webpack-dev-server@^3.1.4: + version "3.1.4" + resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.4.tgz#9a08d13c4addd1e3b6d8ace116e86715094ad5b4" dependencies: ansi-html "0.0.7" array-includes "^3.0.3" @@ -8903,7 +9038,7 @@ webpack-dev-server@^3.1.3: spdy "^3.4.1" strip-ansi "^3.0.0" supports-color "^5.1.0" - webpack-dev-middleware "3.1.2" + webpack-dev-middleware "3.1.3" webpack-log "^1.1.2" yargs "11.0.0" @@ -8936,10 +9071,13 @@ webpack-sources@^1.1.0: source-list-map "^2.0.0" source-map "~0.6.1" -webpack@^4.6.0: - version "4.6.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.6.0.tgz#363eafa733710eb0ed28c512b2b9b9f5fb01e69b" +webpack@^4.8.2: + version "4.8.2" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.8.2.tgz#41aa00fd32a8f253a2f12a2da11c8ad4d52fde1c" dependencies: + "@webassemblyjs/ast" "1.4.2" + "@webassemblyjs/wasm-edit" "1.4.2" + "@webassemblyjs/wasm-parser" "1.4.2" acorn "^5.0.0" acorn-dynamic-import "^3.0.0" ajv "^6.1.0" @@ -9159,25 +9297,25 @@ yeoman-environment@^2.0.0, yeoman-environment@^2.0.5: text-table "^0.2.0" untildify "^3.0.2" -yeoman-generator@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-2.0.3.tgz#19426ed22687ffe05d31526c3f1c2cf67ba768f3" +yeoman-generator@^2.0.4: + version "2.0.5" + resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-2.0.5.tgz#57b0b3474701293cc9ec965288f3400b00887c81" dependencies: async "^2.6.0" chalk "^2.3.0" cli-table "^0.3.1" - cross-spawn "^5.1.0" + cross-spawn "^6.0.5" dargs "^5.1.0" - dateformat "^3.0.2" + dateformat "^3.0.3" debug "^3.1.0" detect-conflict "^1.0.0" error "^7.0.2" find-up "^2.1.0" github-username "^4.0.0" - istextorbinary "^2.1.0" - lodash "^4.17.4" + istextorbinary "^2.2.1" + lodash "^4.17.10" make-dir "^1.1.0" - mem-fs-editor "^3.0.2" + mem-fs-editor "^4.0.0" minimist "^1.2.0" pretty-bytes "^4.0.2" read-chunk "^2.1.0" From c0d05e82df7d40006b41bcd99add18943c7f3f0f Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Fri, 11 May 2018 18:01:58 -0400 Subject: [PATCH 04/18] yarn.lock post-merge --- yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index 1f81100..58237a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2552,6 +2552,10 @@ deep-equal@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" +deep-extend@^0.4.0: + version "0.4.2" + resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f" + deep-extend@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.1.tgz#b894a9dd90d3023fbf1c55a394fb858eb2066f1f" @@ -2795,11 +2799,7 @@ ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" -ejs@^2.5.9: - version "2.6.1" - resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0" - -ejs@^2.3.4: +ejs@^2.3.4, ejs@^2.5.9: version "2.6.1" resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0" From 28994ac02369b3d5f7ffd6a657c11e12c91dd0d2 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sat, 12 May 2018 07:18:22 -0400 Subject: [PATCH 05/18] hashing tweaks/buildout --- webpack/webpack.config.base.js | 6 +++--- webpack/webpack.config.prod.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js index b6db4d3..ee5ce6a 100644 --- a/webpack/webpack.config.base.js +++ b/webpack/webpack.config.base.js @@ -61,7 +61,7 @@ module.exports = { loader: 'url-loader', options: { limit: 10000, - name: 'images/[name].[ext]' + name: 'images/[name].[md5:hash:hex:8].[ext]' } } ] @@ -73,7 +73,7 @@ module.exports = { loader: 'url-loader', options: { limit: 10000, - name: 'fonts/[name].[ext]' + name: 'fonts/[name].[md5:hash:hex:8].[ext]' } } ] @@ -84,7 +84,7 @@ module.exports = { { loader: 'file-loader', options: { - name: 'assets/[name].[ext]' + name: 'assets/[name].[md5:hash:hex:8].[ext]' } } ] diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js index fec1466..51f239e 100644 --- a/webpack/webpack.config.prod.js +++ b/webpack/webpack.config.prod.js @@ -17,7 +17,7 @@ const cssnano = require('cssnano'); module.exports = webpackMerge(webpackConfigBase, { output: { - filename: '[name].[hash].js' + filename: '[name].[hash:8].js' }, module: { rules: [ @@ -59,8 +59,8 @@ module.exports = webpackMerge(webpackConfigBase, { }, plugins: [ new MiniCssExtractPlugin({ - filename: '[name].[hash].css', - chunkFilename: '[id].[hash].css' + filename: '[name].[hash:8].css', + chunkFilename: '[id].[hash:8].css' }), new CleanWebpackPlugin([ 'dist' From 9e4c758777fce704fd2501663e62eb96af550068 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sat, 12 May 2018 07:34:20 -0400 Subject: [PATCH 06/18] asset caching readme coverage --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 6cb2a15..084d02e 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,13 @@ npm run build ## features you may want to remove +### asset hashing +The assets generated by starbase are [hashed](https://webpack.js.org/guides/caching/) (strings injected into the filenames) as a cache-busting mechanism. JS and CSS assets will receive a new filename for each production build, but other assets (fonts, images, etc) will only be updated when they are modified. + +This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Simply open up the webpack config files and remove the hashes from the filenames, which should look something like this: `.[hash:8]`. + +Removing hashing for production builds is not recommended. + ### build-time cleanup starbase is setup to clear all contents of `/dist` (where compiled assets are piped into) during each `npm run build`. If you'd like to remove this part of the build process, perform the following steps: From cea8ab50d74170756d68027d8537ee2429f1d975 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sat, 12 May 2018 08:06:46 -0400 Subject: [PATCH 07/18] asset caching readme coverage --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 084d02e..6001f5c 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,23 @@ starbase enforces the [Airbnb JavaScript Style Guide](https://github.com/airbnb/ After completing the steps above, the only rules that eslint will enforce are the ones you define in the `rules` object in `/.eslintrc`. +### service worker caching + +starbase uses [offline-plugin](https://github.com/NekR/offline-plugin/) to cache your project assets for offline use. This means that if someone visits your website on [a device that supports service workers](https://caniuse.com/#feat=serviceworkers), they will be able to view your project again, even if their device is offline. + +Out of the box, starbase caches everything, because the project is less than 50kb total. If you will be making a larger app, you should be considerate of your users and limit what you cache. Check out the [options docs for offline-plugin](https://github.com/NekR/offline-plugin/blob/master/docs/options.md) to learn more. + +It should be noted that [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers), by design, only function on localhost and https environments. There is no issue with running starbase on an http environment-- the service worker will simply not be utilized. + +#### to remove offline-plugin: + +1. in `/package.json`, remove the `offline-plugin` dependency +2. in `/webpack/webpack.config.base.js`, remove all references to `OfflinePlugin` and/or `offline-plugin` +3. in `/src/app.js`, remove the `import` statement that references `offline-plugin` +4. delete `/src/app/lib/offline-plugin.js` + +_There is no consequence or side-effect to removing this feature, besides limiting offline access to your project._ + ## features you may want to know about ### global css variables From 26101260a1b2fdd5af73c4d13ebffb995bb938cf Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sat, 12 May 2018 08:10:09 -0400 Subject: [PATCH 08/18] asset caching readme coverage --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6001f5c..45065a8 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ After completing the steps above, the only rules that eslint will enforce are th starbase uses [offline-plugin](https://github.com/NekR/offline-plugin/) to cache your project assets for offline use. This means that if someone visits your website on [a device that supports service workers](https://caniuse.com/#feat=serviceworkers), they will be able to view your project again, even if their device is offline. -Out of the box, starbase caches everything, because the project is less than 50kb total. If you will be making a larger app, you should be considerate of your users and limit what you cache. Check out the [options docs for offline-plugin](https://github.com/NekR/offline-plugin/blob/master/docs/options.md) to learn more. +Out of the box, starbase caches everything, because the project is less than 50kb total. If you will be making a larger app, be considerate of your users and limit what you cache-- perhaps avoid caching large images, custom fonts, etc. Check out the [options docs for offline-plugin](https://github.com/NekR/offline-plugin/blob/master/docs/options.md) to learn more. It should be noted that [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers), by design, only function on localhost and https environments. There is no issue with running starbase on an http environment-- the service worker will simply not be utilized. @@ -124,7 +124,7 @@ It should be noted that [service workers](https://developer.mozilla.org/en-US/do 3. in `/src/app.js`, remove the `import` statement that references `offline-plugin` 4. delete `/src/app/lib/offline-plugin.js` -_There is no consequence or side-effect to removing this feature, besides limiting offline access to your project._ +_There is no consequence to removing this feature, besides limiting offline access to your project._ ## features you may want to know about From d470355730605a5c5639e5fb8958e07bdbc44c2c Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sat, 12 May 2018 10:34:54 -0400 Subject: [PATCH 09/18] postcss-extend integration (#42) * first pass at postcss-extend support * resolve build warning --- .stylelintrc | 8 ++++++++ README.md | 1 + package.json | 1 + src/app/utilities.css | 7 +++++++ src/components/tabs/tabs.css | 10 ++++------ webpack/lib/css-prefix-variables.js | 10 +++++++--- webpack/webpack.config.dev.js | 10 ++++++---- webpack/webpack.config.prod.js | 10 ++++++---- yarn.lock | 6 ++++++ 9 files changed, 46 insertions(+), 17 deletions(-) create mode 100644 src/app/utilities.css diff --git a/.stylelintrc b/.stylelintrc index 93fca34..6a0bc70 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,14 @@ { "extends": "stylelint-config-standard", "rules": { + "at-rule-no-unknown": [ + true, + { + "ignoreAtRules": [ + "extend" + ] + } + ], "property-no-unknown": [ true, { diff --git a/README.md b/README.md index 45065a8..23d7551 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ starbase is a webpack 4, ES6 & PostCSS boilerplate that utilizes some of the jui * [cssnext](https://github.com/MoOx/postcss-cssnext) * [PostCSS Nested](https://github.com/postcss/postcss-nested) * [PostCSS Responsive Type](https://github.com/seaneking/postcss-responsive-type) + * [postcss-extend](https://github.com/travco/postcss-extend) * [stylelint](https://github.com/stylelint/stylelint) * [MQPacker](https://github.com/hail2u/node-css-mqpacker) * ...and more! diff --git a/package.json b/package.json index f6b784a..9e0602f 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "offline-plugin": "^5.0.3", "postcss": "^6.0.22", "postcss-cssnext": "^3.1.0", + "postcss-extend": "^1.0.5", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.5", "postcss-nested": "^3.0.0", diff --git a/src/app/utilities.css b/src/app/utilities.css new file mode 100644 index 0000000..0213ce1 --- /dev/null +++ b/src/app/utilities.css @@ -0,0 +1,7 @@ +.clearfix { + &::after { + content: ""; + display: table; + clear: both; + } +} diff --git a/src/components/tabs/tabs.css b/src/components/tabs/tabs.css index 588cd82..0d9b3a0 100644 --- a/src/components/tabs/tabs.css +++ b/src/components/tabs/tabs.css @@ -1,3 +1,5 @@ +@import "../../app/utilities.css"; + :root { --tabs-list-height-small: 2rem; --tabs-list-height-full: 2.5rem; @@ -15,6 +17,8 @@ /* tabs list */ &__list { + @extend .clearfix; + list-style-type: none; margin: 0; padding: 0; @@ -28,12 +32,6 @@ border-bottom: 2px solid var(--tabs-border-color); } - &::after { - content: ""; - display: table; - clear: both; - } - & > li { float: left; margin: 0.5rem 0.5rem 0 0; diff --git a/webpack/lib/css-prefix-variables.js b/webpack/lib/css-prefix-variables.js index 1a95522..327147c 100644 --- a/webpack/lib/css-prefix-variables.js +++ b/webpack/lib/css-prefix-variables.js @@ -2,10 +2,14 @@ const loaderUtils = require('loader-utils'); module.exports = function cssPrefixVariables(content) { const options = loaderUtils.getOptions(this); + if (options.path) { this.cacheable(); - return `@import url("${options.path}");\n\n${content}`; - } else { - return content; + + // check if first line of content is another import + const lineBreak = content.substr(0, 7) === '@import' ? '\n' : '\n\n'; + return `@import url("${options.path}");${lineBreak}${content}`; } + + return content; }; diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js index 007c87d..259424d 100644 --- a/webpack/webpack.config.dev.js +++ b/webpack/webpack.config.dev.js @@ -11,6 +11,7 @@ const postcssCssnext = require('postcss-cssnext'); const postcssNested = require('postcss-nested'); const postcssRemoveRoot = require('postcss-remove-root'); const postcssResponsiveType = require('postcss-responsive-type'); +const postcssExtend = require('postcss-extend'); const cssMqpacker = require('css-mqpacker'); module.exports = webpackMerge(webpackConfigBase, { @@ -29,9 +30,10 @@ module.exports = webpackMerge(webpackConfigBase, { options: { sourceMap: 'inline', plugins: () => [ - postcssImport, stylelint(), postcssReporter(), + postcssImport(), + postcssNested(), postcssCssnext({ features: { autoprefixer: { @@ -39,9 +41,9 @@ module.exports = webpackMerge(webpackConfigBase, { } } }), - postcssResponsiveType, - postcssNested, - postcssRemoveRoot, + postcssResponsiveType(), + postcssExtend(), + postcssRemoveRoot(), cssMqpacker({ sort: true }) diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js index 51f239e..2342655 100644 --- a/webpack/webpack.config.prod.js +++ b/webpack/webpack.config.prod.js @@ -12,6 +12,7 @@ const postcssCssnext = require('postcss-cssnext'); const postcssNested = require('postcss-nested'); const postcssRemoveRoot = require('postcss-remove-root'); const postcssResponsiveType = require('postcss-responsive-type'); +const postcssExtend = require('postcss-extend'); const cssMqpacker = require('css-mqpacker'); const cssnano = require('cssnano'); @@ -30,9 +31,10 @@ module.exports = webpackMerge(webpackConfigBase, { loader: 'postcss-loader', options: { plugins: () => [ - postcssImport, stylelint(), postcssReporter(), + postcssImport(), + postcssNested(), postcssCssnext({ features: { autoprefixer: { @@ -40,9 +42,9 @@ module.exports = webpackMerge(webpackConfigBase, { } } }), - postcssResponsiveType, - postcssNested, - postcssRemoveRoot, + postcssResponsiveType(), + postcssExtend(), + postcssRemoveRoot(), cssMqpacker({ sort: true }), diff --git a/yarn.lock b/yarn.lock index 58237a1..83cab59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6435,6 +6435,12 @@ postcss-discard-unused@^2.2.1: postcss "^5.0.14" uniqs "^2.0.0" +postcss-extend@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/postcss-extend/-/postcss-extend-1.0.5.tgz#5ea98bf787ba3cacf4df4609743f80a833b1d0e7" + dependencies: + postcss "^5.0.4" + postcss-filter-plugins@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c" From 500d83220c5521c4e233d934a19b416e356c9cf8 Mon Sep 17 00:00:00 2001 From: Brian Staruk Date: Sat, 12 May 2018 11:32:49 -0400 Subject: [PATCH 10/18] tidying up (#43) * tidying up font sizes * no reason for footer to have an id * tidy up font sizes * tidy up header component (viva la BEM) * words of encouragement * dependency updates * only use service worker for production build * further document offline-plugin removal * further document offline-plugin removal * further document offline-plugin removal * further document offline-plugin removal --- README.md | 10 +++++++++- package.json | 2 +- src/app/app.css | 2 +- src/components/footer/footer.css | 4 ++-- src/components/header/README.md | 6 +++--- src/components/header/header.css | 6 +++--- src/components/tabs/tabs.css | 2 +- src/templates/index.html | 8 ++++---- src/variables/variables.css | 11 ++++++----- webpack/webpack.config.base.js | 4 ---- webpack/webpack.config.prod.js | 4 ++++ yarn.lock | 6 +++--- 12 files changed, 37 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 23d7551..6f49998 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,9 @@ starbase uses [offline-plugin](https://github.com/NekR/offline-plugin/) to cache Out of the box, starbase caches everything, because the project is less than 50kb total. If you will be making a larger app, be considerate of your users and limit what you cache-- perhaps avoid caching large images, custom fonts, etc. Check out the [options docs for offline-plugin](https://github.com/NekR/offline-plugin/blob/master/docs/options.md) to learn more. -It should be noted that [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers), by design, only function on localhost and https environments. There is no issue with running starbase on an http environment-- the service worker will simply not be utilized. +[Service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers), by design, only function on secure (https) environments. There is no issue with running starbase on an http environment-- the service worker will simply not be utilized. + +You may see an info log entry in your console from `offline-plugin` while using the `watch` command, feel free to ignore this. `offline-plugin` is not utilized on the dev server because [it doesn't always play nice with `webpack-dev-server`](https://github.com/NekR/offline-plugin/issues/138). It is intentionally only utilized in production builds. #### to remove offline-plugin: @@ -127,6 +129,12 @@ It should be noted that [service workers](https://developer.mozilla.org/en-US/do _There is no consequence to removing this feature, besides limiting offline access to your project._ +#### to disable (but not delete) offline-plugin: + +You can disable `offline-plugin` without deleting it from your codebase, so that it's not included in your production code (reduces filesize) but is ready to be re-enabled if you ever want it back. + +1. in `/src/app.js`, comment-out the `import` statement that references `offline-plugin` + ## features you may want to know about ### global css variables diff --git a/package.json b/package.json index 9e0602f..3521352 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.11.0", "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-react": "^7.8.0", + "eslint-plugin-react": "^7.8.1", "file-loader": "^1.1.11", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", diff --git a/src/app/app.css b/src/app/app.css index a9572fd..cf02fae 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -11,7 +11,7 @@ body { max-width: var(--body-width-max); background-color: var(--body-bg-color); font-family: var(--font-sans); - font-size: responsive var(--body-font-size-range); + font-size: var(--body-font-size); font-range: var(--body-font-range); letter-spacing: 0.02rem; line-height: 1.25; diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index 18b49ab..8d8438a 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -1,4 +1,4 @@ -#footer { - font-size: 0.95em; +.footer { + font-size: var(--body-font-size-small); color: #888; } diff --git a/src/components/header/README.md b/src/components/header/README.md index b7029be..b2556a8 100644 --- a/src/components/header/README.md +++ b/src/components/header/README.md @@ -3,9 +3,9 @@ Global header component styles. Requires a square logo (`img`) and level one hea ## usage ```html -