v0.8.2: one cascade across all stylesheets, fluid on the longhands

Found while rebuilding the website on its own engine.

- "Later wins" did not hold between stylesheets. Every sheet numbers its
rules from 0 and the engine sorted by (layer, order) comparing those raw
numbers across sheets, so a later sheet lost to an earlier one whenever
the earlier one had more rules above the rule in question. Reproduced with
a 30 rule sheet followed by a 1 rule sheet: the earlier colour won.
rebuild() now renumbers every rule into one global sequence in load order
(assignGlobalOrder, idempotent via order0). Layers still outrank order.
- Consequence: a tokens { } block in a later sheet now overrides a token an
earlier sheet set inside @media or @signal .
- fluid works on padding-top/right/bottom/left/inline/block, margin-*,
letter-spacing and border-radius, not only the four-sided shorthands.
- scripts/test-v082.mjs (27 assertions) runs the engine's own sort on rules
from real compiled sheets; the first check in each group reproduces the
old bug.
- docs: no em dashes in the markdown docs; GUIDE, README, PARITY, llms.txt
and the package USAGE updated; extension synced; zip, tarball and the
0.8.2 vsix rebuilt.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

GUIDE.md

@@ -6,7 +6,7 @@ example in this guide is compiled by `scripts/test-guide-examples.mjs` on every
 release, so the examples cannot drift from the compiler. If an example here
 stops compiling, that is a release blocker, not a docs bug.
 
-Status up front: DSSL is a real, tested style engine at v0.8.1, and it is
+Status up front: DSSL is a real, tested style engine at v0.8.2, and it is
 honest alpha. It needs JavaScript, it writes inline styles, and it has a
 first-paint story you should read before shipping anything serious (see
 "Honest limits"). Within those limits, it is genuinely nicer to write than
@@ -109,7 +109,7 @@ Token overrides can be scoped under `@media` or `@signal` for themes.
 .hero    { center: both }
 ```
 
-Each place word owns an axis (v0.8.0 — the example above used to silently
+Each place word owns an axis (v0.8.0, the example above used to silently
 lose the `between` because every word wrote both axes):
 
 - `between`, `around`, `evenly` are main-axis words (`justify-content`)
@@ -123,7 +123,8 @@ overwriting, and a word written twice warns too.
 ### Sizing that moves: fluid
 
 `font-size: fluid 16 24` (and any length-ish property: width, height, gap,
-padding, margin and friends) makes a size that grows smoothly with the window.
+padding, margin, their `-top` / `-bottom` / `-inline` / `-block` longhands,
+letter-spacing and border-radius) makes a size that grows smoothly with the window.
 It is 16px on a 360px wide screen, 24px on a 1200px wide one, and in between it
 slides along a straight line. Past either end it stays put.
 
@@ -142,6 +143,8 @@ What you get at a few window widths for `fluid 16 24`:
 
 A few things worth knowing:
 
+- `padding: fluid 8 16` sets all four sides. To make just one side fluid, use the
+  longhand: `padding-top: fluid 36 80`. (0.8.1 had no way to say that.)
 - Sizes can be px (bare numbers are px), rem or em. Both sizes need the same unit.
 - Percentages are refused with an error, because a percentage cannot follow the
   window width.
@@ -151,7 +154,7 @@ A few things worth knowing:
   right slope but forgot where the line starts, so sizes ran ahead of the
   window and hit their maximum around 840px instead of 1200px.
 
-### raw { } — the escape hatch
+### raw { }: the escape hatch
 
 DSSL has no sugar for `@font-face`, `@keyframes`, `@supports`, `@import` or
 `@property` yet. `raw { }` (alias `@css { }`) drops verbatim CSS into the
@@ -177,12 +180,18 @@ styles.dssl:3 warning: raw { } is verbatim CSS, so this line needs a ";" at the
 ```
 
 Unknown at-rules outside `raw { }` are skipped whole, with one clean error
-and a pointer here — they never leak their inner rules (that was a real
+and a pointer here, they never leak their inner rules (that was a real
 0.7.2 bug: `@supports (display:grid) { .a { … } }` applied `.a` everywhere
 after erroring).
 
 ### The cascade is (layer, order)
 
+(This holds across stylesheets too: a sheet loaded later beats one loaded before it.
+Versions up to 0.8.1 got that wrong. Each sheet counted its own rules from zero and
+the engine compared those numbers across sheets, so a later sheet could lose just
+because the earlier one was longer. 0.8.2 gives every rule one position in load
+order.)
+
 No specificity, no `!important`. Later wins inside a layer. Layers sort
 `tokens < base < components < utilities < pin`. Nested blocks do what the
 indentation says they do (fixed in v0.7.2, it used to be the engine's worst
@@ -283,7 +292,7 @@ for liveness. `unfreeze()` re-arms everything.
 
 Three ways to get it:
 
-1. Download `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files, then
+1. Download `dssl-vscode/dssl-vscode-0.8.2.vsix` from the repo files, then
    Extensions panel, `...`, Install from VSIX. Works in VS Code and VSCodium.
 2. Build it: `cd dssl-vscode && npx @vscode/vsce package --no-dependencies`.
 3. Registry listing: staged for Open VSX (the registry VSCodium searches).
@@ -316,6 +325,7 @@ The same output is available in the browser as `DSSL.toCSS(source)`.
 
 ```sh
 node cli/dssl.mjs check public/styles/*.dssl   # compile everything, exit code for CI
+node scripts/test-v082.mjs      # 0.8.2 regression suite (27 assertions)
 node scripts/test-v081.mjs      # 0.8.1 regression suite (37 assertions)
 node scripts/test-v073.mjs      # 0.8.0 regression suite (65 assertions)
 node scripts/test-guide-examples.mjs        # every guide example compiles
@@ -340,7 +350,7 @@ Read this before choosing DSSL for a real site.
 - **JavaScript is required** for the live engine. No JS, no styles at runtime.
   v0.8.0 adds the exit lane: `dssl build styles.dssl -o styles.css` compiles
   the static subset to a real stylesheet you can `<link>` instead of the
-  engine — tokens as custom properties, states as `:hover`, layers as
+  engine, tokens as custom properties, states as `:hover`, layers as
   `@layer`, motions as `@keyframes`, `raw { }` verbatim. What genuinely needs
   JS (`@signal`, `animate:`, deform, overlap) stays out and is counted in the
   report, so you always know what a no-JS page gives up. If a page must work
@@ -353,7 +363,7 @@ Read this before choosing DSSL for a real site.
   and is on the PARITY roadmap as the next big item.
 - **CSP.** Pseudo-elements compile to one real stylesheet the engine injects;
   strict `style-src 'self'` blocks inline style attributes and that sheet.
-  DSSL wants `unsafe-inline` for styles today — or use the `dssl build`
+  DSSL wants `unsafe-inline` for styles today, or use the `dssl build`
   output, which is a normal external stylesheet and CSP-clean.
 - **Interop is invasive.** DSSL normal declarations beat external CSS, and
   `pin` beats external `!important`. Mixing with an existing CSS design

PARITY.md

@@ -1,4 +1,4 @@
-# PARITY.md — DSSL vs CSS, honestly
+# 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
@@ -40,7 +40,7 @@ keeps working with the engine removed. No other styling replacement can say that
 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,
+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
@@ -57,6 +57,17 @@ so the boundary is explicit, not folklore.
 - 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.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:
@@ -81,7 +92,7 @@ A re-test of 0.8.0 found two bugs, and more showed up while writing the tests:
 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`
+- `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;

README.md

@@ -6,7 +6,7 @@ license: mit
 
 DSSL is a style language for the web. For the pages it fits, it replaces writing CSS entirely. It does not replace the CSS platform: the engine ends in inline styles that the browser parses, and it needs JavaScript. Where it wins is the authoring experience: tokens, words-as-layout, states and motion in one grammar, loud errors, zero build. PARITY.md keeps the honest feature ledger.
 
-Not a preprocessor that spits out stylesheets. Not a utility class graveyard. You write `.dssl` files, the page loads a small engine, and the engine walks your DOM in real time and applies every rule it matches straight onto the elements it finds. Nothing compiles at runtime — and since v0.8.0 there is also an exit lane: `dssl build` compiles the static subset of the same source to a real `.css` file for pages that must work without JavaScript or sit behind a strict CSP. You choose per page: live engine, built CSS, or both.
+Not a preprocessor that spits out stylesheets. Not a utility class graveyard. You write `.dssl` files, the page loads a small engine, and the engine walks your DOM in real time and applies every rule it matches straight onto the elements it finds. Nothing compiles at runtime, and since v0.8.0 there is also an exit lane: `dssl build` compiles the static subset of the same source to a real `.css` file for pages that must work without JavaScript or sit behind a strict CSP. You choose per page: live engine, built CSS, or both.
 
 Elements that show up later get styled the moment they appear. Change a rule and the page updates on the next pass. The language is the runtime.
 
@@ -68,7 +68,7 @@ Both drop a `dssl-engine/` folder next to you: the engine, a starter token set,
 
 Prefer to click: [dssl-engine.zip](https://dssl-sable.vercel.app/dssl-engine.zip) or [dssl-engine.tar.gz](https://dssl-sable.vercel.app/dssl-engine.tar.gz). Same package, straight from the browser.
 
-Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API): download `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. An Open VSX listing (so it appears in VSCodium's Extensions tab, searchable) is staged and publishes with one Open VSX token; see `dssl-vscode/PUBLISHING.md`.
+Writing your own .dssl? The official editor extension (`ehs-studio.dssl-vscode`) puts the real compiler in your editor: the squiggles are the same errors the browser console prints, completions come from your own token registry, and hovers explain the semantic vocabulary. One package for VS Code and VSCodium (same extension API): download `dssl-vscode/dssl-vscode-0.8.2.vsix` from the repo files, then Extensions panel -> ... -> Install from VSIX. An Open VSX listing (so it appears in VSCodium's Extensions tab, searchable) is staged and publishes with one Open VSX token; see `dssl-vscode/PUBLISHING.md`.
 
 AI agents and machine reviewers: this repo ships `llms.txt` (dense, structured facts), `AGENTS.md` (how to work on the codebase) and `PARITY.md` (the honest feature matrix against CSS). The site serves the same `llms.txt` at https://dssl-sable.vercel.app/llms.txt
 
@@ -346,7 +346,7 @@ v0.7 added warnings: things that compile, run, and are still probably not what y
 .nav-links {
   display: none
   column: gap 2   // warning: "column:" expands to display: flex and
-                  // overrides the earlier "display: none" — menu stays open
+                  // overrides the earlier "display: none", menu stays open
 }
 ```
 
@@ -415,17 +415,17 @@ DSSL.load(['/styles/app.dssl']).then(() => {
 
 ```js
 const rep = DSSL.explain(document.querySelector('.doc-card'))
-// rep.matched — [{ id, sel, layer, file, line, states, media, signals, decls }]
-// rep.wins    — [{ prop, value, by: { sel, file, line } }]
-// rep.pseudo  — the ::before / ::after rules touching this element
+// rep.matched: [{ id, sel, layer, file, line, states, media, signals, decls }]
+// rep.wins   : [{ prop, value, by: { sel, file, line } }]
+// rep.pseudo : the ::before / ::after rules touching this element
 ```
 
 The matcher also pre-filters every rule through a cheap class/tag/id gate extracted from the selector's rightmost compound, so a recompute skips obvious non-matches instead of asking the browser rule by rule. The gate only ever says no; anything it does not fully understand falls back to native matching.
 
-## What works today (v0.8.1)
+## What works today (v0.8.2)
 
 - the full selector surface, including `:nth-child`, `:not`, `:is`, `:where`, `:has`
-- flexbox and grid with `row:` / `column:` / `grid:` / `stack:` / `center:` sugar — place words now own an axis (`between` is main-axis, `stretch` is cross-axis) and conflicts warn instead of silently overwriting
+- flexbox and grid with `row:` / `column:` / `grid:` / `stack:` / `center:` sugar, place words now own an axis (`between` is main-axis, `stretch` is cross-axis) and conflicts warn instead of silently overwriting
 - behaviors and `use`
 - design tokens, numeric keys included, scoped per file and per subtree
 - states, engine-native `seen`, `stagger` choreography
@@ -435,7 +435,8 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 - the overlap policy and `pointer-events` pass-through for veils
 - pseudo-elements in any spelling (shadow CSS), themed scrollbars included
 - `raw { }` / `@css { }` for verbatim CSS (`@font-face`, `@keyframes`, `@supports`); unknown at-rules skip their whole block with one clean error
-- `fluid 16 24` sizing sugar on any length property
+- `fluid 16 24` sizing sugar on any length property, including `padding-top`, `margin-block` and the other longhands
+- one cascade across every stylesheet: a sheet loaded later beats an earlier one (fixed in 0.8.2)
 - the CLI: `dssl check` (CI, --json, --strict) and `dssl build` (real CSS from the static subset, also with --strict)
 - compiler warnings for cascade-order footguns and duplicate axis words
 - `DSSL.freeze()` / `DSSL.unfreeze()` / `DSSL.explain()` / `DSSL.toCSS()`
@@ -457,7 +458,7 @@ The matcher also pre-filters every rule through a cheap class/tag/id gate extrac
 
 ## Status
 
-v0.8.1, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite, and the docs examples are rendered and asserted in a real browser, so the guide cannot lie. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; when a page must work without JavaScript, build the static subset with `dssl build` or pick another tool for that page. Freeze makes big static pages viable; live interaction is what the engine is for.
+v0.8.2, experimental, moving fast. The language grows whenever the site needs something it cannot express yet, so the site doubles as the test suite, and the docs examples are rendered and asserted in a real browser, so the guide cannot lie. Honest ledger: great for creative sites, prototypes, docs, playgrounds and internal tools; when a page must work without JavaScript, build the static subset with `dssl build` or pick another tool for that page. Freeze makes big static pages viable; live interaction is what the engine is for.
 
 ## License
 

dssl-vscode/lib/engine/resolver.js

@@ -946,7 +946,12 @@ const SEMANTIC = {
  * (360px and 1200px by default) — the formula everyone writes by hand and
  * gets wrong. */
 const FLUID_PROPS = new Set(('font-size,width,height,inline-size,block-size,min-width,max-width,min-height,max-height,' +
-  'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left').split(','));
+  'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left,' +
+  // 0.8.2: the longhands. The site's own hero wanted a fluid padding-top and
+  // there was no way to say it, because `padding: fluid ...` is all four sides.
+  'padding-top,padding-right,padding-bottom,padding-left,padding-inline,padding-block,' +
+  'margin-top,margin-right,margin-bottom,margin-left,margin-inline,margin-block,' +
+  'letter-spacing,border-radius').split(','));
 
 function buildFluidParts(parts, ctx, prop = 'font-size') {
   const bad = (s, why) => {

dssl-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "dssl-vscode",
   "displayName": "DSSL Language Support",
   "description": "The DSSL style language in your editor: syntax highlighting, real-compiler diagnostics (the same errors the browser console shows), completions from the live token registry, hover docs. Works in VS Code and VSCodium.",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "publisher": "ehs-studio",
   "icon": "icon.png",
   "license": "MIT",

engine-package/USAGE.md

@@ -1,4 +1,4 @@
-# DSSL engine — quickstart
+# DSSL engine: quickstart
 
 DSSL is a style language that runs in the browser. You write `.dssl` files, add two tags to your page, and the engine does the rest. No compiler, no build step, no CSS output. The engine walks your DOM live and writes styles straight onto the elements it matches, including elements that show up later.
 

llms.txt

@@ -1,18 +1,18 @@
 # DSSL
 
-> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform. You write `.dssl` files, the page loads the engine (about 58 kB gzipped, about 190 kB as plain source), and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS at runtime — but v0.8.0 adds the exit lane: `dssl build` compiles the static subset to a real .css file for no-JS, strict-CSP or size-critical pages. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
+> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform. You write `.dssl` files, the page loads the engine (about 58 kB gzipped, about 190 kB as plain source), and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS at runtime, but v0.8.0 adds the exit lane: `dssl build` compiles the static subset to a real .css file for no-JS, strict-CSP or size-critical pages. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
 
 - Site (docs, playground, changelog, bench): https://dssl-sable.vercel.app
 - Repo + full docs in the README: https://huggingface.co/EHS-Studio/dssl
 - Install: `curl -fsSL https://dssl-sable.vercel.app/install.sh | sh` (or the zip: https://dssl-sable.vercel.app/dssl-engine.zip)
-- Version: 0.8.1 (engine), MIT license
+- Version: 0.8.2 (engine), MIT license
 - Feature matrix vs CSS: see PARITY.md in the repo
 - For agents working ON the codebase: see AGENTS.md in the repo
 
 ## The five things reviewers ask about
 
 1. No build step. Styles are source files linked with `<link rel="stylesheet/dssl">` or embedded in the page as `<style type="text/dssl">` / `<script type="text/dssl">` blocks (auto-booted in document order). The engine restyles the live DOM, including nodes added later.
-2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled — unless you build the static subset: `dssl build styles.dssl -o styles.css` emits real CSS (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, `raw { }` verbatim, `seen` applied as its no-JS final state) and the report counts what stays runtime-only (`@signal` rules, `animate:`). For content pages that must not flash, use the build output or choose another tool.
+2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled, unless you build the static subset: `dssl build styles.dssl -o styles.css` emits real CSS (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, `raw { }` verbatim, `seen` applied as its no-JS final state) and the report counts what stays runtime-only (`@signal` rules, `animate:`). For content pages that must not flash, use the build output or choose another tool.
 3. Exit cost is zero. Abandoning DSSL leaves you a page of valid inline styles and one small shadow stylesheet for pseudo-elements. There is nothing to un-install from your markup.
 4. Speed has a handbrake. `DSSL.freeze()` detaches every observer and listener after first paint and leaves the resolved look at zero engine cost; `unfreeze()` re-arms. A gate prefilter skips obvious non-matches before native matching. The Bench page on the site measures 100 / 1,000 / 10,000 nodes on your machine: CSS `<style>` vs DSSL live vs DSSL frozen.
 5. The cascade is (layer, source order). No specificity, no !important. Nested state blocks sort after the parent rule's own declarations (v0.7.2 fix: they used to lose), and nested `@media`/`@signal`/`@layer` keep their condition. `pin { }` is the only must-win block. The compiler refuses to guess: unknown tokens, properties and values fail loudly with did-you-mean; `--*` custom properties pass through unvalidated on purpose.
@@ -31,7 +31,7 @@
 - Overlap policy: nothing below 100% opacity overlaps anything unless `overlap: allow`; `deny` is unconditional; pairs with `pointer-events: none` so veils stop eating clicks and text selection.
 - Behaviors: named rule groups applied with `use focus-ring`.
 - Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error. Inside raw { } semicolons are required (it is real CSS); a missing one is a warning with a line number.
-- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports (exactly the first size at 360px and the second at 1200px; px, rem or em, no percentages; shrinking sizes work); `fluid: 16, 24` still works. 0.8.1 fixed the math: 0.8.0 left out the intercept, so sizes were too large on small screens.
+- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports (exactly the first size at 360px and the second at 1200px; px, rem or em, no percentages; shrinking sizes work); `fluid: 16, 24` still works; it also works on the longhands (`padding-top`, `margin-block`, `letter-spacing`, `border-radius`) since 0.8.2. 0.8.2 also made the cascade global: a stylesheet loaded later always beats an earlier one, and a later `tokens { }` block overrides an earlier conditional token. 0.8.1 fixed the math: 0.8.0 left out the intercept, so sizes were too large on small screens.
 - v0.8.0 review-driven fixes, all regression-tested incl. headless-Chromium computed-style tests of the docs: row/column axis roles (the documented `between center` example laid out wrong before); @font-face no longer crashes the compiler (unknown at-rules skip balanced); @supports inner rules no longer leak unconditionally; `url(...)` is atomic (unquoted form no longer false-errors); `!important` is a loud error that emits nothing; the animation shorthand warns when its motion is undefined instead of suggesting "span"; CSS-order transition values get the exact DSSL conversion in the error hint.
 - v0.7.2 review-driven fixes, all regression-tested: gate prefilter runs before native matches(); hover state events scope candidate recomputation to the touched subtree plus ancestors (was page-wide); checkbox/details states listen to `change`/`toggle`; raw hex alpha (`#ff0000/50` -> color-mix); bare numbers on time properties are ms; `::part()` supported, `::slotted()` rejected with an explanation; SVG properties (`fill`, `stroke*`) and `text-wrap`/`content-visibility` in the vocabulary.
 - Warnings channel (v0.7): things that compile but are probably wrong, e.g. a layout shorthand expanding to `display` and clobbering an earlier explicit `display:` in the same rule.
@@ -62,4 +62,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## Editor support
 
-The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. Install `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. Install `dssl-vscode/dssl-vscode-0.8.2.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.

public/dssl/engine.js

@@ -23,6 +23,36 @@ import { composeDeform, arcLayout } from './utils.js';
 
 const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
 
+/* 0.8.2: one cascade position per rule, across every stylesheet on the page.
+ *
+ * A rule's own `order` is just its place inside the sheet it was written in:
+ * every sheet counts from 0. The cascade sorts by (layer, order), so when two
+ * sheets were combined their numbers were compared as if they were one count,
+ * and a later sheet's rule could lose to an earlier sheet's rule purely
+ * because the earlier sheet had more rules above it. "Later wins" held inside
+ * a sheet and not between them. That is also why a tokens block in a later
+ * sheet could not override a conditional token from an earlier one.
+ *
+ * This puts the bundles in load order and shifts each one's numbers past the
+ * end of the one before. The sheet's own numbers are kept in `order0`, so
+ * calling it again after a rebuild gives the same result instead of drifting.
+ */
+export function assignGlobalOrder(bundlesInLoadOrder) {
+  let base = 0;
+  for (const b of bundlesInLoadOrder) {
+    let max = -1;
+    for (const list of [b.rules, b.shadowRules, b.raws]) {
+      if (!list) continue;
+      for (const r of list) {
+        if (r.order0 === undefined) r.order0 = r.order;
+        r.order = base + r.order0;
+        if (r.order0 > max) max = r.order0;
+      }
+    }
+    base += max + 1;
+  }
+}
+
 // v0.3.4 — alignment implies a formatting context.
 // place-items / place-content / align-* / justify-* only arrange children
 // inside flex or grid containers. On a plain <span> or <button> they used to
@@ -175,6 +205,7 @@ export class DsslEngine {
     const shadowRules = [];
     const raws = [];
     const bundles = [...this.bundles.values()].sort((a, b) => a.seq - b.seq);
+    assignGlobalOrder(bundles);
     for (const b of bundles) {
       for (const r of b.rules) {
         rules.push(r); // scoped engines map :root rules onto the scope element

public/dssl/index.js

@@ -19,7 +19,7 @@ import { resolve, DEFAULT_TOKENS } from './resolver.js';
 import { toCSS as docToCSS } from './static.js';
 import { DsslEngine } from './engine.js';
 
-export const VERSION = '0.8.1';
+export const VERSION = '0.8.2';
 
 let counter = 0;
 const engines = new Map();

public/dssl/resolver.js

@@ -946,7 +946,12 @@ const SEMANTIC = {
  * (360px and 1200px by default) — the formula everyone writes by hand and
  * gets wrong. */
 const FLUID_PROPS = new Set(('font-size,width,height,inline-size,block-size,min-width,max-width,min-height,max-height,' +
-  'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left').split(','));
+  'gap,row-gap,column-gap,padding,margin,inset,top,right,bottom,left,' +
+  // 0.8.2: the longhands. The site's own hero wanted a fluid padding-top and
+  // there was no way to say it, because `padding: fluid ...` is all four sides.
+  'padding-top,padding-right,padding-bottom,padding-left,padding-inline,padding-block,' +
+  'margin-top,margin-right,margin-bottom,margin-left,margin-inline,margin-block,' +
+  'letter-spacing,border-radius').split(','));
 
 function buildFluidParts(parts, ctx, prop = 'font-size') {
   const bad = (s, why) => {

public/llms.txt

@@ -1,18 +1,18 @@
 # DSSL
 
-> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform. You write `.dssl` files, the page loads the engine (about 58 kB gzipped, about 190 kB as plain source), and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS at runtime — but v0.8.0 adds the exit lane: `dssl build` compiles the static subset to a real .css file for no-JS, strict-CSP or size-critical pages. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
+> DSSL is a style language for the web. For JS-guaranteed pages it replaces writing CSS; it does not replace the CSS platform. You write `.dssl` files, the page loads the engine (about 58 kB gzipped, about 190 kB as plain source), and the engine walks the DOM in real time applying every matched rule as inline styles. Nothing compiles to CSS at runtime, but v0.8.0 adds the exit lane: `dssl build` compiles the static subset to a real .css file for no-JS, strict-CSP or size-critical pages. Elements added later are styled the moment they appear; signals, states and motion share one grammar.
 
 - Site (docs, playground, changelog, bench): https://dssl-sable.vercel.app
 - Repo + full docs in the README: https://huggingface.co/EHS-Studio/dssl
 - Install: `curl -fsSL https://dssl-sable.vercel.app/install.sh | sh` (or the zip: https://dssl-sable.vercel.app/dssl-engine.zip)
-- Version: 0.8.1 (engine), MIT license
+- Version: 0.8.2 (engine), MIT license
 - Feature matrix vs CSS: see PARITY.md in the repo
 - For agents working ON the codebase: see AGENTS.md in the repo
 
 ## The five things reviewers ask about
 
 1. No build step. Styles are source files linked with `<link rel="stylesheet/dssl">` or embedded in the page as `<style type="text/dssl">` / `<script type="text/dssl">` blocks (auto-booted in document order). The engine restyles the live DOM, including nodes added later.
-2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled — unless you build the static subset: `dssl build styles.dssl -o styles.css` emits real CSS (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, `raw { }` verbatim, `seen` applied as its no-JS final state) and the report counts what stays runtime-only (`@signal` rules, `animate:`). For content pages that must not flash, use the build output or choose another tool.
+2. Honest trade: it is a JS runtime. If JavaScript is unavailable the page renders unstyled, unless you build the static subset: `dssl build styles.dssl -o styles.css` emits real CSS (tokens → custom properties, states → :hover, layers → @layer, motions → @keyframes, `raw { }` verbatim, `seen` applied as its no-JS final state) and the report counts what stays runtime-only (`@signal` rules, `animate:`). For content pages that must not flash, use the build output or choose another tool.
 3. Exit cost is zero. Abandoning DSSL leaves you a page of valid inline styles and one small shadow stylesheet for pseudo-elements. There is nothing to un-install from your markup.
 4. Speed has a handbrake. `DSSL.freeze()` detaches every observer and listener after first paint and leaves the resolved look at zero engine cost; `unfreeze()` re-arms. A gate prefilter skips obvious non-matches before native matching. The Bench page on the site measures 100 / 1,000 / 10,000 nodes on your machine: CSS `<style>` vs DSSL live vs DSSL frozen.
 5. The cascade is (layer, source order). No specificity, no !important. Nested state blocks sort after the parent rule's own declarations (v0.7.2 fix: they used to lose), and nested `@media`/`@signal`/`@layer` keep their condition. `pin { }` is the only must-win block. The compiler refuses to guess: unknown tokens, properties and values fail loudly with did-you-mean; `--*` custom properties pass through unvalidated on purpose.
@@ -31,7 +31,7 @@
 - Overlap policy: nothing below 100% opacity overlaps anything unless `overlap: allow`; `deny` is unconditional; pairs with `pointer-events: none` so veils stop eating clicks and text selection.
 - Behaviors: named rule groups applied with `use focus-ring`.
 - Verbatim escape hatch (v0.8.0): `raw { }` / `@css { }` drops real CSS (@font-face, @keyframes, @supports, @import, @property) into the page stylesheet untouched; unknown at-rules skip their whole block with one clean error. Inside raw { } semicolons are required (it is real CSS); a missing one is a warning with a line number.
-- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports (exactly the first size at 360px and the second at 1200px; px, rem or em, no percentages; shrinking sizes work); `fluid: 16, 24` still works. 0.8.1 fixed the math: 0.8.0 left out the intercept, so sizes were too large on small screens.
+- Fluid sugar (v0.8.0): `font-size: fluid 16 24` (and any length-ish property) compiles to the linear clamp() between 360px and 1200px viewports (exactly the first size at 360px and the second at 1200px; px, rem or em, no percentages; shrinking sizes work); `fluid: 16, 24` still works; it also works on the longhands (`padding-top`, `margin-block`, `letter-spacing`, `border-radius`) since 0.8.2. 0.8.2 also made the cascade global: a stylesheet loaded later always beats an earlier one, and a later `tokens { }` block overrides an earlier conditional token. 0.8.1 fixed the math: 0.8.0 left out the intercept, so sizes were too large on small screens.
 - v0.8.0 review-driven fixes, all regression-tested incl. headless-Chromium computed-style tests of the docs: row/column axis roles (the documented `between center` example laid out wrong before); @font-face no longer crashes the compiler (unknown at-rules skip balanced); @supports inner rules no longer leak unconditionally; `url(...)` is atomic (unquoted form no longer false-errors); `!important` is a loud error that emits nothing; the animation shorthand warns when its motion is undefined instead of suggesting "span"; CSS-order transition values get the exact DSSL conversion in the error hint.
 - v0.7.2 review-driven fixes, all regression-tested: gate prefilter runs before native matches(); hover state events scope candidate recomputation to the touched subtree plus ancestors (was page-wide); checkbox/details states listen to `change`/`toggle`; raw hex alpha (`#ff0000/50` -> color-mix); bare numbers on time properties are ms; `::part()` supported, `::slotted()` rejected with an explanation; SVG properties (`fill`, `stroke*`) and `text-wrap`/`content-visibility` in the vocabulary.
 - Warnings channel (v0.7): things that compile but are probably wrong, e.g. a layout shorthand expanding to `display` and clobbering an earlier explicit `display:` in the same rule.
@@ -62,4 +62,4 @@ Wait for the `dssl-ready` event on `window` before measuring layout: the engine
 
 ## Editor support
 
-The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. Install `dssl-vscode/dssl-vscode-0.8.1.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.
+The official extension (VS Code and VSCodium, same .vsix) bundles the real parser and resolver: diagnostics identical to the browser console, completions from the workspace token registry, hover docs for the semantic vocabulary. Install `dssl-vscode/dssl-vscode-0.8.2.vsix` from the repo files. Source lives in `dssl-vscode/` in the repo.

scripts/test-v082.mjs

@@ -0,0 +1,116 @@
+/* test-v082.mjs: one assertion per change in 0.8.2.
+ * Found while rebuilding the site on its own engine:
+ *   1. "later wins" did not hold BETWEEN stylesheets. Each sheet numbers its
+ *      rules from 0 and the cascade compared those numbers across sheets, so a
+ *      later sheet lost to an earlier one that simply had more rules above the
+ *      rule in question. Fixed by giving every rule one global position.
+ *   2. a later tokens { } block could not override a token an earlier sheet
+ *      set inside @media or @signal (same cause).
+ *   3. fluid did not work on padding-top, margin-block and the other longhands.
+ * The cascade tests use the engine's own sort (layer rank, then order) on rules
+ * from real compiled sheets, so they check the thing that was wrong. */
+import { assignGlobalOrder } from '../public/dssl/engine.js';
+import { compile } from '../public/dssl/index.js';
+
+let pass = 0, fail = 0;
+const ok = (name, cond, extra) => {
+  if (cond) { pass++; console.log(`  ok  ${name}`); }
+  else { fail++; console.log(`FAIL  ${name}${extra ? '; ' + extra : ''}`); }
+};
+
+const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
+const cascade = (rules) => [...rules].sort((a, b) => (LAYER_RANK[a.layer] ?? 2) - (LAYER_RANK[b.layer] ?? 2) || a.order - b.order);
+const bundleOf = (src) => { const { doc } = compile(src, 't.dssl'); return { rules: doc.rules, shadowRules: doc.shadowRules, raws: doc.raws || [] }; };
+const winner = (rules, sel) => cascade(rules.filter((r) => r.sel === sel)).pop();
+const val = (rule, prop) => rule.decls.filter((d) => d.prop === prop).pop()?.value;
+
+/* ---- 1: later sheets win ---- */
+{
+  let filler = '';
+  for (let i = 0; i < 30; i++) filler += `.zz${i} { color: green }\n`;
+  const first = bundleOf(filler + '.x { color: red }');
+  const second = bundleOf('.x { color: blue }');
+  const before = winner([...first.rules, ...second.rules], '.x');
+  ok('1a. the bug: without a global order the EARLIER sheet wins', val(before, 'color') === 'red', val(before, 'color'));
+
+  const a = bundleOf(filler + '.x { color: red }');
+  const b = bundleOf('.x { color: blue }');
+  assignGlobalOrder([a, b]);
+  const after = winner([...a.rules, ...b.rules], '.x');
+  ok('1b. with a global order the LATER sheet wins', val(after, 'color') === 'blue', val(after, 'color'));
+
+  const lastOfFirst = Math.max(...a.rules.map((r) => r.order));
+  const firstOfSecond = Math.min(...b.rules.map((r) => r.order));
+  ok('1c. every rule of a later sheet sorts after every rule of an earlier one', firstOfSecond > lastOfFirst, `${firstOfSecond} vs ${lastOfFirst}`);
+
+  const snapshot = [...a.rules, ...b.rules].map((r) => r.order).join(',');
+  assignGlobalOrder([a, b]);
+  assignGlobalOrder([a, b]);
+  ok('1d. it is idempotent: rebuilding does not make the numbers drift', [...a.rules, ...b.rules].map((r) => r.order).join(',') === snapshot);
+
+  // replacing a sheet in place: new rules get numbered from the same slot
+  const b2 = bundleOf('.x { color: purple }\n.y { color: teal }');
+  assignGlobalOrder([a, b2]);
+  ok('1e. a replaced sheet still sorts after the sheet before it', val(winner([...a.rules, ...b2.rules], '.x'), 'color') === 'purple');
+
+  // three sheets in a row
+  const c = bundleOf('.x { color: orange }');
+  assignGlobalOrder([a, b2, c]);
+  ok('1f. with three sheets the last one wins', val(winner([...a.rules, ...b2.rules, ...c.rules], '.x'), 'color') === 'orange');
+
+  // within one sheet nothing changed: the later line still wins
+  const one = bundleOf('.x { color: red }\n.x { color: green }');
+  assignGlobalOrder([one]);
+  ok('1g. inside one sheet the later rule still wins', val(winner(one.rules, '.x'), 'color') === 'green');
+
+  // layers still outrank order: a utilities rule in an EARLY sheet beats a components rule in a late one
+  const early = bundleOf('@layer utilities { .x { margin-top: 0 } }');
+  const late = bundleOf('.x { margin-top: 30 }');
+  assignGlobalOrder([early, late]);
+  ok('1h. layers still outrank load order', val(winner([...early.rules, ...late.rules], '.x'), 'margin-top') === '0px');
+
+  // shadow (pseudo-element) rules and raw blocks are renumbered with their sheet
+  const sh1 = bundleOf('.a::before { content: "a" }');
+  const sh2 = bundleOf('.a::before { content: "b" }');
+  assignGlobalOrder([sh1, sh2]);
+  ok('1i. pseudo-element rules follow the same global order', sh2.shadowRules[0].order > sh1.shadowRules[0].order);
+}
+
+/* ---- 2: a later tokens block beats an earlier conditional token ---- */
+{
+  const palettes = bundleOf(`tokens { color { accent: red } }
+@media (prefers-color-scheme: dark) { tokens { color { accent: pink } } }`);
+  const later = bundleOf('tokens { color { accent: blue } }');
+  const tokenRules = (b) => b.rules.filter((r) => r.layer === 'tokens' && r.decls.some((d) => d.prop === '--dssl-color-accent'));
+  const before = cascade([...tokenRules(palettes), ...tokenRules(later)]).pop();
+  ok('2a. the bug: an earlier conditional token out-ranked a later tokens block', before.decls.some((d) => d.value === 'pink'));
+
+  const p = bundleOf(`tokens { color { accent: red } }
+@media (prefers-color-scheme: dark) { tokens { color { accent: pink } } }`);
+  const l = bundleOf('tokens { color { accent: blue } }');
+  assignGlobalOrder([p, l]);
+  const after = cascade([...tokenRules(p), ...tokenRules(l)]).pop();
+  ok('2b. now the later tokens block wins, even in dark mode', after.decls.some((d) => d.value === 'blue'));
+}
+
+/* ---- 3: fluid on the longhands ---- */
+{
+  const evalClamp = (css, vw) => {
+    const m = /^clamp\(\s*(-?[\d.]+)px,\s*calc\(\s*(-?[\d.]+)px\s*\+\s*(-?[\d.]+)vw\s*\),\s*(-?[\d.]+)px\s*\)$/.exec(css);
+    if (!m) return NaN;
+    return Math.min(+m[4], Math.max(+m[1], +m[2] + (+m[3] * vw) / 100));
+  };
+  const near = (x, y) => Math.abs(x - y) < 0.01;
+  for (const prop of ['padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'padding-inline', 'padding-block', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'margin-inline', 'margin-block', 'letter-spacing', 'border-radius']) {
+    const { doc, ok: good } = compile(`.a { ${prop}: fluid 8 24 }`);
+    const v = doc.rules[0]?.decls.find((d) => d.prop === prop)?.value;
+    ok(`3. ${prop}: fluid 8 24 is 8px at 360 and 24px at 1200`, good && near(evalClamp(v, 360), 8) && near(evalClamp(v, 1200), 24), v);
+  }
+  const still = compile('.a { padding: fluid 8 16 }');
+  ok('3b. the shorthand still works', still.ok && /^clamp\(/.test(still.doc.rules[0].decls[0].value));
+  const nope = compile('.a { opacity: fluid 0 1 }');
+  ok('3c. fluid on a property that cannot take it is still an error, not silence', !nope.ok);
+}
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

src/app/api/route.ts

@@ -1,5 +0,0 @@
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  return NextResponse.json({ message: "Hello, world!" });
-}