@lipemat/js-boilerplate-shared 0.0.1

package/lib/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@lipemat/js-boilerplate",
+  "version": "11.0.0-alpha.0",
+  "description": "Dependencies and scripts for a no config JavaScript app",
+  "author": "Mat Lipe",
+  "license": "MIT",
+  "jsPath": "./",
+  "type": "module",
+  "engines": {
+    "node": ">=22.21.1"
+  },
+  "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": [
+    "boilerplate",
+    "ES6",
+    "no-config"
+  ],
+  "files": [
+    "tsconfig.json",
+    "bin/",
+    "config/",
+    "helpers/",
+    "lib/",
+    "scripts/",
+    "types/"
+  ],
+  "bin": {
+    "lipemat-js-boilerplate": "bin/lipemat-js-boilerplate.js"
+  },
+  "scripts": {
+    "browserslist": "lipemat-js-boilerplate browserslist",
+    "build": "tsc --project ./bin",
+    "prepublishOnly": "yarn run build",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --config=jest/jest.config.ts",
+    "validate-ts": "tsc --noEmit",
+    "watch": "tsc --project ./bin --watch"
+  },
+  "dependencies": {
+    "@babel/core": "^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/js-boilerplate-shared": "link:../js-boilerplate-shared",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
+    "@statoscope/webpack-plugin": "^5.29.0",
+    "@types/babel__preset-env": "^7.9.6",
+    "@types/clean-css": "^4.2.11",
+    "@types/postcss-load-config": "^3.0.1",
+    "@types/postcss-preset-env": "^7.7.0",
+    "@wordpress/browserslist-config": "^6.19.0",
+    "babel-jest": "^30.2.0",
+    "babel-loader": "^10.0.0",
+    "browserslist": "^4.28.1",
+    "chalk": "^4.0",
+    "clean-css": "^5.3.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
+    "core-js": "^3.33.1",
+    "cross-spawn": "^7.0.6",
+    "css-loader": "6.7.1",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "minimist": "^1.2.8",
+    "postcss": "^8.4.47",
+    "postcss-color-mod-function": "^4.1.1",
+    "postcss-custom-media": "^8.0.1",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.8.3",
+    "postcss-scss": "^4.0.4",
+    "postcss-sort-media-queries": "^5.2.0",
+    "react-refresh": "^0.17.0",
+    "style-loader": "^3.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.9.3",
+    "webpack": "^5.101.0",
+    "webpack-assets-manifest": "^6.2.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-subresource-integrity": "^5.1.0"
+  },
+  "devDependencies": {
+    "@jest/globals": "^30.2.0",
+    "@lipemat/eslint-config": "^5.1.4",
+    "@types/jest": "^29.5.3",
+    "@types/minimist": "^1",
+    "@types/node": "^22.19.3",
+    "@types/react": "^18.2.64",
+    "chokidar": "^3.5.3",
+    "eslint": "^9",
+    "glob": "^11.1.0",
+    "jest": "^30.2.0",
+    "memfs": "^3.5.3",
+    "react": "^18.2.0",
+    "setimmediate": "^1.0.5"
+  },
+  "resolutions": {
+    "type-fest": "^4.41.0"
+  },
+  "packageManager": "yarn@4.12.0"
+}

package/lib/postcss-clean.js

@@ -0,0 +1,38 @@
+/**
+ * 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, {} from 'postcss';
+import CleanCSS, {} from '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.parse(min.styles);
+                    resolve();
+                });
+            });
+        },
+    };
+};
+export const postcss = true;
+export default cleaner;
+//# sourceMappingURL=postcss-clean.js.map

package/lib/postcss-clean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"postcss-clean.js","sourceRoot":"","sources":["postcss-clean.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,OAAO,EAAE,EAAsC,MAAM,SAAS,CAAC;AACtE,OAAO,QAAQ,EAAE,EAAsD,MAAM,WAAW,CAAC;AAEzF,MAAM,OAAO,GAAG,CAAE,OAAsB,EAAE,EAAW,EAAE;IACtD,MAAM,KAAK,GAAmB,IAAI,QAAQ,CAAE,IAAI,CAAE,CAAC;IAEnD,OAAO;QACN,aAAa,EAAE,OAAO;QACtB,QAAQ,CAAE,GAAS,EAAE,EAAC,MAAM,EAAU;YACrC,OAAO,IAAI,OAAO,CAAE,CAAE,OAAO,EAAE,MAAM,EAAG,EAAE;gBACzC,KAAK,CAAC,MAAM,CAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAE,GAAG,EAAE,GAAW,EAAG,EAAE;oBACpD,IAAK,IAAI,KAAK,GAAG,EAAG,CAAC;wBACpB,OAAO,MAAM,CAAE,IAAI,KAAK,CAAE,GAAG,CAAC,IAAI,CAAE,IAAI,CAAE,CAAE,CAAE,CAAC;oBAChD,CAAC;oBAED,IAAK,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAG,CAAC;wBAC/B,OAAO,MAAM,CAAE,IAAI,KAAK,CAAE,iCAAiC,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAE,IAAI,CAAE,CAAE,CAAE,CAAC;oBAC7F,CAAC;oBAED,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAE,GAAG,CAAC,MAAM,CAAE,CAAC;oBAC1C,OAAO,EAAE,CAAC;gBACX,CAAC,CAAE,CAAC;YACL,CAAC,CAAE,CAAC;QACL,CAAC;KACD,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC;AAC5B,eAAe,OAAO,CAAC"}

package/lib/postcss-clean.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 CleanCSS, {type MinifierOutput, type OptionsOutput, type Output} from '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/lib/postcss-pretty.js

@@ -0,0 +1,50 @@
+'use strict';
+/**
+ * Get the depth of the current node.
+ */
+function getDepth(node) {
+    let depth = 0;
+    let parent = node.parent;
+    if ('undefined' === typeof parent) {
+        return 0;
+    }
+    while (parent && parent.type !== 'root') {
+        depth += 1;
+        parent = parent.parent;
+    }
+    return depth;
+}
+function indent(node, depth, position = 'before') {
+    if (node.raws[position] === undefined) {
+        return;
+    }
+    const indentStr = '\t'.repeat(depth);
+    if ('string' === typeof node.raws[position]) {
+        const content = node.raws[position];
+        node.raws[position] = content.trim().concat(`\n${indentStr}`);
+    }
+}
+function processCss(node) {
+    const nodeDepth = getDepth(node);
+    indent(node, nodeDepth, 'before');
+    indent(node, nodeDepth, 'after');
+    if (0 === nodeDepth) {
+        if ('undefined' === typeof node.raws.before) {
+            node.raws.before = '\n\n';
+        }
+        else {
+            node.raws.before += '\n';
+        }
+    }
+}
+const plugin = {
+    postcssPlugin: 'js-boilerplate/postcss-pretty',
+    OnceExit(css) {
+        css.walk(processCss);
+        if (css.first !== undefined && css.first.raws !== undefined) {
+            css.first.raws.before = '';
+        }
+    },
+};
+export default plugin;
+//# sourceMappingURL=postcss-pretty.js.map

package/lib/postcss-pretty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"postcss-pretty.js","sourceRoot":"","sources":["postcss-pretty.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAeb;;GAEG;AACH,SAAS,QAAQ,CAAE,IAAe;IACjC,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IACzB,IAAK,WAAW,KAAK,OAAO,MAAM,EAAG,CAAC;QACrC,OAAO,CAAC,CAAC;IACV,CAAC;IACD,OAAQ,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,EAAG,CAAC;QAC3C,KAAK,IAAI,CAAC,CAAC;QACX,MAAM,GAAG,MAAM,CAAC,MAA0C,CAAC;IAC5D,CAAC;IACD,OAAO,KAAK,CAAC;AACd,CAAC;AAED,SAAS,MAAM,CAAE,IAAe,EAAE,KAAa,EAAE,WAA6B,QAAQ;IACrF,IAAK,IAAI,CAAC,IAAI,CAAE,QAAQ,CAAE,KAAK,SAAS,EAAG,CAAC;QAC3C,OAAO;IACR,CAAC;IACD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAE,KAAK,CAAE,CAAC;IACvC,IAAK,QAAQ,KAAK,OAAO,IAAI,CAAC,IAAI,CAAE,QAAQ,CAAE,EAAG,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAE,QAAQ,CAAY,CAAC;QAChD,IAAI,CAAC,IAAI,CAAE,QAAQ,CAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAE,KAAK,SAAS,EAAE,CAAE,CAAC;IACnE,CAAC;AACF,CAAC;AAED,SAAS,UAAU,CAAE,IAAe;IACnC,MAAM,SAAS,GAAG,QAAQ,CAAE,IAAI,CAAE,CAAC;IACnC,MAAM,CAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAE,CAAC;IACpC,MAAM,CAAE,IAAI,EAAE,SAAS,EAAE,OAAO,CAAE,CAAC;IAEnC,IAAK,CAAC,KAAK,SAAS,EAAG,CAAC;QACvB,IAAK,WAAW,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,EAAG,CAAC;YAC/C,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAC3B,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC;QAC1B,CAAC;IACF,CAAC;AACF,CAAC;AAED,MAAM,MAAM,GAAW;IACtB,aAAa,EAAE,+BAA+B;IAC9C,QAAQ,CAAE,GAAS;QAClB,GAAG,CAAC,IAAI,CAAE,UAAU,CAAE,CAAC;QACvB,IAAK,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,EAAG,CAAC;YAC/D,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAC5B,CAAC;IACF,CAAC;CACD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/postcss-pretty.ts

@@ -0,0 +1,67 @@
+'use strict';
+
+/**
+ * Custom PostCSS plugin to format CSS output.
+ *
+ * - Fix indentation.
+ *
+ * Inspired by postcss-prettify.
+ */
+
+
+import type {Container, Plugin, Root} from 'postcss';
+import type {ChildNode} from 'postcss/lib/node';
+import type {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 ) {
+		if ( 'undefined' === typeof node.raws.before ) {
+			node.raws.before = '\n\n';
+		} else {
+			node.raws.before += '\n';
+		}
+	}
+}
+
+const plugin: Plugin = {
+	postcssPlugin: 'js-boilerplate/postcss-pretty',
+	OnceExit( css: Root ) {
+		css.walk( processCss );
+		if ( css.first !== undefined && css.first.raws !== undefined ) {
+			css.first.raws.before = '';
+		}
+	},
+};
+
+export default plugin;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@lipemat/js-boilerplate-shared",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "Shared utilities for all @lipemat boilerplate packages",
+  "engines": {
+    "node": ">=22.21.0"
+  },
+  "type": "module",
+  "files": [
+    "config",
+    "helpers",
+    "lib",
+    "types"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lipemat/js-boilerplate-shared.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lipemat/js-boilerplate-shared/issues"
+  },
+  "homepage": "https://github.com/lipemat/js-boilerplate-shared#readme",
+  "scripts": {
+    "build": "tsc --project ./bin",
+    "lint": "eslint --fix --cache",
+    "prepublishOnly": "yarn run build",
+    "test": "jest --config ./jest/jest.config.ts",
+    "validate-ts": "tsc --noEmit",
+    "watch": "tsc --project ./bin --watch"
+  },
+  "dependencies": {
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@csstools/postcss-global-data": "2.0.0",
+    "@types/clean-css": "^4.2.11",
+    "@types/postcss-load-config": "^3.0.1",
+    "@types/postcss-preset-env": "^7.7.0",
+    "@types/webpack": "^5.28.5",
+    "babel-plugin-transform-import-meta": "^2.3.3",
+    "browserslist": "^4.28.1",
+    "clean-css": "^5.3.3",
+    "core-js": "^3.33.1",
+    "glob": "^13.0.0",
+    "postcss": "^8.4.47",
+    "postcss-color-mod-function": "^4.1.1",
+    "postcss-custom-media": "^8.0.1",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.8.3",
+    "postcss-scss": "^4.0.4",
+    "postcss-sort-media-queries": "^5.2.0"
+  },
+  "devDependencies": {
+    "@jest/types": "^30.2.0",
+    "@lipemat/eslint-config": "file:../eslint-config",
+    "@types/babel__preset-env": "^7",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.19.3",
+    "eslint": "^9",
+    "jest": "^30.2.0",
+    "typescript": "^5.9.3",
+    "webpack": "^5.101.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "packageManager": "yarn@4.12.0"
+}

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,6 @@
+/**
+ * Require a minimum of the specified properties on a type.
+ *
+ * @example AtLeast<Post, 'author' | 'post_title'> - post_title and author will be required, the rest optional.
+ */
+export type AtLeast<T, K extends keyof T> = Partial<T> & Required<Pick<T, K>>;