@lipemat/js-boilerplate 10.13.0 → 10.14.0-beta.1

package/bin/watch.ts

@@ -5,6 +5,7 @@ import chalk from 'chalk';
 const toWatch = [
 	'config/*.ts',
 	'helpers/*.ts',
+	'lib/*.ts',
 ];
 
 /**
@@ -12,15 +13,15 @@ const toWatch = [
  */
 chokidar.watch( toWatch, {ignored: /(^|[\/\\])\../} )
 	.on( 'change', path => {
-		console.log( chalk.yellowBright( '[watch]' ), `${path} changed` );
+		console.debug( chalk.yellowBright( '[watch]' ), `${path} changed` );
 		exec( 'yarn run build', ( err, stdout ) => {
 			if ( err ) {
 				console.error( chalk.red( stdout ) );
 			} else {
-				console.log( stdout );
+				console.debug( stdout );
 			}
 		} );
 	} )
 	.once( 'ready', () => {
-		console.log( chalk.greenBright( '[watch]' ), 'Watching for changes…' );
+		console.debug( chalk.greenBright( '[watch]' ), 'Watching for changes…' );
 	} )

package/config/postcss.config.js

@@ -31,7 +31,7 @@ if ('object' === typeof presetEnv.features && includedPlugins.includes('postcss-
         /**
          * Fixes `focus-visible` feature for CSS modules.
          *
-         * Only needed if our browsers list includes non-supported browsers
+         * Only needed if our browser list includes non-supported browsers
          * such as Safari 15.3 and below.
          *
          * Requires `focus-visible` polyfill to be loaded externally.

package/config/postcss.config.ts

@@ -43,7 +43,7 @@ if ( 'object' === typeof presetEnv.features && includedPlugins.includes( 'postcs
 		/**
 		 * Fixes `focus-visible` feature for CSS modules.
 		 *
-		 * Only needed if our browsers list includes non-supported browsers
+		 * Only needed if our browser list includes non-supported browsers
 		 * such as Safari 15.3 and below.
 		 *
 		 * Requires `focus-visible` polyfill to be loaded externally.

package/config/webpack.dev.js

@@ -83,12 +83,15 @@ const config = {
                 test: /\.pcss$/,
                 use: [
                     'style-loader',
+                    {
+                        loader: path_1.default.resolve(__dirname, '../lib/format-css-module-typings.ts'),
+                    },
                     {
                         loader: '@teamsupercell/typings-for-css-modules-loader',
                         options: {
                             banner: '// Autogenerated by typings-for-css-modules-loader.',
                             disableLocalsExport: true,
-                            prettierConfigFile: path_1.default.resolve(__dirname, '../helpers/.prettierrc.json'),
+                            formatter: 'none',
                         },
                     },
                     {

package/config/webpack.dev.ts

@@ -86,12 +86,15 @@ const config: WebpackConfig = {
 				test: /\.pcss$/,
 				use: [
 					'style-loader',
+					{
+						loader: path.resolve( __dirname, '../lib/format-css-module-typings.ts' ),
+					},
 					{
 						loader: '@teamsupercell/typings-for-css-modules-loader',
 						options: {
 							banner: '// Autogenerated by typings-for-css-modules-loader.',
 							disableLocalsExport: true,
-							prettierConfigFile: path.resolve( __dirname, '../helpers/.prettierrc.json' ),
+							formatter: 'none',
 						},
 					},
 					{

package/config/webpack.dist.js

@@ -142,12 +142,15 @@ const config = {
                 test: /\.pcss$/,
                 use: [
                     mini_css_extract_plugin_1.default.loader,
+                    {
+                        loader: path_1.default.resolve(__dirname, '../lib/format-css-module-typings.ts'),
+                    },
                     {
                         loader: '@teamsupercell/typings-for-css-modules-loader',
                         options: {
                             banner: '// Autogenerated by typings-for-css-modules-loader.',
                             disableLocalsExport: true,
-                            prettierConfigFile: path_1.default.resolve(__dirname, '../helpers/.prettierrc.json'),
+                            formatter: 'none',
                         },
                     },
                     {

package/config/webpack.dist.ts

@@ -145,12 +145,15 @@ const config: WebpackConfig = {
 				test: /\.pcss$/,
 				use: [
 					MiniCssExtractPlugin.loader,
+					{
+						loader: path.resolve( __dirname, '../lib/format-css-module-typings.ts' ),
+					},
 					{
 						loader: '@teamsupercell/typings-for-css-modules-loader',
 						options: {
 							banner: '// Autogenerated by typings-for-css-modules-loader.',
 							disableLocalsExport: true,
-							prettierConfigFile: path.resolve( __dirname, '../helpers/.prettierrc.json' ),
+							formatter: 'none',
 						},
 					},
 					{

package/lib/format-css-module-typings.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+/**
+ * Formats CSS Module typings files.
+ *
+ * This loader reads the `.pcss.d.ts` file, formats its content, and writes it back.
+ * It ensures that the typings are consistent and follow a specific style.
+ *
+ * Replaces the prettier library with a custom formatting function to avoid
+ * unnecessary dependencies and unplugging issues.
+ *
+ * @link https://webpack.js.org/api/loaders/
+ *
+ * @param {string} content - The content of the CSS Module file.
+ * @param {...[]}  args    - Additional arguments passed to the loader.
+ */
+function formatCssModuleTypings(content, ...args) {
+    try {
+        const resourcePath = this.resourcePath;
+        const typingsPath = resourcePath.replace(/\.pcss$/, '.pcss.d.ts');
+        if (!(0, fs_1.existsSync)(typingsPath)) {
+            this.callback(null, content, ...args);
+            return;
+        }
+        let typingsContent = (0, fs_1.readFileSync)(typingsPath, 'utf8');
+        typingsContent = formatDefinitionContent(typingsContent);
+        (0, fs_1.writeFileSync)(typingsPath, typingsContent);
+        this.callback(null, content, ...args);
+    }
+    catch (error) {
+        this.emitError(error);
+    }
+}
+/**
+ * Formats TypeScript content for CSS Module typings.
+ *
+ * @param {string} content - The content of the TypeScript file to format.
+ * @return {string} - The formatted TypeScript content.
+ */
+function formatDefinitionContent(content) {
+    let formatted = content;
+    formatted = formatted.replace(/: string; /g, ': string;');
+    formatted = formatted.replace(/^([ \t]*)'([\w-]+)':/gm, function (match, indent, key) {
+        if (-1 === key.indexOf('-')) {
+            return indent + key + ':';
+        }
+        return indent + '\'' + key + '\':';
+    });
+    formatted = formatted.replace(/^( {2})+/gm, function (match) {
+        const tabCount = match.length / 2;
+        return '\t'.repeat(tabCount);
+    });
+    formatted = formatted.replace(/\s+$/gm, '');
+    formatted = formatted.replace(/^}\ndeclare/gm, '}\n\ndeclare');
+    formatted = formatted.replace(/;$\nexport/gm, ';\n\nexport');
+    return formatted.trim() + '\n';
+}
+module.exports = formatCssModuleTypings;
+exports.default = formatCssModuleTypings;

package/lib/format-css-module-typings.ts

@@ -0,0 +1,70 @@
+import type {LoaderContext} from 'webpack';
+import {existsSync, readFileSync, writeFileSync} from 'fs';
+
+/**
+ * Formats CSS Module typings files.
+ *
+ * This loader reads the `.pcss.d.ts` file, formats its content, and writes it back.
+ * It ensures that the typings are consistent and follow a specific style.
+ *
+ * Replaces the prettier library with a custom formatting function to avoid
+ * unnecessary dependencies and unplugging issues.
+ *
+ * @link https://webpack.js.org/api/loaders/
+ *
+ * @param {string} content - The content of the CSS Module file.
+ * @param {...[]}  args    - Additional arguments passed to the loader.
+ */
+
+function formatCssModuleTypings( this: LoaderContext<Record<string, never>>, content: string, ...args: [] ): void {
+	try {
+		const resourcePath = this.resourcePath;
+		const typingsPath = resourcePath.replace( /\.pcss$/, '.pcss.d.ts' );
+
+		if ( ! existsSync( typingsPath ) ) {
+			this.callback( null, content, ...args );
+			return;
+		}
+
+		let typingsContent = readFileSync( typingsPath, 'utf8' );
+		typingsContent = formatDefinitionContent( typingsContent );
+
+		writeFileSync( typingsPath, typingsContent );
+
+		this.callback( null, content, ...args );
+	} catch ( error ) {
+		this.emitError( error as Error );
+	}
+}
+
+/**
+ * Formats TypeScript content for CSS Module typings.
+ *
+ * @param {string} content - The content of the TypeScript file to format.
+ * @return {string} - The formatted TypeScript content.
+ */
+function formatDefinitionContent( content: string ): string {
+	let formatted = content;
+
+	formatted = formatted.replace( /: string; /g, ': string;' );
+	formatted = formatted.replace( /^([ \t]*)'([\w-]+)':/gm, function( match, indent, key ) {
+		if ( -1 === key.indexOf( '-' ) ) {
+			return indent + key + ':';
+		}
+		return indent + '\'' + key + '\':';
+	} );
+
+	formatted = formatted.replace( /^( {2})+/gm, function( match ) {
+		const tabCount = match.length / 2;
+		return '\t'.repeat( tabCount );
+	} );
+	formatted = formatted.replace( /\s+$/gm, '' );
+
+	formatted = formatted.replace( /^}\ndeclare/gm, '}\n\ndeclare' );
+	formatted = formatted.replace( /;$\nexport/gm, ';\n\nexport' );
+
+	return formatted.trim() + '\n';
+}
+
+module.exports = formatCssModuleTypings;
+export default formatCssModuleTypings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.13.0",
+  "version": "10.14.0-beta.1",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -85,12 +85,11 @@
     "postcss-preset-env": "^7.8.3",
     "postcss-scss": "^4.0.4",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.1.1",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.5.2",
-    "webpack": "^5.99.9",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.0",
     "webpack-assets-manifest": "^6.2.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2",

package/scripts/analyze.ts

@@ -43,7 +43,7 @@ function analyze() {
 	// Use the default webpack stats configuration.
 	delete webpackConfig.stats;
 
-	webpack( webpackConfig ).run( ( err, stats ) => {
+	webpack( webpackConfig )?.run( ( err, stats ) => {
 		if ( err ) {
 			throw err;
 		}

package/scripts/dist.ts

@@ -1,12 +1,15 @@
 import {getConfig} from '../helpers/config';
-import webpack, {type Configuration, type Stats} from 'webpack';
+import webpack, {type Compiler, type Configuration, type Stats} from 'webpack';
 
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 
 const config: Configuration = getConfig( 'webpack.dist' );
 
-const compiler = webpack( config );
+const compiler: Compiler | null = webpack( config );
+if ( null === compiler ) {
+	throw new Error( 'Failed to create the webpack compiler.' );
+}
 compiler.run( ( err: Error | null, stats: Stats ) => {
 	if ( err ) {
 		throw err;

package/scripts/validate-css-modules.ts

@@ -14,11 +14,11 @@ Validate CSS modules using .d.ts definition files for each CSS module.
 
 Usage: lipemat-js-boilerplate validate-css-modules
 
---help, -h Show help menu.`;
+--help, -h Show the help menu.`;
 
 const args = process.argv.slice( 3 );
 if ( '-h' === args[ 0 ] || '--help' === args[ 0 ] ) {
-	console.log( help );
+	console.debug( help );
 	process.exit( 0 );
 }
 
@@ -41,9 +41,9 @@ async function validate() {
 		return rule;
 	} )
 
-	// Wait for generation to finish before continuing.
+	// Wait for the generation to finish before continuing.
 	await new Promise( ( resolve, reject ) => {
-		webpack( webpackConfig ).run( ( err, stats ) => {
+		webpack( webpackConfig )?.run( ( err, stats ) => {
 			if ( err ) {
 				reject( err );
 			}
@@ -56,12 +56,12 @@ async function validate() {
 		} );
 	} );
 
-	console.log( '>>> CSS Module definitions generated.' );
+	console.debug( '>>> CSS Module definitions generated.' );
 
 	// A fresh config for CSS validation.
 	webpackConfig = getConfig( 'webpack.dist' );
 	webpackConfig.stats = 'errors-warnings';
-	webpack( webpackConfig ).run( ( err, stats ) => {
+	webpack( webpackConfig )?.run( ( err, stats ) => {
 		if ( err ) {
 			throw err;
 		}
@@ -70,7 +70,7 @@ async function validate() {
 			console.error( stats.toString( webpackConfig.stats ) );
 			process.exit( 1 );
 		}
-		console.log( '>>> CSS validation completed.' );
+		console.debug( '>>> CSS validation completed.' );
 	} );
 }