Skip to content

Register seven browser-implemented CSS properties missing from css-grammar - #620

Draft
davesnx wants to merge 8 commits into
atom-slot-keysfrom
css-grammar-missing-properties
Draft

davesnx wants to merge 8 commits into
atom-slot-keysfrom
css-grammar-missing-properties

Conversation

@davesnx

@davesnx davesnx commented Sep 25, 2026

Copy link
Copy Markdown
Owner

Registers seven CSS properties that the W3C property list has, css-grammar did not know, and at least one shipping browser implements (per MDN browser-compat-data). Writing them in [%css] was an unknown-property error before.

Property Grammar Spec Browser
border-shape none | [ <basic-shape> <geometry-box>? ]{1,2} css-borders-4 Chrome, Edge
flow-tolerance normal | <length-percentage> | infinite css-grid-3 Safari
frame-sizing auto | content-width | content-height | content-block-size | content-inline-size css-sizing-4 Chrome, Edge
scroll-axis-lock auto | none css-overflow-5 Chrome, Edge
view-transition-group normal | contain | nearest | <custom-ident> css-view-transitions-2 Chrome, Edge
view-transition-scope none | all css-view-transitions-2 Chrome, Edge
window-drag none | move css-ui-4 Chrome, Edge

Each property has a runtime type, valid and invalid css-grammar cases, and a css-support cram test (border-shape.t, flow-tolerance.t, frame-sizing.t, scroll-axis-lock.t, view-transition-group-scope.t, window-drag.t). Each also gets a new Slot_key.seed ID, appended at the end.

Out of scope here: the 37 CSS Gaps Module properties (row-rule, column-rule, rule and their families), which need new list value types, and 140 properties that are standards-track but not implemented or only in preview builds. Both follow in separate PRs.

Checks at 73edc2b: make build, make format-check, make test and DUNE_PROFILE=release make test pass.

Stacked on #619.

Risk: two-way door. A revert makes the seven properties unknown again.

…w-transition-group, view-transition-scope and window-drag
@vercel

vercel Bot commented Sep 25, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated
styled-ppx Ignored Ignored Preview Sep 30, 2026 12:06pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Sep 25, 2026

Copy link
Copy Markdown

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

Comment @coderabbitai help to get the list of available commands.

* atom-slot-keys:
  State design reasons in slot-key and class-format comments and remove the scratch measure tool
  Rename class prefixes to a-, in-, id- and k-, and key !important by context so CSS.merge needs no importance check
  Prefix interpolation bundles with csv- and reject atom class collisions in generate

# Conflicts:
#	CHANGES.md
* atom-slot-keys:
  Encode context, family and longhand mask in atom class names and resolve CSS.merge conflicts by them
  Group declarations whose longhands overlap into one atom, in author order

# Conflicts:
#	CHANGES.md
* atom-slot-keys:
  Bundle only interpolated declarations that share a variable, so the others merge as keyed atoms
  Rename class prefixes to _a_, _in_, _id_ and _k_ so hand-written a- classes are never read as atoms
  Emit cascade tiers so conditional rules beat base rules, own rules beat descendant defaults and globals, across stylesheets
  Give a lone interpolated declaration a keyed atom class so CSS.merge resolves it
  Hash atoms from their resolved selector so $(binding) references in different modules mint different classes
  Show every CSS.merge combination in the melange demo

# Conflicts:
#	CHANGES.md
* atom-slot-keys:
  Keep parent-to-child rules in their context tier and sort each tier by descendant shape, then shorthand depth
  Describe the final class-name prefixes in the 0.62.0 changelog
* atom-slot-keys:
  Resolve property aliases before computing an atom's longhand mask
* atom-slot-keys:
  Keep a seeded property's family ID when a new shorthand joins its family, and bring the docs up to the current class names
  Let an explicit --dev win over --minify and --env production in any order
  Document how CSS.merge decides, with its examples and known limits
  Emit generated CSS without cascade layers, so specificity and order decide as in plain CSS
  Salt atom, bundle and identity classes with --namespace, defaulting to the dune library name
  Emit all atoms in one styled-ppx.atoms layer, base then conditional, so specificity decides before position

# Conflicts:
#	CHANGES.md

This branch has not been deployed

No deployments
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.

1 participant