milestone 23: put the reset in a cascade layer, guard that it stays there
This commit is contained in:
+1
-1
@@ -8,7 +8,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build && node scripts/stamp-dist.mjs",
|
||||
"build": "vite build && node scripts/assert-css-layers.mjs && node scripts/stamp-dist.mjs",
|
||||
"typecheck": "tsc -b",
|
||||
"lint": "oxlint src vite.config.ts",
|
||||
"format": "prettier --write .",
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
#!/usr/bin/env node
|
||||
// Every rule in the built stylesheet must sit inside a cascade layer
|
||||
// (milestone 23). Unlayered author CSS outranks every layer whatever its
|
||||
// selector says, so a single unlayered rule silently beats the StyleX atomic
|
||||
// rules it was written to sit under. That failure renders wrong and passes
|
||||
// every other gate: no test asserts computed style, and the bundler is happy.
|
||||
// This check runs from web/ as part of `npm run build`.
|
||||
|
||||
import { readdirSync, readFileSync } from "node:fs";
|
||||
import { dirname, join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const distDir = join(dirname(dirname(fileURLToPath(import.meta.url))), "dist", "assets");
|
||||
|
||||
const sheets = readdirSync(distDir).filter((name) => name.endsWith(".css"));
|
||||
if (sheets.length === 0) {
|
||||
console.error("assert-css-layers: no stylesheet in dist/assets — did the build emit one?");
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// At-rules that describe a resource or a name rather than styling an element.
|
||||
// They carry no cascade priority against a layer, so being outside one is
|
||||
// correct, and StyleX emits `@property` for its custom properties.
|
||||
const unlayerable = String.raw`@(?:layer|property|keyframes|font-face|counter-style|charset|import)`;
|
||||
|
||||
/** Strip comments, then every balanced block and statement the rule above allows. */
|
||||
function outsideLayers(css) {
|
||||
let rest = css.replace(/\/\*[\s\S]*?\*\//g, "");
|
||||
for (;;) {
|
||||
const at = rest.search(new RegExp(`${unlayerable}[^{;]*\\{`));
|
||||
if (at === -1) break;
|
||||
let depth = 0;
|
||||
let end = rest.indexOf("{", at);
|
||||
for (let i = end; i < rest.length; i += 1) {
|
||||
if (rest[i] === "{") depth += 1;
|
||||
else if (rest[i] === "}") {
|
||||
depth -= 1;
|
||||
if (depth === 0) {
|
||||
end = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
rest = rest.slice(0, at) + rest.slice(end + 1);
|
||||
}
|
||||
return rest.replace(new RegExp(`${unlayerable}[^;{}]*;`, "g"), "");
|
||||
}
|
||||
|
||||
/**
|
||||
* A rule that only sets custom properties styles nothing on its own — StyleX
|
||||
* emits its token `:root` block that way, ahead of its layers, and a variable
|
||||
* is consumed through `var()` rather than competing with a layered rule.
|
||||
*/
|
||||
function stylesSomething(body) {
|
||||
return body
|
||||
.split(";")
|
||||
.map((declaration) => declaration.trim())
|
||||
.some((declaration) => declaration.length > 0 && !declaration.startsWith("--"));
|
||||
}
|
||||
|
||||
let failed = false;
|
||||
for (const sheet of sheets) {
|
||||
const leftover = outsideLayers(readFileSync(join(distDir, sheet), "utf8"));
|
||||
for (const [, selector, body] of leftover.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
|
||||
if (!stylesSomething(body)) continue;
|
||||
console.error(
|
||||
`assert-css-layers: ${sheet} styles elements outside every @layer:\n` +
|
||||
` ${selector.trim().slice(0, 80)} { ${body.trim().slice(0, 60)} … }`,
|
||||
);
|
||||
failed = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (failed) {
|
||||
console.error("Wrap it in a layer declared before StyleX's, as web/src/styles.css does.");
|
||||
process.exit(1);
|
||||
}
|
||||
console.log(
|
||||
`every rule in ${sheets.length === 1 ? "the stylesheet" : `${sheets.length} stylesheets`} sits inside a cascade layer`,
|
||||
);
|
||||
+145
-97
@@ -9,116 +9,164 @@
|
||||
* their font. Deleting this block does not restore browser defaults — it
|
||||
* silently changes the meaning of every size and spacing value in the app.
|
||||
* Rules are limited to what this app renders; it is not a general reset.
|
||||
|
||||
* The reset lives in its own cascade layer, declared here before StyleX emits
|
||||
* its own. Layer order is priority order, and unlayered author CSS outranks
|
||||
* every layer: leaving these rules unlayered silently beat every StyleX rule in
|
||||
* the app, whatever the selector said.
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@layer reset {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
html {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
/* Headings carry their scale from StyleX, not from the user agent. */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
/* Headings carry their scale from StyleX, not from the user agent. */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
menu {
|
||||
list-style: none;
|
||||
}
|
||||
ul,
|
||||
ol,
|
||||
menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Links opt into colour and underline; the shell's nav wants neither. */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
/* Links opt into colour and underline; the shell's nav wants neither. */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-size: 1em;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* Form controls: inherit type and colour, drop the user-agent chrome, and keep
|
||||
* `appearance: button` so iOS Safari honours a button's border radius.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: 0 solid;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
/*
|
||||
* Form controls: inherit type and colour, drop the user-agent chrome, and keep
|
||||
* `appearance: button` so iOS Safari honours a button's border radius.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: 0 solid;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
appearance: button;
|
||||
}
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
/* A checkbox keeps its native chrome; the rules above would erase it. */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
appearance: auto;
|
||||
}
|
||||
/* A checkbox keeps its native chrome; the rules above would erase it. */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
appearance: auto;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
/*
|
||||
* WebKit lays a date/time input out from its own pseudo-elements, and an
|
||||
* empty one comes out shorter than a filled one without these. The query log
|
||||
* filters are two `datetime-local` inputs sitting in a row of controls, so
|
||||
* the height has to hold whether or not a value is set.
|
||||
*/
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
/* An inline SVG leaves a baseline gap under a full-width chart. */
|
||||
svg,
|
||||
img,
|
||||
video,
|
||||
canvas {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
::-webkit-datetime-edit,
|
||||
::-webkit-datetime-edit-year-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-minute-field,
|
||||
::-webkit-datetime-edit-second-field,
|
||||
::-webkit-datetime-edit-millisecond-field,
|
||||
::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Safari below 16.4 resolves `color-mix` against the wrong colour here and
|
||||
* renders the placeholder invisible. The guard admits every engine that
|
||||
* supports either a non-WebKit feature or one Safari only gained afterwards.
|
||||
*/
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* An inline SVG leaves a baseline gap under a full-width chart. */
|
||||
svg,
|
||||
img,
|
||||
video,
|
||||
canvas {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user