@lipemat/js-boilerplate 8.4.0 → 8.5.0

package/config/jest.config.js

@@ -14,6 +14,9 @@ let jestConfig = {
 	moduleNameMapper: {
 		'\\.(pcss|less|css)$': 'identity-obj-proxy',
 	},
+	roots: [
+		'./tests',
+	],
 	testURL: packageConfig.url,
 	transform: {
 		'^.+\\.[tj]sx?$': [ 'babel-jest', babelConfig ],

package/config/webpack.dist.js

@@ -1,4 +1,5 @@
 const moduleHelpers = require( '../helpers/modules' );
+const {getLocalIdent} = require( '../helpers/css-classnames' );
 const webpack = require( 'webpack' );
 const path = require( 'path' );
 const fs = require( 'fs' );
@@ -102,6 +103,9 @@ module.exports = {
 							importLoaders: 1,
 							modules: {
 								exportLocalsConvention: 'camelCase',
+								// Use short CSS Classes if enabled.
+								...config.shortCssClasses ? {getLocalIdent} : {},
+								// Hash used when short CSS classes are not enabled.
 								localIdentName: '[contenthash:base64:5]',
 								// Default to :global for classes in "global" directories.
 								mode: resourcePath => {

package/helpers/css-classnames.js

@@ -0,0 +1,106 @@
+const SHORT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+
+const classes = {};
+let counters = [ -1 ];
+
+/**
+ * Reset all counters.
+ *
+ * @notice Mostly here for unit tests.
+ */
+function resetCounters() {
+	counters = [ -1 ];
+}
+
+/**
+ * Get the next class is sequence based on:
+ * 1. Single character from shortAlphabet (prevent conflicts with CSS boilerplate).
+ * 2. Incremented character from the `alphabet`.
+ *      1. Used once require 2+ characters.
+ *      2. Grows to 3+ characters as needed.
+ *
+ * @return {string}
+ */
+function getNextClass() {
+	const last = counters.length - 1;
+	let totalLetters = ALPHABET.length - 1;
+
+	// First level uses the SHORT_ALPHABET.
+	if ( 0 === last ) {
+		totalLetters = SHORT_ALPHABET.length - 1;
+	}
+
+	if ( counters[ last ] < totalLetters ) {
+		counters[ last ]++;
+	} else {
+		incrementParent();
+	}
+
+	return counters.map( ( counter, i ) => {
+		return 0 === i ? SHORT_ALPHABET[ counter ] : ALPHABET[ counter ];
+	} ).join( '' );
+}
+
+
+/**
+ * When we run out of characters on the current level:
+ * 1. Increment the parent level.
+ * 2. Reset current level and all child levels back to 0.
+ *
+ * If we are out of characters on the parent level or have
+ * no parent level:
+ * 1. Add a new child level.
+ * 2. Reset all levels back to 0.
+ *
+ */
+function incrementParent() {
+	let parent = counters.length - 2;
+	let totalLetters = ALPHABET.length - 1;
+
+	while ( counters[ parent ] !== undefined ) {
+		// First level uses the SHORT_ALPHABET.
+		if ( 0 === parent ) {
+			totalLetters = SHORT_ALPHABET.length - 1;
+		}
+		if ( counters[ parent ] < totalLetters ) {
+			counters[ parent ]++;
+			// Reset all child levels to 0.
+			while ( counters[ parent + 1 ] !== undefined ) {
+				counters[ parent + 1 ] = 0;
+				parent++;
+			}
+			return;
+		}
+		parent--;
+	}
+
+	// Add a new level and reset all existing levels.
+	counters.forEach( ( _, i ) => counters[ i ] = 0 );
+	counters.push( 0 );
+}
+
+/**
+ * Return a single character unique CSS class name based on WebPack
+ * css-loader's `getLocalIdentName` callback.
+ *
+ * Tracks CSS classes per each file so duplicate uses of the
+ * same class in a file receive the same result.
+ *
+ * @notice Only enabled if the `package.json` has `shortCssClasses` set to true.
+ *
+ * @link https://webpack.js.org/loaders/css-loader/#getlocalident
+ */
+const getLocalIdent = ( {resourcePath}, _, localName ) => {
+	classes[ resourcePath ] ||= {};
+	classes[ resourcePath ][ localName ] ||= getNextClass();
+	return classes[ resourcePath ][ localName ];
+};
+
+module.exports = {
+	ALPHABET,
+	SHORT_ALPHABET,
+	getLocalIdent,
+	getNextClass,
+	resetCounters,
+};

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "description": "Dependencies and scripts for a no config JavaScript app",
+  "author": "Mat Lipe",
+  "license": "MIT",
   "engines": {
     "node": ">=14.17.6"
   },
+  "bugs": {
+    "url": "https://github.com/lipemat/js-boilerplate/issues"
+  },
+  "homepage": "https://github.com/lipemat/js-boilerplate#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lipemat/js-boilerplate.git"
   },
+  "sideEffects": false,
   "keywords": [
     "react",
     "boilerplate",
@@ -25,9 +32,9 @@
   "bin": {
     "lipemat-js-boilerplate": "bin/lipemat-js-boilerplate.js"
   },
-  "author": "Mat Lipe",
-  "license": "MIT",
-  "sideEffects": false,
+  "scripts": {
+    "test": "lipemat-js-boilerplate test --silent"
+  },
   "dependencies": {
     "@babel/core": "^7.4.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -81,9 +88,5 @@
     "webpack-dev-server": "^4.7.2",
     "webpack-subresource-integrity": "^1.5.2"
   },
-  "bugs": {
-    "url": "https://github.com/lipemat/js-boilerplate/issues"
-  },
-  "homepage": "https://github.com/lipemat/js-boilerplate#readme",
   "packageManager": "yarn@3.2.0"
 }