Add `classnames.js` Set export to the CSS build by jonrohan · Pull Request #4096 · primer/view_components

jonrohan · 2026-06-17T16:15:23Z

What

Extends the CSS build to emit a new static/classnames.js file that default-exports a JavaScript Set of every unique component CSS class name in the library, giving consumers and tooling a single published list of classnames. This is for parity with primer/css.

Changes

script/export-css-selectors — In the same build that already produces static/classes.json, collect every bare class token (without the leading .) from all rule selectors (traversing every compound/token, not just the first). Results are deduplicated via a Set and sorted alphabetically for stable diffs. @keyframes children are skipped as before. The utility/layout classes in app/lib/primer/css/utilities.css and app/lib/primer/css/layout.css are intentionally excluded via a new classNameExcludedFiles option.
static/classnames.js (generated) — emits:
```
const classNames = new Set([
  'ActionBar',
  // ...sorted...
])

export default classNames
```
Formatted to satisfy the repo's eslint/prettier config (single quotes, trailing commas, no semicolons, named default export).
package.json — adds static/classnames.js to the published files list.
.changeset/classnames-export.md — minor changeset describing the new export.

Verification

static/classnames.js is generated, default-exports a non-empty Set (435 entries), contains known component classes (e.g. Label, Box-body), has no leading dots, and no duplicates.
eslint static/classnames.js passes clean.
static/classes.json and the per-file *.css.json outputs are unchanged.

Notes

The exports map step was skipped because the package does not currently use an exports field. Pre-existing unrelated package-lock.json changes were excluded from this branch.

Extend script/export-css-selectors to emit static/classnames.js, a default-exported Set of every unique component CSS class name (excluding the utilities.css and layout.css utility classes). Publish the file via package.json files.

changeset-bot · 2026-06-17T16:15:32Z

🦋 Changeset detected

Latest commit: 9a247f9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Minor

Not sure what this means? Click here to learn what changesets are.

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

Introduce a package.json exports field so consumers can use @primer/view-components/classnames. Includes a ./* wildcard fallback to preserve existing deep imports.

Copilot

Pull request overview

This PR extends the CSS build pipeline to additionally emit static/classnames.js, intended to provide consumers/tooling with a single published list of all unique CSS class names used by Primer ViewComponents (similar to primer/css).

Changes:

Update script/export-css-selectors to collect class tokens across all selectors and write a new static/classnames.js artifact.
Publish static/classnames.js via package.json#files.
Add a changeset documenting the new export.

Show a summary per file

File	Description
`static/classnames.js`	New generated artifact exporting the collected class-name set.
`script/export-css-selectors`	Adds cross-file class-name collection and writes `static/classnames.js`.
`package.json`	Publishes `static/classnames.js` in the package `files` list.
`.changeset/classnames-export.md`	Declares a minor release and documents the new export.

Copilot's findings

Files reviewed: 4/4 changed files
Comments generated: 2

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Emit static/classnames.cjs (module.exports = Set) and static/classnames.d.ts alongside the ESM static/classnames.js. Make ./classnames a conditional export (types/import/require) and publish the new files.

Syncs the fork with primer/view_components up to upstream commit 6733f3c (parent of Release Tracking primer#4098), the last release in this batch reaching v0.51.6. Notable upstream changes pulled in: - classnames.js Set export (primer#4096): static/classnames.{js,cjs,d.ts} plus the package.json exports subpath and files entries. - perf(css): removed universal `*` subjects and expanded merged `:is()` selector lists (primer#4095). Conflicts resolved keeping the fork's identity, scope and its higher dependency versions; upstream's new exports/files additions and the static class-name output were merged in and regenerated cleanly.

Syncs the fork with primer/view_components up to upstream commit 6733f3c (parent of Release Tracking primer#4098), reaching v0.51.6. Upstream changes pulled in: - classnames.js Set export (primer#4096): static/classnames.{js,cjs,d.ts}, the export-css-selectors collection logic, and the package.json exports subpath plus files entries. - perf(css): removed universal `*` subjects and expanded merged `:is()` selector lists (primer#4095). Conflict resolution kept the fork's identity, scope and its higher dependency versions; upstream's new exports were merged in. The recursive tsconfig include is re-applied here so nested component TS keeps experimentalDecorators under Vite 8/rolldown. All generated static files were regenerated from a clean tree.

@mixin

Syncs the fork with primer/view_components up to upstream commit 6733f3c (parent of Release Tracking primer#4098), reaching v0.51.6. Upstream changes pulled in: - classnames.js Set export (primer#4096): static/classnames.{js,cjs,d.ts}, the export-css-selectors collection logic, and the package.json exports subpath plus files entries. - perf(css): removed universal `*` subjects and expanded merged `:is()` selector lists (primer#4095). Conflict resolution kept the fork's identity, scope and its higher dependency versions; upstream's new exports were merged in. The recursive tsconfig include is re-applied here so nested component TS keeps experimentalDecorators under Vite 8/rolldown. All generated static files were regenerated from a clean tree. The upstream css change makes CI lint the whole text_field.pcss, which surfaced a pre-existing false positive: nesting-selector-no-missing- scoping-root fires on the & selectors inside the fork's FormControl-input-width @define-mixin (the & resolves at the @mixin include site). Silenced with a scoped stylelint-disable.

Add classnames.js Set export to the CSS build

d60ba8a

Extend script/export-css-selectors to emit static/classnames.js, a default-exported Set of every unique component CSS class name (excluding the utilities.css and layout.css utility classes). Publish the file via package.json files.

jonrohan requested a review from a team as a code owner June 17, 2026 16:15

jonrohan requested review from Copilot and joshblack June 17, 2026 16:15

jonrohan had a problem deploying to preview June 17, 2026 16:15 — with GitHub Actions Error

github-actions Bot added the minor release label Jun 17, 2026

Copilot started reviewing on behalf of jonrohan June 17, 2026 16:15 View session

Add exports map with ./classnames subpath

54d2e41

Introduce a package.json exports field so consumers can use @primer/view-components/classnames. Includes a ./* wildcard fallback to preserve existing deep imports.

jonrohan had a problem deploying to preview June 17, 2026 16:17 — with GitHub Actions Error

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Comment thread script/export-css-selectors

Comment thread script/export-css-selectors

Apply suggestions from code review

02883d8

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

jonrohan had a problem deploying to preview June 17, 2026 16:23 — with GitHub Actions Error

Change export from ES6 to CommonJS in classnames.js

3854e86

jonrohan had a problem deploying to preview June 17, 2026 16:26 — with GitHub Actions Error

Revert to export default

0674c61

jonrohan temporarily deployed to preview June 17, 2026 16:26 — with GitHub Actions Inactive

joshblack approved these changes Jun 17, 2026

View reviewed changes

Ship classnames export as dual ESM/CJS build with types

8948ba1

Emit static/classnames.cjs (module.exports = Set) and static/classnames.d.ts alongside the ESM static/classnames.js. Make ./classnames a conditional export (types/import/require) and publish the new files.

jonrohan temporarily deployed to preview June 17, 2026 17:03 — with GitHub Actions Inactive

Merge branch 'main' into add-classnames-export

9a247f9

jonrohan deployed to preview June 17, 2026 17:12 — with GitHub Actions View deployment

jonrohan merged commit 3ba48a2 into main Jun 17, 2026
33 checks passed

jonrohan deleted the add-classnames-export branch June 17, 2026 17:50

jonrohan temporarily deployed to preview June 17, 2026 17:51 — with GitHub Actions Inactive

primer Bot mentioned this pull request Jun 17, 2026

Release Tracking #4098

Merged

This was referenced Jun 18, 2026

Add path mapping for app directory in package.json #4099

Merged

Update package.json import paths for app files #4101

Merged

myabc mentioned this pull request Jul 21, 2026

Sync Primer view_components upstream through v0.51.6 opf/primer_view_components#502

Closed

myabc mentioned this pull request Jul 21, 2026

Sync Primer view_components upstream through v0.51.6 opf/primer_view_components#503

Merged

openproject-primer-view-components Bot mentioned this pull request Jul 21, 2026

Release Tracking opf/primer_view_components#505

Merged

Navigation Menu

Uh oh!

Add `classnames.js` Set export to the CSS build - #4096

Add `classnames.js` Set export to the CSS build#4096
jonrohan merged 7 commits into
mainfrom
add-classnames-export

jonrohan commented Jun 17, 2026

Uh oh!

changeset-bot Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

jonrohan commented Jun 17, 2026

What

Changes

Verification

Notes

Uh oh!

changeset-bot Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Jun 17, 2026 •

edited

Loading