feat(cli): doctor detects CSS theming escapes and swizzled components - #5260
Open
josephfarina wants to merge 1 commit into
Open
feat(cli): doctor detects CSS theming escapes and swizzled components#5260josephfarina wants to merge 1 commit into
josephfarina wants to merge 1 commit into
Conversation
Two read-only, text-only checks for the cases where an app provably steps outside its theme. CSS escapes covers three: a write to a private --_* var, which theme build already rejects and which is no more valid in raw CSS; a system token redefined in :root/html/:host, which sits outside the theme's @scope and so beats every theme at once; and the deprecated bare prop classes (.astryx-button.primary) in place of the reflected data attributes. Swizzled components fails on exactly one combination — ejected source that imports StyleX with no StyleX compiler configured. That is not a build error. The component renders completely unstyled, with no warning, which makes it the most expensive thing here to discover by hand. Three details are load-bearing, each of which produced a false positive before it was handled. Generated theme CSS is skipped, because the pipeline emits private vars and bare classes itself and judging its own output as consumer error dominated the early findings. Comments are blanked while preserving newlines, because stripping them collapses lines and shifts every reported line number. And bare-class detection matches only the enumerated prop and state values, so a consumer's own class chained onto an Astryx class is left alone. Half the tests are negative controls. A detector that only proves it finds things says nothing about whether it will bury the reader in noise, and every false positive here is one an agent would act on. Co-authored-by: Cursor <cursoragent@cursor.com>
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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
Two read-only, text-only
astryx doctorchecks for the cases where an app provably steps outside its theme. No modules are imported or evaluated and the scan is bounded, so both are cheap enough for the default run (~250ms added) and safe in CI.CSS theming escapes covers three cases:
--_*var.astryx theme buildalready rejects these in a theme; they are no more valid in raw CSS, so this is afailto match.:root/html/:host. A theme applies inside@scope ([data-astryx-theme=...]), so a global definition sits outside it and overrides every theme at once..astryx-button.primary) in place of the reflected data attributes. The fix names the exact replacement selector.Swizzled components fails on exactly one combination: ejected source that imports StyleX while no StyleX compiler is configured. That is not a build error — the component renders completely unstyled, with no warning — which makes it the most expensive thing here to find by hand. Otherwise it is informational, noting that swizzled copies stop tracking upstream fixes and no longer respond to theme component overrides.
Three details that are load-bearing
Each of these produced a false positive before it was handled, found while testing the approach against this repo:
apps/docsite..astryx-card.my-highlight— a consumer's own class — trips it.Against this repo the pair reports exactly one finding, and it is a true positive: a hand-written
.astryx-pagination-dot.activeinapps/docsite/src/app/globals.css:174.Test plan
node_modules/dist, a project with nothing swizzled, and an unrelated directory namedastryxcheck:cli-structure,readme:check,check:changesets, golden suiteassets/templates/blocks/apps/docsite— 1 finding, manually confirmed genuineMade with Cursor