feat(tokens): export json, remove duplicate file generation (#3529)

castastrophe · web-flow · commit 3d08cea0f590 · 2025-01-30T16:23:13.000-05:00
diff --git a/.changeset/mean-adults-scream.md b/.changeset/mean-adults-scream.md
@@ -0,0 +1,9 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+Add JSON to token package exports.
+
+Remove CSS files from commit history (but continue to build and ship them in the releases).
+
+Stop physically copying the `dist/css/index.css` to `dist/index.css` and instead, map `dist/index.css` in the package exports to the same `dist/css/index.css` file.
diff --git a/.github/workflows/compare-results.yml b/.github/workflows/compare-results.yml
@@ -131,7 +131,7 @@ jobs:
                   components/card/dist/index.css
                   components/icon/dist/index.css
                   components/sidenav/dist/index.css
-                  tokens/dist/index.css
+                  tokens/dist/css/index.css
                   node_modules/diff2html/bundles/css/diff2html.min.css
                   node_modules/diff2html/bundles/js/diff2html.min.js
 
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 dist
 !dist/metadata.json
-!tokens/dist/**
+!tokens/dist/json/*
 
 # Not committing the map assets, these are dev-only
 *.map
diff --git a/.storybook/blocks/ThemeContainer.jsx b/.storybook/blocks/ThemeContainer.jsx
@@ -3,7 +3,7 @@ import { ThemeProvider } from "@storybook/theming";
 import React, { useContext } from "react";
 import { Container } from "./Layouts.jsx";
 
-import tokenStyles from "@spectrum-css/tokens/dist/index.css?raw";
+import tokenStyles from "@spectrum-css/tokens/dist/css/index.css?raw";
 
 /**
  * A container that wraps the children in a themed context
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -101,8 +101,8 @@
 		}
 	],
 	"cssVariables.lookupFiles": [
-		"${workspaceFolder}/tokens/dist/index.css",
-		"${workspaceFolder}/tokens/**/*.css",
+		"${workspaceFolder}/tokens/dist/css/index.css",
+		"${workspaceFolder}/tokens/dist/css/*.css",
 		"${workspaceFolder}/components/*/index.css",
 		"${workspaceFolder}/components/*/themes/*.css"
 	],
diff --git a/postcss.config.js b/postcss.config.js
@@ -48,7 +48,7 @@ module.exports = ({
 						const filePath = packageParts.length > 2 ? packageParts.slice(2).join("/") : "index.css";
 
 						if (packageParts[1] === "tokens") {
-							return join(__dirname, packageParts[1], "dist", filePath);
+							return join(__dirname, packageParts[1], "dist", "css", filePath);
 						}
 
 						return join(__dirname, "components", packageParts[1], filePath);
diff --git a/tasks/templates/compare-listing.njk b/tasks/templates/compare-listing.njk
@@ -17,7 +17,7 @@
         <link rel="stylesheet" type="text/css" href="{{ "../components/icon/dist/index.css" | safe }}"/>
         <link rel="stylesheet" type="text/css" href="{{ "../components/sidenav/dist/index.css" | safe }}"/>
 
-        <link rel="stylesheet" type="text/css" href="{{ "../tokens/dist/index.css" | safe }}"/>
+        <link rel="stylesheet" type="text/css" href="{{ "../tokens/dist/css/index.css" | safe }}"/>
 
         <style>
             body {
diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk
@@ -13,7 +13,7 @@
         <link rel="stylesheet" type="text/css" href="{{ "../../../components/sidenav/dist/index.css" | safe }}"/>
         <link rel="stylesheet" type="text/css" href="{{ "../../../components/divider/dist/index.css" | safe }}"/>
 
-        <link rel="stylesheet" type="text/css" href="{{ "../../../tokens/dist/index.css" | safe }}"/>
+        <link rel="stylesheet" type="text/css" href="{{ "../../../tokens/dist/css/index.css" | safe }}"/>
 
         <!-- CSS to render the diff2html code -->
         <link rel="stylesheet" type="text/css" href="{{ "../../../node_modules/diff2html/bundles/css/diff2html.min.css" | safe }}" />
diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css
diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css
diff --git a/tokens/dist/css/index.css b/tokens/dist/css/index.css
diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css
diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css
diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css
diff --git a/tokens/dist/index.css b/tokens/dist/index.css
diff --git a/tokens/package.json b/tokens/package.json
@@ -16,11 +16,11 @@
 	"exports": {
 		".": "./dist/css/index.css",
 		"./*.md": "./*.md",
-		"./dist/css/*.css": "./dist/css/*.css",
+		"./dist/*": "./dist/*",
 		"./dist/index.css": "./dist/css/index.css",
 		"./package.json": "./package.json"
 	},
-	"main": "dist/index.css",
+	"main": "dist/css/index.css",
 	"files": [
 		"dist",
 		"CHANGELOG.md",
diff --git a/tokens/project.json b/tokens/project.json
@@ -24,7 +24,7 @@
 			},
 			"outputs": [
 				"{projectRoot}/dist/css/*-vars.css",
-				"{projectRoot}/dist/index.css"
+				"{projectRoot}/dist/css/index.css"
 			]
 		},
 		"clean": {
diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js
@@ -20,10 +20,23 @@ const path = require("path");
 const fg = require("fast-glob");
 
 const { processCSS } = require("../../tasks/component-builder.js");
-const { copy, fetchContent } = require("../../tasks/utilities.js");
+const { fetchContent } = require("../../tasks/utilities.js");
 
 require("colors");
 
+/**
+ * Create a tagline for the CSS file based on the package.json data
+ * @param {Object} [packageJson={}]
+ * @param {string} packageJson.name
+ * @param {string} packageJson.version
+ * @returns
+ */
+function generateTagline({ name, version } = {}) {
+	if (!name) return "";
+	if (!version) return `/* ${name} */\n\n`;
+	return `/* ${name}@v${version} */\n\n`;
+}
+
 /**
  * The builder for the main entry point
  * @param {object} config
@@ -32,19 +45,21 @@ require("colors");
  * @returns Promise<void>
  */
 async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false } = {}) {
-	// Create an index.css asset for each component
-	if (clean && fs.existsSync(outputPath)) {
-		await fsp.unlink(outputPath);
-	}
-
 	// Read in the package version from the package.json file
 	const packageJson = await fsp.readFile(path.join(cwd, "package.json"), "utf-8").then(JSON.parse);
 
 	const inputs = await fg(inputGlob, { cwd });
 	const contents = inputs.map(input => `@import "${input}";`).join("\n");
 	if (!contents) return;
 
-	return processCSS(contents, undefined, outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true, customTagline: `/* Token version: v${packageJson.version} */\n\n` });
+	return processCSS(contents, undefined, outputPath, {
+		cwd,
+		clean,
+		configPath: cwd,
+		map: false,
+		resolveImports: true,
+		customTagline: generateTagline(packageJson),
+	});
 }
 
 /**
@@ -53,7 +68,7 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false
  * @param {string} [config.cwd=process.cwd()] - Current working directory for the component
  * @returns {Promise<string[]>}
  */
-async function appendCustomOverrides({ cwd = process.cwd() } = {}) {
+async function appendCustomOverrides({ cwd = process.cwd(), packageJson = {} } = {}) {
 	const promises = [];
 
 	// Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file
@@ -75,6 +90,7 @@ async function appendCustomOverrides({ cwd = process.cwd() } = {}) {
 			processCSS(combinedContent[0].content, path.join(cwd, "dist", "css", file), path.join(cwd, "dist", "css", file), {
 				cwd,
 				configPath: cwd,
+				customTagline: generateTagline(packageJson),
 			})
 		);
 	}
@@ -94,25 +110,27 @@ async function main({
 	cwd = process.cwd(),
 	clean,
 } = {}) {
-	if (typeof clean === "undefined") {
-		clean = process.env.NODE_ENV === "production";
-	}
-
 	const key = `[build] ${"@spectrum-css/tokens".cyan} index`;
 	console.time(key);
 
 	const compiledOutputPath = path.join(cwd, "dist");
 
+	// Ensure the dist directory exists
+	if (!fs.existsSync(compiledOutputPath)) {
+		fs.mkdirSync(compiledOutputPath);
+	}
+
+	// Read in the package version from the package.json file
+	const packageJson = await fsp.readFile(path.join(cwd, "package.json"), "utf-8").then(JSON.parse);
+
 	// Wait for all the custom files to be processed
-	return appendCustomOverrides({ cwd }).then(async (r) =>
+	return appendCustomOverrides({ packageJson, cwd }).then(async (r) =>
 		Promise.all([
 			index(
 				["dist/css/*-vars.css"],
 				path.join(compiledOutputPath, "css", "index.css"),
-				{ cwd, clean }
-			).then((reports) =>
-				copy(path.join(compiledOutputPath, "css", "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false })
-					.then((reps) => [reports, reps]))
+				{ cwd, clean, packageJson }
+			)
 		]).then((reports) => {
 			const logs = [reports, r].flat(Infinity).filter(Boolean);
 
diff --git a/tools/bundle/package.json b/tools/bundle/package.json
@@ -69,6 +69,7 @@
 		"@spectrum-css/fieldgroup": "workspace:^",
 		"@spectrum-css/fieldlabel": "workspace:^",
 		"@spectrum-css/floatingactionbutton": "workspace:^",
+		"@spectrum-css/form": "workspace:^",
 		"@spectrum-css/helptext": "workspace:^",
 		"@spectrum-css/icon": "workspace:^",
 		"@spectrum-css/illustratedmessage": "workspace:^",
@@ -77,6 +78,7 @@
 		"@spectrum-css/link": "workspace:^",
 		"@spectrum-css/logicbutton": "workspace:^",
 		"@spectrum-css/menu": "workspace:^",
+		"@spectrum-css/meter": "workspace:^",
 		"@spectrum-css/miller": "workspace:^",
 		"@spectrum-css/modal": "workspace:^",
 		"@spectrum-css/opacitycheckerboard": "workspace:^",
diff --git a/tools/bundle/project.json b/tools/bundle/project.json
@@ -7,7 +7,7 @@
 	},
 	"targets": {
 		"build": {
-			"dependsOn": ["clean", { "target": "build", "projects": "tokens" }],
+			"dependsOn": ["clean", "^build"],
 			"executor": "nx:run-commands",
 			"inputs": [
 				"core",
diff --git a/tools/bundle/src/index.css b/tools/bundle/src/index.css
@@ -61,6 +61,7 @@
 @import "@spectrum-css/fieldgroup";
 @import "@spectrum-css/fieldlabel";
 @import "@spectrum-css/floatingactionbutton";
+@import "@spectrum-css/form";
 @import "@spectrum-css/helptext";
 @import "@spectrum-css/icon";
 @import "@spectrum-css/illustratedmessage";
@@ -69,6 +70,7 @@
 @import "@spectrum-css/link";
 @import "@spectrum-css/logicbutton";
 @import "@spectrum-css/menu";
+@import "@spectrum-css/meter";
 @import "@spectrum-css/miller";
 @import "@spectrum-css/modal";
 @import "@spectrum-css/opacitycheckerboard";
diff --git a/tools/bundle/tasks/bundler.js b/tools/bundle/tasks/bundler.js
@@ -161,9 +161,9 @@ export async function bundler() {
 	}
 
 	return Promise.all([
-		processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.css"), { cwd: bundleRoot }),
+		processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.css"), { lint: false, cwd: bundleRoot }),
 		// Write the minified CSS
-		processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.min.css"), { cwd: bundleRoot, minify: true }),
+		processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.min.css"), { lint: false, cwd: bundleRoot, minify: true }),
 	]);
 }
 
@@ -175,9 +175,7 @@ export async function main() {
 	const key = "bundler";
 
 	console.time(key);
-	return Promise.all([
-		bundler(),
-	]).then((report) => {
+	return bundler().then((report) => {
 		const logs = report.flat(Infinity).filter(Boolean);
 
 		console.log(`\n\n📦  ${key}`);
diff --git a/yarn.lock b/yarn.lock
@@ -3901,6 +3901,7 @@ __metadata:
     "@spectrum-css/fieldgroup": "workspace:^"
     "@spectrum-css/fieldlabel": "workspace:^"
     "@spectrum-css/floatingactionbutton": "workspace:^"
+    "@spectrum-css/form": "workspace:^"
     "@spectrum-css/helptext": "workspace:^"
     "@spectrum-css/icon": "workspace:^"
     "@spectrum-css/illustratedmessage": "workspace:^"
@@ -3909,6 +3910,7 @@ __metadata:
     "@spectrum-css/link": "workspace:^"
     "@spectrum-css/logicbutton": "workspace:^"
     "@spectrum-css/menu": "workspace:^"
+    "@spectrum-css/meter": "workspace:^"
     "@spectrum-css/miller": "workspace:^"
     "@spectrum-css/modal": "workspace:^"
     "@spectrum-css/opacitycheckerboard": "workspace:^"
@@ -4367,7 +4369,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/form@workspace:components/form":
+"@spectrum-css/form@workspace:^, @spectrum-css/form@workspace:components/form":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/form@workspace:components/form"
   dependencies:
@@ -4503,7 +4505,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@spectrum-css/meter@workspace:components/meter":
+"@spectrum-css/meter@workspace:^, @spectrum-css/meter@workspace:components/meter":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/meter@workspace:components/meter"
   dependencies:

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ module.exports = ({`
`48`	`48`	`const filePath = packageParts.length > 2 ? packageParts.slice(2).join("/") : "index.css";`
`49`	`49`
`50`	`50`	`if (packageParts[1] === "tokens") {`
`51`		`- return join(__dirname, packageParts[1], "dist", filePath);`
	`51`	`+ return join(__dirname, packageParts[1], "dist", "css", filePath);`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`return join(__dirname, "components", packageParts[1], filePath);`