[Feature] Compile-time CSS source generation with Bootstrap support#34357
Draft
StephaneDelcroix wants to merge 1 commit into
Draft
[Feature] Compile-time CSS source generation with Bootstrap support#34357StephaneDelcroix wants to merge 1 commit into
StephaneDelcroix wants to merge 1 commit into
Conversation
Contributor
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/dotnet/maui/main/eng/scripts/get-maui-pr.sh | bash -s -- 34357Or
iex "& { $(irm https://raw.githubusercontent.com/dotnet/maui/main/eng/scripts/get-maui-pr.ps1) } 34357" |
StephaneDelcroix
force-pushed
the
CSSSG-64ca
branch
2 times, most recently
from
a82196a to
1f2b4e8
Compare
Add a compile-time CSS source generator that front-loads CSS processing at build time, and extend the CSS engine with features needed for Bootstrap theme support. Compile-time pipeline: - CSS tokenization, variable resolution, shorthand expansion - @media block parsing into CompiledCssMediaGroup structs - Generated [ModuleInitializer] factories registered on StyleSheet New CSS features: - CSS variables (:root, var(), fallbacks, recursive resolution) - :first-child, :last-child, :not() pseudo-classes - [attr=value] attribute selectors - calc(), rem, em, px unit resolution - inherit, unset, initial keywords - @import, @charset, @media queries - :hover, :focus, :disabled pseudo-classes (map to VisualStateManager) - border/font shorthand expansion - 20+ new CSS property mappings Pseudo-class support: - Parse :hover, :focus, :disabled selectors - Create VisualStateManager states (PointerOver, Focused, Disabled) - Apply pseudo-class styles as VSM state setters instead of direct props - Enables Bootstrap's extensive interactive state styles Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
StephaneDelcroix
force-pushed
the
CSSSG-64ca
branch
from
5ba62b7 to
3d94398
Compare
Contributor
|
/review -b feature/refactor-copilot-yml |
Collaborator
|
|
Contributor
AI code review for net11.0 targetVerdict: Needs discussion (draft/WIP; non-approval automated review, no human approval implied) Large feature PR (compile-time CSS source generation + Bootstrap-oriented CSS engine features) by the XAML/SourceGen area owner. Given the size (~35 files, full new SourceGen pipeline + runtime StyleSheets additions), this is a high-level pass, not an exhaustive line-by-line audit of the generator. Observations:
CI: required pipelines red (some Build/Run legs failing). Expected for a WIP draft; not assessed as merge-ready. Confidence: medium and intentionally high-level — flagging the public-API question as the main pre-merge discussion item rather than asserting specific defects. |
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
3 participants
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.
Note
Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!
Description
Adds a compile-time CSS source generator that front-loads CSS processing at build time, and extends the CSS engine with features needed for Bootstrap theme support.
Compile-Time Source Generator
The existing source generator only emitted
[XamlResourceId]attributes — all CSS parsing happened at runtime. This PR adds a full compile-time pipeline:var()) — resolved within single-file scope at build timeborder→border-width+border-color,font→ 4 longhand properties)!importantstripping — stripped at build time, tracked inImportantProperties[]metadatacalc()/rem/em/px/vw/vhresolution — evaluated to plain numbers at build time@mediaquery parsing — media blocks parsed at build time, conditions evaluated reactively at runtimergba,rgb,hsl) — pre-converted to hex colors at build timelinear-gradient()) — parsed and stored as MAUI gradient representation:active,:hover,:focus,:disabled,:first-child,:last-child,:not()) — compiled into selector predicates[attr=value]) — compiled at build timeGenerated code uses
[ModuleInitializer]to register pre-parsed stylesheet factories.StyleSheet.FromResource()checks the compiled registry first, falling back to runtime parsing for dynamic stylesheets.New CSS Features (Bootstrap Support)
:root,var(), fallbacks, recursive)!importantwith specificity boost:first-child,:last-child,:not(),:hover,:focus,:disabled,:active)[attr=value]attribute selectorscalc(),rem,em,px,vw,vhunit resolutioninherit,unset,initialkeywords@import(URL storage)@mediaqueries (min/max-width/height, orientation, prefers-color-scheme)@charset(gracefully skipped)border,font)rgba,rgb,hsl,hsla)linear-gradient())vw,vh) with configurable defaults@media Query Support
@mediablocks are parsed at compile time intoCompiledCssMediaGroupstructs. At runtime,MediaQueryEvaluatorevaluates conditions againstWindow.Width/HeightandApplication.RequestedTheme. WhenWindow.SizeChangedfires, media conditions are re-evaluated and stylesheets re-applied if any condition changed state.Supported conditions:
min-width,max-width,min-height,max-height,orientation(portrait/landscape),prefers-color-scheme(dark/light), compoundand, media type keywords (screen,all), andrem/em/px/vw/vhunits in conditions.Color Functions & Gradients
Color functions (
rgba,rgb,hsl,hsla) are pre-converted to hex color strings at compile time using full RGB color space. Thevar()function is supported inside color functions with runtime variable resolution. Gradients (linear-gradient()) are parsed at compile time with color function resolution and stored as MAUILinearGradientBrushrepresentations.Viewport Units
Viewport units (
vw,vh) are resolved at compile time using configurable viewport dimensions (defaults: iPhone Xs 375×812pt). At runtime, these can be updated viaCssValueResolver.SetViewport()if the actual viewport differs from defaults.What Stays Runtime
inherit/unset(needs parent element values)var()resolution (needs merged stylesheet scope)@importURL resolution (needs file I/O)StyleSheet.FromString()Implementation Details
Runtime Support
:active→ "Pressed" mappingCompile-Time Support (SourceGen)
Tests
!important,calc/rem/em/vw/vh, selector pseudo-classes, attribute selectors, shorthand expansion,@import,inherit/unset,@mediaqueries (evaluator + runtime parsing + activation), color functions, gradients, viewport units, compile-time verification (shorthand/!important/calc/colors/gradients in generated code)