Theme: Add bin-specific tsconfig with nodenext module resolution

packages/theme/CHANGELOG.md

@@ -20,6 +20,7 @@
 
 ### Internal
 
+-   Update type-checking for script files to enforce NodeNext module resolution ([#82622](https://github.com/WordPress/gutenberg/pull/82622)).
 -   Migrate design token modes to the DTCG resolver and Terrazzo CSS permutations. ([#82537](https://github.com/WordPress/gutenberg/pull/82537))
 -   Generate the default ramps before derived token artifacts so one build uses the current ramp algorithm throughout. ([#82525](https://github.com/WordPress/gutenberg/pull/82525))
 -   Cache relative luminance calculations used by color-ramp contrast checks. ([#82445](https://github.com/WordPress/gutenberg/pull/82445))

packages/theme/bin/build-design-tokens/index.ts

@@ -2,7 +2,7 @@ import { readFile, writeFile, mkdir } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parse, build } from '@terrazzo/parser';
-import config from '../../terrazzo.config';
+import config from '../../terrazzo.config.ts';
 
 const sources = await Promise.all(
 	config.tokens.map( async ( tokenUrl: URL ) => ( {

packages/theme/bin/generate-primitive-tokens/index.ts

@@ -6,8 +6,8 @@ import {
 	DEFAULT_SEED_COLORS,
 	buildBgRamp,
 	buildAccentRamp,
-} from '../../src/color-ramps/index';
-import { getColorString } from '../../src/color-ramps/lib/color-utils';
+} from '../../src/color-ramps/index.ts';
+import { getColorString } from '../../src/color-ramps/lib/color-utils.ts';
 
 const __filename = fileURLToPath( import.meta.url );
 const __dirname = path.dirname( __filename );

packages/theme/bin/terrazzo-plugin-ds-token-fallbacks/index.ts

@@ -1,9 +1,9 @@
 import { FORMAT_ID } from '@terrazzo/plugin-css';
 import type { Plugin } from '@terrazzo/parser';
 import { ColorSpace, to, get, OKLCH, sRGB } from 'colorjs.io/fn';
-import colorTokens from '../../src/prebuilt/ts/color-tokens';
-import { DEFAULT_RAMPS } from '../../src/color-ramps/lib/default-ramps';
-import { DEFAULT_SEED_COLORS } from '../../src/color-ramps/lib/constants';
+import colorTokens from '../../src/prebuilt/ts/color-tokens.ts';
+import { DEFAULT_RAMPS } from '../../src/color-ramps/lib/default-ramps.ts';
+import { DEFAULT_SEED_COLORS } from '../../src/color-ramps/lib/constants.ts';
 
 const WP_ADMIN_THEME_COLOR_VAR = '--wp-admin-theme-color';
 const PRIMARY_SEED = DEFAULT_SEED_COLORS.primary;

packages/theme/bin/terrazzo-plugin-ds-token-fallbacks/test/index.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest';
-import { computeBrandFallback, formatDesignTokenFallbacksScss } from '../index';
+import {
+	computeBrandFallback,
+	formatDesignTokenFallbacksScss,
+} from '../index.ts';
 
 describe( 'computeBrandFallback', () => {
 	it( 'throws on colors with alpha (8-digit hex)', () => {

packages/theme/terrazzo.config.ts

@@ -1,12 +1,12 @@
 import { defineConfig, type Config } from '@terrazzo/parser';
 import pluginCSS from '@terrazzo/plugin-css';
 import { makeCSSVar } from '@terrazzo/token-tools/css';
-import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index';
-import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index';
-import pluginDsTokenFallbacks from './bin/terrazzo-plugin-ds-token-fallbacks/index';
-import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index';
-import typescriptTypes from './bin/terrazzo-plugin-typescript-types/index';
-import { SEMANTIC_COLOR_CONTRAST_PAIRS } from './src/semantic-color-contrast-pairs';
+import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index.ts';
+import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index.ts';
+import pluginDsTokenFallbacks from './bin/terrazzo-plugin-ds-token-fallbacks/index.ts';
+import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index.ts';
+import typescriptTypes from './bin/terrazzo-plugin-typescript-types/index.ts';
+import { SEMANTIC_COLOR_CONTRAST_PAIRS } from './src/semantic-color-contrast-pairs.ts';
 
 const cornerRadiusPermutations = [
 	'none',

packages/theme/tsconfig.bin.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"allowImportingTsExtensions": true,
+		"module": "nodenext",
+		"moduleResolution": "nodenext",
+		"noEmit": true,
+		"emitDeclarationOnly": false,
+		"rootDir": ".",
+		"types": [ "node" ]
+	},
+	"include": [ "bin", "terrazzo.config.ts" ],
+	"references": [ { "path": "./tsconfig.build.json" } ]
+}

packages/theme/tsconfig.json

@@ -13,8 +13,6 @@
 	},
 	"files": [ "global.d.ts" ],
 	"include": [
-		"bin",
-		"terrazzo.config.ts",
 		"*-plugins/test/**/*",
 		"src/**/stories/**/*",
 		"src/**/test/**/*",

tsconfig.json

@@ -51,6 +51,7 @@
 		{ "path": "packages/style-runtime" },
 		{ "path": "packages/sync" },
 		{ "path": "packages/theme" },
+		{ "path": "packages/theme/tsconfig.bin.json" },
 		{ "path": "packages/token-list" },
 		{ "path": "packages/ui" },
 		{ "path": "packages/ui/tsconfig.stories.json" },