Global rules, attributes and parent states

import { const cx: (...a: css.ClassValue[]) => stringcx } from "cssints";
import * as import csscss from "cssints" with { type: "cssints" };

const const dark: css.QueryWrapdark = import csscss.
const media: Condition
<"(prefers-color-scheme: dark)">(query: "(prefers-color-scheme: dark)") => css.QueryWrap (+2 overloads)media("(prefers-color-scheme: dark)");

// a reset: rules with no class
import csscss.const global: <"*, *::before, *::after">(selector: "*, *::before, *::after", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global("*, *::before, *::after", import csscss.const boxSizing: <readonly ["border-box"]>(parts_0: "border-box") => css.Style
`content-box | border-box`. Chrome 10, Edge 12, Firefox 29, Safari 5.1, iOS 6, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/box-sizing)boxSizing("border-box"));
import csscss.const global: <"body">(selector: "body", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global("body", import csscss.const margin: <readonly ["0"]>(parts_0: "0") => css.Style
`<'margin-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/margin)margin("0"), import csscss.const margin: <readonly ["8px"]>(parts_0: "8px") => css.Style
`<'margin-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/margin)margin("8px")); // the later margin wins
import csscss.const global: <":root">(selector: ":root", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global(":root", import csscss.const colorScheme: <readonly ["light"]>(parts_0: "light") => css.Style
`normal | [ light | dark | <custom-ident> ]+ && only?`. Chrome 81, Edge 81, Firefox 96, Safari 13, iOS 13, Android 81. [MDN](https://developer.mozilla.org/docs/Web/CSS/color-scheme)colorScheme("light"), const dark: (...styles: css.Style[]) => css.Styledark(import csscss.const colorScheme: <readonly ["dark"]>(parts_0: "dark") => css.Style
`normal | [ light | dark | <custom-ident> ]+ && only?`. Chrome 81, Edge 81, Firefox 96, Safari 13, iOS 13, Android 81. [MDN](https://developer.mozilla.org/docs/Web/CSS/color-scheme)colorScheme("dark")));
import csscss.const global: <"a[href^='http'] > b">(selector: "a[href^='http'] > b", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global("a[href^='http'] > b", import csscss.const color: <readonly ["red"]>(parts_0: "red") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("red"));
import csscss.const global: <"a[href">(selector: "global(): unbalanced brackets or quotes in \"a[href\"", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global("a[href", import csscss.const color: <readonly ["red"]>(parts_0: "red") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("red")); // error: a bracket is open
Argument of type '"a[href"' is not assignable to parameter of type '"global(): unbalanced brackets or quotes in \"a[href\""'.
import csscss.const global: <"a >">(selector: "a >", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global("a >", import csscss.const color: <readonly ["red"]>(parts_0: "red") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("red")); // selector: unexpected end in "a >", expected <complex-selector-list>
import csscss.const global: <"a">(selector: "a", ...styles: css.Style[]) => void
`global(":root", media(dark)(colorScheme("dark")))`: a rule with no class, in layer `_.k`, in the sheet of the module
that calls it. The selector is a `<complex-selector-list>` (the build reads it, the types check the brackets and
quotes); the styles are plain declarations, under media(), container() or supports() if you like.global("a", import csscss.const hover: (...styles: css.Style[]) => css.Style
Chrome 1, Edge 12, Firefox 1, Safari 2, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/:hover)hover(import csscss.const color: <readonly ["red"]>(parts_0: "red") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("red"))); // global() takes media(), container() and supports() conditions, not :hover: write the state in the selector

// an attribute state, and the state of a marked ancestor
export const const row: css.Stylerow = import csscss.const cn: (...styles: css.Style[]) => css.Stylecn(import csscss.const group: <never>(name?: undefined) => css.Style
`group()` is the marker class `_g` for the element whose state `within()` reads; `group("row")` is `_g-row`, for a
nested group. It has no CSS of its own.group(), import csscss.const p: <readonly [2]>(parts_0: 2) => css.Style
`<'padding-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding)p(2));
export const const link: stringlink = function cx(...a: css.ClassValue[]): stringcx(
	import csscss.const color: <readonly ["gray"]>(parts_0: "gray") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("gray"),
	import csscss.const attr: <"aria-current">(name: "aria-current", value: string, op?: css.AttrOp) => css.StateWrap (+1 overload)attr("aria-current", "page")(import csscss.const color: <readonly ["blue"]>(parts_0: "blue") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/color)color("blue")),
	import csscss.const within: <never>(state: css.StateWrap, name?: undefined) => css.Wrap
`within(hover)(color("red"))` is the style while a marked ancestor is hovered: `:where(._g:hover) ._x`, one class of
specificity, one condition. `within(hover, "row")` reads the `group("row")` ancestor.within(import csscss.const hover: css.StateWrap
Chrome 1, Edge 12, Firefox 1, Safari 2, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/:hover)hover)(import csscss.const textDecoration: <readonly ["underline"]>(parts_0: "underline") => css.Style
`<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/text-decoration)textDecoration("underline")),
);
export const const icon: css.Styleicon = import csscss.const attr: <"href">(name: "href", value: string, op?: css.AttrOp) => css.StateWrap (+1 overload)attr("href", ".pdf", "$=")(import csscss.const opacity: <readonly [0.8]>(parts_0: 0.8) => css.Style
`<opacity-value>`. Chrome 1, Edge 12, Firefox 1, Safari 2, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/opacity)opacity(0.8));
export const const nested: css.Stylenested = import csscss.const cn: (...styles: css.Style[]) => css.Stylecn(import csscss.const group: <"card">(name?: "card" | undefined) => css.Style
`group()` is the marker class `_g` for the element whose state `within()` reads; `group("row")` is `_g-row`, for a
nested group. It has no CSS of its own.group("card"), import csscss.const within: <"card">(state: css.StateWrap, name?: "card" | undefined) => css.Wrap
`within(hover)(color("red"))` is the style while a marked ancestor is hovered: `:where(._g:hover) ._x`, one class of
specificity, one condition. `within(hover, "row")` reads the `group("row")` ancestor.within(import csscss.const focusVisible: css.StateWrap
Chrome 86, Edge 86, Firefox 85, Safari 15.4, iOS 15.4, Android 86. [MDN](https://developer.mozilla.org/docs/Web/CSS/:focus-visible)focusVisible, "card")(import csscss.const outline: <readonly ["2px solid"]>(parts_0: "2px solid") => css.Style
`<'outline-width'> || <'outline-style'> || <'outline-color'>`. Chrome 94, Edge 94, Firefox 88, Safari 16.4, iOS 16.4, Android 94. [MDN](https://developer.mozilla.org/docs/Web/CSS/outline)outline("2px solid")));
import csscss.const attr: <"a b">(name: "\"a b\" is not a name") => css.StateWrap (+1 overload)attr("a b"); // error: a name has no space
Argument of type '"a b"' is not assignable to parameter of type '"\"a b\" is not a name"'.
import csscss.const attr: <"a">(name: "a", value: string, op?: css.AttrOp) => css.StateWrap (+1 overload)attr("a", "x", "!="); // error: not an operator
Argument of type '"!="' is not assignable to parameter of type 'AttrOp | undefined'.
import csscss.const within: <never>(state: css.StateWrap, name?: undefined) => css.Wrap
`within(hover)(color("red"))` is the style while a marked ancestor is hovered: `:where(._g:hover) ._x`, one class of
specificity, one condition. `within(hover, "row")` reads the `group("row")` ancestor.within(css.media("(width >= 40rem)")); // error: a media query is not a state
Argument of type 'QueryWrap' is not assignable to parameter of type 'StateWrap'.
  Type 'QueryWrap' is not assignable to type '{ readonly __state: true; }'.

• css.global(selector, ...styles) is a rule with no class: body{margin:0}. The styles are member calls (margin("0"), cn(...)), checked by the grammar of each property like a class's (types at the member call, the build at the call of global(), with the support warnings). One property twice is the later one, as in cn(); two that overlap without one containing the other are the same build error. A media(), container() or supports() condition around a style makes an at-rule block around the rule (@media (prefers-color-scheme: dark){:root{color-scheme:dark}}); hover, attr() and within() are errors there, since a global rule has the selector for that (a:hover). A marker or kernel of a plugin member (frame(), icons()) is an error too: they need a class. A firstThatWorks() prints as in a class. The call returns nothing (void; the client has undefined in its place).
• The selector is a string checked at build time against <complex-selector-list> (css-selectors-4, mdn-data's grammar; css-grammar/src/selector.ts is a recogniser written over it, since the value twin drops the whitespace a selector is made of): type, *, #id, .class, [attr] with its operators, pseudo-classes and pseudo-elements, the combinators (descendant, >, +, ~, ||) and a list. The arguments of :is(), :not(), :nth-child() are balanced but not read (the grammar says <any-value>). & and a leading combinator are errors. A unknown pseudo-class is fine, as in the grammar. In the types the check is cheap: not empty, brackets and quotes pair up (about 180 instantiations a call); the build reads the rest and puts the message on the call.
• The sheet. A global rule is in the sheet of the module that calls it, once, in layer _.k: after the kernels, before the token sets and themes, in source order (by file, then call). It sets declarations on elements by selector, so it carries no hash class and no layer number; classes (_.a to _.e) are in later layers and win over it, so a reset in _.k never fights a component. Import a module with its global() calls (import "./reset.ts") to have them, as for a theme. A token that a global rule reads has its @property rule in the same sheet.
• @font-face and the other at-rules stay in CSS (keyframes() and positionTry() are the local ones): global() takes a selector and declarations, and an at-rule with no selector is not one.
• attr(name, value?, op?) is a condition like hover: attr("aria-current", "page")(color(...)) is ._x[aria-current="page"]{...}. No value is presence ([disabled]). The value is always quoted for you (" and \ escaped); op is = (default), ~= (a word of a list), |=, ^=, $= or *=. The name is an identifier (aria-current, data-state; no namespaces, no [, = or spaces), the value a string, and the case flag (i) is not offered. It counts as one condition (a layer, as hover). Among the rules of a layer it sorts after every pseudo-class, so an attribute state beats hover on the same property. Two attr() conditions that can both match and set one property sort by class name: keep them exclusive ([aria-current=page] and [aria-current=false]).
• group(name?) and within(state, name?) are the state of a marked ancestor. group() is a style that adds the fixed class _g (group("card") adds _g-card); it has no rule of its own, so the ancestor needs nothing else. within(hover)(color("red")) is :where(._g:hover) ._x{color:red}; within(hover, "card") reads the _g-card ancestor (any ancestor with that class, not the nearest one; use names to tell nested groups apart). A plugin member with group: true is the group named after its scope (within(hover, "stuck") reads sticky(), see "Plugins"). state is a pseudo-class wrapper or attr(...), not a media() and not another within(). It counts as one condition.
• Specificity of within() is one class. :where() has none, so :where(._g:hover) ._x is as specific as ._x:hover and ._x[aria-current="page"]. Without it the ancestor's class would make within(hover) (0,3,0) beat hover (0,2,0) whatever the order, and a nested md(within(hover)(...)) would fight the sheet's own order. Now the order decides, as for every condition: in a layer the ancestor's state comes first, then the pseudo-classes, then attributes, so an element's own state wins over its group's.
• :has() is not offered (has(...)): it is a selector on the ancestor that looks down, :where(._x:has(...)) would be a rule on another element than the class, and within() plus group() already say what it is used for in a card. It is a pseudo-class with arguments, like :nth-child().

@layer _.k {
	*, *::before, *::after{box-sizing:border-box}
	body{margin:8px}
	:root{color-scheme:light}@media (prefers-color-scheme: dark){:root{color-scheme:dark}}
	a[href^='http'] > b{color:red}
}
@layer _.b {
	:where(._g:hover) ._72037{text-decoration:underline}
	._fc1pxh[aria-current="page"]{color:blue}
	._pl3vkk[href$=".pdf"]{opacity:0.8}
}