wiki/css.lisp
The CSS spelling of symbol: its name in lowercase, unless the name was
escaped to keep lowercase letters, when it is kept as written.
Values
A number with a unit: 0.85rem, 100%, 0.15s. Read from 0.85rem by the CSS syntax; plain numbers stay numbers.
Two values joined by a slash, as in the font shorthand 0.72rem/1 or grid-area 1/3.
A reference to the custom property --NAME, written var(--name).
Read from --name by the CSS syntax, or made by var.
A CSS function call: NAME(ARGUMENT, ARGUMENT). An argument that is a list is a space-separated run.
Comma-separated values, as in a font stack.
A CSS string literal, written in double quotes. A Lisp string is written verbatim, so this is how a font name or content is quoted.
The reader returns these as literal objects, so compiled files must dump them.
A reference to the custom property name, a string or symbol without the --.
Define name as a Lisp function building the CSS function call css-name(...).
The CSS color-mix() of colors in the sRGB space, a percentage after a
colour weighting it: (color-mix --paper 94% --accent).
A comma-separated font-family list; strings are quoted, symbols bare.
Reader syntax
The characters of the token starting at stream, up to whitespace or a
terminating macro character.
text read with the standard syntax in the current package.
text as a number, or NIL when it is not one.
text as a number or dimension, or NIL.
The object text denotes under the CSS syntax: a number, a dimension, a
slash of two quantities, a variable-reference for --name, or else what the
standard reader makes of it.
Reader macro function for the digits and hyphen under the CSS syntax.
Selectors
One selector as CSS text,
; & in it stands for the parent selector when nested.
A comma-separated group of selectors, matching any of them.
The selector designator names: a string is one selector, a
list of strings a group.
The complex selectors selector is a group of.
child nested under parent: each alternative of child against
each of parent, & standing for the parent, otherwise a descendant.
The tree
Anything in a stylesheet: a declaration, rule, at-rule, or style group.
PROPERTY: VALUES; -- the property a keyword, the values a list written space-separated.
A named group of rules, compiled in definition order under its documentation as a comment.
Add item, one evaluated form of a rule body, to container.
declaration is the open declaration values append to; the value returned is
the declaration open after item.
Add items to container in order, then fix the order of its children.
Define or redefine the style name; the first definition fixes its order.
The macros
The form for item of a rule body: keywords are properties, other symbols
CSS words, ("selector" . body) a nested rule, (:name prelude . body) an
at-rule, and any other list a Lisp form.
A rule for selector, a string, a list of strings, or a form; body as
define-style describes. Bare symbols in body are CSS words, not variables:
a body computed from Lisp values is a list for make-rule.
The declarations body makes, read as a rule body, for a rule to include:
the way to write a mixin.
The declaration of the custom property --NAME with values.
Define the style group name: an optional docstring, then rules.
A rule is (selector . body), selector a string or a list of strings. body
alternates :property keywords with values -- bare symbols are CSS words,
strings are written verbatim, numbers and 0.85rem quantities and --name
references are themselves -- and lists are Lisp forms: a CSS function such
as (clamp 1rem 4vw 3rem), or any function returning values, declarations,
or rules to include. Nested rules ("selector" . body) combine with the
parent, & standing for it; (:media "query" . body) is an at-rule.
Text backend
Write value as CSS text.
Write values space-separated.
container's declarations, and its other children, in order.
The whole stylesheet: every style group in order.
(name &body body)Define the style group NAME: an optional docstring, then rules. A rule is (SELECTOR . BODY), SELECTOR a string or a list of strings. BODY alternates :property keywords with values -- bare symbols are CSS words, strings are written verbatim, numbers and 0.85rem quantities and --name references are themselves -- and…
Two values joined by a slash, as in the font shorthand 0.72rem/1 or grid-area 1/3.
A reference to the custom property --NAME, written var(--name). Read from --name by the CSS syntax, or made by VAR.
A named group of rules, compiled in definition order under its documentation as a comment.
SELECTOR { declarations }, and nested rules and at-rules whose selectors combine with this one.
@NAME PRELUDE { children }. Inside a rule, its declarations apply to that rule's selector under the query.
PROPERTY: VALUES; -- the property a keyword, the values a list written space-separated.
Constrain a quantity between compatible bounds.
(node stream &key parent indent)Write NODE as CSS text to STREAM. PARENT is the selector NODE is nested under, INDENT the block depth.
A canonical product of symbolic base dimensions raised to rational powers.
(name)A CSS function call: NAME(ARGUMENT, ARGUMENT). An argument that is a list is a space-separated run.
Comma-separated values, as in a font stack.
A CSS string literal, written in double quotes. A Lisp string is written verbatim, so this is how a font name or content is quoted.
((call tool-call) stream)((object dimension) &optional environment)(text)(name &optional (css-name (css-name name)))(&rest colors)The CSS color-mix() of COLORS in the sRGB space, a percentage after a colour weighting it: (color-mix --paper 94% --accent).
Logical conjunction of tests and raw truth values.
(&rest families)(stream)The characters of the token starting at STREAM, up to whitespace or a terminating macro character.
Test whether two compatible scalars are equal.
Logical negation of one test or raw truth value.
(text)Logical disjunction of tests and raw truth values.
(text)Test whether one compatible scalar is less than another.
(text)The object TEXT denotes under the CSS syntax: a number, a DIMENSION, a SLASH of two quantities, a VARIABLE-REFERENCE for --name, or else what the standard reader makes of it.
Test whether one compatible scalar is greater than another.
(stream char)One selector as CSS text,
((selector selector-list))A comma-separated group of selectors, matching any of them.
(designator)The selector DESIGNATOR names: a string is one selector, a list of strings a group.
(parent child)CHILD nested under PARENT: each alternative of CHILD against each of PARENT, & standing for the parent, otherwise a descendant.
(string part replacement)Addition over compatible quantities.
Anything in a stylesheet: a declaration, rule, at-rule, or style group.
A node holding declarations, rules, and at-rules in order.
((name symbol) (type (eql 'arithmetic-operator)))(container item declaration)Add ITEM, one evaluated form of a rule body, to CONTAINER. DECLARATION is the open declaration values append to; the value returned is the declaration open after ITEM.
A block-level piece of an Org document.
(container items)(selector items)(name prelude items)STYLE objects in the order they were first defined; redefining a name replaces its rules in place, so a re-evaluated group keeps its position.
(name documentation items)(name)(&body body)The declarations BODY makes, read as a rule body, for a rule to include: the way to write a mixin.
(name &rest values)Whether the next block written should be preceded by a blank line.
(indent stream)Multiplication and scalar scaling.
(stream)Convert one scalar float or unsigned value to a 32-bit float.
(values stream)(value)(selector declarations stream indent)(container)(&rest nodes)(&optional (styles *styles*))
A small CSS compiler: the stylesheet as Lisp definitions.
The site's stylesheet is written as
define-styleforms and compiled to CSS text when the site is rendered, the way the shader language compiles to SPIR-V and MSL from forms. So the rules that draw a layout role can sit beside the layout that assigns it, be re-evaluated in a running image, and be computed by ordinary Lisp.The compiler has three parts. A reader syntax (the
luv.CSS:syntaxreadtable) reads CSS quantities and custom-property references as objects: 0.85rem and 100% are DIMENSIONs, 0.72rem/1 aslashpair, and --ink avariable-reference, so no number-and-unit symbols are interned. A syntax tree of CLOS instances --style,rule,at-rule,declaration, selectors, and values -- built by theruleanddefine-stylemacros, whose bodies alternate :property keywords with values, where bare symbols are CSS words (grid, solid, inherit), strings are written verbatim, and lists are Lisp: (clamp 1rem 4vw 3rem) calls the CSS-functionclamp, (gutter) calls a helper of your own, and a form may return values, declarations, or rules, which join the enclosing rule. Nested rules are ("selector" . body) with & standing for the parent, and (:media "query" . body) is an at-rule. Finallywrite-cssis the text backend, a generic over the tree; another backend can walk the same objects.