feat(components): serve all.css via CSS cascade layers

[mfal]

Summary

Serve the generated component stylesheet (all.css) via CSS cascade layers, so consuming applications can override Flow with unlayered CSS without specificity battles.

Layer order (low → high priority):

@layer flow.reset, flow.base, flow.components, flow.components-override;

• flow.reset – the hard reset (all: initial + display restoration).
• flow.base – base typography, Josh-Comeau reset, color-scheme, reduced-motion.
• flow.components – every component CSS module (wrapped automatically at build time).
• flow.components-override – inter-component overrides (one Flow component restyling another).
• Unlayered on purpose: design tokens (CSS custom properties) and @font-face.

How it works

• Split styles/globals.scss into globals-reset.scss / globals-base.scss, loaded into flow.reset / flow.base.
• New Vite/PostCSS plugin dev/vite/flowCssLayerPlugin.ts:
  • wraps every *.module.(scss|css) in @layer flow.components;
  • prepends the layer-order statement to all.css (after @charset, via a post generateBundle hook).
• @layer unlayered { … } escape hatch: the plugin hoists such rules out of any layer, so components can still override third-party CSS injected unlayered at runtime. Applied to CodeEditor (CodeMirror) and ImageCropper (react-easy-crop).
• @layer flow.components-override applied to the genuine inter-component overrides (CartesianChart, CheckboxGroup, MarkdownEditor, CodeBlock, DateInput, DateRangeInput, Message, LayoutCard, ListItemView) — replacing reliance on specificity/source-order and one !important.

Behavior change (documented, not a forced major)

Flow's styles now live in a cascade layer, so unlayered CSS in a consuming app overrides Flow automatically. Apps that relied on Flow winning over their own unlayered global CSS can move those rules into a layer ordered before flow. Documented in:

• packages/components/MIGRATION.md (consumer migration note)
• docs stylesheet page (apps/docs/.../01-get-started/stylesheet/index.mdx)
• packages/components/CONTRIBUTE.md (the @layer unlayered / flow.components-override conventions)

Verification

• Built the components package: all.css is emitted with the correct layer order (@charset → order statement → layer blocks), tokens/@font-face unlayered, all component modules in flow.components, and the CodeMirror / react-easy-crop overrides correctly unlayered.
• Visual regression (WebKit): the initial layering broke CodeEditor / CodeBlock / ImageCropper (they override third-party unlayered CSS) — the @layer unlayered fix restored all three to green.
• The remaining visual diffs were confirmed pre-existing via a pristine-master control run (byte-identical renders with and without layers) — environment/baseline noise (font AA + backdrop-filter blur), not caused by this change.
• The flow.components-override moves are behavior-preserving (selectors/values unchanged; only the layer assignment changes).

Notes

• MIGRATION.md uses a placeholder version (>=0.2.0-alpha.897) — adjust to the actual release version.
• Branch is a few commits behind main; rebase before merge if needed.

🤖 Generated with Claude Code

[github-actions]

Coverage Report for ./packages/components/

Status	Category	Percentage	Covered / Total
🔵	Lines	84.1%	328 / 390
🔵	Statements	84.42%	336 / 398
🔵	Functions	89.77%	79 / 88
🔵	Branches	74.66%	165 / 221

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/components/dev/vite/flowCssLayerPlugin.ts	100%	90%	100%	100%

Generated in workflow #5540 for commit 476c4b4 by the Vitest Coverage Report Action

[github-actions]

🚀 Preview Deployment

Preview environments are ready:

Type	URL
docs	pr-2626.docs.review.flow-components.de
storybook	pr-2626.storybook.review.flow-components.de

Images:

• docs: ghcr.io/mittwald/flow/docs:pr-2626
• storybook: ghcr.io/mittwald/flow/storybook:pr-2626

[Lisa18289]

In den docs sind die Anchor Link Headings kaputt gegangen (liegt daran das deren display:flex für den Content das display:none für leeren Heading Content überschreibt )