Conditions and layers

Conditions are wrapper functions. A wrapper takes styles and returns them under its condition. Wrappers nest.

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

const const md: css.QueryWrapmd = import csscss.
const media: Condition
<"(width >= 40rem)">(query: "(width >= 40rem)") => css.QueryWrap (+2 overloads)media("(width >= 40rem)");
const [const tablet: css.QueryWraptablet, const wide: css.QueryWrapwide] = import csscss.
const media: Condition
<readonly ["(width >= 40rem)", "(width >= 60rem)"]>(queries_0: "(width >= 40rem)", queries_1: "(width >= 60rem)") => readonly [css.QueryWrap, css.QueryWrap] (+2 overloads)media("(width >= 40rem)", "(width >= 60rem)");
const { const sm: css.QueryWrapsm, const lg: css.QueryWraplg } = import csscss.
const media: Condition
<{
    readonly sm: "(width >= 30rem)";
    readonly lg: "(width >= 60rem)";
}>(queries: {
    readonly sm: "(width >= 30rem)";
    readonly lg: "(width >= 60rem)";
}) => {
    readonly sm: css.QueryWrap;
    readonly lg: css.QueryWrap;
} (+2 overloads)media({ sm: "(width >= 30rem)"sm: "(width >= 30rem)", lg: "(width >= 60rem)"lg: "(width >= 60rem)" });
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)");
const const narrow: css.QueryWrapnarrow = import csscss.
const container: Condition
<"sidebar (width < 30rem)">(query: "sidebar (width < 30rem)") => css.QueryWrap (+2 overloads)container("sidebar (width < 30rem)");
const const grid: css.Wrapgrid = import csscss.
const supports: Condition
<"(display: grid)">(query: "(display: grid)") => css.Wrap (+2 overloads)supports("(display: grid)");

export const const styles: stringstyles = function cx(...a: css.ClassValue[]): stringcx(
	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),
	const md: (...styles: css.Style[]) => css.Stylemd(import csscss.const pl: <readonly ["8ch"]>(parts_0: "8ch") => css.Style
`<length-percentage [0,∞]>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding-left)pl("8ch"), import csscss.const pt: <readonly [4]>(parts_0: 4) => css.Style
`<length-percentage [0,∞]>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding-top)pt(4)),
	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 bg: <readonly ["#eee"]>(parts_0: "#eee") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/background-color)bg("#eee")),
	const md: (...styles: css.Style[]) => css.Stylemd(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 bg: <readonly ["#ddd"]>(parts_0: "#ddd") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/background-color)bg("#ddd"))),
	const prop: booleanprop && const lg: (...styles: css.Style[]) => css.Stylelg(import csscss.const p: <readonly [8]>(parts_0: 8) => 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(8)),
);
export const const forms: stringforms = function cx(...a: css.ClassValue[]): stringcx(const dark: (...styles: css.Style[]) => css.Styledark(import csscss.const bg: <readonly ["#111"]>(parts_0: "#111") => css.Style
`<color>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/background-color)bg("#111")), const narrow: (...styles: css.Style[]) => css.Stylenarrow(import csscss.const m: <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)m(0)), const grid: (...styles: css.Style[]) => css.Stylegrid(import csscss.const display: <readonly ["grid"]>(parts_0: "grid") => css.Style
`[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | grid-lanes | inline-grid-lanes | <display-outside> || [ <display-inside> | math ]`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/display)display("grid")), const tablet: (...styles: css.Style[]) => css.Styletablet(import csscss.const m: <readonly [1]>(parts_0: 1) => 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)m(1)), const wide: (...styles: css.Style[]) => css.Stylewide(import csscss.const m: <readonly [2]>(parts_0: 2) => 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)m(2)), const sm: (...styles: css.Style[]) => css.Stylesm(import csscss.const m: <readonly [3]>(parts_0: 3) => 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)m(3)));

• Pseudo-classes are ready-made wrappers named after the selector: hover, focus, focusVisible, active, disabled, and so on: 49 of them, from mdn-data selectors.json (standard pseudo-classes without arguments). Functional ones (:nth-child()) are not wrappers.
• Query strings are checked against the mdn-data grammar (<media-query-list>, <container-condition>, <supports-condition>), in types and at build time, like property values. A range needs parentheses: (width > 40rem), not min-width > 40rem. supports() takes property declarations; a typo in the property ((display: grdi)) is a build error, not a type error.
• Layer = number of conditions. A style with no condition goes to _.a, one condition to _.b, two to _.c, and so on up to _.e. A fifth condition is a build error. A media query, a container query, supports and a pseudo-class each count as one. _.k comes first and holds kernels, global rules, token and theme rules. A theme or a plugin rule may name a top-level layer instead (createGlobalTheme(t, selector, overrides, { layer: "app" }), a plugin's globals: [{ css, layer: "app" }]): the layers you declare with layers() (see "Themes") come after the class layers, so a look beats the engine's :root fallbacks (Mise en Mode's @layer app, author, viewer), and those declared with { before: true } come before _.k, so every style beats them (@cssints/reset's @layer reset).
• Order inside a layer comes from the sorted stylesheet. Each condition has a rank: a pseudo-class by its place in the list (link, visited, any-link, focus-within, hover, focus, focus-visible, active first), a media or container query by its min-width in px ((min-width: X) or (width >= X) in px, rem or em; 0 when none can be read). Rules sort by the ranks of their chain. With equal layers, hover(...) beats md(...) by specificity.
• Class names hash the declaration together with its condition chain.
• Bindings. const md = media(...), and its tuple and object forms, are build-time only: the client has null in their place, so keep them in the module that uses them or import them from a module with the attribute.
• Attributes and parent states are conditions too: attr(), group() and within() (below). Pseudo-elements (::before, ::placeholder) are not part of 0.1.
• A condition wraps declarations, not a kernel's marker (cssints-q83n). A plugin member's kernel is global CSS keyed to its marker class, so the marker applies wherever the class is, whatever the condition. A member with declarations of its own is fine under a condition: hover(frame().padding(2)) makes the custom property conditional, and the kernel reads it. A member with none, pretty() of @cssints/balance, frame() with no method, group(), gives the condition nothing to wrap, so it is a build error at the call, also inside cn(), beside other styles, nested or in a cv() variant: cssints: :hover wraps _balance-prettyCore, the marker of kernel balance.prettyCore, with no declaration of its own: a kernel is global CSS keyed to its marker class and cannot be conditional, …. Put the member outside the condition. The types do not catch it (a member is a class string there).

Output of styles; each form in forms gives one more rule in _.b (dark, narrow and grid in a block of their own before :hover):

@layer _.a {
	._1t8gqy5 { padding: 0.5rem; }
}
@layer _.b {
	._16f8jrr:hover { background-color: #eee; }
	@media (width >= 40rem) {
		._1q848uz { padding-top: 1rem; }
		._t70zhd { padding-left: 8ch; }
	}
	@media (width >= 60rem) {
		._1khcbr2 { padding: 2rem; }
	}
}
@layer _.c {
	@media (width >= 40rem) {
		._ronnd2:hover { background-color: #ddd; }
	}
}