Turn on cascade layers for the one target that can take them - #1176
Draft
schickling-assistant wants to merge 1 commit into
Draft
Conversation
schickling-assistant
changed the title
… them Unlayered output was never a preference. It is what lets converted code beat a utility framework's layered utilities without any ordering work, which is the property a migrating target depends on. So `useCSSLayers` is a per-target option that defaults OFF, and this turns it on for `effect-schema-form-aria` only. Nothing outside this repo changes, and the other repos must not take this flip while they still carry Tailwind. The audit, in full, because it did not come back the way "effect-utils is Tailwind-free" suggests. No package in the repo declares a utility framework. Exactly one package uses StyleX, plus the token package itself. Five CSS files exist: three belong to `notion-react`, which does not use StyleX and never shares a document with it here; one is a re-export; and the fifth is `@overeng/stylex-tokens/preflight.css`. That fifth file is the finding. It was unlayered and it sets `box-sizing`, `margin`, `padding` and `border` on `*`. Layered CSS loses to ANY unlayered CSS, so flipping layers on without touching it hands those four properties to the reset on every component in the package — the exact silent regression the migration exists to prevent, arriving through the change meant to clean the cascade up. Measured rather than argued. With the reset left unlayered, the gate fails sixteen stories with DIMENSION mismatches — every component loses its padding and borders and collapses. With the reset declared in `overeng.reset` and named in the compiler's `before` list, the gate is 39 compared, 39/39 passed at baseline, 0 changed: the layered output renders identically to the unlayered output it replaces. The ordering is fixed by declaration, not by luck. Naming the reset in `before` makes the compiler emit `@layer overeng.reset, priority1, ...;` ahead of its rules, so the reset sits below every StyleX priority regardless of which stylesheet the browser parses first — the same rule the token layer already follows, and the reason this is not another bundler-injection-order dependency.
Storybook Previews
Report historyPR 1176 · 2026-09-01 22:12 UTC
PR 1176 · 2026-09-01 22:05 UTC
|
schickling-assistant
force-pushed
the
schickling-assistant/2026-09-01-css-layers
branch
from
September 1, 2026 22:06
9c518c1 to
01dc4c2
Compare
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.
Turns cascade layers on for the one target that can take them.
Why this is a per-target option and not a flat flip
Unlayered output was never a preference — it is what lets converted code beat a
utility framework's layered utilities without any ordering work. So
createStylexVitePluginsgainsuseCSSLayers, defaulting OFF, and onlyeffect-schema-form-aria's three configs opt in.This is a correctness constraint, not taste: the factory is shared through the
megarepo pin, so a flat flip inside it would turn layers on for the other consuming repos
which still carry Tailwind and where layered output loses.
The audit, in full
package.jsonin the repo names one.@overeng/effect-schema-form-aria— plusthe token package itself.
notion-react, whichdoes not use StyleX and never shares a document with it here. One
(
effect-schema-form-aria/src/styles.css) only re-exports the fifth. Thefifth is
@overeng/stylex-tokens/preflight.css."Tailwind-free" turned out not to be sufficient, and that is the finding.
The reset was unlayered and sets
box-sizing,margin,paddingandborderon
*. Layered CSS loses to any unlayered CSS, so flipping layers on alonehands those four properties to the reset on every component — silently, and in
exactly the direction this migration exists to prevent. The general rule the
flip actually needs is that every unlayered global stylesheet in the graph
is layered and ordered; being free of a utility framework says nothing about it.
Evidence that the layered output still wins where it must
Both runs against baseline
ff33f7b1b:sixteen stories with DIMENSION mismatches. Components lose their padding
and borders and collapse. This is the regression the audit caught.
overeng.reset, named in the compiler'sbeforelist: 39 compared, 39/39 passed at baseline, 0 changed. Thelayered output renders identically to the unlayered output it replaces.
Ordering is fixed by declaration, not by luck
Naming the reset in
beforemakes the compiler emit@layer overeng.reset, priority1, ...;ahead of its rules, so the reset sitsbelow every StyleX priority regardless of which stylesheet the browser parses
first. That is the same "do not depend on bundler injection order" rule the
token layer already follows — this is not another injection-order dependency.
Posted on behalf of @schickling
agent_identitysessionagent_personaagent_supervisoragent_toolagent_tool_versionagent_runtimetooling_profile