WIP: CSS cascade-order dependency fuzzer for component fixtures#321062
Draft
hediet wants to merge 1 commit into
Draft
WIP: CSS cascade-order dependency fuzzer for component fixtures#321062hediet wants to merge 1 commit into
hediet wants to merge 1 commit into
Conversation
Adds input-driven stylesheet reversal and @CSS-Source marker loader; see CSS_ORDER_FUZZER_TODO.md for remaining work.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds WIP tooling to help detect and localize CSS cascade-order dependencies in component fixtures by (1) optionally reversing bundled stylesheet “documents” at runtime, and (2) tagging concatenated CSS with per-source markers so order-dependent conflicts can be mapped back to originating files.
Changes:
- Introduces a new
installGlobalStyleshelper that can build an adopted stylesheet with optionally reversed “document” order (by banner-delimited segments). - Threads a render
--inputoption (reverseStylesheets) throughfixtureUtils.tsto control reversal per render. - Adds an rspack CSS loader to inject
@css-sourcemarker comments into bundled CSS for later attribution/bisection tooling.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/test/browser/componentFixtures/fixtureUtilsCss.ts | New stylesheet installation helper with optional banner-delimited “document” reversal. |
| src/vs/workbench/test/browser/componentFixtures/fixtureUtils.ts | Uses the new helper and derives reversal options from context.input. |
| src/vs/workbench/test/browser/componentFixtures/CSS_ORDER_FUZZER_TODO.md | Tracks remaining implementation/validation steps for the fuzzer workflow. |
| build/rspack/rspack.serve-out.config.mts | Wires a CSS loader to tag CSS modules with source markers. |
| build/rspack/cssSourceMarkerLoader.ts | Implements the @css-source marker injection loader. |
Copilot's findings
- Files reviewed: 5/5 changed files
- Comments generated: 4
Comment on lines
+20
to
+23
| export default function cssSourceMarkerLoader(this: { resourcePath: string; rootContext: string }, source: string): string { | ||
| const rel = path.relative(this.rootContext, this.resourcePath).replace(/\\/g, '/'); | ||
| return `/* @css-source: ${rel} */\n${source}`; | ||
| } |
Comment on lines
+325
to
+331
| if (value && typeof value === 'object') { | ||
| const range = value as Record<string, unknown>; | ||
| if (typeof range.fromIndex === 'number' && typeof range.toIndex === 'number') { | ||
| return { reverseStylesheets: { fromIndex: range.fromIndex, toIndex: range.toIndex } }; | ||
| } | ||
| } | ||
| return undefined; |
Comment on lines
+182
to
+195
| export function installGlobalStyles(themes: readonly ColorThemeData[], options?: InstallGlobalStylesOptions): Promise<void> { | ||
| if (!globalStylesPromise) { | ||
| const reverse = options?.reverseStylesheets ?? false; | ||
| globalStylesPromise = (async () => { | ||
| const globalSheet = await getGlobalStyleSheet(reverse); | ||
| document.adoptedStyleSheets = [ | ||
| ...document.adoptedStyleSheets, | ||
| globalSheet, | ||
| getIconsStyleSheetCached(), | ||
| ...themes.map(getThemeStyleSheet), | ||
| ]; | ||
| })(); | ||
| } | ||
| return globalStylesPromise; |
Comment on lines
66
to
73
| { | ||
| test: /\.css$/, | ||
| type: 'css', | ||
| // Tag every CSS module with its repo-relative source path (as a | ||
| // comment that native CSS preserves) so tooling reading the | ||
| // bundled stylesheet can map concatenated documents back to files. | ||
| use: [path.join(__dirname, 'cssSourceMarkerLoader.ts')], | ||
| }, |
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.
Work in progress. Tooling to detect and localize CSS cascade-order dependencies in component fixtures, which render through
@vscode/component-explorerover an rspackserve-outbuild that concatenates all CSS into one native-CSS bundle.Done in this branch
installGlobalStylesaccepts areverseStylesheetsoption (true= reverse all documents, or{ fromIndex, toIndex }= reverse only that window). Driven per-run via the render--inputflag (parseStyleOptions), not via global state.@css-sourcemarker loader —build/rspack/cssSourceMarkerLoader.tsprepends each CSS module's repo-relative source path as a comment that native CSS preserves, so tooling can map concatenated bundle documents back to source files. Wired into the.cssrule inrspack.serve-out.config.mts.Remaining work
See
src/vs/workbench/test/browser/componentFixtures/CSS_ORDER_FUZZER_TODO.mdfor the full list:.tsloader runs (blocker) — confirm@rspack/cliloads a.tsloader directly; fall back to inlining in the.mtsconfig if not.aiCustomizationManagement.cssvscodicon.css(0,2,0)tie ondisplay.serve(no rebuilds) to localize order-dependent document pairs.build/lib/checkStylesheetOrder.ts+ daily workflow diffing manifestimageHashof normal vs. reversed render.--server-urlattach mode so bisection reuses a runningserve.