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

Author: castastrophe

.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.

.gitignore

@@ -1,6 +1,6 @@
 dist
 !dist/metadata.json
-!tokens/dist/**
+!tokens/dist/json/*
 
 # Not committing the map assets, these are dev-only
 *.map

tokens/dist/css/dark-vars.css

@@ -16,8 +16,9 @@
 	"exports": {
 		".": "./dist/css/index.css",
 		"./*.md": "./*.md",
-		"./dist/css/*.css": "./dist/css/*.css",
+		"./dist/css/*": "./dist/css/*",
 		"./dist/index.css": "./dist/css/index.css",
+		"./dist/json/*": "./dist/json/*",
 		"./package.json": "./package.json"
 	},
 	"main": "dist/index.css",

tokens/dist/css/global-vars.css

@@ -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
@@ -44,7 +57,14 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false
 	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 +73,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 +95,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),
 			})
 		);
 	}
@@ -103,16 +124,17 @@ async function main({
 
 	const compiledOutputPath = path.join(cwd, "dist");
 
+	// 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);