Skip to content

feat(react-ui): opt-in layered CSS via ./layered-components.css and ./layered/styles/*#631

Open
ankit-thesys wants to merge 11 commits into
mainfrom
feat/react-ui-layered-css-optin
Open

feat(react-ui): opt-in layered CSS via ./layered-components.css and ./layered/styles/*#631
ankit-thesys wants to merge 11 commits into
mainfrom
feat/react-ui-layered-css-optin

Conversation

@ankit-thesys

Copy link
Copy Markdown
Contributor

Summary

Makes @layer openui an opt-in instead of the default (revises #589/#621's distribution strategy before it ships in any release):

  • ./components.css and ./styles/* return to unlayered 0.11.x behavior — existing consumers see zero change on upgrade. Verified byte-equivalent to the pre-feat(react-ui): adopt CSS cascade layers (@layer openui) via build-side post-process #589 build pipeline.
  • New additive exports ./layered-components.css and ./layered/styles/* carry the same rules wrapped in @layer openui for consumers who want plain-CSS overrides (and the Tailwind v4 recipe).
  • openui-defaults.css / ThemeProvider runtime injection stay unlayered in both modes (runtime theming contract).
  • Removes the package-wide browserslist cascade-layers floor (now only the opt-in path needs it; documented in docs instead).
  • Fixes the BOM bug found in pre-release verification: Sass's leading U+FEFF, once wrapped, landed mid-stylesheet and silently killed the first rule (the :root theme tokens). wrapInLayer now strips it — with unit tests (the package's first real test suite; --passWithNoTests removed).
  • Adds check-css-artifacts.js to prepublishOnly: default-unlayered / layered-wrapped / BOM-free / defaults-unlayered invariants are now mechanically enforced (guard proven to catch an injected BOM).
  • Docs explain both modes; docs app + the nine layer-recipe examples dogfood the layered variant, and multi-agent-chat / vercel-ai-chat are consolidated to a single CSS import site (the fix(css): re-adopt @layer openui (#589) and make the docs honor cascade layers #621 Turbopack hazard). material-ui-chat / fastapi-backend deliberately stay on the unlayered default.

Why

Flipping the default would change override semantics for every existing consumer (unlayered resets suddenly beat component styles — the same silent visual regression that broke our docs site in #620) and would bundle that risk with the react-syntax-highlighter security fix in the next release. Opt-in keeps the next react-ui release a safe patch (0.11.9). Default flip is deferred to 1.0 with a migration window.

Verification

  • 6/6 unit tests; pnpm build + pnpm run check:css + pnpm run ci green
  • Packed tarball inspected: exports resolve, default CSS unlayered, layered mirror wrapped + BOM-free, no catalog: literals, version untouched at 0.11.8 (bump lands in the release PR chore(release): react-ui 0.12.0, lang-core 0.2.6, cli 0.0.8 #630)
  • openui-chat example smoke-built green under Next.js/Turbopack against the new export

🤖 Generated with Claude Code

ankit-thesys and others added 11 commits June 10, 2026 18:39
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ults unlayered

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…rop browserslist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…efaults contract)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…able

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ingle import site

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…tion

Updated the API reference and installation guide to emphasize the importance of importing the layered variant from a single location to ensure proper cascade order. Added details on maintaining unlayered styles for individual components and adjusted the build script to include a CSS check for compliance with these guidelines.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants