@lipemat/js-boilerplate 10.6.0-beta.2 → 10.6.0-beta.3

package/bin/lipemat-js-boilerplate.js

@@ -19,6 +19,7 @@ const nodeArgs = scriptIndex > 0 ? args.slice( 0, scriptIndex ) : [];
 const TS_CONVERTED_SCRIPTS = [
 	'test',
 	'lint',
+	'validate-css-modules',
 ];
 
 switch ( script ) {
@@ -27,7 +28,8 @@ switch ( script ) {
 	case 'fix-pnp':
 	case 'lint':
 	case 'start':
-	case 'test': {
+	case 'test':
+	case 'validate-css-modules': {
 		// If the ts-node command is not available install it globally.
 		if ( spawn.sync( 'ts-node', [ '-v' ] ).error ) {
 			console.log( 'Installing ts-node globally.' );

package/config/webpack.dist.js

@@ -12,6 +12,7 @@ const {getConfig, getTsConfigFile, getBrowsersList} = require( '../helpers/confi
 const moduleHelpers = require( '../helpers/modules' );
 const config = require( '../helpers/package-config' );
 const {getEntries} = require( '../helpers/entries' );
+const {getPackageConfig} = require( '../helpers/package-config' );
 
 const postcssOptions = getConfig( 'postcss.config.js' );
 const babelOptions = getConfig( 'babel.config.js' );
@@ -135,6 +136,13 @@ module.exports = {
 				test: /\.pcss$/,
 				use: [
 					MiniCssExtractPlugin.loader,
+					{
+						loader: '@teamsupercell/typings-for-css-modules-loader',
+						options: {
+							disableLocalsExport: true,
+							prettierConfigFile: path.resolve( __dirname, '../helpers/.prettierrc.json' ),
+						},
+					},
 					{
 						loader: 'css-loader',
 						options: cssLoaderOptions,
@@ -145,7 +153,12 @@ module.exports = {
 							postcssOptions,
 						},
 					},
-				],
+				].filter( loader => {
+					if ( ! getPackageConfig().cssTsFiles ) {
+						return loader.loader !== '@teamsupercell/typings-for-css-modules-loader';
+					}
+					return true;
+				} ),
 			},
 		],
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.6.0-beta.2",
+  "version": "10.6.0-beta.3",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",

package/scripts/validate-css-modules.ts

@@ -0,0 +1,78 @@
+import webpack from 'webpack';
+import {getConfig} from '../helpers/config.js';
+import path from 'path';
+
+const help = `
+Validate CSS modules using .d.ts definition files for each CSS module.
+
+- Generates .d.ts files for each CSS module.
+- Runs \`dist\` to validate compilation using TS.
+	
+@notice PHPStorm will not support click through to CSS modules if the .pcss.d.ts files are present so this script should only be run in CI.
+
+@see .github/workflows/pull-request-lint-action.yml
+
+Usage: lipemat-js-boilerplate validate-css-modules
+
+--help, -h  Show help menu.`;
+
+const args = process.argv.slice( 3 );
+if ( '-h' === args[ 0 ] || '--help' === args[ 0 ] ) {
+	console.log( help );
+	process.exit( 0 );
+}
+
+async function validate() {
+	let webpackConfig: webpack.Configuration = getConfig( 'webpack.dist.js' );
+	webpackConfig.stats = 'errors-warnings';
+
+	// Add CSS module typings generation to webpack config.
+	webpackConfig.module?.rules?.map( ( rule: webpack.RuleSetRule ) => {
+		if ( rule.test?.toString() === /\.pcss$/.toString() ) {
+			// @ts-ignore
+			rule.use?.splice( 1, 0, {
+				loader: '@teamsupercell/typings-for-css-modules-loader',
+				options: {
+					disableLocalsExport: true,
+					prettierConfigFile: path.resolve( __dirname, '../helpers/.prettierrc.json' ),
+				},
+			} )
+		}
+		return rule;
+	} )
+
+	// Wait for generation to finish before continuing.
+	await new Promise( ( resolve, reject ) => {
+		webpack( webpackConfig ).run( ( err, stats ) => {
+			if ( err ) {
+				reject( err );
+			}
+
+			if ( stats && stats.hasErrors() ) {
+				console.error( stats.toString( webpackConfig.stats ) );
+				process.exit( 1 );
+			}
+			resolve( stats );
+		} );
+	} );
+
+	console.log( '>>> CSS Module definitions generated.' );
+
+	// A fresh config for CSS validation.
+	webpackConfig = getConfig( 'webpack.dist.js' );
+	webpackConfig.stats = 'errors-warnings';
+	webpack( webpackConfig ).run( ( err, stats ) => {
+		if ( err ) {
+			throw err;
+		}
+
+		if ( stats && stats.hasErrors() ) {
+			console.error( stats.toString( webpackConfig.stats ) );
+			process.exit( 1 );
+		}
+		console.log( '>>> CSS validation completed.' );
+	} );
+}
+
+
+validate();