feat: Npm run start now works. PostCSS needs some work

config/_old/webpack.config.vendor.babel.js

@@ -5,7 +5,7 @@ import webpack from 'webpack'
  * for instructions on resolving the errors by excluding the
  * vendor dependency that is throwing an error.
  */
-import entries from './dependencies.babel'
+import entries from '../dependencies.babel'
 import PATHS from './paths'
 
 // NOTE: The library and the plugin's filename MUST match.

config/dependencies.babel.js

@@ -1,6 +1,4 @@
-import {
-  dependencies
-} from '../package.json'
+import { dependencies } from '../package.json'
 
 /**
  * Exclude any package.json dependencies that throw errors here.

config/development.webpack.config.babel.js

@@ -7,7 +7,7 @@ import path from 'path'
 import webpack from 'webpack'
 
 import {
-  devServerConfig,
+  alias,
   devPerformanceOptions,
   nodeOptions,
   PATHS,
@@ -172,7 +172,7 @@ export default function developmentWebpack() {
         safe: false,
       }),
       new HtmlWebpackPlugin({
-        // chunksSortMode: 'auto',
+        chunksSortMode: 'auto',
         favicon: PATHS.favicon,
         filename: 'index.html',
         inject: true,
@@ -197,11 +197,7 @@ export default function developmentWebpack() {
       }),
     ],
     resolve: {
-      alias: {
-        '@': PATHS.appSrc,
-        '%': PATHS.sharedDir,
-        'react-dom': '@hot-loader/react-dom',
-      },
+      alias,
       aliasFields: ['browser'],
       descriptionFiles: ['package.json'],
       enforceExtension: false,

config/helpers/is-vendor.js

@@ -1,4 +1,2 @@
-export const isVendor = ({
-    resource
-  }) =>
+export const isVendor = ({ resource }) =>
   resource && resource.indexOf('node_modules') >= 0 && resource.match(/.js$/)

config/options/alias.config.js

@@ -0,0 +1,8 @@
+import { PATHS } from './paths'
+
+export const alias = {
+  '@': PATHS.appSrc,
+  '%': PATHS.sharedDir,
+  '#': PATHS.stylesDir,
+  'react-dom': '@hot-loader/react-dom',
+}

config/options/dev-server.js

@@ -1,9 +1,5 @@
-import {
-  stats
-} from './stats'
-import {
-  PATHS
-} from './paths'
+import { stats } from './stats'
+import { PATHS } from './paths'
 
 export const devServerConfig = () => {
   console.log('dev server config')

config/options/index.js

@@ -1,3 +1,4 @@
+export * from './alias.config'
 export * from './dev-server'
 export * from './node-options'
 export * from './paths'

config/options/paths.js

@@ -1,9 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import {
-  dllPrefix
-} from '../constants'
+import { dllPrefix } from '../constants'
 
 const currentDir = process.cwd()
 const isProduction = process.env.NODE_ENV === 'production'
@@ -23,14 +21,15 @@ export const PATHS = {
   favicon: resolvePath('public/favicon/favicon.ico'),
   // Uncomment this for `favicons-webpack-plugin`
   // image: resolvePath('src/shared/assets/images/spy_kid.png'),
-  indexHtml: resolvePath('public/index.html'),
+  indexHtml: resolvePath('public/index.ejs'),
   nodeModules: resolvePath('node_modules'),
   packageJson: resolvePath('package.json'),
   polyfills: resolvePath('config/helpers/polyfills'),
   postCssConfig: resolvePath('config/postcss.config.js'),
   publicPath: isProduction ? './' : '/',
   root: currentDir,
   sharedDir: resolvePath('src/shared'),
+  stylesDir: resolvePath('src/shared/styles'),
   vendors: {
     filepath: resolvePath(`node_modules/${dllPrefix}/vendors.dll.js`),
     manifest: resolvePath(`node_modules/${dllPrefix}/vendors-manifest.json`),

config/options/performance-options.js

@@ -1,3 +1,3 @@
 export const devPerformanceOptions = {
-  hints: false
+  hints: false,
 }

config/options/stats.js

@@ -8,5 +8,5 @@ export const stats = {
   modules: false,
   publicPath: true,
   reasons: true,
-  warnings: true
+  warnings: true,
 }

config/postcss.config.js

@@ -1,6 +1,35 @@
+// const postcssPresetEnv = require('postcss-preset-env');
+
 module.exports = {
   // This parser (may or may not) remove inline comments (not allowed in .css): // My Comment
   // parser: 'postcss-scss',
-  // plugins: [require('precss'), require('autoprefixer')],
-  plugins: [],
+  // plugins: {
+  //   'postcss-import': {
+  //     path: ['src/shared/styles'],
+  //   },
+  //   'postcss-color-function': {},
+  //   'postcss-cssnext': {
+  //     browsers: 'last 2 versions',
+  //     warnForDuplicates: false,
+  //   },
+  //   cssnano: {},
+  // },
+  plugins: [
+    //
+    require('precss'),
+    require('autoprefixer'),
+    require('postcss-color-function'),
+    require('postcss-import'),
+    require('postcss-strip-inline-comments'),
+    require('postcss-preset-env')({
+      autoprefixer: { grid: true },
+      browsers: 'last 2 versions',
+      // importFrom: 'path/to/file.css',
+      /* use stage 3 features + css color-mod (warning on unresolved) */
+      stage: 3,
+      features: {
+        'color-mod-function': { unresolved: 'warn' },
+      },
+    }),
+  ],
 }

config/vendors.webpack.config.babel.js

@@ -7,12 +7,8 @@ import webpack from 'webpack'
  * for instructions on resolving the errors by excluding the
  * vendor dependency that is throwing an error.
  */
-import {
-  vendorEntries
-} from './dependencies.babel'
-import {
-  dllPrefix
-} from './constants'
+import { vendorEntries } from './dependencies.babel'
+import { dllPrefix } from './constants'
 
 export default function vendorsWebpack() {
   const basePath = process.cwd()
@@ -23,7 +19,7 @@ export default function vendorsWebpack() {
     target: 'web',
     mode: 'development',
     entry: {
-      vendors: vendorEntries
+      vendors: vendorEntries,
     },
     output: {
       path: path.join(basePath, 'node_modules', dllPrefix),
@@ -44,10 +40,10 @@ export default function vendorsWebpack() {
       }),
     ],
     optimization: {
-      minimize: false
+      minimize: false,
     },
     performance: {
-      hints: false
+      hints: false,
     },
   }
 }