@lipemat/js-boilerplate 10.9.0 → 10.10.0

package/bin/lipemat-js-boilerplate.js

@@ -1,11 +1,6 @@
 #!/usr/bin/env node
 'use strict';
 
-// Update notifier.
-const updateNotifier = require( 'update-notifier' );
-const pkg = require( '../package.json' );
-updateNotifier( {pkg, shouldNotifyInNpmScript: true} ).notify();
-
 const spawn = require( 'cross-spawn' );
 const args = process.argv.slice( 2 );
 

package/config/css-loader.config.js

@@ -1,51 +1,45 @@
-const {getLocalIdent, usingShortCssClasses} = require( '../helpers/css-classnames' );
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_classnames_1 = require("../helpers/css-classnames");
 /**
  * Options for the Webpack `css-loader`.
  *
  * Extracted to its on file to allow easy overrides.
  */
-
 /**
  * Default to :global for classes in "global" or "pcss" directories.
  *
  * @param {string} resourcePath
  * @return {string}
  */
-const mode = resourcePath => {
-	if ( /globals?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
-		return 'global';
-	}
-	if ( /pcss?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
-		return 'global';
-	}
-	return 'local';
+const mode = (resourcePath) => {
+    if (/globals?\//i.test(resourcePath.replace(/\\/g, '/'))) {
+        return 'global';
+    }
+    if (/pcss?\//i.test(resourcePath.replace(/\\/g, '/'))) {
+        return 'global';
+    }
+    return 'local';
 };
-
-let cssLoader = {
-	importLoaders: 1,
-	modules: {
-		exportLocalsConvention: 'camelCase',
-		localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:2]',
-		mode,
-	},
-	sourceMap: true,
-	url: false,
+const cssLoader = {
+    importLoaders: 1,
+    modules: {
+        exportLocalsConvention: 'camelCase',
+        localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:2]',
+        mode,
+    },
+    sourceMap: true,
+    url: false,
 };
-
-if ( 'production' === process.env.NODE_ENV ) {
-	cssLoader = {
-		importLoaders: 1,
-		modules: {
-			exportLocalsConvention: 'camelCase',
-			// Use short CSS Classes if enabled.
-			...usingShortCssClasses() ? {getLocalIdent} : {},
-			// Hash used when short CSS classes are not enabled.
-			localIdentName: '[contenthash:base64:5]',
-			mode,
-		},
-		url: false,
-	};
+if ('production' === process.env.NODE_ENV) {
+    cssLoader.modules = {
+        exportLocalsConvention: 'camelCase',
+        // Use short CSS Classes if enabled.
+        ...(0, css_classnames_1.usingShortCssClasses)() ? { getLocalIdent: css_classnames_1.getLocalIdent } : {},
+        // Hash used when short CSS classes are not enabled.
+        localIdentName: '[contenthash:base64:5]',
+        mode,
+    };
+    cssLoader.sourceMap = false;
 }
-
 module.exports = cssLoader;

package/config/css-loader.config.ts

@@ -0,0 +1,52 @@
+import {getLocalIdent, usingShortCssClasses} from '../helpers/css-classnames';
+import type {Config, Mode} from '../types/css-loader';
+import type {AtLeast} from '../types/utility';
+
+export type CssLoaderConfig = AtLeast<Config, 'importLoaders' | 'modules' | 'sourceMap' | 'url'>
+
+/**
+ * Options for the Webpack `css-loader`.
+ *
+ * Extracted to its on file to allow easy overrides.
+ */
+
+/**
+ * Default to :global for classes in "global" or "pcss" directories.
+ *
+ * @param {string} resourcePath
+ * @return {string}
+ */
+const mode = ( resourcePath: string ): Mode => {
+	if ( /globals?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
+		return 'global';
+	}
+	if ( /pcss?\//i.test( resourcePath.replace( /\\/g, '/' ) ) ) {
+		return 'global';
+	}
+	return 'local';
+};
+
+const cssLoader: CssLoaderConfig = {
+	importLoaders: 1,
+	modules: {
+		exportLocalsConvention: 'camelCase',
+		localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:2]',
+		mode,
+	},
+	sourceMap: true,
+	url: false,
+};
+
+if ( 'production' === process.env.NODE_ENV ) {
+	cssLoader.modules = {
+		exportLocalsConvention: 'camelCase',
+		// Use short CSS Classes if enabled.
+		...usingShortCssClasses() ? {getLocalIdent} : {},
+		// Hash used when short CSS classes are not enabled.
+		localIdentName: '[contenthash:base64:5]',
+		mode,
+	}
+	cssLoader.sourceMap = false;
+}
+
+module.exports = cssLoader;

package/config/postcss.config.js

@@ -5,6 +5,7 @@ const fs_1 = require("fs");
 const config_1 = require("../helpers/config");
 const package_config_1 = require("../helpers/package-config");
 const postcss_pretty_1 = require("../lib/postcss-pretty");
+const postcss_clean_1 = require("../lib/postcss-clean");
 const postcssPresetEnv = require('postcss-preset-env');
 function isPluginsArray(value) {
     return Array.isArray(value);
@@ -88,7 +89,7 @@ const config = {
 if (isPluginsArray(config.plugins)) {
     if ('production' === process.env.NODE_ENV) {
         // For production, we minify it.
-        config.plugins.push(require('../lib/postcss-clean')({
+        config.plugins.push((0, postcss_clean_1.default)({
             level: 2,
         }));
     }

package/config/postcss.config.ts

@@ -5,6 +5,7 @@ import type Processor from 'postcss/lib/processor';
 import {getBrowsersList} from '../helpers/config';
 import {getPackageConfig} from '../helpers/package-config';
 import PrettyPlugin from '../lib/postcss-pretty';
+import cleanCSS from '../lib/postcss-clean';
 import type {Config, ConfigPlugin} from 'postcss-load-config';
 import type {LoaderContext} from 'webpack';
 import type {Plugin} from 'postcss';
@@ -16,7 +17,7 @@ export type PostCSSConfig = Config & Partial<LoaderContext<Config>> & {
 	parser: string;
 }
 
-function isPluginsArray( value: unknown ): value is ConfigPlugin[] {
+function isPluginsArray( value: ConfigPlugin[]|false ): value is ConfigPlugin[] {
 	return Array.isArray( value );
 }
 
@@ -108,7 +109,7 @@ const config: PostCSSConfig = {
 if ( isPluginsArray( config.plugins ) ) {
 	if ( 'production' === process.env.NODE_ENV ) {
 		// For production, we minify it.
-		config.plugins.push( require( '../lib/postcss-clean' )( {
+		config.plugins.push( cleanCSS( {
 			level: 2,
 		} ) );
 	} else {

package/config/webpack.dist.js

@@ -9,7 +9,6 @@ const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
 const WebpackAssetsHash = require( '../helpers/WebpackAssetsHash' );
 
 const {getConfig, getTsConfigFile, getBrowsersList} = require( '../helpers/config' );
-const moduleHelpers = require( '../helpers/modules' );
 const config = require( '../helpers/package-config' );
 const {getEntries} = require( '../helpers/entries' );
 const {getPackageConfig} = require( '../helpers/package-config' );
@@ -122,7 +121,7 @@ module.exports = {
 			{
 				test: /\.[jt]sx?$/,
 				loader: 'babel-loader',
-				exclude: moduleHelpers.getBabelExcludeRegex(),
+				exclude: /node_modules/,
 				options: babelOptions,
 			},
 			{

package/helpers/config.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.adjustBrowserslist = exports.getDefaultBrowsersList = exports.getBrowsersList = exports.getTsConfigFile = exports.getExtensionsConfig = exports.getConfig = exports.hasLocalOverride = void 0;
+exports.getDefaultBrowsersList = void 0;
+exports.hasLocalOverride = hasLocalOverride;
+exports.getConfig = getConfig;
+exports.getExtensionsConfig = getExtensionsConfig;
+exports.getTsConfigFile = getTsConfigFile;
+exports.getBrowsersList = getBrowsersList;
+exports.adjustBrowserslist = adjustBrowserslist;
 const fs_1 = require("fs");
 const path_1 = require("path");
 const package_config_1 = require("./package-config");
@@ -32,10 +38,14 @@ function hasLocalOverride(fileName, inWorkingDirectory = false) {
         }
     }
     catch (e) {
+        if (e instanceof Error) {
+            if (!('code' in e) || 'MODULE_NOT_FOUND' !== e.code) {
+                console.error(e);
+            }
+        }
     }
     return hasLocal;
 }
-exports.hasLocalOverride = hasLocalOverride;
 /**
  * Get a config from our /config directory merged with any
  * matching configuration from the project directory.
@@ -77,10 +87,14 @@ function getConfig(fileName) {
         }
     }
     catch (e) {
+        if (e instanceof Error) {
+            if (!('code' in e) || 'MODULE_NOT_FOUND' !== e.code) {
+                console.error(e);
+            }
+        }
     }
     return mergedConfig;
 }
-exports.getConfig = getConfig;
 /**
  * Get a config from any existing extension's /config directories
  * merged into one.
@@ -106,11 +120,15 @@ function getExtensionsConfig(fileName, defaultConfig) {
             }
         }
         catch (e) {
+            if (e instanceof Error) {
+                if (!('code' in e) || 'MODULE_NOT_FOUND' !== e.code) {
+                    console.error(e);
+                }
+            }
         }
     });
     return mergedConfig;
 }
-exports.getExtensionsConfig = getExtensionsConfig;
 /**
  * Get the path to the "tsconfig.json" file if it exists.
  *
@@ -134,7 +152,6 @@ function getTsConfigFile() {
     });
     return tsConfig;
 }
-exports.getTsConfigFile = getTsConfigFile;
 /**
  * Get the browserslist from the current project.
  *
@@ -150,7 +167,6 @@ function getBrowsersList() {
     }
     return projectBrowsersList;
 }
-exports.getBrowsersList = getBrowsersList;
 /**
  * If browserslist is not specified, we fall back to WordPress defaults.
  *
@@ -183,4 +199,3 @@ function adjustBrowserslist(browserRules) {
     browserRules.push('not op_mini all');
     return browserRules;
 }
-exports.adjustBrowserslist = adjustBrowserslist;

package/helpers/config.ts

@@ -6,6 +6,7 @@ import type {JestConfig} from '../config/jest.config';
 import {getPackageConfig} from './package-config';
 import type {EntriesConfig} from '../config/entries.config';
 import type {Config as PostCSSConfig} from 'postcss-load-config';
+import type {CssLoaderConfig} from '../config/css-loader.config';
 
 // Must be required to avoid issues with browserslist.
 const browserslist = require( 'browserslist' );
@@ -13,6 +14,7 @@ const browserslist = require( 'browserslist' );
 
 type Configs = {
 	'babel.config': BabelConfig;
+	'css-loader.config': CssLoaderConfig;
 	'entries.config': EntriesConfig;
 	'jest.config': JestConfig;
 	'postcss.config': PostCSSConfig;
@@ -46,6 +48,11 @@ export function hasLocalOverride( fileName: string, inWorkingDirectory: boolean
 			hasLocal = true;
 		}
 	} catch ( e ) {
+		if ( e instanceof Error ) {
+			if ( ! ( 'code' in e ) || 'MODULE_NOT_FOUND' !== e.code ) {
+				console.error( e );
+			}
+		}
 	}
 
 	return hasLocal;
@@ -91,6 +98,11 @@ export function getConfig<T extends keyof Configs>( fileName: T ): Configs[T] {
 			mergedConfig = {...mergedConfig, ...localConfig};
 		}
 	} catch ( e ) {
+		if ( e instanceof Error ) {
+			if ( ! ( 'code' in e ) || 'MODULE_NOT_FOUND' !== e.code ) {
+				console.error( e );
+			}
+		}
 	}
 	return mergedConfig;
 }
@@ -119,6 +131,11 @@ export function getExtensionsConfig<T extends object>( fileName: string, default
 				mergedConfig = {...mergedConfig, ...extensionConfig};
 			}
 		} catch ( e ) {
+			if ( e instanceof Error ) {
+				if ( ! ( 'code' in e ) || 'MODULE_NOT_FOUND' !== e.code ) {
+					console.error( e );
+				}
+			}
 		}
 	} );
 

package/helpers/css-classnames.js

@@ -1,34 +1,35 @@
-const {getPackageConfig} = require( './package-config' );
-
-const SHORT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-const ALPHABET = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocalIdent = exports.ALPHABET = exports.SHORT_ALPHABET = void 0;
+exports.usingShortCssClasses = usingShortCssClasses;
+exports.resetCounters = resetCounters;
+exports.getNextClass = getNextClass;
+const package_config_1 = require("./package-config");
+exports.SHORT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+exports.ALPHABET = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 const classes = {};
-let counters = [ -1 ];
-
+let counters = [-1];
 /**
  * Check if short CSS classes are enabled.
  *
  * Using a helper function to allow for future enhancements.
  *
- * @since 10.3.0
+ * @since 4.6.0
  */
 function usingShortCssClasses() {
-	return getPackageConfig().shortCssClasses;
+    return Boolean((0, package_config_1.getPackageConfig)().shortCssClasses);
 }
-
 /**
  * Reset all counters.
  *
  * @notice Mostly here for unit tests.
  */
 function resetCounters() {
-	counters = [ -1 ];
+    counters = [-1];
 }
-
 /**
  * Get the next class is sequence based on:
- * 1. Single character from SHORT_ALPHABET (prevent conflicts with CSS boilerplate).
+ * 1. Single character from SHORT_ALPHABET (prevent conflicts with JS boilerplate).
  * 2. Incremented character from the `ALPHABET`.
  *      1. Used once require 2+ characters.
  *      2. Grows to 3+ characters as needed.
@@ -36,26 +37,22 @@ function resetCounters() {
  * @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( '' );
+    const last = counters.length - 1;
+    let totalLetters = exports.ALPHABET.length - 1;
+    // First level uses the SHORT_ALPHABET.
+    if (0 === last) {
+        totalLetters = exports.SHORT_ALPHABET.length - 1;
+    }
+    if (counters[last] < totalLetters) {
+        counters[last]++;
+    }
+    else {
+        incrementParent();
+    }
+    return counters.map((counter, i) => {
+        return 0 === i ? exports.SHORT_ALPHABET[counter] : exports.ALPHABET[counter];
+    }).join('');
 }
-
-
 /**
  * When we run out of characters on the current level:
  * 1. Increment the parent level.
@@ -68,31 +65,28 @@ function getNextClass() {
  *
  */
 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 );
+    let parent = counters.length - 2;
+    let totalLetters = exports.ALPHABET.length - 1;
+    while (counters[parent] !== undefined) {
+        // First level uses the SHORT_ALPHABET.
+        if (0 === parent) {
+            totalLetters = exports.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.
@@ -104,17 +98,9 @@ function incrementParent() {
  *
  * @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,
-	usingShortCssClasses,
-	resetCounters,
+const getLocalIdent = ({ resourcePath }, _, localName) => {
+    classes[resourcePath] ||= {};
+    classes[resourcePath][localName] ||= getNextClass();
+    return classes[resourcePath][localName];
 };
+exports.getLocalIdent = getLocalIdent;

package/helpers/css-classnames.ts

@@ -0,0 +1,117 @@
+import {getPackageConfig} from './package-config';
+import type {GetLocalIdent, Resource} from '../types/css-loader';
+
+export const SHORT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+export const ALPHABET = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+
+const classes: {
+	[ filename: string ]: {
+		[ className: string ]: string
+	}
+} = {};
+
+let counters = [ -1 ];
+
+/**
+ * Check if short CSS classes are enabled.
+ *
+ * Using a helper function to allow for future enhancements.
+ *
+ * @since 4.6.0
+ */
+export function usingShortCssClasses(): boolean {
+	return Boolean( getPackageConfig().shortCssClasses );
+}
+
+/**
+ * Reset all counters.
+ *
+ * @notice Mostly here for unit tests.
+ */
+export function resetCounters(): void {
+	counters = [ -1 ];
+}
+
+/**
+ * Get the next class is sequence based on:
+ * 1. Single character from SHORT_ALPHABET (prevent conflicts with JS boilerplate).
+ * 2. Incremented character from the `ALPHABET`.
+ *      1. Used once require 2+ characters.
+ *      2. Grows to 3+ characters as needed.
+ *
+ * @return {string}
+ */
+export function getNextClass(): string {
+	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
+ */
+export const getLocalIdent: GetLocalIdent = ( {resourcePath}: Resource, _: string, localName: string ): string => {
+	classes[ resourcePath ] ||= {};
+	classes[ resourcePath ][ localName ] ||= getNextClass();
+	return classes[ resourcePath ][ localName ];
+};

package/helpers/entries.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEntries = void 0;
+exports.getEntries = getEntries;
 const config_1 = require("./config");
 const package_config_1 = require("./package-config");
 const fs_1 = require("fs");
@@ -28,4 +28,3 @@ function getEntries() {
     });
     return matches;
 }
-exports.getEntries = getEntries;

package/helpers/package-config.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPackageConfig = void 0;
+exports.getPackageConfig = getPackageConfig;
 const path_1 = require("path");
 const node_fs_1 = require("node:fs");
 const workingDirectory = (0, node_fs_1.realpathSync)(process.cwd());
 const defaults = {
     brotliFiles: false,
     cssTsFiles: false,
-    es6Modules: [],
     jsPath: './',
     packageDirectory: workingDirectory,
     shortCssClasses: false,
@@ -33,7 +32,6 @@ catch (e) {
 function getPackageConfig() {
     return packageConfig;
 }
-exports.getPackageConfig = getPackageConfig;
 packageConfig.getPackageConfig = getPackageConfig;
 packageConfig.default = packageConfig;
 module.exports = packageConfig;

package/helpers/package-config.ts

@@ -12,7 +12,6 @@ export interface PackageConfig {
 	dependencies: Dependencies;
 	description?: string;
 	devDependencies: Dependencies;
-	es6Modules: string[];
 	getPackageConfig: () => PackageConfig;
 	jsPath: string;
 	license?: string;
@@ -51,7 +50,6 @@ const workingDirectory = realpathSync( process.cwd() );
 const defaults: Partial<PackageConfig> = {
 	brotliFiles: false,
 	cssTsFiles: false,
-	es6Modules: [],
 	jsPath: './',
 	packageDirectory: workingDirectory,
 	shortCssClasses: false,

package/lib/postcss-clean.js

@@ -1,10 +1,11 @@
-'use strict';
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postcss = void 0;
 /**
- * Mimic the postcss-clean plugin.
+ * Mimic the `postcss-clean` plugin.
  *
- * Override due to the plugin using version 4 of clean-css, which
- * has issues with PostCSS 7/8 and results in inconstant CSS.
+ * Override due to the plugin using version 4 of `clean-css`, which
+ * has issues with PostCSS 7/8 and results in inconsistent CSS.
  *
  * This may potentially be removed in favor of using that plugin again if
  * they change the version of PostCSS to 8 and Clean CSS to 5.
@@ -14,31 +15,28 @@
  * @link https://www.npmjs.com/package/postcss-clean
  *
  */
-const postcss = require( 'postcss' );
-const CleanCss = require( 'clean-css' );
-
-module.exports = ( opts = {} ) => {
-	const clean = new CleanCss( opts );
-
-	return {
-		postcssPlugin: 'clean',
-		OnceExit( css, {result} ) {
-			return new Promise( ( resolve, reject ) => {
-				clean.minify( css.toString(), ( err, min ) => {
-					if ( err ) {
-						return reject( new Error( err.join( '\n' ) ) );
-					}
-
-					if ( min.warnings.length > 0 ) {
-						return reject( new Error( 'postcss-clean minify failed! \n' + min.warnings.join( '\n' ) ) );
-					}
-
-					result.root = postcss.parse( min.styles );
-					resolve();
-				} );
-			} );
-		},
-	};
+const postcss_1 = require("postcss");
+// Can't use `import` due to the plugin not supporting a default export.
+const CleanCSS = require('clean-css');
+const cleaner = (opts = {}) => {
+    const clean = new CleanCSS(opts);
+    return {
+        postcssPlugin: 'clean',
+        OnceExit(css, { result }) {
+            return new Promise((resolve, reject) => {
+                clean.minify(css.toString(), (err, min) => {
+                    if (null !== err) {
+                        return reject(new Error(err.join('\n')));
+                    }
+                    if (min.warnings.length > 0) {
+                        return reject(new Error('postcss-clean minify failed! \n' + min.warnings.join('\n')));
+                    }
+                    result.root = postcss_1.default.parse(min.styles);
+                    resolve();
+                });
+            });
+        },
+    };
 };
-
-module.exports.postcss = true;
+exports.postcss = true;
+exports.default = cleaner;

package/lib/postcss-clean.ts

@@ -0,0 +1,46 @@
+/**
+ * Mimic the `postcss-clean` plugin.
+ *
+ * Override due to the plugin using version 4 of `clean-css`, which
+ * has issues with PostCSS 7/8 and results in inconsistent CSS.
+ *
+ * This may potentially be removed in favor of using that plugin again if
+ * they change the version of PostCSS to 8 and Clean CSS to 5.
+ *
+ * Decided to use this `lib` instead of maintaining another fork.
+ *
+ * @link https://www.npmjs.com/package/postcss-clean
+ *
+ */
+import postCss, {type Helpers, type Plugin, type Root} from 'postcss';
+import type {MinifierOutput, OptionsOutput, Output} from 'clean-css';
+
+// Can't use `import` due to the plugin not supporting a default export.
+const CleanCSS = require( 'clean-css' );
+
+const cleaner = ( opts: OptionsOutput = {} ): Plugin => {
+	const clean: MinifierOutput = new CleanCSS( opts );
+
+	return {
+		postcssPlugin: 'clean',
+		OnceExit( css: Root, {result}: Helpers ) {
+			return new Promise( ( resolve, reject ) => {
+				clean.minify( css.toString(), ( err, min: Output ) => {
+					if ( null !== err ) {
+						return reject( new Error( err.join( '\n' ) ) );
+					}
+
+					if ( min.warnings.length > 0 ) {
+						return reject( new Error( 'postcss-clean minify failed! \n' + min.warnings.join( '\n' ) ) );
+					}
+
+					result.root = postCss.parse( min.styles );
+					resolve();
+				} );
+			} );
+		},
+	};
+};
+
+export const postcss = true;
+export default cleaner;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.9.0",
+  "version": "10.10.0",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
   "engines": {
-    "node": ">=16.14.2"
+    "node": ">=20.11.0"
   },
   "bugs": {
     "url": "https://github.com/lipemat/js-boilerplate/issues"
@@ -17,7 +17,6 @@
   },
   "sideEffects": false,
   "keywords": [
-    "react",
     "boilerplate",
     "ES6",
     "no-config"
@@ -28,7 +27,8 @@
     "config/",
     "helpers/",
     "lib/",
-    "scripts/"
+    "scripts/",
+    "types/"
   ],
   "bin": {
     "lipemat-js-boilerplate": "bin/lipemat-js-boilerplate.js"
@@ -43,23 +43,22 @@
     "watch": "ts-node ./bin/watch.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.4.3",
+    "@babel/core": "^7.24.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx-source": "^7.12.1",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
+    "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@csstools/postcss-global-data": "2.0.0",
     "@lipemat/eslint-config": "^3.1.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@statoscope/webpack-plugin": "^5.28.2",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.2",
     "@types/babel__preset-env": "^7.9.6",
-    "@types/node": "^16",
+    "@types/clean-css": "^4.2.11",
     "@types/postcss-load-config": "^3.0.1",
     "@types/postcss-preset-env": "^7.7.0",
     "@wordpress/browserslist-config": "^5.19.0",
-    "are-you-es5": "^2.1.1",
     "babel-jest": "^29.0.0",
     "babel-loader": "9.1.2",
     "browserslist": "^4.21.9",
@@ -89,13 +88,10 @@
     "postcss-scss": "^4.0.4",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.3",
-    "update-notifier": "^4.1.3",
+    "typescript": "^5.5.2",
     "webpack": "^5.72.1",
     "webpack-assets-manifest": "^5.0.6",
     "webpack-cli": "^4.9.1",
@@ -105,11 +101,12 @@
   "devDependencies": {
     "@types/jest": "^29.5.3",
     "@types/minimist": "^1",
+    "@types/node": "~20.11.0",
     "chokidar": "^3.5.3",
     "eslint": "^8",
     "glob": "^10.3.3",
     "memfs": "^3.5.3",
     "setimmediate": "^1.0.5"
   },
-  "packageManager": "yarn@4.1.1"
+  "packageManager": "yarn@4.3.1"
 }

package/tsconfig.json

@@ -9,7 +9,8 @@
     "lib/**/*",
     "jest/**/*",
     "scripts/**/*",
-    "src/**/*"
+    "src/**/*",
+    "types/**/*",
   ],
   "compilerOptions": {
     "esModuleInterop": true,

package/types/css-loader.d.ts

@@ -0,0 +1,87 @@
+/**
+ * No public types available.
+ *
+ * @link https://webpack.js.org/loaders/css-loader/#options
+ */
+
+import type {LoaderContext} from 'webpack';
+
+export type Mode = 'local' | 'global' | 'pure' | 'icss';
+
+export type Resource = LoaderContext<{
+	resourcePath: string
+}>;
+
+export type GetLocalIdent = ( context: Resource, localIdentName: string, localName: string ) => string;
+
+export type Modules =
+	| boolean
+	| 'local'
+	| 'global'
+	| 'pure'
+	| 'icss'
+	| {
+	auto: boolean | RegExp | ( ( resourcePath: string ) => boolean );
+	mode: Mode | ( ( resourcePath: string ) => Mode );
+	localIdentName: string;
+	localIdentContext: string;
+	localIdentHashSalt: string;
+	localIdentHashFunction: string;
+	localIdentHashDigest: string;
+	localIdentRegExp: string | RegExp;
+	getLocalIdent: GetLocalIdent;
+	namedExport: boolean;
+	exportGlobals: boolean;
+	exportLocalsConvention:
+		| 'asIs'
+		| 'camelCase'
+		| 'camelCaseOnly'
+		| 'dashes'
+		| 'dashesOnly'
+		| ( ( name: string ) => string );
+	exportOnlyLocals: boolean;
+	getJSON: ( {
+		resourcePath,
+		imports,
+		exports,
+		replacements,
+	}: {
+		resourcePath: string;
+		imports: object[];
+		exports: object[];
+		replacements: object[];
+	} ) => Promise<void> | void;
+};
+
+type Base = {
+	importLoaders?: number;
+	sourceMap?: boolean;
+	url?: boolean | {
+		filter: ( url: string, resourcePath: string ) => boolean;
+	};
+	importFn?: boolean | {
+		filter: (
+			url: string,
+			media: string,
+			resourcePath: string,
+			supports?: string,
+			layer?: string,
+		) => boolean;
+	};
+	esModule?: boolean;
+};
+
+
+type CssStyleSheetExport = Base & {
+	exportType?: 'css-style-sheet' | 'string';
+	modules?: Partial<Modules> & {
+		exportLocalsConvention: 'camelCaseOnly' | 'dashesOnly'
+	};
+};
+
+type ArrayExport = Base & {
+	exportType?: 'array';
+	modules: Partial<Modules>
+};
+
+export type Config = CssStyleSheetExport | ArrayExport;

package/types/utility.d.ts

@@ -0,0 +1 @@
+export type AtLeast<T, K extends keyof T> = Partial<T> & Required<Pick<T, K>>;

package/helpers/modules.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBabelExcludeRegex = void 0;
-const babel_loader_regex_builder_1 = require("are-you-es5/dist/babel-loader-regex-builder");
-const package_config_1 = require("./package-config");
-const are_you_es5_1 = require("are-you-es5");
-/**
- * Using `are-you-es5` generate a list of top level dependencies
- * which are not ES5 safe. Create a regular expression which excludes
- * the `node_modules` directory except for any ES6 modules.
- *
- * Allows Babel to transpile any node_modules which are not available in ES5.
- *
- * @notice Only checks packages listed in package.json, not sub packages.
- *
- * @return {RegExp}
- */
-function getBabelExcludeRegex() {
-    const nonES5 = (0, are_you_es5_1.checkModules)({});
-    // Support specifying additional es5Modules in package.json.
-    const regex = (0, babel_loader_regex_builder_1.getBabelLoaderIgnoreRegex)([
-        ...nonES5.es6Modules,
-        ...(0, package_config_1.getPackageConfig)().es6Modules,
-    ]);
-    // We must strip off the leading and trailing '/'.
-    return new RegExp(regex.replace(/^\/|\/$/g, ''));
-}
-exports.getBabelExcludeRegex = getBabelExcludeRegex;

package/helpers/modules.ts

@@ -1,26 +0,0 @@
-import {getBabelLoaderIgnoreRegex} from 'are-you-es5/dist/babel-loader-regex-builder';
-import {getPackageConfig} from './package-config';
-import {checkModules} from 'are-you-es5';
-
-/**
- * Using `are-you-es5` generate a list of top level dependencies
- * which are not ES5 safe. Create a regular expression which excludes
- * the `node_modules` directory except for any ES6 modules.
- *
- * Allows Babel to transpile any node_modules which are not available in ES5.
- *
- * @notice Only checks packages listed in package.json, not sub packages.
- *
- * @return {RegExp}
- */
-export function getBabelExcludeRegex(): RegExp {
-	const nonES5 = checkModules( {} );
-	// Support specifying additional es5Modules in package.json.
-	const regex = getBabelLoaderIgnoreRegex( [
-		...nonES5.es6Modules,
-		...getPackageConfig().es6Modules,
-	] );
-
-	// We must strip off the leading and trailing '/'.
-	return new RegExp( regex.replace( /^\/|\/$/g, '' ) );
-}