Skip to content

Commit cb797cb

Browse files
castastrophecastastrophe
committed
feat(tokens): export json, remove duplicate file generation
1 parent 88bfc5b commit cb797cb

23 files changed

+67
-10823
lines changed

‎.changeset/mean-adults-scream.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@spectrum-css/tokens": minor
3+
---
4+
5+
Add JSON to token package exports.
6+
7+
Remove CSS files from commit history (but continue to build and ship them in the releases).
8+
9+
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.

‎.github/workflows/compare-results.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ jobs:
131131
components/card/dist/index.css
132132
components/icon/dist/index.css
133133
components/sidenav/dist/index.css
134-
tokens/dist/index.css
134+
tokens/dist/css/index.css
135135
node_modules/diff2html/bundles/css/diff2html.min.css
136136
node_modules/diff2html/bundles/js/diff2html.min.js
137137

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
dist
22
!dist/metadata.json
3-
!tokens/dist/**
3+
!tokens/dist/json/*
44

55
# Not committing the map assets, these are dev-only
66
*.map

‎.storybook/blocks/ThemeContainer.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ThemeProvider } from "@storybook/theming";
33
import React, { useContext } from "react";
44
import { Container } from "./Layouts.jsx";
55

6-
import tokenStyles from "@spectrum-css/tokens/dist/index.css?raw";
6+
import tokenStyles from "@spectrum-css/tokens/dist/css/index.css?raw";
77

88
/**
99
* A container that wraps the children in a themed context

‎.vscode/settings.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@
101101
}
102102
],
103103
"cssVariables.lookupFiles": [
104-
"${workspaceFolder}/tokens/dist/index.css",
105-
"${workspaceFolder}/tokens/**/*.css",
104+
"${workspaceFolder}/tokens/dist/css/index.css",
105+
"${workspaceFolder}/tokens/dist/css/*.css",
106106
"${workspaceFolder}/components/*/index.css",
107107
"${workspaceFolder}/components/*/themes/*.css"
108108
],

‎postcss.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ module.exports = ({
4848
const filePath = packageParts.length > 2 ? packageParts.slice(2).join("/") : "index.css";
4949

5050
if (packageParts[1] === "tokens") {
51-
return join(__dirname, packageParts[1], "dist", filePath);
51+
return join(__dirname, packageParts[1], "dist", "css", filePath);
5252
}
5353

5454
return join(__dirname, "components", packageParts[1], filePath);

‎tasks/templates/compare-listing.njk

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<link rel="stylesheet" type="text/css" href="{{ "../components/icon/dist/index.css" | safe }}"/>
1818
<link rel="stylesheet" type="text/css" href="{{ "../components/sidenav/dist/index.css" | safe }}"/>
1919

20-
<link rel="stylesheet" type="text/css" href="{{ "../tokens/dist/index.css" | safe }}"/>
20+
<link rel="stylesheet" type="text/css" href="{{ "../tokens/dist/css/index.css" | safe }}"/>
2121

2222
<style>
2323
body {

‎tasks/templates/diff-preview.njk

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<link rel="stylesheet" type="text/css" href="{{ "../../../components/sidenav/dist/index.css" | safe }}"/>
1414
<link rel="stylesheet" type="text/css" href="{{ "../../../components/divider/dist/index.css" | safe }}"/>
1515

16-
<link rel="stylesheet" type="text/css" href="{{ "../../../tokens/dist/index.css" | safe }}"/>
16+
<link rel="stylesheet" type="text/css" href="{{ "../../../tokens/dist/css/index.css" | safe }}"/>
1717

1818
<!-- CSS to render the diff2html code -->
1919
<link rel="stylesheet" type="text/css" href="{{ "../../../node_modules/diff2html/bundles/css/diff2html.min.css" | safe }}" />

‎tokens/dist/css/dark-vars.css

-842
This file was deleted.

‎tokens/dist/css/global-vars.css

-669
This file was deleted.

‎tokens/dist/css/index.css

-3,579
This file was deleted.

‎tokens/dist/css/large-vars.css

-638
This file was deleted.

‎tokens/dist/css/light-vars.css

-842
This file was deleted.

‎tokens/dist/css/medium-vars.css

-638
This file was deleted.

‎tokens/dist/index.css

-3,579
This file was deleted.

‎tokens/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
"exports": {
1717
".": "./dist/css/index.css",
1818
"./*.md": "./*.md",
19-
"./dist/css/*.css": "./dist/css/*.css",
19+
"./dist/*": "./dist/*",
2020
"./dist/index.css": "./dist/css/index.css",
2121
"./package.json": "./package.json"
2222
},
23-
"main": "dist/index.css",
23+
"main": "dist/css/index.css",
2424
"files": [
2525
"dist",
2626
"CHANGELOG.md",

‎tokens/project.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"outputs": [
2626
"{projectRoot}/dist/css/*-vars.css",
27-
"{projectRoot}/dist/index.css"
27+
"{projectRoot}/dist/css/index.css"
2828
]
2929
},
3030
"clean": {

‎tokens/tasks/token-rollup.js

+35-17
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,23 @@ const path = require("path");
2020
const fg = require("fast-glob");
2121

2222
const { processCSS } = require("../../tasks/component-builder.js");
23-
const { copy, fetchContent } = require("../../tasks/utilities.js");
23+
const { fetchContent } = require("../../tasks/utilities.js");
2424

2525
require("colors");
2626

27+
/**
28+
* Create a tagline for the CSS file based on the package.json data
29+
* @param {Object} [packageJson={}]
30+
* @param {string} packageJson.name
31+
* @param {string} packageJson.version
32+
* @returns
33+
*/
34+
function generateTagline({ name, version } = {}) {
35+
if (!name) return "";
36+
if (!version) return `/* ${name} */\n\n`;
37+
return `/* ${name}@v${version} */\n\n`;
38+
}
39+
2740
/**
2841
* The builder for the main entry point
2942
* @param {object} config
@@ -32,19 +45,21 @@ require("colors");
3245
* @returns Promise<void>
3346
*/
3447
async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false } = {}) {
35-
// Create an index.css asset for each component
36-
if (clean && fs.existsSync(outputPath)) {
37-
await fsp.unlink(outputPath);
38-
}
39-
4048
// Read in the package version from the package.json file
4149
const packageJson = await fsp.readFile(path.join(cwd, "package.json"), "utf-8").then(JSON.parse);
4250

4351
const inputs = await fg(inputGlob, { cwd });
4452
const contents = inputs.map(input => `@import "${input}";`).join("\n");
4553
if (!contents) return;
4654

47-
return processCSS(contents, undefined, outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true, customTagline: `/* Token version: v${packageJson.version} */\n\n` });
55+
return processCSS(contents, undefined, outputPath, {
56+
cwd,
57+
clean,
58+
configPath: cwd,
59+
map: false,
60+
resolveImports: true,
61+
customTagline: generateTagline(packageJson),
62+
});
4863
}
4964

5065
/**
@@ -53,7 +68,7 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false
5368
* @param {string} [config.cwd=process.cwd()] - Current working directory for the component
5469
* @returns {Promise<string[]>}
5570
*/
56-
async function appendCustomOverrides({ cwd = process.cwd() } = {}) {
71+
async function appendCustomOverrides({ cwd = process.cwd(), packageJson = {} } = {}) {
5772
const promises = [];
5873

5974
// 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() } = {}) {
7590
processCSS(combinedContent[0].content, path.join(cwd, "dist", "css", file), path.join(cwd, "dist", "css", file), {
7691
cwd,
7792
configPath: cwd,
93+
customTagline: generateTagline(packageJson),
7894
})
7995
);
8096
}
@@ -94,25 +110,27 @@ async function main({
94110
cwd = process.cwd(),
95111
clean,
96112
} = {}) {
97-
if (typeof clean === "undefined") {
98-
clean = process.env.NODE_ENV === "production";
99-
}
100-
101113
const key = `[build] ${"@spectrum-css/tokens".cyan} index`;
102114
console.time(key);
103115

104116
const compiledOutputPath = path.join(cwd, "dist");
105117

118+
// Ensure the dist directory exists
119+
if (!fs.existsSync(compiledOutputPath)) {
120+
fs.mkdirSync(compiledOutputPath);
121+
}
122+
123+
// Read in the package version from the package.json file
124+
const packageJson = await fsp.readFile(path.join(cwd, "package.json"), "utf-8").then(JSON.parse);
125+
106126
// Wait for all the custom files to be processed
107-
return appendCustomOverrides({ cwd }).then(async (r) =>
127+
return appendCustomOverrides({ packageJson, cwd }).then(async (r) =>
108128
Promise.all([
109129
index(
110130
["dist/css/*-vars.css"],
111131
path.join(compiledOutputPath, "css", "index.css"),
112-
{ cwd, clean }
113-
).then((reports) =>
114-
copy(path.join(compiledOutputPath, "css", "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false })
115-
.then((reps) => [reports, reps]))
132+
{ cwd, clean, packageJson }
133+
)
116134
]).then((reports) => {
117135
const logs = [reports, r].flat(Infinity).filter(Boolean);
118136

‎tools/bundle/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"@spectrum-css/fieldgroup": "workspace:^",
7070
"@spectrum-css/fieldlabel": "workspace:^",
7171
"@spectrum-css/floatingactionbutton": "workspace:^",
72+
"@spectrum-css/form": "workspace:^",
7273
"@spectrum-css/helptext": "workspace:^",
7374
"@spectrum-css/icon": "workspace:^",
7475
"@spectrum-css/illustratedmessage": "workspace:^",
@@ -77,6 +78,7 @@
7778
"@spectrum-css/link": "workspace:^",
7879
"@spectrum-css/logicbutton": "workspace:^",
7980
"@spectrum-css/menu": "workspace:^",
81+
"@spectrum-css/meter": "workspace:^",
8082
"@spectrum-css/miller": "workspace:^",
8183
"@spectrum-css/modal": "workspace:^",
8284
"@spectrum-css/opacitycheckerboard": "workspace:^",

‎tools/bundle/project.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
},
88
"targets": {
99
"build": {
10-
"dependsOn": ["clean", { "target": "build", "projects": "tokens" }],
10+
"dependsOn": ["clean", "^build"],
1111
"executor": "nx:run-commands",
1212
"inputs": [
1313
"core",

‎tools/bundle/src/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
@import "@spectrum-css/fieldgroup";
6262
@import "@spectrum-css/fieldlabel";
6363
@import "@spectrum-css/floatingactionbutton";
64+
@import "@spectrum-css/form";
6465
@import "@spectrum-css/helptext";
6566
@import "@spectrum-css/icon";
6667
@import "@spectrum-css/illustratedmessage";
@@ -69,6 +70,7 @@
6970
@import "@spectrum-css/link";
7071
@import "@spectrum-css/logicbutton";
7172
@import "@spectrum-css/menu";
73+
@import "@spectrum-css/meter";
7274
@import "@spectrum-css/miller";
7375
@import "@spectrum-css/modal";
7476
@import "@spectrum-css/opacitycheckerboard";

‎tools/bundle/tasks/bundler.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,9 @@ export async function bundler() {
161161
}
162162

163163
return Promise.all([
164-
processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.css"), { cwd: bundleRoot }),
164+
processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.css"), { lint: false, cwd: bundleRoot }),
165165
// Write the minified CSS
166-
processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.min.css"), { cwd: bundleRoot, minify: true }),
166+
processCSS(undefined, path.join(bundleRoot, "src", "index.css"), path.join(bundleRoot, "dist", "index.min.css"), { lint: false, cwd: bundleRoot, minify: true }),
167167
]);
168168
}
169169

@@ -175,9 +175,7 @@ export async function main() {
175175
const key = "bundler";
176176

177177
console.time(key);
178-
return Promise.all([
179-
bundler(),
180-
]).then((report) => {
178+
return bundler().then((report) => {
181179
const logs = report.flat(Infinity).filter(Boolean);
182180

183181
console.log(`\n\n📦 ${key}`);

‎yarn.lock

+4-2
Original file line numberDiff line numberDiff line change
@@ -3901,6 +3901,7 @@ __metadata:
39013901
"@spectrum-css/fieldgroup": "workspace:^"
39023902
"@spectrum-css/fieldlabel": "workspace:^"
39033903
"@spectrum-css/floatingactionbutton": "workspace:^"
3904+
"@spectrum-css/form": "workspace:^"
39043905
"@spectrum-css/helptext": "workspace:^"
39053906
"@spectrum-css/icon": "workspace:^"
39063907
"@spectrum-css/illustratedmessage": "workspace:^"
@@ -3909,6 +3910,7 @@ __metadata:
39093910
"@spectrum-css/link": "workspace:^"
39103911
"@spectrum-css/logicbutton": "workspace:^"
39113912
"@spectrum-css/menu": "workspace:^"
3913+
"@spectrum-css/meter": "workspace:^"
39123914
"@spectrum-css/miller": "workspace:^"
39133915
"@spectrum-css/modal": "workspace:^"
39143916
"@spectrum-css/opacitycheckerboard": "workspace:^"
@@ -4367,7 +4369,7 @@ __metadata:
43674369
languageName: unknown
43684370
linkType: soft
43694371

4370-
"@spectrum-css/form@workspace:components/form":
4372+
"@spectrum-css/form@workspace:^, @spectrum-css/form@workspace:components/form":
43714373
version: 0.0.0-use.local
43724374
resolution: "@spectrum-css/form@workspace:components/form"
43734375
dependencies:
@@ -4503,7 +4505,7 @@ __metadata:
45034505
languageName: unknown
45044506
linkType: soft
45054507

4506-
"@spectrum-css/meter@workspace:components/meter":
4508+
"@spectrum-css/meter@workspace:^, @spectrum-css/meter@workspace:components/meter":
45074509
version: 0.0.0-use.local
45084510
resolution: "@spectrum-css/meter@workspace:components/meter"
45094511
dependencies:

0 commit comments

Comments
 (0)