2.3.0 (#60)

* add @css, @lib & @src webpack aliases

* make `/src` the root of postcss @import calls

* webpack config cleanup

* delete unused/relic file

* remove redundant filename extension

* all dependencies updated

* version bump

.eslintrc

@@ -1,6 +1,7 @@
 {
   "parser": "babel-eslint",
   "extends": "airbnb-base",
+  "plugins": ["import"],
   "rules": {
     "comma-dangle": ["error", "never"],
     "linebreak-style": 0,
@@ -12,5 +13,12 @@
     "document": true,
     "window": true,
     "location": true
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack/webpack.config.base.js"
+      }
+    }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starbase",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": "Brian Staruk <[email protected]>",
   "contributors": [
     {
@@ -30,28 +30,30 @@
   "keywords": [],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
+    "@babel/core": "^7.7.2",
+    "@babel/preset-env": "^7.7.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.2.0",
     "css-mqpacker": "^7.0.0",
     "cssnano": "^4.1.10",
-    "eslint": "^6.5.1",
+    "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-import-resolver-webpack": "^0.11.1",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-import": "^2.18.2",
     "file-loader": "^4.2.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.0",
     "offline-plugin": "^5.0.7",
-    "postcss": "^7.0.18",
+    "path": "^0.12.7",
+    "postcss": "^7.0.21",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.1.2",
+    "postcss-nested": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-remove-root": "0.0.2",
     "postcss-reporter": "^6.0.1",
@@ -60,8 +62,8 @@
     "stylelint-config-standard": "^19.0.0",
     "url-loader": "^2.2.0",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {

src/app.js

@@ -1,9 +1,8 @@
 // offline-plugin
-import './lib/offline-plugin';
+import '@lib/offline-plugin';
 
-// application css
-import './lib/fonts/fonts.css';
-import './app.css';
+// styles
+import '@src/app.styles';
 
 // fetch & promise polyfills (comment-out if not needed)
 // require('es6-promise').polyfill();

src/app.styles.js

@@ -0,0 +1,8 @@
+/* ordered css imports */
+import '@lib/fonts/fonts.css';
+import '@css/root.css';
+
+/* all other (alphabetical) css imports */
+import '@css/footer.css';
+import '@css/header.css';
+import '@css/rich-text.css';

src/css/footer.css

@@ -1,4 +1,4 @@
-@import "./_variables.css";
+@import "css/_variables";
 
 .footer {
   margin-top: 2.5rem;

src/css/header.css

@@ -1,4 +1,4 @@
-@import "./_variables.css";
+@import "css/_variables";
 
 .header {
   &__brand {

src/css/rich-text.css

@@ -1,4 +1,4 @@
-@import "./_variables.css";
+@import "css/_variables";
 
 .rich-text {
   h2 {

src/css/root.css

@@ -1,4 +1,4 @@
-@import "./_variables.css";
+@import "css/_variables";
 
 /*
   This file is here to contain some baseline styles but

webpack/webpack.config.base.js

@@ -9,6 +9,14 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../dist')
   },
+  resolve: {
+    alias: {
+      '@css': path.resolve(__dirname, '../src/css'),
+      '@lib': path.resolve(__dirname, '../src/lib'),
+      '@src': path.resolve(__dirname, '../src')
+    },
+    extensions: ['.js', '.json', '.css']
+  },
   module: {
     rules: [
       {

webpack/webpack.config.dev.js

@@ -44,7 +44,9 @@ module.exports = webpackMerge(webpackConfigBase, {
             plugins: () => [
               stylelint(),
               postcssReporter(),
-              postcssImport(),
+              postcssImport({
+                path: [path.resolve(__dirname, '../src')]
+              }),
               postcssNested(),
               postcssPresetEnv({
                 stage: 1,

webpack/webpack.config.prod.js

@@ -1,6 +1,7 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OfflinePlugin = require('offline-plugin');
+const path = require('path');
 const webpackMerge = require('webpack-merge');
 
 // postcss plugins
@@ -37,7 +38,9 @@ module.exports = webpackMerge(webpackConfigBase, {
             plugins: () => [
               stylelint(),
               postcssReporter(),
-              postcssImport(),
+              postcssImport({
+                path: [path.resolve(__dirname, '../src')]
+              }),
               postcssNested(),
               postcssPresetEnv({
                 stage: 1,