@lipemat/js-boilerplate 10.3.1 → 10.4.0-beta.1

package/bin/lipemat-js-boilerplate.js

@@ -22,13 +22,24 @@ switch ( script ) {
 	case 'lint':
 	case 'start':
 	case 'test': {
+		// If the ts-node command is not available install it globally.
+		if ( spawn.sync( 'ts-node', [ '-v' ] ).error ) {
+			console.log( 'Installing ts-node globally.' );
+			spawn.sync( 'npm', [ 'install', '-g', 'ts-node' ] );
+		}
+
+		// Run the script.
 		const result = spawn.sync(
-			'node',
+			'ts-node',
 			nodeArgs
 				.concat( require.resolve( '../scripts/' + script ) )
 				.concat( args.slice( scriptIndex + 1 ) ),
-			{stdio: 'inherit'},
+			{stdio: 'inherit'}
 		);
+		if ( result.error ) {
+			console.log( result.error );
+			process.exit( 1 );
+		}
 		if ( result.signal ) {
 			if ( 'SIGKILL' === result.signal ) {
 				console.log(

package/config/postcss.config.js

@@ -4,29 +4,37 @@ const postcssPresetEnv = require( 'postcss-preset-env' );
 const {getBrowsersList} = require( '../helpers/config' );
 const packageConfig = require( '../helpers/package-config' );
 
+/**
+ * Base postcss-presets-env config.
+ *
+ */
 const presetEnv = {
 	browsers: getBrowsersList(),
-	features: {
+	features: {},
+};
+
+// Get a list of included postcss plugins based no the browsers list.
+const includedPlugins = postcssPresetEnv( presetEnv )
+	.plugins
+	.map( plugin => plugin.postcssPlugin );
+
+
+if ( includedPlugins.includes( 'postcss-focus-visible' ) ) {
+	presetEnv.features[ 'focus-visible-pseudo-class' ] = {
 		/**
-		 * Fixes `focus-visible` feature for CSS modules (included by preset-env anywhere
-		 * Safari is supported).
-		 *
-		 * Requires `focus-visible` polyfill to be loaded externally to support Safari.
-		 *
-		 * @link https://caniuse.com/css-focus-visible
+		 * Fixes `focus-visible` feature for CSS modules.
 		 *
-		 * May be imported directly into the index.js for sites, which loads JS app
-		 * on every page.
-		 * @link https://github.com/WICG/focus-visible
+		 * Only needed if our browsers list includes non-supported browsers
+		 * such as Safari 15.3 and below.
 		 *
+		 * Requires `focus-visible` polyfill to be loaded externally.
 		 * Most will often need it site wide on pages, which do and don't use the JS app.
+		 *
 		 * @link https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js
 		 */
-		'focus-visible-pseudo-class': {
-			replaceWith: ':global(.focus-visible)',
-		},
-	},
-};
+		replaceWith: ':global(.focus-visible)',
+	};
+}
 
 /**
  * Provide CSS properties and media queries to all postcss plugins.
@@ -78,6 +86,7 @@ if ( 'production' === process.env.NODE_ENV ) {
 		level: 2,
 	} ) );
 } else {
+	config.plugins.push( require( '../lib/postcss-pretty' ) );
 	config.sourceMap = true;
 }
 

package/config/tsconfig.json

@@ -5,6 +5,7 @@
   "display": "JS Boilerplate",
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
     "lib": [
       "dom",

package/config/webpack.dist.js

@@ -6,8 +6,8 @@ const {CleanWebpackPlugin} = require( 'clean-webpack-plugin' );
 const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
 const {SubresourceIntegrityPlugin} = require( 'webpack-subresource-integrity' );
 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' );

package/lib/postcss-pretty.ts

@@ -0,0 +1,65 @@
+'use strict';
+
+/**
+ * Custom PostCSS plugin to format CSS output.
+ *
+ * - Fix indentation.
+ *
+ * Inspired by postcss-prettify.
+ */
+
+
+import {Container, Root} from 'postcss';
+import {ChildNode} from 'postcss/lib/node';
+import {AtRuleRaws} from 'postcss/lib/at-rule';
+
+/**
+ * Get the depth of the current node.
+ */
+function getDepth( node: ChildNode ): number {
+	let depth = 0;
+	let parent = node.parent;
+	if ( 'undefined' === typeof parent ) {
+		return 0;
+	}
+	while ( parent && parent.type !== 'root' ) {
+		depth += 1;
+		parent = parent.parent as Container<ChildNode> | undefined;
+	}
+	return depth;
+}
+
+function indent( node: ChildNode, depth: number, position: keyof AtRuleRaws = 'before' ) {
+	if ( node.raws[ position ] === undefined ) {
+		return;
+	}
+	const indentStr = '\t'.repeat( depth );
+	if ( 'string' === typeof node.raws[ position ] ) {
+		const content = node.raws[ position ] as string;
+		node.raws[ position ] = content.trim().concat( `\n${indentStr}` );
+	}
+}
+
+function processCss( node: ChildNode ) {
+	const nodeDepth = getDepth( node );
+	indent( node, nodeDepth, 'before' );
+	indent( node, nodeDepth, 'after' );
+
+	if ( 0 === nodeDepth ) {
+		node.raws.before += '\n';
+	}
+}
+
+module.exports = () => {
+	return {
+		postcssPlugin: 'js-boilerplate/postcss-pretty',
+		OnceExit( css: Root ) {
+			css.walk( processCss );
+			if ( css.first !== undefined && css.first.raws !== undefined ) {
+				css.first.raws.before = '';
+			}
+		},
+	};
+};
+
+module.exports.postcss = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.3.1",
+  "version": "10.4.0-beta.1",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -44,8 +44,9 @@
     "@babel/preset-typescript": "^7.12.7",
     "@csstools/postcss-global-data": "2.0.0",
     "@lipemat/css-mqpacker": "^9.0.0",
-    "@lipemat/eslint-config": "^3.0.1",
+    "@lipemat/eslint-config": "^3.1.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@types/node": "^16",
     "@wordpress/browserslist-config": "^5.19.0",
     "are-you-es5": "^2.1.1",
     "babel-jest": "^29.0.0",
@@ -85,7 +86,11 @@
     "webpack-subresource-integrity": "^5.1.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.3"
+    "@types/jest": "^29.5.3",
+    "eslint": "^8",
+    "glob": "^10.3.3",
+    "memfs": "^3.5.3",
+    "setimmediate": "^1.0.5"
   },
-  "packageManager": "yarn@3.6.0"
+  "packageManager": "yarn@3.6.1"
 }

package/scripts/fix-pnp.js

@@ -2,17 +2,21 @@
 
 /**
  * When using PNP loose mode, we get warnings for every module
- * we access which is not strictly declared.
+ * we access, not strictly declared.
  *
- * There is no built in way in Yarn to disable the warnings.
- * This script modifies the generate .pnp.js file to suppress
+ * No built-in way in Yarn to disable the warnings.
+ * This script modifies to generate .pnp.js file to suppress
  * all loose module warnings unless the environmental variable
  * it set to display all warnings.
  *
- * @example "scripts": {
-    "postinstall": "lipemat-js-boilerplate fix-pnp"
-  },
- *
+ * @example
+ * ```json
+ * {
+ *      "scripts": {
+ *           "postinstall": "lipemat-js-boilerplate fix-pnp"
+ *      }
+ *  }
+ * ```
  */
 
 const fs = require( 'fs' );
@@ -20,6 +24,7 @@ const fs = require( 'fs' );
 const PNP_FILES = [
 	'./.pnp.js',
 	'./.pnp.cjs',
+	'./.pnp.mjs',
 ];
 
 PNP_FILES.forEach( PNP_FILE => {