[types] Five worked examples of shrinking the CSS type allowlists - #1886
Draft
henryqdineen wants to merge 5 commits into
Draft
henryqdineen wants to merge 5 commits into
henryqdineen wants to merge 5 commits into
Conversation
2 tasks
meta-cla
Bot
added
the
CLA Signed
This was referenced Sep 11, 2026
henryqdineen
added this pull request to stack #1887
September 11, 2026 03:13
workflow: benchmarks/perfComparison of performance test results, measured in operations per second. Larger is better.
|
workflow: benchmarks/sizeComparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
|
Worked example of the `NOT_TYPED` loop: cross a property off the list, and the
test says what to write.
overflowInline: Baseline high, so it is safe to use, but it is not typed.
Its grammar is `visible | hidden | clip | scroll | auto |
<-non-standard-overflow>`. Either add it to both type files, or list it in
NOT_TYPED with a reason.
`overflow-inline` is the logical counterpart of `overflow-block`, which was
already typed, so this was an asymmetry rather than a decision. Baseline has
had it as widely available since September 2021. It takes the same values, so
it reuses the existing `overflowX` alias.
Typing it then failed the completeness check, because `overflowX` is missing
the same five keywords its siblings are -- `overlay` and four `-moz-scrollbars`
values. It gets the same `INCOMPLETE_UNIONS` entry as `overflow`,
`overflowBlock`, `overflowX` and `overflowY` until those are fixed together.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Worked example of the `NO_GRAMMAR` loop, which points the other way: cross a
property off the list and the test asks you to justify it or delete it.
overflowBlockX: css-tree has no grammar for this property. Either drop it
from both type files, or add it to NO_GRAMMAR with a reason.
`overflow-block-x` is not a property in any specification. The pair is
`overflow-block` and `overflow-inline`, both of which are now typed, so this
was a typo with no valid values -- nothing could have been written in it that
produced working CSS.
Breaking in the sense that the key disappears from `CSSProperties`, but any
existing use was already emitting a declaration no browser understands.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Worked example of the `KEPT_KEYWORDS` loop, which operates on a keyword rather
than a property.
outlineColor: 'invert' not in the CSS grammar. Either drop from both type
files, or add to KEPT_KEYWORDS with a reason.
`outline-color: invert` is from CSS 2.1, where it inverted the colour
underneath the outline. The current grammar is `auto | <color>`; only IE ever
implemented `invert`, and browsers that see it now fall back to `currentColor`.
Kept the change to `outlineColor` alone. `invert` is not in the shared
`brStyle`-style aliases, so no other property is affected -- which is also why
this made a good first example. Narrowing something like `outline-style:
hidden` would mean expanding a shared alias, since `hidden` is legitimate for
every `border-*-style`.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Worked example of the `INCOMPLETE_UNIONS` loop: cross an entry off, and the
test names the keywords the grammar allows but the type does not.
mixBlendMode: the grammar allows 'plus-darker', 'plus-lighter' but the
type does not. Either add to both type files, or list in
INCOMPLETE_UNIONS.
Both have been in the spec since Compositing Level 2 and are what Safari's
`plus-lighter` transitions use.
The fix is not in the obvious place. `mixBlendMode` aliased the shared
`blendMode`, which `backgroundBlendMode` also uses -- and these two keywords
belong to `mix-blend-mode` alone:
mix-blend-mode <blend-mode> | plus-darker | plus-lighter
background-blend-mode <blend-mode>#
Widening `blendMode` would have wrongly allowed `backgroundBlendMode:
'plus-darker'`, so the keywords go on `mixBlendMode` instead. Confirmed after
the change: `mixBlendMode: 'plus-lighter'` compiles and
`backgroundBlendMode: 'plus-lighter'` still does not.
This is the trap to watch for when emptying `INCOMPLETE_UNIONS`. Roughly half
the remaining entries alias a shared type, and the grammar is what says whether
a keyword belongs to the shared type or just the one property.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Worked example of the `INCOMPLETE_UNIONS` loop on the largest non-`positionArea`
entry.
display: the grammar allows 'flow', 'table-caption', '-ms-inline-flexbox',
'-ms-grid', '-ms-inline-grid', '-webkit-flex', '-webkit-inline-flex',
'-webkit-inline-box', '-moz-inline-stack', '-moz-box', '-moz-inline-box'
but the type does not.
`flow` and `table-caption` are plain omissions: `display: table-caption` is the
inner display type of a `<caption>` and has been supported everywhere for
years. The other nine are the legacy flexbox and grid spellings; StyleX already
typed `-webkit-box`, so the set was arbitrary rather than deliberate. csstype
carries all of them.
The `display` alias is used by no other property, so unlike `mixBlendMode` it
could be extended directly.
Typos still fail: after the change `display: 'flow'`, `'table-caption'` and
`'-webkit-box'` all compile, and `display: 'blok'` is still an error.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
henryqdineen
force-pushed
the
hqd-stylex-css-types-examples
branch
from
September 11, 2026 03:15
2185e51 to
e275375
Compare
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
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.
What changed / motivation ?
Optional — #1882 through #1885 stand on their own. This is one worked example per allowlist from #1883, each its own commit, demonstrating the loop the tests exist for: cross an entry off the allowlist, the test says what to change, change it, the test goes green.
overflowInlineNOT_TYPEDoverflowBlock, which was already typedoverflowBlockXNO_GRAMMARoverflow-block/overflow-inlineoutlineColor: invertKEPT_KEYWORDSmixBlendMode: plus-darker/plus-lighterINCOMPLETE_UNIONSdisplaykeywordsINCOMPLETE_UNIONSflow,table-caption, and the nine legacy flexbox/grid spellingsEach commit message quotes the failure that prompted it. (#1885 is a sixth example of the same loop, split out because it fixes a reported issue.)
Linked PR/Issues
Stacked on #1885.
Additional Context
mixBlendModeshows the trap to watch for. It aliased the sharedblendMode, whichbackgroundBlendModealso uses — and the grammar says those two keywords belong tomix-blend-modealone (mix-blend-mode: <blend-mode> | plus-darker | plus-lighterversusbackground-blend-mode: <blend-mode>#). Widening the shared alias would have wrongly allowedbackgroundBlendMode: 'plus-darker'. Roughly half the remainingINCOMPLETE_UNIONSentries alias a shared type, so the grammar is what tells you whether a keyword belongs to the shared type or just the one property.Typing
overflowInlinemade a different test fail, because the alias it reuses is missing the same five keywords its siblings are. That commit therefore adds the property and itsINCOMPLETE_UNIONSentry together — the tests catching a second-order gap introduced by closing a first-order one.Remaining after these:
NO_GRAMMAR16,KEPT_KEYWORDS19,INCOMPLETE_UNIONS32,CLOSED_DESPITE_GRAMMAR13,NOT_TYPED24.positionAreaalone accounts for 38 of the missing keywords.Pre-flight checklist
Contribution Guidelines
🤖 Generated with Claude Code