PARITY.md

PARITY.md: DSSL vs CSS, honestly

The point of this table is to stop two bad arguments: "DSSL is missing everything" and "DSSL replaces all of CSS". Both are false. Here is the ledger. Status: shipped / partial / planned / by-design-no.

CSS feature	In DSSL	Status	Notes
Type / class / id / attribute selectors	native (rides browser matching)	shipped
Combinators (>, +, ~, descendant)	native	shipped
Nesting	native, & substitution	shipped	predates CSS nesting; no build step needed
:nth-child(), :nth-of-type(), :not(), :is(), :where(), :has()	native	shipped	the browser does the matching; v0.7 docs say so loudly
Pseudo-classes (:hover, :focus...)	engine-native states as nested blocks	shipped	real events, enter + leave, descendants re-evaluated; seen (first viewport entry) has no CSS equivalent
Pseudo-elements	one compiled shadow stylesheet	shipped	the ONE place DSSL emits real CSS; inline styles cannot reach them
@media queries	@media (max-width: 860), sugar: dark, light, reduced-motion, bare widths, <= ranges	shipped
@container queries	@container (min-width: 480)	shipped	nearest ancestor (or self) with container-type
@layer cascade layers	@layer base|components|utilities + pin {}	shipped	cascade is (layer, source order); no specificity, no !important
@supports	raw { } passes it through verbatim	partial	no sugar; the engine feature-detects itself, and dssl import moves it into raw { }
@font-face	raw { } passes it through verbatim (semicolons required inside)	partial	font.* tokens can name any loaded family; a missing ; in raw is a warning with a line number
@keyframes	motion name { from {} to {} } via WAAPI	shipped	animate: name 600 ease-out infinite alternate
View transitions	not implemented	planned
Scroll-driven animations	not implemented	planned	pairs naturally with seen + stagger
Custom properties (--*)	pass through unvalidated, plus dotted token re-declaration per subtree	shipped	--color.accent: color.err re-themes a subtree via inheritance
Design tokens	first-class: tokens { }, numeric keys, alpha suffix /85, scoped per file and subtree	shipped	no CSS-native equivalent at this ergonomics level
Flexbox / Grid	raw properties pass through + row: column: grid: stack: sugar	shipped	shorthands write display; the compiler warns when that clobbers an explicit display:
place-items / alignment	center: both	shipped	the engine promotes a formatting context when missing, so alignment cannot silently no-op
Transitions	per-property: transition: 200 snap transform	shipped	honors reduced-motion
Background patterns and noise	texture: (40 presets including ten wood species, 11 generators, your own)	shipped	there is no CSS shorthand for "grain on top of my background"; this one keeps the author's background and removes cleanly. Runtime-only
Glow, particles, fire	aura-glow, aura-particle, glow-particle, aura-glow-particle, aura:	shipped	CSS has box-shadow and filter: drop-shadow, and nothing for particles. No presets by design. Runtime-only
Styling <input type="range">	slider: writes the ::-webkit-slider-* and ::-moz-range-* rules together	shipped	Chrome tested; the Firefox rules are generated but not run yet. Histogram sliders via graph
Accessibility hints in the compiler	contrast, removed focus outline, small targets (warnings)	shipped	CSS says nothing; these never fail a build unless you pass --strict
Moving existing CSS over	dssl import styles.css	shipped	converts the mechanical differences and reports the rest; the output always compiles
print styles (@media print)	not implemented	planned
!important	by design no	by-design-no	pin { } is the must-win block; specificity wars are the thing DSSL deletes
Cascade	(layer, source order)	shipped	later wins; identical selectors resolve by order, deterministically
Static extraction / view-source styling	dssl build emits real CSS (v0.8.0); prerender snapshot for live pages planned	partially shipped	freeze() already makes big static pages zero-cost after first paint
DevTools story	DSSL.explain(el) returns the cascade as data	shipped	matched rules with file/line, winning declaration per property, pseudo rules; browser-extension panel planned
Work without JavaScript	dssl build emits the static subset as real CSS (v0.8.0); @signal/animate: stay runtime-only and counted	shipped for the static subset; prerender snapshot still planned for live pages	the honest trade has an exit now

The exit story

Abandoning DSSL leaves you: a DOM of valid inline styles, one small <style> element (pseudo-element rules), and token values sitting in --dssl-* custom properties. The page keeps working with the engine removed. No other styling replacement can say that, because no other replacement styles with the platform's own primitives.

And since v0.8.0 there is a second exit: dssl build styles.dssl -o styles.css compiles the static subset to a real stylesheet before you ever ship, no runtime, no inline styles, CSP-clean, works without JavaScript. Tokens become custom properties, states become pseudo-classes, layers become @layer, motions become @keyframes, pin becomes !important, raw { } passes through verbatim, seen applies its final state. @signal rules and animate: stay runtime-only and are counted in the report, so the boundary is explicit, not folklore.

What DSSL adds that CSS does not have

• live tokens and signals: change one value or fire one bridge call, the whole DOM re-resolves
• seen reveal-on-scroll and stagger choreography with zero JavaScript
• the deform family composing into the transform channel
• gradients as sentences with compile-time stop validation
• the overlap policy: translucent boxes refuse to cover things unless you say so
• loud errors with did-you-mean, and a warnings channel for cascade-order footguns
• freeze() / unfreeze(): a live engine that can be parked at zero cost

v0.16.2

DSSL.lint's css-loses skips the output of dssl build (recognised by its @layer tokens, base, components, utilities, pin statement), because its reset is built to sit under the engine. The docs page of this site went from 4,314 false findings (0.16.0), to 111 (0.16.1), to none from its own CSS.

v0.16.1

DSSL.lint's css-loses ignores a CSS rule whose value is the same as the inline value DSSL wrote (found on this site, which ships compiled CSS and runs the engine: 4,314 false findings on the docs page).

v0.16.0: round three

Item from the game builder	Status
Normal CSS loses to DSSL's inline styles (needed !important)	done: yield: hands properties back; DSSL.lint finds the losers (css-loses). Still true: without yield, an inline style beats a stylesheet.
env() and font-variant-numeric: tabular-nums refused	done: the known words and properties come from the MDN CSS data
radius { pill: 999 card: 22 } read as one value, error at line 0	done: two tokens; errors point at the token's line
Aura glows the box, not the shape	done: follows clip-path, border-radius, rotate/scale/transform, or around ...; alpha for images and canvases
More aura types	done: inner glow, rays, ripples, 9 particle shapes, palette, spin, wind, orbit
More textures	done: 33 presets, 9 generators

Not verified: Firefox and Safari. around alpha needs an <img>, <canvas> or <video> (a div with a background-image is not readable). The shape follows the element's own rotate, scale and transform, not a rotation on a parent.

v0.15.0: the second game review

Review item	Status
Aura redraws 1.5 times a second under reduced motion	done: follows what moves, rests when nothing does
Aura emitters linger when hidden	done: invisible emitters (opacity 0, display none, visibility hidden, on it or an ancestor) stop
One canvas on <body>, never behind a hill	done as z N per layer; interleaves with the root stacking context only
Silent file-order losses	done: dssl check, console and DSSL.lint name rules a later rule always beats
Styling is asynchronous	done: DSSL.flush(), await DSSL.settled(), DSSL.computed()
Signals typed	done
DSSL.lint noisy	done: invisible text skipped, outline and tight shadow count
DSSL.signal costs 50 ms	done: only the elements its rules select are restyled
Several animate: per element	done
Scoped signals	done (DSSL.signal(name, value, el))
outline-shape	done (square corners, uses filter)
DSSL.play on pseudo-elements	done
CLI --engine	done
Test helpers (final value, pause, step)	done
rotate: 5, nested state in ::after, font: trap, gradient docs	done

Not verified: Firefox and Safari. Scoped signals on ::before/::after use a marker attribute the engine keeps on the element.

v0.14.0: made for games

From a review by an agent that built a game on DSSL. Twelve problems and ten wishes; each has an assertion in scripts/test-v0140.mjs.

Review item	Status
Reduced motion silently kills every animate:	done: console says so once; essential, DSSL.motion('full'), data-dssl-motion
gradient: and background-image: overwrite each other	done: warning; layers with +
animation-delay etc. compile and do nothing	done: warning that names the replacement; delay/jitter/iterations words
Motions scoped to one file	done: shared registry, same as tokens
paint-order: stroke fill, conic-gradient(from 0deg ...) rejected	done
shadow: pop, radius: pill for custom tokens	done
Console noise "folded border-color"	done: removed
Lint misses cross-rule contrast, false align warning	done: DSSL.lint(root) computes it on the live page; the align warning moved to dssl build's report where it applies
Docs drift	done: docs checked by a test against the real API and file list
0% { } keyframes	done
Engine overwrites inline styles	done: author styles win
Static subtree, play(), scoped aura, check index.html, richer @signal, gradient sugar, motions on pseudo-elements, text-stroke, per-element variation, runtime lint	done

Not verified: Firefox and Safari (all checks ran in Chrome). The engine is still not at CSS parity for startup (see v0.13.0 below).

v0.13.0: the compiled page is the page

Promise	Status	Evidence
With JavaScript off, a compiled page renders its static styles correctly on first paint	done	test-static-parity.mjs: 7 pages, 5,000+ elements, identical to the engine (demo elements for engine-only features excluded); the site itself ships this way
Startup within 10% of equivalent CSS	done for the compiled page	bench-compiled.mjs: +0% (default build), -4% (--inline-tokens)
Churn at parity	done with --inline-tokens (0%); default build +7% churn, +20% on an inherited-value restyle	same benchmark
The same for the runtime engine	no: load 17x, churn 4x	the engine applies inline styles; a hybrid mode that skips what the CSS already did is not built
SSR	done	public/dssl/server.js (no DOM), real React renderToStaticMarkup tested; the site links compiled CSS in its server-rendered head
Strict CSP	done	no <style> made by script, zero violations under style-src 'self' with the engine, texture, slider, tilt, aura and inspector; textures need img-src data:
Devtools show .dssl source lines	done for built CSS	--sourcemap; Chrome's own DevTools shows card.dssl:4 (checked in a real DevTools window). Runtime inline styles cannot carry a source: use DSSL.inspect()

Bugs the comparison found, now fixed: compiled selectors had CSS specificity (now :where()), a later border-style or border-width was dropped by the engine, a margin or padding shorthand did not reset an earlier longhand, the reset was unlayered.

v0.12.0: the rest of the wood list

Fonts, richer gradients, an inspector, hot reload and mirrored tiling, from the same critic's list (rows marked "done in 0.12.0" below).

v0.11.0 (wood): rings, species, planks, baked textures

Written after another AI built a wood site in DSSL and listed what hurt. What came of it:

Their note	What DSSL does now
texture: wood is one generic grain	oak, walnut, cherry, maple, pine, mahogany, ebony, birch, plus oak-planks and walnut-planks
Stretched noise with a contour layer is not wood	the rings generator draws growth rings as curves, with figure, warp, pores and knots
No way to draw planks	planks <px>: boards with seams and a slightly different board each
Seamless tiling, stable seed	integer harmonics and a seeded generator: same seed, same board everywhere; tested for seams
counter-reset and counter() rejected	they work
Contrast false alarms on translucent backgrounds	judged on the light page, white and black; warns only if it fails on all
Flash of unstyled content	dssl-ready class on <html>, and dssl build for the static part (the wood page does this)
Textures missing from dssl build	baked into the CSS when colours are known; the report names the ones that could not be
@font-face in raw {}	done in 0.12.0: a fonts { } block (Google families, variable ranges, your own files)
Gradients only cover simple cases	done in 0.12.0: repeating, colour spaces, midpoints, hard bands, mesh, layers
Dev-tools inspector for which rule produced a style	done in 0.12.0 as an in-page panel, DSSL.inspect(). A real browser DevTools panel would need an extension and is still not done.
Hot reload	done in 0.12.0: DSSL.watch() and dssl dev
The wood tile repeats every 576px	texture: ... symmetrical mirrors the tile, so it never shows a seam

v0.10.0: glass, tilt, and a silent colour bug

Need	DSSL	Status	Notes
Frosted glass	glass: 18 saturate 1.6	shipped	plain CSS, survives dssl build; CSS needs backdrop-filter plus a matching background
Pointer-following 3D tilt	tilt: 10 lift 1.04 glare	shipped	engine only; flat under reduced motion, ignores touch; not combinable with bend or fold
Alpha on a named colour	white/12	fixed	used to compile to white/12px and be dropped by the browser with no error

v0.9.0: texture, aura, sliders, and what testing them found

New language: texture, the aura family, slider, lint warnings, dssl import, and an interactive designer in the editor extension. Writing real-browser tests for them found bugs that were fixed in the same release:

• aura-glow: none also wiped the particles slot. Each none now clears only its own slot.
• With reduced motion the loop kept redrawing a still glow 60 times a second. It now redraws on scroll, resize and a slow poll only (and still follows the page when you scroll).
• A glow was re-blurred every frame (11 ms for 40 glows). Each glow is now painted once into a cached bitmap and re-lit per frame (0.6 ms).
• freeze() stopped aura but not the texture shimmer. It stops both.
• A slider clause with a leftover word (thumb 16 #fff shape bar) was silently ignored. It is an error.
• A typo in an aura (speedd 4) was swallowed as a colour and never got its did-you-mean.
• dssl build did not count engine-native declarations inside a rule that kept other declarations, so it said nothing about the aura or texture it dropped. It now lists them.
• The downloadable package and the editor extension each copied a hardcoded list of engine files, so a new module would have crashed them. They copy the whole folder now, and a test guards it.
• importCss threw on a stray @. It never throws now.

The contrast lint also found four real contrast failures in this site's own stylesheets.

v0.8.2: what rebuilding the site found

• Cross-stylesheet cascade. "Later wins" held inside one sheet and not between sheets: every sheet numbered its rules from zero and the engine compared those numbers across sheets, so a later sheet lost to an earlier one whenever the earlier one had more rules above the rule in question. Every rule now has one position in load order. A consequence: a later tokens { } block now overrides a token an earlier sheet set inside @media or @signal.
• fluid works on the longhands (padding-top, margin-block, letter-spacing, border-radius and the rest), not only on the four-sided shorthands.

v0.8.1 follow-up corrections

A re-test of 0.8.0 found two bugs, and more showed up while writing the tests:

• fluid left out the intercept of its line, so fluid 16 24 was 19.6px on a 375px phone instead of 16.1px and reached 24px at about 840px instead of 1200px. Fixed, and the tests now evaluate the emitted clamp() at real window widths. The same fix repaired shrinking sizes (fluid 24 16, which produced a backwards clamp()) and rem sizes (the slope was 16 times too small). Percentages and mixed units are now refused with a message instead of producing nonsense.
• A multi-line raw { } started with the text undefined, and anything written on the same line as raw { was dropped. The guide's own example also had no semicolons, which is not valid CSS. All three fixed, and a missing semicolon inside raw { } is now a warning with the right line number.
• dssl build now takes --strict, like dssl check.
• The dssl command in the downloadable package crashed on start (module not found), because it looked for the engine in public/dssl/ and the package keeps it in dssl/. It now finds it in either place, and a test runs it from the package layout.

v0.8.0 review-driven corrections

The second external review (repro snippets, headless browser) found five bugs and asked for the static build first. All fixed or shipped:

• row: gap 8 between center, the guide's own example, kept its between (every place word used to write both axes; the later word overwrote justify-content silently). Place words now own an axis: between/around/evenly are main-axis, stretch/baseline cross-axis, center/start/end fill free axes; conflicts and duplicates warn loudly.
• @font-face { ... } crashed the compiler with an uncaught throw. Unknown at-rules now skip their entire balanced block with one clean error.
• @supports (...) { .a { ... } } used to error AND still apply .a unconditionally. The whole block is skipped now; nothing leaks.
• Unquoted url(a.png) false-errored ("unknown value a.png"); url() is atomic now, and the missing background words (no-repeat, repeat-x/y, space, round, scroll, local) joined the vocabulary.
• color: red !important used to error AND emit red !important (which the browser then silently dropped). !important is now one loud error, nothing is emitted, and the hint names pin { } as the actual answer.
• animation: spin ... suggested "did you mean span"; it now passes motion names through, warns when the motion is undefined, and bare durations are ms.
• transition: color .2s ease (CSS order) is an error whose hint shows the exact DSSL conversion (transition: 200 ease color).

And the wishlist items that shipped: raw { } / @css { } verbatim passthrough, dssl build + dssl check (the CLI, with --json and CI exit codes), DSSL.toCSS(), headless-Chromium computed-style tests for every guide example (scripts/test-guide-browser.mjs), and font-size: fluid 16 24 clamp sugar.

v0.7.2 review-driven corrections

An external agent review reproduced a batch of real bugs; all of them are fixed and regression-tested (scripts/test-v072.mjs). Rows affected:

• Nested state blocks (hover/focus/... inside a rule) now sort AFTER the parent rule's own declarations, so nested overrides win the cascade. Nested @media, @signal and @layer blocks also keep their condition and layer (they used to be dropped, making nested dark mode silently dead).
• Declarations and a nested block can share one line (.card { bg: red; hover { } }) without the declaration being swallowed.
• Raw hex alpha is real: #ff0000/50 compiles to color-mix (was invalid /50px).
• Time properties take bare numbers as ms (transition-delay: 200 -> 200ms).
• grid: 3 gap 12 works; rows N joined the shorthand.
• seen { ... } rejects motion-arrow syntax loudly and points at the real forms.
• SVG and modern properties added: fill, stroke (and friends), text-wrap, content-visibility.
• ::part() rides the shadow pipeline; ::slotted() is rejected with an explanation (it only exists inside shadow trees).
• The gate prefilter now actually runs before native matches().
• State events scope candidate recomputation to the hovered subtree and its ancestors instead of the whole page (a 1k-card hover went from ~4,100 recomputes per event to the touched chain).
• checkbox/details states hear change and toggle events, so keyboard toggles and programmatic dispatch restyle immediately.