♻️ switch from Webpack to Parcel for documentation site

Author: macklinu

www/.babelrc

@@ -1,6 +1,7 @@
 {
+  "plugins": ["preval"],
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false
     }]
   ]

www/.gitignore

@@ -1,3 +1,4 @@
 public
 node_modules
-.DS_Store
+.DS_Store
+.cache

www/package.json

@@ -6,45 +6,40 @@
   "author": "Alec Lomas",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server",
-    "prebuild": "node generate-colors",
-    "build": "webpack",
-    "prebuild:min": "cross-env NODE_ENV=production node generate-colors",
-    "build:min": "cross-env NODE_ENV=production webpack -p"
+    "start": "parcel src/index.html --out-dir public",
+    "build": "parcel build src/index.html --out-dir public",
+    "build:min": "cross-env NODE_ENV=production parcel build src/index.html --out-dir public"
   },
   "dependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
     "autoprefixer": "^7.1.6",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
+    "babel-plugin-preval": "^3.0.1",
     "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
     "css-mqpacker": "^6.0.1",
     "cssnano": "^3.10.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "fs-extra": "^4.0.2",
-    "html-webpack-plugin": "^2.30.1",
     "postcss": "^6.0.14",
     "postcss-custom-media": "^6.0.0",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
     "postcss-nested": "^2.1.2",
     "random-a11y-combo": "^1.0.0",
     "randomcolor": "^0.5.3",
-    "style-loader": "^0.19.0",
-    "tachyons": "^4.9.0",
-    "webpack": "^3.8.1"
+    "tachyons": "^4.9.0"
   },
   "devDependencies": {
     "eslint": "3.19.0",
     "eslint-config-lowmess": "1.1.0",
+    "parcel-bundler": "^1.10.3",
     "prettier": "^1.8.2",
     "stylelint": "8.1.1",
-    "stylelint-config-lowmess": "0.2.0",
-    "webpack-dev-server": "^2.9.4"
+    "stylelint-config-lowmess": "0.2.0"
   },
   "browserslist": [
     "last 2 versions",
     "> 5%"
-  ]
+  ],
+  "alias": {
+    "hero-patterns": "../src/hero-patterns.js",
+    "package.json": "../package.json"
+  }
 }

www/generate-colors.js www/src/colors.js

@@ -1,10 +1,9 @@
-const fs = require('fs-extra')
+// @preval
+
 const randomColor = require('randomcolor')
 const combo = require('random-a11y-combo')
-const hero = require('../dist/hero-patterns.cjs.js')
+const hero = require('../../dist/hero-patterns.cjs.js')
 
-// create 'public', should always fire
-if (!fs.existsSync('public')) fs.mkdirSync('public')
 // pre-generate color combinations
 // this can make the build hang but speeds up the site tremendously
 const combos = []
@@ -13,4 +12,5 @@ const colors = randomColor({ count: num })
 for (const color of colors) {
   combos.push(combo(color))
 }
-fs.outputJsonSync('./public/colors.json', combos)
+
+module.exports = combos

www/src/index.html

@@ -80,6 +80,7 @@ <h2 class="f3 fw4 mb3 mt4">Usage</h2>
       </ul>
     </div>
   </footer>
+  <script src="./main.js"></script>
 </body>
 
 </html>

www/src/main.css

@@ -1,7 +1,5 @@
 @charset 'utf-8';
 
-@import 'tachyons/src/tachyons';
-
 @custom-media --breakpoint-not-small screen and (min-width: 48em);
 @custom-media --breakpoint-medium screen and (min-width: 72em);
 @custom-media --breakpoint-large screen and (min-width: 96em);

www/src/main.js

@@ -1,7 +1,8 @@
-import colors from 'colors'
 import { version } from 'package.json'
 import * as hero from 'hero-patterns'
+import colors from './colors'
 
+import 'tachyons'
 import './main.css'
 
 // Add version number to header