chore: script clean-up for packages and tokens[swc-808] #5419

castastrophe · 2025-04-30T16:05:45Z

Description

Process-spectrum is a command that runs several scripts that auto-generate and compile stylesheets from @spectrum-css repo and the spectrum-config defined in component directories. This rewrites every stylesheet each time it runs to catch differences in the output.

Process-spectrum runs in many of our commands in the package.json as a dependency or directly called. We need to remove it and check that yarn build no longer compiles styles.

Related issue(s)

SWC-808
SWC-809

How has this been tested?

I expect the Spectrum CSS assets not to be imported or regenerated by the yarn build command
I expect all previously generated CSS files are checked into the repository, where they will become the source for future edits.
I expect all commands besides process-spectrum continue to run correctly and produce correct output; all tests still pass.

Checklist

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
[n/a] I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

changeset-bot · 2025-04-30T16:05:48Z

⚠️ No Changeset found

Latest commit: 555d6a7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

castastrophe · 2025-04-30T16:07:47Z

package.json

@@ -50,7 +50,6 @@
        "lint:versions": "node ./scripts/lint-versions.js",
        "new-package": "cd projects/templates && plop",
        "postcustom-element-json": "node ./tasks/run-check-cem.js",
-        "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"",


This is reading in spectrum-vars.json files from the packages in this repo and those files are legacy and no longer created or committed.

github-actions · 2025-04-30T16:08:01Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-04-30T16:10:51Z

Tachometer results

Currently, no packages are changed by this PR...

castastrophe · 2025-05-01T16:54:17Z

tasks/watch-css.js

@@ -14,7 +14,7 @@ governing permissions and limitations under the License.

 import chokidar from 'chokidar';
 import debounce from 'debounce';
-import { processCSS } from './css-tools.js';
+import { processCSS } from './build-css.js';


The css-tools file only had 1 task in it so I pulled that into build-css to simplify things a bit.

castastrophe · 2025-05-01T16:54:43Z

tasks/run-check-cem.js

-        }
-    } else {
-        console.warn(`check-cem.js not found for ${pkg.name}`);
+async function checkCEM(pkg) {


I pulled this functionality directly into the run script here since it seemed like an unnecessary abstraction.

castastrophe · 2025-05-01T16:55:16Z

scripts/process-icons.js

-        'ui-icons',
-        'dist'
-    )
+const spectrumIconsPath = path.join(


path.resolve + path.join functions cause the drive to be listed twice in windows so I cleaned that up while I was here.

castastrophe · 2025-05-01T16:57:07Z

packages/icons-workflow/package.json

@@ -60,8 +60,6 @@
        "case": "^1.6.1",
        "cheerio": "^1.0.0-rc.2",
        "fast-glob": "^3.2.12",
-        "fs": "^0.0.1-security",


fs and path are bundled with node and don't need to be pulled in explicitly (in fact it can be a risk).

castastrophe · 2025-05-06T17:14:42Z

.github/CODEOWNERS

@@ -1,5 +1 @@
-cem-react-wrapper.config.js @jianliao


We can loop in Jian if needed but we can also code review these too.

castastrophe · 2025-05-06T17:15:22Z

.gitignore

@@ -31,7 +31,6 @@ custom-elements.json
 packages/*/src/**/*.css.js
 packages/*/custom-elements.json
 packages/**/*.js
-packages/**/spectrum-vars.json


This is a legacy asset from the vars and expressvars days. Might be worth looking into copying over the metadata.json functionality from CSS though.

castastrophe · 2025-05-06T17:16:04Z

INVENTORY.md

@@ -1,106 +0,0 @@
-# Component Inventory
-
-Availability of [Spectrum](https://spectrum.adobe.com) components in [Spectrum CSS](https://opensource.adobe.com/spectrum-css/)


This is not being updated regularly anymore and the script to do so was based on outdated dependency structures. If we want to bring this back, we'll need to find new ways to automate it.

castastrophe · 2025-05-06T17:20:25Z

projects/documentation/scripts/copy-component-docs.js

@@ -22,7 +22,6 @@ import {
    overviewDestinationTemplate,
    overviewPartialTemplate,
 } from './component-template-parts.js';
-import { gatherUrls } from './gather-spectrum-urls.js';


This is fetching assets that no longer exist for the CSS packages.

castastrophe · 2025-05-06T17:22:38Z

tasks/build-css.js

 import fg from 'fast-glob';
-import { processCSS } from './css-tools.js';


We didn't really need this abstraction since build-css is the only script calling css-tools. I pulled that functionality directly into this script as a single-source-of-truth.

castastrophe · 2025-05-06T17:23:36Z

tasks/build-react.js

 import { buildPackage } from './ts-tools.js';
+import { generateIconWrapper } from '../scripts/cem-plugin-react-wrapper.js';


Similarly to the build-css script, this one didn't need these abstractions or to call the exec functionality when the node utilities exist.

caseyisonit · 2025-05-06T17:35:56Z

package.json

-        "create-git-tag": "node --no-warnings tasks/create-git-tag.js",
-        "custom-element-json": "node tasks/custom-element-json.js",
-        "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement",
+        "custom-element-json": "yarn custom-element-json:clean && node tasks/custom-element-json.js && yarn custom-element-json:validate",


love this improvement

castastrophe · 2025-05-06T17:36:37Z

package.json

        "build:confirm": "node ./tasks/confirm-build.js",
        "build:css": "wireit",
        "build:css:watch": "wireit",
-        "build:react": "yarn gen-react-wrapper && node ./tasks/build-react.js && yarn tsc --build tsconfig-react-wrapper.json",
+        "build:icons": "wireit",
+        "build:react": "node ./tasks/build-react.js && tsc --build tsconfig-react-wrapper.json",


I combined the gen-react-wrapper and build-react tasks into one script

castastrophe · 2025-05-06T17:37:17Z

package.json

@@ -10,34 +10,32 @@
    },
    "scripts": {
        "analyze": "lit-analyzer \"{packages,tools}/*/src/**/!(*.css).ts\"",
+        "analyze:docs": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement",


This was previous docs: analyze but I was aiming to group the cem tasks together so we can get a view of the manifests being generated.

castastrophe · 2025-05-06T17:38:18Z

package.json

        "build": "wireit",
-        "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo",
-        "build:component-inventory": "node ./tasks/build-component-inventory.js",
+        "build:clean": "rimraf packages/*/tsconfig.tsbuildinfo tools/*/tsconfig.tsbuildinfo",


I migrated build:clear-cache to build:clean. Clear-cache wasn't being used anywhere else but it seemed right to keep it as an available shorthand script.

castastrophe · 2025-05-06T17:38:56Z

package.json

        "build": "wireit",
-        "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo",
-        "build:component-inventory": "node ./tasks/build-component-inventory.js",


The component inventory was really out-of-date and leveraging assets we no longer have in our node_modules resources so if we want to build something similar in the future, we'll need a different way to go about it.

castastrophe · 2025-05-06T17:39:31Z

package.json

+        "changeset-publish": "yarn prepublishOnly && yarn changeset version && yarn install && yarn lint:versions --fix && yarn update-version && yarn changeset publish && yarn postpublish",
+        "changeset-snapshot-publish": "yarn prepublishOnly && yarn changeset version --snapshot && yarn install && yarn lint:versions --fix && yarn update-version && yarn changeset publish --no-git-tag --tag snapshot",


Question about the changeset-publish command. Why are we setting changeset not to create the tags and then using a script to do it? Can't we just let changeset push the git tags?

castastrophe · 2025-05-06T17:40:50Z

package.json

        "docs:production": "yarn workspace documentation build:production",
        "docs:review": "alex packages/**/*.md",
        "docs:start": "yarn workspace documentation serve --watch",
-        "find": "test -f custom-elements.json",


This wasn't being used anywhere and I don't see much value in it.

castastrophe · 2025-05-06T17:41:35Z

package.json

        "docs:production": "yarn workspace documentation build:production",
        "docs:review": "alex packages/**/*.md",
        "docs:start": "yarn workspace documentation serve --watch",
-        "find": "test -f custom-elements.json",
-        "format:css": "yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\"",


I removed this formatter since we're looking to migrate to lint-staged but we can bring back a forced formatting command if we need it.

does lint-staged need to be merged in first?

No I don't think it does, the format:css command isn't called by anything so it's really just a question of if anyone is manually using this one.

castastrophe · 2025-05-06T17:43:12Z

package.json

@@ -48,31 +46,20 @@
        "lint:packagejson": "pretty-quick --pattern package.json --pattern \"packages/*/package.json\" --pattern \"projects/*/package.json\" --pattern \"tools/*/package.json\" --pattern \"react/*/package.json\"",
        "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"",
        "lint:versions": "node ./scripts/lint-versions.js",
-        "new-package": "cd projects/templates && plop",


You can see this updated below, we don't have to move into the directory to run the command since we can leverage yarn workspaces

castastrophe commented Apr 30, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/swc-808-disable-process-spectrum branch 3 times, most recently from e0f9c5f to 5945a6d Compare May 1, 2025 16:53

castastrophe commented May 1, 2025

View reviewed changes

castastrophe force-pushed the CSS-Cutoff branch from c20587b to 8cbaade Compare May 1, 2025 19:50

castastrophe force-pushed the castastrophe/swc-808-disable-process-spectrum branch from 5945a6d to 1045ca1 Compare May 1, 2025 19:52

castastrophe force-pushed the CSS-Cutoff branch from 8cbaade to 561f12a Compare May 5, 2025 13:38

castastrophe force-pushed the castastrophe/swc-808-disable-process-spectrum branch from 1045ca1 to 618cb83 Compare May 5, 2025 13:38

castastrophe force-pushed the CSS-Cutoff branch from 561f12a to 67be4f0 Compare May 6, 2025 15:06

castastrophe force-pushed the castastrophe/swc-808-disable-process-spectrum branch 2 times, most recently from 11d4edb to 4f12157 Compare May 6, 2025 17:13

castastrophe commented May 6, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/swc-808-disable-process-spectrum branch from 4f12157 to 8a82d29 Compare May 6, 2025 17:33

castastrophe commented May 6, 2025

View reviewed changes

caseyisonit reviewed May 6, 2025

View reviewed changes

castastrophe commented May 6, 2025

View reviewed changes

castastrophe self-assigned this May 6, 2025

castastrophe marked this pull request as ready for review May 6, 2025 17:44

castastrophe requested a review from a team as a code owner May 6, 2025 17:44

castastrophe requested review from TarunAdobe and removed request for a team May 6, 2025 17:48

castastrophe added Priority Tooling CSS Processing ready-for-review labels May 6, 2025

castastrophe force-pushed the CSS-Cutoff branch from 67be4f0 to f40c01f Compare May 6, 2025 17:51

chore: script clean-up for packages and tokens[swc-808]

555d6a7

castastrophe force-pushed the castastrophe/swc-808-disable-process-spectrum branch from 8a82d29 to 555d6a7 Compare May 6, 2025 17:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: script clean-up for packages and tokens[swc-808] #5419

chore: script clean-up for packages and tokens[swc-808] #5419

castastrophe commented Apr 30, 2025 •

edited

Loading

changeset-bot bot commented Apr 30, 2025 •

edited

Loading

castastrophe Apr 30, 2025

github-actions bot commented Apr 30, 2025

github-actions bot commented Apr 30, 2025

castastrophe May 1, 2025

castastrophe May 1, 2025

castastrophe May 1, 2025 •

edited

Loading

castastrophe May 1, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

caseyisonit May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025 •

edited

Loading

castastrophe May 6, 2025

castastrophe May 6, 2025

caseyisonit May 6, 2025

castastrophe May 6, 2025

castastrophe May 6, 2025

		@@ -1,106 +0,0 @@
		# Component Inventory

		Availability of [Spectrum](https://spectrum.adobe.com) components in [Spectrum CSS](https://opensource.adobe.com/spectrum-css/)

		import fg from 'fast-glob';
		import { processCSS } from './css-tools.js';

		import { buildPackage } from './ts-tools.js';
		import { generateIconWrapper } from '../scripts/cem-plugin-react-wrapper.js';

		"changeset-publish": "yarn prepublishOnly && yarn changeset version && yarn install && yarn lint:versions --fix && yarn update-version && yarn changeset publish && yarn postpublish",
		"changeset-snapshot-publish": "yarn prepublishOnly && yarn changeset version --snapshot && yarn install && yarn lint:versions --fix && yarn update-version && yarn changeset publish --no-git-tag --tag snapshot",

chore: script clean-up for packages and tokens[swc-808] #5419

Are you sure you want to change the base?

chore: script clean-up for packages and tokens[swc-808] #5419

Conversation

castastrophe commented Apr 30, 2025 • edited Loading

Description

Related issue(s)

How has this been tested?

Checklist

Best practices

changeset-bot bot commented Apr 30, 2025 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

github-actions bot commented Apr 30, 2025

Branch preview

Review the following VRT differences

github-actions bot commented Apr 30, 2025

Tachometer results

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe May 1, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe May 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe commented Apr 30, 2025 •

edited

Loading

changeset-bot bot commented Apr 30, 2025 •

edited

Loading

castastrophe May 1, 2025 •

edited

Loading

castastrophe May 6, 2025 •

edited

Loading