add webpack, eslint, stylelint

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2017,
+  },
+  parser: 'babel-eslint',
+  extends: 'eslint-config-airbnb-base',
+};

.stylelintrc

@@ -0,0 +1,10 @@
+{
+	"extends": "stylelint-config-recommended",
+	"ignoreFiles": ["dist/**/*"],
+	"rules": {
+		"at-rule-no-unknown": [
+			true,
+			ignoreAtRules: ["mixin", "define-mixin"]
+		]
+	}
+}

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "webpack-static-html",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "webpack serve",
+    "watch": "webpack --watch --progress",
+    "build": "webpack --env production"
+  },
+  "author": "",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^5.0.1",
+    "cssnano-webpack-plugin": "^1.0.3",
+    "ejs-compiled-loader": "^3.0.0",
+    "eslint": "^7.2.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-webpack-plugin": "^2.4.1",
+    "html-webpack-plugin": "^5.0.0",
+    "mini-css-extract-plugin": "^1.3.3",
+    "postcss": "^8.2.2",
+    "postcss-functions": "^4.0.2",
+    "postcss-import": "^14.0.0",
+    "postcss-loader": "^4.1.0",
+    "postcss-mixins": "^7.0.2",
+    "postcss-nesting": "^7.0.1",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-simple-vars": "^6.0.2",
+    "style-loader": "^2.0.0",
+    "stylelint": "^13.8.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-webpack-plugin": "^2.1.1",
+    "webpack": "^5.11.1",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.1"
+  },
+  "dependencies": {
+    "postcss-custom-media": "^8.0.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,14 @@
+const postcssFunctions = require('./src/postcss/functions');
+const postcssMixins = require('./src/postcss/mixins');
+
+module.exports = {
+  plugins: [
+    'postcss-import',
+    'postcss-custom-media',
+    ['postcss-mixins', { mixins: postcssMixins }],
+    'postcss-preset-env',
+    'postcss-nesting',
+    'postcss-simple-vars',
+    ['postcss-functions', { functions: postcssFunctions }],
+  ],
+};

src/css/base/base.css

@@ -0,0 +1,6 @@
+@import 'typography.css';
+@import 'accessibility.css';
+@import 'forms.css';
+@import 'buttons.css';
+@import 'icons.css';
+@import 'visibility.css';

src/css/base/spacing.css

@@ -1,19 +0,0 @@
-:root {
-    --space-unit:  1rem;
-  }
-
-:root,
-* {
-	--space-xxxxs: calc(0.125 * var(--space-unit));
-	--space-xxxs:  calc(0.25 * var(--space-unit));
-	--space-xxs:   calc(0.375 * var(--space-unit));
-	--space-xs:    calc(0.5 * var(--space-unit));
-	--space-sm:    calc(0.75 * var(--space-unit));
-	--space-md:    calc(1.25 * var(--space-unit));
-	--space-lg:    calc(2 * var(--space-unit));
-	--space-xl:    calc(3.25 * var(--space-unit));
-	--space-xxl:   calc(5.25 * var(--space-unit));
-	--space-xxxl:  calc(8.5 * var(--space-unit));
-	--space-xxxxl: calc(13.75 * var(--space-unit));
-	--component-padding: var(--space-md);
-}

src/css/base/typography.css

@@ -181,7 +181,10 @@ u {
 	margin-left: calc(50% - 50vw);
 }
 
-@mixin breakpoint sm {
+
+/* postcss-custom-media */
+/* if using sass and not postcss will need to change */
+@media (--bp-sm) {
 	.text-component__block--left, 
 	.text-component__block--right {
 		width: 45%;
@@ -204,7 +207,9 @@ u {
 }
 
 /* outset content */
-@mixin breakpoint xl {
+/* postcss-custom-media */
+/* if using sass and not postcss will need to change */
+@media (--bp-xl) {
 	.text-component__block--outset {
 		width: calc(100% + 10.5 * var(--space-unit));
 	}

src/css/mixins.postcss.css

@@ -1,15 +1,3 @@
-@define-mixin bp-min $breakpoint {
-  @media (min-width: $breakpoint) { @mixin-content; }
-}
-
-@define-mixin bp-max $breakpoint {
-  @media (max-width: $breakpoint - 0.001) { @mixin-content; }
-}
-
-@define-mixin bp-min-max $bp-min, $bp-max {
-  @media (min-width: $bp-min) and (max-width: $bp-max - 0.001) { @mixin-content; }
-}
-
 /* crop top space on text elements - caused by line height */
 /*
  The mixin also accepts a (not required) second parameter (a number smaller than 1 that varies with the font-family value) that improves the crop effect.

src/css/style.css

@@ -1,2 +1,4 @@
-@import 'colors.css';
 @import 'reset.css';
+@import 'variables.css';
+@import 'colors.css';
+@import 'base/base.css';

src/css/variables.css

@@ -1,3 +1,9 @@
+@custom-media --bp-xs (max-width: 32em);  /* ~512px */
+@custom-media --bp-sm (max-width: 48em);  /* ~768px */
+@custom-media --bp-md (max-width: 64em);  /* ~1024px */
+@custom-media --bp-lg (max-width: 80em);  /* ~1280px */
+@custom-media --bp-xl (max-width: 90em);  /* ~1440px */
+
 :root {
 	/* z-index */
 	--zindex-header: 3;                  /* e.g., main header */
@@ -5,6 +11,9 @@
 	--zindex-fixed-element: 10;          /* e.g., 'back to top' button */
 	--zindex-overlay: 15;                /* e.g., modals and dialogs */
 
+	/* space unit */
+	--space-unit:  1rem;
+
 	/*radius */
 	--radius-sm: calc(var(--radius, 0.25em) / 2);
 	--radius-md: var(--radius, 0.25em);
@@ -37,3 +46,19 @@
 	--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
 	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+
+:root,
+* {
+	--space-xxxxs: calc(0.125 * var(--space-unit));
+	--space-xxxs:  calc(0.25 * var(--space-unit));
+	--space-xxs:   calc(0.375 * var(--space-unit));
+	--space-xs:    calc(0.5 * var(--space-unit));
+	--space-sm:    calc(0.75 * var(--space-unit));
+	--space-md:    calc(1.25 * var(--space-unit));
+	--space-lg:    calc(2 * var(--space-unit));
+	--space-xl:    calc(3.25 * var(--space-unit));
+	--space-xxl:   calc(5.25 * var(--space-unit));
+	--space-xxxl:  calc(8.5 * var(--space-unit));
+	--space-xxxxl: calc(13.75 * var(--space-unit));
+	--component-padding: var(--space-md);
+}

src/js/index.js

@@ -1,3 +1,5 @@
+// import '../sass/main.scss';
+import '../css/mixins.postcss.css';
 import '../css/style.css';
 
 window.addEventListener('DOMContentLoaded', (event) => {

src/postcss/mixins.js

@@ -22,12 +22,6 @@ const postcssMixins = {
     return defineHSL(name, hue, sat, light);
   },
 
-  bpMin(mixin) {
-  },
-
-  bpMax(mixin) {
-  },
-
   // TODO - untested
   // // font rendering -> useful for light text on dark backgrounds
   fontSmooth() {

src/postcss/package-lock.json

@@ -0,0 +1,27 @@
+{
+  "name": "postcss",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "hex-to-hsl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz",
+      "integrity": "sha1-1cWezgAXhEToIcj8WKQwr8CYMcI=",
+      "requires": {
+        "hex-to-rgb": "^1.0.1",
+        "rgb-to-hsl": "0.0.2"
+      }
+    },
+    "hex-to-rgb": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz",
+      "integrity": "sha1-EAud8SazLydirfhIa+aMZe+O0qQ="
+    },
+    "rgb-to-hsl": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz",
+      "integrity": "sha1-Nvn8KGN2uQrMRX5pkAW0y0LTUOw="
+    }
+  }
+}

src/sass/main.scss

@@ -1 +1,2 @@
-// TODO
+@import 'breakpoints';
+@import 'mixins';

src/templates/index.ejs

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+
+		<title>THE TITLE IS THIS!</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<meta name="description" content="THE DESCRIPTION IS THIS!">
+		<meta name="author" content="I AM THE AUTHOR">
+
+	</head>
+
+	<body>
+
+		<header>
+		</header>
+
+		<main id="js-main">
+			<%# weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46 %>
+			<%- require('!!ejs-compiled-loader?{}!./partials/component.ejs')({ text: 'text is text yahh!!!' }) %>
+		</main>
+
+		<footer>
+		</footer>
+	</body>
+</html>
+

src/templates/partials/component.ejs

@@ -0,0 +1,4 @@
+<div class="component">
+	<p><%= text %></p>
+	<p>woot!</p>
+</div>

webpack.config.js

@@ -0,0 +1,105 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssnanoPlugin = require('cssnano-webpack-plugin');
+const EsLintPlugin = require('eslint-webpack-plugin');
+const StylelintPlugin = require('stylelint-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = (env) => ({
+  mode: env.production ? 'production' : 'development',
+  target: 'web',
+  entry: './src/js/index.js',
+  output: {
+    filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+    hot: true,
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: env.production ? '[name].[contenthash].css' : '[name].css',
+    }),
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      // weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
+      template: '!!ejs-compiled-loader?{}!./src/templates/index.ejs',
+    }),
+    new EsLintPlugin(),
+    new StylelintPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.ejs$/,
+        use: {
+          // weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
+          // NOTE - talso an alternative workaround that involves passing
+          // the usual 'ejs-compiled-loader' as the loader and passing
+          // an empty options object, however hmr did not work with that fix.
+          loader: '!!ejs-compiled-loader?{}!',
+        },
+      },
+      {
+        test: /\.js?/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.inline\.css$/i,
+        include: path.resolve(__dirname, 'src/css'),
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              insert: function insertAtTop(element) {
+                const parent = document.querySelector('head');
+                // eslint-disable-next-line no-underscore-dangle
+                const lastInsertedElement = window._lastElementInsertedByStyleLoader;
+
+                if (!lastInsertedElement) {
+                  parent.insertBefore(element, parent.firstChild);
+                } else if (lastInsertedElement.nextSibling) {
+                  parent.insertBefore(element, lastInsertedElement.nextSibling);
+                } else {
+                  parent.appendChild(element);
+                }
+
+                // eslint-disable-next-line no-underscore-dangle
+                window._lastElementInsertedByStyleLoader = element;
+              },
+            },
+          },
+          'css-loader',
+          'postcss-loader'],
+      },
+      {
+        test: /\.css$/i,
+        include: path.resolve(__dirname, 'src/css'),
+        exclude: /\.inline\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+      },
+      {
+        test: /.(png|svg|jpg|jpeg|gif)$/i,
+        include: path.resolve(__dirname, 'src'),
+        type: 'asset',
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new CssnanoPlugin({
+        sourceMap: true,
+      }),
+      '...', // access defaults (defaults are overridden when specifying minimizer: array)
+    ],
+  },
+});