Theme: Generate default ramps at compile time

.npmpackagejsonlintrc.json

@@ -8,7 +8,6 @@
 				"requireEndingPeriod": true
 			}
 		],
-		"prefer-no-devDependencies": "error",
 		"require-publishConfig": "error",
 		"require-repository-directory": "error",
 		"valid-values-author": [ "error", [ "The WordPress Contributors" ] ],
@@ -26,16 +25,14 @@
 			"patterns": [ "./package.json" ],
 			"rules": {
 				"require-publishConfig": "off",
-				"require-repository-directory": "off",
-				"prefer-no-devDependencies": "off"
+				"require-repository-directory": "off"
 			}
 		},
 		{
 			"patterns": [ "./platform-docs/package.json" ],
 			"rules": {
 				"require-publishConfig": "off",
-				"require-repository-directory": "off",
-				"prefer-no-devDependencies": "off"
+				"require-repository-directory": "off"
 			}
 		}
 	]

bin/validate-tsconfig.mjs

@@ -3,10 +3,9 @@
 /**
  * External dependencies
  */
-// @ts-ignore
 import glob from 'glob';
 import { dirname, basename } from 'path';
-import stripJsonComments from 'strip-json-comments';
+import JSONC from 'jsonc-parser';
 import { readFileSync } from 'fs';
 
 let hasErrors = false;
@@ -40,22 +39,12 @@ for ( const packageName of packagesWithTypes ) {
 		);
 		throw e;
 	}
-	let tsconfigJson;
-	try {
-		tsconfigJson = JSON.parse(
-			stripJsonComments(
-				readFileSync(
-					`packages/${ packageName }/tsconfig.json`,
-					'utf8'
-				)
-			)
-		);
-	} catch ( e ) {
-		console.error(
-			`Error parsing tsconfig.json for package ${ packageName }`
-		);
-		throw e;
-	}
+
+	const tsconfigs = glob.sync( `packages/${ packageName }/tsconfig*.json` );
+	const references = tsconfigs.flatMap(
+		( path ) => JSONC.parse( readFileSync( path, 'utf8' ) ).references ?? []
+	);
+
 	if ( packageJson.dependencies ) {
 		for ( const dependency of Object.keys( packageJson.dependencies ) ) {
 			if ( dependency.startsWith( '@wordpress/' ) ) {
@@ -64,7 +53,7 @@ for ( const packageName of packagesWithTypes ) {
 				);
 				if (
 					packagesWithTypes.includes( dependencyPackageName ) &&
-					! tsconfigJson.references?.some(
+					! references.some(
 						( reference ) =>
 							reference.path === `../${ dependencyPackageName }`
 					)

package.json

@@ -132,6 +132,7 @@
 		"jest-message-util": "29.6.2",
 		"jest-watch-typeahead": "2.2.2",
 		"json2md": "2.0.1",
+		"jsonc-parser": "3.3.1",
 		"lerna": "8.1.9",
 		"lint-staged": "10.0.2",
 		"make-dir": "3.0.0",
@@ -168,7 +169,6 @@
 		"sprintf-js": "1.1.1",
 		"storybook": "8.4.7",
 		"storybook-source-link": "2.0.9",
-		"strip-json-comments": "5.0.0",
 		"style-loader": "3.2.1",
 		"stylelint-plugin-logical-css": "^1.2.3",
 		"terser": "5.32.0",

packages/theme/bin/generate-default-ramps/index.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_SEED_COLORS,
+	buildBgRamp,
+	buildAccentRamp,
+} from '../../src/color-ramps/index.ts';
+
+const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
+const accentRamps = Object.fromEntries(
+	[ ...Object.entries( DEFAULT_SEED_COLORS ) ]
+		.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
+		.map( ( [ scaleName, seed ] ) => [
+			scaleName,
+			buildAccentRamp( seed, bgRamp ),
+		] )
+);
+
+const ramps = { bg: bgRamp, ...accentRamps };
+
+const outputPath = join(
+	import.meta.dirname,
+	'../../src/color-ramps/lib/default-ramps.ts'
+);
+
+const content = `
+/**
+ * Internal dependencies
+ */
+import type { RampResult } from './types';
+import type { DEFAULT_SEED_COLORS } from './constants';
+
+export const DEFAULT_RAMPS: Record<
+	keyof typeof DEFAULT_SEED_COLORS,
+	RampResult
+> = ${ JSON.stringify( ramps ) };
+`;
+
+await writeFile( outputPath, content );

packages/theme/package.json

@@ -44,6 +44,9 @@
 		"colorjs.io": "^0.5.2",
 		"memize": "^2.1.0"
 	},
+	"devDependencies": {
+		"esbuild-esm-loader": "0.3.3"
+	},
 	"peerDependencies": {
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
@@ -52,6 +55,9 @@
 		"access": "public"
 	},
 	"scripts": {
-		"build": "rimraf src/prebuilt docs && node bin/build-tokens.js && prettier --write tokens/color.json src/prebuilt docs"
+		"build:default-ramps": "node --import=esbuild-esm-loader/register bin/generate-default-ramps/index.ts",
+		"build:tokens": "node --import=esbuild-esm-loader/register bin/generate-primitive-tokens/index.ts && NODE_OPTIONS=--import=esbuild-esm-loader/register tz build --config terrazzo.config.ts",
+		"build": "npm run build:tokens && npm run build:default-ramps",
+		"postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	}
 }