feat(apollo-wind): expose --apollo-wind-version CSS variable#939
Draft
david-rios-uipath wants to merge 1 commit into
Draft
feat(apollo-wind): expose --apollo-wind-version CSS variable#939david-rios-uipath wants to merge 1 commit into
david-rios-uipath wants to merge 1 commit into
Conversation
Adds a `--apollo-wind-version` CSS custom property to the Wind stylesheet so consumers can detect at runtime both that apollo-wind's styles are loaded and which version is present. Motivated by traceview-ui#413, where a dedicated, non-generic token is needed to reliably probe for the sheet (and enable version-matching) instead of reusing a common token. The value is generated from package.json by scripts/generate-version-css.mjs as the first step of `build`, so package.json remains the single source of truth and the published token can never drift from the released version. The generated file is committed as well because the source CSS is imported directly by Storybook and apollo-react's canvas styles, which don't run the build script. A vitest guard fails if the committed value drifts from package.json. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Adds a dedicated --apollo-wind-version CSS custom property to @uipath/apollo-wind so consumers can reliably detect that Wind styles are loaded and which version is present at runtime. This fits the design system’s distribution model by embedding a lightweight “presence + version” marker directly into the exported stylesheet(s).
Changes:
- Introduces a build-time generator that renders
src/styles/version.generated.cssfrompackage.json’sversion. - Imports the generated CSS into the consumer Tailwind entrypoint and ensures it’s copied into
dist/. - Adds a Vitest guard to ensure the committed generated CSS matches
package.json(prevents drift).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-wind/src/styles/version.test.ts | Adds a Vitest drift/presence test for the generated --apollo-wind-version token. |
| packages/apollo-wind/src/styles/version.generated.css | Adds the committed, generated stylesheet defining --apollo-wind-version. |
| packages/apollo-wind/src/styles/tailwind.consumer.css | Imports version.generated.css so the token ships with the source-style export. |
| packages/apollo-wind/scripts/generate-version-css.mjs | Adds the generator script (reads package.json → writes version.generated.css). |
| packages/apollo-wind/rslib.config.ts | Copies version.generated.css into dist/ alongside other CSS dependencies. |
| packages/apollo-wind/package.json | Runs the generator as the first step of build to keep published output in sync. |
Comment on lines
+1
to
+10
| import { readFileSync } from 'node:fs'; | ||
| import { resolve } from 'node:path'; | ||
| import { describe, expect, it } from 'vitest'; | ||
|
|
||
| import { renderVersionCss } from '../../scripts/generate-version-css.mjs'; | ||
|
|
||
| const packageRoot = resolve(__dirname, '../..'); | ||
| const version = JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf8')) | ||
| .version as string; | ||
| const generatedCss = readFileSync(resolve(packageRoot, 'src/styles/version.generated.css'), 'utf8'); |
Comment on lines
+45
to
+50
| // Run when invoked directly (e.g. `node scripts/generate-version-css.mjs`), | ||
| // but not when imported by a test. | ||
| if (import.meta.url === `file://${process.argv[1]}`) { | ||
| const version = generateVersionCss(); | ||
| console.log(`Wrote --apollo-wind-version: "${version}" to src/styles/version.generated.css`); | ||
| } |
Contributor
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a
--apollo-wind-versionCSS custom property to the apollo-wind stylesheet, carrying the current package version (e.g."2.29.0"). Consumers can read it at runtime to detect both that apollo-wind's styles are loaded and which version is present.Motivation: traceview-ui#413 auto-injects traceview's utility sheet in light-DOM hosts, gated on detecting whether apollo-wind is loaded. The reviewer noted the token being probed is too generic (easy to get a false positive, and no way to check version matching) and suggested a dedicated
--apollo-wind-versiontoken. This adds it.How it stays in sync
package.jsonis the single source of truth.scripts/generate-version-css.mjsreads the version and regeneratessrc/styles/version.generated.css, and it runs as the first step ofbuild— so the published token can never drift from the released version (semantic-release bumpspackage.jsonbefore the build/publish step).The generated file is committed as well, because the source CSS (
tailwind.consumer.css) is imported directly by Storybook and by apollo-react's canvas styles, which don't run the build script. A vitest guard (version.test.ts) fails if the committed value drifts frompackage.json.Where it lands
dist/styles.css(precompiled sheet consumers import) — token inlined by the Tailwind CLI ✅dist/tailwind.css(source-style export) —@import "./version.generated.css", with the file copied todist/via rslib ✅Changes
scripts/generate-version-css.mjs— generator (readspackage.json→version.generated.css)src/styles/version.generated.css— generated token file (committed, auto-regenerated on build)src/styles/tailwind.consumer.css—@import "./version.generated.css"rslib.config.ts— copy the generated file intodistpackage.json— run the generator as the firstbuildstepsrc/styles/version.test.ts— drift/presence guardConsumer usage
Test plan
pnpm build— token present indist/styles.cssand generated file copied todist/vitest run src/styles/version.test.tspasses🤖 Generated with Claude Code