1.5.0 (#51)

* first pass at integrating `offline-plugin` * first pass at asset hashing (just js & css for now) * dependency updates * yarn.lock post-merge * hashing tweaks/buildout * asset caching readme coverage * asset caching readme coverage * asset caching readme coverage * postcss-extend integration (#42) * first pass at postcss-extend support * resolve build warning * 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 * version bump (#45) * dependency updates * readme updates * app description update * readme tweaks * template tweaks * incremental version bump * replace postcss-cssnext w/ postcss-preset-env (#47) * first pass at replacing postcss-cssnext with postcss-present-env * verbiage tweaks * update dependencies * reorder base config import (after dependencies) * configs cleanup * html entity * html entity * minor version bump * dependency updates * readme verbiage tweaks (hello babel 7) * minor version bump & description update * babel & eslint updates * babel & webpack dependency updates * loader updates * webpack plugin updates * dependency updates * dependency updates * dependency updates * dependency updates * remove janky global variables * webpack config formatting cleanup * re-remove eslint preloader (already covered in normal loader) * minor version bump * readme updates * readme updates
bstaruk · Jan 6, 2019 · ebdbba8 · ebdbba8
1 parent e33c9ca
commit ebdbba8
Show file tree

Hide file tree

Showing 13 changed files with 2,665 additions and 1,905 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["env"]
+  "presets": ["@babel/preset-env"]
 }
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 [![dependencies status](https://david-dm.org/bstaruk/starbase/status.svg)](https://david-dm.org/bstaruk/starbase)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase?ref=badge_shield)
 
-starbase is an offline-first web app boilerplate that is built with webpack 4, PostCSS & Babel 7. Get up and running in minutes using some of the most powerful front-end tools available in 2018:
+starbase is an offline-first web app boilerplate that is built with webpack 4, PostCSS & Babel 7. Get up and running in minutes using some of the most powerful front-end tools available in 2019:
 
 * [Node.js](https://github.com/nodejs/node) & [Yarn](https://github.com/yarnpkg)
 * [webpack 4](https://github.com/webpack/webpack) & [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
@@ -31,11 +31,9 @@ starbase is open source and free software, so you may to do whatever you wish wi
 After completing the steps below, you will be ready to begin using starbase:
 
 1. Install [Node.js](https://nodejs.org) (latest LTS recommended)
-2. Install [Yarn](https://yarnpkg.com)
+2. (Optional) Install [Yarn](https://yarnpkg.com)
 3. Clone starbase into your project root directory
-4. Install dependencies by running `yarn` in your project root directory
-
-_Note: if you hate Yarn for some reason, you can skip Step 2 and use `npm install` instead  of `yarn` in Step 4._
+4. Install dependencies by running `yarn`  in your project root directory (or `npm install` if you skipped Step 2)
 
 ## building, watching & developing
 
@@ -106,7 +104,7 @@ starbase enforces the [Airbnb JavaScript Style Guide](https://github.com/airbnb/
 
 1. in `/.eslintrc`, remove the line that says `extends`
 2. in `/package.json`, remove the `eslint-config-airbnb` dependency
-3. run `yarn` (or `npm update` if you hate yarn)
+3. run `yarn` (or `npm update`)
 
 After completing the steps above, the only rules that eslint will enforce are the ones you define in the `rules` object in `/.eslintrc`.
 
@@ -137,16 +135,6 @@ You can disable `offline-plugin` without deleting it from your codebase, so that
 
 ## features you may want to know about
 
-### global css variables
-
-starbase supports global CSS variables via the [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) pseudo-element, which can be found in `/src/variables/variables.css`. You can split your variables into multiple files, and just import them into `/src/variables/variables.css` if you'd like them to be more granular.
-
-These variables automatically injected into any CSS in the `/src/components` and `/src/app` directories, so they are always available for use in your app & component stylesheets.
-
-Each component that comes with Starbase uses at least one variable to demonstrate the functionality.
-
-All variables are cleaned up in your production code and only the values will remain, so there is no bloat or downside to using these variables. Go nuts!
-
 ### html webpack plugin
 
 starbase uses [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) to generate HTML assets. The reason for this is to allow webpack to manage other assets, such as favicons and embedded images, as part of the build process. Adding new templates (pages) is very easy, but you'll need to read the official plugin docs for the latest info.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starbase",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "author": "Brian Staruk <[email protected]>",
   "contributors": [
     {
@@ -30,43 +30,42 @@
   "keywords": [],
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-loader": "^7.1.5",
-    "babel-preset-env": "^1.7.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "css-loader": "^1.0.0",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.0",
+    "css-loader": "^2.1.0",
     "css-mqpacker": "^7.0.0",
-    "cssnano": "^4.1.0",
-    "eslint": "^5.6.0",
+    "cssnano": "^4.1.8",
+    "eslint": "^5.12.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-loader": "^2.1.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^2.0.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.12.3",
+    "file-loader": "^3.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "loader-utils": "^1.1.0",
-    "mini-css-extract-plugin": "^0.4.3",
-    "offline-plugin": "^5.0.5",
-    "postcss": "^7.0.2",
+    "mini-css-extract-plugin": "^0.5.0",
+    "offline-plugin": "^5.0.6",
+    "postcss": "^7.0.7",
     "postcss-extend": "^1.0.5",
-    "postcss-import": "^12.0.0",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.0",
-    "postcss-preset-env": "^5.3.0",
+    "postcss-nested": "^4.1.1",
+    "postcss-preset-env": "^6.5.0",
     "postcss-remove-root": "0.0.2",
-    "postcss-reporter": "^6.0.0",
+    "postcss-reporter": "^6.0.1",
     "postcss-responsive-type": "^1.0.0",
-    "style-loader": "^0.23.0",
-    "stylelint": "^9.5.0",
+    "style-loader": "^0.23.1",
+    "stylelint": "^9.9.0",
     "stylelint-config-standard": "^18.2.0",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8",
-    "webpack-merge": "^4.1.4"
+    "url-loader": "^1.1.2",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.2.0",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "es6-promise": "^4.2.5",

diff --git a/src/app/app.css b/src/app/app.css
@@ -1,3 +1,5 @@
+@import "../variables/variables.css";
+
 /*
   This file is here to contain some baseline styles
   but most of your css should live in ../components

diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
@@ -1,3 +1,5 @@
+@import "../../variables/variables.css";
+
 .footer {
   font-size: var(--body-font-size-small);
   color: #888;

diff --git a/src/components/header/header.css b/src/components/header/header.css
@@ -1,3 +1,5 @@
+@import "../../variables/variables.css";
+
 :root {
   --header-height-small: 2rem;
   --header-font-size-small: 1.5rem;

diff --git a/src/components/tabs/tabs.css b/src/components/tabs/tabs.css
@@ -1,3 +1,4 @@
+@import "../../variables/variables.css";
 @import "../../app/utilities.css";
 
 :root {

diff --git a/src/variables/variables.css b/src/variables/variables.css
@@ -1,5 +1,3 @@
-/* IMPORTANT: This file is for :root variables only. */
-
 :root {
   /* theme colors */
   --body-bg-color: #fefefe;
@@ -16,8 +14,8 @@
   --body-font-size-small: responsive 0.9375rem 1rem; /* 15/16 & 16/16 */
   --body-font-range: 34rem 48rem;/* 544/16, 768/16 */
   --body-width-max: 48rem; /* 768/16 */
-
-  /* breakpoints */
-  @custom-media --small (min-width: 34em); /* 544/16 */
-  @custom-media --medium (min-width: 48em); /* 768/16 */
 }
+
+/* breakpoints */
+@custom-media --small (min-width: 34em); /* 544/16 */
+@custom-media --medium (min-width: 48em); /* 768/16 */
diff --git a/webpack/lib/css-prefix-variables.js b/webpack/lib/css-prefix-variables.js
diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
@@ -9,85 +9,50 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../dist')
   },
-  resolveLoader: {
-    alias: {
-      'css-prefix-variables': path.resolve(__dirname, './lib/css-prefix-variables.js')
-    }
-  },
   module: {
     rules: [
-      {
-        enforce: 'pre',
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: ['eslint-loader']
-      },
-      {
-        enforce: 'pre',
-        test: /\.css$/,
-        include: [
-          path.resolve(__dirname, '../src/app'),
-          path.resolve(__dirname, '../src/components')
-        ],
-        use: [
-          {
-            loader: 'css-prefix-variables',
-            options: {
-              path: path.resolve(__dirname, '../src/variables/variables.css')
-            }
-          }
-        ]
-      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: ['babel-loader']
+        use: ['babel-loader', 'eslint-loader']
       },
       {
         test: /\.html$/,
-        use: [
-          {
-            loader: 'html-loader',
-            options: {
-              minimize: true
-            }
+        use: [{
+          loader: 'html-loader',
+          options: {
+            minimize: true
           }
-        ]
+        }]
       },
       {
         test: /\.(png|jpg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 10000,
-              name: 'images/[name].[md5:hash:hex:8].[ext]'
-            }
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: 'images/[name].[md5:hash:hex:8].[ext]'
           }
-        ]
+        }]
       },
       {
         test: /\.(woff|woff2|otf|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 10000,
-              name: 'fonts/[name].[md5:hash:hex:8].[ext]'
-            }
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: 'fonts/[name].[md5:hash:hex:8].[ext]'
           }
-        ]
+        }]
       },
       {
         test: /\.(mp4|ogg|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: 'assets/[name].[md5:hash:hex:8].[ext]'
-            }
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: 'assets/[name].[md5:hash:hex:8].[ext]'
           }
-        ]
+        }]
       }
     ]
   },

diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
@@ -22,48 +22,46 @@ module.exports = webpackMerge(webpackConfigBase, {
     filename: '[name].js'
   },
   module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'postcss-loader',
-            options: {
-              ident: 'postcss',
-              sourceMap: 'inline',
-              plugins: () => [
-                stylelint(),
-                postcssReporter(),
-                postcssImport(),
-                postcssNested(),
-                postcssPresetEnv({
-                  stage: 1,
-                  features: {
-                    'custom-properties': {
-                      preserve: false
-                    },
-                    'custom-media': {
-                      preserve: false
-                    }
+    rules: [{
+      test: /\.css$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader',
+        {
+          loader: 'postcss-loader',
+          options: {
+            ident: 'postcss',
+            sourceMap: 'inline',
+            plugins: () => [
+              stylelint(),
+              postcssReporter(),
+              postcssImport(),
+              postcssNested(),
+              postcssPresetEnv({
+                stage: 1,
+                features: {
+                  'custom-properties': {
+                    preserve: false
+                  },
+                  'custom-media': {
+                    preserve: false
                   }
-                }),
-                postcssResponsiveType(),
-                postcssExtend(),
-                postcssRemoveRoot(),
-                cssMqpacker({
-                  sort: true
-                }),
-                cssnano({
-                  preset: 'default'
-                })
-              ]
-            }
+                }
+              }),
+              postcssResponsiveType(),
+              postcssExtend(),
+              postcssRemoveRoot(),
+              cssMqpacker({
+                sort: true
+              }),
+              cssnano({
+                preset: 'default'
+              })
+            ]
           }
-        ]
-      }
-    ]
+        }
+      ]
+    }]
   },
   devServer: {
     contentBase: path.resolve(__dirname, '../dist'),