on 86bef11 help sign in
212 files changed+11498−30466
since splitsnapshots
unifiedsplit
.gitattributes−3 .github/workflows/playground.yml+5−4 .gitignore−1 CONTRIBUTING.md+12−102 DESIGN.md+291−1390 README.md+69−190 crates/htmlang-core/src/ast.rs+107−622 crates/htmlang-core/src/codegen.rs+1621−1575 crates/htmlang-core/src/codegen_tests.rs+8−33 crates/htmlang-core/src/diagnostic.rs−245 crates/htmlang-core/src/expr.rs+291−478 crates/htmlang-core/src/interp.rs−651 crates/htmlang-core/src/lib.rs+1−4 crates/htmlang-core/src/parser.rs+2499−6082 crates/htmlang-core/src/std.hl+46−2 crates/htmlang-core/src/syntax.rs+371−2826 crates/htmlang-core/src/value.rs−406 crates/htmlang-core/src/vocab.rs+157−776 crates/htmlang-wasm/playground/index.html−113 crates/htmlang-wasm/src/lib.rs+16−77 editors/vscode/README.md+27−86 editors/vscode/snippets/htmlang.json+175−248 editors/vscode/syntaxes/htmlang.tmLanguage.json+30−253 examples/blog.hl+48−86 examples/blog.html.map+1−1 examples/demo.hl+303−271 examples/demo.html+3−800 examples/demo.html.map+1−1 examples/docs.hl+61−132 examples/docs.html.map+1−1 examples/landing.hl+65−131 examples/landing.html.map+1−1 examples/posts.json−27 src/bin/htmlang_lsp/analysis.rs+888−1294 src/bin/htmlang_lsp/completion.rs+158−1359 src/bin/htmlang_lsp/docs.rs+99−356 src/bin/htmlang_lsp/hover.rs+91−349 src/bin/htmlang_lsp/main.rs+108−55 src/bin/htmlang_lsp/navigation.rs+260−504 src/bin/htmlang_lsp/state.rs+3−41 src/bin/htmlang_lsp/tree.rs−222 src/cli.rs+6−4 src/fmt.rs+401−394 src/lib.rs+1−3 src/main.rs+159−215 src/serve.rs+50−128 src/upgrade.rs+2012 tests/common/mod.rs−140 tests/docs.rs+19−115 tests/editor.rs−157 tests/fmt.rs−55 tests/regressions.rs+47−2065 tests/snapshots.rs+667−4342 tests/snapshots/accessibility.html+1−1 tests/snapshots/alignment.html+1−1 tests/snapshots/anchor_positioning.html+1−1 tests/snapshots/animate_shorthand.html+1−1 tests/snapshots/animations.html+1−1 tests/snapshots/arithmetic.html+1−1 tests/snapshots/attributes.html+1−1 tests/snapshots/basic_elements.html+1−1 tests/snapshots/breadcrumb.hl+4 tests/snapshots/breadcrumb.html+1 tests/snapshots/chain_operator.html+1−1 tests/snapshots/clamp_css.html+1−1 tests/snapshots/code_samples.hl−28 tests/snapshots/code_samples.html−5 tests/snapshots/color_scheme.html+1−1 tests/snapshots/colour_variants.hl−12 tests/snapshots/colour_variants.html−1 tests/snapshots/computed_let.html+1−1 tests/snapshots/conditionals.html+1−1 tests/snapshots/container_queries.hl+2−2 tests/snapshots/container_queries.html+1−1 tests/snapshots/css_property.html+1−1 tests/snapshots/css_shorthands.hl+4−1 tests/snapshots/css_shorthands.html+1−1 tests/snapshots/css_units.html+1−1 tests/snapshots/css_vars.hl+5−5 tests/snapshots/css_vars.html+1−1 tests/snapshots/custom_properties.hl−47 tests/snapshots/custom_properties.html−1 tests/snapshots/dark_mode.html+1−1 tests/snapshots/data_directive.html+1−1 tests/snapshots/direction_attr.html+1−1 tests/snapshots/each_destructuring.html+1−1 tests/snapshots/each_else.html+1−1 tests/snapshots/each_index.html+1−1 tests/snapshots/each_range.html+1−1 tests/snapshots/each_step.html+1−1 tests/snapshots/element_prefixes.hl−42 tests/snapshots/element_prefixes.html−3 tests/snapshots/else_if.html+1−1 tests/snapshots/env_directive.html+1−1 tests/snapshots/escapes_and_quotes.hl−19 tests/snapshots/escapes_and_quotes.html−1 tests/snapshots/extra_css.html+1−1 tests/snapshots/fn_defaults.hl+1−1 tests/snapshots/fn_defaults.html+1−1 tests/snapshots/form_elements.html+1−1 tests/snapshots/fragment.html+1−1 tests/snapshots/function_calls.hl−66 tests/snapshots/function_calls.html−1 tests/snapshots/function_definitions.hl−35 tests/snapshots/function_definitions.html−1 tests/snapshots/functions.hl+2−2 tests/snapshots/functions.html+1−1 tests/snapshots/grid_areas.html+1−1 tests/snapshots/has_pseudo.html+1−1 tests/snapshots/hidden_attr.html+1−1 tests/snapshots/html_elements.hl−42 tests/snapshots/html_elements.html−1 tests/snapshots/if_expr.hl+3−21 tests/snapshots/if_expr.html+1−1 tests/snapshots/initial_letter.html+1−1 tests/snapshots/inline_text.html+1−1 tests/snapshots/lang_directive.hl+1−1 tests/snapshots/lang_directive.html+1−1 tests/snapshots/layer_wrapping.html+1−1 tests/snapshots/layout_direction.hl−33 tests/snapshots/layout_direction.html−1 tests/snapshots/layout_modes.hl−44 tests/snapshots/layout_modes.html−2 tests/snapshots/leading_argument.hl−50 tests/snapshots/leading_argument.html−1 tests/snapshots/list_elements.html+1−1 tests/snapshots/loops.html+1−1 tests/snapshots/manifest_directive.html+1−1 tests/snapshots/markdown_block.html+1−1 tests/snapshots/match_directive.html+1−1 tests/snapshots/media_elements.html+1−1 tests/snapshots/media_extended.html+1−1 tests/snapshots/meta_head.html+1−1 tests/snapshots/mixin_spread.hl+1−1 tests/snapshots/mixin_spread.html+1−1 tests/snapshots/named_slots.hl+1−1 tests/snapshots/named_slots.html+1−1 tests/snapshots/names_and_values.hl−18 tests/snapshots/names_and_values.html−1 tests/snapshots/new_css.html+1−1 tests/snapshots/new_css_attrs.hl+1−1 tests/snapshots/new_css_attrs.html+1−1 tests/snapshots/new_css_properties.html+1−1 tests/snapshots/new_css_properties_2.html+1−1 tests/snapshots/new_css_properties_3.html+1−1 tests/snapshots/new_css_properties_4.html+1−1 tests/snapshots/new_directives.hl+1−4 tests/snapshots/new_directives.html+2−3 tests/snapshots/new_elements.html+1−1 tests/snapshots/new_elements_2.html+1−1 tests/snapshots/new_elements_3.html+1−1 tests/snapshots/new_elements_4.hl+11−2 tests/snapshots/new_elements_4.html+1−1 tests/snapshots/new_elements_5.hl+19 tests/snapshots/new_elements_5.html+1 tests/snapshots/new_elements_6.html+1−1 tests/snapshots/new_html_attrs.html+1−1 tests/snapshots/new_pseudos.html+1−1 tests/snapshots/no_page.html+1−1 tests/snapshots/nth_pseudo.hl+2−2 tests/snapshots/nth_pseudo.html+1−1 tests/snapshots/og_directive.html+1−1 tests/snapshots/one_css_path.hl−14 tests/snapshots/one_css_path.html−4 tests/snapshots/page_root.hl−15 tests/snapshots/page_root.html−1 tests/snapshots/parameters.hl−31 tests/snapshots/parameters.html−1 tests/snapshots/popover_api.html+1−1 tests/snapshots/positional.html+1−1 tests/snapshots/prefixes_compose.hl−17 tests/snapshots/prefixes_compose.html−1 tests/snapshots/pseudo_elements.html+1−1 tests/snapshots/pseudo_states.html+1−1 tests/snapshots/pseudo_states_extended.hl+2−2 tests/snapshots/pseudo_states_extended.html+1−1 tests/snapshots/px_rule.hl−20 tests/snapshots/px_rule.html−1 tests/snapshots/raw_html.html+1−1 tests/snapshots/repeat_directive.html+1−1 tests/snapshots/responsive.html+1−1 tests/snapshots/responsive_images.hl+1−1 tests/snapshots/responsive_images.html+1−1 tests/snapshots/scope_css.html+1−1 tests/snapshots/script_element.html+1−1 tests/snapshots/scroll_driven_animations.html+1−1 tests/snapshots/selection_pseudo.html+1−1 tests/snapshots/semantic_elements.html+1−1 tests/snapshots/sizing.html+1−1 tests/snapshots/slots_and_children.hl−59 tests/snapshots/slots_and_children.html−1 tests/snapshots/starting_style.html+1−1 tests/snapshots/stress_deeply_nested.hl+20−20 tests/snapshots/stress_deeply_nested.html+1−1 tests/snapshots/stress_large.hl+139−139 tests/snapshots/stress_large.html+1−1 tests/snapshots/string_interpolation.html+1−1 tests/snapshots/style_block.html+1−1 tests/snapshots/subgrid_css.html+1−1 tests/snapshots/table_elements.html+1−1 tests/snapshots/text_everywhere.hl−41 tests/snapshots/text_everywhere.html−3 tests/snapshots/translations_i18n.html+1−1 tests/snapshots/unless_directive.html+1−1 tests/snapshots/values_and_scope.hl−62 tests/snapshots/values_and_scope.html−1 tests/snapshots/variable_filters.html+1−1 tests/snapshots/variable_slots.hl−18 tests/snapshots/variable_slots.html−1 tests/snapshots/variables_defines.html+1−1 tests/snapshots/view_transitions.html+1−1 tests/snapshots/with_directive.html+1−1
.gitattributesdeleted−3
@@ -1,3 +0,0 @@
1−# Check out text files with LF endings on every platform, so snapshot
2−# fixtures compare equal on Windows too.
3−* text=auto eol=lf
.github/workflows/playground.yml+5−4
@@ -40,12 +40,13 @@ jobs:
4040 --out-dir target/wasm-pkg \
4141 target/wasm32-unknown-unknown/release/htmlang_wasm.wasm
4242
43− - name: Assemble the playground
43+ - name: Build htmlang CLI
44+ run: cargo build --release --bin htmlang
45+
46+ - name: Generate playground HTML
4447 run: |
4548 mkdir -p dist
46− cp crates/htmlang-wasm/playground/index.html dist/
47− cp target/wasm-pkg/htmlang_wasm.js target/wasm-pkg/htmlang_wasm_bg.wasm dist/
48− cp examples/demo.hl dist/
49+ ./target/release/htmlang playground dist/index.html
4950
5051 - name: Upload Pages artifact
5152 uses: actions/upload-pages-artifact@v3
.gitignore−1
@@ -1,4 +1,3 @@
11/target
22*.html
33!tests/snapshots/*.html
4−!crates/htmlang-wasm/playground/*.html
CONTRIBUTING.md+12−102
@@ -19,100 +19,22 @@ Linux, macOS, and Windows. Your change should pass all three.
1919## Repository layout
2020
2121- `crates/htmlang-core/` — parser, AST, code generator. No I/O lives here.
22− - `syntax.rs` — the syntax tree: every line as written, with spans. The
23− compiler evaluates it, the formatter prints it back, and the language
24− server takes definitions, directives and verbatim bodies from it. It
25− also holds `ESCAPES`, the one escape table of every htmlang string,
26− and decides where `{@...}` is an inline element: in every line of text
27− except the text of a `literal` element.
28− - `parser.rs` — evaluates the tree: definitions, data, loops and
29− conditions, and the checks over code that doesn't run. Names live in
30− `Env`, one frame per block, so a definition is visible to the end of
31− its block and a function keeps the frames of its definition.
32− - `diagnostic.rs` — `Diagnostic` and the stable diagnostic codes.
33− - `codegen.rs` — writes the HTML and the CSS. A parent's `Flow` (the
34− direction its CSS sets, with the changes under media and container
35− prefixes) is what its children's `fill` and `shrink` compile against;
36− the rules for a change are keyed on the parent's class in that block.
37− A page's `<body>` is written like an `@el` whose styles are `@page`'s
38− (the reset makes it the column), so the top level of a page is laid
39− out like any column; a fragment's top level has no layout of its own.
40− Every CSS property goes through one generic path (its name, its value
41− as written, with `vocab::with_px`'s pixels); only htmlang's layout
42− words and `line-clamp` have code of their own. Generated classes are
43− `hl-` + 7 base-36 digits of `stable_hash` of the style
44− (`CLASS_DIGITS`), so a style has one name in every file, and
45− `htmlang build` checks no name stands for two styles; an element's
46− defaults (its layout,
47− `ElementKind::css`) go with its class, as `:where(.hl-2k9xq0m)`, never a
48− rule on a global element selector, so `@markdown`/`@raw` HTML and a
49− page embedding a fragment are untouched. The rules are in cascade
50− layers (`LAYERS`): `hl-reset`, `hl-kind` (the defaults), `hl-inside`
51− (element prefixes, `@td:`, each an `@scope` on the class, and
52− functions' scoped `@style`, written when a function is called) and
53− `htmlang` (the elements' own styles and `children:`), so which one
54− wins is the layer's order, not specificity.
55− A style's prefixes are a `Condition`: its at-rule prefixes (sorted, so
56− `dark:md:` is `md:dark:`, and written as nested `@media`/`@container`
57− blocks) and its selector chain (read left to right; an element prefix
58− splits it into the scope's root and the elements it styles). Each
59− class keeps one list of (condition, declarations), and every block and
60− chain is written in one fixed order, never the order of the source.
61− - `ast.rs` — the element kinds; every plain HTML element is one row in
62− `TAGS` with its one `Layout` (column, row, grid, text, native or void,
63− which decides its text lines, `spacing` and its children's layout
64− words), whether its text is shown as written (`literal`: `@code`,
65− `@textarea`, whose indented body is verbatim text, HTML-escaped), the
66− one HTML attribute its first word fills (`arg`: `src`, `action`, ...;
67− `ElementKind::arg` gives `@link`'s and `@image`'s too) and whether its
68− body is foreign text written into the page as it is (`verbatim`:
69− `@script`), and every directive one row in `DIRECTIVES` (its argument
70− and its kind of body; a verbatim directive's line is its one-line body
71− or file, and it takes no attributes). The list of
72− elements is fixed; `HTML_NAMES_WRITTEN_OTHERWISE` maps HTML's `a`, `img`,
73− `span`, `p` and `div` to htmlang's own names for the unknown-element
74− suggestion only.
22+ - `ast.rs` — the element kinds; every plain HTML element is one row in `TAGS`.
7523 - `vocab.rs` — the attribute vocabulary (htmlang attributes, CSS properties,
76− HTML attributes, `@page`'s own `favicon`), the pixel rule
77− (`LENGTH_PROPERTIES`, the one table of properties whose bare numbers
78− are px, and `with_px`, the one function that applies it) and the
79− prefixes: `PSEUDOS`, CSS's pseudo-classes and pseudo-elements under
80− their CSS names, each marked `:`, `::` or taking an argument, in the
81− order their rules are written; `children:`; element prefixes (`@td:`,
82− any name; the parser checks it is an element with a tag of its own,
83− `ElementKind::own_tag`); and the width, media and container prefixes,
84− with the rank that orders the at-rule blocks. A new pseudo-class is one
85− row in `PSEUDOS` and one word in DESIGN.md's list.
86− - `expr.rs` — the expression language for conditions, computed values and
87− `${...}`. It evaluates only what decides the result (the branch `if()`
88− takes, the side of `and`/`or` that decides) and only reads the rest.
89− - `value.rs` — the value types (text, number, true/false, list,
90− record) and the rules defined once on them: truthiness, comparison,
91− how numbers and lists print, ranges.
92− - `interp.rs` — `$name` and `${...}`: where a name ends and how one slot
93− of text (a text run, an attribute's value, an argument, a path) is
94− filled in, including what quoted text inserts in CSS and in text. The
95− one place variables are interpolated.
24+ HTML attributes) and the state/media prefixes.
25+ - `expr.rs` — the expression language for conditions and computed values.
9626 - `std.hl` — the standard library, written in htmlang and loaded before
9727 every file.
9828- `crates/htmlang-wasm/` — thin wrapper exposing `compile` to the web playground.
99−- `src/` — CLI, dev server and formatter (`fmt.rs`, which prints the syntax
100− tree back with its comments and blank lines).
29+- `src/` — CLI, dev server, formatter, and `upgrade` (syntax migrations).
10130- `src/bin/htmlang_lsp/` — language server binary (`htmlang-lsp`). Its
10231 completions come from the compiler's tables; hover and completion text live
10332 in `docs.rs`.
10433- `editors/vscode/` — VS Code extension.
10534- `tests/snapshots.rs` — integration / snapshot tests for the compiler.
106− These tests, and `tests/regressions.rs`, read the output with its
107− hashed classes numbered (`hl-a`, `hl-b`, ..., see `tests/common`), so a
108− snapshot changes when a style does, not when a hash does.
10935- `tests/regressions.rs` — one test per fixed bug.
110−- `tests/docs.rs` — compiles every example in `DESIGN.md` and `README.md`,
111− and every page in `examples/`: any diagnostic fails it.
112−- `tests/fmt.rs` — formats every example and snapshot input: the result is
113− stable, compiles to the same HTML and keeps every comment.
114−- `examples/` — complete pages: a landing page, a blog, a docs page, and a
115− tour of the whole language (`demo.hl`).
36+- `tests/docs.rs` — compiles every example in `DESIGN.md` and `README.md`.
37+- `examples/` — sample `.hl` files used as smoke tests and documentation.
11638
11739## Adding a feature
11840
@@ -121,34 +43,22 @@ Linux, macOS, and Windows. Your change should pass all three.
12143 parser-to-HTML pipeline. Pure parser / codegen helpers can live as unit
12244 tests alongside the code.
123452. Prefer the smallest mechanism: a component belongs in `std.hl`, an HTML
124− element is a row in `TAGS` (and a line in DESIGN.md's table of layouts
125− and a name in the VS Code grammar's element list, which tests check), and
126− a CSS property needs no code at all. Only
46+ element is a row in `TAGS`, and a CSS property needs no code at all. Only
12747 thread a feature through the parser and codegen when it needs to be, and
12848 describe it in the LSP's `docs.rs`.
129493. Document it in `DESIGN.md` (the examples there are compiled by the tests).
130− If it's user-facing, also update `README.md`, and show it in
131− `examples/demo.hl` if the tour has a section it belongs in.
132−4. If it changes the CLI surface, update the `--help` output.
50+ If it's user-facing, also update `README.md`.
51+4. If it removes or renames syntax, add a rewrite to `src/upgrade.rs` and a
52+ hint to `REMOVED_SYNTAX` in the parser.
53+5. If it changes the CLI surface, update the `--help` output.
13354
13455## Style
13556
13657- Prefer enum-based ASTs and pattern matching over stringly-typed dispatch.
13758- Keep `@` prefixes and bracket-attribute syntax consistent with existing
138− directives. A new `@foo` is a row in `ast::DIRECTIVES`; the parser, the
139− formatter and the language server read that table, and `tests/editor.rs`
140− fails when the VS Code grammar's word lists drift from it.
141−- Every diagnostic has a code from `diagnostic::code`; add one there when no
142− existing code fits, and key tool behavior (quick fixes, tests) on the code
143− rather than on the message. Put the name the diagnostic is about in
144− `subject` and a replacement in `suggestion`.
59+ directives. Add `KNOWN_DIRECTIVES` entries when you add a new `@foo`.
14560- Diagnostics should include `line` and, when practical, `column` and a
14661 `source_line` excerpt. Use `Severity::Help` for suggestions, not `Warning`.
147−- Check names, not values, and never drop input silently. When something
148− the author wrote can't go into the page, report an error; a warning means
149− it went into the page as written. Check a CSS value only for what is
150− wrong in any CSS (see `css_breakout` in `parser.rs`), not against a list
151− of values the browser may know better.
15262- No unwrap() on parsed user input. Use `Result<_, ParseError>` and record a
15363 diagnostic so the compiler keeps going.
15464
DESIGN.md+291−1390
@@ -1,242 +1,94 @@
1−# htmlang language reference
1+# htmlang (.hl)
22
3−htmlang is a small layout language that compiles to static HTML. A page is a
4−tree of elements written one per line, with indentation for nesting:
3+A minimalist layout language inspired by elm-ui that compiles to static HTML.
54
6−```
7−@page Hello
8−@el [width fill, max-width 640, center-x, padding 40, spacing 16]
9− @h1 Hello
10− @paragraph
11− This page was written in {@b htmlang}.
12−```
5+## Principles
6+
7+- `@` means structure, bare lines mean content.
8+- Layout is explicit and compositional: every element declares its own layout
9+ role, and there is no CSS cascade to reason about.
10+- Output is one self-contained HTML file with embedded CSS (flexbox), and no
11+ JavaScript unless you write some.
1312
1413Every example block in this file is compiled by the test suite
1514(`tests/docs.rs`), so the examples stay correct.
1615
17−## Principles
18−
19−- **`@` starts structure, and any other line is content.** An element is `@name`,
20− and a line without `@` is text.
21−- **htmlang's own vocabulary is about layout.** It comes from elm-ui. An
22− element is a row, a column, a grid or text (or keeps HTML's own layout),
23− `spacing` sets the gap between its children,
24− and each child says how it sits in its parent (`width fill`, `center-x`,
25− `align-right`). The layout attributes are the only styling words htmlang
26− adds.
27−- **Everything else is CSS or HTML, under its own name.** A style is any CSS
28− property with a CSS value. An element that isn't about layout or text has
29− its HTML name, and an HTML attribute is written `key=value`. Nothing is
30− renamed or abbreviated.
31−- **Each thing is done one way.** `@let` defines every reusable piece, `@data`
32− loads data, `@include` brings in a file, and `if()` makes an attribute
33− conditional. A layout is an ordinary function.
34−- **The output is what you wrote.** Each page compiles to one self-contained
35− HTML file. Its CSS is inside, and it has no JavaScript unless you write
36− some. The compiler doesn't add attributes, tags or rewritten values that
37− the source doesn't ask for, and it doesn't leave out anything you wrote:
38− what can't go into the page is an error. The one exception is a style
39− whose value comes out empty, such as an optional field a record doesn't
40− have: it is simply not written.
41−- **Everything runs at compile time.** Variables, expressions, loops and
42− conditions are resolved when the page is built. What CSS computes in the
43− browser (`var()`, `calc()`, `color-mix()`) stays CSS, written as it is.
44−
4516## Syntax
4617
47−### Elements
18+### Structure
4819
4920```
5021@element [attributes] argument
5122 children
5223```
5324
54−Children are indented under their parent, with spaces or with tabs (a
55−tab counts as one space, so a file that mixes them is a warning).
56−Attributes go inside `[...]`,
57−separated by commas, and the list may span several lines:
25+Children are indented under their parent. Attributes are comma-separated inside
26+`[...]` and may span several lines:
5827
5928```
6029@el [
6130 padding 20,
6231 background white,
6332 border-radius 8,
64− box-shadow 0 2 4 rgba(0,0,0,0.1)
33+ box-shadow 0 2px 4px rgba(0,0,0,0.1)
6534]
6635 Content
6736```
6837
69−An attribute can take one of three forms:
70−
71−- `key value` is a **style**: a layout attribute or a CSS property
72− (`spacing 20`, `color red`).
73−- `key=value` is an **HTML attribute** (`id=main`, `type=email`,
74− `aria-label=Close`).
75−- A bare word is a **flag**: a layout attribute such as `center-x`, a
76− boolean HTML attribute such as `required`, `disabled`, `hidden` or `open`,
77− or a `data-` or `hx-` attribute that has no value (`data-open`,
78− `hx-preserve`).
79−
80−A comma inside `(...)`, `[...]` or `"..."` doesn't split attributes. Anywhere else,
81−`\,` keeps a comma in the value:
82−
83−```
84−@el [transition opacity 0.3s\, transform 0.3s, font-family "Open Sans"\, sans-serif]
85−@el [hx-get=/news, hx-trigger=load\, every 60s]
86−```
87−
88−Right after a `key=value`, a name htmlang doesn't know is most likely the
89−rest of that value, which a comma ended: `[hx-trigger=load, every 60s]` is
90−an error (`split-value`) that shows the value written with `\,`.
91−
92−An attribute given twice, by a bundle and after it, by a function and its
93−call, or written twice, takes the later value. An HTML attribute is
94−written once, with that value.
95−
96−A variable fills an attribute's value (`padding $gap`, `alt=$title`), never
97−its name or a whole attribute: attributes come from a
98−[bundle](#definitions), written `[$card]`, and a condition chooses whole
99−attributes with [`if()`](#conditional-attributes).
100−
101−The attribute list belongs to the element name right before it. Anywhere
102−else, `[` is an ordinary character, so a line of text can contain one:
103−
104−```
105−@text Use [ to open a list
106−@paragraph Arrays look like [1, 2, 3].
107−```
38+An attribute is either a **style**, written `key value` (`padding 20`,
39+`color red`), or an **HTML attribute**, written `key=value` (`id=main`,
40+`type=email`, `aria-label=Close`). Boolean HTML attributes are written bare
41+(`required`, `disabled`, `open`). A comma inside `(...)` or `"..."` does not
42+split attributes, so a font stack is written `font-family "Inter, sans-serif"`.
10843
10944### Text
11045
111−A line that doesn't start with `@` is text. Text after an element's
112−attributes is the element's content: its first line of text, read like any
113−other. Inside a line of text, `{...}` holds an inline element, and
114−[escapes](#escapes) and [`$names`](#variables) work:
46+Any line that doesn't start with `@` is text. Text after an element's
47+attributes is its content, and `{...}` puts elements inside a line of text:
11548
11649```
11750@paragraph
118− This is {@strong important}, and this is {@link https://example.com a link}.
51+ This is {@text [font-weight bold] important} and this is a {@link https://example.com link}.
11952@text [font-weight bold, font-size 24, color #333] Hello world
120−@h2 Welcome to {@text [color #3b82f6] htmlang}
121−@ul
122− @li Read {@link /docs the docs}
12353@section [padding 8] Text after the attributes is content too.
12454```
12555
126−How an element's lines combine is its [layout](#rows-columns-and-text)'s
127−business: in a row or column each line is a child; in a text element lines
128−flow. Text that `@if`, `@each`, `@fragment` or a function writes counts as
129−lines written in its place, so in a text element it flows with the rest,
130−joined with a space, and in a native element it is on lines of its own.
131−
132−The text of `@code` and `@textarea` is shown as written. On its line and
133−inline, a `{@...}` in it is text, while escapes and `$names` still work.
134−The lines indented under it are a [verbatim](#verbatim-bodies) sample:
135−nothing in them is htmlang (`@`, `$`, `{`, `\` and `--` are text), and
136−they are HTML-escaped with their line breaks and indentation kept. This
137−is how a page shows code, htmlang included. `@pre` is an ordinary element,
138−so `@pre > @code` is HTML's `<pre><code>`, and a function can wrap `@pre`
139−around a sample. A sample is text on the line or lines in the block, not
140−both.
141−
142−```
143−@paragraph
144− Write {@code {@link /docs docs}} for a link.
145−@pre [padding 16] > @code
146− @el [padding 40]
147− <b>shown as text</b>
148−@textarea [aria-label=Notes]
149− First line
150− Second line, indented
151−```
152−
153−A sample in the block has no `$names`, so a version number in it can't
154−come from a variable; a one-line sample on `@code`'s own line can
155−(`@code cargo install htmlang@$version`).
156−
157−### Escapes
158−
159−A backslash before one of these characters stands for the character itself.
160−The table is the same in every htmlang string: text, arguments, attribute
161−values, `@let`, `@page` and `@meta`.
162−
163−| Escape | Writes | For |
164−|---|---|---|
165−| `\@`, `\--` | `@`, `--` | a line of text that starts with `@` or `--` |
166−| `\$` | `$` | a `$` before a name, which would start a variable |
167−| `\{`, `\}` | `{`, `}` | braces that don't start or end an inline element |
168−| `\[`, `\]` | `[`, `]` | brackets that don't open or close an attribute list; a `'...'` in a value (`alert(']')`) doesn't hide one, so a list that seems to end inside one is reported (`unbalanced-quote`) |
169−| `\,` | `,` | a comma in an attribute's value |
170−| `\"` | `"` | a quote that doesn't start or end quoted text |
171−| `\\` | `\` | a backslash before one of these characters |
172−
173−A backslash before any other character is kept as written, so CSS's own
174−escapes and patterns pass through: `before:content "\201C"`,
175−`pattern=\d{3}`. A `$` that isn't followed by a letter or `_` is text
176−anyway: `$5`, `$$`.
56+A backslash makes the next character literal: `\@` and `\--` let a text line
57+start with `@` or `--`, `\$` shows a `$` that isn't a variable, `\{` a brace
58+that isn't an inline element, and `\\` a backslash.
17759
17860```
17961\@htmlang on social media
18062@let price 5
181−@paragraph \$price is $price dollars: {@mark \{braces\}}, \[brackets\] and a comma\, too
182−@input [type=text, pattern=\d{3}-\d{4}, title=Costs \$5]
63+@text \$price is $price dollars
18364```
18465
18566### Comments
18667
187−A line whose first word is `--` is a comment: `--` followed by a space, or
188−alone on its line. A comment must be on its own line, because `--` later in
189−a line is ordinary text. A comment may sit between the lines of an attribute
190−list, and `--name` with no space is not a comment but a
191−[custom property](#custom-properties), so it can start a line of a list
192−(anywhere else, a line starting `--name` or `---` is text).
68+`--` at the start of a line begins a comment. Comments must be on their own
69+line: `--` later in a line is ordinary text.
19370
19471```
19572-- this is a comment
19673@row [spacing 10]
197− -- todo: more nav items
198− @link / Home
199−@el [
200− -- the gap, wider on larger screens
201− --gap 12px,
202− md:--gap 24px,
203− spacing var(--gap)
204−]
205− @text One
206− @text Two
74+ -- todo: add nav items
20775```
20876
209−### Chains
77+### Shorthands
21078
211−`>` puts elements that have one child each on one line. The last element in
212−the chain gets the indented children. A `>` is a chain only between two
213−elements (`@name [attributes]`); in text it is just a character. A
214−function call can be a link of a chain, like any element. After an
215−element's leading argument (`@link /about`) the rest of the line is text,
216−so a link around an image is `@link [href=/] > @image logo.png` (the
217−compiler warns when `> @name` follows a leading argument).
79+`>` chains single-child elements on one line; the last element in the chain
80+gets the indented children.
21881
21982```
22083@el [padding 16, background blue, border-radius 8] > @link https://example.com
22184 @text [color white] Get Started
22285```
22386
224−### Verbatim bodies
225−
226−The bodies of `@raw`, `@style`, `@head`, `@markdown`, `@script`, `@code`
227−and `@textarea` are foreign text, kept exactly as written: nothing in them
228−is parsed as htmlang, and a `--` line in them is not a comment. `@raw`
229−writes its HTML into the page, `@style` its CSS and `@head` its HTML into
230−the `<head>`; `@code` and `@textarea` show theirs as text. Which lines are
231−verbatim is decided by the element or directive on the line, also at the
232−end of a chain (`@pre > @code`, `@el > @script`).
87+### Raw content
23388
234−The header's line follows one rule. For `@raw`, `@style` and `@head`, text
235−on the line is a one-line body; for `@markdown` it is the file and for
236−`@script` the `src`. Text on the line and an indented body together are an
237−error. Only `@script` takes attributes: an attribute list on `@raw`,
238−`@style`, `@head` or `@markdown` is an error, so content that starts with
239−`[` (a CSS attribute selector) goes in the indented block.
89+`@raw` pastes HTML into the output verbatim: the rest of its line, or its
90+indented block. The bodies of `@style`, `@head`, `@script` and `@markdown` are
91+verbatim too (a `--` line in them is not a comment).
24092
24193```
24294@raw <hr class="fancy">
@@ -244,1020 +96,220 @@ error. Only `@script` takes attributes: an attribute list on `@raw`,
24496 <div class="custom-widget">
24597 <span>Hand-written HTML</span>
24698 </div>
247−@style .note { color: gray; }
24899```
249100
250−### Directives
101+## Elements
251102
252−A directive is a built-in word that isn't an element. Each one takes a
253−fixed kind of argument and a fixed kind of body. `@page` is the one
254−directive that is also an element: it stands for the page's root, `<body>`,
255−whose content is the rest of the file (see [Page and head](#page-and-head)).
103+The layout and text elements come from elm-ui; every other element has its
104+HTML name. Every container lays its children out in a column, except `@row`.
256105
257−| Directive | Argument | Body |
258−|---|---|---|
259−| `@page` | attributes (styles for `<body>`, `key=value` for `<html>`) and a title | none |
260−| `@let` | a name and a value or bundle, or `@name` and parameters | a function's body |
261−| `@include` | a file | none |
262−| `@data` | a variable and a source | none |
263−| `@meta` | a name and a value | none |
264−| `@if`, `@else`, `@each` | a condition or a loop | htmlang |
265−| `@raw`, `@style`, `@head` | the rest of the line: a one-line body | verbatim, instead of the line |
266−| `@markdown` | a file | verbatim Markdown, instead of the file |
267−
268−An indented line under a directive that takes no body is an error, because
269−it would otherwise silently become a sibling.
270−
271−### Diagnostics
272−
273−The compiler checks the whole file, including code that doesn't run: the
274−branch of an `@if` or an `if()` that isn't taken, the body of a function that is never
275−called and the body of a loop over an empty list. Unknown elements,
276−functions, attributes and prefixes are reported there too. In code that
277−doesn't run, a call is checked against every function in the file and the
278−files it includes; where the code runs, a name is looked up where it is
279−written, so a function's body sees only what is defined above the function
280−(a call to a function defined further down is reported when the body
281−runs, and two functions can't call each other). A `$name` is checked only
282−where the code runs, since any of them may come from data: an undefined
283−variable in a branch that isn't taken, or in a function that is never
284−called, isn't reported.
285−
286−**Names are checked, and values are CSS's.** A misspelled element, prefix,
287−parameter or slot is an error, and so is an undefined variable. A CSS
288−property htmlang doesn't know, but whose name CSS could have, is written to
289−the CSS as it is, with a warning that suggests the closest known name
290−(`text-grow`, or `colr`, which asks "did you mean `color`?"). Values go to
291−the CSS as written, so the browser decides what `z-index auto` or `color
292−rebeccapurple` means; only what is wrong in any CSS is reported (see
293−[CSS properties](#css-properties)).
294−
295−**Nothing you write is left out silently.** An error means something
296−couldn't go into the page: a flag htmlang doesn't know, an attribute
297−`@fragment` has no element for, content for a function without
298−`@children`. A warning means it went into the page as written, but may not
299−be what you meant. A warning is reported once, even from a line that runs
300−many times in a loop or a function.
301−
302−Every diagnostic has a stable code, such as `unknown-element` or
303−`unused-variable`. The command line prints it as `error[unknown-element]`,
304−`--format json` has it in a `code` field, and the editor's quick fixes are
305−keyed on it.
306−
307−## Layout
308−
309−### Rows, columns and text
310−
311−Every element has one layout, which decides what the lines written inside
312−it are. **In a row or column each line is a child; in a text element lines
313−flow.**
314−
315−| Layout | Elements | What is inside it |
106+| Element | Output | Purpose |
316107|---|---|---|
317−| column | `@el`, and the containers: `@section`, `@nav`, `@form`, `@ul`, `@li`, ... | Each line of text is a child of its own, and the children are laid out top to bottom (side by side with `flex-direction row`) |
318−| row | `@row` | The same, side by side |
319−| grid | `@grid` | Each line of text is a cell |
320−| text | `@paragraph`, `@text`, `@link`, `@h1` … `@h6`, `@button`, `@label`, `@td`, `@strong`, `@em`, ... | The argument, the lines and the children flow as one run of text, joined with spaces |
321−| native | `@table`, `@caption`, `@select`, `@pre`, `@textarea`, `@video`, ... | HTML's own layout, which htmlang leaves alone |
322−| void | `@input`, `@hr`, `@br`, `@image`, `@source` | Nothing: it takes no content |
323−
324−The table under [HTML elements](#html-elements) gives every element's layout. The
325−page itself is a column too: `@page` is the [root element](#page-and-head),
326−`<body>`, so what is written at the top of a page stacks like the children
327−of an `@el`, `height fill` there takes the rest of the window and
328−`center-y` centres in it.
329−
330−```
331−@el [spacing 4]
332− First line
333− Second line
334−@button [type=button]
335− Save
336− changes
337−```
338−
339−The column shows two lines 4px apart; the button says "Save changes".
340−
341−These attributes are htmlang's own. They describe how an element lays out
342−its children, and how it sits in its parent:
343−
344−| Attribute | Effect |
345−|---|---|
346−| `spacing N` | Gap between children |
347−| `width fill` / `width shrink` / `width N` | In a row, take the remaining width or keep the content's width; in a column or anywhere else, take the full width or fit the content; or an exact size |
348−| `height fill` / `height shrink` / `height N` | In a column, take the remaining height or keep the content's height; in a row or anywhere else, take the full height or fit the content; or an exact size |
349−| `center-x`, `center-y` | Center the element in its parent (auto margins) |
350−| `align-left`, `align-right`, `align-top`, `align-bottom` | Align the element in its parent (an auto margin on the other side) |
351−| `wrap` | Let a row wrap onto more lines |
352−| `grid-cols N`, `grid-rows N` | Equal grid columns or rows (on `@grid`); any other value is a track list, as in `grid-template-columns` (`grid-cols 200 1fr`) |
353−| `col-span N`, `row-span N` | Cells a grid child spans |
354−
355−`spacing`, `wrap`, `grid-cols` and `grid-rows` lay out an element's
356−children, so they go on a row, column or grid. On a text, native or void
357−element they are an error: text has no gap between its lines. For a flex
358−layout of your own on such an element, write the CSS (`@label [display
359−flex, gap 8]`).
360−
361−A child's `fill` and `shrink` follow the direction its parent's CSS
362−actually sets: a row for `@row`, a column for `@el` and the other columns,
363−or whatever the parent's own `flex-direction` (or `flex-flow`) says. Along
364−that direction, `fill` takes the remaining space and `shrink` keeps the
365−content's size; across it, `fill` is the full size and `shrink` fits the
366−content. `center-x`, `center-y` and `align-*` are auto margins, which work
367−in either direction; a `margin` on the same element keeps its other sides
368−(`[center-x, margin 20]`). A layout word never overrides a CSS property
369−the element writes itself: `[width fill, min-width 200]` keeps its 200px,
370−and `[flex-shrink 0, width fill]` still grows but never shrinks.
371−
372−```
373−@row [spacing 8]
374− @el [width fill, padding 12, background #f3f4f6] Fills the row
375− @el [width 120, padding 12, background #e5e7eb] 120px
376−@el [height 200, spacing 8, background #f9fafb]
377− @text [center-x] Centered
378− @el [height fill, background #dbeafe] Fills the rest of the column
379− @text [align-right] Right-aligned
380−@nav [flex-direction row, spacing 20]
381− @link /features Features
382− @el [width fill]
383− @link /signup Sign up
384−@grid [grid-cols 3, spacing 8, md:grid-cols 4]
385− @el [col-span 2, background #fef3c7] Two columns wide
386− @el [background #fde68a] One
387− @el [background #fcd34d] One
388−```
389−
390−A direction set under media or container prefixes (`md:flex-direction
391−row`, `print:`, `cq-md:`, or a stack of them such as `md:dark:`) switches
392−the children's `fill` and `shrink` in that same condition. As in elm-ui, whose child rules are keyed on the
393−parent's class (`.r > .wf`), each child gets a rule keyed on its parent's
394−class in the parent's `@media` or `@container` block. A width prefix holds
395−from its width up, so `sm:flex-direction column` still applies at `lg:`
396−unless `lg:` sets a direction of its own. A direction under a state prefix
397−(`hover:`, `first-child:`, `children:`, or a stack with one in it) leaves the
398−children's layout words as they are.
399−
400−```
401−@header [spacing 16, md:flex-direction row, md:align-items center]
402− @text [font-weight 800] Launchpad
403− @el [width fill]
404− @nav [flex-direction row, spacing 20]
405− @link /features Features
406− @link /pricing Pricing
407−@section [padding 24]
408− @el [width fill, max-width 800, center-x, spacing 16]
409− The full width up to 800px, in the middle
410−```
411−
412−On a phone the header is a column and its `@el [width fill]` is the full
413−width; from md up it is a row and the `@el` takes the free space, pushing
414−the navigation to the right. The section's `@el` is the usual centred
415−column: the full width, at most 800px, with auto margins on both sides.
108+| `@row` | div, flex row | Horizontal layout |
109+| `@el` | div, flex column | The container: children laid out top to bottom |
110+| `@grid` | div, grid | Grid container (use `grid-cols`) |
111+| `@in-front` / `@behind` | div, absolute | Overlay layers filling the parent (see below) |
112+| `@text` | span | Styled inline text |
113+| `@paragraph` | p | Flowing text with inline elements |
114+| `@link url` | a | Link; text after the URL becomes its content |
115+| `@image src` | img | Image |
116+| `@h1` … `@h6` | h1 … h6 | Headings |
416117
417−Everything else about layout is plain CSS: `justify-content`, `align-items`,
418−`flex 1 1 240px`, `grid-template-areas`, `position`.
118+Semantic containers, all laid out as columns: `@nav`, `@header`, `@footer`,
119+`@main`, `@section`, `@article`, `@aside`, `@address`, `@search`, `@form`,
120+`@details` / `@summary`, `@dialog`, `@figure` / `@figcaption`, `@blockquote` /
121+`@cite`, `@fieldset` / `@legend`, `@noscript`.
419122
420−### Layout inside text
123+Content: `@ul` / `@ol` / `@li`, `@dl` / `@dt` /
124+`@dd`, `@table` / `@thead` / `@tbody` / `@tr` / `@th` / `@td`, `@code`, `@pre`,
125+`@hr`, `@mark`, `@kbd`, `@abbr`, `@time`, `@progress`, `@meter`, `@output`,
126+`@canvas`, `@iframe src`, `@video src`, `@audio src`, `@picture` / `@source`,
127+`@script`, `@fragment` (children without a wrapper).
421128
422−A row, column or grid written inside text, inline in a line (`{@el ...}`) or
423−as a child of a text element, is laid out inline (`display: inline-flex`, or
424−`inline-grid`), and keeps its attributes. Anywhere inside text, `@el`, `@row`
425−and `@grid` (and `@in-front` and `@behind`) are written as a `<span>` rather
426−than a `<div>`, since text can't hold a `<div>`.
129+Form controls: `@input`, `@button`, `@select` / `@option`, `@textarea`,
130+`@label`, `@datalist`. `@form URL` sets the form's `action`.
427131
428132```
429−@paragraph
430− Price: {@el [padding 2 6, background #fef3c7, border-radius 4] $9} a month.
431−@h2
432− Plans
433− @row [spacing 4, font-size 14] > @text New
434−```
435−
436−Any other element keeps its HTML element. One whose HTML ends a paragraph,
437−such as `@section`, `@ul` or `@h2`, is a warning inside `@paragraph`
438−(`block-in-paragraph`): the browser would move it, and what follows it, out
439−of the `<p>`.
440−
441−`@link` is text too, so a card written inside a link is an inline `<span>`
442−that shrinks to its content. A clickable card is the link itself, laid out
443−as a column with CSS:
444−
445−```
446−@link [href=/post, display flex, flex-direction column, gap 8, padding 16, border 1 solid #e5e7eb]
447− @strong A post
448− @text Its summary.
133+@ol
134+ @li First
135+ @li Second
136+@form [method=post] /subscribe
137+ @label [for=email] Email
138+ @input [type=email, name=email, id=email, required]
139+ @button [type=submit] Send
140+@details [open]
141+ @summary Question
142+ @text The answer.
449143```
450144
451−### Overlays: `@in-front` and `@behind`
145+### `@in-front` / `@behind`
452146
453−These layers work like elm-ui's `inFront` and `behind`. Their children fill
454−the parent's bounds, and the parent becomes a positioning context
455−(`position: relative; isolation: isolate`). An explicit `position` on the
456−parent takes precedence.
147+Overlay layers, like elm-ui's `inFront` and `behind`. Their children fill the
148+parent's bounds; the parent automatically becomes a positioning context
149+(`position: relative; isolation: isolate`). An explicit `position` on the parent
150+wins.
457151
458152```
459153@el [width 200, height 200, background blue]
460154 @text [color white] Main content
461155 @in-front
462− @text [color yellow, align-right, align-bottom] Painted on top
156+ @text [color yellow] Painted on top
463157 @behind
464− @el [background red, height fill]
158+ @el [background red, width fill, height fill]
465159```
466160
467161### Standard library
468162
469−Two definitions are written in htmlang (`std.hl`) and are available in every
470−file. A `@let` of your own with the same name replaces them. `@spacer` takes
471−up the remaining space in a row or column. The `$truncate` bundle cuts text
472−off at one line with an ellipsis. You define any other components yourself
473−with `@let`.
163+These components are written in htmlang (`std.hl`) and available in every file.
164+Use them like elements; your own `@let` with the same name takes precedence.
165+
166+| Component | Purpose |
167+|---|---|
168+| `@badge` | Small pill for counts and statuses |
169+| `@tag` | Label with slightly rounded corners |
170+| `@chip` | Outlined, fully rounded label |
171+| `@avatar` | Circular frame for an image or initials |
172+| `@spacer` | Takes up the remaining space in a row or column |
173+| `@tooltip [tip TEXT]` | Text that shows `TEXT` when hovered |
174+| `@carousel` | Horizontally scrolling row that snaps to each child |
175+| `@breadcrumb` | Breadcrumb trail of `@li`s |
176+| `$skeleton`, `$truncate`, `$no-scrollbar` | Attribute bundles: loading placeholder, one-line ellipsis, hidden scrollbars |
474177
475178```
476179@row [spacing 8, align-items center]
477− @text Logo
180+ @badge [background #ef4444, color white] 3
181+ @chip Rust
478182 @spacer
479− @text [$truncate, max-width 200] A long title that gets cut off
183+ @tooltip [tip Opens in a new tab] Help
184+@breadcrumb
185+ @li > @link / Home
186+ @li Docs
187+@el [$skeleton, height 20, width fill]
480188```
481189
482−## Style
190+## Attributes
483191
484−### CSS properties
192+### Layout
485193
486−Any attribute that isn't a layout attribute is a **CSS property**, with the
487−same name and value as in CSS: `padding 20`, `font-weight bold`,
488−`border 1 solid #e5e7eb`, `border-radius 8`, `background red`,
489−`grid-template-areas "a b"`, `display none`.
490−
491−A quoted string in a value is CSS's own, so it keeps its quotes and its
492−commas: `font-family "Inter, sans-serif"` names one family called
493−"Inter, sans-serif", and the compiler warns about it. A font stack is
494−several values with commas between them, written `\,`:
495−`font-family Inter\, sans-serif`.
496−
497−Values mean what they mean in CSS, with one addition: **in a length
498−property, every bare number outside parentheses and quotes is pixels**. So
499−`padding 20` is `20px`, `border 1 solid red` is `1px solid red`,
500−`box-shadow 0 2 4 rgba(0,0,0,0.1)` is `0 2px 4px rgba(0,0,0,0.1)`, and
501−`margin 0 auto` is `0 auto` (a zero stays `0`). Numbers inside a function
502−belong to it (`rgb(255 128 0)`, `calc(100% - 20px)`), and values that have
503−a unit or are keywords pass through as written (`width 50%`, `max-width
504−min(100%, 800px)`). Every other property takes numbers as CSS does, so
505−`opacity 0.5`, `z-index 2`, `line-height 1.5`, `flex 1 1 240px`,
506−`grid-column 1 / 3`, `initial-letter 3` and `border-image-width 2` are
507−written as they are, and so are custom properties (`--cols 3`), which have
508−no type to go by.
509−
510−The length properties are these, and only these:
511−
512−| Group | Properties |
194+htmlang's own attributes are about layout, in the spirit of elm-ui: how an
195+element sits in its row or column.
196+
197+| Attribute | Effect |
513198|---|---|
514−| Size | `width`, `height`, `min-*` and `max-*` of both, `block-size`, `inline-size` and their `min-`/`max-`, `flex-basis`, `column-width`, `contain-intrinsic-*` |
515−| Space | `margin`, `padding`, `scroll-margin`, `scroll-padding` and every side of them, `gap`, `row-gap`, `column-gap`, `border-spacing` |
516−| Position | `top`, `right`, `bottom`, `left`, `inset` and `inset-*`, `translate`, `transform-origin`, `perspective`, `perspective-origin`, `offset-position`, `offset-anchor`, `offset-distance` |
517−| Border | `border` and every `border-*` shorthand, width and radius (not `border-image-*`), `outline`, `outline-width`, `outline-offset`, `column-rule`, `column-rule-width` |
518−| Shadow | `box-shadow`, `text-shadow` |
519−| Grid | `grid-template-columns`, `grid-template-rows`, `grid-auto-columns`, `grid-auto-rows` |
520−| Background | `background-position` (and `-x`, `-y`), `background-size`, `object-position`, `mask-position`, `mask-size` |
521−| Text | `font-size`, `letter-spacing`, `word-spacing`, `text-indent`, `text-decoration-thickness`, `text-underline-offset`, `vertical-align`, `baseline-shift` |
522−| Other | `shape-margin`, `overflow-clip-margin`, `view-timeline-inset` |
523−
524−Shorthands that mix lengths with numbers of other kinds (`font`,
525−`background`, `mask`, `grid`, `grid-template`, `offset`, `flex`) are not in
526−the table, so the lengths in them are written with their unit:
527−`font 700 16px/1.5 Inter`.
528−
529−Nothing else is added to a value, and a shorthand means what it means in
530−CSS: `outline 2 solid red` is `2px solid red`, while `outline 2 red` names
531−no line style, so CSS draws no outline. `container card / inline-size`
532−and `contain content` are CSS's own shorthands too, and a bare `contain` is
533−an error, like any style without a value. `line-clamp N` alone also adds
534−the `-webkit-box` declarations that browsers still need to cut text off
535−after N lines.
536−
537−A property htmlang doesn't know is written to the CSS as it is, so new CSS
538−(`text-grow per-line`) works before htmlang lists it; the
539−compiler warns and suggests the closest known name, in case it is a typo.
540−Vendor-prefixed properties (`-webkit-tap-highlight-color`) pass without a
541−warning. The value of a property htmlang doesn't know is written exactly as
542−it is, without pixels added. A style needs a value: `[padding]` is an error.
199+| `spacing N` | Gap between children |
200+| `width fill` / `width N` / `width shrink` | Take remaining space, exact size, or fit content |
201+| `height fill` / `height N` / `height shrink` | Same for height |
202+| `center-x`, `center-y` | Center within the parent |
203+| `align-left`, `align-right`, `align-top`, `align-bottom` | Align within the parent |
204+| `wrap` | Let a row wrap |
205+| `grid-cols N`, `grid-rows N`, `col-span N`, `row-span N` | Grid layout |
543206
544−```
545−@el [-webkit-tap-highlight-color transparent, -webkit-text-stroke 1px black]
546− Passed through as written
547−```
207+### Style
548208
549−A value is checked only for what is wrong in any CSS. A `;`, `{` or `}`
550−(outside a quoted string, and for `;` outside parentheses, as in CSS's own
551−`if()`) or an unclosed quote or parenthesis would break out of the rule, and
552−a `</style` (even quoted) would end the page's style element, so each is an
553−error, including in a value that comes from a variable or from `@data`. A hex color that doesn't have 3, 4, 6 or 8 digits is a warning. A
554−style whose value comes out empty, such as a field that a record doesn't
555−have, is left out. Since a value is CSS's, a missing comma between two
556−styles makes one value: `padding 8 color red` is `padding: 8px color red`,
557−which the browser ignores. A style written as an HTML attribute
558−(`padding=8`) is a warning that shows its style form.
559−
560−#### Custom properties
561−
562−A custom property (`--name`) is a CSS property like any other: it goes on
563−any element, under any prefix, and is written into the element's class.
564−Its name is yours, so it is never checked against a list.
565−CSS passes it down, so it holds for the element and everything inside it,
566−where `var(--name)` reads it. Its value is written exactly as it is, since
567−a custom property has no type for pixels to go by: `--hue 200` can feed
568−`hsl(var(--hue) 80% 50%)` and `--cols 3` can feed `repeat(var(--cols),
569−1fr)`. A length therefore takes its unit: `--gap 16px`, not `--gap 16`.
209+Everything else is CSS: **any standard CSS property** is an attribute, with
210+the same name and value: `padding 20`, `font-weight bold`, `font-size 18`,
211+`border 1 solid #e5e7eb`, `border-radius 8`, `background red`,
212+`display none`, `grid-template-areas "a b"`, and so on. `line-clamp N` also
213+adds the `-webkit-box` declarations browsers still need to cut text off after
214+N lines.
570215
571−```
572−@el [
573− --gap 16px,
574− md:--gap 24px,
575− --hue 200,
576− spacing var(--gap),
577− background hsl(var(--hue) 80% 95%)
578−]
579− @text One
580− @text Two
581−```
216+**Units.** For lengths, a bare number is pixels (`padding 20` is `20px`,
217+`border 1 solid red` is `1px solid red`). Values with a unit, keywords and CSS
218+functions are passed through: `width 50%`, `margin 0 auto`,
219+`max-width min(100%, 800px)`.
582220
583−`@let --name value` declares a custom property for the whole page, on
584−`:root` (see [CSS custom properties](#css-custom-properties));
585−`[--name value]` sets it on one element and everything inside it. So a
586−design token is declared once with `@let`, and a theme redefines it where
587−it changes, once, rather than repeating a colour on every element that
588−uses it:
221+### HTML attributes
222+
223+Write HTML attributes as `key=value`: `id=main`, `class=note`, `href=/about`,
224+`type=email`, `alt=Logo`, `target=_blank`, `aria-label=Close menu`,
225+`data-id=42`. Any name works. Booleans are written bare: `required`,
226+`disabled`, `checked`, `open`, `sandbox`. A style and an HTML attribute may
227+share a name without clashing:
589228
590229```
591−@let --ink #0f172a
592−@let --surface white
593−@let --subtle #f8fafc
594−@page [color var(--ink), background var(--surface), dark:[--ink #e2e8f0, --surface #0b1220, --subtle #111a2e]] Tokens
595−@section [padding 96 24, background var(--subtle)]
596− @article [padding 24, background var(--surface)]
597− Both follow dark mode, from the one place that sets it.
230+@image [width=800, width 200, alt=A photo] photo.jpg
231+@select [size=4, font-size 18]
232+ @option One
598233```
599234
600−### Prefixes
235+### State and media prefixes
601236
602−A prefix applies a style only in some condition:
237+Prefix a style attribute to apply it conditionally:
603238
604239| Prefix | Applies |
605240|---|---|
606−| `hover:`, `focus:`, `first-child:`, `checked:`, `user-invalid:`, `open:`, ... | When that CSS pseudo-class matches (`:hover`, `:first-child`, ...) |
607−| `nth-child(odd):`, `not(.featured):`, `has(> img):`, `is(...):`, ... | When that pseudo-class, with its argument, matches |
608−| `before:`, `after:`, `marker:`, `placeholder:`, `backdrop:`, ... | To that pseudo-element (`::before`, `::marker`, ...) |
241+| `hover:`, `active:`, `focus:`, `focus-visible:`, `focus-within:`, `disabled:`, `checked:`, `visited:`, `target:`, `valid:`, `invalid:`, `empty:`, `placeholder:`, `selection:` | In that state |
242+| `first:`, `last:`, `odd:`, `even:`, `nth:EXPR:` | By position among siblings |
609243| `children:` | To each direct child |
610−| `@td:`, `@h2:`, `@link:`, ... | To every such element inside it, at any depth (see [Styling the elements inside](#styling-the-elements-inside)) |
611−| `sm:`, `md:`, `lg:`, `xl:`, `2xl:` | From that viewport width up (640, 768, 1024, 1280, 1536px) |
612−| `cq-sm:` … `cq-2xl:` | From that container width up (the same widths, for an ancestor with `container-type inline-size`) |
613−| `dark:`, `print:`, `motion-safe:`, `motion-reduce:`, `landscape:`, `portrait:` | Under that media condition |
614−
615−The selector prefixes are CSS's own pseudo-classes and pseudo-elements,
616−under their CSS names, without the colons: `link`, `visited`,
617−`first-child`, `last-child`, `only-child`, `first-of-type`,
618−`last-of-type`, `only-of-type`, `empty`, `target`, `open`,
619−`popover-open`, `default`, `checked`, `indeterminate`,
620−`placeholder-shown`, `autofill`, `required`, `optional`, `valid`,
621−`invalid`, `user-valid`, `user-invalid`, `read-only`, `read-write`,
622−`focus-within`, `hover`, `focus`, `focus-visible`, `active`, `enabled`
623−and `disabled`; with an argument, `nth-child()`, `nth-last-child()`,
624−`nth-of-type()`, `nth-last-of-type()`, `not()`, `is()`, `where()` and
625−`has()`; and the pseudo-elements `before`, `after`, `marker`,
626−`placeholder`, `selection`, `backdrop`, `first-line`, `first-letter` and
627−`file-selector-button`, which htmlang writes with CSS's `::`. The argument
628−is CSS, written as it is between balanced parentheses, and it may hold
629−spaces and colons: the key ends at the first space outside parentheses, so
630−`has(> img):padding 0` and `is(:hover, :focus-visible):color red` are one
631−key each. `children:` is htmlang's one combinator word, and an element's
632−name with `@` (`@td:`) picks out the elements of that kind inside. A name
633−that isn't one of these (`hvoer:`, or `first:` for `first-child:`) is an
634−unknown prefix, an error, not a selector that silently never matches.
635−
636−A prefix goes on a style or a layout flag, and prefixes stack: the key
637−is a chain of prefixes, then the property, and the style applies where
638−all of them hold. The selector prefixes (every row above the widths)
639−read left to right: `hover:children:` styles the children of a hovered
640−element, `children:hover:` a hovered child. A pseudo-element is not an
641−element with states of its own, so it comes last among them:
642−`hover:before:color` is the `::before` of a hovered element, and
643−`before:hover:color` is an error that says so. The width, media and
644−container prefixes go anywhere in the chain, in any order, and each is
645−an `@media` or `@container` rule around the ones inside it:
646−`md:dark:padding 32` and `dark:md:padding 32` are the same style, from
647−768px up in dark mode.
648−
649−A prefix written before a `[group]` applies to each style in it, and one
650−written before a `$bundle` to each style the bundle holds, so styles that
651−share a condition are written under it once. A prefix before an `if()`
652−applies to the branch it picks. The group or bundle holds styles only:
653−an HTML attribute (`md:[id=x]`) or a flag that is not a style has no
654−states, and it is an error there, as it is with a prefix of its own
655−(`md:id=x`).
656−
657−`children:` styles each direct child, as the parent sees it. They take
658−effect only where the child sets nothing itself, since what an element
659−says about itself wins over what its parent says about it. They do win
660−over the defaults of the child's kind, so `children:display list-item`
661−brings back a list's markers and `children:margin-bottom 8` spaces
662−headings. The words
663−that place an element in its parent (`width fill`, `width shrink`,
664−`center-x`, `align-*`) are errors under `children:`, because there the
665−parent they measure against is this element: they go on the children
666−themselves, or the CSS they stand for does (`children:flex 1`).
667−
668−#### Styling the elements inside
669−
670−An element prefix, `@NAME:`, styles every element of that kind inside
671−this one, at any depth. `@table [@td:padding 8]` pads every cell of the
672−table, and `@article [@h2:font-size 20]` sizes every heading in the
673−article. It is how content that has no attributes of its own is styled:
674−the HTML `@markdown` writes, and the rows a loop writes.
244+| `before:`, `after:` | On the `::before` / `::after` pseudo-element (with `content`) |
245+| `has(SELECTOR):` | When the element contains a match |
246+| `sm:`, `md:`, `lg:`, `xl:`, `2xl:` | From that viewport width up (640–1536px) |
247+| `cq-sm:` … `cq-2xl:` | Container queries |
248+| `dark:`, `print:`, `motion-safe:`, `motion-reduce:`, `landscape:`, `portrait:` | Media conditions |
675249
676250```
677−@let team Ada, Grace, Linus
678−@table [border-collapse collapse, width 100%, @th:[padding 8, text-align left], @td:padding 8, @tr:border-bottom 1 solid #e5e7eb]
679− @tr
680− @th Name
681− @th Team
682− @each $name in $team
683− @tr
684− @td $name
685− @td [padding 2] Platform
686−@article [spacing 12, @h2:font-size 20, @code:[padding 1 4, background #f1f5f9], @link:hover:color #2563eb]
687− @markdown
688− ## Notes
689−
690− Run `htmlang check` before you [publish](/publish).
691−```
692−
693−- **The element has a tag of its own.** `@td:` is every `<td>`,
694− `@paragraph:` every `<p>`, `@link:` every `<a>` and `@image:` every
695− `<img>`, the ones `@markdown` and `@raw` write included. An element that
696− shares its tag can't be picked out, so its prefix is an error: `@el`,
697− `@row`, `@grid`, `@in-front` and `@behind` all write `<div>`, and `@text`
698− writes the `<span>` that every line of text in a row or column is too.
699− So is a function's name (`@card:`), since a function writes whatever its
700− body says and has no tag of its own, and a name that isn't an element
701− (`@a:` suggests `@link:`).
702−- **It takes CSS properties.** htmlang's layout words (`spacing`, `wrap`,
703− `grid-cols`, `col-span`, `width fill`, `center-x`, `align-*`) compile
704− against each element's own layout and its parent's, which the prefix
705− doesn't know, so they are errors under it: write them on the elements,
706− or the CSS they stand for (`@li:margin-inline auto`). HTML attributes
707− have no states: `@td:colspan=2` is an error, like `md:colspan=2`.
708−- **It composes with the other prefixes, read left to right.** Selector
709− prefixes after it choose among the elements:
710− `@tr:nth-child(even):background #f8fafc` shades every other row, and
711− `@link:hover:color red` colours a hovered link. Those before it are
712− about the element itself: `hover:@link:color red` recolours its links
713− while it is hovered. Width, media and container prefixes go anywhere
714− (`md:@td:padding 12`). A `[group]` or a `$bundle` takes it like any
715− prefix: `@th:[padding 8, text-align left]`. A style has one element
716− prefix, and not `children:` as well: each says which elements the style
717− is for.
718−- **What an element says about itself wins.** A cell's own `[padding 2]`
719− wins over the table's `@td:padding 8`, and a parent's `children:` wins
720− over it too. The prefix wins over the defaults of the element's kind, so
721− `@main [@h2:margin-block-start 16]` spaces headings, which start with
722− `margin: 0`. Where two elements around one both style it, the nearest
723− wins, whatever the order they are written in: in an `@article
724− [@td:padding 16]` around a `@table [@td:padding 8]`, the table's cells
725− get 8.
726−- **It styles what is inside, not the element itself.** `@ul
727− [@ul:padding-inline-start 16]` indents the lists inside the list, not
728− the list itself.
729−
730−`children:` and an element prefix answer different questions:
731−`children:` is for the direct children, whatever they are, as the parent
732−sees them; `@td:` is for every cell inside, however deep. An element's
733−own attributes are for it alone.
734−
735−Each style under an element prefix compiles to a rule in CSS's `@scope`,
736−on the element's class, in the layer `hl-inside` (see [CSS](#css)):
737−`@scope (.hl-2k9xq0m) { :scope td { padding: 8px } }`. `@scope`'s proximity
738−rule is what makes the nearest element win. `@scope` is Baseline 2025,
739−supported by Chrome and Edge 118, Safari 17.4 and Firefox 146; an older
740−browser ignores these rules, so the elements inside keep the styles they
741−have without them.
742−
743−```
744−@let card [padding 16, border 1 solid #e5e7eb, border-radius 8]
745−@let active true
746−@el [padding 16, background #3b82f6, hover:background #2563eb, md:[padding 32, font-size 20], dark:[background #1e3a8a, hover:background #1e40af]]
251+@el [padding 16, background #3b82f6, hover:background #2563eb, md:padding 32, dark:background #1e3a8a]
747252 @text [color white] Click me
748−@row [spacing 4, children:flex 1, hover:children:opacity 0.8]
749− @el [nth-child(odd):background #f3f4f6] A
750− @el [nth-child(odd):background #f3f4f6] B
751− @el [nth-child(odd):background #f3f4f6] C
752−@el [before:content "→ ", before:color red, hover:before:color blue]
253+@row [spacing 4, children:flex 1, nth:2n:background #f3f4f6]
254+ @el A
255+ @el B
256+@el [before:content "→ ", before:color red]
753257 Item with an arrow
754−@section [spacing 16, md:$card, hover:if($active, [background #eef2ff, color #3730a3])]
755− A card from md up
756258```
757259
758−The styles of one element follow a fixed order, whatever the order they
759−are written in: those without a prefix, then those with selector
760−prefixes only, then each width, media and container condition in the
761−order of the table (a stack like `md:dark:` after `dark:` on its own),
762−with its selector chains inside it. So where two styles both hold, the
763−one later in the table wins (`dark:` over `md:`, `lg:` over `md:`), and a
764−stack wins over each of its prefixes on its own (`md:dark:` over `dark:`
765−and `md:`). Selector chains follow CSS's usual order: `link:` and
766−`visited:`, the position and form states, then `hover:`, `focus:`,
767−`active:`, and `enabled:` and `disabled:` last. So a hovered row wins over
768−`nth-child(odd):`, and a pressed button's `active:` over its `focus:`.
769−
770260### Conditional attributes
771261
772−`if(CONDITION, A, B)`, written as a whole attribute, is `A` when the
773−condition holds and `B` otherwise. Each branch is an attribute, a `[group]`
774−of attributes or a `$bundle`. An empty branch leaves the attribute out, and
775−`B` itself can be left out. Several attributes that depend on one condition
776−are one `if()` with a group:
262+`if(CONDITION, A, B)` picks `A` or `B` by the condition. It works as a value or
263+as a whole attribute, and an empty choice (the `B` can be left out) leaves the
264+attribute out.
777265
778266```
779267@let active true
780−@el [if($active, background blue, background gray), if($active, font-weight bold)]
268+@el [background if($active, blue, gray), if($active, font-weight bold), padding if($active, 12)]
781269 Conditionally styled
782−@link [if($active, [background #eef2ff, font-weight 600, aria-current=page])] /docs Docs
783−```
784−
785−A value that depends on a condition is an [expression](#expressions),
786−`${if(CONDITION, A, B)}`. Its branches are expressions, so a number or a
787−single word is written as it is, and other CSS text is quoted:
788−`padding ${if($active, 24, 0)}`, `color ${if($active, #10b981, "var(--muted)")}`.
789−An `if()` written in a value without `${...}` is CSS's own `if()`, which the
790−browser decides, and it is passed through like any CSS function:
791−`width if(media(width > 40em): 50%; else: 100%)`.
792−
793−## HTML
794−
795−### HTML elements
796−
797−The layout and text elements have elm-ui's names. Every other element has
798−its HTML name: `@strong`, `@em`, `@small`, `@br`, `@sub`, `@caption`,
799−`@tfoot`, `@optgroup`, `@hgroup` and the others in the table of layouts
800−below.
801−
802−| Element | Output | Purpose |
803−|---|---|---|
804−| `@el` | div, flex column | The container: children laid out top to bottom |
805−| `@row` | div, flex row | Children laid out side by side |
806−| `@grid` | div, grid | Grid container (with `grid-cols` or `grid-template-*`) |
807−| `@in-front` / `@behind` | div, absolute | Overlay layers that fill the parent |
808−| `@text` | span | Styled inline text |
809−| `@paragraph` | p | A paragraph of flowing text |
810−| `@link URL` | a | Link: the URL is its `href`, and the text after it is its content |
811−| `@image SRC` | img | Image: the one word after its attributes is its `src` |
812−| `@fragment` | (none) | Its children, without a wrapper element (so it takes no attributes) |
813−
814−Every element has one [layout](#rows-columns-and-text):
815−
816−| Layout | Elements |
817−|---|---|
818−| column | `@el`, `@in-front`, `@behind`, `@nav`, `@header`, `@footer`, `@main`, `@section`, `@article`, `@aside`, `@address`, `@search`, `@noscript`, `@form`, `@details`, `@dialog`, `@figure`, `@blockquote`, `@fieldset`, `@hgroup`, `@ul`, `@ol`, `@menu`, `@li`, `@dl`, `@dd` |
819−| row | `@row` |
820−| grid | `@grid` |
821−| text | `@text`, `@paragraph`, `@link`, `@h1`, `@h2`, `@h3`, `@h4`, `@h5`, `@h6`, `@button`, `@label`, `@legend`, `@summary`, `@figcaption`, `@cite`, `@dt`, `@td`, `@th`, `@code`, `@kbd`, `@mark`, `@abbr`, `@time`, `@b`, `@i`, `@strong`, `@em`, `@small`, `@s`, `@u`, `@sub`, `@sup`, `@q`, `@var`, `@samp`, `@dfn`, `@bdi`, `@bdo`, `@ins`, `@del` |
822−| native | `@table`, `@caption`, `@colgroup`, `@thead`, `@tbody`, `@tfoot`, `@tr`, `@select`, `@optgroup`, `@option`, `@datalist`, `@textarea`, `@progress`, `@meter`, `@output`, `@pre`, `@ruby`, `@rt`, `@rp`, `@picture`, `@video`, `@audio`, `@iframe`, `@object`, `@map`, `@canvas`, `@script` |
823−| void | `@image`, `@input`, `@hr`, `@br`, `@wbr`, `@col`, `@source`, `@track`, `@embed`, `@area` |
824−
825−`@fragment`, `@children` and `@slot` have no element of their own: what
826−they hold takes the layout of the element they are in. The top of a page is
827−a column, `<body>` (see [Page and head](#page-and-head)). In a native
828−element, and at the top of a fragment, lines of text are separated by a line break,
829−which HTML shows as a space except where whitespace is kept, as in `@pre`
830−and `@textarea`.
831−
832−The text-level elements (`@strong`, `@em`, `@b`, `@i`, `@small`, `@sub`,
833−`@q`, `@del`, ...) are text with the browser's own style and no CSS of
834−htmlang's, so they work inside a line like any inline element. Table parts,
835−`@optgroup` and `@ruby` keep HTML's own layout:
836−
837−```
838−@paragraph
839− {@strong Note:} water is H{@sub 2}O,{@br}
840− and {@em this} is {@small fine print}.
841−@table
842− @caption Team
843− @thead
844− @tr
845− @th Name
846− @tbody
847− @tr
848− @td Ada
849− @tfoot
850− @tr
851− @td One person
852−@select [aria-label=Fruit]
853− @optgroup Citrus
854− @option Lemon
855−```
856−
857−The list of elements is fixed: a name that isn't in it is an unknown
858−element, not a new HTML tag, since a function is called with the same `@`
859−and a misspelled one would otherwise become a tag. HTML's `<div>`, `<span>`,
860−`<p>`, `<a>` and `<img>` are htmlang's own `@el`, `@text`, `@paragraph`,
861−`@link` and `@image`, so `@a` is an unknown element whose error suggests
862−`@link`. The head's elements (`<meta>`, `<style>`, `<title>`, `<link>`) are
863−written with [directives](#page-and-head). `<data>` and `<slot>` share their
864−names with `@data` and `@slot`, and `<template>` holds content that only a
865−script uses; these, and `<svg>` and `<math>`, are written with `@raw`.
866−
867−An element without a closing tag (`@input`, `@hr`, `@br`, `@image`,
868−`@source`, ...) takes no content.
869−
870−Browser default margins on headings, paragraphs, lists and figures are reset
871−to 0 (in the element's own class, so Markdown and raw HTML keep theirs; see
872−[CSS](#css)), so `spacing` controls the gaps. Lists (`@ul`, `@ol`, `@menu`) and list
873−items are columns like other containers, so `spacing` on a list is the gap between its items, and
874−a list shows no markers. To bring them back, write
875−`[list-style disc, padding-inline-start 20, children:display list-item]` on
876−the list, and `marker:` styles the markers themselves (`::marker`).
877−
878−```
879−@ol [spacing 4]
880− @li First
881− @li Second
882−@ul [list-style disc, padding-inline-start 20, children:display list-item, children:marker:color #2563eb]
883− @li [first-child:font-weight 700] Markers
884− @li Back
885−@form [method=post, spacing 8] /subscribe
886− @label [for=email] Email
887− @input [type=email, name=email, id=email, required]
888− @button [type=submit] Send
889−@details [open]
890− @summary Question
891− @text The answer.
892−```
893−
894−### The leading argument
895−
896−An element that points at a URL or a file takes it as the first word after
897−its attributes, its leading argument, which fills one HTML attribute:
898−
899−| Element | Leading argument |
900−|---|---|
901−| `@link`, `@area` | `href` |
902−| `@image`, `@script`, `@iframe`, `@video`, `@audio`, `@track`, `@embed` | `src` |
903−| `@source` | `srcset` directly inside `@picture`, `src` inside `@video` and `@audio` |
904−| `@form` | `action` |
905−| `@object` | `data` |
906−| `@optgroup` | `label` |
907−
908−The first word is taken before any `$name` in it is filled in, and it ends
909−at the first space that isn't inside `"..."` or `${...}`: `@link $url More`
910−and `@link /page/${$n + 1} Next` take the whole `$url` and
911−`/page/${$n + 1}`, and `@link "/my page" Open` takes `/my page`. After it,
912−the rest of the text is the element's content, read like any text; an
913−element without content (`@image`, `@source`, `@track`, `@embed`, `@area`)
914−takes nothing more, and a word after its argument is an error (write a
915−text alternative as `alt=...`). So is a word after an `@optgroup`'s label,
916−since it holds only the `@option` lines under it. A value with a space in
917−it is quoted, as such a label: `@optgroup "Citrus fruits"`. The first word is
918−always the argument, so on an element whose attribute is often left out
919−(`@form`, `@video`, `@audio`), text goes on the lines under it: `@form Sign
920−in` would make `Sign` the form's action. A first word that reads as text,
921−a capitalized word with nothing of a URL in it, is taken with a warning
922−(`text-as-url`): `@link [hx-get=/panel] Open panel` makes `Open` the link's
923−`href`. A relative URL like that one is written `./Open`.
924−
925−The attribute can be written as an attribute instead, and it means the same:
926−`@link [href=/about]` with its text on the lines under it, or
927−`@image [src=logo.svg, inline]`. Both at once, as in
928−`@link [href=/a] About`, is an error that says which word was taken as the
929−`href`.
930−
931−```
932−@nav [flex-direction row, spacing 16]
933− @link /docs The docs
934− @link [aria-current=page] /pricing Pricing
935−@image [alt=The team, width 320] "team photo.jpg"
936−@picture
937− @source [type=image/avif] hero.avif
938− @image [alt=The office] hero.jpg
939−@video [controls] intro.mp4
940− @track [kind=captions, srclang=en] intro.vtt
941− Your browser doesn't play this video.
942−```
943−
944−`@script` is an element like the others: its leading argument is its `src`,
945−any HTML attribute passes through (`@script [type=module, defer] app.js`),
946−and without a `src` its indented body is its JavaScript, kept exactly as
947−written. A `src` and a body together are an error, since the browser runs
948−only the file. It isn't shown, so a style on it is an error.
949−
950−```
951−@script [defer] analytics.js
952−@script
953− document.body.dataset.ready = "yes"
954270```
955271
956−### HTML attributes
272+## Variables and functions
957273
958−HTML attributes are written `key=value`: `id=main`, `class=note`,
959−`href=/about`, `type=email`, `alt=Logo`, `target=_blank`,
960−`aria-label=Close menu`, `data-id=42`, `hx-get=/items`. Any name works,
961−one with a colon in it included (`xml:lang=en`, `hx-on:click=open()`):
962−before an `=` a colon is part of the name, not a prefix. Boolean attributes
963−are written bare: `required`, `disabled`, `checked`, `hidden`, `open`,
964−`popover`, and so are `data-` and `hx-` attributes that have no value
965−(`hx-preserve`). An HTML attribute written like a style (`type email`,
966−`hx-get /items`) is an error that shows the `key=value` form. A style
967−and an HTML attribute can share a name, because the `=` tells them apart:
968−
969−```
970−@image [width=800, width 200, alt=A photo] photo.jpg
971−@label
972− Size
973− @select [size=4, font-size 18]
974− @option One
975−```
976−
977−## Definitions
978−
979−`@let` defines everything reusable. What it defines depends on its form:
274+`@let` defines everything reusable. What it defines depends on its shape:
980275
981276```
982277-- A value, used as $primary
983278@let primary #3b82f6
984−-- A computed value: `=` makes the rest an expression
279+-- A computed value: `=` makes it an expression
985280@let gap = 8 * 2
986−-- Quoted text, with $variables filled in (see Variables for its quotes)
987−@let greeting "Hello from $primary"
281+-- A quoted string, with $variables interpolated
282+@let greeting "Hello $primary"
988283-- An attribute bundle, used as [$card]
989284@let card [padding 20, background white, border-radius 8]
990−-- A function: `@` before its name, its parameters in brackets, and a body
991−@let @panel [title]
992− @el [$card, spacing $gap]
993− @text [font-weight bold, color $primary] $title
285+-- A function: a @let with an indented body
286+@let panel $title $tone=neutral
287+ @el [$card]
288+ @text [font-weight bold] $title
994289 @children
995290
996291@panel [title Welcome]
997− $greeting
292+ Body text goes into @children.
998293@el [$card, background #f9fafb]
999294 Attributes after a bundle override it.
1000295```
1001296
1002−The line alone says what a `@let` defines: an `@` before the name makes a
1003−function, a `[` after the name an attribute bundle, and anything else a
1004−value. A value or a bundle is named without `$` and used with it; a function
1005−is named with `@` and called with it. Only a function has a body, so an
1006−indented block under a value or a bundle is an error, and so are `@let $x`
1007−(write `@let x`) and a `@let` without a value.
1008−
1009−Values, bundles and functions share one namespace, and one rule says where
1010−a name is visible: **from the line that defines it to the end of its
1011−block**. A block is the file, the lines indented under an element, a branch
1012−of `@if`, one repetition of `@each` or a function's body. A `@let` gives its
1013−name a new meaning in its block, whatever the name meant before, and hides
1014−what the name means around the block until the block ends:
1015−
1016−```
1017−@let gap 8
1018−@el [spacing $gap]
1019− @let gap 16
1020− @el [padding $gap] Sixteen
1021−@el [padding $gap] Eight
1022−```
1023−
1024−Parameters, `@each` variables and `@data` names follow the same rule, and
1025−each repetition of `@each` starts afresh, so a `@let` in one doesn't carry
1026−over to the next. A function's body sees its parameters and what is
1027−visible where the function is defined: not the names at a call, and not a
1028−definition further down, so a function means the same wherever it is
1029−called. `@let t.greeting Hello` gives the record `$t` the field `greeting`
1030−(making `$t` a record when it isn't defined), and `@let items.0 first`
1031−replaces the first item of the list `$items`; a field of any other value is
1032−an error.
1033−
1034−### Variables
1035−
1036−`$name` inserts a value wherever htmlang holds text: a line of text, an
1037−attribute's value, an element's argument, a `@let` value, a file path, the
1038−title of `@page` and the value of `@meta`. Each line is read first, and then
1039−`$name` fills the one place it is written in. What it inserts is never read
1040−again as htmlang, so a value can't become an attribute, an attribute's name,
1041−a comma between attributes, an inline element or another `$name`. Attributes
1042−come from a bundle:
1043−
1044−```
1045−@let link-style [color #2563eb, text-decoration underline]
1046−@let label Docs
1047−@link [$link-style, aria-label=$label] /docs Read the $label
1048−```
1049−
1050−A name starts with a letter or `_` and goes on with letters, digits, `_`
1051−and `-`. It ends at the first other character, so after `@let lang fr`,
1052−`$lang.json` is `fr.json`. A `.field` continues the name only when the value
1053−is a record or a list (`$post.title`, `$tags.0`). `${name}` is the same name
1054−with explicit ends, for text that follows it directly, and `${EXPR}` inserts
1055−the value of an [expression](#expressions). A `$` followed by anything else
1056−is text.
1057−
1058−```
1059−@let lang fr
1060−@let size 4
1061−@data $post {"title": "Hello"}
1062−@text locales/$lang.json, ${size}px, $post.title, $5
1063−```
1064−
1065−A name that isn't defined is an error. A field that a record doesn't have
1066−is empty, and so is any field of it, so optional fields of `@data` records
1067−work: `@if $post.draft` is false, `$post.author.name` is empty when there is
1068−no `author`, and `${default($post.tag, none)}` gives `none`.
1069−
1070−### Values
1071−
1072−A value is text, a number, `true` or `false`, a list or a record, and a
1073−name holds a whole value: a `@let`, a parameter, `@each` and `@data` bind
1074−one, and binding the name again replaces it. What a `@let` holds is what it
1075−says:
1076−
1077−```
1078−-- Text, as written
1079−@let size 16px
1080−-- Commas make a list, which prints as it was written
1081−@let fruits apple, banana, cherry
1082−-- Quoted, or with `\,`, text with commas in it is one text
1083−@let tagline "Fast, simple"
1084−@let motto small\, fast
1085−-- A range of whole numbers
1086−@let steps 1..9 step 4
1087−-- One `$name` or `${...}` keeps the type of what it holds
1088−@data $posts [{"title": "Hello"}, {"title": "Again"}]
1089−@let first $posts.0
1090−@let backwards ${reverse($fruits)}
1091−@text [font-size $size] $fruits: ${length($fruits)}. $tagline: ${length($tagline)}. $motto. $steps
1092−@text $first.title, $backwards
1093−```
297+A function is called like an element:
1094298
1095−The last lines give `apple, banana, cherry: 3. Fast, simple: 12. small,
1096−fast. 1..9 step 4` and `Hello, cherry, banana, apple`. A value that is
1097−exactly one `$name` or `${...}` keeps its type wherever it goes: a `@let`, a
1098−function's parameter or default, the list of `@each`. So a record can be
1099−passed to a function whole (`@post-card [post $p]`), and a list stays a
1100−list.
1101−
1102−- Text written without quotes reads as a number when it is one (`3`,
1103− `0.5`), and as false when it is `false` or `0`: that is how htmlang writes
1104− numbers and flags (`@let gap 8`, `@card [dot false]`). Quoted text is
1105− always text.
1106−- **False** is `false`, empty text, `0` and an empty list (or record).
1107− Everything else is true, including `no` and quoted `"0"`.
1108−- `==` and `!=` compare numbers as numbers (`1.0 == 1`), lists and records
1109− item by item, and anything else as text, exactly (`#FFF` isn't `#fff`).
1110− `<`, `>`, `<=` and `>=` compare numbers as numbers and text by character
1111− order.
1112−- A computed number prints without float noise: whole numbers without
1113− decimals, others with at most four (`${100 / 3}` is `33.3333`).
1114−- A list prints as written when the source wrote it, and otherwise as its
1115− items joined with `, `. A record has no text of its own, so writing one
1116− (or a list of records) where text goes is an error: write one of its
1117− fields, or loop over the list with `@each`.
1118−- A `$list` in a comma list is one item, a list inside the list:
1119− `@let more $items, d` has two items. htmlang has no list concatenation.
1120−
1121−**Quoted text remembers that it was quoted.** A value written `"..."` (in a
1122−`@let`, an attribute or a function's argument) keeps its quotes in a CSS
1123−value, where CSS needs them, and loses them in text, in HTML attribute
1124−values and in expressions (`${length($x)}` counts no quotes). It stays
1125−quoted when it passes through another `@let` or a parameter. Inside a quoted string of a CSS value, it inserts
1126−what it says, without its own quotes:
299+- Its parameters are passed as attributes; parameters with `=default` may be
300+ omitted.
301+- Other attributes style its root element, so `@panel [title Hi, padding 40]`
302+ works like styling a built-in element.
303+- Text after the attributes and indented children replace `@children`, and a
304+ caller's `@slot name` block replaces `@slot name` (the slot's own children are
305+ the default).
306+- An `@style` block at the top of the body is scoped to the function: its rules
307+ apply inside the function's root element (`&` is the root itself). The
308+ body needs a single root element.
1127309
1128310```
1129−@let arrow "→ "
1130−@let label "Next, please"
1131−@el [before:content $arrow, after:content " ($label)", aria-label=$label] $label
1132−```
1133−
1134−This gives `content:"→ "`, `content:" (Next, please)"`,
1135−`aria-label="Next, please"` and the text `Next, please`. A value written
1136−without quotes is inserted as written everywhere.
1137−
1138−### Functions
1139−
1140−A function's parameters are listed in brackets after its name and written
1141−the way a call passes them: a name alone (`title`) is a required parameter,
1142−and a name and a value (`tone #f9fafb`) is a parameter with that default.
1143−The body uses them as `$title` and `$tone`. `@let @name` without brackets
1144−takes no parameters.
1145−
1146−A default is filled in at each call that leaves its parameter out, like a
1147−value passed for it: it may hold spaces, quotes, escapes, `${...}` and
1148−`$variables`. It sees what the body sees: the names visible where the
1149−function is defined and the parameters declared before it
1150−(`[title, heading "About $title"]`). A default that uses a parameter
1151−declared after it is an error.
1152−
1153−A function is called like an element, wherever an element can be: on a
1154−line of its own, in a [chain](#chains) (`@el > @card [title Hi]`) or
1155−inline in text (`{@key Ctrl+K}`):
1156−
1157−- Its parameters are passed by name, as attributes: `name value`, or the
1158− name alone for `true`. A parameter with a default can be left out;
1159− leaving out one without a default is an error that names it. `=` writes
1160− an HTML attribute, so `title=Hi` for a parameter is an error too.
1161−- Every other attribute goes to the function's root element: a style, a
1162− flag, or a `key=value` HTML attribute such as `id=intro`. It is checked
1163− like an attribute written on that element, so `@panel [title Hi,
1164− padding 40]` works the same as styling a built-in element, and
1165− `[paddin 40]` gets the same warning. A name close to one of the
1166− parameters (`titel Hi`) is a misspelled parameter, which is an error.
1167− This needs the body to have a single root element: attributes on a call
1168− whose body has several roots, or is text, are an error. A `class=` adds
1169− to the root's own classes.
1170−- A parameter passed twice (in the call's list, or after a bundle that
1171− passes it) takes the later value, as any attribute does.
1172−- Text after the attributes and the indented lines are the call's
1173− content, and replace `@children` in the body. A `@slot NAME` block
1174− directly under the call (or under an `@if`, `@else` or `@each` there)
1175− fills the body's `@slot NAME` instead.
1176−- The lines indented under `@children` or `@slot NAME` in the body are its
1177− fallback: they are shown when a call passes no content, or no block for
1178− that slot.
1179−
1180−```
1181−@let @card [title, tone #f9fafb]
1182− @article [padding 16, spacing 8, background $tone, border-radius 8]
1183− @row [align-items center]
1184− @h3 $title
1185− @spacer
1186− @slot actions
1187− @children
1188− @slot footer
1189− @text [font-size 12, color gray] No footer
1190−
1191−@card [title Plain]
1192− Just children.
1193−@card [title Full, tone #eff6ff, padding 24]
1194− @slot actions
1195− @link /edit Edit
1196− The children go here.
1197− @slot footer
1198− @text Updated today
1199−```
1200−
1201−`@children` takes a fallback the same way:
1202−
1203−```
1204−@let @notice
1205− @el [padding 12, background #fef3c7]
1206− @children
1207− @text Nothing to report.
1208−
1209−@notice
1210−@notice Deploys are paused today.
1211−```
1212−
1213−Content that would go nowhere is an error, so a mistake can't drop it:
1214−
1215−- a `@slot NAME` block for a slot the function doesn't have (the message
1216− lists the slots it has);
1217−- text or lines passed to a function whose body has no `@children`;
1218−- a `@slot NAME` block inside an element at the call, instead of directly
1219− under the call;
1220−- `@slot` or `@children` outside a function's body, or inline in text;
1221−- `@children` or `@slot` after an element's attributes (`@td [padding 8]
1222− @children`), where it would be text: it goes on a line of its own.
1223−
1224−A slot's name is one word of letters, digits, `-` and `_`, starting with a
1225−letter, like a function's. Inside a body, a call can pass on what the
1226−function got: `@children` under the call passes the content, and a
1227−`@slot footer` block holding `@slot footer` passes that slot.
1228−
1229−A parameter that is off unless the call names it is a flag: give it the
1230−default `false`, and name it alone to turn it on.
1231−
1232−```
1233−@let @post-card [post, featured false, label "About $post"]
1234− @article [spacing 8, padding ${if($featured, 24, 0)}]
1235− @if $featured
1236− @text [font-weight bold] Featured
1237− @h3 $label
1238−
1239−@post-card [post htmlang, featured]
1240−@post-card [post CSS]
1241−```
1242−
1243−An `@style` block at the top of a function body is **scoped** to the
1244−function. Its rules apply inside the function's root element, and `&` is the
1245−root itself. This requires the body to have a single root element. The
1246−stylesheet goes into the page once, when the function is first called, so
1247−a function that is never called adds nothing. It is in the layer
1248−`hl-inside`, with the styles of element prefixes (see [CSS](#css)): what an
1249−element says about itself wins over it, so a call's `[padding 20]` wins
1250−over the function's `& { padding: 12px; }`, as it would over the root's own
1251−defaults. Where CSS properties are all it needs, an element prefix on the
1252−root says the same without a stylesheet (`@aside [@h2:font-size 18]`).
1253−Only an `@style` at the top of the body is scoped: one under an `@if` or an
1254−element is the page's, where `&` is the whole page, so the compiler warns
1255−about a `&` there.
1256−
1257−```
1258−@let @note [kind Note]
311+@let note $kind=info
1259312 @style
1260− & { border-left: 4px solid #3b82f6; }
1261313 .title { font-weight: bold; }
1262314 @el [padding 12, border-radius 6, background #eff6ff]
1263315 @text [class=title] $kind
@@ -1266,94 +318,23 @@ about a `&` there.
1266318@note [kind Tip, padding 20] Scoped styles and forwarded attributes.
1267319```
1268320
1269−A call in text or in a chain whose body has several roots, or is text,
1270−puts them in its place, like `@fragment`. A function whose body is text
1271−holds multi-line content, and a small function works inside a sentence:
321+A multi-line string uses triple quotes; its indented lines are the value:
1272322
1273323```
1274−@let @intro
1275− htmlang is a layout language.
1276− It compiles to {@strong static HTML}.
1277−@let @key
1278− @kbd [padding 1 6, border 1 solid #d1d5db, border-radius 4]
1279− @children
1280−
1281−@paragraph
1282− @intro
1283−@paragraph
1284− In short: {@intro} Press {@key Ctrl+K} to search.
324+@let intro """
325+ First line
326+ Second line
327+ """
328+@text $intro
1285329```
1286330
1287−A function may call itself, under a condition that stops it, so it can
1288−render nested data such as a menu. A parameter passed one `$name` that
1289−holds a record or a list gets the whole value, fields and items
1290−included. Calls nest at most 64 deep: a function that calls itself with
1291−nothing to stop it is an error. Since a body sees only what is defined
1292−above its function, two functions can't call each other.
1293−
1294−```
1295−@data $menu [
1296− {"label": "Guide", "children": [{"label": "Install"}, {"label": "Usage"}]},
1297− {"label": "Reference"}
1298−]
1299−@let @tree [items]
1300− @ul [padding-left 16]
1301− @each $item in $items
1302− @li
1303− @text $item.label
1304− @if $item.children
1305− @tree [items $item.children]
1306−
1307−@tree [items $menu]
1308−```
1309−
1310−The elements a function's body writes are the call's: a problem with
1311−one of them, such as low contrast or `spacing` on an element that isn't a
1312−row, column or grid, is reported at the call, once, and names the function. A
1313−problem in the text of a body is reported on its own line, or at the call
1314−when the function comes from `std.hl` or another file.
1315−
1316−Naming a function after a built-in element or a directive is a warning:
1317−`@let @button` replaces `@button` in every call after it, and a function
1318−named `@if` could never be called. Inside its own body `@button` is the
1319−function too, so a function that wraps the element it is named after,
1320−outside an `@if`, is an error: give it another name.
1321−
1322−### CSS custom properties
1323−
1324−`@let --name value` declares the CSS custom property `--name` on `:root`,
1325−for the whole page. Its value is written as it is, with no pixels added,
1326−so a length takes its unit (`@let --radius 8px`). A token is read one way,
1327−`var(--name)`, in the browser, so an element (`[dark:--name value]`, see
1328−[Custom properties](#custom-properties)) or a stylesheet can still
1329−redefine it. It is not a variable: `$--name` is an error that says to
1330−write `var(--name)`. Since `:root` is one place for the whole page, a
1331−`@let --name` goes at the top level of the file, once: inside an element,
1332−an `@if`, a loop or a function's body it is an error (set the property on an
1333−element with `[--name value]` instead), and declaring it again warns.
1334−
1335−A colour variant of a token is CSS too, so it follows the token wherever
1336−it is redefined: `color-mix()` mixes two colours, and a relative colour
1337−(`rgb(from ...)`) keeps a colour's channels except those you write (`/ 0.5`
1338−for its alpha). `in srgb` mixes the red, green and blue channels, as most
1339−colour tools do; `in oklab` gives steps that look more even, a good choice
1340−for new tokens.
1341−
1342−| For | Write |
1343−|---|---|
1344−| A darker colour | `color-mix(in srgb, var(--brand), black 10%)` |
1345−| A lighter colour | `color-mix(in srgb, var(--brand), white 10%)` |
1346−| A transparent colour | `rgb(from var(--brand) r g b / 0.5)` |
1347−| Two colours mixed | `color-mix(in srgb, var(--brand), #f43f5e 50%)` |
331+`@let --name value` also declares the CSS custom property `--name` on
332+`:root`. `$--name` is its value at compile time; `var(--name)` refers to it at
333+run time, so a stylesheet can override it:
1348334
1349335```
1350336@let --brand #3b82f6
1351−@let --radius 8px
1352−@page [dark:--brand #60a5fa] Themed
1353−@el [background var(--brand), border-radius var(--radius), border 1 solid color-mix(in srgb, var(--brand), black 10%)] Themed
1354−@row
1355− @each $shade in 0, 10, 20, 30
1356− @el [background color-mix(in srgb, var(--brand), black $shade%)] $shade%
337+@el [background var(--brand), border 1 solid ${darken($--brand, 10)}] Themed
1357338```
1358339
1359340## Expressions
@@ -1362,40 +343,24 @@ Conditions and computed values (`@let x = ...`) are expressions:
1362343
1363344| | |
1364345|---|---|
1365−| Values | numbers, `"strings"` (with `$var` interpolation), `$variables` (with their type: a list or a record too), `$record.field`, `true`, `false`, ranges `A..B` and `A..B step N`, and bare words (`dark`, `#fff`) as text |
346+| Values | numbers, `"strings"` (with `$var` interpolation), `$variables`, `true`, `false`, and bare words (`dark`, `#fff`) as strings |
1366347| Arithmetic | `+ - * / %` with the usual precedence, unary `-`, `( )` |
1367−| Comparison | `== != < > <= >=`: numbers as numbers, text exactly, lists and records item by item (see [Values](#values)) |
1368−| Logic | `and`, `or`, `not`. `false`, empty text, `0` and an empty list are false |
1369−| Choice | `if(CONDITION, A, B)`, where `B` may be left out (empty) |
1370−| Tests | `contains(s, x)` (in a text, or as an item of a list), `starts-with(s, x)`, `ends-with(s, x)` |
1371−| Text | `uppercase(s)`, `lowercase(s)`, `capitalize(s)`, `trim(s)`, `length(s)` (the items of a list, or the characters of a text), `reverse(s)` (a list's items, or a text's characters), `truncate(s, n)`, `replace(s, old, new)`, `default(s, fallback)` (the fallback when `s` is empty text or an empty list) |
1372−
1373−Colour maths is CSS's, not an expression's: see
1374−[CSS custom properties](#css-custom-properties). A CSS function such as
1375−`color-mix()` goes in an attribute's value as it is, or in a plain
1376−`@let` value (`@let hover color-mix(in srgb, var(--brand), black 8%)`),
1377−not in `@let x = ...` or `${...}`.
1378−
1379−Variables are looked up during evaluation, so a value that contains `==` or
1380−spaces is still one value. An invalid expression is a compile error, and so
1381−is an undefined variable. A text function given a list is an error too,
1382−instead of a guess: `uppercase()` of `Fast, simple` (a list, because of its
1383−comma) says so, and the text is written `"Fast, simple"` or `Fast\, simple`.
1384−A variable's name ends at `..`, so `${$from..$to}` is a range.
1385−
1386−Only what decides the result is evaluated: `if()` evaluates the branch it
1387−takes, and `and` and `or` stop at the side that decides. So
1388−`${if($n != 0, 10 / $n, 0)}` and `@if $n != 0 and 10 / $n > 1` work when
1389−`$n` is 0. The rest is still read, and its syntax and function names are
1390−checked.
1391−
1392−In text, values and file paths, `${EXPR}` inserts the value of any
1393−expression (see [Variables](#variables)):
348+| Comparison | `== != < > <= >=` (numeric when both sides are numbers), `contains` (in text, or as an item of a list), `starts-with`, `ends-with` |
349+| Logic | `and`, `or`, `not`; empty, `false` and `0` are false |
350+| Choice | `if(CONDITION, A, B)` |
351+| Text functions | `uppercase(s)`, `lowercase(s)`, `capitalize(s)`, `trim(s)`, `length(s)` (a list's items, or a text's characters), `reverse(s)`, `truncate(s, n)`, `replace(s, old, new)`, `default(s, fallback)` |
352+| Color functions | `lighten(c, pct)`, `darken(c, pct)`, `alpha(c, a)`, `mix(c1, c2, pct)` |
353+
354+Variables are looked up while evaluating, so a value containing `==` or spaces
355+is still one value. An invalid expression is a compile error.
356+
357+In text and attribute values, `$name` inserts a variable and `${EXPR}` inserts
358+the value of any expression:
1394359
1395360```
1396361@let name htmlang
1397−@let size 12
1398−@text [font-size ${$size + 4}] ${uppercase($name)} has ${length($name)} letters
362+@let base #3b82f6
363+@text [color ${darken($base, 10)}] ${uppercase($name)} has ${length($name)} letters
1399364```
1400365
1401366## Control flow
@@ -1403,8 +368,8 @@ expression (see [Variables](#variables)):
1403368All control flow runs at compile time.
1404369
1405370```
371+@let items apple, banana, cherry
1406372@let count 3
1407−@let hidden false
1408373
1409374@if $count > 2 and not $hidden
1410375 @text Many
@@ -1412,75 +377,56 @@ All control flow runs at compile time.
1412377 @text None
1413378@else
1414379 @text Few
1415−```
1416−
1417−`@each $item in LIST` repeats its body for each item. Its variables are
1418−written with `$`, like `@data $name`. LIST is a value, read like the value
1419−of a `@let`: items written with commas (a quoted item or one with `\,` is
1420−one text), a range `A..B` (which counts down when its start is greater than
1421−its end, and takes `step N`), or one `$name` or `${...}` that holds a list,
1422−such as one loaded with `@data` or `${reverse(1..5)}`. A text is one item,
1423−and empty text none. Each item is bound whole, so a record keeps its fields.
1424−An optional second variable is the index, starting from 0. `@else` gives
1425−the content to show when the list is empty.
1426380
1427−```
1428−@let fruits apple, banana, cherry
1429−@each $fruit, $i in $fruits
1430− @text ${$i + 1}. $fruit
381+@each $item, $i in $items
382+ @text $i: $item
1431383@else
1432− @text No fruit.
384+ @text The list is empty.
1433385
1434−@row [spacing 8]
1435− @each $n in 10..0 step 5
1436− @text $n
386+@each $n in 1..10 step 3
387+ @text $n
1437388```
1438389
1439−## Data and files
1440−
1441−| Directive | Effect |
1442−|---|---|
1443−| `@data $name file.json` | Load a JSON file. Objects are records (`$name.key`) and arrays are lists |
1444−| `@data $name [...]` / `@data $name {...}` | Inline JSON, which may span several lines |
1445−| `@data $name dir/*.json` | A list with one record per file, in name order. `$item.file` is the file's name |
1446−| `@data $name env:NAME DEFAULT` | An environment variable, with an optional default |
1447−| `@include file.hl` | Insert another file: its content and its definitions. A file that holds only definitions outputs nothing (a [library](#page-layouts)) |
1448−| `@markdown` / `@markdown file.md` | Markdown (an indented body or a file), converted to HTML |
1449−| `@image [inline] file.svg` | Put the file inside the page: SVG as markup, other images as base64. The file is read next to the page, and one that can't be read is an error. The SVG's root gets `width` and `height` (lengths, not `fill` or `shrink`) and `color` or `fill` (as its `fill`) in its `style=`, after the file's own, where `var(--name)` works, and the HTML attributes (`class=`, `aria-label=`, ...); any other style, and `alt=`, is an error, since the markup has no generated class, and an element prefix (`@image:`) doesn't reach it. `inline` goes only on `@image`, without a prefix |
1450−
1451−Records keep their values whole, even when a value contains spaces or
1452−commas:
390+`@each $item in LIST` loops over a list: a list loaded with `@data`, text
391+split on commas, or a range (which counts down when its start is greater than
392+its end). An optional second variable is the index, from 0. An item loaded from
393+JSON can be a record, whose fields are `$item.key`:
1453394
1454395```
1455−@data $team [
1456− {"name": "Ada", "role": "Engineering, research"},
1457− {"name": "Grace", "role": "Design"}
396+@data $links [
397+ {"label": "About us", "url": "/about"},
398+ {"label": "Blog", "url": "/blog"}
1458399]
1459−@ul [spacing 4]
1460− @each $person in $team
1461− @li
1462− @text [font-weight bold] $person.name
1463− @text $person.role
1464−@text ${length($team)} people
400+@row [spacing 12]
401+ @each $link in $links
402+ @link $link.url $link.label
403+@text ${length($links)} links
1465404```
1466405
1467−### Page layouts
406+## Files and data
407+
408+| Directive | Effect |
409+|---|---|
410+| `@include file.hl` | Insert another file: its content and definitions (a library of `@let`s emits nothing) |
411+| `@data $name file.json` | Load JSON values as variables (`$name.key`; arrays are lists) |
412+| `@data $name [...]` / `@data $name {...}` | Inline JSON (an array may span lines) |
413+| `@data $name dir/*.json` | A list with one record per file, in name order; `$item.file` is the file's name |
414+| `@data $name env:NAME [default]` | Read an environment variable |
415+| `@markdown` / `@markdown file.md` | Markdown, converted to HTML |
416+| `@image [inline] file.svg` | Inline an SVG file (`width`, `height`, `color`, `class=`, `id=` apply to it) |
1468417
1469−A layout is an ordinary function in a file of its own. It marks where content
1470−goes with `@slot NAME` (named blocks) and `@children` (everything in the call
1471−that is outside a `@slot` block), each with fallback content indented under
1472−it.
418+A layout is an ordinary function in its own file. It marks where content goes
419+with `@slot name` (named blocks, with default content) and `@children`
420+(everything in the call outside `@slot` blocks):
1473421
1474422```
1475423-- layout.hl
1476−@let @layout
1477− @page [lang=en, background #f8fafc] My Site
1478− @el [width fill, max-width 800, center-x, spacing 24]
1479− @header
1480− @slot header
1481− @text Default header
1482− @main
1483− @children
424+@let layout
425+ @page My Site
426+ @el [max-width 800, center-x]
427+ @slot header
428+ @text Default header
429+ @children
1484430```
1485431
1486432```
@@ -1488,69 +434,30 @@ it.
1488434@include layout.hl
1489435@layout
1490436 @slot header
1491− @h1 About us
437+ @text About us
1492438 @paragraph This fills @children.
1493439```
1494440
1495−The layout holds the page's `@page`, whose attributes can come from its
1496−parameters (`@page [background $bg] $title`). A page has one `@page`, so a
1497−second one is an error (`duplicate-page`): the page's own next to its
1498−layout's, or a layout called twice. The same `@meta` tag twice is written
1499−once. A file that holds only `@let`s, such as `layout.hl`, is a library
1500−(it may also read `@data` and `@include` other libraries): its definitions
1501−aren't reported unused, in it or in a page that includes it and uses only
1502−some of them, and `htmlang build`, `serve` and `watch` don't build it into
1503−a page of its own. An included file's unused definitions are never
1504−reported in the file that includes it.
1505−
1506441## Page and head
1507442
1508−`@page TITLE` makes the output a full HTML document. Without it, the output
1509−is a fragment, which has no `<head>`: `@meta` and `@head` in it are a
1510−warning. `--partial` writes a fragment of a page too, and warns that
1511−`@page`, `@meta` and `@head` are left out. The page is the root element, and `@page`'s attributes are
1512−checked like any element's:
1513−
1514−- Styles style `<body>`, prefixes included, so a page's colour, font and
1515− dark background go on `@page` and cover the whole window.
1516−- `key=value` attributes go on `<html>`: `lang=en`, `dir=rtl`, `class=x`.
1517−- `favicon FILE` is its one word of htmlang's own: the file is put into
1518− the page as its icon (or linked, when it can't be read).
1519−
1520−`<body>` is a column that fills the window (`display: flex;
1521−flex-direction: column; min-height: 100dvh`, from the reset), so the
1522−page's top-level elements are laid out like the children of an `@el`:
1523−they stack, even a line of text or an inline element such as `@text` or
1524−`@link`, and each takes the full width unless it says otherwise. A
1525−centred column at the top writes `width fill` like anywhere else (see
1526−[Rows, columns and text](#rows-columns-and-text)).
1527−
1528−`@meta NAME VALUE` adds a meta tag, and names that start with `og:` become
1529−Open Graph `property` tags; a `@meta viewport` replaces the usual one.
1530−`@head` holds any other raw HTML for the `<head>`, such as a font link, a
1531−canonical URL or JSON-LD, on its line or in its indented block.
443+`@page TITLE` produces a full HTML document; without it the output is a fragment.
444+Its attributes set `lang`, `favicon`, `canonical` and `base`. `@meta NAME VALUE`
445+adds a meta tag (`og:` names become Open Graph `property` tags), and
446+`@head` holds any other raw HTML for the `<head>` (fonts, JSON-LD, a manifest
447+link). Translations are a JSON file per locale: `@data $t locales/$lang.json`.
1532448
1533449```
1534−@page [lang=en, favicon favicon.png, color #1f2937, dark:background #0b1220, dark:color #e5e7eb] My Site
450+@page [lang en, favicon /favicon.png] My Site
1535451@meta description A small site
1536452@meta og:title My Site
1537−@head <link rel="canonical" href="https://example.com/">
1538−@head
1539− <script type="application/ld+json">{"@type": "WebSite"}</script>
1540−@header [padding 16] My Site
1541−@main [height fill, padding 16]
1542− The main part takes the rest of the window.
1543−@footer [padding 16] © 2026
1544453```
1545454
1546−Translations are a JSON file per locale: `@data $t locales/$lang.json`
1547−loads `locales/fr.json` when `$lang` is `fr`.
1548−
1549455## CSS
1550456
1551−`@style` holds raw CSS, including at-rules such as `@keyframes`,
1552−`@font-face`, `@property` and `@starting-style`, in its indented block or,
1553−for a single rule, on its line:
457+- `@style` holds raw CSS, including at-rules such as `@keyframes`, `@scope`,
458+ `@property` and `@starting-style`.
459+- Generated rules live in `@layer htmlang` (after a `hl-reset` layer), so any
460+ CSS in `@style` or `@raw` overrides them.
1554461
1555462```
1556463@style
@@ -1559,61 +466,55 @@ for a single rule, on its line:
1559466 to { opacity: 1; }
1560467 }
1561468 .note { color: gray; }
1562−@style .quiet { opacity: 0.6; }
1563469@el [animation fade-in 0.3s ease, class=note] Fades in
1564470```
1565471
1566−Each element with styles gets a generated class, and elements with the
1567−same styles share one. A class is named by its style: `hl-` and seven
1568−characters of a hash of what it sets (`hl-2k9xq0m`), so one style has one
1569−name in every file. A fragment put into a page (`--partial` output that a
1570−server returns, or any HTML of one file put into another's page) means
1571−the same there, and its rules restyle nothing of the page's: a class of
1572−both is the same style. Two different styles of one file never share a
1573−name (the later one takes more characters), and `htmlang build` checks
1574−the whole site: two files whose different styles hash to one name are an
1575−error (`class-collision`), which one more attribute on either style
1576−fixes. A function's scoped `@style` is named by the function and a hash
1577−of the stylesheet, `hl-fn-card-1x0a9zq`. The `hl-` prefix is htmlang's:
1578−a class of your own that starts with it gets a warning, since the generated
1579−rules would apply to it too. Every style goes into the class under its own
1580−name, with its value as written (plus pixels, see
1581−[CSS properties](#css-properties)); only the layout words, and
1582−`line-clamp`'s fallback, write more than one declaration.
1583−
1584−An element's defaults go with its own class: its layout (a column is
1585−`display: flex`), the margins browsers give headings, paragraphs, lists,
1586−figures and blockquotes are 0, lists have no markers, `@fieldset` has a
1587−thin border and padding, `@code`, `@kbd` and `@pre` are monospace, `@link`
1588−has no underline and takes its parent's text colour, and `@image` is a
1589−block. They apply only to htmlang's own elements, so HTML that comes from
1590−`@markdown` or `@raw` keeps the browser's defaults: a Markdown list keeps
1591−its bullets and a Markdown link its underline.
1592−
1593−The generated rules live in three cascade layers, after a small reset in
1594−the layer `hl-reset`, and a later layer wins over an earlier one whatever
1595−the specificity:
1596−
1597−| Layer | Holds |
472+## Upgrading older files
473+
474+`htmlang upgrade [dir|file]` rewrites removed syntax; the compiler reports each
475+removed form with its replacement.
476+
477+| Removed | Use instead |
1598478|---|---|
1599−| `hl-reset` | The reset |
1600−| `hl-kind` | The defaults of each element's kind, as `:where(.hl-2k9xq0m)` |
1601−| `hl-inside` | The styles an element gets from an element prefix on an element around it (`@td:padding 8`, see [Styling the elements inside](#styling-the-elements-inside)), and functions' scoped `@style` |
1602−| `htmlang` | Each element's own styles, and its parent's `children:` styles |
1603−
1604−So an element's own styles win over everything else htmlang writes for
1605−it; its parent's `children:` styles and the element prefixes of the
1606−elements around it win over its defaults.
1607−
1608−A page's reset sets `box-sizing: border-box` everywhere and makes
1609−`<body>` a column that fills the window. A fragment (a file
1610−without `@page`, or `--partial` output) goes into a page it doesn't own, so
1611−its reset touches only htmlang's own elements (those with an `hl-` class),
1612−which get `box-sizing: border-box`; no other element on the page is
1613−touched. In both, an element
1614−htmlang lays out stays hidden while it has `hidden`, while an `@dialog` is
1615−closed, and while a popover isn't showing, even though its generated
1616−`display` would otherwise beat the browser's `display: none`. A page with
1617−links, buttons or form fields also gives htmlang's ones a focus outline.
1618−CSS outside any layer takes precedence over every layer, so rules in
1619−`@style` or `@raw` override the generated ones.
479+| `@fn`, `@define`, `@mixin`, `@component` | `@let` (function, bundle; `@style` in a function body is scoped) |
480+| `@unless COND` | `@if not COND` |
481+| `@for $i in A..B`, `@repeat N` | `@each $i in A..B`, `@each $_ in 1..N` |
482+| `grid` (attribute) | `@grid`, or `display grid` |
483+| `@switch`, `@match` | `@if $x == a` / `@else if` / `@else` |
484+| `@use "file" names`, `@import file` | `@include file` |
485+| `@collection`, `@env`, `@translations`, `@fetch` | `@data $name SOURCE` (glob, `env:NAME`, or a JSON file per locale) |
486+| `@theme` | `@let --name value` lines |
487+| `@json-ld`, `@font-face`, `@manifest` | Raw HTML in `@head`, CSS in `@style` |
488+| `@breakpoint`, `@deprecated` | A media query in `@style`; nothing |
489+| `@svg [attrs] file.svg` | `@image [inline, attrs] file.svg` |
490+| `gap-x`, `gap-y`, `shadow`, `blur N`, `truncate`, `critical` | `column-gap`, `row-gap`, `box-shadow`, `filter blur(N)`, `$truncate`, nothing |
491+| `@with $x as y` | `@let y $x` |
492+| `@extends layout.hl`, `@layout file` | `@include layout.hl` and a call to the layout, now a function (both files are converted) |
493+| `@scope`, `@starting-style`, `@css-property` | The CSS rule in `@style` |
494+| `@lang`, `@favicon`, `@canonical`, `@base` | `@page [lang ..., favicon ..., canonical ..., base ...] Title` |
495+| `@og KEY VALUE` | `@meta og:KEY VALUE` |
496+| `@assert`, `@warn`, `@debug`, `@log` | Nothing (the lines are removed) |
497+| `@defer` | Its content, directly |
498+| `@col`, `@p`, `@img`, `@li`, `@btn`, `@ul`, `@divider`, `@opt` | `@el`, `@paragraph`, `@image`, `@li`, `@button`, `@ul`, `@hr`, `@option` |
499+| `type email`, `id main` (HTML attributes written as styles) | `type=email`, `id=main` |
500+| `skeleton`, `no-scrollbar`, `gradient A B` | `$skeleton`, `$no-scrollbar`, `background linear-gradient(A, B)` |
501+| `@tooltip TEXT` | `@tooltip [tip TEXT] TEXT` |
502+| `@let x $a + 1` (computed without `=`) | `@let x = $a + 1` |
503+| `COND ? A : B` | `if(COND, A, B)` |
504+| `key if COND` (in attributes) | `if(COND, key)` |
505+| `$a ~ " " ~ $b` | `"$a $b"` |
506+| `@each $x in LIST [page N]` | Split the list, or filter it with `@if` |
507+| `...$bundle` | `$bundle` |
508+| `bold`, `italic`, `underline`, `hidden` | `font-weight bold`, `font-style italic`, `text-decoration underline`, `display none` |
509+| `size`, `font`, `rounded`, `padding-x/y`, `margin-x/y` | `font-size`, `font-family`, `border-radius`, `padding-inline/block`, `margin-inline/block` |
510+| `border N COLOR` (solid implied) | `border N solid COLOR` |
511+| `@each $a, $b in A x, B y` (items split on spaces) | Records: `@data $rows [{"a": "A", "b": "x"}, ...]` and `@each $row in $rows` with `$row.a` |
512+| `$_index` | `@each $item, $i in ...` |
513+| `$posts._count`, `$posts._keys`, `$posts.STEM.key` | `length($posts)`; nothing; `@each $post in $posts` with `$post.file` |
514+| `@raw """ ... """` | `@raw` with an indented body |
515+| `@keyframes NAME` with `from [opacity 0]` | The `@keyframes` rule in `@style` |
516+| `@include lib.hl as ui` | `@include lib.hl`, without the `ui.` prefix |
517+| `@data file.json` (keys as `$key`) | `@data $name file.json` (keys as `$name.key`) |
518+| `[attrs]` alone on a line | `@el [attrs]` |
519+| `animate`, `inset-area` | `animation`, `position-area` |
520+| `$x\|uppercase`, `$c\|darken:10` (filters) | `${uppercase($x)}`, `${darken($c, 10)}` |
README.md+69−190
@@ -1,123 +1,35 @@
11# htmlang
22
3−A small layout language that compiles to static HTML. The layout model comes
4−from [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/):
5−rows and columns, spacing between children, and elements that fill or center
6−themselves. Styling uses CSS properties under their CSS names, and every other
7−element uses its HTML name.
3+A minimalist layout language inspired by [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/) that compiles to static HTML.
4+
5+`@` means structure. Bare lines mean content. No CSS required.
6+
7+## Example
88
99```
10−@page [lang=en, background #f8fafc] My Site
11−@let --brand #3b82f6
10+@page My Site
11+@let primary #3b82f6
1212
13−@let @card [title]
14− @article [padding 20, spacing 8, border 1 solid #e5e7eb, border-radius 8, hover:border-color var(--brand)]
15− @h3 $title
13+@let card $title
14+ @el [padding 20, background white, border-radius 8, border 1 solid #e5e7eb, hover:border 1 solid $primary, transition all 0.15s ease]
15+ @text [font-weight bold] $title
1616 @children
1717
18−@el [width fill, max-width 800, center-x, padding 40, spacing 24]
19− @h1 [font-size 32] Hello
18+@el [max-width 800, center-x, padding 40, spacing 20]
19+ @text [font-weight bold, font-size 32] Hello
20+
2021 @paragraph
21− Built with {@text [font-weight bold, color var(--brand)] htmlang}.
22− @row [spacing 16, wrap]
22+ Built with {@text [font-weight bold, color $primary] htmlang}.
23+
24+ @row [wrap, spacing 10]
2325 @card [title Simple]
24− Layout without writing a stylesheet.
25− @card [title Static]
26− One HTML file, with its CSS inside.
26+ Write layouts without CSS
27+ @card [title Fast]
28+ Compiles to a single HTML file
2729```
2830
29−Each page compiles to one self-contained `.html` file. It has no JavaScript
30−unless you write some, and nothing is added that you didn't ask for.
31−
32−## The language in brief
33−
34−- **`@` starts structure, and any other line is content.** Indentation nests
35− elements. Text after an element's attributes is its content, read like
36− any line of text, and `{...}` puts an element inside a line of text
37− (`@h1 Hello {@text [color red] world}`). The text of `@code` and
38− `@textarea` is shown as written, and the lines indented under them are
39− verbatim, HTML-escaped with their line breaks kept, so `@pre > @code`
40− over an indented block shows a code sample. `@raw`, `@style` and `@head`
41− take the rest of their line or an indented block, kept as written
42− (`@style .note { color: gray; }`). An element that points at a URL or a
43− file takes it as its first word, and the rest is its content: `@link
44− /about About us`, `@image logo.png`, `@form /subscribe`, `@script app.js`.
45−- **Layout comes from elm-ui.** Every element has one layout. `@el` and the
46− containers (`@section`, `@nav`, `@ul`, `@li`, ...) are columns, `@row` is a
47− row and `@grid` a grid: in them each line of text is a child, and
48− `spacing` is the gap between the children. Text elements (`@paragraph`,
49− `@h1`, `@button`, `@td`) let their lines flow, joined with spaces, and an
50− `@el` inside text is laid out inline. Layout attributes (`width fill`,
51− `center-x`, `align-right`, `wrap`) say how an element sits inside its
52− parent, and follow the direction the parent's CSS sets: `@nav
53− [flex-direction row]` is a row, and `md:flex-direction row` makes a
54− column a row from that width up, children included. The page is the root
55− element: `@page`'s styles go on `<body>`, a column that fills the window,
56− and its `key=value` attributes on `<html>` (`@page [lang=en, background
57− #f8fafc] Home`).
58−- **Styling is CSS.** Any other attribute is a CSS property with its CSS
59− name and value: `padding 20`, `border 1 solid #eee`,
60− `grid-template-columns 1fr 2fr`. In a length property, every bare
61− number is pixels (`box-shadow 0 2 4 black` is `0 2px 4px black`); numbers
62− in any other property (`flex 1`, `z-index 2`) and in custom properties
63− stay numbers.
64− A custom property is a style like any other: `@let --surface white`
65− declares it for the whole page, and `[--gap 16px, md:--gap 24px]` sets
66− it on an element and everything inside it, so dark mode redefines a
67− token once (`@page [dark:--surface #0b1220]`) instead of every colour
68− that uses it. A token is read one way, `var(--surface)`, and a colour
69− variant is CSS's too (`color-mix(in srgb, var(--brand), black 8%)`,
70− `rgb(from var(--brand) r g b / 0.5)`), so it follows the token.
71− Prefixes make a style conditional: `hover:`, `md:`, `dark:`, and CSS's
72− common pseudo-classes and pseudo-elements under their CSS names
73− (`first-child:`, `nth-child(odd):`, `has(> img):`, `marker:`,
74− `backdrop:`; the list is in DESIGN.md).
75− They stack (`md:dark:background`, `hover:children:opacity`), and one
76− prefix covers a group or a bundle (`md:[padding 32, font-size 20]`,
77− `md:$card`).
78− An element prefix styles every such element inside, at any depth:
79− `@table [@td:padding 8]` pads every cell, and
80− `@article [@h2:font-size 20, @code:background #f1f5f9]` styles what
81− `@markdown` writes. An element's own attributes still win, and the
82− nearest element that styles it wins over one further out.
83− A comma separates attributes, so a comma inside a value is written `\,`
84− (`transition opacity 0.3s\, transform 0.3s`), and quoted text keeps its
85− quotes only in CSS (`before:content "→ "`).
86−- **Names are checked, values are CSS's.** A misspelled element, prefix,
87− parameter or slot is an error. A CSS property htmlang doesn't know is
88− passed through with a "did you mean" warning, and values go to the CSS as
89− written (`outline 2 solid red` is `outline: 2px solid red`, nothing
90− added). Nothing you write is left out of the page without an error.
91−- **The generated CSS stays on htmlang's elements.** Its classes are
92− named by their styles (`hl-2k9xq0m`), in cascade layers (`hl-reset`,
93− `hl-kind`, `hl-inside`, `htmlang`), so your own CSS wins. An element's
94− defaults (no heading margins, no list markers, links in the text colour)
95− go with its own class, so `@markdown` and `@raw` HTML, and a page that
96− embeds `--partial` output, keep theirs. One style has one name in every
97− file, so a fragment a server swaps into a page (with htmx, say) means
98− the same there and restyles nothing of the page's.
99−- **HTML stays HTML.** An element that isn't about layout or text has its
100− HTML name (`@nav`, `@ul`, `@form`, `@details`, `@strong`, `@em`, `@br`,
101− `@caption`), from a fixed list, so a typo is an error rather than a new
102− tag. HTML attributes are written `key=value` (`id=main`, `type=email`) or
103− bare (`required`).
104−- **`@let` defines everything.** It defines values, computed values,
105− attribute bundles and functions. A function's body puts a call's content
106− where `@children` is and fills `@slot NAME` from the call's `@slot NAME`
107− blocks, and content that would go nowhere (a misspelled slot, content for
108− a function without `@children`) is an error. A layout is just a function
109− with slots.
110− `$name` fills in a value exactly where it is written (a line of text, an
111− attribute's value, a file path), whole attributes come from a bundle or
112− from `if()` (`if($active, [font-weight bold, aria-current=page])`), and
113− an undefined name is an error where the code runs.
114−- **Values are typed: text, numbers, `true`/`false`, lists and records.**
115− Commas make a list (`@let fruits apple, banana`), `1..5` is a range,
116− `@data` loads JSON as records and lists, and a value passed as one `$name`
117− keeps its type, so a record can go to a function (`@post-card [post $p]`).
118− `@each` and `@if` run at compile time. A definition is visible from its
119− line to the end of its block, and a function sees what is visible where
120− it is defined.
31+This compiles to one self-contained `.html` file with flexbox layout and
32+generated CSS classes. No JavaScript, no external dependencies.
12133
12234## Install
12335
@@ -128,118 +40,85 @@ cargo install --path .
12840## Usage
12941
13042```
131−htmlang page.hl # compile page.hl to page.html
43+htmlang page.hl # compile page.hl -> page.html
13244htmlang page.hl -o out.html # choose the output file
45+htmlang -w page.hl # recompile on change
13346htmlang serve . # dev server with live reload
134−htmlang build src -o dist # compile a whole site
13547```
13648
13749| Command | Purpose |
13850|---|---|
139−| `build <dir> [-o out] [--minify] [--strict]` | Compile every `.hl` file under a directory (into `out/` by default), except libraries: files that hold only `@let`s. Two files whose different styles got one class name are an error (`class-collision`) |
140−| `serve [dir\|file] [-p PORT] [--open]` | Dev server with live reload. It serves files, so it answers GET and HEAD (other methods get 405), and reloads pages, not fragments |
51+| `build <dir> [-o out] [--minify] [--strict]` | Compile every `.hl` file under a directory |
52+| `serve [dir\|file] [-p PORT] [--open]` | Dev server with live reload |
14153| `watch [dir\|file] [-o out]` | Recompile on change, without a server |
14254| `check <file\|dir> [--format json]` | Report diagnostics without writing output |
14355| `lint <file\|dir> [--format json]` | Stricter checks (accessibility, nesting) |
144−| `fmt <file.hl>...` | Format files in place |
56+| `fmt <file.hl>` | Format a file in place |
57+| `upgrade [dir\|file]` | Rewrite syntax from older versions of the language |
14558| `lsp` | Run the language server over stdio |
14659
147−Compiling a file directly also takes `-w` / `--watch`, `--dev` (readable
148−output and source maps), `--strict`, `--partial` (a fragment, without the
149−document wrapper), `--format json`, `-s` / `--serve`, `-p` / `--port` and
150−`--open`.
60+Compiling directly also takes `--dev`, `--strict`, `--partial`,
61+`--format json`, `-s` / `--serve`, `-p` / `--port` and `--open`.
15162
152−## A short tour
63+## Editor support
15364
154−Layout attributes place an element. Everything else is CSS, and `key=value`
155−is an HTML attribute:
65+A VS Code extension with syntax highlighting and LSP integration is in
66+[`editors/vscode`](editors/vscode). The language server (`htmlang-lsp`) provides
67+diagnostics, completions, hover documentation, go to definition, rename and
68+formatting.
15669
157−```
158−@row [spacing 12, align-items center, padding 12 20, border-bottom 1 solid #e5e7eb, id=toolbar]
159− @text [font-weight 700] Acme
160− @spacer
161− @input [type=search, placeholder=Search, aria-label=Search, width 240, padding 6 10]
162− @button [type=submit, padding 6 14, hover:background #f3f4f6] Go
163−```
70+## Language tour
71+
72+Elements are laid out with `@el` (a column) and `@row`; `@text`, `@paragraph`,
73+`@link` and `@image` hold content, and every other HTML element is available by
74+name (`@nav`, `@section`, `@table`, `@input`, ...).
16475
165−A prefix applies a style only in a state, from a screen width up, or under a
166−media condition. Prefixes stack, and a prefix before a `[group]` applies to
167−each style in it:
76+Attributes are styles, written `key value`, or HTML attributes, written
77+`key=value`:
16878
16979```
170−@el [padding 16, md:[padding 32, font-size 20], background #3b82f6, hover:background #2563eb, dark:[background #1e3a8a, hover:background #1e40af]]
171− @text [color white] Click me
80+-- gap between children, padding, and an HTML id
81+@row [spacing 20, padding 16, id=toolbar]
82+ -- take the remaining space; center the text
83+ @el [width fill, text-align center] Search
84+ @input [type=search, placeholder=Find..., width 240]
17285```
17386
174−An element prefix, `@td:`, styles every such element inside, so rows a
175−loop writes and HTML from `@markdown` need no attributes of their own:
87+Any standard CSS property works as a style (`opacity 0.5`, `margin-top 16`).
88+Prefixes apply a style conditionally:
17689
17790```
178−@table [border-collapse collapse, @th:[padding 8, text-align left], @td:padding 8, @tr:nth-child(even):background #f8fafc]
179− @tr
180− @th Name
181− @tr
182− @td Ada
91+@el [background #3b82f6, hover:background #2563eb, md:padding 32, dark:background #1e3a8a]
92+ @text [color white] Click me
18393```
18494
185−`@let` defines values, bundles and functions, in one namespace. A function
186−has `@` before its name and its parameters in brackets (`label`, or
187−`href #` with a default). It is called like an element, on its own line,
188−in a chain or inline in text: its parameters are attributes, `name value`
189−(a name alone is `true`), a parameter without a default must be passed,
190−and any other attributes style its root element and are checked like
191−attributes written there.
95+`@let` defines values, computed values, attribute bundles and functions:
19296
19397```
194−@let --primary #3b82f6
98+@let primary #3b82f6
19599@let gap = 8 * 2
196−@let rounded [border-radius 8, overflow hidden]
197−
198−@let @cta [label, href #]
199− @link [$rounded, padding 10 16, background var(--primary), color white] $href
200− $label
201−@let @key
202− @kbd [padding 1 6, border 1 solid #d1d5db, border-radius 4]
100+@let card [padding 20, border-radius 8]
101+@let button $label
102+ @el [$card, background $primary]
103+ @text [color white, font-weight bold] $label
203104 @children
204105
205−@row [spacing $gap]
206− @cta [label Sign up]
207− @cta [label Learn more, href /about, background #64748b]
208−@paragraph
209− Press {@key Ctrl+K} to search.
106+@button [label Click me, padding 12]
210107```
211108
212−Data, loops and conditions run at compile time:
109+Functions are used like elements: extra attributes (here `padding 12`) style
110+their root element. A small standard library (`@badge`, `@chip`, `@tooltip`,
111+`@carousel`, `@breadcrumb`, ...) is written the same way.
112+
113+Control flow runs at compile time:
213114
214115```
215−@data $links [
216− {"label": "Home", "url": "/"},
217− {"label": "Blog", "url": "/blog"},
218− {"label": "About us", "url": "/about"}
219−]
220−@let current /blog
221−
222−@nav
223− @row [spacing 16]
224− @each $link in $links
225− @link [if($link.url == $current, [font-weight bold, aria-current=page])] $link.url $link.label
116+@let items Home, About, Contact
117+@row [spacing 8]
118+ @each $item in $items
119+ @if $item != About
120+ @link /${lowercase($item)} $item
226121```
227122
228−The [`examples/`](examples) directory has complete pages (a landing page, a
229−blog, a docs page, and a tour of the whole language). [DESIGN.md](DESIGN.md)
230−is the language reference.
231−
232−## Editor support
233−
234−The VS Code extension in [`editors/vscode`](editors/vscode) provides syntax
235−highlighting, snippets, and the language server (`htmlang-lsp`). The server
236−gives diagnostics, completions, hover documentation, go to definition, rename
237−and formatting.
238−
239−The compiler, the formatter and the language server read a file with the
240−same parser, so the editor sees exactly what the compiler sees, relative
241−`@include` and `@data` paths included. Every diagnostic has a stable code
242−(`error[unknown-element]` on the command line, a `code` field in
243−`--format json`), and the whole file is checked, including branches and
244−functions that don't run (a `$name` there is checked only where the code
245−runs, since it may come from data).
123+See [DESIGN.md](DESIGN.md) for the full language: files and data (`@include`,
124+layouts, `@data`), page metadata, expressions and CSS.
crates/htmlang-core/src/ast.rs+107−622
@@ -3,33 +3,27 @@ use std::collections::HashMap;
33#[derive(Debug)]
44#[allow(dead_code)]
55pub struct Document {
6− /// The page `@page` makes: without one, the output is a fragment.
7− pub page: Option<Page>,
6+ pub page_title: Option<String>,
7+ pub lang: Option<String>,
8+ pub favicon: Option<String>,
89 pub meta_tags: Vec<(String, String)>,
910 pub head_blocks: Vec<String>,
1011 pub variables: HashMap<String, String>,
1112 pub defines: HashMap<String, Vec<Attribute>>,
1213 pub css_vars: Vec<(String, String)>,
1314 pub custom_css: Vec<String>,
14− /// The scoped `@style` of each function called, nested under its
15− /// `.hl-fn-NAME-HASH` class, for `@layer hl-inside`.
16− pub scoped_css: Vec<String>,
1715 pub og_tags: Vec<(String, String)>,
16+ pub canonical: Option<String>,
17+ pub base_url: Option<String>,
18+ pub preload_hints: Vec<PreloadHint>,
1819 pub nodes: Vec<Node>,
1920}
2021
21−/// What `@page` says: the page is the root element. Its styles style
22−/// `<body>`, which lays out the page's top-level elements as a column; its
23−/// HTML attributes (`lang=en`, `dir=rtl`, `class=x`) go on `<html>`.
24−#[derive(Debug, Clone, Default)]
25−pub struct Page {
26− pub title: String,
27− /// `key=value` attributes, and bare boolean HTML attributes, for `<html>`
28− pub html_attrs: Vec<Attribute>,
29− /// Styles, prefixed ones included, for `<body>`
30− pub styles: Vec<Attribute>,
31− /// `favicon FILE`, `@page`'s one word of htmlang's own
32− pub favicon: Option<String>,
22+#[derive(Debug, Clone)]
23+pub struct PreloadHint {
24+ pub href: String,
25+ pub as_type: String, // "font", "image", "style", "script"
26+ pub crossorigin: bool,
3327}
3428
3529#[derive(Debug, Clone)]
@@ -49,40 +43,18 @@ pub enum TextSegment {
4943pub struct Element {
5044 pub kind: ElementKind,
5145 pub attrs: Vec<Attribute>,
52− /// The value of the element's leading attribute (see
53− /// [`ElementKind::arg`]): the first token of `@link /about About`, or
54− /// its `href=` when it has no argument. For `@slot`, the slot's name.
55− /// Any other text after the attributes is content, a first child.
5646 pub argument: Option<String>,
5747 pub children: Vec<Node>,
58− /// The line it is written on; for an element a function's body wrote,
59− /// the line of the call, since a function is an element at its call.
6048 pub line_num: usize,
61− /// The function whose body wrote it, when it comes from a call.
62− pub function: Option<String>,
6349}
6450
51+
6552#[derive(Debug, Clone)]
6653pub struct Attribute {
6754 pub key: String,
68− /// The value as it goes into the output: a style's with the quotes of
69− /// quoted text, an HTML attribute's without them.
7055 pub value: Option<String>,
7156 /// Written `key=value`: an HTML attribute rather than a style.
7257 pub html: bool,
73− /// When the value is quoted text (`"..."`, or a variable holding
74− /// quoted text), both of its forms, for a parameter it binds.
75− pub quoted: Option<Quoted>,
76−}
77−
78−/// Quoted text, which remembers that it was quoted: a CSS value writes it
79−/// with its quotes, text and HTML attribute values without them.
80−#[derive(Debug, Clone, PartialEq)]
81−pub struct Quoted {
82− /// What it says: `a"b` for `"a\"b"`.
83− pub text: String,
84− /// As CSS writes it, quotes included: `"a\"b"`.
85− pub css: String,
8658}
8759
8860#[derive(Debug, Clone, PartialEq)]
@@ -95,6 +67,7 @@ pub enum ElementKind {
9567 Link,
9668 Image,
9769 // Elements generated in a special way
70+ Script,
9871 Fragment,
9972 // Function bodies: placeholders for the caller's content
10073 Children,
@@ -113,6 +86,7 @@ impl ElementKind {
11386 ElementKind::Paragraph => "paragraph",
11487 ElementKind::Link => "link",
11588 ElementKind::Image => "image",
89+ ElementKind::Script => "script",
11690 ElementKind::Fragment => "fragment",
11791 ElementKind::Children => "children",
11892 ElementKind::Slot(_) => "slot",
@@ -127,84 +101,11 @@ impl ElementKind {
127101 }
128102 }
129103
130− /// How the element lays out what is inside it. `@fragment`, `@children`
131− /// and `@slot` have no element of their own: their content lands in the
132− /// element around them and takes its layout.
133− pub fn layout(&self) -> Layout {
134− match self {
135− ElementKind::Row => Layout::Row,
136− ElementKind::El => Layout::Column,
137− ElementKind::Text | ElementKind::Paragraph | ElementKind::Link => Layout::Text,
138− ElementKind::Image => Layout::Void,
139− ElementKind::Fragment | ElementKind::Children | ElementKind::Slot(_) => Layout::Native,
140− ElementKind::Tag(spec) => spec.layout,
141− }
142− }
143−
144− /// The CSS every such element starts with, besides its layout's
145− /// `display` (browser margins reset, the list markers of a column, a
146− /// link's colour). It goes into the element's own generated class,
147− /// never onto a global element selector, so HTML from `@markdown` and
148− /// `@raw` keeps the browser's defaults.
149− pub fn css(&self) -> &'static str {
150− match self {
151− ElementKind::Paragraph => "margin:0;",
152− ElementKind::Link => "text-decoration:none;color:inherit;",
153− ElementKind::Image => "display:block;",
154− ElementKind::Tag(spec) => spec.css,
155− _ => "",
156− }
157− }
158−
159− /// What the first token after its attributes is: `@link`'s `href`,
160− /// `@image`'s `src`, or its row's [`TagArg`].
161− pub fn arg(&self) -> TagArg {
162− match self {
163− ElementKind::Link => TagArg::Attr("href"),
164− ElementKind::Image => TagArg::Attr("src"),
165− ElementKind::Tag(spec) => spec.arg,
166− _ => TagArg::Child,
167− }
168− }
169−
170− /// The HTML attribute its leading argument fills, when it has one;
171− /// `in_picture`: the element is directly inside `@picture`.
172− pub fn leading_attribute(&self, in_picture: bool) -> Option<&'static str> {
173− self.arg().attribute(in_picture)
174− }
175−
176− /// Whether its indented body is foreign text written into the page as
177− /// it is (`@script`). (`@code` and `@textarea` also have a verbatim
178− /// body, shown as text: see [`TagSpec::literal`].)
179− pub fn is_verbatim(&self) -> bool {
180− self.spec().is_some_and(|spec| spec.verbatim)
181− }
182−
183− /// The HTML element it writes (outside text, where htmlang's own
184− /// `<div>`s are `<span>`s): `None` for `@fragment`, `@children` and
185− /// `@slot`, which write none of their own.
186− pub fn tag(&self) -> Option<&'static str> {
187− match self {
188− ElementKind::Row | ElementKind::El => Some("div"),
189− ElementKind::Text => Some("span"),
190− ElementKind::Paragraph => Some("p"),
191− ElementKind::Link => Some("a"),
192− ElementKind::Image => Some("img"),
193− ElementKind::Fragment | ElementKind::Children | ElementKind::Slot(_) => None,
194− ElementKind::Tag(spec) => Some(spec.html),
195− }
196− }
197−
198− /// The HTML element only this element writes, which a selector can
199− /// pick out: `@td` is every `<td>`, `@paragraph` every `<p>`. `None`
200− /// for an element that shares its tag: `@el`, `@row`, `@grid`,
201− /// `@in-front` and `@behind` are all `<div>`, and `@text` is a
202− /// `<span>`, as is every line of text in a row or column. `@script`
203− /// isn't shown, so there is nothing to style.
204− pub fn own_tag(&self) -> Option<&'static str> {
205− let tag = self.tag()?;
206− let shared = matches!(tag, "div" | "span") || self.is_verbatim();
207− (!shared).then_some(tag)
104+ /// Does this element lay its children out in a flex column (`@el` and
105+ /// the semantic containers)?
106+ pub fn is_column(&self) -> bool {
107+ matches!(self, ElementKind::El)
108+ || self.spec().is_some_and(|spec| spec.css.contains("flex-direction:column"))
208109 }
209110
210111 /// Is this the table element named `name` (e.g. `"main"`)?
@@ -221,6 +122,7 @@ impl ElementKind {
221122 "paragraph" => ElementKind::Paragraph,
222123 "link" => ElementKind::Link,
223124 "image" => ElementKind::Image,
125+ "script" => ElementKind::Script,
224126 "fragment" => ElementKind::Fragment,
225127 "children" => ElementKind::Children,
226128 "slot" => ElementKind::Slot(String::new()),
@@ -231,15 +133,8 @@ impl ElementKind {
231133 /// Every element name, for suggestions and completions.
232134 pub fn all_names() -> impl Iterator<Item = &'static str> {
233135 [
234− "row",
235− "el",
236− "text",
237− "paragraph",
238− "link",
239− "image",
240− "fragment",
241− "children",
242− "slot",
136+ "row", "el", "text", "paragraph", "link", "image", "script", "fragment",
137+ "children", "slot",
243138 ]
244139 .into_iter()
245140 .chain(TAGS.iter().map(|spec| spec.name))
@@ -249,90 +144,12 @@ impl ElementKind {
249144/// What an element does with the text after its name and attributes.
250145#[derive(Debug, Clone, Copy, PartialEq)]
251146pub enum TagArg {
252− /// Its content: the first line of its text, parsed like any text
253− /// (`@h1 Hello {@text [color red] world}`). The element's layout
254− /// decides how it combines with the lines under it.
147+ /// Leading text content (`@section Hello`).
255148 Child,
256− /// Its leading attribute: the first token fills this HTML attribute
257− /// (`@iframe URL` sets `src`), and the rest of the text is content, or
258− /// an error on an element without content. The token ends at a space
259− /// outside `"..."` and `${...}`.
260− Attr(&'static str),
261− /// `@source`'s leading attribute, which depends on where it is:
262− /// `srcset` directly inside `@picture`, `src` elsewhere (`@video`,
263− /// `@audio`).
264− Source,
265−}
266−
267−impl TagArg {
268− /// The HTML attribute the leading argument fills; `in_picture`: the
269− /// element is directly inside `@picture`.
270− pub fn attribute(self, in_picture: bool) -> Option<&'static str> {
271− match self {
272− TagArg::Child => None,
273− TagArg::Attr(attr) => Some(attr),
274− TagArg::Source if in_picture => Some("srcset"),
275− TagArg::Source => Some("src"),
276− }
277− }
278−
279− /// The attributes the leading argument may fill, wherever the element
280− /// is: one, or `src` and `srcset` for `@source`.
281− pub fn attributes(self) -> Vec<&'static str> {
282− let mut out: Vec<&'static str> = [self.attribute(false), self.attribute(true)]
283− .into_iter()
284− .flatten()
285− .collect();
286− out.dedup();
287− out
288− }
289−}
290−
291−/// How an element lays out what is inside it: one value per element,
292−/// after elm-ui's layouts. It decides what its text lines are, whether
293−/// `spacing` works on it, and how its children's `width fill`, `center-x`
294−/// and `align-*` compile.
295−#[derive(Debug, Clone, Copy, PartialEq, Eq)]
296−pub enum Layout {
297− /// A flex column (`@el`, `@section`, `@ul`, `@li`): each text line is a
298− /// child of its own, and `spacing` is the gap between the children.
299− Column,
300− /// A flex row (`@row`): like a column, side by side.
301− Row,
302− /// A CSS grid (`@grid`): each text line is a cell.
303− Grid,
304− /// Flowing text (`@paragraph`, `@h1`, `@button`, `@td`): the argument,
305− /// the text lines and the children are one run, joined with spaces. It
306− /// has no gap for `spacing`, and a row, column or grid inside it is laid
307− /// out inline (`@el` becomes an inline-flex `<span>`).
149+ /// Printed as the element's text (`@li First`).
308150 Text,
309− /// HTML's own layout, which htmlang leaves alone: tables, `@select`,
310− /// `@picture`, media and form controls. Text lines are separated by a
311− /// line break, which HTML shows as a space except in `@pre` and
312− /// `@textarea`.
313− Native,
314− /// No content at all (`@input`, `@hr`, `@image`).
315− Void,
316−}
317−
318−impl Layout {
319− /// A row, column or grid: an element that lays out its children, so
320− /// `spacing`, `wrap` and `grid-cols` work on it.
321− pub fn is_container(self) -> bool {
322− matches!(self, Layout::Column | Layout::Row | Layout::Grid)
323− }
324−
325− /// The name used in messages and the reference: `column`, `text`, ...
326− pub fn name(self) -> &'static str {
327− match self {
328− Layout::Column => "column",
329− Layout::Row => "row",
330− Layout::Grid => "grid",
331− Layout::Text => "text",
332− Layout::Native => "native",
333− Layout::Void => "void",
334− }
335− }
151+ /// Emitted as this HTML attribute (`@iframe URL` sets `src`).
152+ Attr(&'static str),
336153}
337154
338155/// How an element compiles: the data behind [`ElementKind::Tag`].
@@ -342,19 +159,17 @@ pub struct TagSpec {
342159 pub name: &'static str,
343160 /// HTML element emitted.
344161 pub html: &'static str,
345− /// Default CSS besides the layout's `display` (margin reset, ...).
162+ /// Default CSS (flex column, margin reset, ...).
346163 pub css: &'static str,
347164 pub arg: TagArg,
348− /// How it lays out its content.
349− pub layout: Layout,
350− /// Its text is shown as written (`@code`, `@textarea`). On its line and
351− /// inline, a `{@...}` is text, not an inline element (escapes and
352− /// `$names` still work). Its indented body is verbatim: nothing in it is
353− /// parsed, and it is shown HTML-escaped, its lines and indentation kept.
354− pub literal: bool,
355− /// Its indented body is foreign text written into the page exactly as
356− /// it is (`@script`'s JavaScript): nothing in it is parsed as htmlang.
357− pub verbatim: bool,
165+ /// Bare text children are wrapped in `<span>` (flex containers).
166+ pub wraps_text: bool,
167+ /// Accepts layout attributes for its children (`spacing`, ...).
168+ pub container: bool,
169+ /// Void element: no children, no closing tag (`<hr>`, `<input>`).
170+ pub void: bool,
171+ /// Children are joined with spaces, like a paragraph (headings).
172+ pub inline: bool,
358173}
359174
360175impl TagSpec {
@@ -363,413 +178,83 @@ impl TagSpec {
363178 html: "",
364179 css: "",
365180 arg: TagArg::Child,
366− layout: Layout::Native,
367− literal: false,
368− verbatim: false,
181+ wraps_text: false,
182+ container: false,
183+ void: false,
184+ inline: false,
369185 };
370186}
371187
372188/// Every element besides the core ones in [`ElementKind`].
373−#[rustfmt::skip]
374189pub static TAGS: &[TagSpec] = &[
375− TagSpec { name: "nav", html: "nav", layout: Layout::Column, ..TagSpec::DEFAULT },
376− TagSpec { name: "header", html: "header", layout: Layout::Column, ..TagSpec::DEFAULT },
377− TagSpec { name: "footer", html: "footer", layout: Layout::Column, ..TagSpec::DEFAULT },
378− TagSpec { name: "main", html: "main", layout: Layout::Column, ..TagSpec::DEFAULT },
379− TagSpec { name: "section", html: "section", layout: Layout::Column, ..TagSpec::DEFAULT },
380− TagSpec { name: "article", html: "article", layout: Layout::Column, ..TagSpec::DEFAULT },
381− TagSpec { name: "aside", html: "aside", layout: Layout::Column, ..TagSpec::DEFAULT },
382− TagSpec { name: "details", html: "details", layout: Layout::Column, ..TagSpec::DEFAULT },
383− TagSpec { name: "dialog", html: "dialog", layout: Layout::Column, ..TagSpec::DEFAULT },
384− TagSpec { name: "search", html: "search", layout: Layout::Column, ..TagSpec::DEFAULT },
385− TagSpec { name: "address", html: "address", layout: Layout::Column, ..TagSpec::DEFAULT },
386− TagSpec { name: "noscript", html: "noscript", layout: Layout::Column, ..TagSpec::DEFAULT },
387− TagSpec { name: "form", html: "form", arg: TagArg::Attr("action"), layout: Layout::Column, ..TagSpec::DEFAULT },
388− TagSpec { name: "figure", html: "figure", css: "margin:0;", layout: Layout::Column, ..TagSpec::DEFAULT },
389− TagSpec { name: "blockquote", html: "blockquote", css: "margin:0;", layout: Layout::Column, ..TagSpec::DEFAULT },
390− TagSpec { name: "fieldset", html: "fieldset", css: "border:1px solid currentColor;padding:8px;margin:0;", layout: Layout::Column, ..TagSpec::DEFAULT },
391− TagSpec { name: "datalist", html: "datalist", layout: Layout::Native, ..TagSpec::DEFAULT },
392− TagSpec { name: "ul", html: "ul", css: "margin:0;padding-left:0;list-style:none;", layout: Layout::Column, ..TagSpec::DEFAULT },
393− TagSpec { name: "ol", html: "ol", css: "margin:0;padding-left:0;list-style:none;", layout: Layout::Column, ..TagSpec::DEFAULT },
394− TagSpec { name: "li", html: "li", layout: Layout::Column, ..TagSpec::DEFAULT },
395− TagSpec { name: "dl", html: "dl", css: "margin:0;", layout: Layout::Column, ..TagSpec::DEFAULT },
396− TagSpec { name: "dt", html: "dt", layout: Layout::Text, ..TagSpec::DEFAULT },
397− TagSpec { name: "dd", html: "dd", css: "margin:0;", layout: Layout::Column, ..TagSpec::DEFAULT },
398− TagSpec { name: "table", html: "table", layout: Layout::Native, ..TagSpec::DEFAULT },
399− TagSpec { name: "thead", html: "thead", layout: Layout::Native, ..TagSpec::DEFAULT },
400− TagSpec { name: "tbody", html: "tbody", layout: Layout::Native, ..TagSpec::DEFAULT },
401− TagSpec { name: "tr", html: "tr", layout: Layout::Native, ..TagSpec::DEFAULT },
402− TagSpec { name: "select", html: "select", layout: Layout::Native, ..TagSpec::DEFAULT },
403− TagSpec { name: "picture", html: "picture", layout: Layout::Native, ..TagSpec::DEFAULT },
404− TagSpec { name: "progress", html: "progress", layout: Layout::Native, ..TagSpec::DEFAULT },
405− TagSpec { name: "meter", html: "meter", layout: Layout::Native, ..TagSpec::DEFAULT },
406− TagSpec { name: "output", html: "output", layout: Layout::Native, ..TagSpec::DEFAULT },
407− TagSpec { name: "canvas", html: "canvas", layout: Layout::Native, ..TagSpec::DEFAULT },
408− TagSpec { name: "td", html: "td", layout: Layout::Text, ..TagSpec::DEFAULT },
409− TagSpec { name: "th", html: "th", layout: Layout::Text, ..TagSpec::DEFAULT },
410− TagSpec { name: "button", html: "button", layout: Layout::Text, ..TagSpec::DEFAULT },
411− TagSpec { name: "label", html: "label", layout: Layout::Text, ..TagSpec::DEFAULT },
412− TagSpec { name: "option", html: "option", layout: Layout::Native, ..TagSpec::DEFAULT },
413− TagSpec { name: "textarea", html: "textarea", layout: Layout::Native, literal: true, ..TagSpec::DEFAULT },
414− TagSpec { name: "summary", html: "summary", layout: Layout::Text, ..TagSpec::DEFAULT },
415− TagSpec { name: "cite", html: "cite", layout: Layout::Text, ..TagSpec::DEFAULT },
416− TagSpec { name: "figcaption", html: "figcaption", layout: Layout::Text, ..TagSpec::DEFAULT },
417− TagSpec { name: "legend", html: "legend", layout: Layout::Text, ..TagSpec::DEFAULT },
418− TagSpec { name: "time", html: "time", layout: Layout::Text, ..TagSpec::DEFAULT },
419− TagSpec { name: "mark", html: "mark", layout: Layout::Text, ..TagSpec::DEFAULT },
420− TagSpec { name: "abbr", html: "abbr", layout: Layout::Text, ..TagSpec::DEFAULT },
421− TagSpec { name: "code", html: "code", css: "font-family:ui-monospace,monospace;", layout: Layout::Text, literal: true, ..TagSpec::DEFAULT },
422− TagSpec { name: "kbd", html: "kbd", css: "font-family:ui-monospace,monospace;", layout: Layout::Text, ..TagSpec::DEFAULT },
423− TagSpec { name: "pre", html: "pre", css: "margin:0;white-space:pre;font-family:ui-monospace,monospace;", layout: Layout::Native, ..TagSpec::DEFAULT },
424− TagSpec { name: "h1", html: "h1", css: "margin:0;", layout: Layout::Text, ..TagSpec::DEFAULT },
425− TagSpec { name: "h2", html: "h2", css: "margin:0;", layout: Layout::Text, ..TagSpec::DEFAULT },
426− TagSpec { name: "h3", html: "h3", css: "margin:0;", layout: Layout::Text, ..TagSpec::DEFAULT },
427− TagSpec { name: "h4", html: "h4", css: "margin:0;", layout: Layout::Text, ..TagSpec::DEFAULT },
428− TagSpec { name: "h5", html: "h5", css: "margin:0;", layout: Layout::Text, ..TagSpec::DEFAULT },
429− TagSpec { name: "h6", html: "h6", css: "margin:0;", layout: Layout::Text, ..TagSpec::DEFAULT },
430− TagSpec { name: "input", html: "input", layout: Layout::Void, ..TagSpec::DEFAULT },
431− TagSpec { name: "hr", html: "hr", layout: Layout::Void, ..TagSpec::DEFAULT },
432− TagSpec { name: "source", html: "source", arg: TagArg::Source, layout: Layout::Void, ..TagSpec::DEFAULT },
433− TagSpec { name: "video", html: "video", arg: TagArg::Attr("src"), layout: Layout::Native, ..TagSpec::DEFAULT },
434− TagSpec { name: "audio", html: "audio", arg: TagArg::Attr("src"), layout: Layout::Native, ..TagSpec::DEFAULT },
435− TagSpec { name: "iframe", html: "iframe", arg: TagArg::Attr("src"), layout: Layout::Native, ..TagSpec::DEFAULT },
436− TagSpec { name: "script", html: "script", arg: TagArg::Attr("src"), layout: Layout::Native, verbatim: true, ..TagSpec::DEFAULT },
437− // Flow containers
438− TagSpec { name: "hgroup", html: "hgroup", layout: Layout::Column, ..TagSpec::DEFAULT },
439− TagSpec { name: "menu", html: "menu", css: "margin:0;padding-left:0;list-style:none;", layout: Layout::Column, ..TagSpec::DEFAULT },
440− // Phrasing: text with the browser's own style, and no CSS of htmlang's
441− TagSpec { name: "b", html: "b", layout: Layout::Text, ..TagSpec::DEFAULT },
442− TagSpec { name: "i", html: "i", layout: Layout::Text, ..TagSpec::DEFAULT },
443− TagSpec { name: "strong", html: "strong", layout: Layout::Text, ..TagSpec::DEFAULT },
444− TagSpec { name: "em", html: "em", layout: Layout::Text, ..TagSpec::DEFAULT },
445− TagSpec { name: "small", html: "small", layout: Layout::Text, ..TagSpec::DEFAULT },
446− TagSpec { name: "s", html: "s", layout: Layout::Text, ..TagSpec::DEFAULT },
447− TagSpec { name: "u", html: "u", layout: Layout::Text, ..TagSpec::DEFAULT },
448− TagSpec { name: "sub", html: "sub", layout: Layout::Text, ..TagSpec::DEFAULT },
449− TagSpec { name: "sup", html: "sup", layout: Layout::Text, ..TagSpec::DEFAULT },
450− TagSpec { name: "q", html: "q", layout: Layout::Text, ..TagSpec::DEFAULT },
451− TagSpec { name: "var", html: "var", layout: Layout::Text, ..TagSpec::DEFAULT },
452− TagSpec { name: "samp", html: "samp", layout: Layout::Text, ..TagSpec::DEFAULT },
453− TagSpec { name: "dfn", html: "dfn", layout: Layout::Text, ..TagSpec::DEFAULT },
454− TagSpec { name: "bdi", html: "bdi", layout: Layout::Text, ..TagSpec::DEFAULT },
455− TagSpec { name: "bdo", html: "bdo", layout: Layout::Text, ..TagSpec::DEFAULT },
456− TagSpec { name: "ins", html: "ins", layout: Layout::Text, ..TagSpec::DEFAULT },
457− TagSpec { name: "del", html: "del", layout: Layout::Text, ..TagSpec::DEFAULT },
458− TagSpec { name: "br", html: "br", layout: Layout::Void, ..TagSpec::DEFAULT },
459− TagSpec { name: "wbr", html: "wbr", layout: Layout::Void, ..TagSpec::DEFAULT },
460− // HTML's own display: table parts, option groups, ruby, embedded content
461− TagSpec { name: "caption", html: "caption", layout: Layout::Native, ..TagSpec::DEFAULT },
462− TagSpec { name: "colgroup", html: "colgroup", layout: Layout::Native, ..TagSpec::DEFAULT },
463− TagSpec { name: "col", html: "col", layout: Layout::Void, ..TagSpec::DEFAULT },
464− TagSpec { name: "tfoot", html: "tfoot", layout: Layout::Native, ..TagSpec::DEFAULT },
465− TagSpec { name: "optgroup", html: "optgroup", arg: TagArg::Attr("label"), layout: Layout::Native, ..TagSpec::DEFAULT },
466− TagSpec { name: "ruby", html: "ruby", layout: Layout::Native, ..TagSpec::DEFAULT },
467− TagSpec { name: "rt", html: "rt", layout: Layout::Native, ..TagSpec::DEFAULT },
468− TagSpec { name: "rp", html: "rp", layout: Layout::Native, ..TagSpec::DEFAULT },
469− TagSpec { name: "track", html: "track", arg: TagArg::Attr("src"), layout: Layout::Void, ..TagSpec::DEFAULT },
470− TagSpec { name: "embed", html: "embed", arg: TagArg::Attr("src"), layout: Layout::Void, ..TagSpec::DEFAULT },
471− TagSpec { name: "object", html: "object", arg: TagArg::Attr("data"), layout: Layout::Native, ..TagSpec::DEFAULT },
472− TagSpec { name: "map", html: "map", layout: Layout::Native, ..TagSpec::DEFAULT },
473− TagSpec { name: "area", html: "area", arg: TagArg::Attr("href"), layout: Layout::Void, ..TagSpec::DEFAULT },
474− // htmlang's own
475− TagSpec { name: "grid", html: "div", layout: Layout::Grid, ..TagSpec::DEFAULT },
476− TagSpec { name: "in-front", html: "div", css: "position:absolute;inset:0;", layout: Layout::Column, ..TagSpec::DEFAULT },
477− TagSpec { name: "behind", html: "div", css: "position:absolute;inset:0;z-index:-1;", layout: Layout::Column, ..TagSpec::DEFAULT },
190+ TagSpec { name: "nav", html: "nav", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
191+ TagSpec { name: "header", html: "header", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
192+ TagSpec { name: "footer", html: "footer", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
193+ TagSpec { name: "main", html: "main", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
194+ TagSpec { name: "section", html: "section", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
195+ TagSpec { name: "article", html: "article", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
196+ TagSpec { name: "aside", html: "aside", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
197+ TagSpec { name: "details", html: "details", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
198+ TagSpec { name: "dialog", html: "dialog", css: "display:flex;flex-direction:column;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
199+ TagSpec { name: "search", html: "search", wraps_text: true, container: true, ..TagSpec::DEFAULT },
200+ TagSpec { name: "address", html: "address", wraps_text: true, container: true, ..TagSpec::DEFAULT },
201+ TagSpec { name: "noscript", html: "noscript", wraps_text: true, container: true, ..TagSpec::DEFAULT },
202+ TagSpec { name: "form", html: "form", css: "display:flex;flex-direction:column;", arg: TagArg::Attr("action"), wraps_text: true, container: true, ..TagSpec::DEFAULT },
203+ TagSpec { name: "figure", html: "figure", css: "display:flex;flex-direction:column;margin:0;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
204+ TagSpec { name: "blockquote", html: "blockquote", css: "display:flex;flex-direction:column;margin:0;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
205+ TagSpec { name: "fieldset", html: "fieldset", css: "display:flex;flex-direction:column;border:1px solid currentColor;padding:8px;margin:0;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
206+ TagSpec { name: "datalist", html: "datalist", wraps_text: true, container: true, ..TagSpec::DEFAULT },
207+ TagSpec { name: "ul", html: "ul", css: "margin:0;padding-left:0;list-style:none;", container: true, ..TagSpec::DEFAULT },
208+ TagSpec { name: "ol", html: "ol", css: "margin:0;padding-left:0;list-style:none;", container: true, ..TagSpec::DEFAULT },
209+ TagSpec { name: "li", html: "li", css: "display:flex;flex-direction:column;", arg: TagArg::Text, wraps_text: true, container: true, ..TagSpec::DEFAULT },
210+ TagSpec { name: "dl", html: "dl", css: "margin:0;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
211+ TagSpec { name: "dt", html: "dt", arg: TagArg::Text, container: true, ..TagSpec::DEFAULT },
212+ TagSpec { name: "dd", html: "dd", css: "margin:0;display:flex;flex-direction:column;", arg: TagArg::Text, wraps_text: true, container: true, ..TagSpec::DEFAULT },
213+ TagSpec { name: "table", html: "table", ..TagSpec::DEFAULT },
214+ TagSpec { name: "thead", html: "thead", ..TagSpec::DEFAULT },
215+ TagSpec { name: "tbody", html: "tbody", ..TagSpec::DEFAULT },
216+ TagSpec { name: "tr", html: "tr", ..TagSpec::DEFAULT },
217+ TagSpec { name: "select", html: "select", ..TagSpec::DEFAULT },
218+ TagSpec { name: "picture", html: "picture", ..TagSpec::DEFAULT },
219+ TagSpec { name: "progress", html: "progress", ..TagSpec::DEFAULT },
220+ TagSpec { name: "meter", html: "meter", ..TagSpec::DEFAULT },
221+ TagSpec { name: "output", html: "output", ..TagSpec::DEFAULT },
222+ TagSpec { name: "canvas", html: "canvas", container: true, ..TagSpec::DEFAULT },
223+ TagSpec { name: "td", html: "td", arg: TagArg::Text, ..TagSpec::DEFAULT },
224+ TagSpec { name: "th", html: "th", arg: TagArg::Text, ..TagSpec::DEFAULT },
225+ TagSpec { name: "button", html: "button", arg: TagArg::Text, ..TagSpec::DEFAULT },
226+ TagSpec { name: "label", html: "label", arg: TagArg::Text, ..TagSpec::DEFAULT },
227+ TagSpec { name: "option", html: "option", arg: TagArg::Text, ..TagSpec::DEFAULT },
228+ TagSpec { name: "textarea", html: "textarea", arg: TagArg::Text, ..TagSpec::DEFAULT },
229+ TagSpec { name: "summary", html: "summary", arg: TagArg::Text, ..TagSpec::DEFAULT },
230+ TagSpec { name: "cite", html: "cite", arg: TagArg::Text, ..TagSpec::DEFAULT },
231+ TagSpec { name: "figcaption", html: "figcaption", arg: TagArg::Text, ..TagSpec::DEFAULT },
232+ TagSpec { name: "legend", html: "legend", arg: TagArg::Text, ..TagSpec::DEFAULT },
233+ TagSpec { name: "time", html: "time", arg: TagArg::Text, ..TagSpec::DEFAULT },
234+ TagSpec { name: "mark", html: "mark", arg: TagArg::Text, ..TagSpec::DEFAULT },
235+ TagSpec { name: "abbr", html: "abbr", arg: TagArg::Text, ..TagSpec::DEFAULT },
236+ TagSpec { name: "code", html: "code", css: "font-family:ui-monospace,monospace;", arg: TagArg::Text, ..TagSpec::DEFAULT },
237+ TagSpec { name: "kbd", html: "kbd", css: "font-family:ui-monospace,monospace;", arg: TagArg::Text, ..TagSpec::DEFAULT },
238+ TagSpec { name: "pre", html: "pre", css: "margin:0;white-space:pre;font-family:ui-monospace,monospace;", ..TagSpec::DEFAULT },
239+ TagSpec { name: "h1", html: "h1", css: "margin:0;", arg: TagArg::Text, inline: true, ..TagSpec::DEFAULT },
240+ TagSpec { name: "h2", html: "h2", css: "margin:0;", arg: TagArg::Text, inline: true, ..TagSpec::DEFAULT },
241+ TagSpec { name: "h3", html: "h3", css: "margin:0;", arg: TagArg::Text, inline: true, ..TagSpec::DEFAULT },
242+ TagSpec { name: "h4", html: "h4", css: "margin:0;", arg: TagArg::Text, inline: true, ..TagSpec::DEFAULT },
243+ TagSpec { name: "h5", html: "h5", css: "margin:0;", arg: TagArg::Text, inline: true, ..TagSpec::DEFAULT },
244+ TagSpec { name: "h6", html: "h6", css: "margin:0;", arg: TagArg::Text, inline: true, ..TagSpec::DEFAULT },
245+ TagSpec { name: "input", html: "input", void: true, ..TagSpec::DEFAULT },
246+ TagSpec { name: "hr", html: "hr", void: true, ..TagSpec::DEFAULT },
247+ TagSpec { name: "source", html: "source", arg: TagArg::Attr("src"), void: true, ..TagSpec::DEFAULT },
248+ TagSpec { name: "video", html: "video", arg: TagArg::Attr("src"), ..TagSpec::DEFAULT },
249+ TagSpec { name: "audio", html: "audio", arg: TagArg::Attr("src"), ..TagSpec::DEFAULT },
250+ TagSpec { name: "iframe", html: "iframe", arg: TagArg::Attr("src"), container: true, ..TagSpec::DEFAULT },
251+ TagSpec { name: "grid", html: "div", css: "display:grid;", wraps_text: true, container: true, ..TagSpec::DEFAULT },
252+ TagSpec { name: "in-front", html: "div", css: "display:flex;flex-direction:column;position:absolute;inset:0;", container: true, ..TagSpec::DEFAULT },
253+ TagSpec { name: "behind", html: "div", css: "display:flex;flex-direction:column;position:absolute;inset:0;z-index:-1;", container: true, ..TagSpec::DEFAULT },
478254];
479255
480−/// HTML elements htmlang writes under another name. The HTML name isn't an
481−/// element: the unknown-element error for `@a` suggests `@link`. (Not a
482−/// second spelling: only the suggestion reads this.)
483−pub const HTML_NAMES_WRITTEN_OTHERWISE: &[(&str, &str)] = &[
484− ("a", "link"),
485− ("img", "image"),
486− ("span", "text"),
487− ("p", "paragraph"),
488− ("div", "el"),
489−];
490−
491−/// Whether the element named `name` (without the `@`) shows its text as
492−/// written: `{@code {@link /x y}}` prints the braces, and its indented body
493−/// is verbatim text, HTML-escaped. The syntax tree reads this, so every
494−/// tool agrees on it.
495−pub fn has_literal_text(name: &str) -> bool {
496− ElementKind::from_name(name)
497− .and_then(|kind| kind.spec())
498− .is_some_and(|spec| spec.literal)
499−}
500−
501−/// How a directive reads the rest of its line.
502−#[derive(Debug, Clone, Copy, PartialEq, Eq)]
503−pub enum ArgGrammar {
504− /// Free text, taken as written (`@include file.hl`, `@meta name value`).
505− /// For a directive with a verbatim body it is the one-line form of the
506− /// body (`@raw <hr>`, `@style .a { color: red }`) or, for `@markdown`,
507− /// the file.
508− Text,
509− /// An optional `[attributes]` list, then text (`@page [lang=en] Title`).
510− AttrsText,
511− /// An expression (`@if $count > 2`).
512− Expression,
513− /// A name, then a value, `= EXPR`, `"text"`, `[attributes]` or the
514− /// parameters of a function (`@let`).
515− Definition,
516− /// Nothing, or `if EXPR` (`@else`, `@else if`).
517− Else,
518− /// `$item in LIST` or `$item, $index in LIST` (`@each`).
519− Loop,
520− /// `$name SOURCE`; inline JSON may span several lines (`@data`).
521− Data,
522−}
523−
524−/// What the lines indented under a directive or element are.
525−#[derive(Debug, Clone, Copy, PartialEq, Eq)]
526−pub enum BodyKind {
527− /// Nothing: indented lines are an error.
528− None,
529− /// htmlang: elements, text and directives.
530− Htmlang,
531− /// Foreign text (CSS, HTML, JavaScript, Markdown, a code sample), kept
532− /// exactly as written: nothing in it is parsed, and `--` is not a
533− /// comment. The text on the header's line is its one-line form (or a
534− /// file or URL: `@markdown notes.md`, `@script app.js`); the line and a
535− /// body together are an error. A verbatim directive takes no
536− /// attributes.
537− Verbatim,
538−}
539−
540−/// A directive: a `@name` that isn't an element. The syntax tree
541−/// (`syntax.rs`), the evaluator, the formatter and the editor tools all
542−/// read the directives' shapes from this table.
543−#[derive(Debug, PartialEq)]
544−pub struct DirectiveSpec {
545− /// Name in htmlang source, without the `@`.
546− pub name: &'static str,
547− pub args: ArgGrammar,
548− pub body: BodyKind,
549−}
550−
551−/// Every directive.
552−#[rustfmt::skip]
553−pub static DIRECTIVES: &[DirectiveSpec] = &[
554− DirectiveSpec { name: "page", args: ArgGrammar::AttrsText, body: BodyKind::None },
555− DirectiveSpec { name: "let", args: ArgGrammar::Definition, body: BodyKind::Htmlang },
556− DirectiveSpec { name: "include", args: ArgGrammar::Text, body: BodyKind::None },
557− DirectiveSpec { name: "data", args: ArgGrammar::Data, body: BodyKind::None },
558− DirectiveSpec { name: "meta", args: ArgGrammar::Text, body: BodyKind::None },
559− DirectiveSpec { name: "if", args: ArgGrammar::Expression, body: BodyKind::Htmlang },
560− DirectiveSpec { name: "else", args: ArgGrammar::Else, body: BodyKind::Htmlang },
561− DirectiveSpec { name: "each", args: ArgGrammar::Loop, body: BodyKind::Htmlang },
562− DirectiveSpec { name: "style", args: ArgGrammar::Text, body: BodyKind::Verbatim },
563− DirectiveSpec { name: "head", args: ArgGrammar::Text, body: BodyKind::Verbatim },
564− DirectiveSpec { name: "raw", args: ArgGrammar::Text, body: BodyKind::Verbatim },
565− DirectiveSpec { name: "markdown", args: ArgGrammar::Text, body: BodyKind::Verbatim },
566−];
567−
568−/// The directive named `name` (without the `@`).
569−pub fn directive(name: &str) -> Option<&'static DirectiveSpec> {
570− DIRECTIVES.iter().find(|d| d.name == name)
571−}
572−
573−/// What the lines indented under `@name` are: the directive's body kind,
574−/// or an element's (verbatim for a row that says so: `@script`, and
575−/// `@code` and `@textarea`, whose text is literal; htmlang for every other
576−/// element).
577−pub fn body_kind(name: &str) -> BodyKind {
578− let verbatim = |spec: &TagSpec| spec.verbatim || spec.literal;
579− match directive(name) {
580− Some(spec) => spec.body,
581− None if ElementKind::from_name(name)
582− .and_then(|kind| kind.spec())
583− .is_some_and(verbatim) =>
584− {
585− BodyKind::Verbatim
586− }
587− None => BodyKind::Htmlang,
588− }
589−}
590−
591−#[cfg(test)]
592−mod tests {
593− use super::{ElementKind, Layout};
594−
595− fn layout(name: &str) -> Layout {
596− ElementKind::from_name(name).unwrap().layout()
597− }
598−
599− #[test]
600− fn every_element_has_the_layout_it_is_documented_with() {
601− let text = [
602− "text",
603− "paragraph",
604− "link",
605− "h1",
606− "h2",
607− "h3",
608− "h4",
609− "h5",
610− "h6",
611− "button",
612− "td",
613− "th",
614− "label",
615− "summary",
616− "legend",
617− "figcaption",
618− "dt",
619− "cite",
620− "code",
621− "kbd",
622− "mark",
623− "abbr",
624− "time",
625− "b",
626− "i",
627− "strong",
628− "em",
629− "small",
630− "sub",
631− "sup",
632− "q",
633− "del",
634− ];
635− for name in text {
636− assert_eq!(layout(name), Layout::Text, "@{}", name);
637− }
638− let columns = [
639− "el", "li", "dd", "ul", "ol", "dl", "search", "address", "noscript", "section", "form",
640− "in-front", "behind", "hgroup", "menu",
641− ];
642− for name in columns {
643− assert_eq!(layout(name), Layout::Column, "@{}", name);
644− }
645− assert_eq!(layout("row"), Layout::Row);
646− assert_eq!(layout("grid"), Layout::Grid);
647− for name in [
648− "table", "tr", "select", "option", "picture", "video", "pre", "canvas", "caption",
649− "colgroup", "tfoot", "optgroup", "ruby", "rt", "object",
650− ] {
651− assert_eq!(layout(name), Layout::Native, "@{}", name);
652− }
653− for name in [
654− "image", "input", "hr", "source", "br", "wbr", "col", "track", "embed", "area",
655− ] {
656− assert_eq!(layout(name), Layout::Void, "@{}", name);
657− }
658− }
659−
660− #[test]
661− fn html_names_written_otherwise_are_not_elements() {
662− for (html, htmlang) in super::HTML_NAMES_WRITTEN_OTHERWISE {
663− assert!(ElementKind::from_name(html).is_none(), "@{}", html);
664− let kind = ElementKind::from_name(htmlang).unwrap();
665− let written = match kind {
666− ElementKind::El => "div",
667− ElementKind::Text => "span",
668− ElementKind::Paragraph => "p",
669− ElementKind::Link => "a",
670− ElementKind::Image => "img",
671− _ => panic!("@{} is not one of htmlang's own", htmlang),
672− };
673− assert_eq!(written, *html);
674− }
675− // No two rows share a name, and none is a directive's
676− let mut names: Vec<&str> = ElementKind::all_names().collect();
677− let count = names.len();
678− names.sort_unstable();
679− names.dedup();
680− assert_eq!(names.len(), count, "an element name is listed twice");
681− for name in names {
682− assert!(super::directive(name).is_none(), "@{}", name);
683− }
684− }
685−
686− #[test]
687− fn each_row_names_at_most_one_leading_attribute() {
688− let leading = |name: &str, in_picture: bool| {
689− ElementKind::from_name(name)
690− .unwrap()
691− .leading_attribute(in_picture)
692− };
693− for (name, attr) in [
694− ("link", "href"),
695− ("area", "href"),
696− ("image", "src"),
697− ("script", "src"),
698− ("iframe", "src"),
699− ("video", "src"),
700− ("audio", "src"),
701− ("track", "src"),
702− ("embed", "src"),
703− ("form", "action"),
704− ("object", "data"),
705− ("optgroup", "label"),
706− ] {
707− assert_eq!(leading(name, false), Some(attr), "@{}", name);
708− assert_eq!(leading(name, true), Some(attr), "@{}", name);
709− }
710− assert_eq!(leading("source", false), Some("src"));
711− assert_eq!(leading("source", true), Some("srcset"));
712− for name in ["el", "text", "h1", "button", "slot", "fragment", "picture"] {
713− assert_eq!(leading(name, false), None, "@{}", name);
714− }
715− // @script is an ordinary row whose body is kept as written
716− let script = ElementKind::from_name("script").unwrap();
717− assert!(script.is_verbatim() && script.spec().is_some());
718− assert_eq!(super::body_kind("script"), super::BodyKind::Verbatim);
719− assert_eq!(super::body_kind("el"), super::BodyKind::Htmlang);
720− // @code and @textarea: a verbatim body, shown as text; @pre is an
721− // ordinary element, so `@pre > @code` and wrapper functions work
722− for name in ["code", "textarea"] {
723− assert_eq!(
724− super::body_kind(name),
725− super::BodyKind::Verbatim,
726− "@{}",
727− name
728− );
729− assert!(super::has_literal_text(name), "@{}", name);
730− }
731− assert_eq!(super::body_kind("pre"), super::BodyKind::Htmlang);
732− // Every verbatim directive takes its line as its one-line body or file
733− for spec in super::DIRECTIVES {
734− if spec.body == super::BodyKind::Verbatim {
735− assert_eq!(spec.args, super::ArgGrammar::Text, "@{}", spec.name);
736− }
737− }
738− }
739−
740− #[test]
741− fn an_element_has_a_tag_of_its_own_when_no_other_element_writes_it() {
742− let own = |name: &str| ElementKind::from_name(name).unwrap().own_tag();
743− for shared in [
744− "el", "row", "grid", "in-front", "behind", "text", "script", "fragment",
745− ] {
746− assert_eq!(own(shared), None, "@{}", shared);
747− }
748− assert_eq!(own("td"), Some("td"));
749− assert_eq!(own("link"), Some("a"));
750− assert_eq!(own("paragraph"), Some("p"));
751− assert_eq!(own("image"), Some("img"));
752− // Every tag of its own is written by that one element
753− let names: Vec<&str> = ElementKind::all_names().collect();
754− for name in &names {
755− let Some(tag) = own(name) else { continue };
756− let writers: Vec<&&str> = names
757− .iter()
758− .filter(|other| ElementKind::from_name(other).unwrap().tag() == Some(tag))
759− .collect();
760− assert_eq!(writers, vec![name], "<{}>", tag);
761− }
762− }
763−
764− #[test]
765− fn a_layout_s_display_is_not_repeated_in_the_row_s_css() {
766− for spec in super::TAGS {
767− assert!(
768− !spec.css.contains("display"),
769− "@{}: {}",
770− spec.name,
771− spec.css
772− );
773− }
774− }
256+/// Elements that print their argument as their text (`@text Hello`,
257+/// `@li First`).
258+pub fn renders_argument_as_text(kind: &ElementKind) -> bool {
259+ *kind == ElementKind::Text || kind.spec().is_some_and(|spec| spec.arg == TagArg::Text)
775260}
crates/htmlang-core/src/codegen.rs+1621−1575
@@ -1,8 +1,7 @@
11use std::collections::HashMap;
2−use std::hash::Hash;
2+use std::hash::{Hash, Hasher};
33
44use crate::ast::*;
5−use crate::vocab::with_px;
65
76// ---------------------------------------------------------------------------
87// Style collector: deduplicates CSS and assigns class names
@@ -17,315 +16,56 @@ const BREAKPOINTS: &[(&str, &str)] = &[
1716 ("2xl", "1536px"),
1817];
1918
20−/// The prefix of every generated class (`hl-2k9xq0m`), which keeps them
21−/// out of the author's own class names.
22−pub const CLASS_PREFIX: &str = "hl-";
23−
24−/// How many base-36 digits a class's name has after `hl-`: 7, about 36
25−/// bits of its style's hash, so a site with 10,000 different styles has
26−/// odds of about 6 in 10,000 that two of them share a name, which
27−/// `htmlang build` reports (`class-collision`). Within one file, a style
28−/// whose name is taken takes more digits.
29−pub const CLASS_DIGITS: usize = 7;
30−
31−/// A stable hash of `text`: FNV-1a, then SplitMix64's finalizer, so every
32−/// digit of a name depends on all of the text. It is the same on every
33−/// platform and in every build, unlike `std`'s hasher.
34−pub fn stable_hash(text: &str) -> u64 {
35− let mut hash: u64 = 0xcbf2_9ce4_8422_2325;
36− for byte in text.bytes() {
37− hash ^= u64::from(byte);
38− hash = hash.wrapping_mul(0x0000_0100_0000_01b3);
39− }
40− hash = (hash ^ (hash >> 30)).wrapping_mul(0xbf58_476d_1ce4_e5b9);
41− hash = (hash ^ (hash >> 27)).wrapping_mul(0x94d0_49bb_1331_11eb);
42− hash ^ (hash >> 31)
43−}
44−
45−/// `digits` base-36 digits of `hash`: `2k9xq0m`. With 13, all of it.
46−pub fn hash_digits(hash: u64, digits: usize) -> String {
47− const DIGITS: &[u8] = b"0123456789abcdefghijklmnopqrstuvwxyz";
48− let mut n = hash;
49− (0..digits)
50− .map(|_| {
51− let digit = DIGITS[(n % 36) as usize] as char;
52− n /= 36;
53− digit
54− })
55− .collect()
56−}
57−
58−/// A class htmlang generated: its name, and the hash of the style it
59−/// stands for. One style has one name in every file, so a fragment's
60−/// classes mean the same in any page it goes into.
61−#[derive(Clone, Debug, PartialEq, Eq)]
62−pub struct Class {
63− pub name: String,
64− pub style: u64,
65−}
66−
67−/// When a style applies: the at-rule prefixes it is under (their ranks,
68−/// see [`crate::vocab::at_rule_rank`], sorted, so `dark:md:` and `md:dark:`
69−/// are one condition) and its selector prefixes, left to right as the
70−/// selector reads (`hover:children:` is `.a:hover > *`).
71−#[derive(Clone, Default, PartialEq, Eq, Hash, Debug)]
72−struct Condition {
73− at: Vec<usize>,
74− selector: Vec<String>,
75−}
76−
77−impl Condition {
78− /// The condition of an attribute's key, and the name after its
79− /// prefixes.
80− fn of(key: &str) -> (Condition, &str) {
81− let (prefixes, name) = crate::vocab::split_prefixes(key);
82− let mut condition = Condition::default();
83− for prefix in prefixes {
84− match crate::vocab::at_rule_rank(prefix) {
85− Some(rank) => condition.at.push(rank),
86− None => condition.selector.push(prefix.to_string()),
87− }
88− }
89− condition.at.sort_unstable();
90− condition.at.dedup();
91− (condition, name)
92− }
93−
94− /// Only the at-rule part: a direction under `hover:` is the one without
95− /// it.
96− fn at_only(at: &[usize]) -> Condition {
97− Condition {
98− at: at.to_vec(),
99− selector: Vec::new(),
100− }
101− }
102−
103− /// The styles go on the element's children (`children:`).
104− fn on_children(&self) -> bool {
105− self.selector.iter().any(|p| p == crate::vocab::CHILDREN)
106− }
107−
108− /// The styles go on the elements of one kind inside the element
109− /// (`@td:`): where the element prefix is in the selector chain.
110− fn inside(&self) -> Option<usize> {
111− self.selector
112− .iter()
113− .position(|p| crate::vocab::element_prefix(p).is_some())
114− }
115−
116− /// Whether this condition holds wherever `other` does: its at-rules
117− /// are implied by `other`'s, and it has no selector or `other`'s.
118− fn holds_at(&self, other: &Condition) -> bool {
119− (self.selector.is_empty() || self.selector == other.selector)
120− && self.at.iter().all(|&a| {
121− other
122− .at
123− .iter()
124− .any(|&b| crate::vocab::at_rule_implied(a, b))
125− })
126− }
127−
128− /// The order the rules of each condition are written in, which the
129− /// cascade follows: no prefix, then selectors, then each at-rule
130− /// block (see [`at_order`]), with its selectors inside it.
131− fn order(&self) -> (AtOrder, SelectorOrder) {
132− (at_order(&self.at), selector_order(&self.selector))
133− }
134−}
135−
136−/// Where a block of at-rules is written: after the rules without one; by
137−/// its last (innermost) prefix in the order of
138−/// [`crate::vocab::at_rule_prefixes`] (widths, media, container widths), so
139−/// `md:dark:` comes with `dark:`, after it; then by length.
140−type AtOrder = (bool, usize, usize, Vec<usize>);
141−
142−fn at_order(at: &[usize]) -> AtOrder {
143− (
144− !at.is_empty(),
145− at.last().copied().unwrap_or(0),
146− at.len(),
147− at.to_vec(),
148− )
149−}
150−
151−/// Selector chains in the order of [`crate::vocab::PSEUDOS`] (position,
152−/// then form state, then `hover:`, `focus:`, `active:`, `disabled:`), and
153−/// by their argument's text for the same pseudo-class; a chain before the
154−/// longer ones it starts. A chain through `children:` comes after the
155−/// others, ordered by what follows its last `children:` and then by what
156−/// comes before it: only that tail counts toward its specificity (see
157−/// [`selector`]), so `hover:children:` follows `children:` and wins over it
158−/// on hover.
159−type SelectorOrder = (bool, Vec<(usize, String)>, Vec<(usize, String)>);
160−
161−fn selector_order(selector: &[String]) -> SelectorOrder {
162− let table = crate::vocab::PSEUDOS;
163− let ranked = |chain: &[String]| -> Vec<(usize, String)> {
164− chain
165− .iter()
166− .map(|p| {
167− let name = crate::vocab::pseudo_name(p);
168− let rank = table
169− .iter()
170− .position(|(q, _)| *q == name)
171− .unwrap_or(table.len());
172− (rank, p.clone())
173− })
174− .collect()
175− };
176− match selector.iter().rposition(|p| p == crate::vocab::CHILDREN) {
177− None => (false, ranked(selector), Vec::new()),
178− Some(i) => (true, ranked(&selector[i + 1..]), ranked(&selector[..i])),
179− }
180−}
181−
182−/// The order of the chains through an element prefix (`@td:`, see
183−/// [`scoped_selector`]): by the prefixes before it, which select the root
184−/// of the scope and add nothing to the specificity, so `hover:@td:` comes
185−/// after `@td:` and wins on hover; then by the element; then by the
186−/// prefixes after it.
187−fn inside_order(chain: &[String]) -> (SelectorOrder, String, SelectorOrder) {
188− let at = chain
189− .iter()
190− .position(|p| crate::vocab::element_prefix(p).is_some())
191− .unwrap_or(chain.len());
192− (
193− selector_order(&chain[..at]),
194− chain.get(at).cloned().unwrap_or_default(),
195− selector_order(chain.get(at + 1..).unwrap_or_default()),
196− )
197−}
198−
199−/// The selector for `class` under a chain of selector prefixes, read left
200−/// to right. Everything before the last `children:` goes in `:where()`, so
201−/// a parent's `children:` styles have no specificity, and a child's own
202−/// attributes win over them: `children:hover:` is `:where(.a)>*:hover`,
203−/// `hover:children:` is `:where(.a:hover)>*`.
204−fn selector(class: &str, chain: &[String]) -> String {
205− let last_children = chain.iter().rposition(|p| p == crate::vocab::CHILDREN);
206− let mut out = format!(".{}", class);
207− for (i, prefix) in chain.iter().enumerate() {
208− if prefix == crate::vocab::CHILDREN {
209− if Some(i) == last_children {
210− out = format!(":where({})>*", out);
211− } else {
212− out.push_str(">*");
213− }
214− } else if let Some(pseudo) = crate::vocab::pseudo_selector(prefix) {
215− out.push_str(&pseudo);
216− }
217− }
218− out
219−}
220−
221−/// The rule for the elements an element prefix picks out inside the
222−/// element with the class `class` (see [`Condition::inside`]): the scope's
223−/// root, from the selector prefixes before it (`hover:@td:` is inside a
224−/// hovered element), and the selector for the elements, from those after
225−/// it (`@td:hover:` is a hovered cell). `:scope td` leaves out the root
226−/// itself, so `@ul [@ul:...]` styles the lists inside, not its own. `None`
227−/// when the name has no tag of its own (the parser reports it).
228−fn scoped_selector(class: &str, chain: &[String], at: usize) -> Option<(String, String)> {
229− let name = crate::vocab::element_prefix(&chain[at])?;
230− let tag = ElementKind::from_name(name)?.own_tag()?;
231− let root = selector(class, &chain[..at]);
232− let mut target = format!(":scope {}", tag);
233− for prefix in &chain[at + 1..] {
234− if let Some(pseudo) = crate::vocab::pseudo_selector(prefix) {
235− target.push_str(&pseudo);
236− }
237− }
238− Some((root, target))
239−}
240−
241−/// The `@media` or `@container` rule an at-rule prefix stands for, as
242−/// written in readable and in compact output.
243−fn at_rule(rank: usize, dev: bool) -> String {
244− let prefix = crate::vocab::at_rule_prefixes()
245− .nth(rank)
246− .unwrap_or_default();
247− let name = prefix.trim_end_matches(':');
248− let width = |name: &str| {
249− BREAKPOINTS
250− .iter()
251− .find(|(n, _)| *n == name)
252− .map_or("0", |(_, w)| *w)
253− };
254− let (kind, feature, value) = if let Some(size) = name.strip_prefix("cq-") {
255− ("@container", "min-width", width(size))
256− } else {
257− match name {
258− "print" => {
259− return "@media print".to_string();
260− }
261− "dark" => ("@media", "prefers-color-scheme", "dark"),
262− "motion-safe" => ("@media", "prefers-reduced-motion", "no-preference"),
263− "motion-reduce" => ("@media", "prefers-reduced-motion", "reduce"),
264− "landscape" | "portrait" => ("@media", "orientation", name),
265− _ => ("@media", "min-width", width(name)),
266− }
267− };
268− if dev {
269− format!("{} ({}: {})", kind, feature, value)
270− } else {
271− format!("{}({}:{})", kind, feature, value)
272− }
273−}
274−
275−/// A style as text, for its hash: the defaults of its element's kind, its
276−/// rules (the at-rules' ranks, the selector prefixes and the declarations
277−/// of each) and the rules keyed on it, each part ended by a character CSS
278−/// doesn't have.
279−fn style_text(defaults: &str, rules: &[(Condition, String)], distinct: &str) -> String {
280− let mut text = format!("{defaults}\u{1}");
281− for (condition, body) in rules {
282− for rank in &condition.at {
283− text.push_str(&format!("{rank}\u{2}"));
284− }
285− text.push('\u{3}');
286− for prefix in &condition.selector {
287− text.push_str(prefix);
288− text.push('\u{2}');
289− }
290− text.push('\u{3}');
291− text.push_str(body);
292− text.push('\u{1}');
293− }
294− text.push_str(distinct);
295− text
19+/// Generate short CSS class names: a..z, then aa..a9, ba..b9, ..., z9, then
20+/// aaa, ... The first character is always a letter; later ones are drawn from
21+/// [a-z0-9]. The mapping is a bijection, so distinct indices never collide.
22+pub(crate) fn short_class_name(idx: usize) -> String {
23+ const REST: &[u8] = b"abcdefghijklmnopqrstuvwxyz0123456789";
24+ // Find the name length: 26 names of length 1, 26*36 of length 2, ...
25+ let mut n = idx;
26+ let mut len = 1;
27+ let mut count = 26usize;
28+ while n >= count {
29+ n -= count;
30+ len += 1;
31+ count = count.saturating_mul(36);
32+ }
33+ let mut tail = Vec::with_capacity(len - 1);
34+ for _ in 1..len {
35+ tail.push(REST[n % 36]);
36+ n /= 36;
37+ }
38+ let mut name = String::with_capacity(len);
39+ name.push((b'a' + n as u8) as char);
40+ name.extend(tail.iter().rev().map(|&b| b as char));
41+ name
29642}
29743
29844struct StyleEntry {
29945 class_name: String,
300− /// The hash of the style, which names the class
301− style: u64,
302− /// The defaults of the element's kind (its layout, a heading's
303− /// `margin:0`, ...), less what its own attributes set. They are written
304− /// as `:where(.hl-a)` in the layer `hl-kind`, so an element prefix
305− /// around it (`@h2:`), its parent's `children:` styles and its own
306− /// attributes, all in later layers, win over them.
307− defaults: String,
308− /// The element's rules: under each condition, its declarations, in the
309− /// order they are written
310− rules: Vec<(Condition, String)>,
311− /// What else tells two elements with the same CSS apart: the rules
312− /// keyed on this class (see [`StyleCollector::keyed`]). Not written.
313− distinct: String,
46+ base: String,
47+ /// (CSS selector suffix, css_rules) — e.g. (":hover", "color:red;")
48+ pseudo: Vec<(String, String)>,
49+ /// Responsive overrides: (breakpoint_prefix, css)
50+ responsive: Vec<(String, String)>,
51+ /// Dark mode overrides
52+ dark: String,
53+ /// Print overrides
54+ print: String,
55+ motion_safe: String,
56+ motion_reduce: String,
57+ landscape: String,
58+ portrait: String,
59+ /// Container query overrides: (breakpoint_prefix, css)
60+ container: Vec<(String, String)>,
31461}
31562
31663struct StyleCollector {
31764 entries: Vec<StyleEntry>,
318− /// Maps a style's hash to its entries (more than one only when two
319− /// styles hash alike, which the full comparison tells apart).
65+ /// Maps a pre-hashed style signature to an index into `entries`.
66+ /// Using u64 as the key keeps lookups allocation-free; on the rare case of
67+ /// a hash collision we fall back to a full equality check against the entry.
32068 index: HashMap<u64, Vec<usize>>,
321− /// The names given, which a style whose name is taken doesn't get
322− names: std::collections::HashSet<String>,
323− /// Rules for an element's children, keyed on its class and written in
324− /// the block of an at-rule condition: `(at-rules, selector, body)`, e.g.
325− /// `([md], ":where(.a)>.b", "flex:1;")` (see [`Flow`]).
326− keyed: Vec<(Vec<usize>, String, String)>,
327− /// The keyed rules already added
328− keyed_seen: std::collections::HashSet<(Vec<usize>, String, String)>,
32969}
33070
33171impl StyleCollector {
@@ -333,282 +73,313 @@ impl StyleCollector {
33373 StyleCollector {
33474 entries: Vec::new(),
33575 index: HashMap::new(),
336− names: std::collections::HashSet::new(),
337− keyed: Vec::new(),
338− keyed_seen: std::collections::HashSet::new(),
339− }
340− }
341−
342− /// Add a rule for `selector` under the at-rules `at`, once.
343− fn add_keyed(&mut self, at: Vec<usize>, selector: String, body: String) {
344− let rule = (at, selector, body);
345− if self.keyed_seen.insert(rule.clone()) {
346− self.keyed.push(rule);
34776 }
34877 }
34978
35079 /// Returns a class name for this style combination, or None if all empty.
80+ #[allow(clippy::too_many_arguments)]
35181 fn get_class(
35282 &mut self,
353− defaults: String,
354− mut rules: Vec<(Condition, String)>,
355− distinct: String,
83+ base: String,
84+ pseudo: Vec<(String, String)>,
85+ responsive: Vec<(String, String)>,
86+ dark: String,
87+ print: String,
88+ motion_safe: String,
89+ motion_reduce: String,
90+ landscape: String,
91+ portrait: String,
92+ container: Vec<(String, String)>,
35693 ) -> Option<String> {
357− rules.retain(|(_, body)| !body.is_empty());
358− if defaults.is_empty() && rules.is_empty() {
94+ if base.is_empty()
95+ && pseudo.is_empty()
96+ && responsive.is_empty()
97+ && dark.is_empty()
98+ && print.is_empty()
99+ && motion_safe.is_empty()
100+ && motion_reduce.is_empty()
101+ && landscape.is_empty()
102+ && portrait.is_empty()
103+ && container.is_empty()
104+ {
359105 return None;
360106 }
361− rules.sort_by_cached_key(|(condition, _)| condition.order());
362− let style = stable_hash(&style_text(&defaults, &rules, &distinct));
363−
364− if let Some(indices) = self.index.get(&style) {
107+ use std::collections::hash_map::DefaultHasher;
108+ let mut h = DefaultHasher::new();
109+ base.hash(&mut h);
110+ pseudo.hash(&mut h);
111+ responsive.hash(&mut h);
112+ dark.hash(&mut h);
113+ print.hash(&mut h);
114+ motion_safe.hash(&mut h);
115+ motion_reduce.hash(&mut h);
116+ landscape.hash(&mut h);
117+ portrait.hash(&mut h);
118+ container.hash(&mut h);
119+ let sig = h.finish();
120+
121+ if let Some(indices) = self.index.get(&sig) {
365122 for &idx in indices {
366123 let e = &self.entries[idx];
367− if e.defaults == defaults && e.rules == rules && e.distinct == distinct {
124+ if e.base == base
125+ && e.pseudo == pseudo
126+ && e.responsive == responsive
127+ && e.dark == dark
128+ && e.print == print
129+ && e.motion_safe == motion_safe
130+ && e.motion_reduce == motion_reduce
131+ && e.landscape == landscape
132+ && e.portrait == portrait
133+ && e.container == container
134+ {
368135 return Some(e.class_name.clone());
369136 }
370137 }
371138 }
372− // The name is the hash's first digits, and more of them when
373− // another style of this file has those; after all 13, the entry's
374− // number tells the two apart
375139 let idx = self.entries.len();
376− let name = (CLASS_DIGITS..=13)
377− .map(|digits| format!("{}{}", CLASS_PREFIX, hash_digits(style, digits)))
378− .find(|name| !self.names.contains(name))
379− .unwrap_or_else(|| format!("{}{}{}", CLASS_PREFIX, hash_digits(style, 13), idx));
380− self.names.insert(name.clone());
140+ let name = short_class_name(idx);
381141 self.entries.push(StyleEntry {
382142 class_name: name.clone(),
383− style,
384− defaults,
385− rules,
386− distinct,
143+ base,
144+ pseudo,
145+ responsive,
146+ dark,
147+ print,
148+ motion_safe,
149+ motion_reduce,
150+ landscape,
151+ portrait,
152+ container,
387153 });
388− self.index.entry(style).or_default().push(idx);
154+ self.index.entry(sig).or_default().push(idx);
389155 Some(name)
390156 }
391157
392− /// The classes given, in the order they were
393− fn classes(&self) -> impl Iterator<Item = Class> + '_ {
394− self.entries.iter().map(|e| Class {
395− name: e.class_name.clone(),
396− style: e.style,
397− })
398− }
399−
400− /// All generated rules, in three layers (see [`LAYERS`]): the element
401− /// kinds' defaults in `hl-kind` (`:where(.hl-a)`), the rules for the
402− /// elements an element prefix picks out inside an element (`@td:`), and
403− /// a function's scoped `@style`, in `hl-inside`, and the elements' own
404− /// rules in `htmlang`. They are written in a fixed order, so which rule
405− /// wins never depends on where in the page an element is: the rules
406− /// without a prefix, then those under selector prefixes, then each block
407− /// of at-rules (see [`at_order`]), in which the rules keyed on a parent
408− /// come first, then the element's own, then its selectors (see
409− /// [`selector_order`]).
410− fn to_css_formatted(&self, dev: bool, scoped: &[String]) -> String {
411− // The defaults: `:where(.hl-a,.hl-b){...}`
412− let mut kind = String::new();
413− let mut defaults: Vec<(&str, Vec<&str>)> = Vec::new();
414− for e in self.entries.iter().filter(|e| !e.defaults.is_empty()) {
415− match defaults.iter_mut().find(|(body, _)| *body == e.defaults) {
416− Some((_, classes)) => classes.push(&e.class_name),
417− None => defaults.push((&e.defaults, vec![&e.class_name])),
418− }
419− }
420− for (body, classes) in defaults {
421− let classes: Vec<String> = classes.iter().map(|c| format!(".{}", c)).collect();
422− let selector = format!(":where({})", classes.join(","));
423− if dev {
424− kind.push_str(&format!(" {} {{{}}}\n", selector, body));
425− } else {
426− kind.push_str(&format!("{}{{{}}}", selector, body));
158+ /// All generated rules, wrapped in `@layer htmlang`.
159+ fn to_css_formatted(&self, dev: bool) -> String {
160+ let mut css = String::new();
161+ let inner_indent = if dev { " " } else { "" };
162+ css.push_str(if dev { "@layer htmlang {\n" } else { "@layer htmlang{" });
163+
164+ // Non-responsive rules. Base and pseudo rules are merged separately by
165+ // identical body so that e.g. `.a,.b{display:flex;flex-direction:column;}`
166+ // replaces two identical rules. Pseudo variants are grouped per selector
167+ // suffix (`:hover` with `:hover`, etc.) to keep each pseudo's cascade
168+ // position independent of others.
169+ let mut base_pairs: Vec<(&str, &str)> = Vec::with_capacity(self.entries.len());
170+ for e in &self.entries {
171+ if !e.base.is_empty() {
172+ base_pairs.push((e.class_name.as_str(), e.base.as_str()));
427173 }
428174 }
175+ emit_grouped_rules(&mut css, &base_pairs, "", inner_indent, dev);
429176
430− let mut inside = self.blocks(true, dev);
431− // A function's scoped `@style`, nested under its class
432− for block in scoped {
433− if dev {
434− inside.push_str(block);
435− inside.push('\n');
436− } else {
437− inside.push_str(&compact_css(block));
177+ // Collect pseudo rules grouped by selector suffix, preserving the order
178+ // in which suffixes first appear across entries.
179+ let mut pseudo_order: Vec<&str> = Vec::new();
180+ let mut pseudo_buckets: HashMap<&str, Vec<(&str, &str)>> = HashMap::new();
181+ for e in &self.entries {
182+ for (selector, body) in &e.pseudo {
183+ if body.is_empty() {
184+ continue;
185+ }
186+ let key = selector.as_str();
187+ if !pseudo_buckets.contains_key(key) {
188+ pseudo_order.push(key);
189+ }
190+ pseudo_buckets
191+ .entry(key)
192+ .or_default()
193+ .push((e.class_name.as_str(), body.as_str()));
438194 }
439195 }
440−
441− let mut css = String::new();
442− for (name, rules) in [
443− ("hl-kind", kind),
444− ("hl-inside", inside),
445− ("htmlang", self.blocks(false, dev)),
446− ] {
447− if rules.is_empty() {
448− continue;
449− }
450− if dev {
451− css.push_str(&format!("@layer {} {{\n{}}}\n", name, rules));
452− } else {
453− css.push_str(&format!("@layer {}{{{}}}", name, rules));
196+ for selector in &pseudo_order {
197+ if let Some(pairs) = pseudo_buckets.get(selector) {
198+ emit_grouped_rules(&mut css, pairs, selector, inner_indent, dev);
454199 }
455200 }
456− css
457− }
458201
459− /// The rules of every block of at-rules, in order: those for the
460− /// elements inside (`inside`: rules under an element prefix, each in
461− /// an `@scope` on its element's class), or the elements' own.
462− fn blocks(&self, inside: bool, dev: bool) -> String {
463− let mut css = String::new();
464− let rules = || {
465− self.entries.iter().flat_map(move |e| {
466− e.rules
467− .iter()
468− .filter(move |(c, _)| c.inside().is_some() == inside)
469− .map(move |(c, body)| (e, c, body))
470− })
471− };
472− let mut blocks: Vec<&[usize]> = vec![&[]];
473− let keyed = self.keyed.iter().filter(|_| !inside);
474− let every = rules()
475− .map(|(_, c, _)| c.at.as_slice())
476− .chain(keyed.map(|(at, _, _)| at.as_slice()));
477− for at in every {
478− if !blocks.contains(&at) {
479− blocks.push(at);
480− }
481− }
482− blocks.sort_by_key(|at| at_order(at));
483−
484− for at in blocks {
485− let depth = at.len();
486− // Readable output indents a rule inside `@layer` and inside
487− // each at-rule but the first
488− let indent = if dev {
489− " ".repeat(depth.max(1))
490− } else {
491− String::new()
492− };
493− let mut inner = String::new();
494− // Rules keyed on a parent's class come first: they have the
495− // specificity of one class, like a class rule, so the child's
496− // own rules in the block still win
497− if !inside {
498− let keyed: Vec<(&str, &str)> = self
499− .keyed
500− .iter()
501− .filter(|(a, _, _)| a.as_slice() == at)
502− .map(|(_, selector, body)| (selector.as_str(), body.as_str()))
503− .collect();
504− emit_selector_rules(&mut inner, &keyed, &indent, dev);
505− }
506− // The selector chains of this block, in order
507− let mut chains: Vec<&[String]> = Vec::new();
508− for (_, condition, _) in rules() {
509− if condition.at == at && !chains.contains(&condition.selector.as_slice()) {
510− chains.push(&condition.selector);
511− }
512− }
513− if inside {
514− chains.sort_by_cached_key(|chain| inside_order(chain));
515− // One `@scope` for each root, its rules in the order of
516− // the chains: rules for one element under two roots (`.a`
517− // and `.a:hover`) tie on specificity and proximity, so the
518− // later one wins
519− let mut scopes: Vec<(String, Vec<(String, &str)>)> = Vec::new();
520− for chain in chains {
521− let Some(element) = chain
522− .iter()
523− .position(|p| crate::vocab::element_prefix(p).is_some())
524− else {
525− continue;
526− };
527− for (e, _, body) in
528− rules().filter(|(_, c, _)| c.at == at && c.selector == chain)
529− {
530− let Some((root, target)) = scoped_selector(&e.class_name, chain, element)
531− else {
532− continue;
533− };
534− match scopes.iter_mut().find(|(r, _)| *r == root) {
535− Some((_, targets)) => targets.push((target, body)),
536− None => scopes.push((root, vec![(target, body)])),
537− }
202+ // Responsive rules grouped by breakpoint
203+ for &(bp_name, bp_width) in BREAKPOINTS {
204+ let mut bp_pairs: Vec<(&str, &str)> = Vec::new();
205+ for e in &self.entries {
206+ for (bp, rule_css) in &e.responsive {
207+ if bp == bp_name && !rule_css.is_empty() {
208+ bp_pairs.push((e.class_name.as_str(), rule_css.as_str()));
538209 }
539210 }
540− let inner_indent = if dev {
541− format!("{} ", indent)
542− } else {
543− String::new()
544− };
545− for (root, targets) in scopes {
546− let targets: Vec<(&str, &str)> =
547− targets.iter().map(|(t, b)| (t.as_str(), *b)).collect();
548− inner.push_str(&indent);
549− inner.push_str(&format!("@scope ({})", root));
550− inner.push_str(if dev { " {\n" } else { "{" });
551− emit_selector_rules(&mut inner, &targets, &inner_indent, dev);
552− inner.push_str(&indent);
553− inner.push_str(if dev { "}\n" } else { "}" });
554− }
555− } else {
556− chains.sort_by_cached_key(|chain| selector_order(chain));
557− for chain in chains {
558− let pairs: Vec<(String, &str)> = rules()
559− .filter(|(_, c, _)| c.at == at && c.selector == chain)
560− .map(|(e, _, body)| (selector(&e.class_name, chain), body.as_str()))
561− .collect();
562− emit_grouped_rules(&mut inner, &pairs, &indent, dev);
563− }
564− }
565− if inner.is_empty() {
566− continue;
567211 }
568− // Each at-rule wraps the next, outermost first
569− for (level, &rank) in at.iter().enumerate().rev() {
570− let pad = if dev {
571− " ".repeat(level)
572− } else {
573− String::new()
574− };
575− inner = if dev {
576− format!("{pad}{} {{\n{inner}{pad}}}\n", at_rule(rank, true))
577− } else {
578− format!("{}{{{inner}}}", at_rule(rank, false))
579− };
212+ emit_media_block(
213+ &mut css,
214+ &format!("@media (min-width: {})", bp_width),
215+ &format!("@media(min-width:{})", bp_width),
216+ &bp_pairs,
217+ "",
218+ dev,
219+ );
220+ }
221+
222+ // Dark mode rules
223+ let dark_pairs: Vec<(&str, &str)> = self
224+ .entries
225+ .iter()
226+ .filter(|e| !e.dark.is_empty())
227+ .map(|e| (e.class_name.as_str(), e.dark.as_str()))
228+ .collect();
229+ emit_media_block(
230+ &mut css,
231+ "@media (prefers-color-scheme: dark)",
232+ "@media(prefers-color-scheme:dark)",
233+ &dark_pairs,
234+ "",
235+ dev,
236+ );
237+
238+ // Print rules
239+ let print_pairs: Vec<(&str, &str)> = self
240+ .entries
241+ .iter()
242+ .filter(|e| !e.print.is_empty())
243+ .map(|e| (e.class_name.as_str(), e.print.as_str()))
244+ .collect();
245+ emit_media_block(
246+ &mut css,
247+ "@media print",
248+ "@media print",
249+ &print_pairs,
250+ "",
251+ dev,
252+ );
253+
254+ // Motion safe rules
255+ let motion_safe_pairs: Vec<(&str, &str)> = self
256+ .entries
257+ .iter()
258+ .filter(|e| !e.motion_safe.is_empty())
259+ .map(|e| (e.class_name.as_str(), e.motion_safe.as_str()))
260+ .collect();
261+ emit_media_block(
262+ &mut css,
263+ "@media (prefers-reduced-motion: no-preference)",
264+ "@media(prefers-reduced-motion:no-preference)",
265+ &motion_safe_pairs,
266+ "",
267+ dev,
268+ );
269+
270+ // Motion reduce rules
271+ let motion_reduce_pairs: Vec<(&str, &str)> = self
272+ .entries
273+ .iter()
274+ .filter(|e| !e.motion_reduce.is_empty())
275+ .map(|e| (e.class_name.as_str(), e.motion_reduce.as_str()))
276+ .collect();
277+ emit_media_block(
278+ &mut css,
279+ "@media (prefers-reduced-motion: reduce)",
280+ "@media(prefers-reduced-motion:reduce)",
281+ &motion_reduce_pairs,
282+ "",
283+ dev,
284+ );
285+
286+ // Landscape rules
287+ let landscape_pairs: Vec<(&str, &str)> = self
288+ .entries
289+ .iter()
290+ .filter(|e| !e.landscape.is_empty())
291+ .map(|e| (e.class_name.as_str(), e.landscape.as_str()))
292+ .collect();
293+ emit_media_block(
294+ &mut css,
295+ "@media (orientation: landscape)",
296+ "@media(orientation:landscape)",
297+ &landscape_pairs,
298+ "",
299+ dev,
300+ );
301+
302+ // Portrait rules
303+ let portrait_pairs: Vec<(&str, &str)> = self
304+ .entries
305+ .iter()
306+ .filter(|e| !e.portrait.is_empty())
307+ .map(|e| (e.class_name.as_str(), e.portrait.as_str()))
308+ .collect();
309+ emit_media_block(
310+ &mut css,
311+ "@media (orientation: portrait)",
312+ "@media(orientation:portrait)",
313+ &portrait_pairs,
314+ "",
315+ dev,
316+ );
317+
318+ // Container query rules grouped by breakpoint
319+ for &(bp_name, bp_width) in BREAKPOINTS {
320+ let mut cq_pairs: Vec<(&str, &str)> = Vec::new();
321+ for e in &self.entries {
322+ for (bp, rule_css) in &e.container {
323+ if bp == bp_name && !rule_css.is_empty() {
324+ cq_pairs.push((e.class_name.as_str(), rule_css.as_str()));
325+ }
326+ }
580327 }
581− css.push_str(&inner);
328+ emit_media_block(
329+ &mut css,
330+ &format!("@container (min-width: {})", bp_width),
331+ &format!("@container(min-width:{})", bp_width),
332+ &cq_pairs,
333+ "",
334+ dev,
335+ );
582336 }
337+
338+ css.push_str(if dev { "}\n" } else { "}" });
583339 css
584340 }
585341}
586342
587−/// Emit CSS rules from `(selector, body)` pairs, merging identical bodies
343+/// Emit CSS rules from `(class_name, body)` pairs, merging identical bodies
588344/// into a single selector-list rule (e.g. `.a,.b{body}`). The first occurrence
589345/// of each distinct body determines ordering, so output stays deterministic
590−/// across runs. `indent` is prepended to each rule line.
591−fn emit_grouped_rules(out: &mut String, pairs: &[(String, &str)], indent: &str, dev: bool) {
346+/// across runs. `selector_suffix` is appended to each class (e.g. `":hover"`,
347+/// or `""` for plain class rules). `indent` is prepended to each rule line.
348+fn emit_grouped_rules(
349+ out: &mut String,
350+ pairs: &[(&str, &str)],
351+ selector_suffix: &str,
352+ indent: &str,
353+ dev: bool,
354+) {
592355 if pairs.is_empty() {
593356 return;
594357 }
595358 // Group in first-occurrence order.
596359 let mut order: Vec<&str> = Vec::new();
597360 let mut groups: HashMap<&str, Vec<&str>> = HashMap::new();
598− for (selector, body) in pairs {
361+ for &(name, body) in pairs {
599362 if body.is_empty() {
600363 continue;
601364 }
602365 if !groups.contains_key(body) {
603366 order.push(body);
604367 }
605− groups.entry(body).or_default().push(selector);
368+ groups.entry(body).or_default().push(name);
606369 }
607370 let sp = if dev { " " } else { "" };
608371 let nl = if dev { "\n" } else { "" };
609372 for body in &order {
373+ let names = &groups[body];
610374 out.push_str(indent);
611− out.push_str(&groups[body].join(","));
375+ for (i, n) in names.iter().enumerate() {
376+ if i > 0 {
377+ out.push(',');
378+ }
379+ out.push('.');
380+ out.push_str(n);
381+ out.push_str(selector_suffix);
382+ }
612383 out.push_str(sp);
613384 out.push('{');
614385 out.push_str(body);
@@ -617,44 +388,37 @@ fn emit_grouped_rules(out: &mut String, pairs: &[(String, &str)], indent: &str,
617388 }
618389}
619390
620−/// Emit `(selector, body)` rules in their order, merging a run of rules
621−/// with the same body into one rule with a selector list (the order
622−/// matters: two rules may apply to one element).
623−fn emit_selector_rules(out: &mut String, rules: &[(&str, &str)], indent: &str, dev: bool) {
624− let mut i = 0;
625− while i < rules.len() {
626− let body = rules[i].1;
627− let run = rules[i..].iter().take_while(|(_, b)| *b == body).count();
628− if !body.is_empty() {
629− let selectors: Vec<&str> = rules[i..i + run].iter().map(|(s, _)| *s).collect();
630− out.push_str(indent);
631− out.push_str(&selectors.join(","));
632− if dev {
633− out.push(' ');
634− }
635− out.push('{');
636− out.push_str(body);
637− out.push('}');
638− if dev {
639− out.push('\n');
640− }
641− }
642− i += run;
391+/// Emit an `@media` / `@container` block containing grouped class rules.
392+/// Skips the block entirely if no non-empty bodies are present.
393+fn emit_media_block(
394+ out: &mut String,
395+ header_dev: &str,
396+ header_min: &str,
397+ pairs: &[(&str, &str)],
398+ selector_suffix: &str,
399+ dev: bool,
400+) {
401+ if pairs.iter().all(|(_, body)| body.is_empty()) {
402+ return;
403+ }
404+ let mut inner = String::new();
405+ let inner_indent = if dev { " " } else { "" };
406+ emit_grouped_rules(&mut inner, pairs, selector_suffix, inner_indent, dev);
407+ if inner.is_empty() {
408+ return;
409+ }
410+ if dev {
411+ out.push_str(&format!("{} {{\n{}}}\n", header_dev, inner));
412+ } else {
413+ out.push_str(&format!("{}{{{}}}", header_min, inner));
643414 }
644415}
645416
646417struct GenContext {
647418 dev: bool,
648419 depth: usize,
420+ image_count: usize,
649421 has_interactive: bool,
650− /// Writing inside a text element, at any depth: htmlang's own `<div>`s
651− /// are `<span>`s there, which text can hold.
652− in_text: bool,
653− /// How the element whose children are being written lays them out
654− flow: Flow,
655− /// Writing the children of a `@picture`, where `@source`'s leading
656− /// argument is its `srcset`
657− in_picture: bool,
658422}
659423
660424impl GenContext {
@@ -684,22 +448,15 @@ pub struct CodegenOptions {
684448
685449/// Generate HTML from a parsed document using the given options.
686450pub fn generate_with(doc: &Document, opts: &CodegenOptions) -> String {
687− generate_with_classes(doc, opts).0
688−}
689−
690−/// [`generate_with`], and the classes the document's styles were given,
691−/// for a check across files that no name stands for two styles.
692−pub fn generate_with_classes(doc: &Document, opts: &CodegenOptions) -> (String, Vec<Class>) {
693− let mut classes = Vec::new();
694451 let mut html = if opts.partial {
695− generate_partial_inner(doc, opts.dev, &mut classes)
452+ generate_partial_inner(doc, opts.dev)
696453 } else {
697− generate_full_inner(doc, opts.dev, &mut classes)
454+ generate_full_inner(doc, opts.dev)
698455 };
699456 if opts.minify {
700457 html = minify_html(&html);
701458 }
702− (html, classes)
459+ html
703460}
704461
705462pub fn generate(doc: &Document) -> String {
@@ -825,131 +582,266 @@ fn minify_html(html: &str) -> String {
825582 result
826583}
827584
828−fn generate_full_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -> String {
829− // Without `@page` the output is a fragment
830− let Some(page) = &doc.page else {
831− return generate_partial_inner(doc, dev, classes);
832− };
585+fn generate_full_inner(doc: &Document, dev: bool) -> String {
833586 let mut styles = StyleCollector::new();
834587 let mut ctx = GenContext {
835588 dev,
836589 depth: 0,
590+ image_count: 0,
837591 has_interactive: false,
838− in_text: false,
839− flow: Flow::default(),
840− in_picture: false,
841592 };
842593
843− // The page is the root element: `<body>` is a column (the reset makes
844− // it one, filling the viewport), `@page`'s styles are its class, and
845− // the page's top-level elements are its children
846− let root = Element {
847− kind: ElementKind::El,
848− attrs: page.styles.clone(),
849− argument: None,
850− children: Vec::new(),
851− line_num: 0,
852− function: None,
853− };
854− let mut own = Flow::of(&root);
855− let top = Flow::default();
856− let site = Site {
857− kind: &root.kind,
858− parent: &top,
859− has_overlay_children: holds_overlays(&doc.nodes),
860− inline: false,
861− root: true,
862− };
863− let body_class = element_class(&root, &site, &mut styles);
864− own.class = body_class.clone();
865− ctx.flow = own;
594+ // Check if document has @main for skip-to-content link
595+ let has_main = has_tag(&doc.nodes, "main");
866596
867597 let mut body = String::new();
868− generate_children(
869− &doc.nodes,
870− Some(Layout::Column),
871− &mut body,
872− &mut styles,
873− &mut ctx,
874− );
875−
876− let element_css = build_element_css(doc, &styles, dev);
877− let nl = if dev { "\n" } else { "" };
878598
879− let mut meta_html = String::new();
880− // A `@meta viewport` of the page's own replaces the usual one
881− if !doc.meta_tags.iter().any(|(name, _)| name == "viewport") {
882− meta_html.push_str(&format!(
883− "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">{}",
884− nl
885− ));
886− }
887− meta_html.push_str(&format!(
888− "<title>{}</title>{}",
889− html_escape(&page.title),
890− nl
891− ));
892− for (name, content) in &doc.meta_tags {
893− meta_html.push_str(&format!(
894− "<meta name=\"{}\" content=\"{}\">{}",
895− html_escape(name),
896− html_escape(content),
897− nl
898− ));
899− }
900− for (property, content) in &doc.og_tags {
901− meta_html.push_str(&format!(
902− "<meta property=\"og:{}\" content=\"{}\">{}",
903− html_escape(property),
904− html_escape(content),
905− nl
906− ));
907− }
908− if let Some(path) = &page.favicon {
909− meta_html.push_str(&format!(
910− "<link rel=\"icon\" href=\"{}\">{}",
911− html_escape(path),
912− nl
913− ));
599+ // Skip-to-content link for accessibility (only when @main exists)
600+ if has_main {
601+ if dev {
602+ body.push_str("<a href=\"#hl-main\" class=\"hl-skip\">Skip to content</a>\n");
603+ } else {
604+ body.push_str("<a href=\"#hl-main\" class=\"hl-skip\">Skip to content</a>");
605+ }
914606 }
915− for block in &doc.head_blocks {
916− meta_html.push_str(block);
917− meta_html.push_str(nl);
607+
608+ for node in &doc.nodes {
609+ generate_node(node, None, &mut body, &mut styles, &mut ctx);
918610 }
919611
920− // `@page`'s HTML attributes go on `<html>`
921− let mut root_attrs = String::new();
922− for attr in html_attrs(&page.html_attrs) {
923− push_html_attr(&mut root_attrs, attr);
612+
613+ let element_css = build_element_css(doc, &styles, dev);
614+
615+ // Build meta tags string
616+ let meta_html = if doc.meta_tags.is_empty() {
617+ String::new()
618+ } else {
619+ let mut m = String::new();
620+ for (name, content) in &doc.meta_tags {
621+ if dev {
622+ m.push_str(&format!(
623+ "<meta name=\"{}\" content=\"{}\">\n",
624+ html_escape(name),
625+ html_escape(content)
626+ ));
627+ } else {
628+ m.push_str(&format!(
629+ "<meta name=\"{}\" content=\"{}\">",
630+ html_escape(name),
631+ html_escape(content)
632+ ));
633+ }
634+ }
635+ m
636+ };
637+
638+ // Build OG meta tags
639+ let og_html = if doc.og_tags.is_empty() {
640+ String::new()
641+ } else {
642+ let mut o = String::new();
643+ for (property, content) in &doc.og_tags {
644+ if dev {
645+ o.push_str(&format!(
646+ "<meta property=\"og:{}\" content=\"{}\">\n",
647+ html_escape(property),
648+ html_escape(content)
649+ ));
650+ } else {
651+ o.push_str(&format!(
652+ "<meta property=\"og:{}\" content=\"{}\">",
653+ html_escape(property),
654+ html_escape(content)
655+ ));
656+ }
657+ }
658+ o
659+ };
660+
661+ // Build head blocks string
662+ let head_html = if doc.head_blocks.is_empty() {
663+ String::new()
664+ } else {
665+ let mut h = String::new();
666+ for block in &doc.head_blocks {
667+ h.push_str(block);
668+ if dev {
669+ h.push('\n');
670+ }
671+ }
672+ h
673+ };
674+
675+ let lang_attr = match &doc.lang {
676+ Some(lang) => format!(" lang=\"{}\"", html_escape(lang)),
677+ None => String::new(),
678+ };
679+
680+ let favicon_html = match &doc.favicon {
681+ Some(path) => {
682+ // Try to read and inline the favicon
683+ if let Ok(data) = std::fs::read(path) {
684+ let mime = if path.ends_with(".ico") {
685+ "image/x-icon"
686+ } else if path.ends_with(".png") {
687+ "image/png"
688+ } else if path.ends_with(".svg") {
689+ "image/svg+xml"
690+ } else {
691+ "image/x-icon"
692+ };
693+ let b64 = base64_encode(&data);
694+ if dev {
695+ format!(
696+ "<link rel=\"icon\" href=\"data:{};base64,{}\">\n",
697+ mime, b64
698+ )
699+ } else {
700+ format!("<link rel=\"icon\" href=\"data:{};base64,{}\">", mime, b64)
701+ }
702+ } else {
703+ // Fall back to href
704+ if dev {
705+ format!("<link rel=\"icon\" href=\"{}\">\n", html_escape(path))
706+ } else {
707+ format!("<link rel=\"icon\" href=\"{}\">", html_escape(path))
708+ }
709+ }
710+ }
711+ None => String::new(),
712+ };
713+
714+ // Canonical URL
715+ let canonical_html = match &doc.canonical {
716+ Some(url) => {
717+ if dev {
718+ format!("<link rel=\"canonical\" href=\"{}\">\n", html_escape(url))
719+ } else {
720+ format!("<link rel=\"canonical\" href=\"{}\">", html_escape(url))
721+ }
722+ }
723+ None => String::new(),
724+ };
725+
726+ // Base URL
727+ let base_html = match &doc.base_url {
728+ Some(url) => {
729+ if dev {
730+ format!("<base href=\"{}\">\n", html_escape(url))
731+ } else {
732+ format!("<base href=\"{}\">", html_escape(url))
733+ }
734+ }
735+ None => String::new(),
736+ };
737+
738+ // Preload hints
739+ let mut preload_html = String::new();
740+ // Explicit preload hints from the document
741+ for hint in &doc.preload_hints {
742+ if dev {
743+ preload_html.push_str(&format!(
744+ "<link rel=\"preload\" href=\"{}\" as=\"{}\"{}>\n",
745+ html_escape(&hint.href),
746+ hint.as_type,
747+ if hint.crossorigin { " crossorigin" } else { "" }
748+ ));
749+ } else {
750+ preload_html.push_str(&format!(
751+ "<link rel=\"preload\" href=\"{}\" as=\"{}\"{}>",
752+ html_escape(&hint.href),
753+ hint.as_type,
754+ if hint.crossorigin { " crossorigin" } else { "" }
755+ ));
756+ }
924757 }
925− let mut body_attrs = String::new();
926− emit_class_attr(&mut body_attrs, body_class.as_deref(), None);
927758
928759 // Focus-visible CSS for interactive elements (accessibility)
929760 let focus_visible_css = if ctx.has_interactive {
930− let focusable = ":where(a,button,input,select,textarea):focus-visible";
931761 if dev {
932− format!(
933− "{}{} {{ outline: 2px solid currentColor; outline-offset: 2px; }}\n",
934− OWN_ELEMENTS, focusable
935− )
762+ "a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n"
936763 } else {
937− format!(
938− "{}{}{{outline:2px solid currentColor;outline-offset:2px}}",
939− OWN_ELEMENTS, focusable
940− )
764+ "a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}"
941765 }
942766 } else {
943− String::new()
767+ ""
944768 };
945− let reset_css = reset_css(dev, true, &focus_visible_css);
946− classes.extend(styles.classes());
947769
948− format!(
949− "<!DOCTYPE html>{nl}<html{root_attrs}>{nl}<head>{nl}<meta charset=\"utf-8\">{nl}\
950− {meta_html}<style>{nl}{reset_css}{element_css}</style>{nl}</head>{nl}\
951− <body{body_attrs}>{nl}{body}</body>{nl}</html>{nl}",
952− )
770+ // Skip-to-content CSS (visually hidden but accessible)
771+ let skip_link_css = if has_main {
772+ if dev {
773+ ".hl-skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; padding: 8px 16px; background: #000; color: #fff; text-decoration: none; font-size: 14px; }\n.hl-skip:focus { left: 8px; top: 8px; width: auto; height: auto; overflow: visible; }\n"
774+ } else {
775+ ".hl-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;padding:8px 16px;background:#000;color:#fff;text-decoration:none;font-size:14px}.hl-skip:focus{left:8px;top:8px;width:auto;height:auto;overflow:visible}"
776+ }
777+ } else {
778+ ""
779+ };
780+
781+ let reset_css = reset_css(dev, focus_visible_css, skip_link_css);
782+
783+ match &doc.page_title {
784+ Some(title) => {
785+ if dev {
786+ format!(
787+ "\
788+<!DOCTYPE html>
789+<html{lang_attr}>
790+<head>
791+<meta charset=\"utf-8\">
792+<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
793+<title>{title}</title>
794+{base_html}{canonical_html}{preload_html}{meta_html}{og_html}{favicon_html}{head_html}\
795+<style>
796+{reset_css}{element_css}\
797+</style>
798+</head>
799+<body>
800+{body}\
801+</body>
802+</html>
803+",
804+ title = html_escape(title),
805+ lang_attr = lang_attr,
806+ base_html = base_html,
807+ canonical_html = canonical_html,
808+ preload_html = preload_html,
809+ meta_html = meta_html,
810+ favicon_html = favicon_html,
811+ head_html = head_html,
812+ og_html = og_html,
813+ reset_css = reset_css,
814+ element_css = element_css,
815+ body = body,
816+ )
817+ } else {
818+ format!(
819+ "<!DOCTYPE html><html{lang_attr}><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>{title}</title>{base_html}{canonical_html}{preload_html}{meta_html}{og_html}{favicon_html}{head_html}<style>{reset_css}{element_css}</style></head><body>{body}</body></html>",
820+ title = html_escape(title),
821+ lang_attr = lang_attr,
822+ base_html = base_html,
823+ canonical_html = canonical_html,
824+ preload_html = preload_html,
825+ meta_html = meta_html,
826+ og_html = og_html,
827+ favicon_html = favicon_html,
828+ head_html = head_html,
829+ reset_css = reset_css,
830+ element_css = element_css,
831+ body = body,
832+ )
833+ }
834+ }
835+ None => {
836+ if element_css.is_empty() {
837+ body
838+ } else if dev {
839+ format!("<style>\n{}</style>\n{}", element_css, body)
840+ } else {
841+ format!("<style>{}</style>{}", element_css, body)
842+ }
843+ }
844+ }
953845}
954846
955847/// Assemble every CSS block the document needs (font faces, custom
@@ -958,16 +850,17 @@ fn generate_full_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -> S
958850fn build_element_css(doc: &Document, styles: &StyleCollector, dev: bool) -> String {
959851 let mut element_css = String::new();
960852
961− // Collect the CSS custom properties declared with `@let --name` so they
962− // can be emitted in a single `:root` block below.
853+ // Collect all CSS custom properties (explicit `@let --name` / `@theme`
854+ // tokens, plus any auto-extracted repeats) so they can be emitted in a
855+ // single `:root` block below.
963856 let mut root_vars: Vec<(String, String)> = Vec::new();
964857 for (name, value) in &doc.css_vars {
965858 root_vars.push((name.clone(), value.clone()));
966859 }
967860
968− // Generated rules always go in htmlang's layers, so unlayered user CSS
861+ // Generated rules always go in `@layer htmlang`, so unlayered user CSS
969862 // (`@style`, `@raw`) overrides them regardless of specificity.
970− let styles_css = styles.to_css_formatted(dev, &doc.scoped_css);
863+ let styles_css = styles.to_css_formatted(dev);
971864
972865 // Emit the :root block first so the cascade picks up the custom
973866 // properties before the class rules consume them.
@@ -992,121 +885,63 @@ fn build_element_css(doc: &Document, styles: &StyleCollector, dev: bool) -> Stri
992885
993886 element_css.push_str(&styles_css);
994887
888+
889+ // Keyframes for the standard library's `$skeleton` bundle, when used
890+ if element_css.contains("hl-skeleton") {
891+ if dev {
892+ element_css.push_str("@keyframes hl-skeleton {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n");
893+ } else {
894+ element_css.push_str("@keyframes hl-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}");
895+ }
896+ }
897+
995898 // @style blocks (custom CSS)
996899 for block in &doc.custom_css {
997900 if dev {
998901 element_css.push_str(block);
999902 element_css.push('\n');
1000903 } else {
1001− element_css.push_str(&compact_css(block));
904+ let minified: String = block.lines().map(|l| l.trim()).collect::<Vec<_>>().join("");
905+ element_css.push_str(&minified);
1002906 }
1003907 }
1004908
1005909 element_css
1006910}
1007911
1008−/// An `@style` body on one line: each line trimmed, and the lines joined with
1009−/// a space, so a value that goes on over two lines (`margin: 0` then `auto;`)
1010−/// keeps its words apart.
1011−fn compact_css(block: &str) -> String {
1012− block
1013− .lines()
1014− .map(str::trim)
1015− .filter(|l| !l.is_empty())
1016− .collect::<Vec<_>>()
1017− .join(" ")
1018−}
1019−
1020−/// htmlang's own elements: those with a generated class, or the class of a
1021−/// function's scoped `@style`. The reset's rules for elements are kept to
1022−/// them, so `@raw` and `@markdown` content, and the page a fragment is put
1023−/// into, keep their own.
1024−const OWN_ELEMENTS: &str = ":where([class^=\"hl-\"],[class*=\" hl-\"])";
1025−
1026−/// htmlang's cascade layers, from the one that loses to the one that wins:
1027−/// the reset; the defaults of each element's kind (a heading's `margin:0`,
1028−/// a column's `display:flex`); the styles an element gets from an
1029−/// element prefix on an element around it (`@td:padding 8`) and from a
1030−/// function's scoped `@style`; and the element's own styles. So a
1031−/// scope's styles win over the defaults, and what an element says about
1032−/// itself wins over both. CSS outside any layer (`@style`, `@raw`) wins
1033−/// over all of them.
1034−const LAYERS: [&str; 4] = ["hl-reset", "hl-kind", "hl-inside", "htmlang"];
1035−
1036912/// Built-in reset rules, in a layer before `htmlang`: unlayered CSS beats
1037−/// every layer, so an unlayered rule here would override the generated
1038−/// ones. A page resets `box-sizing` everywhere and makes `<body>` a column
1039−/// that fills the window; a fragment, which goes into a page it doesn't
1040−/// own, touches only htmlang's own elements. In both, an element htmlang
1041−/// lays out stays hidden while it is `hidden`, a closed `<dialog>` or a
1042−/// popover that isn't showing: its generated `display` would otherwise
1043−/// beat the browser's `display: none`.
1044−fn reset_css(dev: bool, page: bool, focus_visible_css: &str) -> String {
1045− let own = OWN_ELEMENTS;
1046− let mut rules = Vec::new();
1047− if page {
1048− rules.push(if dev {
1049− "*, *::before, *::after { box-sizing: border-box; }".to_string()
1050− } else {
1051− "*,*::before,*::after{box-sizing:border-box}".to_string()
1052− });
1053− rules.push(if dev {
1054− "body { margin: 0; font-family: system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; min-height: 100dvh; }".to_string()
1055− } else {
1056− "body{margin:0;font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;min-height:100dvh}".to_string()
1057− });
1058− } else {
1059− rules.push(if dev {
1060− format!("{own}, {own}::before, {own}::after {{ box-sizing: border-box; }}")
1061− } else {
1062− format!("{own},{own}::before,{own}::after{{box-sizing:border-box}}")
1063− });
1064− }
1065− let hidden = "[hidden]:not([hidden=\"until-found\"]),dialog:not([open]):not(:popover-open),\
1066− [popover]:not(:popover-open):not(dialog[open])";
1067− rules.push(if dev {
1068− format!("{own}:where({hidden}) {{ display: none !important; }}")
913+/// every layer, so an unlayered `a{color:inherit}` would override
914+/// `@link [color red]`.
915+fn reset_css(dev: bool, focus_visible_css: &str, skip_link_css: &str) -> String {
916+ let base = if dev {
917+ "*, *::before, *::after { box-sizing: border-box; }\nbody { margin: 0; font-family: system-ui, -apple-system, sans-serif; }\nimg { display: block; }\na { text-decoration: none; color: inherit; }\n"
1069918 } else {
1070− format!("{own}:where({hidden}){{display:none!important}}")
1071− });
1072− let mut rules = rules.join(if dev { "\n" } else { "" });
1073− if dev {
1074− rules.push('\n');
1075− }
1076− rules.push_str(focus_visible_css);
919+ "*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}"
920+ };
921+ let rules = format!("{}{}{}", base, focus_visible_css, skip_link_css);
1077922 if dev {
1078− format!(
1079− "@layer {};\n@layer hl-reset {{\n{}}}\n",
1080− LAYERS.join(", "),
1081− rules
1082− )
923+ format!("@layer hl-reset, htmlang;\n@layer hl-reset {{\n{}}}\n", rules)
1083924 } else {
1084− format!("@layer {};@layer hl-reset{{{}}}", LAYERS.join(","), rules)
925+ format!("@layer hl-reset,htmlang;@layer hl-reset{{{}}}", rules)
1085926 }
1086927}
1087928
1088929/// Generate an HTML fragment: body + optional <style>, no <html>/<head>/<body> wrapper.
1089−fn generate_partial_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -> String {
930+fn generate_partial_inner(doc: &Document, dev: bool) -> String {
1090931 let mut styles = StyleCollector::new();
1091932 let mut ctx = GenContext {
1092933 dev,
1093934 depth: 0,
935+ image_count: 0,
1094936 has_interactive: false,
1095− in_text: false,
1096− flow: Flow::default(),
1097− in_picture: false,
1098937 };
1099938 let mut body = String::new();
1100939
1101− generate_children(&doc.nodes, None, &mut body, &mut styles, &mut ctx);
1102−
1103− let mut element_css = build_element_css(doc, &styles, dev);
1104− // htmlang's own elements get the reset's rules for elements (which
1105− // also puts htmlang's layers in order)
1106− if !styles.entries.is_empty() || !doc.scoped_css.is_empty() {
1107− element_css.insert_str(0, &reset_css(dev, false, ""));
940+ for node in &doc.nodes {
941+ generate_node(node, None, &mut body, &mut styles, &mut ctx);
1108942 }
1109− classes.extend(styles.classes());
943+
944+ let element_css = build_element_css(doc, &styles, dev);
1110945
1111946 if element_css.is_empty() {
1112947 body
@@ -1121,20 +956,22 @@ fn generate_partial_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -
1121956// Node generation
1122957// ---------------------------------------------------------------------------
1123958
1124−/// Write `node`, which is inside an element with the layout `parent`
1125−/// (`None` at the top of the page).
1126959fn generate_node(
1127960 node: &Node,
1128− parent: Option<Layout>,
961+ parent_kind: Option<&ElementKind>,
1129962 out: &mut String,
1130963 styles: &mut StyleCollector,
1131964 ctx: &mut GenContext,
1132965) {
1133966 match node {
1134− Node::Element(elem) => generate_element(elem, parent, out, styles, ctx),
967+ Node::Element(elem) => generate_element(elem, parent_kind, out, styles, ctx),
1135968 Node::Text(segments) => {
1136− // In a row, column or grid each line of text is a child
1137− let needs_wrap = parent.is_some_and(Layout::is_container);
969+ let needs_wrap = matches!(
970+ parent_kind,
971+ Some(ElementKind::Row | ElementKind::El)
972+ ) || parent_kind
973+ .and_then(ElementKind::spec)
974+ .is_some_and(|spec| spec.wraps_text);
1138975 if needs_wrap {
1139976 out.push_str(&ctx.indent());
1140977 out.push_str("<span>");
@@ -1153,156 +990,73 @@ fn generate_node(
1153990 }
1154991}
1155992
1156−/// What goes between two things written one after the other in an element
1157−/// with this layout (`None`: the top of the page): text flows, so its lines
1158−/// and children are joined with a space; in HTML's own layout, and at the
1159−/// top of the page, two lines of text are separated by a line break (a
1160−/// space, except where whitespace is kept, as in `@pre`).
1161−fn separator(layout: Option<Layout>, previous_is_text: bool, next: &Node) -> Option<char> {
1162− match layout {
1163− Some(Layout::Text) => Some(' '),
1164− Some(Layout::Native) | None if previous_is_text && matches!(next, Node::Text(_)) => {
1165− Some('\n')
993+
994+/// Emit the argument of an element whose argument is an HTML attribute
995+/// (`@iframe URL` → `src="URL"`, `@form /submit` → `action="/submit"`).
996+fn emit_argument_attr(out: &mut String, elem: &Element) {
997+ if let Some(TagSpec {
998+ arg: TagArg::Attr(attr),
999+ ..
1000+ }) = elem.kind.spec()
1001+ && let Some(value) = &elem.argument
1002+ {
1003+ out.push(' ');
1004+ out.push_str(attr);
1005+ out.push_str("=\"");
1006+ out.push_str(&html_escape(value));
1007+ out.push('"');
1008+ }
1009+}
1010+
1011+/// Emit HTML attributes: `key=value` ones (except `id` / `class`, which
1012+/// are emitted with the generated class) and bare booleans like `required`.
1013+fn emit_html_attrs(out: &mut String, attrs: &[Attribute]) {
1014+ for attr in attrs {
1015+ let key = attr.key.as_str();
1016+ if attr.html && key != "id" && key != "class" {
1017+ out.push(' ');
1018+ out.push_str(key);
1019+ out.push_str("=\"");
1020+ out.push_str(&html_escape(strip_string_quotes(
1021+ attr.value.as_deref().unwrap_or(""),
1022+ )));
1023+ out.push('"');
1024+ } else if !attr.html
1025+ && attr.value.is_none()
1026+ && crate::vocab::BOOLEAN_HTML_ATTRS.contains(&key)
1027+ {
1028+ out.push(' ');
1029+ out.push_str(key);
11661030 }
1167− _ => None,
11681031 }
11691032}
11701033
1171−/// Write the children of an element (or of a `@fragment`, which has no
1172−/// element of its own) laid out as `layout` (`None`: the top of the page).
1173−/// The first line of an element's text is its first child.
1174−fn generate_children(
1175− children: &[Node],
1176− layout: Option<Layout>,
1177− out: &mut String,
1178− styles: &mut StyleCollector,
1179− ctx: &mut GenContext,
1180−) {
1181− generate_run(children, layout, &mut None, out, styles, ctx);
1182−}
1183−
1184−/// [`generate_children`], with `previous` saying whether what was written
1185−/// last was a line of text (`None`: nothing yet). A `@fragment`'s children
1186−/// are written as if they stood in its place, so its lines are separated
1187−/// from the lines around it like any other lines.
1188−fn generate_run(
1189− children: &[Node],
1190− layout: Option<Layout>,
1191− previous: &mut Option<bool>,
1192− out: &mut String,
1193− styles: &mut StyleCollector,
1194− ctx: &mut GenContext,
1195−) {
1196− for child in children {
1197− if let Node::Element(elem) = child
1198− && elem.kind == ElementKind::Fragment
1199− {
1200− generate_run(&elem.children, layout, previous, out, styles, ctx);
1201− continue;
1202− }
1203− let start = out.len();
1204− if let Some(previous_is_text) = *previous
1205− && let Some(sep) = separator(layout, previous_is_text, child)
1206− {
1207− out.push(sep);
1208− }
1209− let body = out.len();
1210− generate_node(child, layout, out, styles, ctx);
1211− // A child that writes nothing (an empty `@fragment`) takes no
1212− // separator either, so text never gets two spaces in a row
1213− if out.len() == body {
1214− out.truncate(start);
1215− continue;
1216− }
1217− *previous = Some(matches!(child, Node::Text(_)));
1034+/// If the value is wrapped in a single pair of matching quotes (e.g.
1035+/// `"Avatar"`), return the inner content. Quotes act as source-level
1036+/// delimiters in the `.hl` syntax and shouldn't leak into HTML attribute
1037+/// values. Multi-quoted values like `"h h" "s m"` are left unchanged —
1038+/// those are real string tokens (used e.g. by CSS `grid-template-areas`).
1039+fn strip_string_quotes(val: &str) -> &str {
1040+ let bytes = val.as_bytes();
1041+ if bytes.len() < 2 {
1042+ return val;
12181043 }
1219−}
1220−
1221−/// Emit the element's leading argument as its attribute (`@iframe URL` →
1222−/// `src="URL"`, `@form /submit` → `action="/submit"`, `@link /a` →
1223−/// `href="/a"`), first, before the class. `@image [inline] photo.png` puts
1224−/// the file itself into the page.
1225−fn emit_argument_attr(out: &mut String, elem: &Element, in_picture: bool) {
1226− let (Some(attr), Some(value)) = (elem.kind.leading_attribute(in_picture), &elem.argument)
1227− else {
1228− return;
1229− };
1230− // `@image [inline]`'s file is already a `data:` URI (see the parser)
1231− let value = html_escape(value);
1232− out.push(' ');
1233− out.push_str(attr);
1234− out.push_str("=\"");
1235− out.push_str(&value);
1236− out.push('"');
1237−}
1238−
1239−/// A file's bytes as a `data:` URI, its type from its extension.
1240−pub(crate) fn data_uri(path: &str, data: &[u8]) -> String {
1241− let mime = match path
1242− .rsplit('.')
1243− .next()
1244− .map(str::to_ascii_lowercase)
1245− .as_deref()
1246− {
1247− Some("png") => "image/png",
1248− Some("jpg" | "jpeg") => "image/jpeg",
1249− Some("gif") => "image/gif",
1250− Some("webp") => "image/webp",
1251− Some("avif") => "image/avif",
1252− Some("svg") => "image/svg+xml",
1253− Some("ico") => "image/x-icon",
1254− _ => "application/octet-stream",
1255− };
1256− format!("data:{};base64,{}", mime, base64_encode(data))
1257−}
1258−
1259−/// Emit HTML attributes: `key=value` ones (except `id` / `class`, which
1260−/// are emitted with the generated class) and flags like `required`.
1261−fn emit_html_attrs(out: &mut String, attrs: &[Attribute]) {
1262− for attr in html_attrs(attrs) {
1263− let key = attr.key.as_str();
1264− if key != "id" && key != "class" {
1265− push_html_attr(out, attr);
1044+ let first = bytes[0];
1045+ let last = bytes[bytes.len() - 1];
1046+ if (first == b'"' && last == b'"') || (first == b'\'' && last == b'\'') {
1047+ let inner = &val[1..val.len() - 1];
1048+ if !inner.as_bytes().contains(&first) {
1049+ return inner;
12661050 }
12671051 }
1268−}
1269−
1270−/// The HTML attributes of `attrs`, `key=value` ones and flags, each name
1271−/// once: the later one wins, as a style does. (Of two attributes with one
1272−/// name, the browser keeps the first, so a bundle's attribute or a
1273−/// function's own would win over one written after it.)
1274−fn html_attrs(attrs: &[Attribute]) -> impl Iterator<Item = &Attribute> {
1275− let is_html =
1276− |a: &Attribute| a.html || (a.value.is_none() && crate::vocab::is_html_flag(&a.key));
1277− attrs.iter().enumerate().filter_map(move |(i, attr)| {
1278− let later = attrs[i + 1..]
1279− .iter()
1280− .any(|other| is_html(other) && other.key == attr.key);
1281− (is_html(attr) && !later).then_some(attr)
1282− })
1283−}
1284−
1285−/// ` key="value"`, or ` key` for a flag.
1286−fn push_html_attr(out: &mut String, attr: &Attribute) {
1287− out.push(' ');
1288− out.push_str(&attr.key);
1289− if attr.html {
1290− out.push_str("=\"");
1291− // Quoted text has already lost its quotes (see parser.rs)
1292− out.push_str(&html_escape(attr.value.as_deref().unwrap_or("")));
1293− out.push('"');
1294− }
1052+ val
12951053}
12961054
12971055// True if any direct child is `@in-front` or `@behind`. Such children render
12981056// as absolutely positioned overlays, so the parent automatically becomes a
12991057// positioning context (position:relative + isolation:isolate).
13001058fn has_overlay_children(elem: &Element) -> bool {
1301− holds_overlays(&elem.children)
1302−}
1303−
1304−fn holds_overlays(children: &[Node]) -> bool {
1305− children.iter().any(|child| {
1059+ elem.children.iter().any(|child| {
13061060 matches!(
13071061 child,
13081062 Node::Element(e) if e.kind.is_tag("in-front") || e.kind.is_tag("behind")
@@ -1312,32 +1066,48 @@ fn holds_overlays(children: &[Node]) -> bool {
13121066
13131067fn generate_element(
13141068 elem: &Element,
1315− parent: Option<Layout>,
1069+ parent_kind: Option<&ElementKind>,
13161070 out: &mut String,
13171071 styles: &mut StyleCollector,
13181072 ctx: &mut GenContext,
13191073) {
13201074 // Self-closing elements
1321− if elem.kind.layout() == Layout::Void {
1322− generate_self_closing(elem, parent, out, styles, ctx);
1075+ if elem.kind == ElementKind::Image || elem.kind.spec().is_some_and(|spec| spec.void) {
1076+ generate_self_closing(elem, parent_kind, out, styles, ctx);
13231077 return;
13241078 }
1325− // A verbatim element (@script) writes its body as it is, with no HTML
1326− // escaping; it isn't shown, so it has no class (its styles are an error)
1327− if elem.kind.is_verbatim() {
1328− let tag = elem.kind.spec().map_or("script", |spec| spec.html);
1079+ // @script renders as <script> with raw body content (no HTML escaping)
1080+ if elem.kind == ElementKind::Script {
13291081 out.push_str(&ctx.indent());
1330− out.push('<');
1331− out.push_str(tag);
1332− emit_argument_attr(out, elem, false);
1333− let (id, class) = extract_id_class(&elem.attrs);
1334− for (key, value) in [("id", id), ("class", class)] {
1335− if let Some(value) = value {
1336− out.push_str(&format!(" {}=\"{}\"", key, html_escape(&value)));
1082+ out.push_str("<script");
1083+ // Pass through src, type, defer, async, etc.
1084+ for attr in &elem.attrs {
1085+ let key = attr.key.as_str();
1086+ if matches!(
1087+ key,
1088+ "src"
1089+ | "type"
1090+ | "defer"
1091+ | "async"
1092+ | "crossorigin"
1093+ | "integrity"
1094+ | "nomodule"
1095+ | "id"
1096+ ) {
1097+ if let Some(val) = &attr.value {
1098+ out.push(' ');
1099+ out.push_str(key);
1100+ out.push_str("=\"");
1101+ out.push_str(&html_escape(val));
1102+ out.push('"');
1103+ } else {
1104+ out.push(' ');
1105+ out.push_str(key);
1106+ }
13371107 }
13381108 }
1339− emit_html_attrs(out, &elem.attrs);
13401109 out.push('>');
1110+ // Children are raw JS code, not HTML
13411111 for child in &elem.children {
13421112 match child {
13431113 Node::Text(segments) => {
@@ -1351,9 +1121,7 @@ fn generate_element(
13511121 _ => {}
13521122 }
13531123 }
1354− out.push_str("</");
1355− out.push_str(tag);
1356− out.push('>');
1124+ out.push_str("</script>");
13571125 out.push_str(ctx.nl());
13581126 return;
13591127 }
@@ -1364,13 +1132,13 @@ fn generate_element(
13641132 return;
13651133 }
13661134 if elem.kind == ElementKind::Fragment {
1367− // Render children without a wrapper element, as if they were
1368− // written where the fragment is
1369− generate_children(&elem.children, parent, out, styles, ctx);
1135+ // Render children without a wrapper element
1136+ for child in &elem.children {
1137+ generate_node(child, parent_kind, out, styles, ctx);
1138+ }
13701139 return;
13711140 }
13721141
1373− let mut own = Flow::of(elem);
13741142 let tag = match &elem.kind {
13751143 ElementKind::Row | ElementKind::El => "div",
13761144 ElementKind::Text => "span",
@@ -1379,11 +1147,6 @@ fn generate_element(
13791147 ElementKind::Tag(spec) => spec.html,
13801148 _ => "",
13811149 };
1382− // Inside text, htmlang's own `<div>` is a `<span>`, which text can
1383− // hold (directly in text, a row, column or grid is also laid out
1384− // inline: see `Site::inline`)
1385− let in_text = ctx.in_text || parent == Some(Layout::Text);
1386− let tag = if in_text && tag == "div" { "span" } else { tag };
13871150 let kind_label = elem.kind.name();
13881151
13891152 // Track interactive elements for focus-visible CSS
@@ -1394,8 +1157,14 @@ fn generate_element(
13941157 }
13951158
13961159 // Compute CSS for each state and get a class name
1397− let gen_class = element_class(elem, &Site::new(elem, parent, &ctx.flow), styles);
1398− own.class = gen_class.clone();
1160+ let overlay_children = has_overlay_children(elem);
1161+ let gen_class = compute_class(
1162+ &elem.attrs,
1163+ &elem.kind,
1164+ parent_kind,
1165+ styles,
1166+ overlay_children,
1167+ );
13991168 let (id, user_class) = extract_id_class(&elem.attrs);
14001169
14011170 if ctx.dev && elem.line_num > 0 {
@@ -1409,7 +1178,32 @@ fn generate_element(
14091178 out.push('<');
14101179 out.push_str(tag);
14111180
1412− emit_argument_attr(out, elem, ctx.in_picture);
1181+ // @main gets id="hl-main" for skip-to-content link (unless user set an id)
1182+ if elem.kind.is_tag("main") && id.is_none() {
1183+ out.push_str(" id=\"hl-main\"");
1184+ }
1185+
1186+ if elem.kind == ElementKind::Link
1187+ && let Some(url) = &elem.argument
1188+ {
1189+ out.push_str(" href=\"");
1190+ out.push_str(&html_escape(url));
1191+ out.push('"');
1192+ // Auto rel="noopener noreferrer" and target="_blank" for external links
1193+ let is_external = url.starts_with("http://") || url.starts_with("https://");
1194+ if is_external {
1195+ let has_rel = elem.attrs.iter().any(|a| a.key == "rel");
1196+ let has_target = elem.attrs.iter().any(|a| a.key == "target");
1197+ if !has_rel {
1198+ out.push_str(" rel=\"noopener noreferrer\"");
1199+ }
1200+ if !has_target {
1201+ out.push_str(" target=\"_blank\"");
1202+ }
1203+ }
1204+ }
1205+
1206+ emit_argument_attr(out, elem);
14131207
14141208 emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
14151209
@@ -1430,27 +1224,28 @@ fn generate_element(
14301224 }
14311225
14321226 out.push('>');
1433− // In `<pre>` and `<textarea>` every space and line break shows, so
1434− // readable (dev) output adds none there: a code sample's lines stay
1435− // exactly as written
1436− let outer_dev = ctx.dev;
1437− ctx.dev &= !matches!(tag, "pre" | "textarea");
14381227 out.push_str(ctx.nl());
14391228
1440− let layout = elem.kind.layout();
1229+ // Inline text argument
1230+ if renders_argument_as_text(&elem.kind)
1231+ && let Some(text) = &elem.argument
1232+ {
1233+ out.push_str(&html_escape(text));
1234+ }
1235+
1236+ // Children
14411237 ctx.depth += 1;
1442− let outer_in_text = ctx.in_text;
1443− ctx.in_text = in_text || layout == Layout::Text;
1444− let outer_flow = std::mem::replace(&mut ctx.flow, own);
1445− let outer_picture = std::mem::replace(&mut ctx.in_picture, elem.kind.is_tag("picture"));
1446− generate_children(&elem.children, Some(layout), out, styles, ctx);
1447− ctx.in_picture = outer_picture;
1448− ctx.flow = outer_flow;
1449− ctx.in_text = outer_in_text;
1238+ let is_paragraph = elem.kind == ElementKind::Paragraph
1239+ || elem.kind.spec().is_some_and(|spec| spec.inline);
1240+ for (i, child) in elem.children.iter().enumerate() {
1241+ generate_node(child, Some(&elem.kind), out, styles, ctx);
1242+ if is_paragraph && i < elem.children.len() - 1 {
1243+ out.push(' ');
1244+ }
1245+ }
14501246 ctx.depth -= 1;
14511247
14521248 out.push_str(&ctx.indent());
1453− ctx.dev = outer_dev;
14541249 out.push_str("</");
14551250 out.push_str(tag);
14561251 out.push('>');
@@ -1459,12 +1254,12 @@ fn generate_element(
14591254
14601255fn generate_self_closing(
14611256 elem: &Element,
1462− parent: Option<Layout>,
1257+ parent_kind: Option<&ElementKind>,
14631258 out: &mut String,
14641259 styles: &mut StyleCollector,
14651260 ctx: &mut GenContext,
14661261) {
1467− let gen_class = element_class(elem, &Site::new(elem, parent, &ctx.flow), styles);
1262+ let gen_class = compute_class(&elem.attrs, &elem.kind, parent_kind, styles, false);
14681263 let (id, user_class) = extract_id_class(&elem.attrs);
14691264
14701265 let (tag, kind_label) = match &elem.kind {
@@ -1483,7 +1278,44 @@ fn generate_self_closing(
14831278 out.push_str(&ctx.indent());
14841279 out.push('<');
14851280 out.push_str(tag);
1486− emit_argument_attr(out, elem, ctx.in_picture);
1281+ emit_argument_attr(out, elem);
1282+
1283+ // Image src (with optional non-SVG base64 inlining)
1284+ if elem.kind == ElementKind::Image {
1285+ let src = elem.argument.as_deref().unwrap_or("");
1286+ let is_inline = elem.attrs.iter().any(|a| a.key == "inline");
1287+ if is_inline && !src.is_empty() && !src.ends_with(".svg") {
1288+ let mime = if src.ends_with(".png") {
1289+ "image/png"
1290+ } else if src.ends_with(".jpg") || src.ends_with(".jpeg") {
1291+ "image/jpeg"
1292+ } else if src.ends_with(".gif") {
1293+ "image/gif"
1294+ } else if src.ends_with(".webp") {
1295+ "image/webp"
1296+ } else if src.ends_with(".avif") {
1297+ "image/avif"
1298+ } else {
1299+ "application/octet-stream"
1300+ };
1301+ if let Ok(data) = std::fs::read(src) {
1302+ let b64 = base64_encode(&data);
1303+ out.push_str(" src=\"data:");
1304+ out.push_str(mime);
1305+ out.push_str(";base64,");
1306+ out.push_str(&b64);
1307+ out.push('"');
1308+ } else {
1309+ out.push_str(" src=\"");
1310+ out.push_str(&html_escape(src));
1311+ out.push('"');
1312+ }
1313+ } else {
1314+ out.push_str(" src=\"");
1315+ out.push_str(&html_escape(src));
1316+ out.push('"');
1317+ }
1318+ }
14871319
14881320 emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
14891321
@@ -1503,6 +1335,80 @@ fn generate_self_closing(
15031335 ));
15041336 }
15051337
1338+ // Image optimization: auto-add loading="lazy" and decoding="async"
1339+ if elem.kind == ElementKind::Image {
1340+ // Responsive srcset: @image photo.jpg [responsive 400 800 1200]
1341+ let responsive_attr = elem.attrs.iter().find(|a| a.key == "responsive");
1342+ if let Some(resp) = responsive_attr
1343+ && let Some(ref sizes_str) = resp.value
1344+ {
1345+ let widths: Vec<&str> = sizes_str.split_whitespace().collect();
1346+ if !widths.is_empty() {
1347+ let src = elem.argument.as_deref().unwrap_or("");
1348+ if !src.is_empty() {
1349+ // Generate srcset with width descriptors
1350+ // Convention: file-{width}.ext (e.g., photo-400.jpg)
1351+ let dot_pos = src.rfind('.').unwrap_or(src.len());
1352+ let base = &src[..dot_pos];
1353+ let ext = &src[dot_pos..];
1354+ let mut srcset_parts = Vec::new();
1355+ for w in &widths {
1356+ srcset_parts.push(format!("{}-{}{} {}w", base, w, ext, w));
1357+ }
1358+ out.push_str(" srcset=\"");
1359+ out.push_str(&srcset_parts.join(", "));
1360+ out.push('"');
1361+ // Generate sizes attribute
1362+ let max_width = widths.last().unwrap_or(&"100vw");
1363+ out.push_str(&format!(
1364+ " sizes=\"(max-width: {}px) 100vw, {}px\"",
1365+ max_width, max_width
1366+ ));
1367+ }
1368+ }
1369+ }
1370+
1371+ // Auto image dimensions: read local image file to inject width/height + aspect-ratio
1372+ let has_width = elem.attrs.iter().any(|a| a.key == "width");
1373+ let has_height = elem.attrs.iter().any(|a| a.key == "height");
1374+ if (!has_width || !has_height)
1375+ && let Some(ref src) = elem.argument
1376+ && !src.starts_with("http://")
1377+ && !src.starts_with("https://")
1378+ && !src.starts_with("data:")
1379+ && let Some((w, h)) = read_image_dimensions(src)
1380+ {
1381+ // Intrinsic size attributes only when neither dimension is set in
1382+ // CSS; with one CSS dimension, a leftover intrinsic attribute for
1383+ // the other would distort the image (200 wide but 1000 tall).
1384+ if !has_width && !has_height {
1385+ out.push_str(&format!(" width=\"{}\" height=\"{}\"", w, h));
1386+ }
1387+ // Auto aspect-ratio to prevent CLS
1388+ if !elem.attrs.iter().any(|a| a.key == "aspect-ratio") {
1389+ out.push_str(&format!(" style=\"aspect-ratio:{}/{}\"", w, h));
1390+ }
1391+ }
1392+
1393+ // Smart image loading: first 3 images get fetchpriority="high" (above the fold),
1394+ // subsequent images get loading="lazy" + decoding="async"
1395+ ctx.image_count += 1;
1396+ if ctx.image_count <= 3 {
1397+ // Above-the-fold: eager loading with high priority
1398+ if !elem.attrs.iter().any(|a| a.key == "fetchpriority") {
1399+ out.push_str(" fetchpriority=\"high\"");
1400+ }
1401+ } else {
1402+ // Below-the-fold: lazy loading
1403+ if !elem.attrs.iter().any(|a| a.key == "loading") {
1404+ out.push_str(" loading=\"lazy\"");
1405+ }
1406+ if !elem.attrs.iter().any(|a| a.key == "decoding") {
1407+ out.push_str(" decoding=\"async\"");
1408+ }
1409+ }
1410+ }
1411+
15061412 out.push('>');
15071413 out.push_str(ctx.nl());
15081414}
@@ -1518,10 +1424,7 @@ fn generate_text_segments(
15181424 TextSegment::Plain(text) => out.push_str(&html_escape(text)),
15191425 TextSegment::Inline(elem) => {
15201426 let mut buf = String::new();
1521− // An element inside a line of text is in text
1522− let outer_flow = std::mem::take(&mut ctx.flow);
1523− generate_element(elem, Some(Layout::Text), &mut buf, styles, ctx);
1524− ctx.flow = outer_flow;
1427+ generate_element(elem, None, &mut buf, styles, ctx);
15251428 out.push_str(buf.trim_end());
15261429 }
15271430 }
@@ -1534,97 +1437,135 @@ fn generate_text_segments(
15341437
15351438fn compute_class(
15361439 attrs: &[Attribute],
1537− site: &Site,
1440+ kind: &ElementKind,
1441+ parent_kind: Option<&ElementKind>,
15381442 styles: &mut StyleCollector,
1539− distinct: String,
1443+ has_overlay_children: bool,
15401444) -> Option<String> {
1541− // Every condition an attribute is under, and none
1542− let mut conditions = vec![Condition::default()];
1543− for attr in attrs.iter().filter(|a| !a.html) {
1544− let (condition, _) = Condition::of(&attr.key);
1545− if !conditions.contains(&condition) {
1546− conditions.push(condition);
1445+ let base = attrs_to_css(attrs, "", kind, parent_kind, has_overlay_children);
1446+
1447+ // Collect pseudo-state overrides
1448+ let mut pseudo = Vec::new();
1449+ for &(prefix, selector) in crate::vocab::PSEUDO_PREFIXES {
1450+ let css = attrs_to_css(attrs, prefix, kind, parent_kind, has_overlay_children);
1451+ if !css.is_empty() {
1452+ pseudo.push((selector.to_string(), css));
1453+ }
1454+ }
1455+
1456+ // Collect nth:EXPR: dynamic pseudo selectors
1457+ let mut nth_prefixes: Vec<String> = Vec::new();
1458+ for attr in attrs {
1459+ if attr.key.starts_with("nth:") {
1460+ let rest = &attr.key[4..];
1461+ if let Some(colon_pos) = rest.find(':') {
1462+ let prefix = format!("nth:{}:", &rest[..colon_pos]);
1463+ if !nth_prefixes.contains(&prefix) {
1464+ nth_prefixes.push(prefix);
1465+ }
1466+ }
1467+ }
1468+ }
1469+ for prefix in &nth_prefixes {
1470+ let expr = &prefix[4..prefix.len() - 1];
1471+ let selector = format!(":nth-child({})", expr);
1472+ let css = attrs_to_css(attrs, prefix, kind, parent_kind, has_overlay_children);
1473+ if !css.is_empty() {
1474+ pseudo.push((selector, css));
15471475 }
15481476 }
1549− // Dedupe: if a property is declared twice within a single rule, keep only
1550− // the last occurrence.
1551− let rules: Vec<(Condition, String)> = conditions
1552− .into_iter()
1553− .map(|condition| {
1554− let css = dedupe_declarations(&attrs_to_css(attrs, &condition, site));
1555− (condition, css)
1556− })
1557− .collect();
1558− // The kind's defaults, less what the element sets itself (a user
1559− // `[list-style disc]` wins over the default `list-style:none` anyway,
1560− // so there is no need to ship both)
1561− let own = rules
1562− .iter()
1563− .find(|(condition, _)| *condition == Condition::default())
1564− .map_or("", |(_, css)| css.as_str());
1565− let own: Vec<&str> = declarations(own).map(|(name, _)| name).collect();
1566− let defaults: String = declarations(&dedupe_declarations(&default_css(site)))
1567− .filter(|(name, _)| !own.contains(name))
1568− .map(|(_, declaration)| declaration)
1569− .collect();
1570− styles.get_class(defaults, rules, distinct)
1571−}
15721477
1573−/// The defaults of an element's kind where it is: an overlay's positioning
1574−/// context, its layout, and its kind's own CSS (a heading's `margin:0`).
1575−fn default_css(site: &Site) -> String {
1576− let mut css = String::new();
1577− // Elements with @in-front / @behind children become positioning
1578− // contexts
1579− if site.has_overlay_children {
1580− css.push_str("position:relative;isolation:isolate;");
1478+ // Collect has(...): dynamic pseudo selectors
1479+ let mut has_prefixes: Vec<String> = Vec::new();
1480+ for attr in attrs {
1481+ if attr.key.starts_with("has(")
1482+ && let Some(close) = attr.key.find("):")
1483+ {
1484+ let prefix = format!("{}:", &attr.key[..close + 1]);
1485+ if !has_prefixes.contains(&prefix) {
1486+ has_prefixes.push(prefix);
1487+ }
1488+ }
15811489 }
1582− if !site.root {
1583− css.push_str(layout_css(site.kind.layout(), site.inline));
1490+ for prefix in &has_prefixes {
1491+ let inner = &prefix[4..prefix.len() - 2]; // extract selector from has(selector):
1492+ let selector = format!(":has({})", inner);
1493+ let css = attrs_to_css(attrs, prefix, kind, parent_kind, has_overlay_children);
1494+ if !css.is_empty() {
1495+ pseudo.push((selector, css));
1496+ }
15841497 }
1585− css.push_str(site.kind.css());
1586− css
1587−}
15881498
1589−/// The declarations of a rule body, as (property, `property:value;`), for
1590−/// bodies htmlang wrote: every declaration ends in `;`, and a `;` inside
1591−/// quotes or parentheses doesn't end one.
1592−fn declarations(css: &str) -> impl Iterator<Item = (&str, &str)> {
1593− let mut rest = css;
1594− std::iter::from_fn(move || {
1595− if rest.is_empty() {
1596− return None;
1499+ // Collect responsive overrides
1500+ let mut responsive = Vec::new();
1501+ for &(bp_name, _) in BREAKPOINTS {
1502+ let prefix = format!("{}:", bp_name);
1503+ let css = attrs_to_css(attrs, &prefix, kind, parent_kind, has_overlay_children);
1504+ if !css.is_empty() {
1505+ responsive.push((bp_name.to_string(), css));
15971506 }
1598− let (mut depth, mut quote, mut escaped) = (0i32, None, false);
1599− let mut end = rest.len();
1600− for (i, c) in rest.char_indices() {
1601− match c {
1602− _ if escaped => escaped = false,
1603− '\\' => escaped = true,
1604− c if Some(c) == quote => quote = None,
1605− _ if quote.is_some() => {}
1606− '"' | '\'' => quote = Some(c),
1607− '(' => depth += 1,
1608− ')' => depth -= 1,
1609− ';' if depth == 0 => {
1610− end = i + 1;
1611− break;
1612− }
1613− _ => {}
1614− }
1507+ }
1508+
1509+ // Collect container query overrides
1510+ let mut container = Vec::new();
1511+ for &(bp_name, _) in BREAKPOINTS {
1512+ let prefix = format!("cq-{}:", bp_name);
1513+ let css = attrs_to_css(attrs, &prefix, kind, parent_kind, has_overlay_children);
1514+ if !css.is_empty() {
1515+ container.push((bp_name.to_string(), css));
16151516 }
1616− let (declaration, after) = rest.split_at(end);
1617− rest = after;
1618− let name = declaration.split(':').next().unwrap_or("").trim();
1619− Some((name, declaration))
1620− })
1517+ }
1518+
1519+ let dark = attrs_to_css(attrs, "dark:", kind, parent_kind, has_overlay_children);
1520+ let print = attrs_to_css(attrs, "print:", kind, parent_kind, has_overlay_children);
1521+ let motion_safe = attrs_to_css(attrs, "motion-safe:", kind, parent_kind, has_overlay_children);
1522+ let motion_reduce =
1523+ attrs_to_css(attrs, "motion-reduce:", kind, parent_kind, has_overlay_children);
1524+ let landscape = attrs_to_css(attrs, "landscape:", kind, parent_kind, has_overlay_children);
1525+ let portrait = attrs_to_css(attrs, "portrait:", kind, parent_kind, has_overlay_children);
1526+
1527+ // Dedupe: if a property is declared twice within a single rule, keep only
1528+ // the last occurrence (element-kind defaults are written before
1529+ // user attributes, so a user [list-style disc] correctly overrides the
1530+ // default list-style:none, and we don't need to ship both).
1531+ let base = dedupe_declarations(&base);
1532+ let pseudo: Vec<(String, String)> = pseudo
1533+ .into_iter()
1534+ .map(|(sel, css)| (sel, dedupe_declarations(&css)))
1535+ .collect();
1536+ let responsive: Vec<(String, String)> = responsive
1537+ .into_iter()
1538+ .map(|(bp, css)| (bp, dedupe_declarations(&css)))
1539+ .collect();
1540+ let dark = dedupe_declarations(&dark);
1541+ let print = dedupe_declarations(&print);
1542+ let motion_safe = dedupe_declarations(&motion_safe);
1543+ let motion_reduce = dedupe_declarations(&motion_reduce);
1544+ let landscape = dedupe_declarations(&landscape);
1545+ let portrait = dedupe_declarations(&portrait);
1546+ let container: Vec<(String, String)> = container
1547+ .into_iter()
1548+ .map(|(bp, css)| (bp, dedupe_declarations(&css)))
1549+ .collect();
1550+
1551+ styles.get_class(
1552+ base,
1553+ pseudo,
1554+ responsive,
1555+ dark,
1556+ print,
1557+ motion_safe,
1558+ motion_reduce,
1559+ landscape,
1560+ portrait,
1561+ container,
1562+ )
16211563}
16221564
16231565/// Dedupe CSS declarations within a single rule body: for any property
16241566/// declared more than once, keep only the last occurrence. Unparseable
1625−/// segments (no `:`) are preserved as-is. Semicolons inside parentheses or
1626−/// quoted strings are treated as part of a value, not as declaration
1627−/// separators.
1567+/// segments (no `:`) are preserved as-is. Semicolons inside parentheses are
1568+/// treated as part of a value, not as declaration separators.
16281569fn dedupe_declarations(css: &str) -> String {
16291570 if css.is_empty() {
16301571 return String::new();
@@ -1639,26 +1580,8 @@ fn dedupe_declarations(css: &str) -> String {
16391580 let mut decls: Vec<(Option<String>, String)> = Vec::new();
16401581 let mut current = String::new();
16411582 let mut depth: i32 = 0;
1642− // A quoted string's `;` (`content "a;b"`) is text; a backslash escapes
1643− // the character after it
1644− let mut quote: Option<char> = None;
1645− let mut escaped = false;
16461583 for ch in css.chars() {
1647− if escaped {
1648− escaped = false;
1649− current.push(ch);
1650− } else if ch == '\\' {
1651− escaped = true;
1652− current.push(ch);
1653− } else if let Some(q) = quote {
1654− if ch == q {
1655− quote = None;
1656− }
1657− current.push(ch);
1658− } else if ch == '"' || ch == '\'' {
1659− quote = Some(ch);
1660− current.push(ch);
1661− } else if ch == '(' {
1584+ if ch == '(' {
16621585 depth += 1;
16631586 current.push(ch);
16641587 } else if ch == ')' {
@@ -1740,553 +1663,487 @@ fn emit_class_attr(out: &mut String, gen_class: Option<&str>, user_class: Option
17401663// Attribute → CSS mapping
17411664// ---------------------------------------------------------------------------
17421665
1743−/// Where an element is written, which its CSS depends on.
1744−struct Site<'a> {
1745− kind: &'a ElementKind,
1746− /// How its parent lays out its children: its `width fill`, `height
1747− /// fill` and `shrink` compile against it.
1748− parent: &'a Flow,
1749− /// It has `@in-front` / `@behind` children.
1750− has_overlay_children: bool,
1751− /// A row, column or grid inside text, laid out inline.
1752− inline: bool,
1753− /// The page's `<body>`, which the reset already makes a column.
1754− root: bool,
1755−}
1666+/// (htmlang prefix, CSS selector suffix)
1667+/// `display:flex;flex-direction:column;` — base layout for `@el` and every
1668+/// semantic wrapper that behaves like a column.
1669+const FLEX_COLUMN: &str = "display:flex;flex-direction:column;";
17561670
1757−impl Site<'_> {
1758− /// Where an element in a parent with the layout `layout` and the flow
1759− /// `parent` is.
1760− fn new<'a>(elem: &'a Element, layout: Option<Layout>, parent: &'a Flow) -> Site<'a> {
1761− Site {
1762− kind: &elem.kind,
1763− parent,
1764− has_overlay_children: has_overlay_children(elem),
1765− inline: layout == Some(Layout::Text) && elem.kind.layout().is_container(),
1766− root: false,
1767− }
1768− }
1769−}
17701671
1771−// ---------------------------------------------------------------------------
1772−// Direction: what a child's `fill` and `shrink` compile against
1773−// ---------------------------------------------------------------------------
17741672
1775−/// The way a flex row or column lays out its children.
1776−#[derive(Clone, Copy, PartialEq, Eq, Debug)]
1777−enum Axis {
1778− Row,
1779− Column,
1780−}
1673+fn attrs_to_css(
1674+ attrs: &[Attribute],
1675+ state_prefix: &str,
1676+ kind: &ElementKind,
1677+ parent_kind: Option<&ElementKind>,
1678+ has_overlay_children: bool,
1679+) -> String {
1680+ let mut css = String::new();
17811681
1782−impl Axis {
1783− /// The direction a `flex-direction` or `flex-flow` value sets, if it
1784− /// names one (not `var(--dir)`, which only the browser knows).
1785− fn of_value(value: &str) -> Option<Axis> {
1786− value.split_whitespace().find_map(|word| match word {
1787− "row" | "row-reverse" => Some(Axis::Row),
1788− "column" | "column-reverse" => Some(Axis::Column),
1789− _ => None,
1790− })
1682+ // Base element styles only for the default (non-state) pass
1683+ if state_prefix.is_empty() {
1684+ // Elements with @in-front / @behind children become positioning
1685+ // contexts. Pushed before user attrs so an explicit `position` wins
1686+ // via dedupe (only the last declaration of a property is kept).
1687+ if has_overlay_children {
1688+ css.push_str("position:relative;isolation:isolate;");
1689+ }
1690+ match kind {
1691+ ElementKind::Row => css.push_str("display:flex;flex-direction:row;"),
1692+ ElementKind::El => css.push_str(FLEX_COLUMN),
1693+ ElementKind::Paragraph => css.push_str("margin:0;"),
1694+ ElementKind::Tag(spec) => css.push_str(spec.css),
1695+ _ => {}
1696+ }
17911697 }
1792−}
17931698
1794−/// How an element lays out its children, as its CSS sets it: the
1795−/// direction its children's `width`/`height` `fill` and `shrink` compile
1796−/// against. That is the direction of `@row` or of a column, or the one its
1797−/// own `flex-direction` (or `flex-flow`) sets, with or without media or
1798−/// container prefixes. Like elm-ui's `.r > .wf`, the rules for a direction
1799−/// set under a prefix are keyed on the element's class: `@media (...) {
1800−/// :where(.a)>.b {...} }`.
1801−#[derive(Clone, Default)]
1802−struct Flow {
1803− /// Without a prefix; `None` when the element isn't a flex row or column
1804− /// (a grid, text, HTML's own layout, the top of the page)
1805− base: Option<Axis>,
1806− /// The direction under each chain of at-rule prefixes that sets one, in
1807− /// the order their blocks are written
1808− changes: Vec<(Vec<usize>, Axis)>,
1809− /// The element's generated class, which the rules for the changes are
1810− /// keyed on
1811− class: Option<String>,
1812−}
1813−
1814−impl Flow {
1815− fn of(elem: &Element) -> Flow {
1816− let mut base = match elem.kind.layout() {
1817− Layout::Row => Axis::Row,
1818− Layout::Column => Axis::Column,
1819− _ => return Flow::default(),
1820− };
1821− let mut changes: Vec<(Vec<usize>, Axis)> = Vec::new();
1822− for attr in elem.attrs.iter().filter(|a| !a.html) {
1823− let (condition, name) = Condition::of(&attr.key);
1824− if !matches!(name, "flex-direction" | "flex-flow") || !condition.selector.is_empty() {
1699+ for attr in attrs {
1700+ if attr.html {
1701+ continue;
1702+ }
1703+ // Determine the effective key for this pass
1704+ let effective_key = if state_prefix.is_empty() {
1705+ if crate::vocab::is_prefixed(&attr.key) {
18251706 continue;
18261707 }
1827− let Some(axis) = attr.value.as_deref().and_then(Axis::of_value) else {
1828− continue;
1829− };
1830− if condition.at.is_empty() {
1831− base = axis;
1832− } else {
1833− // The later one wins, as in the CSS
1834− changes.retain(|(at, _)| *at != condition.at);
1835− changes.push((condition.at, axis));
1708+ attr.key.as_str()
1709+ } else {
1710+ match attr.key.strip_prefix(state_prefix) {
1711+ Some(k) => k,
1712+ None => continue,
18361713 }
1837− }
1838− changes.sort_by_key(|(at, _)| at_order(at));
1839− Flow {
1840− base: Some(base),
1841− changes,
1842− class: None,
1843− }
1844− }
1714+ };
18451715
1846− /// The direction under the at-rules `at`: the latest one set among
1847− /// the conditions that hold there (`md:` holds at `lg:`), else the one
1848− /// without a prefix.
1849− fn at(&self, at: &[usize]) -> Option<Axis> {
1850− let base = self.base?;
1851− let here = Condition::at_only(at);
1852− let changed = self
1853− .changes
1854− .iter()
1855− .rev()
1856− .find(|(chain, _)| Condition::at_only(chain).holds_at(&here))
1857− .map(|&(_, axis)| axis);
1858− Some(changed.unwrap_or(base))
1859− }
1860−}
1716+ let val = attr.value.as_deref();
18611717
1862−/// `width` or `height`.
1863−#[derive(Clone, Copy, PartialEq, Eq)]
1864−enum Dim {
1865− Width,
1866− Height,
1867−}
1718+ match effective_key {
1719+ // Layout
1720+ "spacing" | "gap" => {
1721+ if let Some(v) = val {
1722+ push_css(&mut css, "gap", &css_px(v));
1723+ }
1724+ }
1725+ "padding" => {
1726+ if let Some(v) = val {
1727+ push_css(&mut css, "padding", &css_px_multi(v));
1728+ }
1729+ }
1730+ "padding-top" => {
1731+ if let Some(v) = val {
1732+ push_css(&mut css, "padding-top", &css_px(v));
1733+ }
1734+ }
1735+ "padding-bottom" => {
1736+ if let Some(v) = val {
1737+ push_css(&mut css, "padding-bottom", &css_px(v));
1738+ }
1739+ }
1740+ "padding-left" => {
1741+ if let Some(v) = val {
1742+ push_css(&mut css, "padding-left", &css_px(v));
1743+ }
1744+ }
1745+ "padding-right" => {
1746+ if let Some(v) = val {
1747+ push_css(&mut css, "padding-right", &css_px(v));
1748+ }
1749+ }
18681750
1869−/// What a `width` or `height` says.
1870−#[derive(Clone, Copy, PartialEq, Eq)]
1871−enum Size {
1872− Fill,
1873− Shrink,
1874− /// A size of its own (`width 300`)
1875− Set,
1876−}
1751+ // Sizing
1752+ "width" => {
1753+ if let Some(v) = val {
1754+ match v {
1755+ "fill" => match parent_kind {
1756+ Some(ElementKind::Row) => {
1757+ push_css(&mut css, "flex", "1");
1758+ push_css(&mut css, "min-width", "0");
1759+ }
1760+ _ => push_css(&mut css, "width", "100%"),
1761+ },
1762+ "shrink" => push_css(&mut css, "flex-shrink", "0"),
1763+ _ => push_css(&mut css, "width", &css_px(v)),
1764+ }
1765+ }
1766+ }
1767+ "height" => {
1768+ if let Some(v) = val {
1769+ match v {
1770+ "fill" => match parent_kind {
1771+ Some(parent) if parent.is_column() => {
1772+ push_css(&mut css, "flex", "1");
1773+ push_css(&mut css, "min-height", "0");
1774+ }
1775+ _ => push_css(&mut css, "height", "100%"),
1776+ },
1777+ "shrink" => push_css(&mut css, "flex-shrink", "0"),
1778+ _ => push_css(&mut css, "height", &css_px(v)),
1779+ }
1780+ }
1781+ }
1782+ "min-width" => {
1783+ if let Some(v) = val {
1784+ push_css(&mut css, "min-width", &css_px(v));
1785+ }
1786+ }
1787+ "max-width" => {
1788+ if let Some(v) = val {
1789+ push_css(&mut css, "max-width", &css_px(v));
1790+ }
1791+ }
1792+ "min-height" => {
1793+ if let Some(v) = val {
1794+ push_css(&mut css, "min-height", &css_px(v));
1795+ }
1796+ }
1797+ "max-height" => {
1798+ if let Some(v) = val {
1799+ push_css(&mut css, "max-height", &css_px(v));
1800+ }
1801+ }
18771802
1878−impl Size {
1879− fn of(value: &str) -> Size {
1880− match value.trim() {
1881− "fill" => Size::Fill,
1882− "shrink" => Size::Shrink,
1883− _ => Size::Set,
1884− }
1885− }
1886−}
1803+ // Alignment
1804+ "center-x" => match parent_kind {
1805+ Some(parent) if parent.is_column() => {
1806+ push_css(&mut css, "align-self", "center");
1807+ }
1808+ _ => {
1809+ push_css(&mut css, "margin-left", "auto");
1810+ push_css(&mut css, "margin-right", "auto");
1811+ }
1812+ },
1813+ "center-y" => match parent_kind {
1814+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "center"),
1815+ _ => {
1816+ push_css(&mut css, "margin-top", "auto");
1817+ push_css(&mut css, "margin-bottom", "auto");
1818+ }
1819+ },
1820+ "align-left" => match parent_kind {
1821+ Some(parent) if parent.is_column() => {
1822+ push_css(&mut css, "align-self", "flex-start");
1823+ }
1824+ _ => push_css(&mut css, "margin-right", "auto"),
1825+ },
1826+ "align-right" => match parent_kind {
1827+ Some(parent) if parent.is_column() => {
1828+ push_css(&mut css, "align-self", "flex-end");
1829+ }
1830+ _ => push_css(&mut css, "margin-left", "auto"),
1831+ },
1832+ "align-top" => match parent_kind {
1833+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "flex-start"),
1834+ _ => push_css(&mut css, "margin-bottom", "auto"),
1835+ },
1836+ "align-bottom" => match parent_kind {
1837+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "flex-end"),
1838+ _ => push_css(&mut css, "margin-top", "auto"),
1839+ },
1840+
1841+ // Typography
1842+ "line-height" => {
1843+ if let Some(v) = val {
1844+ push_css(&mut css, "line-height", &css_line_height(v));
1845+ }
1846+ }
1847+ "letter-spacing" => {
1848+ if let Some(v) = val {
1849+ push_css(&mut css, "letter-spacing", &css_px(v));
1850+ }
1851+ }
18871852
1888−/// The declarations `fill` and `shrink` make in a parent laid out along
1889−/// `axis` (`None`: not a flex row or column). Along the parent's direction,
1890−/// `fill` takes the remaining space and `shrink` keeps the content's size;
1891−/// across it (or outside flex), `fill` is the full size and `shrink` fits
1892−/// the content.
1893−fn sizing(dim: Dim, size: Size, axis: Option<Axis>) -> &'static [(&'static str, &'static str)] {
1894− match (dim, size, axis) {
1895− (_, Size::Set, _) => &[],
1896− (Dim::Width, Size::Fill, Some(Axis::Row)) => &[("flex", "1"), ("min-width", "0")],
1897− (Dim::Width, Size::Fill, _) => &[("width", "100%")],
1898− (Dim::Width, Size::Shrink, Some(Axis::Row)) => &[("flex-shrink", "0")],
1899− (Dim::Width, Size::Shrink, _) => &[("width", "fit-content")],
1900− (Dim::Height, Size::Fill, Some(Axis::Column)) => &[("flex", "1"), ("min-height", "0")],
1901− (Dim::Height, Size::Fill, _) => &[("height", "100%")],
1902− (Dim::Height, Size::Shrink, Some(Axis::Column)) => &[("flex-shrink", "0")],
1903− (Dim::Height, Size::Shrink, _) => &[("height", "fit-content")],
1904− }
1905−}
1853+ // Overflow & positioning
1854+ "top" => {
1855+ if let Some(v) = val {
1856+ push_css(&mut css, "top", &css_px(v));
1857+ }
1858+ }
1859+ "right" => {
1860+ if let Some(v) = val {
1861+ push_css(&mut css, "right", &css_px(v));
1862+ }
1863+ }
1864+ "bottom" => {
1865+ if let Some(v) = val {
1866+ push_css(&mut css, "bottom", &css_px(v));
1867+ }
1868+ }
1869+ "left" => {
1870+ if let Some(v) = val {
1871+ push_css(&mut css, "left", &css_px(v));
1872+ }
1873+ }
19061874
1907−/// Every property `fill` and `shrink` of `dim` can set, with its initial
1908−/// value (`flex` covers `flex-shrink`).
1909−fn sizing_properties(dim: Dim) -> [(&'static str, &'static str); 3] {
1910− match dim {
1911− Dim::Width => [
1912− ("flex", "0 1 auto"),
1913− ("min-width", "auto"),
1914− ("width", "auto"),
1915− ],
1916− Dim::Height => [
1917− ("flex", "0 1 auto"),
1918− ("min-height", "auto"),
1919− ("height", "auto"),
1920− ],
1921− }
1922−}
1875+ // Effects
19231876
1924−/// What an element's attributes under some prefixes say about its size.
1925−#[derive(Default)]
1926−struct Sizes {
1927− /// The last `width` and `height`
1928− width: Option<Size>,
1929− height: Option<Size>,
1930− /// A `fill` or `shrink` for the width / height is among them (a later
1931− /// size may replace it)
1932− width_word: bool,
1933− height_word: bool,
1934− /// It writes `flex`, one of its longhands (`flex-grow`, `flex-shrink`,
1935− /// `flex-basis`), `min-width` or `min-height` itself
1936− flex: bool,
1937− flex_grow: bool,
1938− flex_shrink: bool,
1939− flex_basis: bool,
1940− min_width: bool,
1941− min_height: bool,
1942−}
1877+ // Flow
1878+ "wrap" => push_css(&mut css, "flex-wrap", "wrap"),
19431879
1944−impl Sizes {
1945− /// Read the attributes under the conditions that hold wherever `at`
1946− /// does, a later condition over an earlier one.
1947− fn of(attrs: &[Attribute], at: &Condition) -> Sizes {
1948− let mut sizes = Sizes::default();
1949− let mut read: Vec<(Condition, &str, &str)> = Vec::new();
1950− for attr in attrs.iter().filter(|a| !a.html) {
1951− let (condition, name) = Condition::of(&attr.key);
1952− let Some(value) = attr.value.as_deref().filter(|v| !v.trim().is_empty()) else {
1953− continue;
1954− };
1955− if condition.holds_at(at) {
1956− read.push((condition, name, value));
1957− }
1958− }
1959− read.sort_by_cached_key(|(condition, _, _)| condition.order());
1960− for (_, name, value) in read {
1961− match name {
1962− "width" => {
1963− let size = Size::of(value);
1964− sizes.width = Some(size);
1965− sizes.width_word |= size != Size::Set;
1966− }
1967− "height" => {
1968− let size = Size::of(value);
1969− sizes.height = Some(size);
1970− sizes.height_word |= size != Size::Set;
1971− }
1972− "flex" => sizes.flex = true,
1973− "flex-grow" => sizes.flex_grow = true,
1974− "flex-shrink" => sizes.flex_shrink = true,
1975− "flex-basis" => sizes.flex_basis = true,
1976− "min-width" => sizes.min_width = true,
1977− "min-height" => sizes.min_height = true,
1978− _ => {}
1880+ // Grid
1881+ "grid-cols" => {
1882+ if let Some(v) = val {
1883+ if let Ok(n) = v.parse::<u32>() {
1884+ push_css(
1885+ &mut css,
1886+ "grid-template-columns",
1887+ &format!("repeat({},1fr)", n),
1888+ );
1889+ } else {
1890+ push_css(&mut css, "grid-template-columns", v);
1891+ }
1892+ }
19791893 }
1980− }
1981− sizes
1982− }
1983−
1984− /// The element writes `property` itself: a layout word leaves it alone.
1985− fn writes(&self, property: &str) -> bool {
1986− match property {
1987− "flex" => self.flex,
1988− "flex-grow" => self.flex || self.flex_grow,
1989− "flex-shrink" => self.flex || self.flex_shrink,
1990− "flex-basis" => self.flex || self.flex_basis,
1991− "min-width" => self.min_width,
1992− "min-height" => self.min_height,
1993− "width" => self.width == Some(Size::Set),
1994− "height" => self.height == Some(Size::Set),
1995− _ => false,
1996− }
1997− }
1998−
1999− /// Write a layout word's `property: value`, unless the element writes
2000− /// the property itself. When it writes some of `flex`'s longhands, a
2001− /// `flex` is written as the others (`flex-shrink 0, width fill` still
2002− /// grows).
2003− fn push(&self, css: &mut String, property: &str, value: &str) {
2004− if property == "flex" && !self.flex {
2005− let longhands = match value {
2006− "1" => [
2007− ("flex-grow", "1"),
2008− ("flex-shrink", "1"),
2009− ("flex-basis", "0%"),
2010− ],
2011− // The reset, `0 1 auto`
2012− _ => [
2013− ("flex-grow", "0"),
2014− ("flex-shrink", "1"),
2015− ("flex-basis", "auto"),
2016− ],
2017− };
2018− if longhands.iter().any(|&(p, _)| self.writes(p)) {
2019− for (longhand, value) in longhands {
2020− if !self.writes(longhand) {
2021− push_css(css, longhand, value);
1894+ "grid-rows" => {
1895+ if let Some(v) = val {
1896+ if let Ok(n) = v.parse::<u32>() {
1897+ push_css(
1898+ &mut css,
1899+ "grid-template-rows",
1900+ &format!("repeat({},1fr)", n),
1901+ );
1902+ } else {
1903+ push_css(&mut css, "grid-template-rows", v);
20221904 }
20231905 }
2024− return;
20251906 }
2026− }
2027− if !self.writes(property) {
2028− push_css(css, property, value);
2029− }
2030− }
2031−}
1907+ "col-span" => {
1908+ if let Some(v) = val {
1909+ push_css(&mut css, "grid-column", &format!("span {}", v));
1910+ }
1911+ }
1912+ "row-span" => {
1913+ if let Some(v) = val {
1914+ push_css(&mut css, "grid-row", &format!("span {}", v));
1915+ }
1916+ }
20321917
2033−/// The rule that gives an element's `fill` and `shrink`, as its attributes
2034−/// under the at-rules `at` set them, their meaning in a parent laid out
2035−/// along `axis`. Every other property a layout word could have set is put
2036−/// back to its initial value, so the rule is right whichever earlier rule
2037−/// it overrides. Properties the element writes itself are left alone.
2038−fn sizing_rule(attrs: &[Attribute], at: &[usize], axis: Axis) -> String {
2039− let sizes = Sizes::of(attrs, &Condition::at_only(at));
2040− let mut sets: Vec<(&str, &str)> = Vec::new();
2041− let mut resets: Vec<(&str, &str)> = Vec::new();
2042− for (dim, size, word) in [
2043− (Dim::Width, sizes.width, sizes.width_word),
2044− (Dim::Height, sizes.height, sizes.height_word),
2045− ] {
2046− if !word {
2047− continue;
2048− }
2049− if let Some(size) = size {
2050− sets.extend_from_slice(sizing(dim, size, Some(axis)));
2051− }
2052− resets.extend_from_slice(&sizing_properties(dim));
2053− }
2054− let mut css = String::new();
2055− let mut written: Vec<&str> = Vec::new();
2056− for &(property, value) in &resets {
2057− if sets.iter().any(|&(p, _)| p == property) || written.contains(&property) {
2058− continue;
2059− }
2060− written.push(property);
2061− sizes.push(&mut css, property, value);
2062− }
2063− for &(property, value) in &sets {
2064− sizes.push(&mut css, property, value);
2065− }
2066− css
2067−}
1918+ // CSS containment for rendering performance
1919+ "contain" => {
1920+ if let Some(v) = val {
1921+ push_css(&mut css, "contain", v);
1922+ } else {
1923+ push_css(&mut css, "contain", "layout style paint");
1924+ }
1925+ }
1926+ "content-visibility" => {
1927+ if let Some(v) = val {
1928+ push_css(&mut css, "content-visibility", v);
1929+ } else {
1930+ push_css(&mut css, "content-visibility", "auto");
1931+ }
1932+ }
20681933
2069−/// The rules an element's `fill` and `shrink` need under each chain of
2070−/// at-rules where the direction of `flow` (its parent's) changes: `(at,
2071−/// body)`.
2072−fn sizing_changes(attrs: &[Attribute], flow: &Flow) -> Vec<(Vec<usize>, String)> {
2073− flow.changes
2074− .iter()
2075− .map(|(at, axis)| (at.clone(), sizing_rule(attrs, at, *axis)))
2076− .filter(|(_, body)| !body.is_empty())
2077− .collect()
2078−}
1934+ // Outline (like border but doesn't affect layout)
1935+ "outline" => {
1936+ if let Some(v) = val {
1937+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
1938+ if parts.len() == 2 {
1939+ push_css(
1940+ &mut css,
1941+ "outline",
1942+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
1943+ );
1944+ } else {
1945+ push_css(
1946+ &mut css,
1947+ "outline",
1948+ &format!("{} solid currentColor", css_px(parts[0])),
1949+ );
1950+ }
1951+ }
1952+ }
20791953
2080−/// An element's generated class, with the rules keyed on its parent's
2081−/// class that its `fill` and `shrink` need where the parent's direction
2082−/// changes under a prefix (see [`Flow`]): `:where(.a)>.b`, one class of
2083−/// specificity like any class rule.
2084−fn element_class(elem: &Element, site: &Site, styles: &mut StyleCollector) -> Option<String> {
2085− let as_child = match site.parent.class {
2086− Some(_) => sizing_changes(&elem.attrs, site.parent),
2087− None => Vec::new(),
2088− };
2089− // Two elements with the same CSS but different rules keyed on them
2090− // need two classes
2091− let mut distinct = String::new();
2092− for (at, body) in &as_child {
2093− distinct.push_str(&format!("<{:?}{}", at, body));
2094− }
2095− let class = compute_class(&elem.attrs, site, styles, distinct)?;
2096− if let Some(parent) = &site.parent.class {
2097− for (at, body) in as_child {
2098− styles.add_keyed(at, format!(":where(.{})>.{}", parent, class), body);
2099− }
2100− }
2101− Some(class)
2102−}
1954+ // Logical properties (i18n-aware)
1955+ "padding-inline" => {
1956+ if let Some(v) = val {
1957+ push_css(&mut css, "padding-inline", &css_px_multi(v));
1958+ }
1959+ }
1960+ "padding-block" => {
1961+ if let Some(v) = val {
1962+ push_css(&mut css, "padding-block", &css_px_multi(v));
1963+ }
1964+ }
1965+ "margin-inline" => {
1966+ if let Some(v) = val {
1967+ push_css(&mut css, "margin-inline", &css_px_multi(v));
1968+ }
1969+ }
1970+ "margin-block" => {
1971+ if let Some(v) = val {
1972+ push_css(&mut css, "margin-block", &css_px_multi(v));
1973+ }
1974+ }
21031975
2104−/// The `display` of a layout (nothing for text, native and void elements,
2105−/// which keep HTML's own).
2106−fn layout_css(layout: Layout, inline: bool) -> &'static str {
2107− match (layout, inline) {
2108− (Layout::Column, false) => "display:flex;flex-direction:column;",
2109− (Layout::Column, true) => "display:inline-flex;flex-direction:column;",
2110− (Layout::Row, false) => "display:flex;flex-direction:row;",
2111− (Layout::Row, true) => "display:inline-flex;flex-direction:row;",
2112− (Layout::Grid, false) => "display:grid;",
2113− (Layout::Grid, true) => "display:inline-grid;",
2114− _ => "",
2115− }
2116−}
1976+ // Logical property start/end variants
1977+ "padding-inline-start"
1978+ | "padding-inline-end"
1979+ | "padding-block-start"
1980+ | "padding-block-end"
1981+ | "margin-inline-start"
1982+ | "margin-inline-end"
1983+ | "margin-block-start"
1984+ | "margin-block-end" => {
1985+ if let Some(v) = val {
1986+ push_css(&mut css, effective_key, &css_px(v));
1987+ }
1988+ }
21171989
2118−/// The declarations of the attributes under `condition` (the defaults of
2119−/// the element's kind are [`default_css`]'s).
2120−fn attrs_to_css(attrs: &[Attribute], condition: &Condition, site: &Site) -> String {
2121− let mut css = String::new();
2122− // The auto margins of `center-x`, `align-left`, ..., written at the end
2123− let mut aligned = String::new();
2124− let kind = site.kind;
2125− // Under `children:` the styles go on the children, whose parent is this
2126− // element: htmlang's words that place an element in its parent are an
2127− // error there (the parser reports them), and left out
2128− let on_children = condition.on_children();
2129− let inside = condition.inside().is_some();
2130− // The direction `fill` and `shrink` compile against
2131− let axis = site.parent.at(&condition.at);
2132−
2133− // htmlang's words for laying out children (`spacing`, `wrap`,
2134− // `grid-cols`) mean nothing on an element that doesn't lay out its
2135− // children, which the parser reports; they are left out. Under
2136− // `children:` they go on the children, whose layout isn't known here.
2137− let lays_out_children = kind.layout().is_container() || on_children;
2138− fn under<'k>(key: &'k str, condition: &Condition) -> Option<&'k str> {
2139− let (c, name) = Condition::of(key);
2140− (c == *condition).then_some(name)
2141− }
2142−
2143− for (index, attr) in attrs.iter().enumerate() {
2144− if attr.html {
2145− continue;
2146− }
2147− let Some(effective_key) = under(&attr.key, condition) else {
2148− continue;
2149− };
2150− if on_children && crate::vocab::places_in_parent(effective_key, attr.value.as_deref()) {
2151− continue;
2152− }
2153− // Under an element prefix (`@td:`) the styles go on elements whose
2154− // layout and parent aren't known here: htmlang's own words are an
2155− // error there (the parser reports them), and left out
2156− if inside && crate::vocab::is_htmlang_word(effective_key, attr.value.as_deref()) {
2157− continue;
2158− }
1990+ // Logical inset
1991+ "inset-inline" | "inset-block" => {
1992+ if let Some(v) = val {
1993+ push_css(&mut css, effective_key, &css_px_multi(v));
1994+ }
1995+ }
1996+ "inset-inline-start" | "inset-inline-end" | "inset-block-start" | "inset-block-end" => {
1997+ if let Some(v) = val {
1998+ push_css(&mut css, effective_key, &css_px(v));
1999+ }
2000+ }
21592001
2160− let val = attr.value.as_deref();
2161− // A style whose value came out empty (a field a record doesn't
2162− // have, `${if()}` without its other branch) is left out
2163− if val.is_some_and(|v| v.trim().is_empty()) {
2164− continue;
2165− }
2002+ // Logical border
2003+ "border-inline"
2004+ | "border-block"
2005+ | "border-inline-start"
2006+ | "border-inline-end"
2007+ | "border-block-start"
2008+ | "border-block-end" => {
2009+ if let Some(v) = val {
2010+ push_css(&mut css, effective_key, v);
2011+ }
2012+ }
21662013
2167− match effective_key {
2168− // htmlang's own words: they lay out children or place the
2169− // element in its parent, and mean more than one CSS property
2170− "spacing" if !lays_out_children => {}
2171− "spacing" => {
2014+ // Logical border-radius
2015+ "border-start-start-radius"
2016+ | "border-start-end-radius"
2017+ | "border-end-start-radius"
2018+ | "border-end-end-radius" => {
21722019 if let Some(v) = val {
2173− push_css(&mut css, "gap", &with_px("gap", v));
2020+ push_css(&mut css, effective_key, &css_px(v));
21742021 }
21752022 }
21762023
2177− // Sizing: `fill` and `shrink` compile against the parent's
2178− // direction. Only the last `width` (`height`) counts, as for
2179− // any style written twice.
2180− "width" | "height" if val.is_some_and(|v| Size::of(v) != Size::Set) => {
2181− let later = attrs[index + 1..].iter().any(|a| {
2182− !a.html
2183− && under(&a.key, condition) == Some(effective_key)
2184− && a.value.as_deref().is_some_and(|v| !v.trim().is_empty())
2185− });
2186− if later {
2187− continue;
2024+ // Logical scroll margins & padding
2025+ "scroll-margin-inline"
2026+ | "scroll-margin-block"
2027+ | "scroll-padding-inline"
2028+ | "scroll-padding-block" => {
2029+ if let Some(v) = val {
2030+ push_css(&mut css, effective_key, &css_px_multi(v));
21882031 }
2189− let dim = if effective_key == "width" {
2190− Dim::Width
2191− } else {
2192− Dim::Height
2193− };
2194− let size = Size::of(val.unwrap_or_default());
2195− // What the element writes itself, which a layout word
2196− // leaves alone
2197− let sizes = Sizes::of(attrs, condition);
2198− for &(property, value) in sizing(dim, size, axis) {
2199− sizes.push(&mut css, property, value);
2200− }
2201− }
2202−
2203− // A size of its own under a prefix, where a `fill` or
2204− // `shrink` that sets `flex` (along a flex parent's direction)
2205− // holds too: the word's `flex` and minimum are put back, so the
2206− // size is the one the element gets (`width fill, lg:width 200`
2207− // in a row)
2208− "width" | "height"
2209− if *condition != Condition::default()
2210− && attrs.iter().any(|a| {
2211− let (c, name) = Condition::of(&a.key);
2212− let along = match site.parent.at(&c.at) {
2213− Some(Axis::Row) => name == "width",
2214− Some(Axis::Column) => name == "height",
2215− None => false,
2216− };
2217− !a.html
2218− && name == effective_key
2219− && along
2220− && c != *condition
2221− && c.holds_at(condition)
2222− && a.value
2223− .as_deref()
2224− .is_some_and(|v| !v.trim().is_empty() && Size::of(v) != Size::Set)
2225− }) =>
2226− {
2227− let dim = if effective_key == "width" {
2228− Dim::Width
2229− } else {
2230− Dim::Height
2231− };
2232− let sizes = Sizes::of(attrs, condition);
2233− for (property, value) in sizing_properties(dim) {
2234− if property != effective_key {
2235− sizes.push(&mut css, property, value);
2236− }
2032+ }
2033+
2034+ // Logical sizing
2035+ "inline-size" | "block-size" | "min-inline-size" | "max-inline-size"
2036+ | "min-block-size" | "max-block-size" => {
2037+ if let Some(v) = val {
2038+ push_css(&mut css, effective_key, &css_px(v));
2039+ }
2040+ }
2041+
2042+ // Margin
2043+ "margin" => {
2044+ if let Some(v) = val {
2045+ push_css(&mut css, "margin", &css_px_multi(v));
2046+ }
2047+ }
2048+ // Container queries
2049+ "container" => {
2050+ push_css(&mut css, "container-type", "inline-size");
2051+ }
2052+
2053+ // Inset (shorthand for top/right/bottom/left)
2054+ "inset" => {
2055+ if let Some(v) = val {
2056+ push_css(&mut css, "inset", &css_px(v));
22372057 }
2058+ }
2059+
2060+ // Table
2061+ "border-spacing" => {
22382062 if let Some(v) = val {
2239− push_css(&mut css, effective_key, &with_px(effective_key, v));
2063+ push_css(&mut css, "border-spacing", &css_px(v));
22402064 }
22412065 }
22422066
2243− // Alignment: auto margins, which work along either direction.
2244− // They are written last, so a `margin` on the same element
2245− // keeps its other sides (`center-x, margin 20`)
2246− "center-x" => {
2247− push_css(&mut aligned, "margin-left", "auto");
2248− push_css(&mut aligned, "margin-right", "auto");
2067+ // Text decoration
2068+ "text-decoration-thickness" => {
2069+ if let Some(v) = val {
2070+ push_css(&mut css, "text-decoration-thickness", &css_px(v));
2071+ }
22492072 }
2250− "center-y" => {
2251− push_css(&mut aligned, "margin-top", "auto");
2252− push_css(&mut aligned, "margin-bottom", "auto");
2073+ "text-underline-offset" => {
2074+ if let Some(v) = val {
2075+ push_css(&mut css, "text-underline-offset", &css_px(v));
2076+ }
22532077 }
2254− "align-left" => push_css(&mut aligned, "margin-right", "auto"),
2255− "align-right" => push_css(&mut aligned, "margin-left", "auto"),
2256− "align-top" => push_css(&mut aligned, "margin-bottom", "auto"),
2257− "align-bottom" => push_css(&mut aligned, "margin-top", "auto"),
22582078
2259− "wrap" if lays_out_children => push_css(&mut css, "flex-wrap", "wrap"),
2260− "wrap" => {}
2079+ // Multi-column
2080+ "column-width" => {
2081+ if let Some(v) = val {
2082+ push_css(&mut css, "column-width", &css_px(v));
2083+ }
2084+ }
22612085
2262− // Grid
2263− "grid-cols" | "grid-rows" if !lays_out_children => {}
2264− "grid-cols" | "grid-rows" => {
2086+ // New CSS properties
2087+ "column-gap" => {
22652088 if let Some(v) = val {
2266− let property = if effective_key == "grid-cols" {
2267− "grid-template-columns"
2268− } else {
2269− "grid-template-rows"
2270− };
2271− match v.parse::<u32>() {
2272− Ok(n) => push_css(&mut css, property, &format!("repeat({},1fr)", n)),
2273− Err(_) => push_css(&mut css, property, &with_px(property, v)),
2274− }
2089+ push_css(&mut css, "column-gap", &css_px(v));
2090+ }
2091+ }
2092+ "text-indent" => {
2093+ if let Some(v) = val {
2094+ push_css(&mut css, "text-indent", &css_px(v));
2095+ }
2096+ }
2097+ "flex-basis" => {
2098+ if let Some(v) = val {
2099+ push_css(&mut css, "flex-basis", &css_px(v));
2100+ }
2101+ }
2102+ "scroll-margin" => {
2103+ if let Some(v) = val {
2104+ push_css(&mut css, "scroll-margin", &css_px(v));
2105+ }
2106+ }
2107+ "scroll-margin-top"
2108+ | "scroll-margin-bottom"
2109+ | "scroll-margin-left"
2110+ | "scroll-margin-right" => {
2111+ if let Some(v) = val {
2112+ push_css(&mut css, effective_key, &css_px(v));
2113+ }
2114+ }
2115+ "scroll-padding" => {
2116+ if let Some(v) = val {
2117+ push_css(&mut css, "scroll-padding", &css_px(v));
2118+ }
2119+ }
2120+ "scroll-padding-top"
2121+ | "scroll-padding-bottom"
2122+ | "scroll-padding-left"
2123+ | "scroll-padding-right" => {
2124+ if let Some(v) = val {
2125+ push_css(&mut css, effective_key, &css_px(v));
22752126 }
22762127 }
2277− "col-span" | "row-span" => {
2128+
2129+ "content" => {
22782130 if let Some(v) = val {
2279− let property = if effective_key == "col-span" {
2280− "grid-column"
2131+ // Wrap in quotes if not already quoted and not a CSS keyword
2132+ if v.starts_with('"')
2133+ || v.starts_with('\'')
2134+ || v == "none"
2135+ || v == "normal"
2136+ || v.starts_with("attr(")
2137+ || v.starts_with("counter(")
2138+ {
2139+ push_css(&mut css, "content", v);
22812140 } else {
2282− "grid-row"
2283− };
2284− push_css(&mut css, property, &format!("span {}", v));
2141+ push_css(&mut css, "content", &format!("\"{}\"", v));
2142+ }
22852143 }
22862144 }
22872145
2288− // CSS's `line-clamp` has no support yet without its
2289− // `-webkit-` fallback, which needs a box to clamp
2146+ // --- CSS Shorthands ---
22902147 "line-clamp" => {
22912148 if let Some(v) = val {
22922149 push_css(&mut css, "display", "-webkit-box");
@@ -2296,14 +2153,27 @@ fn attrs_to_css(attrs: &[Attribute], condition: &Condition, site: &Site) -> Stri
22962153 }
22972154 }
22982155
2299− // Every other name is a CSS property (standard, custom,
2300− // vendor-prefixed, or one htmlang doesn't know, which the
2301− // parser warned about), written under its own name with the
2302− // value as written, except for `px` after a bare number where
2303− // the property takes a length
2304− key if crate::vocab::is_property_name(key) => {
2156+ // Any other standard CSS property is copied through, with `px`
2157+ // added to bare numbers where the property takes a length.
2158+ // `font-family "Inter, sans-serif"`: the quotes only keep the
2159+ // stack's commas from splitting the attribute list.
2160+ "font-family" => {
2161+ if let Some(v) = val {
2162+ let v = match v.strip_prefix('"').and_then(|v| v.strip_suffix('"')) {
2163+ Some(stack) if stack.contains(',') => stack,
2164+ _ => v,
2165+ };
2166+ push_css(&mut css, "font-family", v);
2167+ }
2168+ }
2169+
2170+ key if crate::vocab::is_css_property(key) => {
23052171 if let Some(v) = val {
2306− push_css(&mut css, key, &with_px(key, v));
2172+ if crate::vocab::is_length_property(key) {
2173+ push_css(&mut css, key, &css_px_multi(v));
2174+ } else {
2175+ push_css(&mut css, key, v);
2176+ }
23072177 }
23082178 }
23092179
@@ -2311,7 +2181,6 @@ fn attrs_to_css(attrs: &[Attribute], condition: &Condition, site: &Site) -> Stri
23112181 }
23122182 }
23132183
2314− css.push_str(&aligned);
23152184 css
23162185}
23172186
@@ -2322,6 +2191,53 @@ fn push_css(css: &mut String, prop: &str, value: &str) {
23222191 css.push(';');
23232192}
23242193
2194+/// Known CSS units — if a value ends with one, skip appending `px`.
2195+/// Format a length value: a bare number gets `px` appended; anything else
2196+/// (values with units, keywords like `auto`, functions like `calc(...)`) is
2197+/// passed through unchanged.
2198+fn css_px(value: &str) -> String {
2199+ let v = value.trim();
2200+ if v == "0" {
2201+ return "0".to_string();
2202+ }
2203+ let is_bare_number = !v.is_empty()
2204+ && v.bytes().all(|b| b.is_ascii_digit() || matches!(b, b'.' | b'-' | b'+'))
2205+ && v.parse::<f64>().is_ok();
2206+ if is_bare_number {
2207+ format!("{}px", v)
2208+ } else {
2209+ v.to_string()
2210+ }
2211+}
2212+
2213+/// Format a `line-height` value. CSS accepts either a unitless multiplier
2214+/// (e.g. `1.5`) or a length (e.g. `24px`). Plain integers in htmlang source
2215+/// are ambiguous: `[line-height 24]` was historically emitted as `24` (which
2216+/// CSS interprets as 24× font-size — almost never what anyone wants). Treat
2217+/// integers ≥ 2 as pixel lengths; anything with a decimal, an existing unit,
2218+/// or the value `0`/`1` passes through unchanged.
2219+fn css_line_height(value: &str) -> String {
2220+ let v = value.trim();
2221+ if v == "0" || v == "1" {
2222+ return v.to_string();
2223+ }
2224+ // Plain integer — treat as pixel length. Decimals, units, keywords and
2225+ // functions pass through.
2226+ if !v.is_empty() && v.chars().all(|c| c.is_ascii_digit()) {
2227+ return format!("{}px", v);
2228+ }
2229+ v.to_string()
2230+}
2231+
2232+/// Format multiple space-separated values, each getting px if needed.
2233+fn css_px_multi(value: &str) -> String {
2234+ value
2235+ .split_whitespace()
2236+ .map(css_px)
2237+ .collect::<Vec<_>>()
2238+ .join(" ")
2239+}
2240+
23252241fn extract_id_class(attrs: &[Attribute]) -> (Option<String>, Option<String>) {
23262242 let mut id = None;
23272243 let mut class = None;
@@ -2335,6 +2251,153 @@ fn extract_id_class(attrs: &[Attribute]) -> (Option<String>, Option<String>) {
23352251 (id, class)
23362252}
23372253
2254+/// Read image dimensions from a local file by parsing the header bytes.
2255+/// Supports PNG, JPEG, GIF, WebP, AVIF, and SVG.
2256+fn read_image_dimensions(path: &str) -> Option<(u32, u32)> {
2257+ // SVG: parse as text for viewBox/width/height attributes
2258+ if path.ends_with(".svg") || path.ends_with(".SVG") {
2259+ let text = std::fs::read_to_string(path).ok()?;
2260+ return read_svg_dimensions(&text);
2261+ }
2262+
2263+ let data = std::fs::read(path).ok()?;
2264+ if data.len() < 12 {
2265+ return None;
2266+ }
2267+
2268+ // PNG: 8-byte signature, then IHDR chunk with width/height at bytes 16-23
2269+ if data.len() >= 24 && data.starts_with(b"\x89PNG\r\n\x1a\n") {
2270+ let w = u32::from_be_bytes([data[16], data[17], data[18], data[19]]);
2271+ let h = u32::from_be_bytes([data[20], data[21], data[22], data[23]]);
2272+ return Some((w, h));
2273+ }
2274+
2275+ // GIF: "GIF87a" or "GIF89a", width/height at bytes 6-9 (little-endian)
2276+ if data.starts_with(b"GIF87a") || data.starts_with(b"GIF89a") {
2277+ let w = u16::from_le_bytes([data[6], data[7]]) as u32;
2278+ let h = u16::from_le_bytes([data[8], data[9]]) as u32;
2279+ return Some((w, h));
2280+ }
2281+
2282+ // JPEG: scan for SOF0/SOF2 marker (0xFF 0xC0 or 0xFF 0xC2)
2283+ if data.starts_with(b"\xff\xd8") {
2284+ let mut i = 2;
2285+ while i + 9 < data.len() {
2286+ if data[i] != 0xFF {
2287+ i += 1;
2288+ continue;
2289+ }
2290+ let marker = data[i + 1];
2291+ if marker == 0xC0 || marker == 0xC2 {
2292+ let h = u16::from_be_bytes([data[i + 5], data[i + 6]]) as u32;
2293+ let w = u16::from_be_bytes([data[i + 7], data[i + 8]]) as u32;
2294+ return Some((w, h));
2295+ }
2296+ if i + 3 < data.len() {
2297+ let len = u16::from_be_bytes([data[i + 2], data[i + 3]]) as usize;
2298+ i += 2 + len;
2299+ } else {
2300+ break;
2301+ }
2302+ }
2303+ }
2304+
2305+ // WebP: "RIFF" ... "WEBP", VP8 header at byte 20
2306+ if data.len() >= 30 && &data[..4] == b"RIFF" && &data[8..12] == b"WEBP" {
2307+ if &data[12..16] == b"VP8 " && data.len() >= 30 {
2308+ let w = u16::from_le_bytes([data[26], data[27]]) as u32 & 0x3FFF;
2309+ let h = u16::from_le_bytes([data[28], data[29]]) as u32 & 0x3FFF;
2310+ return Some((w, h));
2311+ }
2312+ if &data[12..16] == b"VP8L" && data.len() >= 25 && data[21] == 0x2F {
2313+ let bits = u32::from_le_bytes([data[22], data[23], data[24], data[25]]);
2314+ let w = (bits & 0x3FFF) + 1;
2315+ let h = ((bits >> 14) & 0x3FFF) + 1;
2316+ return Some((w, h));
2317+ }
2318+ }
2319+
2320+ // AVIF: ISOBMFF container with "ftyp" box containing "avif"/"avis" brand,
2321+ // then "ispe" box with width/height
2322+ if data.len() >= 12 && &data[4..8] == b"ftyp" {
2323+ let brand = &data[8..12];
2324+ if brand == b"avif" || brand == b"avis" || brand == b"mif1" {
2325+ return read_avif_dimensions(&data);
2326+ }
2327+ }
2328+
2329+ None
2330+}
2331+
2332+/// Parse SVG viewBox or width/height attributes to get dimensions.
2333+fn read_svg_dimensions(text: &str) -> Option<(u32, u32)> {
2334+ // Try viewBox first: viewBox="minX minY width height"
2335+ if let Some(vb_start) = text.find("viewBox=\"") {
2336+ let rest = &text[vb_start + 9..];
2337+ if let Some(end) = rest.find('"') {
2338+ let parts: Vec<&str> = rest[..end].split_whitespace().collect();
2339+ if parts.len() == 4
2340+ && let (Ok(w), Ok(h)) = (parts[2].parse::<f64>(), parts[3].parse::<f64>())
2341+ && w > 0.0
2342+ && h > 0.0
2343+ {
2344+ return Some((w.round() as u32, h.round() as u32));
2345+ }
2346+ }
2347+ }
2348+ // Fall back to width/height attributes on <svg>
2349+ let svg_tag = text.find("<svg")?;
2350+ let tag_end = text[svg_tag..].find('>')? + svg_tag;
2351+ let tag = &text[svg_tag..tag_end];
2352+ let w = extract_svg_attr(tag, "width")?;
2353+ let h = extract_svg_attr(tag, "height")?;
2354+ Some((w, h))
2355+}
2356+
2357+fn extract_svg_attr(tag: &str, attr: &str) -> Option<u32> {
2358+ let needle = format!("{}=\"", attr);
2359+ let start = tag.find(&needle)? + needle.len();
2360+ let rest = &tag[start..];
2361+ let end = rest.find('"')?;
2362+ let val = rest[..end].trim_end_matches("px");
2363+ val.parse::<f64>().ok().map(|v| v.round() as u32)
2364+}
2365+
2366+/// Parse AVIF (ISOBMFF) container to find ispe box with image dimensions.
2367+fn read_avif_dimensions(data: &[u8]) -> Option<(u32, u32)> {
2368+ // Walk ISOBMFF boxes looking for "ispe" (image spatial extents)
2369+ let mut i = 0;
2370+ while i + 8 <= data.len() {
2371+ let box_size =
2372+ u32::from_be_bytes([data[i], data[i + 1], data[i + 2], data[i + 3]]) as usize;
2373+ let box_type = &data[i + 4..i + 8];
2374+ if box_size < 8 {
2375+ break;
2376+ }
2377+ let box_end = (i + box_size).min(data.len());
2378+ // ispe box: 4 bytes version/flags + 4 bytes width + 4 bytes height
2379+ if box_type == b"ispe" && box_end >= i + 20 {
2380+ let w = u32::from_be_bytes([data[i + 12], data[i + 13], data[i + 14], data[i + 15]]);
2381+ let h = u32::from_be_bytes([data[i + 16], data[i + 17], data[i + 18], data[i + 19]]);
2382+ return Some((w, h));
2383+ }
2384+ // Recurse into container boxes (meta, iprp, ipco)
2385+ if matches!(
2386+ box_type,
2387+ b"meta" | b"iprp" | b"ipco" | b"moov" | b"trak" | b"mdia"
2388+ ) {
2389+ let header_size = if box_type == b"meta" { 12 } else { 8 };
2390+ if i + header_size < box_end
2391+ && let Some(dims) = read_avif_dimensions(&data[i + header_size..box_end])
2392+ {
2393+ return Some(dims);
2394+ }
2395+ }
2396+ i = box_end;
2397+ }
2398+ None
2399+}
2400+
23382401fn html_escape(s: &str) -> String {
23392402 s.replace('&', "&amp;")
23402403 .replace('<', "&lt;")
@@ -2450,30 +2513,13 @@ fn vlq_encode(value: i64, out: &mut String) {
24502513 }
24512514}
24522515
2453−#[cfg(test)]
2454−mod tests {
2455− use super::*;
2456−
2457− #[test]
2458− fn a_name_is_a_stable_hash_of_the_style() {
2459− // The same in every build and on every platform
2460− assert_eq!(stable_hash(""), 0xf52a_15e9_a9b5_e89b);
2461− assert_eq!(hash_digits(35, 3), "z00");
2462− assert_eq!(hash_digits(u64::MAX, 13), "fsgs46211e5w3");
2463− }
2464−
2465− #[test]
2466− fn a_name_taken_in_the_file_takes_more_digits() {
2467− // These two styles' hashes end in the same 7 digits
2468− let mut styles = StyleCollector::new();
2469− let first = styles.get_class("width:129555px;".into(), Vec::new(), String::new());
2470− let second = styles.get_class("width:170577px;".into(), Vec::new(), String::new());
2471− let (first, second) = (first.unwrap(), second.unwrap());
2472− assert_eq!(first.len(), 3 + CLASS_DIGITS, "{first}");
2473− assert_eq!(second.len(), 3 + CLASS_DIGITS + 1, "{second}");
2474− assert!(second.starts_with(&first), "{first} {second}");
2475− // The same style gets the name it got before
2476− let again = styles.get_class("width:170577px;".into(), Vec::new(), String::new());
2477− assert_eq!(again.as_deref(), Some(second.as_str()));
2478− }
2516+
2517+/// Does the tree contain the table element `name` (e.g. `"main"`)?
2518+fn has_tag(nodes: &[Node], name: &str) -> bool {
2519+ nodes.iter().any(|node| match node {
2520+ Node::Element(elem) => elem.kind.is_tag(name) || has_tag(&elem.children, name),
2521+ _ => false,
2522+ })
24792523}
2524+
2525+
crates/htmlang-core/src/codegen_tests.rs+8−33
@@ -1,8 +1,6 @@
11#[cfg(test)]
22mod tests {
3− use crate::codegen::{
4− CodegenOptions, generate, generate_dev, generate_partial, generate_with_classes,
5− };
3+ use crate::codegen::{generate, generate_dev, generate_partial, short_class_name};
64 use crate::parser::parse;
75
86 fn compile(src: &str) -> String {
@@ -49,42 +47,19 @@ mod tests {
4947
5048 #[test]
5149 fn dev_mode_is_deterministic_across_runs() {
52− let src =
53− "@row [spacing 10]\n @text [font-weight bold] a\n @text [font-style italic] b\n";
50+ let src = "@row [spacing 10]\n @text [font-weight bold] a\n @text [font-style italic] b\n";
5451 let r1 = parse(src);
5552 let r2 = parse(src);
5653 assert_eq!(generate_dev(&r1.document), generate_dev(&r2.document));
5754 }
5855
59− /// The classes of `src`, compiled as a fragment
60− fn classes(src: &str) -> Vec<crate::codegen::Class> {
61− let options = CodegenOptions {
62− partial: true,
63− ..Default::default()
64− };
65− generate_with_classes(&parse(src).document, &options).1
66− }
67−
6856 #[test]
69− fn a_style_has_one_name_in_every_file() {
70− // A fragment's classes mean in a page what they mean in the
71− // fragment, whatever else either holds
72− let page = classes("@el [padding 10, background red] a\n@el [gap 4] b\n");
73− let fragment = classes("@row [margin 2] x\n@el [padding 10, background red] y\n");
74− assert_eq!(page[0], fragment[1]);
75− assert_ne!(page[1].style, fragment[0].style);
76− assert_ne!(page[1].name, fragment[0].name);
77− for class in page.iter().chain(&fragment) {
78− let digits = class.name.strip_prefix("hl-").expect("hl-");
79− assert_eq!(digits.len(), crate::codegen::CLASS_DIGITS, "{}", class.name);
80− assert!(
81− digits
82− .bytes()
83− .all(|b| b.is_ascii_digit() || b.is_ascii_lowercase()),
84− "{}",
85− class.name
86− );
87− }
57+ fn short_class_name_is_stable() {
58+ assert_eq!(short_class_name(0), "a");
59+ assert_eq!(short_class_name(25), "z");
60+ // Higher indexes must produce unique, stable names.
61+ let names: std::collections::HashSet<_> = (0..50_000).map(short_class_name).collect();
62+ assert_eq!(names.len(), 50_000, "short_class_name collisions");
8863 }
8964
9065 #[test]
crates/htmlang-core/src/diagnostic.rsdeleted−245
@@ -1,245 +0,0 @@
1−//! Diagnostics: what the compiler reports about a source file.
2−//!
3−//! Every diagnostic has a stable `code` (see [`code`]), so tools such as the
4−//! language server key their quick fixes on the code rather than on the
5−//! wording of the message. `subject` and `suggestion` carry the name the
6−//! diagnostic is about and the name to use instead, when there is one.
7−
8−#[derive(Debug, Clone, Copy, PartialEq, Eq)]
9−pub enum Severity {
10− Error,
11− Warning,
12− Info,
13− Help,
14−}
15−
16−#[derive(Debug, Clone)]
17−pub struct Diagnostic {
18− /// Stable identifier of the kind of problem, e.g. `unknown-element`.
19− pub code: &'static str,
20− pub line: usize,
21− pub column: Option<usize>,
22− pub message: String,
23− pub severity: Severity,
24− pub source_line: Option<Box<str>>,
25− /// The name the diagnostic is about, as written (`@nosuch` without the
26− /// `@`, an attribute key, a definition's name).
27− pub subject: Option<Box<str>>,
28− /// The name to write instead of `subject` ("did you mean ...?").
29− pub suggestion: Option<Box<str>>,
30−}
31−
32−impl Diagnostic {
33− pub fn new(code: &'static str, severity: Severity, line: usize, message: String) -> Self {
34− Diagnostic {
35− code,
36− line,
37− column: None,
38− message,
39− severity,
40− source_line: None,
41− subject: None,
42− suggestion: None,
43− }
44− }
45−
46− pub fn error(code: &'static str, line: usize, message: String) -> Self {
47− Self::new(code, Severity::Error, line, message)
48− }
49−
50− pub fn warning(code: &'static str, line: usize, message: String) -> Self {
51− Self::new(code, Severity::Warning, line, message)
52− }
53−
54− pub fn column(mut self, column: usize) -> Self {
55− self.column = Some(column);
56− self
57− }
58−
59− pub fn source(mut self, source: impl Into<String>) -> Self {
60− self.source_line = Some(source.into().into_boxed_str());
61− self
62− }
63−
64− pub fn subject(mut self, subject: impl Into<String>) -> Self {
65− self.subject = Some(subject.into().into_boxed_str());
66− self
67− }
68−
69− pub fn suggest(mut self, suggestion: Option<impl Into<String>>) -> Self {
70− self.suggestion = suggestion.map(|s| s.into().into_boxed_str());
71− self
72− }
73−}
74−
75−/// The diagnostic codes. A code names a kind of problem and never changes,
76−/// even when a message is reworded.
77−pub mod code {
78− // Syntax: found while reading the file, before anything runs
79− pub const UNCLOSED_BRACKET: &str = "unclosed-bracket";
80− /// A `]` that ends an attribute list inside what reads as a `'...'`
81− /// string in a value (`hx-on:click=alert(']')`).
82− pub const UNBALANCED_QUOTE: &str = "unbalanced-quote";
83− pub const UNEXPECTED_BODY: &str = "unexpected-body";
84− pub const UNEXPECTED_ARGUMENT: &str = "unexpected-argument";
85− pub const MISSING_ARGUMENT: &str = "missing-argument";
86− pub const INVALID_LOOP: &str = "invalid-loop";
87− /// A `@let` whose name, parameters or body don't fit its kind.
88− pub const INVALID_DEFINITION: &str = "invalid-definition";
89− pub const STRAY_ELSE: &str = "stray-else";
90− /// Indentation with tabs and spaces mixed, which nests lines in ways
91− /// the eye doesn't see.
92− pub const MIXED_INDENTATION: &str = "mixed-indentation";
93−
94− // Names
95− pub const UNKNOWN_ELEMENT: &str = "unknown-element";
96− /// An attribute name htmlang doesn't know: a warning when CSS could
97− /// have the name (it is written to the CSS as it is), an error otherwise.
98− pub const UNKNOWN_ATTRIBUTE: &str = "unknown-attribute";
99− /// A misspelled prefix (`hovr:color red`).
100− pub const UNKNOWN_PREFIX: &str = "unknown-prefix";
101− /// A prefix the attribute can't take: a second one (`md:hover:`), or
102− /// one on an HTML attribute (`hover:required`).
103− pub const INVALID_PREFIX: &str = "invalid-prefix";
104− /// A style written without its value (`[padding]`).
105− pub const MISSING_VALUE: &str = "missing-value";
106− pub const HTML_ATTRIBUTE_FORM: &str = "html-attribute-form";
107− /// A second `@page`: a page has one root, so one `@page`.
108− pub const DUPLICATE_PAGE: &str = "duplicate-page";
109− pub const UNDEFINED_VARIABLE: &str = "undefined-variable";
110− /// An attribute, or an attribute's name, made from a variable.
111− pub const ATTRIBUTE_FROM_VARIABLE: &str = "attribute-from-variable";
112− pub const DUPLICATE_ATTRIBUTE: &str = "duplicate-attribute";
113−
114− // Values
115− /// A value that can't be written into the page's CSS (an error), or
116− /// one that can't mean what it says (a warning).
117− pub const INVALID_VALUE: &str = "invalid-value";
118− pub const INVALID_COLOR: &str = "invalid-color";
119− pub const INVALID_EXPRESSION: &str = "invalid-expression";
120− pub const INVALID_JSON: &str = "invalid-json";
121− /// A name htmlang doesn't know right after a `key=value`: the rest of
122− /// the value, which a comma ended (`hx-trigger=load, every 2s`).
123− pub const SPLIT_VALUE: &str = "split-value";
124− /// A leading argument taken as a URL that reads as text (`@link
125− /// [hx-get=/x] Open panel`, whose href is `Open`).
126− pub const TEXT_AS_URL: &str = "text-as-url";
127−
128− // Definitions and functions
129− pub const UNUSED_VARIABLE: &str = "unused-variable";
130− pub const UNUSED_BUNDLE: &str = "unused-bundle";
131− pub const UNUSED_FUNCTION: &str = "unused-function";
132− pub const RECURSIVE_CALL: &str = "recursive-call";
133− pub const NO_SINGLE_ROOT: &str = "no-single-root";
134− /// A call that leaves out a parameter without a default.
135− pub const MISSING_PARAMETER: &str = "missing-parameter";
136− /// A parameter passed `name=value`: parameters are written `name value`.
137− pub const PARAMETER_FORM: &str = "parameter-form";
138− /// A function named like a built-in element (which it replaces) or a
139− /// directive (which it can't replace).
140− pub const SHADOWS_BUILT_IN: &str = "shadows-built-in";
141− /// A `@slot NAME` block at a call whose function has no such slot.
142− pub const UNKNOWN_SLOT: &str = "unknown-slot";
143− /// Content passed to a function whose body has no `@children`.
144− pub const UNEXPECTED_CONTENT: &str = "unexpected-content";
145− /// A `@slot` or `@children` where it marks or fills nothing: outside
146− /// a function's body, inside an element at a call, or inline in text.
147− pub const MISPLACED_SLOT: &str = "misplaced-slot";
148− /// A slot name that isn't one name (`@slot my footer`).
149− pub const INVALID_SLOT_NAME: &str = "invalid-slot-name";
150−
151− // Files
152− pub const UNREADABLE_FILE: &str = "unreadable-file";
153− pub const CIRCULAR_INCLUDE: &str = "circular-include";
154− /// Two files of one build whose different styles got one class name:
155− /// a name is a hash of its style (`htmlang build` checks).
156− pub const CLASS_COLLISION: &str = "class-collision";
157− pub const UNSET_ENVIRONMENT: &str = "unset-environment";
158−
159− // Context: an attribute or element where it has no effect
160− /// An attribute the element ignores (a warning), or a layout word such
161− /// as `spacing` on an element that doesn't lay out its children (an
162− /// error: it is left out).
163− pub const NO_EFFECT: &str = "no-effect";
164− /// An element whose HTML ends a `<p>`, written inside a `@paragraph`.
165− pub const BLOCK_IN_PARAGRAPH: &str = "block-in-paragraph";
166−
167− // Accessibility
168− pub const MISSING_ALT: &str = "missing-alt";
169− pub const MISSING_INPUT_TYPE: &str = "missing-input-type";
170− pub const MISSING_LINK_TEXT: &str = "missing-link-text";
171− pub const MISSING_LABEL: &str = "missing-label";
172− pub const MISSING_TITLE: &str = "missing-title";
173− pub const MISSING_BUTTON_TEXT: &str = "missing-button-text";
174− pub const MISSING_CAPTIONS: &str = "missing-captions";
175− pub const LOW_CONTRAST: &str = "low-contrast";
176− pub const POSITIVE_TABINDEX: &str = "positive-tabindex";
177−
178− // `htmlang lint`
179− pub const DEEP_NESTING: &str = "deep-nesting";
180− pub const EMPTY_CONTAINER: &str = "empty-container";
181− pub const MISSING_BUTTON_TYPE: &str = "missing-button-type";
182−
183− /// A bug in the compiler itself.
184− pub const INTERNAL: &str = "internal";
185−
186− /// Every code, for tools and tests.
187− pub const ALL: &[&str] = &[
188− UNCLOSED_BRACKET,
189− UNBALANCED_QUOTE,
190− UNEXPECTED_BODY,
191− UNEXPECTED_ARGUMENT,
192− MISSING_ARGUMENT,
193− INVALID_LOOP,
194− INVALID_DEFINITION,
195− STRAY_ELSE,
196− MIXED_INDENTATION,
197− UNKNOWN_ELEMENT,
198− UNKNOWN_ATTRIBUTE,
199− UNKNOWN_PREFIX,
200− INVALID_PREFIX,
201− MISSING_VALUE,
202− HTML_ATTRIBUTE_FORM,
203− DUPLICATE_PAGE,
204− UNDEFINED_VARIABLE,
205− ATTRIBUTE_FROM_VARIABLE,
206− DUPLICATE_ATTRIBUTE,
207− INVALID_VALUE,
208− INVALID_COLOR,
209− INVALID_EXPRESSION,
210− INVALID_JSON,
211− SPLIT_VALUE,
212− TEXT_AS_URL,
213− UNUSED_VARIABLE,
214− UNUSED_BUNDLE,
215− UNUSED_FUNCTION,
216− RECURSIVE_CALL,
217− NO_SINGLE_ROOT,
218− MISSING_PARAMETER,
219− PARAMETER_FORM,
220− SHADOWS_BUILT_IN,
221− UNKNOWN_SLOT,
222− UNEXPECTED_CONTENT,
223− MISPLACED_SLOT,
224− INVALID_SLOT_NAME,
225− UNREADABLE_FILE,
226− CIRCULAR_INCLUDE,
227− CLASS_COLLISION,
228− UNSET_ENVIRONMENT,
229− NO_EFFECT,
230− BLOCK_IN_PARAGRAPH,
231− MISSING_ALT,
232− MISSING_INPUT_TYPE,
233− MISSING_LINK_TEXT,
234− MISSING_LABEL,
235− MISSING_TITLE,
236− MISSING_BUTTON_TEXT,
237− MISSING_CAPTIONS,
238− LOW_CONTRAST,
239− POSITIVE_TABINDEX,
240− DEEP_NESTING,
241− EMPTY_CONTAINER,
242− MISSING_BUTTON_TYPE,
243− INTERNAL,
244− ];
245−}
crates/htmlang-core/src/expr.rs+291−478
@@ -1,23 +1,17 @@
11//! Expressions: conditions (`@if $count > 2 and not $hidden`), computed
2−//! values (`@let gap = $base * 2`) and `${...}` in text and values
3−//! (`${if($featured, 24, 0)}`).
2+//! values (`@let gap = $base * 2`) and `if(cond, a, b)`.
43//!
54//! Expressions are tokenized and evaluated as a whole. Variables are looked
65//! up while evaluating, never pasted into the text first, so a value that
76//! happens to contain `==` or spaces can't change how an expression parses.
87//!
9−//! Only what decides the result is evaluated: `if()` evaluates the branch
10−//! it takes, `and` and `or` stop at the first side that decides. The rest
11−//! is still parsed (and its function names and argument counts checked),
12−//! so `$n != 0 and 10 / $n > 1` is false for `$n` = 0, not an error.
13−//!
148//! ```text
159//! expr := or
1610//! or := and ("or" and)*
1711//! and := not ("and" not)*
1812//! not := "not" not | compare
19−//! compare := range (("==" | "!=" | "<" | ">" | "<=" | ">=") range)?
20−//! range := sum (".." sum ("step" sum)?)?
13+//! compare := sum (("==" | "!=" | "<" | ">" | "<=" | ">=" | "contains"
14+//! | "starts-with" | "ends-with") sum)?
2115//! sum := product (("+" | "-") product)*
2216//! product := unary (("*" | "/" | "%") unary)*
2317//! unary := "-" unary | primary
@@ -25,89 +19,74 @@
2519//! | NAME "(" expr ("," expr)* ")" | "(" expr ")"
2620//! ```
2721//!
28−//! A bare word (`dark`, `red`, `#3b82f6`, `10px`) is text. Values are
29−//! typed (see `value.rs`, which also defines truthiness and comparison):
30−//! `$name` keeps whatever it holds, a list or a record included, and
31−//! `A..B` (with `step N`) is a list of whole numbers. Functions:
32−//! `if(cond, a, b)` (`b` may be left out: empty), tests (`contains(s, x)`,
33−//! `starts-with(s, x)`, `ends-with(s, x)`), text (`uppercase`, `lowercase`,
34−//! `capitalize`, `trim`, `length`, `reverse`, `truncate(s, n)`,
35−//! `replace(s, old, new)`, `default(s, fallback)`). A colour variant is
36−//! CSS, not a function here: `color-mix(in srgb, var(--brand), black 8%)`
37−//! is an attribute's value, written as it is.
38−//! `length`, `contains` and `reverse` work on the items of a list; the other
39−//! text functions take text, and a list is an error (a text with commas in
40−//! it is written in quotes or with `\,`, so it isn't a list).
41−//!
42−//! A `$name` ends as it does in text (see `interp.rs`), so `$post.title`
43−//! reads a field and `$a..$b` is two names. An undefined name is an error.
22+//! A bare word (`dark`, `red`, `#3b82f6`, `10px`) is a string. A variable
23+//! loaded from a JSON array is a list: `length` counts its items and
24+//! `contains` tests membership. Functions:
25+//! `if(cond, a, b)`, text (`uppercase`, `lowercase`, `capitalize`, `trim`,
26+//! `length`, `reverse`, `truncate(s, n)`, `replace(s, old, new)`,
27+//! `default(s, fallback)`) and colors (`lighten(c, pct)`, `darken(c, pct)`,
28+//! `alpha(c, a)`, `mix(c1, c2, pct)`). In text, `${expr}` interpolates an
29+//! expression.
4430
4531use std::fmt;
4632
47−use crate::interp::{self, Problem, Reference, Scope};
48−
49−pub use crate::value::Value;
50−
51−/// Why an expression has no value.
5233#[derive(Debug, Clone, PartialEq)]
53−pub enum Error {
54− /// `$name` has no definition; `offset` is where the `$` is.
55− Undefined { name: String, offset: usize },
56− /// Anything else: a syntax error, a type error, division by zero.
57− Invalid(String),
34+pub enum Value {
35+ Num(f64),
36+ Str(String),
37+ Bool(bool),
38+ /// A list's items as text (from a JSON array).
39+ List(Vec<String>),
5840}
5941
60−impl Error {
61− /// This error as a problem of a text in which the expression starts
62− /// at `base`.
63− pub(crate) fn at(self, base: usize) -> Problem {
42+impl Value {
43+ /// Empty strings, `false`, `0` and `"false"` / `"0"` are false.
44+ pub fn truthy(&self) -> bool {
6445 match self {
65− Error::Undefined { name, offset } => Problem::Undefined {
66− name,
67− offset: base + offset,
68− },
69− Error::Invalid(message) => Problem::Invalid {
70− message,
71− offset: base,
72− },
46+ Value::Bool(b) => *b,
47+ Value::Num(n) => *n != 0.0,
48+ Value::Str(s) => !s.is_empty() && s != "false" && s != "0",
49+ Value::List(items) => !items.is_empty(),
7350 }
7451 }
75−}
7652
77−impl From<String> for Error {
78− fn from(message: String) -> Self {
79− Error::Invalid(message)
53+ fn as_num(&self) -> Option<f64> {
54+ match self {
55+ Value::Num(n) => Some(*n),
56+ Value::Str(s) => s.trim().parse().ok(),
57+ Value::Bool(_) | Value::List(_) => None,
58+ }
8059 }
8160}
8261
83−impl fmt::Display for Error {
62+impl fmt::Display for Value {
8463 fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
8564 match self {
86− Error::Undefined { name, .. } => write!(f, "undefined variable '${}'", name),
87− Error::Invalid(message) => f.write_str(message),
65+ Value::Num(n) if n.fract() == 0.0 && n.abs() < 1e15 => write!(f, "{}", *n as i64),
66+ Value::Num(n) => write!(f, "{}", n),
67+ Value::Str(s) => f.write_str(s),
68+ Value::Bool(b) => write!(f, "{}", b),
69+ Value::List(items) => f.write_str(&items.join(", ")),
8870 }
8971 }
9072}
9173
92−/// Evaluate `src` with the variables of `scope`. An undefined variable is
93−/// an error; a field that a record doesn't have is empty.
94−pub fn eval(src: &str, scope: &dyn Scope) -> Result<Value, Error> {
95− let mut tokens = Vec::new();
96− tokenize(src, scope, 0, &mut tokens)?;
74+/// Resolves a variable name (the text after `$`). Returns `None` for
75+/// undefined variables.
76+pub type Resolver<'a> = &'a dyn Fn(&str) -> Option<Value>;
77+
78+/// Evaluate `src`. Undefined variables are empty strings.
79+pub fn eval(src: &str, resolve: Resolver) -> Result<Value, String> {
80+ let tokens = tokenize(src)?;
9781 let mut parser = Parser {
9882 tokens: &tokens,
9983 pos: 0,
100− scope,
101− skip: false,
84+ resolve,
10285 };
10386 let value = parser.expr()?;
10487 match parser.tokens.get(parser.pos) {
10588 None => Ok(value),
106− Some((tok, _)) => Err(Error::Invalid(format!(
107− "unexpected {} in `{}`",
108− tok,
109− src.trim()
110− ))),
89+ Some(tok) => Err(format!("unexpected {} in `{}`", tok, src.trim())),
11190 }
11291}
11392
@@ -138,116 +117,84 @@ impl fmt::Display for Token {
138117 }
139118}
140119
141−const OPERATORS: &[&str] = &[
142− "..", "==", "!=", "<=", ">=", "<", ">", "+", "-", "*", "/", "%",
143−];
144−
145−/// Read `src` into tokens, each with its byte offset (plus `base`).
146−/// Variable names end as in text (see `interp.rs`), and `${...}` is a
147−/// variable (`${name}`) or a parenthesized expression.
148−fn tokenize(
149− src: &str,
150− scope: &dyn Scope,
151− base: usize,
152− tokens: &mut Vec<(Token, usize)>,
153−) -> Result<(), Error> {
154− let is_word_char = |c: char| c.is_alphanumeric() || matches!(c, '#' | '.' | '_' | '-' | '%');
120+const OPERATORS: &[&str] = &["==", "!=", "<=", ">=", "<", ">", "+", "-", "*", "/", "%"];
121+
122+fn tokenize(src: &str) -> Result<Vec<Token>, String> {
123+ let chars: Vec<char> = src.chars().collect();
124+ let mut tokens = Vec::new();
155125 let mut i = 0;
156− while let Some(c) = src[i..].chars().next() {
157− let at = base + i;
126+ let is_word_char = |c: char| c.is_alphanumeric() || matches!(c, '#' | '.' | '_' | '-' | '%');
127+ while i < chars.len() {
128+ let c = chars[i];
158129 if c.is_whitespace() {
159− i += c.len_utf8();
130+ i += 1;
160131 } else if c == '(' {
161− tokens.push((Token::LParen, at));
132+ tokens.push(Token::LParen);
162133 i += 1;
163134 } else if c == ')' {
164− tokens.push((Token::RParen, at));
135+ tokens.push(Token::RParen);
165136 i += 1;
166137 } else if c == ',' {
167− tokens.push((Token::Comma, at));
138+ tokens.push(Token::Comma);
168139 i += 1;
169140 } else if c == '"' {
170141 let start = i + 1;
171− let end = src[start..]
172− .find('"')
142+ let end = chars[start..]
143+ .iter()
144+ .position(|&c| c == '"')
173145 .map(|p| start + p)
174146 .ok_or_else(|| format!("unclosed string in `{}`", src.trim()))?;
175− tokens.push((Token::Str(src[start..end].to_string()), at));
147+ tokens.push(Token::Str(chars[start..end].iter().collect()));
176148 i = end + 1;
177149 } else if c == '$' {
178− match interp::reference(&src[i + 1..], scope) {
179− Some((Reference::Var(path), len)) => {
180− tokens.push((Token::Var(path), at));
181− i += 1 + len;
182− }
183− Some((Reference::Expr(inner), len)) => {
184− tokens.push((Token::LParen, at));
185− tokenize(inner, scope, at + 2, tokens)?;
186− tokens.push((Token::RParen, at + len));
187− i += 1 + len;
188− }
189− None => {
190− let n = interp::custom_property_len(&src[i + 1..]);
191− return Err(Error::Invalid(match n {
192− 0 => format!("`$` without a variable name in `{}`", src.trim()),
193− n => interp::custom_property_message(&src[i + 1..i + 1 + n]),
194− }));
195− }
150+ let start = i + 1;
151+ let mut end = start;
152+ while end < chars.len() && is_var_char(chars[end]) {
153+ end += 1;
154+ }
155+ while end > start && chars[end - 1] == '.' {
156+ end -= 1;
196157 }
158+ if end == start {
159+ return Err(format!("`$` without a variable name in `{}`", src.trim()));
160+ }
161+ tokens.push(Token::Var(chars[start..end].iter().collect()));
162+ i = end;
197163 } else if let Some(op) = OPERATORS
198164 .iter()
199− .find(|op| src[i..].starts_with(**op))
165+ .find(|op| chars[i..].iter().take(op.len()).copied().eq(op.chars()))
200166 // A `-` followed by a letter starts a word (`-webkit-box`);
201167 // inside words (`ease-in`) it is consumed by the word itself.
202− .filter(|op| **op != "-" || !src[i + 1..].starts_with(char::is_alphabetic))
168+ .filter(|op| **op != "-" || !chars.get(i + 1).is_some_and(|c| c.is_alphabetic()))
203169 {
204− tokens.push((Token::Op(op), at));
170+ tokens.push(Token::Op(op));
205171 i += op.len();
206172 } else if is_word_char(c) {
207173 let start = i;
208− // A word ends at `..`, so `1..5` is a range
209− while let Some(c) = src[i..]
210− .chars()
211− .next()
212− .filter(|&c| is_word_char(c) && !src[i..].starts_with(".."))
213− {
214− i += c.len_utf8();
174+ while i < chars.len() && is_word_char(chars[i]) {
175+ i += 1;
215176 }
216− let word = &src[start..i];
217− tokens.push((
218− match word.parse::<f64>() {
219− Ok(n) if !word.ends_with('.') => Token::Num(n),
220− _ => Token::Word(word.to_string()),
221− },
222− at,
223− ));
177+ let word: String = chars[start..i].iter().collect();
178+ tokens.push(match word.parse::<f64>() {
179+ Ok(n) if !word.ends_with('.') => Token::Num(n),
180+ _ => Token::Word(word),
181+ });
224182 } else {
225− return Err(Error::Invalid(format!(
226− "unexpected `{}` in `{}`",
227− c,
228− src.trim()
229− )));
183+ return Err(format!("unexpected `{}` in `{}`", c, src.trim()));
230184 }
231185 }
232− Ok(())
186+ Ok(tokens)
233187}
234188
235189struct Parser<'a> {
236− tokens: &'a [(Token, usize)],
190+ tokens: &'a [Token],
237191 pos: usize,
238− scope: &'a dyn Scope,
239− /// Parsing a part whose value isn't needed (the branch `if()` doesn't
240− /// take, the side of `and`/`or` that doesn't decide): it is read and
241− /// checked for syntax, not evaluated.
242− skip: bool,
192+ resolve: Resolver<'a>,
243193}
244194
245−/// The value a skipped part stands for; nothing reads it.
246−const SKIPPED: Value = Value::Bool(false);
247−
248195impl Parser<'_> {
249196 fn peek(&self) -> Option<&Token> {
250− self.tokens.get(self.pos).map(|(token, _)| token)
197+ self.tokens.get(self.pos)
251198 }
252199
253200 fn eat_word(&mut self, word: &str) -> bool {
@@ -270,167 +217,122 @@ impl Parser<'_> {
270217 }
271218 }
272219
273− fn expect(&mut self, token: Token) -> Result<(), Error> {
220+ fn expect(&mut self, token: Token) -> Result<(), String> {
274221 match self.peek() {
275222 Some(t) if *t == token => {
276223 self.pos += 1;
277224 Ok(())
278225 }
279− Some(t) => Err(format!("expected {} but found {}", token, t).into()),
280− None => Err(format!("expected {} at the end", token).into()),
226+ Some(t) => Err(format!("expected {} but found {}", token, t)),
227+ None => Err(format!("expected {} at the end", token)),
281228 }
282229 }
283230
284− /// Parse with `f`, skipping evaluation when `skip` (or when already
285− /// skipping).
286− fn skipping(
287− &mut self,
288− skip: bool,
289− f: impl FnOnce(&mut Self) -> Result<Value, Error>,
290− ) -> Result<Value, Error> {
291− let outer = self.skip;
292− self.skip |= skip;
293− let value = f(self);
294− self.skip = outer;
295− value
296− }
297−
298− fn expr(&mut self) -> Result<Value, Error> {
231+ fn expr(&mut self) -> Result<Value, String> {
299232 let mut left = self.and()?;
300233 while self.eat_word("or") {
301− let decided = left.truthy();
302− let right = self.skipping(decided, Self::and)?;
303− left = Value::Bool(decided || right.truthy());
234+ let right = self.and()?;
235+ left = Value::Bool(left.truthy() || right.truthy());
304236 }
305237 Ok(left)
306238 }
307239
308− fn and(&mut self) -> Result<Value, Error> {
240+ fn and(&mut self) -> Result<Value, String> {
309241 let mut left = self.not()?;
310242 while self.eat_word("and") {
311− let decided = !left.truthy();
312− let right = self.skipping(decided, Self::not)?;
313− left = Value::Bool(!decided && right.truthy());
243+ let right = self.not()?;
244+ left = Value::Bool(left.truthy() && right.truthy());
314245 }
315246 Ok(left)
316247 }
317248
318− fn not(&mut self) -> Result<Value, Error> {
249+ fn not(&mut self) -> Result<Value, String> {
319250 if self.eat_word("not") {
320251 return Ok(Value::Bool(!self.not()?.truthy()));
321252 }
322253 self.compare()
323254 }
324255
325− fn compare(&mut self) -> Result<Value, Error> {
326− let left = self.range()?;
327− let Some(op) = self.eat_op(&["==", "!=", "<=", ">=", "<", ">"]) else {
256+ fn compare(&mut self) -> Result<Value, String> {
257+ let left = self.sum()?;
258+ let op = if let Some(op) = self.eat_op(&["==", "!=", "<=", ">=", "<", ">"]) {
259+ op
260+ } else if self.eat_word("contains") {
261+ "contains"
262+ } else if self.eat_word("starts-with") {
263+ "starts-with"
264+ } else if self.eat_word("ends-with") {
265+ "ends-with"
266+ } else {
328267 return Ok(left);
329268 };
330− let right = self.range()?;
331− if self.skip {
332− return Ok(SKIPPED);
333− }
334− Ok(Value::Bool(left.compare(op, &right)?))
335− }
336−
337− /// `A..B` or `A..B step N`: the whole numbers from A to B.
338− fn range(&mut self) -> Result<Value, Error> {
339− let start = self.sum()?;
340− if self.eat_op(&[".."]).is_none() {
341− return Ok(start);
342− }
343− let end = self.sum()?;
344− let step = match self.eat_word("step") {
345− true => Some(self.sum()?),
346− false => None,
347− };
348− if self.skip {
349− return Ok(SKIPPED);
350− }
351− let number = |value: &Value| {
352− value.as_num().ok_or_else(|| {
353− Error::Invalid(format!(
354− "a range goes from one number to another, not from {} (`{}`)",
355− value.describe(),
356− value
357− ))
358− })
359− };
360− let step = match &step {
361− Some(step) => number(step)?,
362− None => 1.0,
363− };
364− Ok(crate::value::range(number(&start)?, number(&end)?, step)?)
269+ let right = self.sum()?;
270+ let numbers = left.as_num().zip(right.as_num());
271+ let (l, r) = (left.to_string(), right.to_string());
272+ Ok(Value::Bool(match (op, numbers) {
273+ ("==", Some((a, b))) => a == b,
274+ ("!=", Some((a, b))) => a != b,
275+ ("<", Some((a, b))) => a < b,
276+ (">", Some((a, b))) => a > b,
277+ ("<=", Some((a, b))) => a <= b,
278+ (">=", Some((a, b))) => a >= b,
279+ ("==", None) => l == r,
280+ ("!=", None) => l != r,
281+ ("<", None) => l < r,
282+ (">", None) => l > r,
283+ ("<=", None) => l <= r,
284+ (">=", None) => l >= r,
285+ ("contains", _) => match &left {
286+ Value::List(items) => items.contains(&r),
287+ _ => l.contains(&r),
288+ },
289+ ("starts-with", _) => l.starts_with(&r),
290+ ("ends-with", _) => l.ends_with(&r),
291+ _ => unreachable!(),
292+ }))
365293 }
366294
367− fn sum(&mut self) -> Result<Value, Error> {
295+ fn sum(&mut self) -> Result<Value, String> {
368296 let mut left = self.product()?;
369297 while let Some(op) = self.eat_op(&["+", "-"]) {
370298 let right = self.product()?;
371− left = self.arithmetic(op, &left, &right)?;
299+ left = arithmetic(op, &left, &right)?;
372300 }
373301 Ok(left)
374302 }
375303
376− fn product(&mut self) -> Result<Value, Error> {
304+ fn product(&mut self) -> Result<Value, String> {
377305 let mut left = self.unary()?;
378306 while let Some(op) = self.eat_op(&["*", "/", "%"]) {
379307 let right = self.unary()?;
380− left = self.arithmetic(op, &left, &right)?;
308+ left = arithmetic(op, &left, &right)?;
381309 }
382310 Ok(left)
383311 }
384312
385− fn unary(&mut self) -> Result<Value, Error> {
313+ fn unary(&mut self) -> Result<Value, String> {
386314 if self.eat_op(&["-"]).is_some() {
387315 let value = self.unary()?;
388− if self.skip {
389− return Ok(SKIPPED);
390− }
391316 return value
392317 .as_num()
393318 .map(|n| Value::Num(-n))
394− .ok_or_else(|| Error::Invalid(format!("cannot negate `{}`", value)));
319+ .ok_or_else(|| format!("cannot negate `{}`", value));
395320 }
396321 self.primary()
397322 }
398323
399− fn primary(&mut self) -> Result<Value, Error> {
400− let (token, at) = self
401− .tokens
402− .get(self.pos)
324+ fn primary(&mut self) -> Result<Value, String> {
325+ let token = self
326+ .peek()
403327 .cloned()
404328 .ok_or_else(|| "expected a value at the end".to_string())?;
405329 self.pos += 1;
406330 match token {
407331 Token::Num(n) => Ok(Value::Num(n)),
408− Token::Str(_) | Token::Var(_) if self.skip => Ok(SKIPPED),
409− Token::Str(s) => {
410− let (text, problems) = interp::interpolate(&s, self.scope);
411− match problems.into_iter().next() {
412− None => Ok(Value::Str(text)),
413− Some(Problem::Undefined { name, offset }) => Err(Error::Undefined {
414− name,
415− offset: at + 1 + offset,
416− }),
417− Some(Problem::Invalid { message, .. } | Problem::Record { message, .. }) => {
418− Err(Error::Invalid(message))
419− }
420− Some(Problem::CustomProperty { name, .. }) => {
421− Err(Error::Invalid(interp::custom_property_message(&name)))
422− }
423− }
424− }
425− Token::Var(name) => {
426− interp::resolve(&name, self.scope).ok_or(Error::Undefined { name, offset: at })
427− }
332+ Token::Str(s) => Ok(Value::Str(interpolate(&s, self.resolve))),
333+ Token::Var(name) => Ok((self.resolve)(&name).unwrap_or(Value::Str(String::new()))),
428334 Token::Word(w) if w == "true" => Ok(Value::Bool(true)),
429335 Token::Word(w) if w == "false" => Ok(Value::Bool(false)),
430− Token::Word(name) if name == "if" && self.peek() == Some(&Token::LParen) => {
431− self.pos += 1;
432− self.choice()
433− }
434336 Token::Word(name) if self.peek() == Some(&Token::LParen) => {
435337 self.pos += 1;
436338 let mut args = Vec::new();
@@ -442,11 +344,7 @@ impl Parser<'_> {
442344 }
443345 }
444346 self.expect(Token::RParen)?;
445− check_call(&name, args.len())?;
446− if self.skip {
447− return Ok(SKIPPED);
448− }
449− Ok(call(&name, args)?)
347+ call(&name, args)
450348 }
451349 Token::Word(w) => Ok(Value::Str(w)),
452350 Token::LParen => {
@@ -454,46 +352,11 @@ impl Parser<'_> {
454352 self.expect(Token::RParen)?;
455353 Ok(value)
456354 }
457− other => Err(format!("unexpected {}", other).into()),
355+ other => Err(format!("unexpected {}", other)),
458356 }
459357 }
460358}
461359
462−impl Parser<'_> {
463− /// `if(cond, a, b)` after its `(`: the branch that `cond` picks is
464− /// evaluated, the other only read. Without `b`, a false `cond` gives
465− /// an empty value.
466− fn choice(&mut self) -> Result<Value, Error> {
467− let arguments =
468− || Error::Invalid("if() takes 2 or 3 arguments: if(CONDITION, A, B)".into());
469− let condition = self.expr()?;
470− match self.peek() {
471− Some(Token::RParen) | None => return Err(arguments()),
472− _ => self.expect(Token::Comma)?,
473− }
474− let taken = condition.truthy();
475− let then = self.skipping(!taken, Self::expr)?;
476− let otherwise = if self.peek() == Some(&Token::Comma) {
477− self.pos += 1;
478− self.skipping(taken, Self::expr)?
479− } else {
480− Value::Str(String::new())
481− };
482− if self.peek() == Some(&Token::Comma) {
483− return Err(arguments());
484− }
485− self.expect(Token::RParen)?;
486− Ok(if taken { then } else { otherwise })
487− }
488−
489− fn arithmetic(&self, op: &str, left: &Value, right: &Value) -> Result<Value, Error> {
490− if self.skip {
491− return Ok(SKIPPED);
492− }
493− Ok(arithmetic(op, left, right)?)
494− }
495−}
496−
497360fn arithmetic(op: &str, left: &Value, right: &Value) -> Result<Value, String> {
498361 let (Some(a), Some(b)) = (left.as_num(), right.as_num()) else {
499362 return Err(format!("`{} {} {}` needs numbers", left, op, right));
@@ -510,137 +373,177 @@ fn arithmetic(op: &str, left: &Value, right: &Value) -> Result<Value, String> {
510373 }))
511374}
512375
513−/// The built-in functions (other than `if`) and how many arguments each
514−/// takes.
515−const FUNCTIONS: &[(&str, usize)] = &[
516− ("contains", 2),
517− ("starts-with", 2),
518− ("ends-with", 2),
519− ("uppercase", 1),
520− ("lowercase", 1),
521− ("capitalize", 1),
522− ("trim", 1),
523− ("length", 1),
524− ("reverse", 1),
525− ("truncate", 2),
526− ("replace", 3),
527− ("default", 2),
528−];
529−
530−/// Check that `name` is a built-in function and gets `count` arguments.
531−fn check_call(name: &str, count: usize) -> Result<(), String> {
532− let Some(&(_, arity)) = FUNCTIONS.iter().find(|(n, _)| *n == name) else {
533− return Err(format!("unknown function `{}()`", name));
534− };
535− if count == arity {
536− Ok(())
537− } else {
538− Err(format!(
539− "{}() takes {} argument{}",
540− name,
541− arity,
542− if arity == 1 { "" } else { "s" }
543− ))
544− }
376+fn is_var_char(c: char) -> bool {
377+ c.is_alphanumeric() || matches!(c, '_' | '-' | '.')
545378}
546379
547−/// Call a built-in function with the right number of arguments (see
548−/// [`check_call`]). The text functions take text (a number or `true` and
549−/// `false` count as their text); a list or a record is an error, except
550−/// for `length`, `contains`, `reverse` and `default`, which also work on
551−/// a list's items.
380+/// Call a built-in function.
552381fn call(name: &str, args: Vec<Value>) -> Result<Value, String> {
553− let text = |i: usize| -> Result<String, String> {
554− match &args[i] {
555− value @ Value::List(_) => Err(format!(
556− "{}() takes text, but `{}` is {}: to write one text with commas in \
557− it, quote it or write `\\,`",
558− name,
559− value,
560− value.describe()
561− )),
562− Value::Record(_) => Err(format!(
563− "{}() takes text, but argument {} is a record: use one of its fields",
564− name,
565− i + 1
566− )),
567− value => Ok(value.to_string()),
568− }
569− };
382+ let text = |i: usize| args.get(i).map(|v| v.to_string()).unwrap_or_default();
570383 let num = |i: usize| {
571384 args.get(i)
572385 .and_then(Value::as_num)
573386 .ok_or_else(|| format!("{}() needs a number as argument {}", name, i + 1))
574387 };
388+ let arity = |n: usize| {
389+ if args.len() == n {
390+ Ok(())
391+ } else {
392+ Err(format!("{}() takes {} argument{}", name, n, if n == 1 { "" } else { "s" }))
393+ }
394+ };
395+ let color = |rgb: (u8, u8, u8)| Value::Str(format!("#{:02x}{:02x}{:02x}", rgb.0, rgb.1, rgb.2));
575396 Ok(match name {
576− "contains" => Value::Bool(match &args[0] {
577− Value::List(list) => list.items.iter().any(|item| item.equals(&args[1])),
578− _ => text(0)?.contains(&text(1)?),
579− }),
580− "starts-with" => Value::Bool(text(0)?.starts_with(&text(1)?)),
581− "ends-with" => Value::Bool(text(0)?.ends_with(&text(1)?)),
582− "uppercase" => Value::Str(text(0)?.to_uppercase()),
583− "lowercase" => Value::Str(text(0)?.to_lowercase()),
397+ "if" => {
398+ arity(3)?;
399+ let mut args = args;
400+ let otherwise = args.pop().unwrap();
401+ let then = args.pop().unwrap();
402+ if args[0].truthy() { then } else { otherwise }
403+ }
404+ "uppercase" => { arity(1)?; Value::Str(text(0).to_uppercase()) }
405+ "lowercase" => { arity(1)?; Value::Str(text(0).to_lowercase()) }
584406 "capitalize" => {
585− let s = text(0)?;
407+ arity(1)?;
408+ let s = text(0);
586409 let mut chars = s.chars();
587410 Value::Str(match chars.next() {
588411 Some(c) => format!("{}{}", c.to_uppercase(), chars.as_str()),
589412 None => String::new(),
590413 })
591414 }
592− "trim" => Value::Str(text(0)?.trim().to_string()),
593− "length" => Value::Num(match &args[0] {
594− Value::List(list) => list.items.len(),
595− Value::Record(fields) => fields.len(),
596− _ => text(0)?.chars().count(),
597− } as f64),
598− "reverse" => match &args[0] {
599− Value::List(list) => Value::list(list.items.iter().rev().cloned().collect()),
600− _ => Value::Str(text(0)?.chars().rev().collect()),
601− },
415+ "trim" => { arity(1)?; Value::Str(text(0).trim().to_string()) }
416+ "length" => {
417+ arity(1)?;
418+ Value::Num(match &args[0] {
419+ Value::List(items) => items.len(),
420+ other => other.to_string().chars().count(),
421+ } as f64)
422+ }
423+ "reverse" => { arity(1)?; Value::Str(text(0).chars().rev().collect()) }
602424 "truncate" => {
603− let (s, n) = (text(0)?, num(1)? as usize);
425+ arity(2)?;
426+ let (s, n) = (text(0), num(1)? as usize);
604427 Value::Str(if s.chars().count() > n {
605428 format!("{}...", s.chars().take(n).collect::<String>())
606429 } else {
607430 s
608431 })
609432 }
610− "replace" => Value::Str(text(0)?.replace(&text(1)?, &text(2)?)),
433+ "replace" => { arity(3)?; Value::Str(text(0).replace(&text(1), &text(2))) }
611434 "default" => {
612− let empty = match &args[0] {
613− Value::List(list) => list.items.is_empty(),
614− Value::Record(_) => false,
615− value => value.to_string().is_empty(),
435+ arity(2)?;
436+ let s = text(0);
437+ Value::Str(if s.is_empty() { text(1) } else { s })
438+ }
439+ "lighten" | "darken" | "alpha" | "mix" => {
440+ let expected = if name == "mix" { 3 } else { 2 };
441+ arity(expected)?;
442+ let Some(rgb) = parse_hex_rgb(&text(0)) else {
443+ return Err(format!("{}() needs a hex color, got `{}`", name, text(0)));
616444 };
617− let mut args = args;
618− args.swap_remove(usize::from(empty))
445+ match name {
446+ "lighten" => color(lighten_color(rgb, num(1)? / 100.0)),
447+ "darken" => color(darken_color(rgb, num(1)? / 100.0)),
448+ "alpha" => {
449+ let a = (num(1)?.clamp(0.0, 1.0) * 255.0) as u8;
450+ Value::Str(format!("#{:02x}{:02x}{:02x}{:02x}", rgb.0, rgb.1, rgb.2, a))
451+ }
452+ _ => {
453+ let Some(other) = parse_hex_rgb(&text(1)) else {
454+ return Err(format!("mix() needs a hex color, got `{}`", text(1)));
455+ };
456+ color(mix_colors(rgb, other, num(2)? / 100.0))
457+ }
458+ }
619459 }
620460 _ => return Err(format!("unknown function `{}()`", name)),
621461 })
622462}
623463
464+pub(crate) fn parse_hex_rgb(s: &str) -> Option<(u8, u8, u8)> {
465+ let s = s.strip_prefix('#')?;
466+ if !s.bytes().all(|b| b.is_ascii_hexdigit()) {
467+ return None;
468+ }
469+ match s.len() {
470+ 3 => {
471+ let r = u8::from_str_radix(&s[0..1], 16).ok()?;
472+ let g = u8::from_str_radix(&s[1..2], 16).ok()?;
473+ let b = u8::from_str_radix(&s[2..3], 16).ok()?;
474+ Some((r * 17, g * 17, b * 17))
475+ }
476+ 6 => {
477+ let r = u8::from_str_radix(&s[0..2], 16).ok()?;
478+ let g = u8::from_str_radix(&s[2..4], 16).ok()?;
479+ let b = u8::from_str_radix(&s[4..6], 16).ok()?;
480+ Some((r, g, b))
481+ }
482+ _ => None,
483+ }
484+}
485+
486+fn lighten_color(rgb: (u8, u8, u8), amount: f64) -> (u8, u8, u8) {
487+ let r = rgb.0 as f64 + (255.0 - rgb.0 as f64) * amount.clamp(0.0, 1.0);
488+ let g = rgb.1 as f64 + (255.0 - rgb.1 as f64) * amount.clamp(0.0, 1.0);
489+ let b = rgb.2 as f64 + (255.0 - rgb.2 as f64) * amount.clamp(0.0, 1.0);
490+ (r.round() as u8, g.round() as u8, b.round() as u8)
491+}
492+
493+fn darken_color(rgb: (u8, u8, u8), amount: f64) -> (u8, u8, u8) {
494+ let factor = 1.0 - amount.clamp(0.0, 1.0);
495+ let r = (rgb.0 as f64 * factor).round() as u8;
496+ let g = (rgb.1 as f64 * factor).round() as u8;
497+ let b = (rgb.2 as f64 * factor).round() as u8;
498+ (r, g, b)
499+}
500+
501+fn mix_colors(c1: (u8, u8, u8), c2: (u8, u8, u8), weight: f64) -> (u8, u8, u8) {
502+ let w = weight.clamp(0.0, 1.0);
503+ let r = (c1.0 as f64 * (1.0 - w) + c2.0 as f64 * w).round() as u8;
504+ let g = (c1.1 as f64 * (1.0 - w) + c2.1 as f64 * w).round() as u8;
505+ let b = (c1.2 as f64 * (1.0 - w) + c2.2 as f64 * w).round() as u8;
506+ (r, g, b)
507+}
508+
509+
510+/// Replace `$name` references inside a string literal.
511+fn interpolate(s: &str, resolve: Resolver) -> String {
512+ let mut out = String::with_capacity(s.len());
513+ let mut rest = s;
514+ while let Some(pos) = rest.find('$') {
515+ out.push_str(&rest[..pos]);
516+ let after = &rest[pos + 1..];
517+ let end = after.find(|c: char| !is_var_char(c)).unwrap_or(after.len());
518+ if end == 0 {
519+ out.push('$');
520+ } else {
521+ out.push_str(&resolve(&after[..end]).map(|v| v.to_string()).unwrap_or_default());
522+ }
523+ rest = &after[end..];
524+ }
525+ out.push_str(rest);
526+ out
527+}
528+
624529#[cfg(test)]
625530mod tests {
626531 use super::*;
627532
628− use crate::interp::tests::{Map, record, text_list};
629−
630− fn scope() -> Map {
631− Map::new(&[
632− ("count", "3"),
633− ("name", "World"),
634− ("theme", "dark"),
635− ("tricky", "a == b"),
636− ("empty", ""),
637− ])
638− .with("tags", text_list(&["rust", "web dev"]))
639− .with("post", record(&[("title", "Hi")]))
640− }
641−
642533 fn ev(src: &str) -> Value {
643− eval(src, &scope()).unwrap()
534+ let resolve = |name: &str| {
535+ let text = |s: &str| Some(Value::Str(s.to_string()));
536+ match name {
537+ "tags" => Some(Value::List(vec!["rust".into(), "web dev".into()])),
538+ "count" => text("3"),
539+ "name" => text("World"),
540+ "theme" => text("dark"),
541+ "tricky" => text("a == b"),
542+ "empty" => text(""),
543+ _ => None,
544+ }
545+ };
546+ eval(src, &resolve).unwrap()
644547 }
645548
646549 #[test]
@@ -658,8 +561,7 @@ mod tests {
658561 assert!(ev("$theme == dark").truthy());
659562 assert!(ev("$theme != light and not $empty").truthy());
660563 assert!(!ev("$count < 2 or $empty").truthy());
661− assert!(ev("contains($name, or)").truthy());
662− assert!(ev("starts-with($name, Wo) and ends-with($name, ld)").truthy());
564+ assert!(ev("$name contains or").truthy());
663565 assert!(ev("uppercase($name) == WORLD").truthy());
664566 assert!(ev("#3b82f6 != red").truthy());
665567 }
@@ -675,62 +577,7 @@ mod tests {
675577 fn strings_and_if() {
676578 assert_eq!(ev("\"Hi $name!\"").to_string(), "Hi World!");
677579 assert_eq!(ev("if($count > 2, big, small)").to_string(), "big");
678− assert_eq!(ev("${name}").to_string(), "World");
679− assert_eq!(ev("${$count + 1} * 2").to_string(), "8");
680− }
681−
682− #[test]
683− fn only_the_branch_taken_is_evaluated() {
684− let zero = Map::new(&[("n", "0"), ("on", "true")]);
685− let ev0 = |src: &str| eval(src, &zero).map(|v| v.to_string());
686− assert_eq!(ev0("if($n != 0, 10 / $n, 0)"), Ok("0".into()));
687− assert_eq!(ev0("if($n == 0, none, 10 / $n)"), Ok("none".into()));
688− assert_eq!(ev0("if($on, 24)"), Ok("24".into()));
689− assert_eq!(ev0("if(not $on, 24)"), Ok("".into()));
690− assert_eq!(
691− ev0("if($on, \"#10b981\", \"var(--muted)\")"),
692− Ok("#10b981".into())
693− );
694− // and / or stop at the side that decides
695− assert_eq!(ev0("$n != 0 and 10 / $n > 1"), Ok("false".into()));
696− assert_eq!(ev0("$n == 0 or 10 / $n > 1"), Ok("true".into()));
697− assert_eq!(ev0("$on or truncate(abc, x)"), Ok("true".into()));
698− // The branch not taken is still read: its syntax, function names and
699− // argument counts are checked; its variables and values are not
700− assert_eq!(ev0("if($on, 1, $undefined)"), Ok("1".into()));
701− assert!(eval("if($on, 1, (2)", &zero).is_err());
702− assert!(eval("if($on, 1, nope(2))", &zero).is_err());
703− assert!(eval("if($on, 1, uppercase(a, b))", &zero).is_err());
704− // if() itself takes 2 or 3 arguments
705− assert!(eval("if($on)", &zero).is_err());
706− assert!(eval("if($on, 1, 2, 3)", &zero).is_err());
707− // Something else after the condition is what is reported
708− let error = eval("if($n.x, 1, 2)", &zero).unwrap_err().to_string();
709− assert!(error.contains("`.x`"), "{}", error);
710− // The taken branch still reports its errors
711− assert!(eval("if($n == 0, 10 / $n, 0)", &zero).is_err());
712− assert!(eval("$n == 0 and 10 / $n > 1", &zero).is_err());
713− }
714−
715− #[test]
716− fn names_and_fields() {
717− assert_eq!(ev("$post.title").to_string(), "Hi");
718− // A field the record doesn't have is empty
719− assert_eq!(ev("default($post.draft, no)").to_string(), "no");
720− assert_eq!(
721− eval("$missing == 1", &scope()),
722− Err(Error::Undefined {
723− name: "missing".into(),
724− offset: 0
725− })
726− );
727− assert_eq!(
728− eval("\"a $nope\"", &scope()),
729− Err(Error::Undefined {
730− name: "nope".into(),
731− offset: 3
732− })
733− );
580+ assert_eq!(ev("$missing").to_string(), "");
734581 }
735582
736583 #[test]
@@ -740,62 +587,28 @@ mod tests {
740587 assert_eq!(ev("truncate($name, 2)").to_string(), "Wo...");
741588 assert_eq!(ev("replace($name, o, 0)").to_string(), "W0rld");
742589 assert_eq!(ev("default($empty, none)").to_string(), "none");
590+ assert_eq!(ev("darken(#ffffff, 50)").to_string(), "#808080");
591+ assert_eq!(ev("mix(#000000, #ffffff, 50)").to_string(), "#808080");
592+ assert_eq!(ev("alpha(#3b82f6, 0.5)").to_string(), "#3b82f67f");
743593 }
744594
745595 #[test]
746596 fn lists() {
747597 assert_eq!(ev("length($tags)").to_string(), "2");
748− assert!(ev("contains($tags, \"web dev\")").truthy());
749− assert!(!ev("contains($tags, web)").truthy());
598+ assert!(ev("$tags contains \"web dev\"").truthy());
599+ assert!(!ev("$tags contains web").truthy());
750600 assert_eq!(ev("$tags").to_string(), "rust, web dev");
751− assert_eq!(ev("reverse($tags)").to_string(), "web dev, rust");
752− assert_eq!(ev("default($tags, none)").to_string(), "rust, web dev");
753− // Text functions don't guess what a list means
754− let error = eval("uppercase($tags)", &scope()).unwrap_err().to_string();
755− assert!(error.contains("a list of 2 items"), "{}", error);
756− assert!(eval("truncate($post, 2)", &scope()).is_err());
757− }
758−
759− #[test]
760− fn ranges() {
761− assert_eq!(ev("1..5").to_string(), "1, 2, 3, 4, 5");
762− assert_eq!(ev("reverse(1..5)").to_string(), "5, 4, 3, 2, 1");
763− assert_eq!(ev("length(0..10 step 5)").to_string(), "3");
764− assert_eq!(ev("$count..1").to_string(), "3, 2, 1");
765− assert_eq!(ev("1..$count + 1").to_string(), "1, 2, 3, 4");
766− assert!(ev("contains(1..3, 2)").truthy());
767− assert!(eval("1..x", &scope()).is_err());
768− assert!(eval("1..5 step 0", &scope()).is_err());
769− }
770−
771− #[test]
772− fn truthiness_and_comparison_follow_the_types() {
773− let zero = Map::new(&[("z", "0.0"), ("upper", "#FFF")]);
774− assert!(!eval("$z", &zero).unwrap().truthy());
775− assert!(eval("$z == 0", &zero).unwrap().truthy());
776− assert!(!eval("$upper == #fff", &zero).unwrap().truthy());
777− assert_eq!(ev("100 / 3").to_string(), "33.3333");
778− assert!(eval("1..3 < 2", &scope()).is_err());
779601 }
780602
781603 #[test]
782604 fn errors_are_reported() {
783− let none = Map::new(&[]);
605+ let none = |_: &str| None;
784606 assert!(eval("dark * 2", &none).is_err());
785607 assert!(eval("1 +", &none).is_err());
786608 assert!(eval("(1", &none).is_err());
787609 assert!(eval("1 / 0", &none).is_err());
788610 assert!(eval("nope(1)", &none).is_err());
789611 assert!(eval("uppercase(a, b)", &none).is_err());
790− // Colour maths is CSS's (`color-mix()`), and a custom property is
791− // read with `var()`
792− for gone in ["darken", "lighten", "alpha", "mix"] {
793− let error = eval(&format!("{}(red, 10)", gone), &none).unwrap_err();
794− assert!(error.to_string().contains("unknown function"), "{}", error);
795− }
796− let error = eval("$--brand == red", &none).unwrap_err().to_string();
797− assert!(error.contains("`var(--brand)`"), "{}", error);
798− let error = eval("\"a $--brand\"", &none).unwrap_err().to_string();
799− assert!(error.contains("`var(--brand)`"), "{}", error);
612+ assert!(eval("darken(red, 10)", &none).is_err());
800613 }
801614}
crates/htmlang-core/src/interp.rsdeleted−651
@@ -1,651 +0,0 @@
1−//! Variables in htmlang strings: `$name`, `$record.field` and `${...}`.
2−//!
3−//! The syntax tree finds every slot first: a run of text, an attribute's
4−//! value, an element's argument, a `@let` value, a file path, the title of
5−//! `@page`, the value of `@meta`. Each slot is then interpolated here, once.
6−//! A reference fills its own slot, and what it inserts is never read again
7−//! as htmlang: a value can't become an attribute name, a whole attribute, a
8−//! comma between attributes, markup or another `$name`.
9−//!
10−//! - `$` followed by a letter or `_` starts a name, which goes on with
11−//! letters, digits, `_` and `-` (a `-` only when a name character follows
12−//! it).
13−//! - `$--name` is an error: a custom property is read one way, with
14−//! `var(--name)`, in the browser, so it follows a token redefined under
15−//! `dark:`. See [`custom_property_len`].
16−//! - `.field` continues the name only when the value is a record or a list
17−//! (`$post.title`, `$tags.0`). After `@let lang fr`, `$lang.json` is
18−//! `fr.json`, and `$a..$b` is two names.
19−//! - `${name}` is the same name, delimited (`${size}px`), and `${EXPR}`
20−//! inserts the value of an expression (see `expr.rs`).
21−//! - A `$` before anything else is text: `$5`, `$$`, a `$` at the end.
22−//! - An undefined name is an error. A field that a record doesn't have is
23−//! empty, and so are its fields (`$post.author.name` when `$post` has no
24−//! `author`), so optional fields of `@data` records work.
25−//! - Quoted text (`@let arrow "→ "`, `@card [quote "→ "]`) remembers its
26−//! quotes: a CSS value gets them (`content $arrow` is `content:"→ "`),
27−//! text and HTML attribute values don't. See [`Sink`].
28−
29−use crate::expr;
30−use crate::value::Value;
31−
32−/// The variables in scope, as the evaluator stores them.
33−pub trait Scope {
34− /// The value of a variable, by its name (without fields).
35− fn get(&self, name: &str) -> Option<Value>;
36−}
37−
38−/// Where a slot's value goes, which decides what quoted text inserts.
39−#[derive(Clone, Copy, Debug, PartialEq, Eq)]
40−pub enum Sink {
41− /// Text, an HTML attribute value, a path, a parameter: quoted text
42− /// inserts what it says, without the quotes.
43− Text,
44− /// A CSS value: quoted text inserts itself with its quotes, or, inside a
45− /// quoted string of the value, what it says with `"` escaped as `\"`.
46− Css,
47−}
48−
49−/// Whether a CSS value is inside a quoted string after `text`, when it
50−/// was (`inside`) before it. A backslash inside a string escapes the next
51−/// character.
52−fn css_string_after(text: &str, mut inside: bool) -> bool {
53− let mut chars = text.chars();
54− while let Some(c) = chars.next() {
55− match c {
56− '\\' if inside => {
57− chars.next();
58− }
59− '"' => inside = !inside,
60− _ => {}
61− }
62− }
63− inside
64−}
65−
66−/// `text` as it goes inside a CSS string: `"` escaped as `\"`. A backslash
67−/// and the character after it are a CSS escape and stay as written
68−/// (`\201C`), but a backslash at the end is doubled, so it can't escape
69−/// the rest of the string (`a\` gives `a\\`).
70−pub fn css_string_body(text: &str) -> String {
71− let mut out = String::with_capacity(text.len());
72− let mut chars = text.chars();
73− while let Some(c) = chars.next() {
74− match c {
75− '\\' => {
76− out.push('\\');
77− out.push(chars.next().unwrap_or('\\'));
78− }
79− '"' => out.push_str("\\\""),
80− _ => out.push(c),
81− }
82− }
83− out
84−}
85−
86−/// A problem found while interpolating, at a byte offset into the text.
87−#[derive(Debug, Clone, PartialEq)]
88−pub enum Problem {
89− /// A name with no definition.
90− Undefined { name: String, offset: usize },
91− /// `$--name`: a custom property, which is read with `var(--name)`.
92− CustomProperty { name: String, offset: usize },
93− /// A `${...}` whose expression doesn't evaluate.
94− Invalid { message: String, offset: usize },
95− /// A record put where text goes, which it has none of: it would print
96− /// nothing.
97− Record { message: String, offset: usize },
98−}
99−
100−/// The problem with putting `value`, written `written`, where text goes:
101−/// a record has no text.
102−fn no_text(written: &str, value: &Value, offset: usize) -> Option<Problem> {
103− let name = written.strip_prefix('$').map(|name| {
104− name.strip_prefix('{')
105− .and_then(|n| n.strip_suffix('}'))
106− .map_or(name, str::trim)
107− });
108− let fields = match value {
109− Value::Record(fields) => fields,
110− // A list of records, which would print only what isn't a record
111− Value::List(list)
112− if list.written.is_none()
113− && list
114− .items
115− .iter()
116− .any(|item| matches!(item, Value::Record(_))) =>
117− {
118− let example = match (name, list.items.first()) {
119− (Some(name), Some(Value::Record(fields))) if is_path(name) => {
120− match fields.first() {
121− Some((field, _)) => format!(", such as `${}.0.{}`", name, field),
122− None => String::new(),
123− }
124− }
125− _ => String::new(),
126− };
127− return Some(Problem::Record {
128− message: format!(
129− "'{}' is a list of records, which has no text of its own: loop over it \
130− with @each, or write a field of one of its items{}",
131− written, example
132− ),
133− offset,
134− });
135− }
136− _ => return None,
137− };
138− let example = match (name, fields.first()) {
139− (Some(name), Some((field, _))) if is_path(name) => {
140− format!(", such as `${}.{}`", name, field)
141− }
142− _ => String::new(),
143− };
144− Some(Problem::Record {
145− message: format!(
146− "'{}' is a record, which has no text of its own: write one of its fields{}",
147− written, example
148− ),
149− offset,
150− })
151−}
152−
153−fn is_name_char(c: char) -> bool {
154− c.is_alphanumeric() || c == '_'
155−}
156−
157−/// The length of a word at the start of `s` whose first character passes
158−/// `first`: name characters, with `-` between them.
159−fn word_len(s: &str, first: impl Fn(char) -> bool) -> usize {
160− let Some(c) = s.chars().next().filter(|&c| first(c)) else {
161− return 0;
162− };
163− let mut end = c.len_utf8();
164− let mut i = end;
165− while let Some(c) = s[i..].chars().next() {
166− if is_name_char(c) {
167− i += c.len_utf8();
168− end = i;
169− } else if c == '-' {
170− let rest = &s[i..];
171− let dashes = rest.len() - rest.trim_start_matches('-').len();
172− if !rest[dashes..].starts_with(is_name_char) {
173− break;
174− }
175− i += dashes;
176− } else {
177− break;
178− }
179− }
180− end
181−}
182−
183−/// The length of the variable name at the start of `s` (the text after a
184−/// `$`), by syntax alone, or 0 when `s` doesn't start one.
185−pub fn name_len(s: &str) -> usize {
186− word_len(s, |c| c.is_alphabetic() || c == '_')
187−}
188−
189−/// The length of the custom property's name `--name` at the start of `s`
190−/// (the text after a `$`), or 0. `$--name` is not a variable and not text
191−/// either: it is an error that says to write `var(--name)`.
192−pub fn custom_property_len(s: &str) -> usize {
193− match s.strip_prefix("--") {
194− Some(rest) => match word_len(rest, |c| c.is_alphanumeric() || c == '_') {
195− 0 => 0,
196− n => n + 2,
197− },
198− None => 0,
199− }
200−}
201−
202−/// What is wrong with `$NAME`, where `name` is a custom property's name
203−/// (`--brand`).
204−pub fn custom_property_message(name: &str) -> String {
205− format!(
206− "`${}` is not a variable: a custom property is read with `var({})`",
207− name, name
208− )
209−}
210−
211−/// Whether `s` is a whole name path, `name` or `name.field.field`.
212−fn is_path(s: &str) -> bool {
213− let n = name_len(s);
214− if n == 0 || matches!(&s[..n], "true" | "false" | "not" | "and" | "or") {
215− return false;
216− }
217− let mut rest = &s[n..];
218− while let Some(field) = rest.strip_prefix('.') {
219− let f = word_len(field, is_name_char);
220− if f == 0 {
221− return false;
222− }
223− rest = &field[f..];
224− }
225− rest.is_empty()
226−}
227−
228−/// What a name path leads to so far: a value, or a field that a record
229−/// (or an item that a list) doesn't have, which is empty, and so is every
230−/// field of it.
231−#[derive(Clone)]
232−enum Step {
233− Value(Value),
234− Missing,
235−}
236−
237−impl Step {
238− /// The field `name` of this step, or `None` when it has no fields
239− /// (text, a number, true or false).
240− fn field(&self, name: &str) -> Option<Step> {
241− let Step::Value(value) = self else {
242− return Some(Step::Missing);
243− };
244− match value {
245− Value::Record(fields) => Some(
246− fields
247− .iter()
248− .find(|(key, _)| key == name)
249− .map_or(Step::Missing, |(_, value)| Step::Value(value.clone())),
250− ),
251− Value::List(list) => Some(
252− name.parse::<usize>()
253− .ok()
254− .and_then(|i| list.items.get(i).cloned())
255− .map_or(Step::Missing, Step::Value),
256− ),
257− _ => None,
258− }
259− }
260−
261− fn value(self) -> Value {
262− match self {
263− Step::Value(value) => value,
264− Step::Missing => Value::empty(),
265− }
266− }
267−}
268−
269−/// The name path at the start of `s` (after a `$`) and its length: the
270−/// name, and each `.field` while the value so far is a record or a list,
271−/// or a field one of them doesn't have.
272−fn path_at(s: &str, scope: &dyn Scope) -> Option<(String, usize)> {
273− let n = name_len(s);
274− if n == 0 {
275− return None;
276− }
277− let mut path = s[..n].to_string();
278− let mut len = n;
279− let mut step = scope.get(&path).map(Step::Value);
280− while let Some(rest) = s[len..].strip_prefix('.') {
281− let f = word_len(rest, is_name_char);
282− let Some(field) = step
283− .as_ref()
284− .filter(|_| f > 0)
285− .and_then(|v| v.field(&rest[..f]))
286− else {
287− break;
288− };
289− path = format!("{}.{}", path, &rest[..f]);
290− len += 1 + f;
291− step = Some(field);
292− }
293− Some((path, len))
294−}
295−
296−/// A reference, after its `$`.
297−#[derive(Debug, Clone, PartialEq)]
298−pub enum Reference<'a> {
299− /// `$name`, `$name.field` or `${name}`: the name path.
300− Var(String),
301− /// `${EXPR}`: the expression.
302− Expr(&'a str),
303−}
304−
305−/// The reference that `s` (the text after a `$`) starts with, and its
306−/// length. `None` when the `$` is text.
307−pub fn reference<'a>(s: &'a str, scope: &dyn Scope) -> Option<(Reference<'a>, usize)> {
308− if s.starts_with('{') {
309− let close = matching_brace(s)?;
310− let inner = &s[1..close];
311− let reference = if is_path(inner.trim()) {
312− Reference::Var(inner.trim().to_string())
313− } else {
314− Reference::Expr(inner)
315− };
316− return Some((reference, close + 1));
317− }
318− let (path, len) = path_at(s, scope)?;
319− Some((Reference::Var(path), len))
320−}
321−
322−/// The value of a name path, or `None` when it is undefined. A field that
323−/// a record doesn't have is empty, and so is any field of it.
324−pub fn resolve(path: &str, scope: &dyn Scope) -> Option<Value> {
325− let mut parts = path.split('.');
326− let mut step = Step::Value(scope.get(parts.next()?)?);
327− for field in parts {
328− step = step.field(field)?;
329− }
330− Some(step.value())
331−}
332−
333−/// Fill in the `$name`s and `${...}`s of one slot's text, for text (see
334−/// [`Sink::Text`]). Each one that can't be filled is left as written and
335−/// reported.
336−pub fn interpolate(text: &str, scope: &dyn Scope) -> (String, Vec<Problem>) {
337− interpolate_for(text, scope, Sink::Text)
338−}
339−
340−/// [`interpolate`] for a slot whose value goes to `sink`.
341−pub fn interpolate_for(text: &str, scope: &dyn Scope, sink: Sink) -> (String, Vec<Problem>) {
342− let mut problems = Vec::new();
343− if !text.contains('$') {
344− return (text.to_string(), problems);
345− }
346− let mut out = String::with_capacity(text.len());
347− let mut pos = 0;
348− // Whether the CSS value is inside a quoted string at `pos`
349− let mut in_string = false;
350− while let Some(found) = text[pos..].find('$') {
351− let dollar = pos + found;
352− out.push_str(&text[pos..dollar]);
353− if sink == Sink::Css {
354− in_string = css_string_after(&text[pos..dollar], in_string);
355− }
356− let after = &text[dollar + 1..];
357− let Some((reference, len)) = reference(after, scope) else {
358− let n = custom_property_len(after);
359− if n > 0 {
360− problems.push(Problem::CustomProperty {
361− name: after[..n].to_string(),
362− offset: dollar,
363− });
364− }
365− out.push_str(&text[dollar..dollar + 1 + n]);
366− pos = dollar + 1 + n;
367− continue;
368− };
369− let written = &text[dollar..dollar + 1 + len];
370− let insert = |value: String, quoted: Option<String>| match (sink, quoted) {
371− (Sink::Css, Some(css)) if in_string => {
372− // The string's body, without its quotes
373− let body = css.strip_prefix('"').unwrap_or(&css);
374− body.strip_suffix('"').unwrap_or(body).to_string()
375− }
376− (Sink::Css, Some(css)) => css,
377− (Sink::Css, None) if in_string => css_string_body(&value),
378− _ => value,
379− };
380− match reference {
381− Reference::Var(path) => match resolve(&path, scope) {
382− Some(value) => match no_text(written, &value, dollar) {
383− Some(problem) => problems.push(problem),
384− None => out.push_str(&insert(
385− value.to_string(),
386− value.quoted_css().map(str::to_string),
387− )),
388− },
389− None => {
390− problems.push(Problem::Undefined {
391− name: path,
392− offset: dollar,
393− });
394− out.push_str(written);
395− }
396− },
397− Reference::Expr(source) => match expr::eval(source, scope) {
398− Ok(value) => match no_text(written, &value, dollar) {
399− Some(problem) => problems.push(problem),
400− None => out.push_str(&insert(value.to_string(), None)),
401− },
402− Err(error) => {
403− problems.push(match error {
404− // At the `${`
405− expr::Error::Invalid(message) => Problem::Invalid {
406− message,
407− offset: dollar,
408− },
409− // At the name, inside the braces
410− error => error.at(dollar + 2),
411− });
412− out.push_str(written);
413− }
414− },
415− }
416− pos = dollar + 1 + len;
417− }
418− out.push_str(&text[pos..]);
419− (out, problems)
420−}
421−
422−/// The names `text` refers to, by syntax alone: the first name of each
423−/// path, including those inside `${...}`.
424−pub fn names(text: &str) -> Vec<&str> {
425− name_spans(text)
426− .into_iter()
427− .map(|span| &text[span])
428− .collect()
429−}
430−
431−/// Where the names of [`names`] are in `text`, as byte ranges of the name
432−/// alone: after the `$` of `$name`, inside the braces of `${name}`.
433−pub fn name_spans(text: &str) -> Vec<std::ops::Range<usize>> {
434− let mut found = Vec::new();
435− collect_name_spans(text, 0, &mut found);
436− found
437−}
438−
439−fn collect_name_spans(text: &str, base: usize, found: &mut Vec<std::ops::Range<usize>>) {
440− let mut pos = 0;
441− while let Some(i) = text[pos..].find('$') {
442− let after = pos + i + 1;
443− let rest = &text[after..];
444− pos = after;
445− // `\$` is a dollar sign (and `\\$` a backslash before a name)
446− let backslashes = text[..after - 1].len() - text[..after - 1].trim_end_matches('\\').len();
447− if backslashes % 2 == 1 {
448− continue;
449− }
450− if rest.starts_with('{')
451− && let Some(close) = matching_brace(rest)
452− {
453− let inner = &rest[1..close];
454− let trimmed = inner.trim_start();
455− if is_path(trimmed.trim_end()) {
456− let start = base + after + 1 + inner.len() - trimmed.len();
457− found.push(start..start + name_len(trimmed));
458− } else {
459− collect_name_spans(inner, base + after + 1, found);
460− }
461− pos = after + close + 1;
462− continue;
463− }
464− let n = name_len(rest);
465− if n > 0 {
466− found.push(base + after..base + after + n);
467− pos = after + n;
468− }
469− }
470−}
471−
472−/// Index of the `}` matching the `{` that `s` starts with (skipping
473−/// braces inside string literals).
474−pub(crate) fn matching_brace(s: &str) -> Option<usize> {
475− let mut depth = 0;
476− let mut in_string = false;
477− for (i, c) in s.char_indices() {
478− match c {
479− '"' => in_string = !in_string,
480− _ if in_string => {}
481− '{' => depth += 1,
482− '}' => {
483− depth -= 1;
484− if depth == 0 {
485− return Some(i);
486− }
487− }
488− _ => {}
489− }
490− }
491− None
492−}
493−
494−#[cfg(test)]
495−pub(crate) mod tests {
496− use super::*;
497− use std::collections::HashMap;
498−
499− /// Variables by name: text from `new`, any value from `with`.
500− pub(crate) struct Map(pub HashMap<String, Value>);
501−
502− impl Map {
503− pub(crate) fn new(pairs: &[(&str, &str)]) -> Self {
504− Map(pairs
505− .iter()
506− .map(|(k, v)| (k.to_string(), Value::Str(v.to_string())))
507− .collect())
508− }
509−
510− pub(crate) fn with(mut self, name: &str, value: Value) -> Self {
511− self.0.insert(name.to_string(), value);
512− self
513− }
514− }
515−
516− impl Scope for Map {
517− fn get(&self, name: &str) -> Option<Value> {
518− self.0.get(name).cloned()
519− }
520− }
521−
522− pub(crate) fn text_list(items: &[&str]) -> Value {
523− Value::list(items.iter().map(|s| Value::Str(s.to_string())).collect())
524− }
525−
526− pub(crate) fn record(fields: &[(&str, &str)]) -> Value {
527− Value::Record(std::rc::Rc::new(
528− fields
529− .iter()
530− .map(|(k, v)| (k.to_string(), Value::Str(v.to_string())))
531− .collect(),
532− ))
533− }
534−
535− fn vars() -> Map {
536− Map::new(&[("lang", "fr"), ("n", "3"), ("n-1", "two")])
537− .with("post", record(&[("title", "Hello")]))
538− .with("tags", text_list(&["a", "b"]))
539− }
540−
541− fn fill(text: &str) -> String {
542− interpolate(text, &vars()).0
543− }
544−
545− #[test]
546− fn names_end_where_they_must() {
547− assert_eq!(fill("locales/$lang.json"), "locales/fr.json");
548− assert_eq!(fill("$post.title!"), "Hello!");
549− assert_eq!(fill("$tags.1 and $tags"), "b and a, b");
550− assert_eq!(fill("${lang}uage"), "fruage");
551− assert_eq!(fill("$lang- $lang:"), "fr- fr:");
552− assert_eq!(fill("$n-1"), "two");
553− assert_eq!(fill("1..$n"), "1..3");
554− // A name ends at `..`
555− assert_eq!(fill("$n..$n $post.title..x"), "3..3 Hello..x");
556− }
557−
558− #[test]
559− fn a_dollar_before_anything_else_is_text() {
560− assert_eq!(fill("$5 and $$ and $"), "$5 and $$ and $");
561− assert_eq!(fill("a $-x ${"), "a $-x ${");
562− }
563−
564− #[test]
565− fn a_custom_property_is_not_a_variable() {
566− let (out, problems) = interpolate("x $--brand-dark $-- $--1", &vars());
567− assert_eq!(out, "x $--brand-dark $-- $--1");
568− assert_eq!(
569− problems,
570− [
571− Problem::CustomProperty {
572− name: "--brand-dark".into(),
573− offset: 2
574− },
575− Problem::CustomProperty {
576− name: "--1".into(),
577− offset: 20
578− }
579− ]
580− );
581− assert!(custom_property_message("--brand").contains("`var(--brand)`"));
582− assert_eq!(names("$--e $f"), ["f"]);
583− }
584−
585− #[test]
586− fn missing_fields_are_empty_and_undefined_names_are_errors() {
587− assert_eq!(fill("[$post.summary]"), "[]");
588− let (out, problems) = interpolate("x $nope y", &vars());
589− assert_eq!(out, "x $nope y");
590− assert_eq!(
591− problems,
592− [Problem::Undefined {
593− name: "nope".into(),
594− offset: 2
595− }]
596− );
597− }
598−
599− #[test]
600− fn expressions() {
601− assert_eq!(fill("${$n * 2}px"), "6px");
602− let (_, problems) = interpolate("a ${$n + $m}", &vars());
603− assert_eq!(
604− problems,
605− [Problem::Undefined {
606− name: "m".into(),
607− offset: 9
608− }]
609− );
610− }
611−
612− #[test]
613− fn quoted_text_keeps_its_quotes_only_in_css() {
614− let quoted = Value::Quoted(crate::ast::Quoted {
615− text: r#"a"b"#.into(),
616− css: r#""a\"b""#.into(),
617− });
618− let scope = Map::new(&[("n", r#"x"y"#)]).with("q", quoted);
619− let fill = |text: &str, sink| interpolate_for(text, &scope, sink).0;
620− assert_eq!(fill("$q", Sink::Text), r#"a"b"#);
621− assert_eq!(fill("$q", Sink::Css), r#""a\"b""#);
622− // Inside a CSS string, what it says, escaped as the string needs
623− assert_eq!(
624− fill(r#""($q) $n" $q"#, Sink::Css),
625− r#""(a\"b) x\"y" "a\"b""#
626− );
627− assert_eq!(fill(r#""\" $q""#, Sink::Css), r#""\" a\"b""#);
628− // What an unquoted value holds goes into a string that stays valid
629− let scope = Map::new(&[("end", r"a\"), ("esc", r"\201C"), ("q", r#"x\"y"#)]);
630− let fill = |text: &str| interpolate_for(text, &scope, Sink::Css).0;
631− assert_eq!(fill(r#""$end""#), r#""a\\""#);
632− assert_eq!(fill(r#""$esc""#), r#""\201C""#);
633− assert_eq!(fill(r#""$q""#), r#""x\"y""#);
634− }
635−
636− #[test]
637− fn inserted_values_are_never_read_again() {
638− let scope = Map::new(&[("a", "$b"), ("b", "no")]);
639− assert_eq!(interpolate("$a", &scope).0, "$b");
640− }
641−
642− #[test]
643− fn names_by_syntax() {
644− assert_eq!(names("$a.b ${c} ${upper($d)} $5 $--e"), ["a", "c", "d"]);
645− assert_eq!(names(r"\$a \\$b \\\$c"), ["b"]);
646− assert_eq!(
647− name_spans("x ${ size }px ${$n + ${m}} $a- b"),
648− [5..9, 17..18, 23..24, 28..29]
649− );
650− }
651−}
crates/htmlang-core/src/lib.rs+1−4
@@ -1,11 +1,8 @@
11pub mod ast;
22pub mod codegen;
3−pub mod diagnostic;
43pub mod expr;
5−pub mod interp;
64pub mod parser;
7−pub mod syntax;
8−pub mod value;
5+mod syntax;
96pub mod vocab;
107
118#[cfg(test)]
crates/htmlang-core/src/parser.rs+2499−6082
@@ -1,193 +1,76 @@
11use std::collections::{HashMap, HashSet};
2+use std::fmt;
23use std::path::{Path, PathBuf};
3−use std::rc::Rc;
44
55use crate::ast::*;
6−use crate::diagnostic::code;
7−pub use crate::diagnostic::{Diagnostic, Severity};
8−use crate::interp::{self, Sink};
9−use crate::syntax::{self, DirectiveArgs, LetForm, NodeKind, Segment, Tree};
10−use crate::value::{self, Value};
6+use crate::syntax::{self, Syntax};
117
128// ---------------------------------------------------------------------------
139// Public types
1410// ---------------------------------------------------------------------------
1511
12+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
13+pub enum Severity {
14+ Error,
15+ Warning,
16+ Info,
17+ Help,
18+}
19+
20+#[derive(Debug, Clone)]
21+pub struct Diagnostic {
22+ pub line: usize,
23+ pub column: Option<usize>,
24+ pub message: String,
25+ pub severity: Severity,
26+ pub source_line: Option<String>,
27+}
28+
1629pub struct ParseResult {
1730 pub document: Document,
1831 pub diagnostics: Vec<Diagnostic>,
1932 pub included_files: Vec<PathBuf>,
2033}
2134
22−/// An error that stops one line from being evaluated.
23−type ParseError = Diagnostic;
24−
25−// ---------------------------------------------------------------------------
26−// Internal types
27−// ---------------------------------------------------------------------------
28−
29−#[derive(Clone)]
30−struct FnDef {
31− /// The parameters in the order they are declared; one without a
32− /// default is required.
33− params: Vec<syntax::Param>,
34− /// The definition's line and its text (when it is one physical line),
35− /// and its node, for diagnostics about a default.
35+#[derive(Debug)]
36+struct ParseError {
3637 line: usize,
37− source: Option<String>,
38− node: usize,
39− body: Vec<syntax::Node>,
40− /// The file it is defined in, when that isn't the file being compiled
41− /// (see `ParseContext::current_file`).
42− file: Option<String>,
43− /// The slots its body declares (`@slot NAME`), in order.
44− slots: Vec<String>,
45− /// Whether its body has a `@children` for the content of a call.
46− has_children: bool,
47− /// Its scoped `@style`: its class (`hl-fn-NAME-HASH`), and the
48− /// stylesheet nested under it, written into the page once the function
49− /// is called (see `Document::scoped_css`).
50− scoped: Option<(String, String)>,
51− /// What was visible where it was defined: its body and its defaults
52− /// see this, plus its parameters.
53− env: Env,
54− /// It is named like a built-in element and its body calls that name
55− /// outside any `@if`, meaning the element (`@let @nav` around `@nav`):
56− /// it would call itself forever, so a call writes nothing (the
57− /// definition's error says so).
58− wraps_itself: bool,
38+ message: String,
5939}
6040
61−impl FnDef {
62− fn is_param(&self, name: &str) -> bool {
63− self.params.iter().any(|p| p.name == name)
41+impl fmt::Display for ParseError {
42+ fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
43+ write!(f, "line {}: {}", self.line, self.message)
6444 }
6545}
6646
67−/// What a name means: every `@let`, parameter, loop variable and `@data`
68−/// binds one, and they share one namespace.
69−#[derive(Clone)]
70−enum Binding {
71− Value(Value),
72− Bundle(Rc<Vec<Attribute>>),
73− Function(Rc<FnDef>),
74−}
75−
76−/// The names visible at a line: one frame per block it is in (the
77−/// standard library, the file, an element's children, an `@if` branch, an
78−/// iteration of `@each`, a function's body), the innermost last. A
79−/// definition goes into the innermost frame, so it is visible from its
80−/// line to the end of its block. A function keeps the frames visible
81−/// where it is defined; a frame is shared until one side changes it.
82−#[derive(Clone, Default)]
83−struct Env {
84− frames: Vec<Rc<HashMap<String, Binding>>>,
85−}
86−
87−impl Env {
88− fn push(&mut self) {
89− self.frames.push(Rc::default());
90− }
91−
92− fn pop(&mut self) {
93− self.frames.pop();
94− }
95−
96− /// Give `name` a meaning in the innermost frame, replacing what it
97− /// meant there and hiding what it means outside it.
98− fn define(&mut self, name: &str, binding: Binding) {
99− if self.frames.is_empty() {
100− self.push();
101− }
102− if let Some(frame) = self.frames.last_mut() {
103− Rc::make_mut(frame).insert(name.to_string(), binding);
104− }
105− }
106−
107− /// What `name` means here: the innermost definition.
108− fn get(&self, name: &str) -> Option<&Binding> {
109− self.frames.iter().rev().find_map(|frame| frame.get(name))
110− }
111−
112− fn value(&self, name: &str) -> Option<&Value> {
113− match self.get(name)? {
114− Binding::Value(value) => Some(value),
115− _ => None,
116− }
117− }
118−
119− fn bundle(&self, name: &str) -> Option<&Rc<Vec<Attribute>>> {
120− match self.get(name)? {
121− Binding::Bundle(attrs) => Some(attrs),
122− _ => None,
123− }
124− }
125−
126− fn function(&self, name: &str) -> Option<&Rc<FnDef>> {
127− match self.get(name)? {
128− Binding::Function(function) => Some(function),
129− _ => None,
130− }
131− }
132−
133− /// Every name visible here, with what it means.
134− fn visible(&self) -> HashMap<&str, &Binding> {
135− let mut names = HashMap::new();
136− for frame in &self.frames {
137− for (name, binding) in frame.iter() {
138− names.insert(name.as_str(), binding);
139− }
140− }
141− names
142− }
143−
144− /// The names of the values visible here.
145− fn value_names(&self) -> Vec<&str> {
146− self.visible()
147− .into_iter()
148− .filter(|(_, binding)| matches!(binding, Binding::Value(_)))
149− .map(|(name, _)| name)
150− .collect()
151− }
152−
153− /// The names of the bundles visible here.
154− fn bundle_names(&self) -> Vec<&str> {
155− self.visible()
156− .into_iter()
157− .filter(|(_, binding)| matches!(binding, Binding::Bundle(_)))
158− .map(|(name, _)| name)
159− .collect()
160− }
161−}
47+// ---------------------------------------------------------------------------
48+// Internal types
49+// ---------------------------------------------------------------------------
16250
163−impl interp::Scope for Env {
164− fn get(&self, name: &str) -> Option<Value> {
165− self.value(name).cloned()
166− }
51+#[derive(Clone)]
52+struct FnDef {
53+ params: Vec<String>,
54+ defaults: HashMap<String, String>,
55+ body: Vec<Syntax>,
16756}
16857
16958struct ParseContext {
17059 /// Source line currently being parsed, for diagnostics raised deep
17160 /// inside helpers that don't take a line number.
17261 current_line: usize,
173− /// What the `@page` said, once one has run
174− page: Option<Page>,
175− /// Where that `@page` is, for the error a second one gets
176− page_at: Option<String>,
62+ /// Functions whose body has a scoped @style block.
63+ scoped_functions: std::collections::HashSet<String>,
64+ page_title: Option<String>,
65+ lang: Option<String>,
66+ favicon: Option<String>,
17767 meta_tags: Vec<(String, String)>,
17868 head_blocks: Vec<String>,
179− /// The first `@meta` or `@head` that ran, for the warning a file
180− /// without `@page` gets: a fragment has no `<head>` for them.
181− head_at: Option<usize>,
182− /// What each name means at the line being evaluated.
183− env: Env,
184− /// Every function whose definition ran, by name (the last one), for
185− /// the checks of code that never runs.
186− defined_functions: HashMap<String, Rc<FnDef>>,
69+ variables: HashMap<String, String>,
70+ defines: HashMap<String, Vec<Attribute>>,
71+ functions: HashMap<String, FnDef>,
18772 css_vars: Vec<(String, String)>,
18873 custom_css: Vec<String>,
189− /// The scoped `@style` of each function called so far
190− scoped_css: Vec<String>,
19174 og_tags: Vec<(String, String)>,
19275 diagnostics: Vec<Diagnostic>,
19376 base_path: Option<PathBuf>,
@@ -207,550 +90,39 @@ struct ParseContext {
20790 fn_lines: HashMap<String, usize>,
20891 /// Line numbers of attribute bundle definitions (name -> line)
20992 define_lines: HashMap<String, usize>,
210− /// Syntax nodes evaluated at least once, by id.
211− visited: HashSet<usize>,
212− /// The id the next parsed tree starts at, so ids are unique across
213− /// the file, its includes and the standard library.
214− next_id: usize,
215− /// The file's tree and those of the files it includes, with the
216− /// include chain that leads to each, for the checks of code that never
217− /// runs.
218− trees: Vec<(Rc<Tree>, Option<String>)>,
219− /// The files each `@include` line brought in (by the line's node id),
220− /// with the include chain that leads to each, so the checks of
221− /// `@slot` and `@children` see an included file's lines where the
222− /// `@include` is written.
223− included_by: Rc<IncludedBy>,
224− /// Every function defined anywhere in the file or the files it
225− /// includes, whether or not its definition runs.
226− namespace: HashSet<String>,
227− /// The line being evaluated, and its text as written when it is one
228− /// physical line, for diagnostics that point at a column.
229− current_source: (usize, Option<String>),
230− /// Variable diagnostics already reported, so a line evaluated many
231− /// times (in a loop, in a function) reports each problem once.
232− /// Keyed by the syntax node (ids are unique across files), line,
233− /// column and message.
234− reported: HashSet<(usize, usize, Option<usize>, String)>,
235− /// The id of the syntax node being evaluated.
236− current_node: usize,
237− /// The file whose lines are being evaluated, when it isn't the file
238− /// being compiled: the standard library, or an included file (by its
239− /// include chain).
240− current_file: Option<String>,
241− /// A call went deeper than [`MAX_CALL_DEPTH`]: the calls it is nested
242− /// in expand to nothing, until the outermost one returns.
243− too_deep: bool,
244− /// A bundle's attributes are being read: a name that could be a
245− /// parameter of the function the bundle is passed to is checked where
246− /// the bundle is used instead.
247− in_bundle: bool,
248− /// `@page`'s attributes are being read: a name close to `favicon` is
249− /// a misspelled word of `@page`'s.
250− in_page: bool,
251−}
252−
253−/// How deeply function calls may nest, so that a function that calls
254−/// itself without an `@if` that stops it is an error instead of a hang.
255−const MAX_CALL_DEPTH: usize = 64;
256−
257−/// A CSS rule at the top level of a stylesheet that starts with `&`
258−/// (outside any `{}`, strings and comments).
259−fn has_top_level_ampersand(css: &str) -> bool {
260− let mut depth = 0usize;
261− let mut chars = css.chars().peekable();
262− let mut at_rule_start = true;
263− while let Some(c) = chars.next() {
264− match c {
265− '/' if chars.peek() == Some(&'*') => {
266− chars.next();
267− let mut last = ' ';
268− for c in chars.by_ref() {
269− if last == '*' && c == '/' {
270− break;
271− }
272− last = c;
273− }
274− continue;
275− }
276− '"' | '\'' => {
277− for d in chars.by_ref() {
278− if d == c {
279− break;
280− }
281− }
282− }
283− '{' => depth += 1,
284− '}' => depth = depth.saturating_sub(1),
285− '&' if depth == 0 && at_rule_start => return true,
286− _ => {}
287− }
288− at_rule_start = match c {
289− '{' | '}' | ';' => true,
290− c if c.is_whitespace() => at_rule_start,
291− _ => false,
292− };
293− }
294− false
295−}
296−
297−/// Whether a file is a library (see [`Tree::is_library`]), with the files
298−/// its `@include` lines name read relative to `base`.
299−fn is_library_file(
300− tree: &Tree,
301− base: Option<&Path>,
302− ctx: &mut ParseContext,
303− seen: &mut Vec<PathBuf>,
304−) -> bool {
305− tree.is_library_with(&mut |path| {
306− if path.contains('$') {
307− return false;
308− }
309− let resolved = base.map_or_else(|| PathBuf::from(path), |base| base.join(path));
310− if seen.contains(&resolved) {
311− return false;
312− }
313− seen.push(resolved.clone());
314− let Ok(text) = ctx.read_file(&resolved) else {
315− return false;
316− };
317− let included = syntax::parse(&text);
318− is_library_file(&included, resolved.parent(), ctx, seen)
319− })
93+ /// Canonical URL
94+ canonical: Option<String>,
95+ /// Base URL for relative links
96+ base_url: Option<String>,
32097}
32198
322−/// The frames around the file's top level: the standard library's and
323−/// the file's own (see [`load_prelude`]).
324−const FILE_FRAMES: usize = 2;
325−
32699/// Evaluates a syntax tree (see `syntax.rs`) into the document's nodes.
327100struct Evaluator;
328101
329102impl ParseContext {
330− /// Bind a value to `name` in the innermost block.
331− fn bind(&mut self, name: &str, value: Value) {
332− self.env.define(name, Binding::Value(value));
333− }
334−
335− /// Evaluate an expression (see `expr.rs`) written at `line` and
336− /// `column` (when known), reporting its errors there.
337− fn eval(
338− &mut self,
339− src: &str,
340− line: usize,
341− column: Option<usize>,
342− ) -> Option<crate::expr::Value> {
103+ /// Evaluate an expression (see `expr.rs`), reporting errors at `line`.
104+ fn eval(&mut self, src: &str, line: usize) -> Option<crate::expr::Value> {
343105 track_var_refs(src, &mut self.used_variables);
344− match crate::expr::eval(src, &self.env) {
106+ let vars = &self.variables;
107+ let result = crate::expr::eval(src, &|name: &str| lookup(vars, name));
108+ match result {
345109 Ok(value) => Some(value),
346− Err(error) => {
347− // Without the line to point into, show the expression
348− let shown = matches!(&self.current_source, (current, Some(_)) if *current == line);
349− let before = self.diagnostics.len();
350− self.report(error.at(0), line, column);
351− if !shown && let Some(diagnostic) = self.diagnostics.get_mut(before) {
352− diagnostic.source_line = Some(src.into());
353− }
110+ Err(message) => {
111+ self.diagnostics.push(Diagnostic {
112+ line,
113+ column: None,
114+ message: format!("invalid expression: {}", message),
115+ severity: Severity::Error,
116+ source_line: Some(src.to_string()),
117+ });
354118 None
355119 }
356120 }
357121 }
358122
359123 /// Evaluate a condition; an invalid one is reported and counts as false.
360− fn condition(&mut self, src: &str, line: usize, column: Option<usize>) -> bool {
361− self.eval(src, line, column)
362− .is_some_and(|value| value.truthy())
363− }
364−
365− /// Fill in one slot of htmlang text written at `line` and `column`
366− /// (when known), for `sink`: its escapes stand for themselves and its
367− /// variables are filled in (see `interp.rs`). What can't be filled is
368− /// left as written and reported; the flag says whether everything was
369− /// filled.
370− fn fill(
371− &mut self,
372− raw: &str,
373− line: usize,
374− column: Option<usize>,
375− sink: Sink,
376− ) -> (String, bool) {
377− let (filled, ok) = self.fill_protected(raw, line, column, sink);
378− (restore_escapes(&filled), ok)
379− }
380−
381− /// [`fill`](Self::fill) for text.
382− fn interpolate_text(&mut self, raw: &str, line: usize, column: Option<usize>) -> String {
383− self.fill(raw, line, column, Sink::Text).0
384− }
385−
386− /// [`fill`](Self::fill), with the escapes still placeholders (see
387− /// [`protect_escapes`]).
388− fn fill_protected(
389− &mut self,
390− raw: &str,
391− line: usize,
392− column: Option<usize>,
393− sink: Sink,
394− ) -> (String, bool) {
395− let mut protected = protect_escapes(raw);
396− if sink == Sink::Css {
397− protected = keep_css_string_escapes(&protected);
398− }
399− if !protected.contains('$') {
400− return (protected, true);
401− }
402− track_var_refs(&protected, &mut self.used_variables);
403− let (out, problems) = interp::interpolate_for(&protected, &self.env, sink);
404− let filled = problems.is_empty();
405− for mut problem in problems {
406− match &mut problem {
407− interp::Problem::Undefined { offset, .. }
408− | interp::Problem::CustomProperty { offset, .. }
409− | interp::Problem::Invalid { offset, .. }
410− | interp::Problem::Record { offset, .. } => {
411− // An offset into the protected text, as one into `raw`
412− *offset = protected[..*offset]
413− .chars()
414− .map(|c| escape_of(c).map_or(c.len_utf8(), str::len))
415− .sum();
416− }
417− }
418− self.report(problem, line, column);
419− }
420− (out, filled)
421− }
422−
423− /// Fill in a value slot (an attribute's value, a `@let` value, `@meta`'s
424− /// value) for `sink`, and say whether it is quoted text: one `"..."`, or
425− /// one variable that holds quoted text. Quoted text keeps its quotes
426− /// only in CSS.
427− fn fill_value(
428− &mut self,
429− raw: &str,
430− line: usize,
431− column: Option<usize>,
432− sink: Sink,
433− ) -> (String, Option<Quoted>, bool) {
434− if let Some(inner) = syntax::quoted_string(raw) {
435− let (css, ok) = self.fill(raw, line, column, Sink::Css);
436− // Already reported by the CSS pass, so filled in quietly
437− let (text, _) = interp::interpolate(&protect_escapes(inner), &self.env);
438− let quoted = Quoted {
439− text: restore_escapes(&text),
440− css,
441− };
442− let out = match sink {
443− Sink::Css => quoted.css.clone(),
444− Sink::Text => quoted.text.clone(),
445− };
446− return (out, Some(quoted), ok);
447− }
448− let (out, ok) = self.fill(raw, line, column, sink);
449− let quoted = whole_reference(raw, &self.env).and_then(|path| {
450− match interp::resolve(&path, &self.env)? {
451− Value::Quoted(quoted) => Some(quoted),
452− _ => None,
453− }
454− });
455− (out, quoted, ok)
456− }
457−
458− /// The value of a value slot (a `@let` value, the source of `@each`, a
459− /// parameter's value or default), written at `line` and `column`:
460− ///
461− /// - exactly one `$name` or `${...}` is the value it holds or gives,
462− /// whatever its type (a list, a record, quoted text);
463− /// - one `"..."` is quoted text;
464− /// - commas outside quotes, brackets and `${...}`, and not escaped
465− /// (`\,`), make a list, which prints as written;
466− /// - `A..B` or `A..B step N` with whole numbers is a range;
467− /// - anything else is text, with its variables filled in.
468− ///
469− /// What can't be filled in is reported; the flag says whether
470− /// everything was.
471− fn slot_value(&mut self, raw: &str, line: usize, column: Option<usize>) -> (Value, bool) {
472− let trimmed = raw.trim();
473− let column = column.map(|c| c + (raw.len() - raw.trim_start().len()));
474− if let Some(value) = self.whole_value(trimmed, line, column) {
475− return value;
476− }
477− if syntax::quoted_string(trimmed).is_some() {
478− let (text, quoted, ok) = self.fill_value(trimmed, line, column, Sink::Text);
479− return (quoted.map_or(Value::Str(text), Value::Quoted), ok);
480− }
481− let parts = syntax::split_list(trimmed);
482− if parts.len() > 1 {
483− // Each item is a value of its own; the list prints as written
484− let mut items = Vec::new();
485− let mut written = String::new();
486− let mut ok = true;
487− let mut end = 0;
488− for part in parts {
489− let item = &trimmed[part.clone()];
490− let lead = item.len() - item.trim_start().len();
491− written.push_str(&trimmed[end..part.start + lead]);
492− end = part.start + lead + item.trim().len();
493− if item.trim().is_empty() {
494− continue;
495− }
496− let at = column.map(|c| c + part.start + lead);
497− let (value, text, filled) = self.item_value(item.trim(), line, at);
498− ok &= filled;
499− written.push_str(&text);
500− items.push(value);
501− }
502− written.push_str(&trimmed[end..]);
503− let list = value::List {
504− items: Rc::new(items),
505− written: Some(written.into()),
506− };
507− return (Value::List(list), ok);
508− }
509− let (text, ok) = self.fill(trimmed, line, column, Sink::Text);
510− match value::written_range(&text) {
511− Some(Ok(range)) => (range, ok),
512− Some(Err(message)) => {
513− self.report(
514− interp::Problem::Invalid { message, offset: 0 },
515− line,
516− column,
517− );
518− (Value::list(Vec::new()), false)
519− }
520− None => (Value::Str(text), ok),
521− }
522− }
523−
524− /// An item of a list written in the source (see
525− /// [`slot_value`](Self::slot_value)), and how it is written in the
526− /// list's text.
527− fn item_value(
528− &mut self,
529− item: &str,
530− line: usize,
531− column: Option<usize>,
532− ) -> (Value, String, bool) {
533− let (value, ok) = match self.whole_value(item, line, column) {
534− Some(value) => value,
535− None if syntax::quoted_string(item).is_some() => {
536− let (text, quoted, ok) = self.fill_value(item, line, column, Sink::Text);
537− (quoted.map_or(Value::Str(text), Value::Quoted), ok)
538− }
539− None => {
540− let (text, ok) = self.fill(item, line, column, Sink::Text);
541− (Value::Str(text), ok)
542− }
543− };
544− // Quoted text keeps its quotes in the list's text, as written
545− let text = value
546− .quoted_css()
547− .map_or_else(|| value.to_string(), str::to_string);
548− (value, text, ok)
549− }
550−
551− /// The value of a slot that is exactly one `$name` or `${...}`, with its
552− /// type; `None` when it is anything else.
553− fn whole_value(
554− &mut self,
555− raw: &str,
556− line: usize,
557− column: Option<usize>,
558− ) -> Option<(Value, bool)> {
559− let after = raw.strip_prefix('$')?;
560− let (reference, len) = interp::reference(after, &self.env)?;
561− if len != after.len() {
562− return None;
563− }
564− track_var_refs(raw, &mut self.used_variables);
565− let problem = match reference {
566− interp::Reference::Var(path) => match interp::resolve(&path, &self.env) {
567− Some(value) => return Some((value, true)),
568− None => interp::Problem::Undefined {
569− name: path,
570− offset: 0,
571− },
572− },
573− interp::Reference::Expr(source) => match crate::expr::eval(source, &self.env) {
574− Ok(value) => return Some((value, true)),
575− Err(crate::expr::Error::Invalid(message)) => {
576− interp::Problem::Invalid { message, offset: 0 }
577− }
578− Err(error) => error.at(2),
579− },
580− };
581− self.report(problem, line, column);
582− Some((Value::Str(raw.to_string()), false))
583− }
584−
585− /// Report a variable that can't be filled in, or an invalid `${...}`,
586− /// at `offset` from `column`.
587− fn report(&mut self, problem: interp::Problem, line: usize, column: Option<usize>) {
588− let (line_text, column) = match &self.current_source {
589− // The column is only shown with the line it points into
590− (current, Some(text)) if *current == line => (Some(text.clone()), column),
591− _ => (None, None),
592− };
593− let diagnostic = match problem {
594− interp::Problem::Undefined { name, offset } => {
595− let column = column.map(|c| c + offset);
596− let mut diagnostic = self.undefined(&name, line);
597− if let Some(column) = column {
598− diagnostic = diagnostic.column(column);
599− }
600− diagnostic
601− }
602− interp::Problem::Invalid { message, offset } => {
603− let diagnostic = Diagnostic::error(
604− code::INVALID_EXPRESSION,
605− line,
606− format!("invalid expression: {}", message),
607− );
608− match column {
609− Some(column) => diagnostic.column(column + offset),
610− None => diagnostic,
611− }
612− }
613− interp::Problem::CustomProperty { name, offset } => {
614− let diagnostic = Diagnostic::error(
615− code::INVALID_VALUE,
616− line,
617− interp::custom_property_message(&name),
618− )
619− .subject(format!("${}", name))
620− .suggest(Some(format!("var({})", name)));
621− match column {
622− Some(column) => diagnostic.column(column + offset),
623− None => diagnostic,
624− }
625− }
626− interp::Problem::Record { message, offset } => {
627− let diagnostic = Diagnostic::error(code::INVALID_VALUE, line, message);
628− match column {
629− Some(column) => diagnostic.column(column + offset),
630− None => diagnostic,
631− }
632− }
633− };
634− let diagnostic = match line_text {
635− Some(text) => diagnostic.source(text),
636− None => diagnostic,
637− };
638− self.push_once(diagnostic);
639− }
640−
641− /// Report a diagnostic unless the node being evaluated already did,
642− /// so a line evaluated many times (in a loop, in a function) reports
643− /// each problem once.
644− fn push_once(&mut self, diagnostic: Diagnostic) {
645− let key = (
646− self.current_node,
647− diagnostic.line,
648− diagnostic.column,
649− diagnostic.message.clone(),
650− );
651− if self.reported.insert(key) {
652− self.diagnostics.push(diagnostic);
653− }
654− }
655−
656− /// The error for `$name` with no definition: what the name is if it is
657− /// something else, or the closest defined name.
658− fn undefined(&mut self, name: &str, line: usize) -> Diagnostic {
659− if self.env.bundle(name).is_some() {
660− // Reported here, so not also as unused
661− self.used_defines.insert(name.to_string());
662− return Diagnostic::error(
663− code::UNDEFINED_VARIABLE,
664− line,
665− format!(
666− "'${}' is an attribute bundle, not a value: it goes in an attribute list \
667− as a whole attribute, `[${}]`",
668− name, name
669− ),
670− )
671− .subject(name);
672− }
673− if self.env.function(name).is_some() {
674− self.used_functions.insert(name.to_string());
675− return Diagnostic::error(
676− code::UNDEFINED_VARIABLE,
677− line,
678− format!(
679− "'${}' is a function, not a value: it is called as an element, `@{}`",
680− name, name
681− ),
682− )
683− .subject(name);
684− }
685− // `$i-label` where `$i` is defined: a `-` joins a name
686− if let Some((defined, rest)) = name
687− .match_indices('-')
688− .map(|(i, _)| (&name[..i], &name[i..]))
689− .find(|(before, _)| self.env.value(before).is_some())
690− {
691− return Diagnostic::error(
692− code::UNDEFINED_VARIABLE,
693− line,
694− format!(
695− "undefined variable '${}': a `-` is part of a name. For '${}' followed \
696− by '{}', write `${{{}}}{}`",
697− name, defined, rest, defined, rest
698− ),
699− )
700− .subject(name);
701− }
702− let suggestion = suggest_var_name(name, &self.env.value_names());
703− let message = match (&suggestion, self.let_lines.get(name)) {
704− (Some(closest), _) => format!(
705− "undefined variable '${}', did you mean '${}'?",
706− name, closest
707− ),
708− // Defined, but not where this line can see it
709− (None, Some(_)) => format!(
710− "undefined variable '${}': a `@let` defines it, but not where this line \
711− can see it. A definition is visible from its line to the end of its \
712− block, and a function's body sees what is defined above the function",
713− name
714− ),
715− (None, None) => format!("undefined variable '${}'", name),
716− };
717− Diagnostic::error(code::UNDEFINED_VARIABLE, line, message)
718− .subject(name)
719− .suggest(suggestion)
720− }
721−
722− /// Note the node being evaluated, for diagnostics.
723− fn enter(&mut self, node: &syntax::Node) {
724− self.current_line = node.span.line;
725− self.current_node = node.id;
726− let text =
727− (node.line_count <= 1).then(|| format!("{}{}", " ".repeat(node.indent), node.source));
728− self.current_source = (node.span.line, text);
729− }
730−
731− /// Parse a file's text into a tree whose ids don't clash with the
732− /// trees parsed before it.
733− fn parse_tree(&mut self, text: &str) -> Rc<Tree> {
734− let tree = syntax::parse_from(text, self.next_id);
735− self.next_id = tree.end_id;
736− Rc::new(tree)
737− }
738−
739− /// Read a file (once), relative to the current file.
740− fn read_file(&mut self, resolved: &Path) -> std::io::Result<String> {
741− if let Some(cached) = self.file_cache.get(resolved) {
742− return Ok(cached.clone());
743− }
744− let text = std::fs::read_to_string(resolved)?;
745− self.file_cache.insert(resolved.to_path_buf(), text.clone());
746− Ok(text)
747− }
748−
749− fn resolve(&self, filename: &str) -> PathBuf {
750− match &self.base_path {
751− Some(base) => base.join(filename),
752− None => PathBuf::from(filename),
753− }
124+ fn condition(&mut self, src: &str, line: usize) -> bool {
125+ self.eval(src, line).is_some_and(|value| value.truthy())
754126 }
755127}
756128
@@ -759,19 +131,11 @@ impl ParseContext {
759131const PRELUDE: &str = include_str!("std.hl");
760132
761133fn load_prelude(ctx: &mut ParseContext) {
762− // The library's definitions are in a block of their own, around the
763− // file's, so the file's own `@let` of the same name hides them
764− ctx.env.push();
765− let tree = ctx.parse_tree(PRELUDE);
766− collect_namespace(&tree.nodes, None, &mut HashSet::new(), ctx);
767− ctx.current_file = Some("std.hl".to_string());
768− let _ = Evaluator.eval_block(&tree.nodes, ctx);
769− ctx.current_file = None;
134+ let _ = Evaluator.eval_block(&syntax::parse(PRELUDE), ctx);
770135 // Library definitions aren't the file's own: never report them unused.
771136 ctx.fn_lines.clear();
772137 ctx.define_lines.clear();
773138 ctx.let_lines.clear();
774− ctx.env.push();
775139}
776140
777141pub fn parse(input: &str) -> ParseResult {
@@ -779,18 +143,20 @@ pub fn parse(input: &str) -> ParseResult {
779143}
780144
781145pub fn parse_with_base(input: &str, base_path: Option<&Path>) -> ParseResult {
146+ let tree = syntax::parse(input);
782147 let mut ctx = ParseContext {
783148 current_line: 0,
784− page: None,
785− page_at: None,
149+ scoped_functions: std::collections::HashSet::new(),
150+ page_title: None,
151+ lang: None,
152+ favicon: None,
786153 meta_tags: Vec::new(),
787154 head_blocks: Vec::new(),
788− head_at: None,
789− env: Env::default(),
790− defined_functions: HashMap::new(),
155+ variables: HashMap::new(),
156+ defines: HashMap::new(),
157+ functions: HashMap::new(),
791158 css_vars: Vec::new(),
792159 custom_css: Vec::new(),
793− scoped_css: Vec::new(),
794160 og_tags: Vec::new(),
795161 diagnostics: Vec::new(),
796162 base_path: base_path.map(|p| p.to_path_buf()),
@@ -804,85 +170,28 @@ pub fn parse_with_base(input: &str, base_path: Option<&Path>) -> ParseResult {
804170 let_lines: HashMap::new(),
805171 fn_lines: HashMap::new(),
806172 define_lines: HashMap::new(),
807− visited: HashSet::new(),
808− next_id: 0,
809− trees: Vec::new(),
810− included_by: Rc::default(),
811− namespace: HashSet::new(),
812− current_source: (0, None),
813− reported: HashSet::new(),
814− current_node: 0,
815− current_file: None,
816− too_deep: false,
817− in_bundle: false,
818− in_page: false,
173+ canonical: None,
174+ base_url: None,
819175 };
820176 load_prelude(&mut ctx);
821− let tree = ctx.parse_tree(input);
822− ctx.diagnostics.extend(tree.diagnostics.iter().cloned());
823− ctx.trees.push((tree.clone(), None));
824− collect_namespace(
825− &tree.nodes,
826− base_path.map(Path::to_path_buf),
827− &mut HashSet::new(),
828− &mut ctx,
829− );
830− let nodes = Evaluator.eval_block(&tree.nodes, &mut ctx);
831− check_unevaluated(&mut ctx);
832− check_slot_places(&mut ctx);
833− validate_tree(&nodes, None, false, &mut ctx.diagnostics);
834− // A library's definitions are for the files that include it
835− let library = is_library_file(&tree, base_path, &mut ctx, &mut Vec::new());
836− let exported: HashSet<String> = if library {
837− tree.nodes
838− .iter()
839− .filter_map(|node| match node.directive().map(|d| &d.args) {
840− Some(DirectiveArgs::Let(def)) => Some(def.name.clone()),
841− _ => None,
842− })
843− .collect()
844− } else {
845− HashSet::new()
846− };
847− check_unused(&mut ctx, &exported);
848− if let (None, Some(line)) = (&ctx.page, ctx.head_at)
849− && !library
850− {
851− ctx.diagnostics.push(Diagnostic::warning(
852− code::NO_EFFECT,
853− line,
854− "a file without @page is a fragment, which has no <head>: @meta and @head are \
855− left out of it (give the file a @page, or put them in the page that includes it)"
856− .to_string(),
857− ));
858− }
859− dedupe(&mut ctx.diagnostics);
860− // What the file itself defines at its top level
861− let file = ctx.env.frames.last().cloned().unwrap_or_default();
862− let mut variables = HashMap::new();
863− let mut defines = HashMap::new();
864− for (name, binding) in file.iter() {
865− match binding {
866− Binding::Value(value) => {
867− variables.insert(name.clone(), value.to_string());
868− }
869− Binding::Bundle(attrs) => {
870− defines.insert(name.clone(), attrs.to_vec());
871− }
872− Binding::Function(_) => {}
873− }
874− }
177+ let nodes = Evaluator.eval_block(&tree, &mut ctx);
178+ validate_tree(&nodes, None, &mut ctx.diagnostics);
179+ check_unused(&mut ctx);
875180 ParseResult {
876181 document: Document {
877− page: ctx.page,
182+ page_title: ctx.page_title,
183+ lang: ctx.lang,
184+ favicon: ctx.favicon,
878185 meta_tags: ctx.meta_tags,
879186 head_blocks: ctx.head_blocks,
880− variables,
881− defines,
187+ variables: ctx.variables,
188+ defines: ctx.defines,
882189 css_vars: ctx.css_vars,
883190 custom_css: ctx.custom_css,
884− scoped_css: ctx.scoped_css,
885191 og_tags: ctx.og_tags,
192+ canonical: ctx.canonical,
193+ base_url: ctx.base_url,
194+ preload_hints: collect_image_preload_hints(&nodes),
886195 nodes,
887196 },
888197 diagnostics: ctx.diagnostics,
@@ -890,882 +199,623 @@ pub fn parse_with_base(input: &str, base_path: Option<&Path>) -> ParseResult {
890199 }
891200}
892201
893−// ---------------------------------------------------------------------------
894−// Code that never runs: an untaken branch, an uncalled function, a loop over
895−// an empty list
896−// ---------------------------------------------------------------------------
202+/// Scan nodes for @image elements and generate preload hints for early images.
203+fn collect_image_preload_hints(nodes: &[Node]) -> Vec<crate::ast::PreloadHint> {
204+ let mut hints = Vec::new();
205+ // Only preload the first few images (above-the-fold heuristic)
206+ collect_images_recursive(nodes, &mut hints, 3);
207+ hints
208+}
897209
898−/// Collect the functions defined anywhere in `nodes` and in the files they
899−/// include (by a literal path), into `ctx.namespace`.
900−fn collect_namespace(
901− nodes: &[syntax::Node],
902− base: Option<PathBuf>,
903− seen: &mut HashSet<PathBuf>,
904− ctx: &mut ParseContext,
905−) {
906− let mut includes = Vec::new();
210+fn collect_images_recursive(nodes: &[Node], hints: &mut Vec<crate::ast::PreloadHint>, max: usize) {
907211 for node in nodes {
908− node.walk(&mut |node| match node.directive().map(|d| &d.args) {
909− Some(DirectiveArgs::Let(def)) if matches!(def.form, LetForm::Function(_)) => {
910− ctx.namespace.insert(def.name.clone());
911− }
912− Some(DirectiveArgs::Text(Some(path))) if node.is_directive("include") => {
913− includes.push(path.raw.clone());
914− }
915− _ => {}
916− });
917− }
918− for path in includes {
919− let path = path.trim_matches('"');
920− if path.contains('$') {
921− continue;
212+ if hints.len() >= max {
213+ return;
922214 }
923− let resolved = match &base {
924− Some(base) => base.join(path),
925− None => PathBuf::from(path),
926− };
927− if !seen.insert(resolved.clone()) {
928− continue;
215+ if let Node::Element(elem) = node {
216+ if elem.kind == ElementKind::Image
217+ && let Some(ref src) = elem.argument
218+ && !src.is_empty()
219+ && !src.starts_with("data:")
220+ && !src.starts_with('#')
221+ {
222+ hints.push(crate::ast::PreloadHint {
223+ href: src.clone(),
224+ as_type: "image".to_string(),
225+ crossorigin: false,
226+ });
227+ }
228+ collect_images_recursive(&elem.children, hints, max);
929229 }
930− let Ok(text) = ctx.read_file(&resolved) else {
931− continue;
932− };
933− let tree = syntax::parse(&text);
934− let parent = resolved.parent().map(Path::to_path_buf);
935− collect_namespace(&tree.nodes, parent, seen, ctx);
936230 }
937231}
938232
939−/// Check the lines that were never evaluated: element and function names,
940−/// and the attributes of built-in elements (those that don't depend on a
941−/// variable). Names that come from data are only checked when evaluated.
942−fn check_unevaluated(ctx: &mut ParseContext) {
943− let trees = std::mem::take(&mut ctx.trees);
944− let mut seen = HashSet::new();
945− for (tree, chain) in &trees {
946− let before = ctx.diagnostics.len();
947− for node in &tree.nodes {
948− check_unevaluated_node(node, ctx);
949− }
950− let mut found = ctx.diagnostics.split_off(before);
951− if let Some(chain) = chain {
952− for d in &mut found {
953− d.message = format!("{}\n in {}", d.message, chain);
233+// ---------------------------------------------------------------------------
234+// Preprocessing: strip comments/blanks, collapse @raw blocks
235+// ---------------------------------------------------------------------------
236+
237+// ---------------------------------------------------------------------------
238+// Evaluation
239+// ---------------------------------------------------------------------------
240+
241+impl Evaluator {
242+ fn eval_block(&mut self, block: &[Syntax], ctx: &mut ParseContext) -> Vec<Node> {
243+ let mut nodes = Vec::new();
244+ for node in block {
245+ match self.eval(node, ctx) {
246+ Ok(Some(new_nodes)) => nodes.extend(new_nodes),
247+ Ok(None) => {}
248+ // Record the error and go on, to report several in one pass
249+ Err(e) => ctx.diagnostics.push(Diagnostic {
250+ line: e.line,
251+ column: None,
252+ message: e.message,
253+ severity: Severity::Error,
254+ source_line: Some(node.source()),
255+ }),
954256 }
955257 }
956− // A file included twice is checked twice: report each problem once
957− found.retain(|d| seen.insert((d.line, d.message.clone())));
958− ctx.diagnostics.extend(found);
258+ nodes
959259 }
960− ctx.trees = trees;
961−}
962260
963−fn check_unevaluated_node(node: &syntax::Node, ctx: &mut ParseContext) {
964− if !ctx.visited.contains(&node.id) {
965− let line = node.span.line;
966− // A reference from code that doesn't run still counts as a use
967− track_var_refs(&node.source, &mut ctx.used_variables);
968− let before = ctx.diagnostics.len();
969− match &node.kind {
970− NodeKind::Element(element) => {
971− for head in &element.chain {
972− check_head(head, line, ctx);
973− }
974− check_unevaluated_content(node, element, ctx);
975− if let Some(text) = &element.text {
976− check_inline_heads(text, line, ctx);
261+ /// Evaluate a block in its own scope: `@let` inside doesn't leak out.
262+ fn eval_scoped(&mut self, block: &[Syntax], ctx: &mut ParseContext) -> Vec<Node> {
263+ let saved_vars = ctx.variables.clone();
264+ let nodes = self.eval_block(block, ctx);
265+ ctx.variables = saved_vars;
266+ nodes
267+ }
268+
269+ fn eval(&mut self, node: &Syntax, ctx: &mut ParseContext) -> Result<Option<Vec<Node>>, ParseError> {
270+ let line_num = node.line();
271+ ctx.current_line = line_num;
272+ if !matches!(node, Syntax::Raw { .. })
273+ && let Some(filter) = old_filter_syntax(&node.source())
274+ {
275+ ctx.diagnostics.push(Diagnostic {
276+ line: line_num,
277+ column: None,
278+ message: format!(
279+ "`${}|{}` filters are functions now: write `${{{}(${})}}` (run `htmlang upgrade`)",
280+ filter.0, filter.1, filter.1, filter.0
281+ ),
282+ severity: Severity::Warning,
283+ source_line: Some(node.source()),
284+ });
285+ }
286+ let (content, current_indent, children) = match node {
287+ Syntax::Raw { text, .. } => return Ok(Some(vec![Node::Raw(text.clone())])),
288+ Syntax::Function { name, params, defaults, body, .. } => {
289+ self.define_function(name, params, defaults, body, line_num, ctx);
290+ return Ok(None);
291+ }
292+ Syntax::If { branches } => {
293+ // Every condition is checked (and its errors reported);
294+ // the first that holds picks the branch.
295+ let mut chosen = None;
296+ for branch in branches {
297+ let holds = match &branch.condition {
298+ Some(condition) => ctx.condition(condition, branch.line),
299+ None => true,
300+ };
301+ if holds && chosen.is_none() {
302+ chosen = Some(&branch.body);
303+ }
977304 }
305+ return Ok(chosen.map(|body| self.eval_scoped(body, ctx)));
978306 }
979− NodeKind::Text(text) => check_inline_heads(text, line, ctx),
980− // `@page`'s attributes are checked like an element's (a layout's
981− // `@page` is in a function that may not run in this file)
982− NodeKind::Directive(syntax::Directive {
983− args:
984− DirectiveArgs::Page {
985− attrs: Some(list), ..
986− },
987− ..
988− }) => {
989− let words: Vec<String> = crate::vocab::PAGE_WORDS
990− .iter()
991− .map(|w| w.to_string())
992− .collect();
993− ctx.in_page = true;
994− check_attrs(&list.attrs, line, ctx, &words);
995− ctx.in_page = false;
996− check_page_tokens(&list.attrs, line, ctx);
307+ Syntax::Each { header, body, empty, .. } => {
308+ return self.eval_each(header, body, empty, line_num, ctx).map(Some);
997309 }
998− _ => {}
310+ Syntax::Line { text, indent, children, .. } => (text.clone(), *indent, children),
311+ };
312+
313+ // --- Directives ---
314+
315+ // Removed syntax gets a pointer to its replacement — unless the
316+ // name is a user function (e.g. `@let divider`).
317+ if content.starts_with('@')
318+ && !ctx.functions.contains_key(extract_element_name(&content))
319+ && let Some(hint) = removed_syntax_hint(&content)
320+ {
321+ return Err(ParseError {
322+ line: line_num,
323+ message: hint,
324+ });
999325 }
1000− let text = written_line(node);
1001− for d in &mut ctx.diagnostics[before..] {
1002− d.source_line.get_or_insert_with(|| text.as_str().into());
326+
327+ // @page [lang en, favicon /f.png, canonical URL, base URL] Title
328+ if let Some(rest) = content.strip_prefix("@page ") {
329+ let rest = rest.trim_start();
330+ let title = if rest.starts_with('[') {
331+ let (attrs, title) = parse_attr_brackets_no_validate(rest, line_num, ctx)?;
332+ for attr in attrs {
333+ let value = attr.value.unwrap_or_default();
334+ match attr.key.as_str() {
335+ "lang" => ctx.lang = Some(value),
336+ "favicon" => ctx.favicon = Some(value),
337+ "canonical" => ctx.canonical = Some(value),
338+ "base" => ctx.base_url = Some(value),
339+ other => ctx.diagnostics.push(Diagnostic {
340+ line: line_num,
341+ column: None,
342+ message: format!(
343+ "unknown @page attribute '{}' (expected lang, favicon, canonical or base)",
344+ other
345+ ),
346+ severity: Severity::Warning,
347+ source_line: Some(content.clone()),
348+ }),
349+ }
350+ }
351+ title
352+ } else {
353+ rest.to_string()
354+ };
355+ ctx.page_title = Some(substitute_vars(title.trim(), &ctx.variables));
356+ return Ok(None);
1003357 }
1004− }
1005− for child in &node.children {
1006− check_unevaluated_node(child, ctx);
1007− }
1008−}
1009358
1010−/// Check the content passed to the calls of a line that was never
1011−/// evaluated: its `@slot NAME` blocks, and, for a function without
1012−/// `@children`, any other content.
1013−fn check_unevaluated_content(
1014− node: &syntax::Node,
1015− element: &syntax::ElementLine,
1016− ctx: &mut ParseContext,
1017−) {
1018− let calls: Vec<Option<(String, Rc<FnDef>)>> = element
1019− .chain
1020− .iter()
1021− .map(|head| {
1022− let function = ctx.defined_functions.get(&head.name)?;
1023− Some((head.name.clone(), function.clone()))
1024− })
1025− .collect();
1026− check_fillers(node, element, &calls, ctx);
1027− let last = calls.len() - 1;
1028− for (i, call) in calls.iter().enumerate() {
1029− let Some((name, function)) = call else {
1030− continue;
1031− };
1032− if function.has_children || function.wraps_itself {
1033− continue;
1034− }
1035− let content = if i == last {
1036− element.text.is_some() || holds_content(&node.children, ctx)
1037− } else {
1038− element.chain[i + 1].name != "slot" || !slot_is_built_in(ctx)
1039− };
1040− if content {
1041− let head = &element.chain[i];
1042− ctx.push_once(no_children(
1043− name,
1044− node.span.line,
1045− name_column(head, node.span.line),
1046− ));
1047− }
1048− }
1049−}
1050359
1051−/// Check a head that was never evaluated: its name, and its attributes
1052−/// (for a call, see [`check_call`]).
1053−fn check_head(head: &syntax::Head, line: usize, ctx: &mut ParseContext) {
1054− let is_function =
1055− ctx.namespace.contains(&head.name) || ctx.defined_functions.contains_key(&head.name);
1056− if is_function {
1057− ctx.used_functions.insert(head.name.clone());
1058− if let Some(function) = ctx.defined_functions.get(&head.name).cloned()
1059− && !function.wraps_itself
1060− {
1061− check_call(head, &function, line, ctx);
1062− }
1063− return;
1064− }
1065− let kind = match parse_element_kind(&head.name, line, ctx) {
1066− Ok(kind) => kind,
1067− Err(e) => {
1068− ctx.diagnostics.push(e);
1069− return;
1070− }
1071− };
1072− if let Some(list) = &head.attrs {
1073− check_attrs(&list.attrs, line, ctx, &[]);
1074− // A word for laying out children on an element that doesn't lay
1075− // them out, as where the code runs (see `validate_tree`)
1076− if !kind.layout().is_container() && !has_no_element(&kind) {
1077− for attr in &list.attrs {
1078− let base = crate::vocab::base_attribute(&attr.key);
1079− if !attr.html
1080− && attr.choice.is_none()
1081− && attr.prefixed.is_none()
1082− && crate::vocab::CONTAINER_ATTRIBUTES.contains(&base)
1083− && !crate::vocab::split_prefixes(&attr.key)
1084− .0
1085− .contains(&"children:")
1086− {
1087− ctx.push_once(not_a_container(&kind, line, base).column(attr.span.column));
1088− }
360+ if let Some(rest) = content.strip_prefix("@let ") {
361+ let rest = rest.trim();
362+
363+ if !children.is_empty() {
364+ return Err(ParseError {
365+ line: line_num,
366+ message: "@let with body requires a name".to_string(),
367+ });
1089368 }
1090− }
1091− }
1092−}
1093369
1094−/// The attributes of a list that is never evaluated that can be checked
1095−/// together: not bundles or `if()`s. Names are checked; a value with a
1096−/// variable in it depends on what the variable holds, so only a literal
1097−/// value is (the other is checked as an empty value).
1098−/// `@page`'s own rules (see `check_page_attr`) for a list that isn't
1099−/// evaluated, as written: a value made from a variable counts as given.
1100−fn check_page_tokens(tokens: &[syntax::Attr], line: usize, ctx: &mut ParseContext) {
1101− for token in tokens {
1102− match &token.choice {
1103− Some(choice) => {
1104− for branch in &choice.branches {
1105− check_page_tokens(branch.attrs(), line, ctx);
370+ if let Some((name, value)) = rest.split_once(' ') {
371+ let value = value.trim();
372+ // `@let name = EXPR` computes its value (see expr.rs); any
373+ // other value is literal text with `$var` interpolation.
374+ if let Some(expression) = value.strip_prefix('=') {
375+ let value = ctx
376+ .eval(expression.trim(), line_num)
377+ .map(|v| v.to_string())
378+ .unwrap_or_default();
379+ if name.starts_with("--") {
380+ ctx.css_vars.push((name.to_string(), value.clone()));
381+ }
382+ ctx.variables.insert(name.to_string(), value);
383+ ctx.let_lines.entry(name.to_string()).or_insert(line_num);
384+ return Ok(None);
385+ }
386+
387+ // Attribute bundle: @let name [attr1, attr2, ...]
388+ if value.starts_with('[') {
389+ let (attrs, _) = parse_attr_brackets(value, line_num, ctx)?;
390+ ctx.defines.insert(name.to_string(), attrs);
391+ ctx.define_lines.entry(name.to_string()).or_insert(line_num);
392+ return Ok(None);
1106393 }
1107− }
1108− // Under prefixes there are only styles
1109− None if token.key.starts_with('$') || token.prefixed.is_some() => {}
1110− None => {
1111− let value = token.value.as_deref().map(|v| v.trim_matches('"'));
1112− let value = match value {
1113− Some(v) if v.contains('$') => Some("$"),
1114− other => other,
394+
395+ // Triple quotes: @let name """...""" (syntax.rs joins the
396+ // lines of a multi-line string)
397+ let value = if let Some(after_open) = value.strip_prefix("\"\"\"") {
398+ after_open.strip_suffix("\"\"\"").unwrap_or(after_open)
399+ } else if value.starts_with('"') && value.ends_with('"') && value.len() >= 2 {
400+ // Support quoted string interpolation: @let greeting "Hello $name"
401+ &value[1..value.len() - 1]
402+ } else {
403+ value
1115404 };
1116− check_page_attr(
1117− &token.key,
1118− token.html,
1119− value,
1120− line,
1121− Some(token.span.column),
1122− ctx,
1123− );
405+ track_var_refs(value, &mut ctx.used_variables);
406+ let value = substitute_vars(value, &ctx.variables);
407+ if name.starts_with("--") {
408+ // CSS custom property
409+ ctx.css_vars.push((name.to_string(), value.clone()));
410+ }
411+ ctx.variables.insert(name.to_string(), value);
412+ ctx.let_lines.entry(name.to_string()).or_insert(line_num);
1124413 }
414+ return Ok(None);
1125415 }
1126− }
1127−}
1128416
1129−fn literal_attrs(tokens: &[syntax::Attr]) -> Vec<syntax::Attr> {
1130− // A prefixed group is checked with its prefixes, as far as its own
1131− // attributes can be; a prefixed bundle or `if()` depends on what it holds
1132− let group = |a: &syntax::Attr| {
1133− let prefixed = a.prefixed.as_ref()?;
1134− let syntax::Branch::Group { list, trailing } = &prefixed.target else {
1135− return None;
1136− };
1137− let mut list = list.clone();
1138− list.attrs = literal_attrs(&list.attrs);
1139− let mut a = a.clone();
1140− a.prefixed = Some(Box::new(syntax::Prefixed {
1141− target: syntax::Branch::Group {
1142− list,
1143− trailing: trailing.clone(),
1144− },
1145− ..(**prefixed).clone()
1146− }));
1147− Some(a)
1148− };
1149− let groups = tokens.iter().filter_map(group);
1150− tokens
1151− .iter()
1152− .filter(|a| {
1153− let bundle = a.key.starts_with('$') && a.value.is_none() && !a.html;
1154− a.choice.is_none() && a.prefixed.is_none() && !bundle
1155− })
1156− .map(|a| {
1157− let mut a = a.clone();
1158− let variable = |v: &String| v.contains('$');
1159− if !a.key.contains('$') && a.value.as_ref().is_some_and(variable) {
1160− a.value = Some(String::new());
1161− a.raw = format!("{} ", a.key);
417+ // @meta NAME VALUE; `og:` names become Open Graph property tags
418+ if let Some(rest) = content.strip_prefix("@meta ") {
419+ let rest = rest.trim();
420+ if let Some((name, value)) = rest.split_once(' ') {
421+ let value = substitute_vars(value.trim(), &ctx.variables);
422+ match name.trim().strip_prefix("og:") {
423+ Some(property) => ctx.og_tags.push((property.to_string(), value)),
424+ None => ctx.meta_tags.push((name.trim().to_string(), value)),
425+ }
1162426 }
1163− a
1164− })
1165− .chain(groups)
1166− .collect()
1167−}
1168−
1169−/// Check a call that was never evaluated: how it passes its parameters
1170−/// (none written `name=value`, and every one without a default passed,
1171−/// when no bundle or `if()` could pass it), and its other attributes, like
1172−/// those of an element.
1173−fn check_call(head: &syntax::Head, function: &FnDef, line: usize, ctx: &mut ParseContext) {
1174− let name = head.name.as_str();
1175− let attrs = head.attrs.as_ref().map_or(&[][..], |list| &list.attrs[..]);
1176− written_parameter_forms(name, function, attrs, line, ctx);
1177− if let Some(list) = &head.attrs {
1178− let params: Vec<String> = function.params.iter().map(|p| p.name.clone()).collect();
1179− check_attrs(&list.attrs, line, ctx, &params);
1180− }
1181− let unknown = attrs
1182− .iter()
1183− .any(|a| a.choice.is_some() || (a.key.starts_with('$') && a.value.is_none()));
1184− if unknown {
1185− return;
1186− }
1187− for param in function.params.iter().filter(|p| p.default.is_none()) {
1188− if !attrs.iter().any(|a| a.key == param.name) {
1189− let column = name_column(head, line);
1190− ctx.push_once(missing_parameter(name, &param.name, line, column));
427+ return Ok(None);
1191428 }
1192− }
1193−}
1194429
1195−/// Report each parameter a call's list writes `name=value`, with the value
1196−/// as written and its column; returns their names, so the evaluated call
1197−/// doesn't report them again.
1198−fn written_parameter_forms(
1199− name: &str,
1200− function: &FnDef,
1201− attrs: &[syntax::Attr],
1202− line: usize,
1203− ctx: &mut ParseContext,
1204−) -> Vec<String> {
1205− let mut reported = Vec::new();
1206− for attr in attrs {
1207− if !(attr.html && function.is_param(&attr.key)) {
1208− continue;
1209− }
1210− let at = if attr.span.line == 0 {
1211− line
1212− } else {
1213− attr.span.line
1214− };
1215− let value = attr.value.as_deref().unwrap_or("");
1216− let diagnostic = parameter_form(name, &attr.key, value, at).column(attr.span.column);
1217− ctx.push_once(match &ctx.current_source {
1218− (current, Some(text)) if *current == at => diagnostic.source(text.clone()),
1219− _ => diagnostic,
1220− });
1221− reported.push(attr.key.clone());
1222− }
1223− reported
1224−}
1225430
1226−fn check_inline_heads(text: &syntax::Text, line: usize, ctx: &mut ParseContext) {
1227− for segment in &text.segments {
1228− if let Segment::Inline(inline) = segment {
1229− check_head(&inline.head, line, ctx);
1230− if let Some(text) = &inline.text {
1231− check_inline_heads(text, line, ctx);
431+ if content == "@head" || content.starts_with("@head ") {
432+ let trimmed = block_text(children).trim().to_string();
433+ if !trimmed.is_empty() {
434+ ctx.head_blocks.push(trimmed);
1232435 }
436+ return Ok(None);
1233437 }
1234− }
1235−}
1236−
1237−// ---------------------------------------------------------------------------
1238−// Evaluation
1239−// ---------------------------------------------------------------------------
1240438
1241−/// The `@else` lines that continue the `@if` or `@each` before `from`, and
1242−/// the position after them.
1243−fn else_branches(block: &[syntax::Node], from: usize, is_if: bool) -> (Vec<&syntax::Node>, usize) {
1244− let mut branches = Vec::new();
1245− let mut next = from;
1246− let mut i = from;
1247− while i < block.len() {
1248− let node = &block[i];
1249− i += 1;
1250− if node.is_trivia() {
1251− continue;
1252− }
1253− let condition = match node.directive().map(|d| &d.args) {
1254− Some(DirectiveArgs::Else { condition }) => condition.is_some(),
1255− _ => break,
1256− };
1257− if condition && !is_if {
1258− break;
1259− }
1260− branches.push(node);
1261− next = i;
1262− if !condition {
1263− break;
439+ // --- @style block (raw CSS) ---
440+ if content.trim() == "@style" {
441+ let trimmed = block_text(children).trim().to_string();
442+ if !trimmed.is_empty() {
443+ ctx.custom_css.push(trimmed);
444+ }
445+ return Ok(None);
1264446 }
1265− }
1266− (branches, next)
1267−}
1268447
1269−impl Evaluator {
1270− fn eval_block(&mut self, block: &[syntax::Node], ctx: &mut ParseContext) -> Vec<Node> {
1271− let mut nodes = Vec::new();
1272− let mut i = 0;
1273− while i < block.len() {
1274− let node = &block[i];
1275− i += 1;
1276− if node.is_trivia() {
1277− continue;
1278− }
1279− let result = match node.directive().map(|d| d.name()) {
1280− Some(name @ ("if" | "each")) => {
1281− let (branches, next) = else_branches(block, i, name == "if");
1282− i = next;
1283− if name == "if" {
1284− Ok(Some(self.eval_if(node, &branches, ctx)))
1285− } else {
1286− self.eval_each(node, branches.first().copied(), ctx)
448+
449+ // --- @markdown block or file (convert markdown to HTML) ---
450+ if content.trim() == "@markdown" || content.trim().starts_with("@markdown ") {
451+ let arg = content.trim().strip_prefix("@markdown").unwrap().trim();
452+ if arg.is_empty() {
453+ // Inline markdown block: indented children
454+ let md_lines: Vec<String> = block_text(children).lines().map(String::from).collect();
455+ let html = markdown_to_html(&md_lines);
456+ return Ok(Some(vec![Node::Raw(html)]));
457+ } else {
458+ // External markdown file: @markdown file.md
459+ let filename = substitute_vars(arg, &ctx.variables);
460+ let resolved = match &ctx.base_path {
461+ Some(base) => base.join(&filename),
462+ None => PathBuf::from(&filename),
463+ };
464+ let md_text = if let Some(cached) = ctx.file_cache.get(&resolved) {
465+ cached.clone()
466+ } else {
467+ match std::fs::read_to_string(&resolved) {
468+ Ok(text) => {
469+ ctx.file_cache.insert(resolved.clone(), text.clone());
470+ text
471+ }
472+ Err(e) => {
473+ ctx.diagnostics.push(Diagnostic {
474+ line: line_num,
475+ column: None,
476+ message: format!("cannot read markdown '{}': {}", filename, e),
477+ severity: Severity::Error,
478+ source_line: Some(content.clone()),
479+ });
480+ return Ok(None);
481+ }
1287482 }
1288− }
1289− // Reported as a syntax error
1290− Some("else") => {
1291− ctx.visited.insert(node.id);
1292− Ok(None)
1293− }
1294− _ => self.eval(node, ctx),
1295− };
1296− match result {
1297− Ok(Some(new_nodes)) => nodes.extend(new_nodes),
1298− Ok(None) => {}
1299− // Record the error and go on, to report several in one pass
1300− Err(mut e) => {
1301− e.source_line
1302− .get_or_insert_with(|| node.source.as_str().into());
1303− ctx.diagnostics.push(e);
1304− }
483+ };
484+ ctx.included_files.push(resolved);
485+ let md_lines: Vec<String> = md_text.lines().map(|l| l.to_string()).collect();
486+ let html = markdown_to_html(&md_lines);
487+ return Ok(Some(vec![Node::Raw(html)]));
1305488 }
1306489 }
1307− nodes
1308− }
1309490
1310− /// Evaluate a block in its own scope: what it defines is visible to
1311− /// the end of the block, and not after it.
1312− fn eval_scoped(&mut self, block: &[syntax::Node], ctx: &mut ParseContext) -> Vec<Node> {
1313− ctx.env.push();
1314− let nodes = self.eval_block(block, ctx);
1315− ctx.env.pop();
1316− nodes
1317− }
1318491
1319− /// `@if` with its `@else if` / `@else` branches. Every condition is
1320− /// checked (and its errors reported); the first that holds picks the
1321− /// branch.
1322− fn eval_if(
1323− &mut self,
1324− node: &syntax::Node,
1325− branches: &[&syntax::Node],
1326− ctx: &mut ParseContext,
1327− ) -> Vec<Node> {
1328− let mut chosen = None;
1329− for branch in std::iter::once(node).chain(branches.iter().copied()) {
1330− ctx.visited.insert(branch.id);
1331− ctx.enter(branch);
1332− let holds = match branch.directive().map(|d| &d.args) {
1333− Some(DirectiveArgs::Condition(condition))
1334− | Some(DirectiveArgs::Else {
1335− condition: Some(condition),
1336− }) => {
1337− !condition.raw.is_empty()
1338− && ctx.condition(
1339− &condition.raw,
1340− branch.span.line,
1341− Some(condition.span.column),
1342− )
1343− }
1344− Some(DirectiveArgs::Else { condition: None }) => true,
1345− // A syntax error, already reported
1346− _ => false,
1347− };
1348− if holds && chosen.is_none() {
1349− chosen = Some(&branch.children);
1350− }
1351− }
1352− chosen.map_or_else(Vec::new, |body| self.eval_scoped(body, ctx))
1353− }
1354492
1355− fn eval(
1356− &mut self,
1357− node: &syntax::Node,
1358− ctx: &mut ParseContext,
1359− ) -> Result<Option<Vec<Node>>, ParseError> {
1360− ctx.visited.insert(node.id);
1361− ctx.enter(node);
1362− match &node.kind {
1363− NodeKind::Blank | NodeKind::Comment => Ok(None),
1364− // `@code` and `@textarea` show their body as text; `@script`'s
1365− // goes into the page as it is
1366− NodeKind::Verbatim(body) if body.escaped => {
1367− let text = body.text.trim_matches('\n').to_string();
1368− Ok(Some(vec![Node::Text(vec![TextSegment::Plain(text)])]))
1369− }
1370− NodeKind::Verbatim(body) => Ok(Some(vec![Node::Raw(body.text.clone())])),
1371− NodeKind::Directive(directive) => {
1372− let mut nodes = self.eval_directive(node, directive, ctx)?;
1373− // A directive that takes no body: the lines indented under
1374− // it (a syntax error) are evaluated as its siblings. A
1375− // @let's body belongs to it even under a value (also an
1376− // error), so it is never evaluated in place.
1377− let takes_body = directive.spec.body != BodyKind::None;
1378− if !takes_body {
1379− let siblings = self.eval_block(&node.children, ctx);
1380− nodes.get_or_insert_with(Vec::new).extend(siblings);
1381− }
1382− Ok(nodes)
1383− }
1384− NodeKind::Element(element) => self.eval_element(node, element, ctx).map(Some),
1385− NodeKind::Text(text) => {
1386− let mut nodes = vec![Node::Text(text_segments(text, ctx))];
1387− // Text takes no body: lines indented under it are its
1388− // siblings
1389− nodes.extend(self.eval_block(&node.children, ctx));
1390− Ok(Some(nodes))
493+ if let Some(rest) = content.strip_prefix("@include ") {
494+ let rest = rest.trim();
495+ if let Some((file, alias)) = rest.rsplit_once(" as ") {
496+ return Err(ParseError {
497+ line: line_num,
498+ message: format!(
499+ "`@include ... as` was removed: write `@include {}` and drop the `{}.` \
500+ prefix (run `htmlang upgrade`)",
501+ file.trim(),
502+ alias.trim()
503+ ),
504+ });
1391505 }
1392− }
1393− }
506+ let filename = rest
507+ .strip_prefix('"')
508+ .and_then(|f| f.strip_suffix('"'))
509+ .unwrap_or(rest);
510+ let filename = substitute_vars(filename, &ctx.variables);
1394511
1395− fn eval_directive(
1396− &mut self,
1397− node: &syntax::Node,
1398− directive: &syntax::Directive,
1399− ctx: &mut ParseContext,
1400− ) -> Result<Option<Vec<Node>>, ParseError> {
1401− let line_num = node.span.line;
1402− let content = &node.source;
1403− match (directive.name(), &directive.args) {
1404− // @page [lang=en, favicon /f.png, background #f8fafc] Title
1405− ("page", DirectiveArgs::Page { attrs, title }) => {
1406− let page = read_page(attrs.as_ref(), title.as_ref(), line_num, ctx);
1407− // A page has one root: a second `@page` (a layout called
1408− // twice, or one called after the page's own) is an error
1409− let here = match &ctx.current_file {
1410− Some(file) => format!("line {} of {}", line_num, file),
1411− None => format!("line {}", line_num),
512+ // Glob support: if filename contains *, expand to multiple imports
513+ if filename.contains('*') {
514+ let base_dir = match &ctx.base_path {
515+ Some(base) => base.clone(),
516+ None => PathBuf::from("."),
1412517 };
1413− if let Some(first) = &ctx.page_at {
1414− let again = if *first == here {
1415− "this @page runs a second time (in a loop, or in a function called \
1416− twice)"
1417− .to_string()
1418− } else {
1419− format!("a second @page (this page already has one, on {})", first)
1420− };
1421− let diagnostic = Diagnostic::error(
1422− code::DUPLICATE_PAGE,
1423− line_num,
1424− format!(
1425− "{}: a page has one @page, the root element that styles its <body>",
1426− again
1427− ),
1428− )
1429− .source(content.clone())
1430− .subject("@page");
1431− ctx.diagnostics.push(diagnostic);
1432− } else {
1433− ctx.page_at = Some(here);
1434− ctx.page = Some(page);
1435− }
1436− Ok(None)
1437− }
1438−
1439− ("let", DirectiveArgs::Let(def)) => {
1440− let name = def.name.as_str();
1441− // Values, bundles and functions share one namespace: a
1442− // definition replaces whatever the name meant in its block
1443− match &def.form {
1444− LetForm::Function(function) => {
1445− self.define_function(name, &function.params, node, ctx);
1446− }
1447− // `@let name = EXPR` computes its value (see expr.rs)
1448− LetForm::Computed(expression) => {
1449− let value = ctx
1450− .eval(&expression.raw, line_num, Some(expression.span.column))
1451− .unwrap_or_else(Value::empty);
1452− set_variable(name, value, line_num, ctx);
1453− }
1454− // Attribute bundle: @let name [attr1, attr2, ...]
1455− LetForm::Bundle(list) => {
1456− ctx.in_bundle = true;
1457− let attrs = parse_attr_list(&list.attrs, line_num, ctx, true, &[]);
1458− ctx.in_bundle = false;
1459− ctx.env.define(name, Binding::Bundle(Rc::new(attrs)));
1460− ctx.define_lines.entry(name.to_string()).or_insert(line_num);
1461− }
1462− // `@let size 16px`, `@let fruits apple, banana`,
1463− // `@let post $posts.0`: see `slot_value`
1464− LetForm::Value(value) => {
1465− let (value, _) =
1466− ctx.slot_value(&value.raw, value.span.line, Some(value.span.column));
1467− set_variable(name, value, line_num, ctx);
518+ let pattern_path = Path::new(&filename);
519+ let (glob_dir, glob_pattern) = match pattern_path.parent() {
520+ Some(dir) if !dir.as_os_str().is_empty() => (
521+ base_dir.join(dir),
522+ pattern_path
523+ .file_name()
524+ .unwrap_or_default()
525+ .to_string_lossy()
526+ .to_string(),
527+ ),
528+ _ => (base_dir.clone(), filename.clone()),
529+ };
530+ let matched_files = match std::fs::read_dir(&glob_dir) {
531+ Ok(entries) => {
532+ let mut files: Vec<PathBuf> = entries
533+ .flatten()
534+ .filter(|e| {
535+ let name = e.file_name().to_string_lossy().to_string();
536+ glob_match(&glob_pattern, &name)
537+ })
538+ .map(|e| e.path())
539+ .collect();
540+ files.sort();
541+ files
1468542 }
1469− // Quoted text: `@let arrow "→ "`
1470− LetForm::Quoted(value) => {
1471− let raw = format!("\"{}\"", value.raw);
1472− let column = value.span.column.saturating_sub(1);
1473− let (text, quoted, _) =
1474− ctx.fill_value(&raw, value.span.line, Some(column), Sink::Text);
1475− let value = quoted.map_or(Value::Str(text), Value::Quoted);
1476− set_variable(name, value, line_num, ctx);
543+ Err(e) => {
544+ ctx.diagnostics.push(Diagnostic {
545+ line: line_num,
546+ column: None,
547+ message: format!(
548+ "cannot read directory for glob '{}': {}",
549+ filename, e
550+ ),
551+ severity: Severity::Error,
552+ source_line: Some(content.clone()),
553+ });
554+ return Ok(None);
1477555 }
556+ };
557+ if matched_files.is_empty() {
558+ ctx.diagnostics.push(Diagnostic {
559+ line: line_num,
560+ column: None,
561+ message: format!("no files matched glob pattern '{}'", filename),
562+ severity: Severity::Warning,
563+ source_line: Some(content.clone()),
564+ });
565+ return Ok(None);
1478566 }
1479− Ok(None)
567+ let mut matched_nodes = Vec::new();
568+ for file_path in matched_files {
569+ let rel_name = file_path
570+ .strip_prefix(&base_dir)
571+ .unwrap_or(&file_path)
572+ .to_string_lossy()
573+ .to_string();
574+ let import_line = format!("@include \"{}\"", rel_name);
575+ matched_nodes.extend(self.eval_block(&syntax::parse(&import_line), ctx));
576+ }
577+ return Ok(Some(matched_nodes));
1480578 }
1481579
1482− // @meta NAME VALUE; `og:` names become Open Graph property tags
1483− ("meta", DirectiveArgs::Text(Some(arg))) => {
1484− let Some((name, value)) = arg.raw.split_once(char::is_whitespace) else {
1485− ctx.diagnostics.push(
1486− Diagnostic::error(
1487− code::MISSING_ARGUMENT,
1488− line_num,
1489− format!("@meta needs a name and a value: `@meta {} VALUE`", arg.raw),
1490− )
1491− .source(content.clone()),
1492− );
1493− return Ok(None);
1494− };
1495− let value_column = arg.span.column + arg.raw.len() - value.trim_start().len();
1496− // An HTML attribute value: quoted text loses its quotes
1497− let (value, _, _) =
1498− ctx.fill_value(value.trim(), line_num, Some(value_column), Sink::Text);
1499− // The same tag twice says nothing more (a layout called
1500− // twice): it is written once
1501− let (tags, tag) = match name.trim().strip_prefix("og:") {
1502− Some(property) => (&mut ctx.og_tags, (property.to_string(), value)),
1503− None => (&mut ctx.meta_tags, (name.trim().to_string(), value)),
1504− };
1505− if !tags.contains(&tag) {
1506− tags.push(tag);
1507− }
1508− ctx.head_at.get_or_insert(line_num);
1509− Ok(None)
580+ let resolved = match &ctx.base_path {
581+ Some(base) => base.join(&filename),
582+ None => PathBuf::from(&filename),
583+ };
584+
585+ if ctx.include_stack.contains(&resolved) {
586+ let cycle_chain = format_include_chain(&ctx.include_stack);
587+ ctx.diagnostics.push(Diagnostic {
588+ line: line_num,
589+ column: None,
590+ message: format!(
591+ "circular include '{}' (cycle: {} → {})",
592+ filename, cycle_chain, filename
593+ ),
594+ severity: Severity::Error,
595+ source_line: Some(content.clone()),
596+ });
597+ return Ok(None);
1510598 }
1511599
1512− ("head", _) => {
1513− let text = verbatim_content(node);
1514− if !text.trim().is_empty() {
1515− ctx.head_blocks.push(text.trim().to_string());
1516− ctx.head_at.get_or_insert(line_num);
600+ let imported_text = if let Some(cached) = ctx.file_cache.get(&resolved) {
601+ cached.clone()
602+ } else {
603+ match std::fs::read_to_string(&resolved) {
604+ Ok(text) => {
605+ ctx.file_cache.insert(resolved.clone(), text.clone());
606+ text
607+ }
608+ Err(e) => {
609+ ctx.diagnostics.push(Diagnostic {
610+ line: line_num,
611+ column: None,
612+ message: format!("cannot include '{}': {}", filename, e),
613+ severity: Severity::Error,
614+ source_line: Some(content.clone()),
615+ });
616+ return Ok(None);
617+ }
1517618 }
1518− Ok(None)
619+ };
620+
621+ ctx.included_files.push(resolved.clone());
622+ ctx.include_stack.push(resolved.clone());
623+ let saved_base = ctx.base_path.clone();
624+ ctx.base_path = resolved.parent().map(|p| p.to_path_buf());
625+
626+ let diag_count_before = ctx.diagnostics.len();
627+
628+ let included_nodes = self.eval_block(&syntax::parse(&imported_text), ctx);
629+
630+ // Annotate new diagnostics with import chain
631+ let import_chain = format_include_chain(&ctx.include_stack);
632+ for d in &mut ctx.diagnostics[diag_count_before..] {
633+ d.message = format!("{}\n in {}", d.message, import_chain);
1519634 }
1520635
1521− // @style: raw CSS
1522− ("style", _) => {
1523− let text = verbatim_content(node);
1524− // Only the @style at the top of a function's body is
1525− // scoped; anywhere else `&` is `:scope`, the whole page
1526− if has_top_level_ampersand(&text) {
1527− ctx.push_once(Diagnostic::warning(
1528− code::INVALID_VALUE,
1529− node.span.line,
1530− "`&` in this @style is the whole page: only an @style at the top of a \
1531− function's body is scoped to the function, with `&` its root element"
1532− .to_string(),
1533− ));
1534− }
1535− if !text.trim().is_empty() {
1536− ctx.custom_css.push(text.trim().to_string());
636+ ctx.base_path = saved_base;
637+ ctx.include_stack.pop();
638+ return Ok(Some(included_nodes));
639+ }
640+
641+
642+
643+ // --- @data (load JSON file into variables) ---
644+
645+ // @data $name file.json values as $name.key
646+ // @data $name dir/*.json a list of the files' records
647+ // @data $name [...] / {...} inline JSON
648+ // @data $name env:NAME [DEFAULT] an environment variable
649+ if let Some(rest) = content.strip_prefix("@data ") {
650+ let rest = rest.trim();
651+ let Some((prefix, filename)) = rest
652+ .strip_prefix('$')
653+ .and_then(|named| named.split_once(char::is_whitespace))
654+ .map(|(name, source)| (name.to_string(), source.trim().to_string()))
655+ else {
656+ return Err(ParseError {
657+ line: line_num,
658+ message: format!(
659+ "@data needs a name: write `@data $name {}` and use `$name.key`",
660+ rest.trim_start_matches('$')
661+ ),
662+ });
663+ };
664+
665+ if let Some(env) = filename.strip_prefix("env:") {
666+ let (var, default) = match env.split_once(char::is_whitespace) {
667+ Some((var, default)) => (var, Some(default.trim())),
668+ None => (env, None),
669+ };
670+ let value = std::env::var(var)
671+ .ok()
672+ .or_else(|| default.map(|d| substitute_vars(d, &ctx.variables)));
673+ if value.is_none() {
674+ ctx.diagnostics.push(Diagnostic {
675+ line: line_num,
676+ column: None,
677+ message: format!(
678+ "environment variable '{}' is not set and has no default",
679+ var
680+ ),
681+ severity: Severity::Warning,
682+ source_line: Some(content.clone()),
683+ });
1537684 }
1538− Ok(None)
685+ ctx.variables.insert(prefix, value.unwrap_or_default());
686+ return Ok(None);
1539687 }
1540688
1541− // @markdown: an indented block, or a file
1542− ("markdown", DirectiveArgs::Text(file)) => {
1543− let Some(file) = file else {
1544− let md_lines: Vec<String> = verbatim_text(&node.children)
1545− .lines()
1546− .map(String::from)
1547− .collect();
1548− return Ok(Some(vec![Node::Raw(markdown_to_html(&md_lines))]));
689+ // Inline JSON: @data $links [{"label": "Home", "url": "/"}]
690+ let (json_text, source) = if filename.starts_with(['[', '{']) {
691+ (filename, "the inline data".to_string())
692+ } else {
693+ let filename = substitute_vars(&filename, &ctx.variables);
694+ if filename.contains('*') {
695+ self.load_data_glob(&prefix, &filename, line_num, &content, ctx);
696+ return Ok(None);
697+ }
698+ let resolved = match &ctx.base_path {
699+ Some(base) => base.join(&filename),
700+ None => PathBuf::from(&filename),
1549701 };
1550− let filename = ctx.interpolate_text(&file.raw, line_num, Some(file.span.column));
1551− let resolved = ctx.resolve(&filename);
1552− let md_text = match ctx.read_file(&resolved) {
1553− Ok(text) => text,
702+ match std::fs::read_to_string(&resolved) {
703+ Ok(text) => {
704+ ctx.included_files.push(resolved);
705+ (text, format!("'{}'", filename))
706+ }
1554707 Err(e) => {
1555− ctx.diagnostics.push(
1556− Diagnostic::error(
1557− code::UNREADABLE_FILE,
1558− line_num,
1559− format!("cannot read markdown '{}': {}", filename, e),
1560− )
1561− .source(content.clone()),
1562− );
708+ ctx.diagnostics.push(Diagnostic {
709+ line: line_num,
710+ column: None,
711+ message: format!("cannot load data '{}': {}", filename, e),
712+ severity: Severity::Error,
713+ source_line: Some(content.clone()),
714+ });
1563715 return Ok(None);
1564716 }
1565− };
1566− ctx.included_files.push(resolved);
1567− let md_lines: Vec<String> = md_text.lines().map(|l| l.to_string()).collect();
1568− Ok(Some(vec![Node::Raw(markdown_to_html(&md_lines))]))
717+ }
718+ };
719+ match parse_json_with_error(&json_text) {
720+ Ok(json) => flatten_json(&prefix, &json, &mut ctx.variables),
721+ Err(detail) => ctx.diagnostics.push(Diagnostic {
722+ line: line_num,
723+ column: None,
724+ message: format!("invalid JSON in {}: {}", source, detail),
725+ severity: Severity::Error,
726+ source_line: Some(content.clone()),
727+ }),
1569728 }
729+ return Ok(None);
730+ }
1570731
1571− ("include", DirectiveArgs::Text(Some(path))) => {
1572− self.eval_include(node.id, path, line_num, content, ctx)
1573− }
732+ // --- @if / @else ---
1574733
1575− ("data", DirectiveArgs::Data { name, source, .. }) => {
1576− self.eval_data(name, source, line_num, content, ctx);
1577− Ok(None)
1578− }
734+ if content.trim() == "@else" || content.trim().starts_with("@else if ") {
735+ return Err(ParseError {
736+ line: line_num,
737+ message: "@else without matching @if".to_string(),
738+ });
739+ }
1579740
1580− // @raw: the rest of its line, or its indented body, verbatim
1581− ("raw", _) => {
1582− let text = verbatim_content(node);
1583− let text = text.trim_end_matches('\n');
1584− Ok((!text.is_empty()).then(|| vec![Node::Raw(text.to_string())]))
1585− }
741+ // --- @each loop ---
1586742
1587− // A header with a syntax error (reported), or a directive
1588− // without its argument
1589− _ => Ok(None),
743+ // @raw: its indented body, or the rest of the line, verbatim
744+ if content == "@raw" {
745+ let text = block_text(children);
746+ let text = text.trim_end_matches('\n');
747+ return Ok((!text.is_empty()).then(|| vec![Node::Raw(text.to_string())]));
1590748 }
1591− }
1592−
1593− fn eval_include(
1594− &mut self,
1595− id: usize,
1596− path: &syntax::Arg,
1597− line_num: usize,
1598− content: &str,
1599− ctx: &mut ParseContext,
1600− ) -> Result<Option<Vec<Node>>, ParseError> {
1601− let (filename, column) = match path.raw.strip_prefix('"').and_then(|f| f.strip_suffix('"'))
1602− {
1603− Some(quoted) => (quoted, path.span.column + 1),
1604− None => (path.raw.as_str(), path.span.column),
1605− };
1606− let filename = ctx.interpolate_text(filename, line_num, Some(column));
1607− let resolved = ctx.resolve(&filename);
1608−
1609− if ctx.include_stack.contains(&resolved) {
1610− let cycle_chain = format_include_chain(&ctx.include_stack);
1611− ctx.diagnostics.push(
1612− Diagnostic::error(
1613− code::CIRCULAR_INCLUDE,
1614− line_num,
1615− format!(
1616− "circular include '{}' (cycle: {} → {})",
1617− filename, cycle_chain, filename
1618− ),
1619− )
1620− .source(content),
1621− );
1622− return Ok(None);
749+ if let Some(rest) = content.strip_prefix("@raw ") {
750+ if rest.starts_with("\"\"\"") {
751+ return Err(ParseError {
752+ line: line_num,
753+ message: "`@raw \"\"\"` was removed: put the content in an indented block \
754+ under `@raw` (run `htmlang upgrade`)"
755+ .to_string(),
756+ });
757+ }
758+ return Ok(Some(vec![Node::Raw(rest.to_string())]));
1623759 }
1624760
1625− let imported_text = match ctx.read_file(&resolved) {
1626− Ok(text) => text,
1627− Err(e) => {
1628− ctx.diagnostics.push(
1629− Diagnostic::error(
1630− code::UNREADABLE_FILE,
1631− line_num,
1632− format!("cannot include '{}': {}", filename, e),
1633− )
1634− .source(content),
1635− );
1636− return Ok(None);
761+ // --- Function call ---
762+
763+ if content.starts_with('@') {
764+ let name = extract_element_name(&content);
765+ if ctx.functions.contains_key(name) {
766+ ctx.used_functions.insert(name.to_string());
767+ let nodes = self.expand_fn_call(name, &content, children, line_num, ctx)?;
768+ return Ok(Some(nodes));
1637769 }
1638− };
770+ }
1639771
1640− ctx.included_files.push(resolved.clone());
1641− ctx.include_stack.push(resolved.clone());
1642− let saved_base = ctx.base_path.clone();
1643− ctx.base_path = resolved.parent().map(|p| p.to_path_buf());
1644−
1645− let diag_count_before = ctx.diagnostics.len();
1646− let import_chain = format_include_chain(&ctx.include_stack);
1647− let tree = ctx.parse_tree(&imported_text);
1648− ctx.diagnostics.extend(tree.diagnostics.iter().cloned());
1649− ctx.trees.push((tree.clone(), Some(import_chain.clone())));
1650− let files = Rc::make_mut(&mut ctx.included_by).entry(id).or_default();
1651− if !files.iter().any(|(_, chain)| *chain == import_chain) {
1652− files.push((tree.clone(), import_chain.clone()));
772+ // --- Elements ---
773+
774+ if content.starts_with('@') {
775+ let node = self.parse_element_line(&content, children, line_num, ctx)?;
776+ return Ok(Some(vec![inline_svg(node, line_num, ctx)]));
1653777 }
1654− let saved_file = ctx.current_file.replace(import_chain.clone());
1655− let defined_before: HashSet<String> = ctx
1656− .let_lines
1657− .keys()
1658− .chain(ctx.define_lines.keys())
1659− .chain(ctx.fn_lines.keys())
1660− .cloned()
1661− .collect();
1662− let included_nodes = self.eval_block(&tree.nodes, ctx);
1663− ctx.current_file = saved_file;
1664− // An included file's definitions aren't reported unused here, where
1665− // their lines aren't this file's: a library's are there to be
1666− // picked from, and any other file reports its own when checked
1667− let keep = |name: &String, _: &mut usize| defined_before.contains(name);
1668− ctx.let_lines.retain(keep);
1669− ctx.define_lines.retain(keep);
1670− ctx.fn_lines.retain(keep);
1671−
1672− // Annotate new diagnostics with import chain
1673− for d in &mut ctx.diagnostics[diag_count_before..] {
1674− d.message = format!("{}\n in {}", d.message, import_chain);
778+
779+ // --- Bare text ---
780+
781+ // `[attrs]` alone on a line used to be an anonymous @el
782+ if let Some(list) = content.strip_prefix('[')
783+ && (list.is_empty()
784+ || list
785+ .split([',', ']'])
786+ .next()
787+ .and_then(|first| first.split_whitespace().next())
788+ .is_some_and(crate::vocab::is_style_attribute))
789+ {
790+ ctx.diagnostics.push(Diagnostic {
791+ line: line_num,
792+ column: None,
793+ message: "a line starting with `[` is text: for an element, write `@el [...]` \
794+ (run `htmlang upgrade`)"
795+ .to_string(),
796+ severity: Severity::Warning,
797+ source_line: Some(content.clone()),
798+ });
1675799 }
1676800
1677− ctx.base_path = saved_base;
1678− ctx.include_stack.pop();
1679− Ok(Some(included_nodes))
801+ let var_warnings = check_undefined_vars(
802+ &protect_escapes(&content),
803+ &ctx.variables,
804+ line_num,
805+ current_indent,
806+ );
807+ ctx.diagnostics.extend(var_warnings);
808+ track_var_refs(&content, &mut ctx.used_variables);
809+ let segments = parse_text_segments(&content, ctx);
810+ Ok(Some(vec![Node::Text(segments)]))
1680811 }
1681812
1682− /// @data $name file.json values as $name.key
1683− /// @data $name dir/*.json a list of the files' records
1684− /// @data $name [...] / {...} inline JSON
1685− /// @data $name env:NAME [DEFAULT] an environment variable
1686− fn eval_data(
813+ /// `@data $name dir/*.json`: a list with one record per matching file
814+ /// (in name order), whose `file` is the file's name without extension.
815+ fn load_data_glob(
1687816 &mut self,
1688− prefix: &str,
1689− source: &syntax::Arg,
1690− line_num: usize,
1691− content: &str,
1692− ctx: &mut ParseContext,
1693− ) {
1694− let prefix = prefix.to_string();
1695− let filename = source.raw.as_str();
1696− if let Some(env) = filename.strip_prefix("env:") {
1697− let (var, default) = match env.split_once(char::is_whitespace) {
1698− Some((var, default)) => (var, Some(default.trim())),
1699− None => (env, None),
1700− };
1701− let default_column = default.map(|d| source.span.column + filename.len() - d.len());
1702− let value = std::env::var(var)
1703− .ok()
1704− .or_else(|| default.map(|d| ctx.interpolate_text(d, line_num, default_column)));
1705− if value.is_none() {
1706− ctx.diagnostics.push(
1707− Diagnostic::warning(
1708− code::UNSET_ENVIRONMENT,
1709− line_num,
1710− format!(
1711− "environment variable '{}' is not set and has no default",
1712− var
1713− ),
1714− )
1715− .source(content),
1716− );
1717− }
1718− ctx.bind(&prefix, Value::Str(value.unwrap_or_default()));
1719− return;
1720− }
1721−
1722− // Inline JSON: @data $links [{"label": "Home", "url": "/"}]
1723− let (json_text, source) = if filename.starts_with(['[', '{']) {
1724− (filename.to_string(), "the inline data".to_string())
1725− } else {
1726− let filename = ctx.interpolate_text(filename, line_num, Some(source.span.column));
1727− if filename.contains('*') {
1728− self.load_data_glob(&prefix, &filename, line_num, content, ctx);
1729− return;
1730− }
1731− let resolved = ctx.resolve(&filename);
1732− match std::fs::read_to_string(&resolved) {
1733− Ok(text) => {
1734− ctx.included_files.push(resolved);
1735− (text, format!("'{}'", filename))
1736− }
1737− Err(e) => {
1738− ctx.diagnostics.push(
1739− Diagnostic::error(
1740− code::UNREADABLE_FILE,
1741− line_num,
1742− format!("cannot load data '{}': {}", filename, e),
1743− )
1744− .source(content),
1745− );
1746− return;
1747− }
1748− }
1749− };
1750− match parse_json_with_error(&json_text) {
1751− Ok(json) => ctx.bind(&prefix, json_value(json)),
1752− Err(detail) => ctx.diagnostics.push(
1753− Diagnostic::error(
1754− code::INVALID_JSON,
1755− line_num,
1756− format!("invalid JSON in {}: {}", source, detail),
1757− )
1758− .source(content),
1759− ),
1760− }
1761− }
1762−
1763− /// `@data $name dir/*.json`: a list with one record per matching file
1764− /// (in name order), whose `file` is the file's name without extension.
1765− fn load_data_glob(
1766− &mut self,
1767− name: &str,
1768− pattern: &str,
817+ name: &str,
818+ pattern: &str,
1769819 line_num: usize,
1770820 content: &str,
1771821 ctx: &mut ParseContext,
@@ -1791,15 +841,13 @@ impl Evaluator {
1791841 })
1792842 .collect(),
1793843 Err(e) => {
1794− ctx.diagnostics.push(
1795− Diagnostic::new(
1796− code::UNREADABLE_FILE,
1797− Severity::Error,
1798− line_num,
1799− format!("cannot read directory for '{}': {}", pattern, e),
1800− )
1801− .source(content.to_string()),
1802− );
844+ ctx.diagnostics.push(Diagnostic {
845+ line: line_num,
846+ column: None,
847+ message: format!("cannot read directory for '{}': {}", pattern, e),
848+ severity: Severity::Error,
849+ source_line: Some(content.to_string()),
850+ });
1803851 return;
1804852 }
1805853 };
@@ -1814,15 +862,13 @@ impl Evaluator {
1814862 let text = match std::fs::read_to_string(&file) {
1815863 Ok(text) => text,
1816864 Err(e) => {
1817− ctx.diagnostics.push(
1818− Diagnostic::new(
1819− code::UNREADABLE_FILE,
1820− Severity::Error,
1821− line_num,
1822− format!("cannot load data '{}': {}", file.display(), e),
1823− )
1824− .source(content.to_string()),
1825− );
865+ ctx.diagnostics.push(Diagnostic {
866+ line: line_num,
867+ column: None,
868+ message: format!("cannot load data '{}': {}", file.display(), e),
869+ severity: Severity::Error,
870+ source_line: Some(content.to_string()),
871+ });
1826872 continue;
1827873 }
1828874 };
@@ -1833,435 +879,257 @@ impl Evaluator {
1833879 }
1834880 records.push(JsonValue::Object(pairs));
1835881 }
1836− Ok(_) => ctx.diagnostics.push(
1837− Diagnostic::new(
1838− code::INVALID_JSON,
1839− Severity::Error,
1840− line_num,
1841− format!("'{}' should hold a JSON object", file.display()),
1842− )
1843− .source(content.to_string()),
1844− ),
1845− Err(detail) => ctx.diagnostics.push(
1846− Diagnostic::new(
1847− code::INVALID_JSON,
1848− Severity::Error,
1849− line_num,
1850− format!("invalid JSON in '{}': {}", file.display(), detail),
1851− )
1852− .source(content.to_string()),
1853− ),
882+ Ok(_) => ctx.diagnostics.push(Diagnostic {
883+ line: line_num,
884+ column: None,
885+ message: format!("'{}' should hold a JSON object", file.display()),
886+ severity: Severity::Error,
887+ source_line: Some(content.to_string()),
888+ }),
889+ Err(detail) => ctx.diagnostics.push(Diagnostic {
890+ line: line_num,
891+ column: None,
892+ message: format!("invalid JSON in '{}': {}", file.display(), detail),
893+ severity: Severity::Error,
894+ source_line: Some(content.to_string()),
895+ }),
1854896 }
1855897 ctx.included_files.push(file);
1856898 }
1857− ctx.bind(name, json_value(JsonValue::Array(records)));
899+ flatten_json(name, &JsonValue::Array(records), &mut ctx.variables);
1858900 }
1859901
1860− /// `@each $item in LIST` or `@each $item, $index in LIST`, with the
1861− /// `@else` that follows it. LIST is a value (see
1862− /// [`ParseContext::slot_value`]): a list written with commas, a range,
1863− /// or one `$name` or `${...}` that holds a list. Each item is bound
1864− /// whole to `$item`, and each iteration is a block of its own.
902+ /// `@each $item in LIST` or `@each $item, $index in LIST`. A LIST from
903+ /// JSON binds each record or value to `$item`; any other list is text,
904+ /// split on commas, or a range `A..B [step N]`.
1865905 fn eval_each(
1866906 &mut self,
1867− node: &syntax::Node,
1868− empty_branch: Option<&syntax::Node>,
907+ header: &str,
908+ body: &[Syntax],
909+ empty: &[Syntax],
910+ line_num: usize,
1869911 ctx: &mut ParseContext,
1870− ) -> Result<Option<Vec<Node>>, ParseError> {
1871− ctx.visited.insert(node.id);
1872− if let Some(branch) = empty_branch {
1873− ctx.visited.insert(branch.id);
1874− }
1875− ctx.enter(node);
1876− // A malformed header is a syntax error, already reported
1877− let Some(DirectiveArgs::Each(header)) = node.directive().map(|d| &d.args) else {
1878− return Ok(None);
1879− };
1880− let body = &node.children;
1881− let empty: &[syntax::Node] = empty_branch.map_or(&[], |b| &b.children);
1882− let (item, index) = (header.item.as_str(), header.index.as_deref());
1883− let list = &header.list;
1884− // `[...]` is an attribute list or JSON elsewhere, not a list here
1885− let bracketed = list.raw.starts_with('[') && list.raw.ends_with(']');
1886− let (source, filled) = match bracketed {
1887− true => (Value::empty(), false),
1888− false => ctx.slot_value(&list.raw, list.span.line, Some(list.span.column)),
1889− };
1890− let not_a_list = |message: String, ctx: &ParseContext| {
1891− let diagnostic = Diagnostic::error(code::INVALID_LOOP, list.span.line, message)
1892− .column(list.span.column)
1893− .subject(list.raw.as_str());
1894− match &ctx.current_source {
1895− (current, Some(text)) if *current == list.span.line => {
1896− diagnostic.source(text.clone())
1897− }
1898− _ => diagnostic,
1899− }
912+ ) -> Result<Vec<Node>, ParseError> {
913+ let Some((names, list_src)) = header.split_once(" in ") else {
914+ return Err(ParseError {
915+ line: line_num,
916+ message: "@each requires: @each $item in LIST".to_string(),
917+ });
1900918 };
1901− if bracketed {
1902− let inner = list.raw[1..list.raw.len() - 1].trim().to_string();
1903− let diagnostic = not_a_list(
1904− format!(
1905− "@each takes a list written without brackets, `@each ${} in {}`; \
1906− JSON data goes in `@data`",
1907− item, inner
1908− ),
1909− ctx,
1910− )
1911− .suggest(Some(inner));
1912− ctx.push_once(diagnostic);
919+ let names: Vec<&str> = names.split(',').map(|v| v.trim().trim_start_matches('$')).collect();
920+ if names.len() > 2 {
921+ return Err(ParseError {
922+ line: line_num,
923+ message: "@each takes `$item` or `$item, $index`: to loop over records, \
924+ load them with @data and use `$item.key`"
925+ .to_string(),
926+ });
1913927 }
1914− let items: Vec<Value> = match source {
1915− Value::List(list) => list.items.to_vec(),
1916− // Reported (an undefined `$name`, brackets): there is nothing
1917− // to repeat
1918− _ if !filled => Vec::new(),
1919− Value::Record(_) => {
1920− let diagnostic = not_a_list(
1921− format!(
1922− "@each repeats for the items of a list, and `{}` is a record: \
1923− loop over a list of records, or use its fields",
1924− list.raw
1925− ),
1926− ctx,
1927− );
1928− ctx.push_once(diagnostic);
928+ let (item, index) = (names[0], names.get(1).copied());
929+ let list_src = list_src.trim();
930+ if list_src.ends_with(']') && list_src.contains("[page ") {
931+ return Err(ParseError {
932+ line: line_num,
933+ message: "@each pagination (`[page N]`) was removed: split the list or \
934+ filter it with @if"
935+ .to_string(),
936+ });
937+ }
938+ track_var_refs(list_src, &mut ctx.used_variables);
939+
940+ // A list loaded from JSON, by name
941+ let data_list = list_src.strip_prefix('$').and_then(|name| {
942+ let len = ctx.variables.get(&format!("{}#", name))?.parse::<usize>().ok()?;
943+ Some((name.to_string(), len))
944+ });
945+ let undefined = list_src.strip_prefix('$').filter(|name| {
946+ name.chars().all(|c| c.is_alphanumeric() || matches!(c, '_' | '-' | '.'))
947+ && !ctx.variables.contains_key(*name)
948+ });
949+ let text_items: Vec<String> = match (&data_list, undefined) {
950+ (Some(_), _) => Vec::new(),
951+ // A missing variable is an empty list: quietly for a record's
952+ // missing field (`$post.tags`), with a warning otherwise
953+ (None, Some(name)) => {
954+ let root = name.split('.').next().unwrap_or(name);
955+ if !ctx.variables.contains_key(root) {
956+ ctx.diagnostics.push(Diagnostic {
957+ line: line_num,
958+ column: None,
959+ message: format!("undefined variable '${}'", name),
960+ severity: Severity::Warning,
961+ source_line: Some(format!("@each {}", header)),
962+ });
963+ }
1929964 Vec::new()
1930965 }
1931− // Empty text (a field a record doesn't have) is no items; any
1932− // other value is one
1933− value if value.to_string().is_empty() => Vec::new(),
1934− value => vec![value],
966+ (None, None) => text_list_items(&substitute_vars(list_src, &ctx.variables)),
1935967 };
968+ let count = data_list.as_ref().map_or(text_items.len(), |(_, len)| *len);
1936969
1937− if body.iter().all(syntax::Node::is_trivia) {
1938− return Ok(Some(Vec::new()));
970+ if body.is_empty() {
971+ return Ok(Vec::new());
1939972 }
1940− if items.is_empty() {
1941− return Ok(Some(self.eval_scoped(empty, ctx)));
973+ if count == 0 {
974+ return Ok(self.eval_scoped(empty, ctx));
1942975 }
976+ let saved_vars = ctx.variables.clone();
1943977 let mut nodes = Vec::new();
1944− for (i, value) in items.into_iter().enumerate() {
1945− ctx.env.push();
1946− ctx.bind(item, value);
978+ for i in 0..count {
979+ match &data_list {
980+ Some((name, _)) => bind_item(&mut ctx.variables, &format!("{}.{}", name, i), item),
981+ None => {
982+ let text = text_items.get(i).cloned().unwrap_or_default();
983+ ctx.variables.insert(item.to_string(), text);
984+ }
985+ }
1947986 if let Some(index) = index {
1948− ctx.bind(index, Value::Num(i as f64));
987+ ctx.variables.insert(index.to_string(), i.to_string());
1949988 }
1950989 nodes.extend(self.eval_block(body, ctx));
1951− ctx.env.pop();
1952990 }
1953− Ok(Some(nodes))
991+ ctx.variables = saved_vars;
992+ Ok(nodes)
1954993 }
1955994
1956995 fn define_function(
1957996 &mut self,
1958997 name: &str,
1959− params: &[syntax::Param],
1960− node: &syntax::Node,
998+ params: &[String],
999+ defaults: &HashMap<String, String>,
1000+ body: &[Syntax],
1001+ line_num: usize,
19611002 ctx: &mut ParseContext,
19621003 ) {
1963− let line_num = node.span.line;
1964− let body = &node.children;
19651004 // An @style block at the top of the body is scoped to the
1966− // function: its rules apply inside a `.hl-fn-NAME-HASH` wrapper (a
1967− // generated class never has a second `-`, so the two can't meet).
1968− // The hash is the stylesheet's, so two functions of one name with
1969− // two stylesheets, in two files, don't style each other's elements
1970− // in a page that has both. It is written into the page when the
1971− // function is called.
1972− let (style, body): (Vec<&syntax::Node>, Vec<&syntax::Node>) =
1973− body.iter().partition(|node| node.is_directive("style"));
1974− let scoped = (!style.is_empty()).then(|| {
1005+ // function: its rules apply inside a `.hl-NAME` wrapper.
1006+ let (style, body): (Vec<&Syntax>, Vec<&Syntax>) = body
1007+ .iter()
1008+ .partition(|node| matches!(node, Syntax::Line { text, .. } if text == "@style"));
1009+ if !style.is_empty() {
19751010 let css: String = style
19761011 .iter()
1977− .map(|node| {
1978− ctx.visited.insert(node.id);
1979− verbatim_content(node)
1012+ .filter_map(|node| match node {
1013+ Syntax::Line { children, .. } => Some(block_text(children)),
1014+ _ => None,
19801015 })
19811016 .collect();
1982− let digits = crate::codegen::CLASS_DIGITS;
1983− let hash = crate::codegen::hash_digits(crate::codegen::stable_hash(&css), digits);
1984− let class = format!("hl-fn-{}-{}", name, hash);
19851017 // Nested under the scope class, so any CSS works (multi-line
19861018 // rules, at-rules)
1987− let css = if css.trim().is_empty() {
1988− String::new()
1989− } else {
1990− format!(".{} {{\n{}}}", class, css)
1991− };
1992− (class, css)
1993− });
1994−
1995− // A default is filled in only when a call leaves its parameter
1996− // out, so the names in it count as used here
1997− for default in params.iter().filter_map(|p| p.default.as_ref()) {
1998− track_var_refs(default, &mut ctx.used_variables);
1019+ if !css.trim().is_empty() {
1020+ ctx.custom_css.push(format!(".hl-{} {{\n{}}}", name, css));
1021+ }
1022+ ctx.scoped_functions.insert(name.to_string());
19991023 }
1024+
20001025 ctx.fn_lines.entry(name.to_string()).or_insert(line_num);
2001− let wraps_itself = ElementKind::from_name(name).is_some()
2002− && body.iter().any(|node| calls_unguarded(node, name));
2003− if wraps_itself {
2004− ctx.push_once(
2005− Diagnostic::error(
2006− code::RECURSIVE_CALL,
2007− line_num,
2008− format!(
2009− "@{0} in the body of `@let @{0}` calls the function itself, not the \
2010− element @{0}, so it would never stop: give the function another name \
2011− (such as @site-{0})",
2012− name
2013− ),
2014− )
2015− .subject(name),
2016− );
2017− }
2018− for node in &body {
2019− node.walk(&mut |node| {
2020− if let Some(d) = marker_in_text(node) {
2021− ctx.push_once(d);
2022− }
2023− });
2024− }
2025− let body: Vec<syntax::Node> = body.into_iter().cloned().collect();
2026− let (slots, has_children) = declared_slots(&body, ctx);
2027− let function = Rc::new(FnDef {
2028− params: params.to_vec(),
2029− line: line_num,
2030− source: ctx.current_source.1.clone(),
2031− node: node.id,
2032− body,
2033− file: ctx.current_file.clone(),
2034− slots,
2035− has_children,
2036− scoped,
2037− env: ctx.env.clone(),
2038− wraps_itself,
2039− });
2040− ctx.defined_functions
2041− .insert(name.to_string(), function.clone());
2042− ctx.env.define(name, Binding::Function(function));
1026+ ctx.functions.insert(
1027+ name.to_string(),
1028+ FnDef {
1029+ params: params.to_vec(),
1030+ defaults: defaults.clone(),
1031+ body: body.into_iter().cloned().collect(),
1032+ },
1033+ );
20431034 }
20441035
2045− /// An element line: a chain of elements and function calls, the last of
2046− /// which gets the indented children.
2047− fn eval_element(
1036+ fn expand_fn_call(
20481037 &mut self,
2049− node: &syntax::Node,
2050− element: &syntax::ElementLine,
1038+ name: &str,
1039+ content: &str,
1040+ children: &[Syntax],
1041+ line_num: usize,
20511042 ctx: &mut ParseContext,
20521043 ) -> Result<Vec<Node>, ParseError> {
2053− // An unclosed attribute list is a syntax error, already reported
2054− if element
2055− .chain
2056− .iter()
2057− .any(|h| h.attrs.as_ref().is_some_and(|a| !a.closed))
2058− {
2059− return Ok(Vec::new());
2060− }
2061− let line_num = node.span.line;
2062− let last = element.chain.len() - 1;
2063− // Each head is read where it is written, left to right. The
2064− // children belong to the last one, so the chain is built right to
2065− // left, each link wrapping the next.
2066− let mut links = Vec::new();
2067− for (i, head) in element.chain.iter().enumerate() {
2068− let text = if i == last {
2069− element.text.as_ref()
2070− } else {
2071− None
2072− };
2073− links.push(resolve(head, text, line_num, &node.source, ctx)?);
2074− }
2075− let calls: Vec<Option<(String, Rc<FnDef>)>> = links
2076− .iter()
2077− .map(|link| match link {
2078− Resolved::Call(call) => Some((call.name.clone(), call.function.clone())),
2079− Resolved::Element(_) => None,
2080− })
2081− .collect();
2082− let mut current = self.eval_scoped(&node.children, ctx);
2083− // After the lines under the call ran, so the files they include
2084− // are read
2085− check_fillers(node, element, &calls, ctx);
2086− for link in links.into_iter().rev() {
2087− current = self.complete(link, current, ctx)?;
1044+ // Recursive function cycle detection
1045+ if ctx.fn_call_stack.contains(&name.to_string()) {
1046+ return Err(ParseError {
1047+ line: line_num,
1048+ message: format!(
1049+ "recursive function call to @{} (call stack: {})",
1050+ name,
1051+ ctx.fn_call_stack.join(" -> ")
1052+ ),
1053+ });
20881054 }
2089− Ok(current)
2090− }
1055+ ctx.fn_call_stack.push(name.to_string());
20911056
2092− /// Give a resolved `@name` its children: an element holds them, and a
2093− /// function's body puts them where its `@children` is.
2094− fn complete(
2095− &mut self,
2096− resolved: Resolved,
2097− children: Vec<Node>,
2098− ctx: &mut ParseContext,
2099− ) -> Result<Vec<Node>, ParseError> {
2100− match resolved {
2101− Resolved::Element(mut element) => {
2102− element.children.extend(children);
2103− let line = element.line_num;
2104− Ok(vec![inline_svg(Node::Element(element), line, ctx)])
1057+ // Parse [param value, ...] arguments
1058+ let rest = &content[1 + name.len()..];
1059+ let rest = rest.trim_start();
1060+
1061+ let (args, trailing_text) = if rest.starts_with('[') {
1062+ parse_attr_brackets_no_validate(rest, line_num, ctx)?
1063+ } else {
1064+ (Vec::new(), rest.to_string())
1065+ };
1066+
1067+ // Clone function definition (releases borrow on ctx). If the function is
1068+ // missing (shouldn't normally happen — callers check ctx.functions.contains_key
1069+ // first — but we avoid panicking on malformed state).
1070+ let fn_def = match ctx.functions.get(name) {
1071+ Some(def) => def.clone(),
1072+ None => {
1073+ ctx.fn_call_stack.pop();
1074+ return Err(ParseError {
1075+ line: line_num,
1076+ message: format!("undefined function @{}", name),
1077+ });
21051078 }
2106− Resolved::Call(call) => self.expand_fn_call(*call, children, ctx),
2107− }
2108− }
1079+ };
21091080
2110− fn expand_fn_call(
2111− &mut self,
2112− call: Call,
2113− all_caller_children: Vec<Node>,
2114− ctx: &mut ParseContext,
2115− ) -> Result<Vec<Node>, ParseError> {
2116− let Call {
2117− name,
2118− function: fn_def,
2119− args,
2120− values,
2121− text: trailing_text,
2122− written_form,
2123− written_keys,
2124− line: line_num,
2125− name_at,
2126− source: content,
2127− } = call;
2128− let (name, content) = (name.as_str(), content.as_str());
2129−
2130− // Separate the caller's `@slot NAME` blocks from its other
2131− // children. A block for a slot the function doesn't declare was
2132− // reported where it is written (see `check_fillers`), like one
2133− // without a name.
1081+ // Parse caller's children, separating named slots from default children
1082+ let all_caller_children = self.eval_block(children, ctx);
21341083 let mut slot_contents: HashMap<String, Vec<Node>> = HashMap::new();
21351084 let mut caller_children = Vec::new();
21361085 for child in all_caller_children {
2137− if let Node::Element(elem) = child {
2138− match elem.kind {
2139− ElementKind::Slot(slot_name) => {
2140− slot_contents
2141− .entry(slot_name)
2142− .or_default()
2143− .extend(elem.children);
2144− }
2145− kind => caller_children.push(Node::Element(Element { kind, ..elem })),
2146− }
1086+ if let Node::Element(ref elem) = child
1087+ && let ElementKind::Slot(ref slot_name) = elem.kind
1088+ && !slot_name.is_empty()
1089+ {
1090+ slot_contents
1091+ .entry(slot_name.clone())
1092+ .or_default()
1093+ .extend(elem.children.clone());
21471094 continue;
21481095 }
21491096 caller_children.push(child);
21501097 }
2151− // Text after the call, as in `@card [color red] New`, is content:
2152− // it goes first among the caller's children, and like them it is
2153− // evaluated where the call is written.
2154− if let Some(text) = &trailing_text {
2155− caller_children.insert(0, Node::Text(text_segments(text, ctx)));
2156− }
2157− // Content goes where the body's `@children` is: without one, it
2158− // would be dropped
2159− if !fn_def.has_children && !caller_children.is_empty() {
2160− let (column, text) = match &name_at {
2161− Some((column, text)) => (Some(*column), text.as_str()),
2162− None => (None, content),
2163− };
2164− ctx.push_once(no_children(name, line_num, column).source(text));
2165− }
2166−
2167− if fn_def.wraps_itself {
2168− return Ok(Vec::new());
2169− }
2170− // Only the body is inside the call, so a function may appear in the
2171− // content its caller passes it. A function may call itself, under
2172− // a condition that stops it; one that doesn't stop goes too deep.
2173− if ctx.too_deep {
2174− return Ok(Vec::new());
1098+ // Text after the call, as in `@badge [color red] New`, is content:
1099+ // it goes first among the caller's children.
1100+ let trailing_text = trailing_text.trim();
1101+ if !trailing_text.is_empty() {
1102+ caller_children.insert(0, Node::Text(parse_text_segments(trailing_text, ctx)));
21751103 }
2176− if ctx.fn_call_stack.len() >= MAX_CALL_DEPTH {
2177− ctx.too_deep = true;
2178− return Err(too_deep(name, &ctx.fn_call_stack, line_num).source(content));
2179− }
2180− let caller = (
2181− ctx.current_line,
2182− ctx.current_source.clone(),
2183− ctx.current_node,
2184− );
2185− ctx.fn_call_stack.push(name.to_string());
21861104
2187− // The body runs where the function is defined: it sees what was
2188− // visible there, the function itself (so it can call itself), and
2189− // its parameters, bound by name in the order they are declared. A
2190− // default is filled in at the call, seeing the same, with the
2191− // parameters before it.
2192− let caller_env = std::mem::replace(&mut ctx.env, fn_def.env.clone());
2193− ctx.env.push();
2194− ctx.env.define(name, Binding::Function(fn_def.clone()));
1105+ // Save variable state, inject function parameters
1106+ let saved_vars = ctx.variables.clone();
21951107 let mut consumed = vec![false; args.len()];
2196− for param in &fn_def.params {
2197− let mut passed = None;
2198− for (j, arg) in args.iter().enumerate() {
2199− if arg.key != param.name {
2200− continue;
2201− }
1108+ for (i, param) in fn_def.params.iter().enumerate() {
1109+ let named = args.iter().position(|a| a.key == *param);
1110+ // Positional fallback, unless that argument is named for a
1111+ // different parameter.
1112+ let positional = args
1113+ .get(i)
1114+ .filter(|a| !fn_def.params.contains(&a.key) && a.value.is_some())
1115+ .map(|_| i);
1116+ let value = named
1117+ .filter(|&j| args[j].value.is_some())
1118+ .or(positional)
1119+ .and_then(|j| {
1120+ consumed[j] = true;
1121+ args[j].value.clone()
1122+ })
1123+ .or_else(|| fn_def.defaults.get(param).cloned())
1124+ .unwrap_or_default();
1125+ if let Some(j) = named {
22021126 consumed[j] = true;
2203− // The later one wins, as for any attribute: one written
2204− // after a bundle overrides it, and only one written twice
2205− // in the call's own list is reported
2206− if passed.is_some() && written_keys.iter().filter(|k| **k == param.name).count() > 1
2207− {
2208− ctx.push_once(
2209− Diagnostic::warning(
2210− code::DUPLICATE_ATTRIBUTE,
2211− line_num,
2212− format!(
2213− "parameter '{}' of @{} is passed twice: the later one wins",
2214− param.name, name
2215− ),
2216− )
2217− .source(content)
2218− .subject(param.name.as_str()),
2219− );
2220− }
2221− // Written `name=value` in the call's own list is reported
2222− // as written; this is one from a bundle
2223− if arg.html && !written_form.contains(&arg.key) {
2224− let value = arg.value.as_deref().unwrap_or("");
2225− ctx.push_once(parameter_form(name, &arg.key, value, line_num).source(content));
2226− }
2227− passed = Some(j);
22281127 }
2229− let value = match passed {
2230− // A parameter's name alone is true: `@post-card [featured]`
2231− Some(j) if args[j].value.is_none() => Value::Bool(true),
2232− // What the call passed, with its type: a record, a list,
2233− // quoted text
2234− Some(j) => values[j].clone().unwrap_or_else(|| {
2235− let arg = &args[j];
2236− match &arg.quoted {
2237− Some(quoted) => Value::Quoted(quoted.clone()),
2238− None => Value::Str(arg.value.clone().unwrap_or_default()),
2239− }
2240− }),
2241− None => match &param.default {
2242− Some(default) => {
2243− let before = ctx.diagnostics.len();
2244− let value = fill_default(&fn_def, param, default, ctx);
2245− point_at_call(ctx, before, &fn_def, name, line_num, content);
2246− value
2247− }
2248− None => {
2249− let (column, text) = match &name_at {
2250− Some((column, text)) => (Some(*column), text.as_str()),
2251− None => (None, content),
2252− };
2253− ctx.push_once(
2254− missing_parameter(name, &param.name, line_num, column).source(text),
2255− );
2256− Value::empty()
2257− }
2258− },
2259− };
2260− ctx.bind(&param.name, value);
1128+ ctx.variables.insert(param.clone(), value);
22611129 }
22621130 // Arguments that aren't parameters are attributes for the
22631131 // function's root element, so a function can be styled like an
2264− // element: `@card [background red] New`.
1132+ // element: `@badge [background red] New`.
22651133 let forwarded: Vec<Attribute> = args
22661134 .iter()
22671135 .zip(&consumed)
@@ -2269,24 +1137,12 @@ impl Evaluator {
22691137 .map(|(a, _)| a.clone())
22701138 .collect();
22711139
2272− // Evaluate the body with the parameters in scope, as lines of the
2273− // file that defines the function
2274− let caller_file = std::mem::replace(&mut ctx.current_file, fn_def.file.clone());
2275− let before = ctx.diagnostics.len();
2276− let mut body_nodes = self.eval_block(&fn_def.body, ctx);
2277− ctx.current_file = caller_file;
2278− point_at_call(ctx, before, &fn_def, name, line_num, content);
1140+ // Evaluate the body with the parameters in scope
1141+ let body_nodes = self.eval_block(&fn_def.body, ctx);
22791142
2280− // Back to the caller's names and call stack
2281− ctx.env = caller_env;
1143+ // Restore variables and call stack
1144+ ctx.variables = saved_vars;
22821145 ctx.fn_call_stack.pop();
2283− if ctx.fn_call_stack.is_empty() {
2284− ctx.too_deep = false;
2285− }
2286− (ctx.current_line, ctx.current_source, ctx.current_node) = caller;
2287−
2288− // What the body wrote is the call's
2289− belongs_to_call(&mut body_nodes, name, line_num);
22901146
22911147 // Replace @children with caller's children and @slot with slot content
22921148 let mut result_nodes =
@@ -2294,7 +1150,7 @@ impl Evaluator {
22941150
22951151 // Attributes that aren't parameters style the function's root
22961152 // element, and a scoped @style's class goes on it too.
2297− let scope_class = fn_def.scoped.as_ref().map(|(class, _)| class.clone());
1153+ let scope_class = ctx.scoped_functions.contains(name).then(|| format!("hl-{}", name));
22981154 if !forwarded.is_empty() || scope_class.is_some() {
22991155 let mut roots = result_nodes.iter_mut().filter_map(|n| match n {
23001156 Node::Element(e) => Some(e),
@@ -2307,45 +1163,17 @@ impl Evaluator {
23071163 let mut problems = Vec::new();
23081164 match root {
23091165 Some(root) => {
2310− // A call's `class=` adds to the root's own classes
2311− for attr in forwarded {
2312− let existing = (attr.html && attr.key == "class")
2313− .then(|| root.attrs.iter_mut().find(|a| a.html && a.key == "class"))
2314− .flatten();
2315− match existing {
2316− Some(class) => {
2317− let mut value = class.value.take().unwrap_or_default();
2318− for name in attr.value.as_deref().unwrap_or("").split_whitespace() {
2319− if !value.split_whitespace().any(|c| c == name) {
2320− value.push(' ');
2321− value.push_str(name);
2322− }
2323− }
2324− class.value = Some(value.trim().to_string());
2325− }
2326− None => root.attrs.push(attr),
2327− }
2328− }
2329− // The scoped `@style` goes into the page once, when the
2330− // function is first called
2331− if let Some((_, css)) = &fn_def.scoped
2332− && !css.is_empty()
2333− && !ctx.scoped_css.contains(css)
2334− {
2335− ctx.scoped_css.push(css.clone());
2336− }
1166+ root.attrs.extend(forwarded);
23371167 if let Some(class) = scope_class {
23381168 match root.attrs.iter_mut().find(|a| a.html && a.key == "class") {
23391169 Some(attr) => {
23401170 let existing = attr.value.take().unwrap_or_default();
2341− attr.value =
2342− Some(format!("{} {}", existing, class).trim().to_string());
1171+ attr.value = Some(format!("{} {}", existing, class).trim().to_string());
23431172 }
23441173 None => root.attrs.push(Attribute {
23451174 key: "class".to_string(),
23461175 value: Some(class),
23471176 html: true,
2348− quoted: None,
23491177 }),
23501178 }
23511179 }
@@ -2373,1331 +1201,178 @@ impl Evaluator {
23731201 }
23741202 }
23751203 for message in problems {
2376− ctx.diagnostics.push(
2377− Diagnostic::error(code::NO_SINGLE_ROOT, line_num, message)
2378− .source(content)
2379− .subject(name),
2380− );
1204+ ctx.diagnostics.push(Diagnostic {
1205+ line: line_num,
1206+ column: None,
1207+ message,
1208+ severity: Severity::Warning,
1209+ source_line: Some(content.to_string()),
1210+ });
23811211 }
23821212 }
23831213
23841214 Ok(result_nodes)
23851215 }
2386−}
23871216
2388−/// A `@name` read where it is written: a built-in element, or a call.
2389−enum Resolved {
2390− Element(Element),
2391− Call(Box<Call>),
2392−}
1217+ fn parse_element_line(
1218+ &mut self,
1219+ content: &str,
1220+ children: &[Syntax],
1221+ line_num: usize,
1222+ ctx: &mut ParseContext,
1223+ ) -> Result<Node, ParseError> {
1224+ let segments = split_chain(content);
23931225
2394−/// A call of a function, with its arguments evaluated where it is written.
2395−struct Call {
2396− name: String,
2397− function: Rc<FnDef>,
2398− args: Vec<Attribute>,
2399− /// The value of each argument that passes a parameter, with its type
2400− /// (see [`ParseContext::slot_value`]), in the order of `args`.
2401− values: Vec<Option<Value>>,
2402− /// Text after the attributes, which is content.
2403− text: Option<syntax::Text>,
2404− /// Parameters written `name=value`, already reported.
2405− written_form: Vec<String>,
2406− /// The keys written in the call's own list, not from a bundle.
2407− written_keys: Vec<String>,
2408− line: usize,
2409− /// The column of the call's name and the line it is on, for a missing
2410− /// parameter.
2411− name_at: Option<(usize, String)>,
2412− /// The line as written, for diagnostics.
2413− source: String,
2414−}
1226+ // Parse each segment into an Element
1227+ let mut elements: Vec<Element> = Vec::new();
1228+ for seg in &segments {
1229+ let elem = parse_single_element(seg.trim(), line_num, ctx)?;
1230+ elements.push(elem);
1231+ }
24151232
2416−/// What `@name` is where it is written: a call of the function `name`
2417−/// when one is defined, else the built-in element. A whole line, each link
2418−/// of a chain and an inline element in text all resolve here.
2419−fn resolve(
2420− head: &syntax::Head,
2421− text: Option<&syntax::Text>,
2422− line: usize,
2423− source: &str,
2424− ctx: &mut ParseContext,
2425−) -> Result<Resolved, ParseError> {
2426− let Some(function) = ctx.env.function(&head.name).cloned() else {
2427− return parse_single_element(head, text, line, ctx).map(Resolved::Element);
2428− };
2429− ctx.used_functions.insert(head.name.clone());
2430− let params: Vec<String> = function.params.iter().map(|p| p.name.clone()).collect();
2431− let written = head.attrs.as_ref().map_or(&[][..], |list| &list.attrs[..]);
2432− let written_form = written_parameter_forms(&head.name, &function, written, line, ctx);
2433− let written_keys = written.iter().map(|a| a.key.clone()).collect();
2434− // Parameters are bound by name; every other attribute goes to the
2435− // root element, and is checked like any attribute
2436− let (args, values) = parse_attrs(written, line, ctx, true, &params)
2437− .into_iter()
2438− .unzip();
2439− let name_at = name_column(head, line).zip(match &ctx.current_source {
2440− (current, Some(text)) if *current == line => Some(text.clone()),
2441− _ => None,
2442− });
2443− Ok(Resolved::Call(Box::new(Call {
2444− name: head.name.clone(),
2445− function,
2446− args,
2447− values,
2448− text: text.cloned(),
2449− written_form,
2450− written_keys,
2451− line,
2452− name_at,
2453− source: source.to_string(),
2454− })))
2455−}
1233+ // Parse indented children (belong to the innermost element)
1234+ let children = self.eval_block(children, ctx);
24561235
2457−/// A line of another file (the standard library, an included file) means
2458−/// nothing in this one: the problems reported since `before` while
2459−/// evaluating the function (its body, a default) are moved to the call.
2460−fn point_at_call(
2461− ctx: &mut ParseContext,
2462− before: usize,
2463− function: &FnDef,
2464− name: &str,
2465− line: usize,
2466− source: &str,
2467−) {
2468− if function.file == ctx.current_file {
2469− return;
2470− }
2471− let defined_in = function
2472− .file
2473− .as_deref()
2474− .unwrap_or("the file being compiled");
2475− for d in &mut ctx.diagnostics[before..] {
2476− d.message = format!(
2477− "{}\n in @{} (line {} of {})",
2478− d.message, name, d.line, defined_in
2479− );
2480− d.line = line;
2481− d.column = None;
2482− d.subject = None;
2483− d.suggestion = None;
2484− d.source_line = Some(source.into());
1236+ // Build chain right-to-left: rightmost gets children, each wraps the next
1237+ let mut current_children = children;
1238+ for mut elem in elements.into_iter().rev() {
1239+ elem.children.extend(current_children);
1240+ current_children = vec![Node::Element(elem)];
1241+ }
1242+
1243+ current_children.into_iter().next().ok_or(ParseError {
1244+ line: line_num,
1245+ message: "element chain produced no nodes (this is a parser bug)".to_string(),
1246+ })
24851247 }
24861248}
24871249
2488−/// A call nested deeper than [`MAX_CALL_DEPTH`].
2489−fn too_deep(name: &str, stack: &[String], line: usize) -> Diagnostic {
2490− let message = if stack.iter().any(|n| n == name) {
2491− format!(
2492− "recursive function call to @{} goes more than {} calls deep: a function that \
2493− calls itself needs a condition that stops it (`@if`)",
2494− name, MAX_CALL_DEPTH
2495− )
2496− } else {
2497− format!(
2498− "function calls nest more than {} deep at @{} (starting with {})",
2499− MAX_CALL_DEPTH,
2500− name,
2501− stack
2502− .iter()
2503− .take(3)
2504− .map(|n| format!("@{}", n))
2505− .collect::<Vec<_>>()
2506− .join(" → ")
2507− )
2508− };
2509− Diagnostic::error(code::RECURSIVE_CALL, line, message).subject(name)
2510−}
1250+// ---------------------------------------------------------------------------
1251+// @children replacement
1252+// ---------------------------------------------------------------------------
25111253
2512−/// Mark what a function's body wrote as the call's: it gets the call's
2513−/// line, so what is reported about it points at the call, and the name of
2514−/// the function, unless a call inside the body already claimed it.
2515−fn belongs_to_call(nodes: &mut [Node], function: &str, line: usize) {
2516− fn claim(element: &mut Element, function: &str, line: usize) {
2517− element.line_num = line;
2518− element.function.get_or_insert_with(|| function.to_string());
2519− belongs_to_call(&mut element.children, function, line);
2520− }
1254+fn replace_children_and_slots(
1255+ nodes: Vec<Node>,
1256+ caller_children: &[Node],
1257+ slot_contents: &HashMap<String, Vec<Node>>,
1258+) -> Vec<Node> {
1259+ let mut result = Vec::new();
25211260 for node in nodes {
25221261 match node {
2523− Node::Element(element) => claim(element, function, line),
2524− Node::Text(segments) => {
2525− for segment in segments {
2526− if let TextSegment::Inline(element) = segment {
2527− claim(element, function, line);
2528− }
1262+ Node::Element(elem) if elem.kind == ElementKind::Children => {
1263+ if caller_children.is_empty() && !elem.children.is_empty() {
1264+ // Use @children's own children as default/fallback content
1265+ result.extend(elem.children);
1266+ } else {
1267+ result.extend(caller_children.iter().cloned());
25291268 }
25301269 }
2531− Node::Raw(_) => {}
2532− }
2533− }
2534−}
2535−
2536−/// What an inline `{@name ...}` stands for in its line of text: an
2537−/// element; the text of a function whose body is text; or, for a body with
2538−/// several roots, its nodes as a fragment.
2539−fn inline_segments(mut nodes: Vec<Node>, line: usize) -> Vec<TextSegment> {
2540− if let [Node::Element(_)] = nodes.as_slice()
2541− && let Some(Node::Element(element)) = nodes.pop()
2542− {
2543− return vec![TextSegment::Inline(element)];
2544− }
2545− if nodes.iter().all(|n| matches!(n, Node::Text(_))) {
2546− let mut segments = Vec::new();
2547− for node in nodes {
2548− if let Node::Text(run) = node {
2549− if !segments.is_empty() {
2550− segments.push(TextSegment::Plain(" ".to_string()));
1270+ Node::Element(elem) if matches!(&elem.kind, ElementKind::Slot(name) if !name.is_empty()) =>
1271+ {
1272+ if let ElementKind::Slot(ref name) = elem.kind {
1273+ if let Some(content) = slot_contents.get(name) {
1274+ result.extend(content.iter().cloned());
1275+ }
1276+ // If no content provided for this slot, use the slot's own children as default
1277+ else if !elem.children.is_empty() {
1278+ result.extend(elem.children);
1279+ }
25511280 }
2552− segments.extend(run);
25531281 }
1282+ Node::Element(mut elem) => {
1283+ elem.children =
1284+ replace_children_and_slots(elem.children, caller_children, slot_contents);
1285+ result.push(Node::Element(elem));
1286+ }
1287+ other => result.push(other),
25541288 }
2555− return segments;
25561289 }
2557− vec![TextSegment::Inline(Element {
2558− kind: ElementKind::Fragment,
2559− attrs: Vec::new(),
2560− argument: None,
2561− children: nodes,
2562− line_num: line,
2563− function: None,
2564− })]
1290+ result
25651291}
25661292
2567−/// Fill in the default of a parameter that a call leaves out, like the
2568−/// value of an attribute passed for it: variables are filled in, one
2569−/// `$name` keeps its type and one `"..."` is quoted text. It sees what the
2570−/// body sees: the names visible where the function is defined, and the
2571−/// parameters before it. Its problems are reported at the definition, once.
2572−fn fill_default(
2573− fn_def: &FnDef,
2574− param: &syntax::Param,
2575− default: &str,
2576− ctx: &mut ParseContext,
2577−) -> Value {
2578− // A default that uses a later parameter is an error in the
2579− // definition; the later one isn't bound yet, so don't report it again
2580− let later = fn_def
2581− .params
2582− .iter()
2583− .skip_while(|p| p.name != param.name)
2584− .skip(1);
2585− let names = interp::names(default);
2586− if later.clone().any(|p| names.contains(&p.name.as_str())) {
2587− return Value::empty();
1293+// ---------------------------------------------------------------------------
1294+// Element parsing
1295+// ---------------------------------------------------------------------------
1296+
1297+fn extract_element_name(content: &str) -> &str {
1298+ let without_at = &content[1..];
1299+ match without_at.find([' ', '[']) {
1300+ Some(i) => &without_at[..i],
1301+ None => without_at,
25881302 }
2589− let line = param.span.line;
2590− let at_head = line == fn_def.line && fn_def.source.is_some();
2591− let column =
2592− at_head.then(|| param.span.column + (param.span.end - param.span.start) - default.len());
2593− let caller = (
2594− std::mem::replace(
2595− &mut ctx.current_source,
2596− (fn_def.line, fn_def.source.clone()),
2597− ),
2598− std::mem::replace(&mut ctx.current_node, fn_def.node),
2599− );
2600− let (value, _) = ctx.slot_value(default, line, column);
2601− (ctx.current_source, ctx.current_node) = caller;
2602− value
26031303}
26041304
2605−/// Read `@page`'s attribute list and title. The page is the root element,
2606−/// and its attributes are checked like any element's: `key=value` (and a
2607−/// bare boolean HTML attribute) go on `<html>`, styles on `<body>`, and
2608−/// `favicon FILE` is its one word of htmlang's own.
2609−fn read_page(
2610− attrs: Option<&syntax::AttrList>,
2611− title: Option<&syntax::Arg>,
2612− line: usize,
1305+fn parse_single_element(
1306+ content: &str,
1307+ line_num: usize,
26131308 ctx: &mut ParseContext,
2614−) -> Page {
2615− let mut page = Page::default();
2616− if let Some(list) = attrs {
2617− let words: Vec<String> = crate::vocab::PAGE_WORDS
2618− .iter()
2619− .map(|w| w.to_string())
2620− .collect();
2621− ctx.in_page = true;
2622− let read = parse_attr_list(&list.attrs, line, ctx, true, &words);
2623− ctx.in_page = false;
2624− // How many of each name have been read, to find where the next
2625− // one is written
2626− let mut seen: HashMap<String, usize> = HashMap::new();
2627− for attr in read {
2628− let boolean = attr.value.is_none() && crate::vocab::is_html_flag(&attr.key);
2629− // Where it is written, when it is written in the list itself
2630− let nth = seen.entry(attr.key.clone()).or_default();
2631− let column = list
2632− .attrs
2633− .iter()
2634− .filter(|token| token.key == attr.key)
2635− .nth(*nth)
2636− .map(|token| token.span.column);
2637− *nth += 1;
2638− let value = attr
2639− .quoted
2640− .as_ref()
2641− .map(|q| q.text.clone())
2642− .or(attr.value.clone());
2643− if !check_page_attr(&attr.key, attr.html, value.as_deref(), line, column, ctx) {
2644− continue;
2645− }
2646− if words.contains(&attr.key) {
2647− if page.favicon.is_some() {
2648− let diagnostic = Diagnostic::warning(
2649− code::DUPLICATE_ATTRIBUTE,
2650− line,
2651− "duplicate attribute 'favicon': the later one wins".to_string(),
2652− )
2653− .subject("favicon");
2654− ctx.diagnostics.push(at_attribute(diagnostic, column, ctx));
1309+) -> Result<Element, ParseError> {
1310+ let (kind, rest) = if let Some(without_at) = content.strip_prefix('@') {
1311+ match without_at.find([' ', '[']) {
1312+ Some(i) => {
1313+ let kind_str = &without_at[..i];
1314+ let rest = if without_at.as_bytes()[i] == b'[' {
1315+ without_at[i..].to_string()
1316+ } else {
1317+ without_at[i + 1..].to_string()
1318+ };
1319+ match parse_element_kind(kind_str, line_num) {
1320+ Ok(kind) => (kind, rest),
1321+ Err(mut e) => {
1322+ // Also suggest user-defined functions
1323+ if let Some(fn_suggestion) = suggest_fn_name(kind_str, ctx) {
1324+ e.message =
1325+ format!("{}, or did you mean @{}?", e.message, fn_suggestion);
1326+ }
1327+ return Err(e);
1328+ }
26551329 }
2656− // The file itself goes into the page when it can be read
2657− // (relative to the file); otherwise it is linked
2658− page.favicon = value.map(|path| match std::fs::read(ctx.resolve(&path)) {
2659− Ok(data) => crate::codegen::data_uri(&path, &data),
2660− Err(_) => path,
2661− });
2662− } else if attr.html || boolean {
2663− page.html_attrs.push(attr);
2664− } else {
2665− page.styles.push(attr);
26661330 }
1331+ None => match parse_element_kind(without_at, line_num) {
1332+ Ok(kind) => (kind, String::new()),
1333+ Err(mut e) => {
1334+ if let Some(fn_suggestion) = suggest_fn_name(without_at, ctx) {
1335+ e.message = format!("{}, or did you mean @{}?", e.message, fn_suggestion);
1336+ }
1337+ return Err(e);
1338+ }
1339+ },
26671340 }
2668− }
2669− page.title = match title {
2670− Some(title) => ctx.interpolate_text(&title.raw, title.span.line, Some(title.span.column)),
2671− None => String::new(),
1341+ } else {
1342+ return Err(ParseError {
1343+ line: line_num,
1344+ message: format!("expected @element or [attrs], got: {}", content),
1345+ });
26721346 };
2673− page
2674−}
26751347
2676−/// `@page`'s own rules for one of its attributes, checked where the
2677−/// `@page` runs and where it doesn't (a layout that isn't called): its
2678−/// word is written `favicon FILE`, and `inline` belongs to `@image`.
2679−/// Returns whether the attribute can be used (a `favicon` with its file,
2680−/// or any other attribute but `inline`).
2681−fn check_page_attr(
2682− key: &str,
2683− html: bool,
2684− value: Option<&str>,
2685− line: usize,
2686− column: Option<usize>,
2687− ctx: &mut ParseContext,
2688−) -> bool {
2689− let report = |ctx: &mut ParseContext, diagnostic: Diagnostic| {
2690− let diagnostic = at_attribute(diagnostic, column, ctx);
2691− ctx.diagnostics.push(diagnostic);
1348+ // Parse optional [attrs]
1349+ let (attrs, rest) = if rest.starts_with('[') {
1350+ parse_attr_brackets(&rest, line_num, ctx)?
1351+ } else {
1352+ (Vec::new(), rest)
26921353 };
2693− if crate::vocab::PAGE_WORDS.contains(&key) {
2694− if html {
2695− report(
2696− ctx,
2697− Diagnostic::error(
2698− code::PARAMETER_FORM,
2699− line,
2700− format!(
2701− "'{0}' is @page's own word, not an HTML attribute: write `{0} {1}`",
2702− key,
2703− value.filter(|v| !v.is_empty()).unwrap_or("FILE")
2704− ),
2705− )
2706− .subject(format!("{}=", key))
2707− .suggest(Some(format!("{} ", key))),
2708− );
2709− }
2710− if value.is_none_or(|v| v.trim().is_empty()) {
2711− report(
2712− ctx,
2713− Diagnostic::error(
2714− code::MISSING_VALUE,
2715− line,
2716− format!("'{0}' needs its file: `{0} favicon.png`", key),
2717− )
2718− .subject(key),
2719− );
2720− return false;
2721− }
2722− return true;
2723− }
2724− if !html && crate::vocab::base_attribute(key) == "inline" {
2725− report(
2726− ctx,
2727− Diagnostic::error(
2728− code::UNEXPECTED_ARGUMENT,
2729− line,
2730− "`inline` puts an image's file into the page, and @page has none: it only \
2731− goes on @image"
2732− .to_string(),
2733− )
2734− .subject("inline"),
2735− );
2736− return false;
2737− }
2738− true
2739−}
2740−
2741−/// A parameter passed `name=value`, the form of an HTML attribute.
2742−fn parameter_form(function: &str, key: &str, value: &str, line: usize) -> Diagnostic {
2743− Diagnostic::error(
2744− code::PARAMETER_FORM,
2745− line,
2746− format!(
2747− "'{}' is a parameter of @{}: parameters are written `name value`, so write `{} {}`",
2748− key, function, key, value
2749− ),
2750− )
2751− .subject(format!("{}=", key))
2752− .suggest(Some(format!("{} ", key)))
2753−}
2754−
2755−/// A call that leaves out a parameter without a default.
2756−fn missing_parameter(
2757− function: &str,
2758− param: &str,
2759− line: usize,
2760− column: Option<usize>,
2761−) -> Diagnostic {
2762− let diagnostic = Diagnostic::error(
2763− code::MISSING_PARAMETER,
2764− line,
2765− format!(
2766− "@{} needs '{}': the parameter has no default, so pass it as `{} VALUE`",
2767− function, param, param
2768− ),
2769− )
2770− .subject(param);
2771− match column {
2772− Some(column) => diagnostic.column(column),
2773− None => diagnostic,
2774− }
2775−}
2776−
2777−/// The column of a call's `@name`, when it is on the call's line.
2778−fn name_column(head: &syntax::Head, line: usize) -> Option<usize> {
2779− (head.name_span.line == line).then_some(head.name_span.column)
2780−}
2781−
2782−/// Define `$name`, or, for `--name`, the CSS custom property on `:root`
2783−/// (which gets quoted text with its quotes, and is read with
2784−/// `var(--name)`, never as a variable). `@let name.field value` gives the
2785−/// record `$name` that field (or the list `$name` a new item at that
2786−/// index), as a new value in this block.
2787−fn set_variable(name: &str, value: Value, line_num: usize, ctx: &mut ParseContext) {
2788− if name.starts_with("--") {
2789− let css = value
2790− .quoted_css()
2791− .map_or_else(|| value.to_string(), str::to_string);
2792− let at_line = |diagnostic: Diagnostic, ctx: &ParseContext| match &ctx.current_source {
2793− (current, Some(text)) if *current == line_num => diagnostic.source(text.clone()),
2794− _ => diagnostic,
2795− };
2796− // `:root` is one place for the whole page: a declaration inside a
2797− // block (an element, a loop, a function's body) would not be
2798− // kept to it, and each run would replace the last
2799− if ctx.env.frames.len() > FILE_FRAMES {
2800− let diagnostic = Diagnostic::error(
2801− code::INVALID_DEFINITION,
2802− line_num,
2803− format!(
2804− "`@let {name}` declares {name} on :root, for the whole page, so it goes at \
2805− the top level of the file: to set it on an element and what is inside \
2806− it, write `[{name} value]` on that element"
2807− ),
2808− )
2809− .subject(name);
2810− ctx.push_once(at_line(diagnostic, ctx));
2811− return;
2812− }
2813− match css_breakout(&css) {
2814− Some(reason) => {
2815− let diagnostic = Diagnostic::error(
2816− code::INVALID_VALUE,
2817− line_num,
2818− format!(
2819− "the value of '{}' has {}: `{}` can't be written into the page's CSS",
2820− name, reason, css
2821− ),
2822− )
2823− .subject(css.as_str());
2824− ctx.push_once(at_line(diagnostic, ctx));
2825− }
2826− None => match ctx.css_vars.iter_mut().find(|(n, _)| n == name) {
2827− Some(declared) => {
2828− let diagnostic = Diagnostic::warning(
2829− code::DUPLICATE_ATTRIBUTE,
2830− line_num,
2831− format!(
2832− "{name} is declared again: :root has one value for the whole page, \
2833− so every element gets this one, also above this line (a theme \
2834− redefines a token on an element: `[dark:{name} {css}]`)"
2835− ),
2836− )
2837− .subject(name);
2838− declared.1 = css;
2839− ctx.push_once(at_line(diagnostic, ctx));
2840− }
2841− None => ctx.css_vars.push((name.to_string(), css)),
2842− },
2843− }
2844− return;
2845− }
2846− let mut path = name.split('.');
2847− let root = path.next().unwrap_or(name);
2848− let fields: Vec<&str> = path.collect();
2849− let value = match fields.is_empty() {
2850− true => value,
2851− false => match with_field(ctx.env.value(root).cloned(), root, &fields, value) {
2852− Ok(value) => value,
2853− Err(message) => {
2854− let diagnostic =
2855− Diagnostic::error(code::INVALID_DEFINITION, line_num, message).subject(name);
2856− let diagnostic = match &ctx.current_source {
2857− (current, Some(text)) if *current == line_num => {
2858− diagnostic.source(text.clone())
2859− }
2860− _ => diagnostic,
2861− };
2862− ctx.push_once(diagnostic);
2863− // Reported: the name keeps what it held
2864− ctx.let_lines.entry(root.to_string()).or_insert(line_num);
2865− return;
2866− }
2867− },
2868− };
2869− ctx.bind(root, value);
2870− ctx.let_lines.entry(root.to_string()).or_insert(line_num);
2871−}
2872−
2873−/// `value` (the value of `$name`) with the field at `path` set to `new`:
2874−/// a record's field, or the item of a list at an index it has. A name
2875−/// without a value, or one whose value is empty (a field a record doesn't
2876−/// have), becomes a record; any other value has no fields to set.
2877−fn with_field(
2878− value: Option<Value>,
2879− name: &str,
2880− path: &[&str],
2881− new: Value,
2882−) -> Result<Value, String> {
2883− let Some((field, rest)) = path.split_first() else {
2884− return Ok(new);
2885− };
2886− let inner = format!("{}.{}", name, field);
2887− match value {
2888− Some(Value::Record(fields)) => {
2889− let mut fields = fields.as_ref().clone();
2890− match fields.iter().position(|(key, _)| key == field) {
2891− Some(i) => {
2892− let old = std::mem::replace(&mut fields[i].1, Value::empty());
2893− fields[i].1 = with_field(Some(old), &inner, rest, new)?;
2894− }
2895− None => fields.push((field.to_string(), with_field(None, &inner, rest, new)?)),
2896− }
2897− Ok(Value::Record(Rc::new(fields)))
2898− }
2899− Some(Value::List(list)) => {
2900− let count = list.items.len();
2901− let Some(i) = field.parse::<usize>().ok().filter(|&i| i < count) else {
2902− return Err(format!(
2903− "`${}` is {}, so `.{}` isn't one of its items (they are `.0` to `.{}`)",
2904− name,
2905− Value::List(list).describe(),
2906− field,
2907− count.saturating_sub(1)
2908− ));
2909− };
2910− let mut items = list.items.as_ref().clone();
2911− let old = std::mem::replace(&mut items[i], Value::empty());
2912− items[i] = with_field(Some(old), &inner, rest, new)?;
2913− // Its items changed, so it no longer prints as written
2914− Ok(Value::list(items))
2915− }
2916− None => Ok(Value::Record(Rc::new(vec![(
2917− field.to_string(),
2918− with_field(None, &inner, rest, new)?,
2919− )]))),
2920− Some(value) if value.to_string().is_empty() => with_field(None, name, path, new),
2921− Some(value) => Err(format!(
2922− "`@let {}.{}` sets a field of a record, but `${}` is {} (`{}`), which has no fields",
2923− name,
2924− path.join("."),
2925− name,
2926− value.describe(),
2927− value
2928− )),
2929− }
2930−}
2931−
2932−/// What a verbatim directive holds (`@head`, `@style`, `@raw`): the rest
2933−/// of its line (`@style .a { color: red }`), or else its indented block.
2934−/// The two together are a syntax error, reported by the tree; the line
2935−/// wins.
2936−fn verbatim_content(node: &syntax::Node) -> String {
2937− match node.directive().map(|d| &d.args) {
2938− Some(DirectiveArgs::Text(Some(line))) => format!("{}\n", line.raw),
2939− _ => verbatim_text(&node.children),
2940− }
2941−}
2942−
2943−/// The text of a verbatim body (`@head`, `@style`, `@markdown`, `@raw`).
2944−fn verbatim_text(children: &[syntax::Node]) -> String {
2945− let mut text = String::new();
2946− for child in children {
2947− if let NodeKind::Verbatim(body) = &child.kind {
2948− text.push_str(&body.text);
2949− text.push('\n');
2950− }
2951− }
2952− text
2953−}
2954−
2955−// ---------------------------------------------------------------------------
2956−// @children replacement
2957−// ---------------------------------------------------------------------------
2958−
2959−fn replace_children_and_slots(
2960− nodes: Vec<Node>,
2961− caller_children: &[Node],
2962− slot_contents: &HashMap<String, Vec<Node>>,
2963−) -> Vec<Node> {
2964− let mut result = Vec::new();
2965− for node in nodes {
2966− match node {
2967− Node::Element(elem) if elem.kind == ElementKind::Children => {
2968− if caller_children.is_empty() && !elem.children.is_empty() {
2969− // Use @children's own children as default/fallback content
2970− result.extend(elem.children);
2971− } else {
2972− result.extend(caller_children.iter().cloned());
2973− }
2974− }
2975− Node::Element(elem) if matches!(&elem.kind, ElementKind::Slot(name) if !name.is_empty()) =>
2976− {
2977− if let ElementKind::Slot(ref name) = elem.kind {
2978− if let Some(content) = slot_contents.get(name) {
2979− result.extend(content.iter().cloned());
2980− }
2981− // If no content provided for this slot, use the slot's own children as default
2982− else if !elem.children.is_empty() {
2983− result.extend(elem.children);
2984− }
2985− }
2986− }
2987− Node::Element(mut elem) => {
2988− elem.children =
2989− replace_children_and_slots(elem.children, caller_children, slot_contents);
2990− result.push(Node::Element(elem));
2991− }
2992− other => result.push(other),
2993− }
2994− }
2995− result
2996−}
2997−
2998−// ---------------------------------------------------------------------------
2999−// Where @slot and @children are written
3000−// ---------------------------------------------------------------------------
3001−
3002−/// The files each `@include` line brought in, by the line's node id, with
3003−/// the include chain that leads to each.
3004−type IncludedBy = HashMap<usize, Vec<(Rc<Tree>, String)>>;
3005−
3006−/// The lines of the files an `@include` line brings in, and the include
3007−/// chain of each (for diagnostics).
3008−type Included<'a, 'f> = &'f dyn Fn(&syntax::Node) -> Vec<(&'a [syntax::Node], Option<&'a str>)>;
3009−
3010−/// Whether `name` is a function here: defined so far, or anywhere in the
3011−/// file and the files it includes.
3012−fn is_function(name: &str, ctx: &ParseContext) -> bool {
3013− ctx.env.function(name).is_some() || ctx.namespace.contains(name)
3014−}
3015−
3016−/// Whether `name` is one slot name: letters, digits, `-` and `_`,
3017−/// starting with a letter (like a function's name).
3018−fn is_slot_name(name: &str) -> bool {
3019− name.chars().next().is_some_and(char::is_alphabetic)
3020− && name
3021− .chars()
3022− .all(|c| c.is_alphanumeric() || c == '-' || c == '_')
3023−}
3024−
3025−/// What a `@slot` or `@children` line is written in.
3026−#[derive(Clone, Copy)]
3027−enum Place<'a> {
3028− /// The top of a file or of a function's body, or a built-in element
3029− /// (by its name).
3030− Element(Option<&'a str>),
3031− /// A call: its content.
3032− Call,
3033−}
3034−
3035−/// Where a line is, for [`slot_uses`].
3036−#[derive(Clone, Copy)]
3037−struct At<'a> {
3038− /// Inside a function's body.
3039− body: bool,
3040− place: Place<'a>,
3041− /// Outside a body: the call (and its line) whose content it is in.
3042− call: Option<(&'a str, usize)>,
3043− /// The include chain of the file it is in, when that isn't the file
3044− /// being compiled.
3045− file: Option<&'a str>,
3046−}
3047−
3048−impl At<'_> {
3049− /// The top of a file, or of a function's body.
3050− fn top(body: bool) -> Self {
3051− At {
3052− body,
3053− place: Place::Element(None),
3054− call: None,
3055− file: None,
3056− }
3057− }
3058−}
3059−
3060−/// What [`slot_uses`] knows about the names and files it walks.
3061−struct Scan<'a, 'f> {
3062− is_function: &'f dyn Fn(&str) -> bool,
3063− included: Included<'a, 'f>,
3064− /// Visit the bodies of the functions defined in the lines too.
3065− into_lets: bool,
3066−}
3067−
3068−/// A `@slot` or `@children` written in a file, and where.
3069−struct SlotUse<'a> {
3070− node: &'a syntax::Node,
3071− head: &'a syntax::Head,
3072− /// The text after it, which is a slot's name; `None` when it isn't
3073− /// the last head of its chain.
3074− text: Option<&'a syntax::Text>,
3075− /// Written inline in a line of text, `{@slot x}`.
3076− inline: bool,
3077− at: At<'a>,
3078−}
3079−
3080−impl SlotUse<'_> {
3081− fn is_slot(&self) -> bool {
3082− self.head.name == "slot"
3083− }
3084−
3085− /// The slot's name as written.
3086− fn name(&self) -> &str {
3087− self.text.map_or("", |t| t.raw.trim())
3088− }
3089−
3090− /// A `@slot NAME` that marks a place in a function's body (not one
3091− /// that fills a slot of a call).
3092− fn declares(&self) -> bool {
3093− self.is_slot() && !self.inline && !matches!(self.at.place, Place::Call)
3094− }
3095−}
3096−
3097−/// Where each `@slot` and `@children` in `block` is written. A `@slot`
3098−/// directly under a call (under its `@if`, `@else` and `@each` too) fills
3099−/// one of its slots; anywhere else in a function's body it declares one.
3100−/// An included file's lines are where its `@include` is.
3101−fn slot_uses<'a>(
3102− block: &'a [syntax::Node],
3103− at: At<'a>,
3104− scan: &Scan<'a, '_>,
3105− out: &mut Vec<SlotUse<'a>>,
3106−) {
3107− fn inline<'a>(
3108− text: &'a syntax::Text,
3109− node: &'a syntax::Node,
3110− at: At<'a>,
3111− scan: &Scan<'a, '_>,
3112− out: &mut Vec<SlotUse<'a>>,
3113− ) {
3114− for segment in &text.segments {
3115− if let Segment::Inline(inline_element) = segment {
3116− let head = &inline_element.head;
3117− if matches!(head.name.as_str(), "slot" | "children")
3118− && !(scan.is_function)(&head.name)
3119− {
3120− out.push(SlotUse {
3121− node,
3122− head,
3123− text: inline_element.text.as_ref(),
3124− inline: true,
3125− at,
3126− });
3127− }
3128− if let Some(text) = &inline_element.text {
3129− inline(text, node, at, scan, out);
3130− }
3131− }
3132− }
3133− }
3134− for node in block {
3135− match &node.kind {
3136− NodeKind::Directive(directive) => match &directive.args {
3137− DirectiveArgs::Let(def) if matches!(def.form, LetForm::Function(_)) => {
3138− if scan.into_lets {
3139− let top = At {
3140− file: at.file,
3141− ..At::top(true)
3142− };
3143− slot_uses(&node.children, top, scan, out);
3144− }
3145− }
3146− // A value's body is an error of its own
3147− DirectiveArgs::Let(_) => {}
3148− _ if directive.spec.body == BodyKind::Verbatim => {}
3149− // `@if`, `@else` and `@each` put their lines in place, and
3150− // `@include` its file's; the lines under a directive that
3151− // takes no body are its siblings
3152− _ => {
3153− for (lines, file) in (scan.included)(node) {
3154− slot_uses(lines, At { file, ..at }, scan, out);
3155− }
3156− slot_uses(&node.children, at, scan, out);
3157− }
3158− },
3159− NodeKind::Element(line) => {
3160− let mut at = at;
3161− let last = line.chain.len() - 1;
3162− for (i, head) in line.chain.iter().enumerate() {
3163− let text = if i == last { line.text.as_ref() } else { None };
3164− let function = (scan.is_function)(&head.name);
3165− if !function && matches!(head.name.as_str(), "slot" | "children") {
3166− out.push(SlotUse {
3167− node,
3168− head,
3169− text,
3170− inline: false,
3171− at,
3172− });
3173− } else if let Some(text) = text {
3174− inline(text, node, at, scan, out);
3175− }
3176− if function {
3177− at.place = Place::Call;
3178− if !at.body {
3179− at.call = Some((&head.name, node.span.line));
3180− }
3181− } else {
3182− at.place = Place::Element(Some(&head.name));
3183− }
3184− }
3185− slot_uses(&node.children, at, scan, out);
3186− }
3187− NodeKind::Text(text) => {
3188− inline(text, node, at, scan, out);
3189− slot_uses(&node.children, at, scan, out);
3190− }
3191− NodeKind::Blank | NodeKind::Comment | NodeKind::Verbatim(_) => {}
3192− }
3193− }
3194−}
3195−
3196−/// The slots a function's body declares, and whether it has a
3197−/// `@children`, when it is defined. The files its `@include` lines bring
3198−/// in count too: they are read now, since they run only at a call.
3199−fn declared_slots(body: &[syntax::Node], ctx: &mut ParseContext) -> (Vec<String>, bool) {
3200− let mut files = HashMap::new();
3201− read_includes(
3202− body,
3203− ctx.base_path.clone(),
3204− &mut Vec::new(),
3205− ctx,
3206− &mut files,
3207− );
3208− let included = |node: &syntax::Node| match files.get(&node.id) {
3209− Some(tree) => vec![(&tree.nodes[..], None)],
3210− None => Vec::new(),
3211− };
3212− let is_function = |name: &str| is_function(name, ctx);
3213− slots_of(body, &is_function, &included)
3214−}
3215−
3216−/// Read and parse the files the `@include` lines in `nodes` bring in (by
3217−/// a literal path, relative to `base`), and the files those include, by
3218−/// the node id of each `@include` line.
3219−fn read_includes(
3220− nodes: &[syntax::Node],
3221− base: Option<PathBuf>,
3222− stack: &mut Vec<PathBuf>,
3223− ctx: &mut ParseContext,
3224− files: &mut HashMap<usize, Rc<Tree>>,
3225−) {
3226− let mut includes = Vec::new();
3227− for node in nodes {
3228− node.walk(&mut |node| {
3229− if let Some(DirectiveArgs::Text(Some(path))) = node.directive().map(|d| &d.args)
3230− && node.is_directive("include")
3231− {
3232− includes.push((node.id, path.raw.clone()));
3233− }
3234− });
3235− }
3236− for (id, path) in includes {
3237− let path = path.trim_matches('"');
3238− if path.contains('$') {
3239− continue;
3240− }
3241− let resolved = match &base {
3242− Some(base) => base.join(path),
3243− None => PathBuf::from(path),
3244− };
3245− if stack.contains(&resolved) {
3246− continue;
3247− }
3248− let Ok(text) = ctx.read_file(&resolved) else {
3249− continue;
3250− };
3251− let tree = ctx.parse_tree(&text);
3252− stack.push(resolved.clone());
3253− let parent = resolved.parent().map(Path::to_path_buf);
3254− read_includes(&tree.nodes, parent, stack, ctx, files);
3255− stack.pop();
3256− files.insert(id, tree);
3257− }
3258−}
3259−
3260−/// The slots a function's body declares (`@slot NAME`, in order), and
3261−/// whether it has a `@children` for the content of a call. A `@slot`
3262−/// directly under a call in the body fills that call's slot instead, so
3263−/// `is_function` says which names are functions. The files the body
3264−/// includes aren't read.
3265−pub fn function_slots(
3266− body: &[syntax::Node],
3267− is_function: &dyn Fn(&str) -> bool,
3268−) -> (Vec<String>, bool) {
3269− slots_of(body, is_function, &|_| Vec::new())
3270−}
3271−
3272−fn slots_of<'a>(
3273− body: &'a [syntax::Node],
3274− is_function: &dyn Fn(&str) -> bool,
3275− included: Included<'a, '_>,
3276−) -> (Vec<String>, bool) {
3277− let scan = Scan {
3278− is_function,
3279− included,
3280− into_lets: false,
3281− };
3282− let mut uses = Vec::new();
3283− slot_uses(body, At::top(true), &scan, &mut uses);
3284− let mut slots: Vec<String> = Vec::new();
3285− for slot in uses.iter().filter(|u| u.declares()) {
3286− let name = slot.name();
3287− if is_slot_name(name) && !slots.iter().any(|s| s == name) {
3288− slots.push(name.to_string());
3289− }
3290− }
3291− let has_children = uses.iter().any(|u| !u.is_slot() && !u.inline);
3292− (slots, has_children)
3293−}
3294−
3295−/// The line as written, indented, when it is one physical line, so a
3296−/// column points into it.
3297−fn written_line(node: &syntax::Node) -> String {
3298− match node.line_count <= 1 {
3299− true => format!("{}{}", " ".repeat(node.indent), node.source),
3300− false => node.source.clone(),
3301− }
3302−}
3303−
3304−/// The lines of the files an `@include` line brought in when it ran, from
3305−/// `included_by`.
3306−fn ran_includes<'a>(
3307− included_by: &'a IncludedBy,
3308− node: &syntax::Node,
3309−) -> Vec<(&'a [syntax::Node], Option<&'a str>)> {
3310− match included_by.get(&node.id) {
3311− Some(files) => files
3312− .iter()
3313− .map(|(tree, chain)| (&tree.nodes[..], Some(chain.as_str())))
3314− .collect(),
3315− None => Vec::new(),
3316− }
3317−}
33181354
3319−/// Check where every `@slot` and `@children` of the file and the files it
3320−/// includes is written, whether or not it runs: a slot has one name, a
3321−/// function's body marks places with them, and a call fills its slots
3322−/// with `@slot` blocks directly under it. An included file's lines are
3323−/// where its `@include` is (in a body, under a call), so an `@include`
3324−/// that never ran leaves its file unchecked.
3325−fn check_slot_places(ctx: &mut ParseContext) {
3326− let trees = std::mem::take(&mut ctx.trees);
3327− let included_by = ctx.included_by.clone();
3328− let is_function = |name: &str| is_function(name, ctx);
3329− let scan = Scan {
3330− is_function: &is_function,
3331− included: &|node| ran_includes(&included_by, node),
3332− into_lets: true,
3333− };
3334− let mut uses = Vec::new();
3335− for (tree, _) in trees.iter().filter(|(_, chain)| chain.is_none()) {
3336− slot_uses(&tree.nodes, At::top(false), &scan, &mut uses);
3337− }
3338− let found: Vec<Diagnostic> = uses
3339− .iter()
3340− .filter_map(|slot| {
3341− let mut d = slot_problem(slot)?;
3342− if d.column.is_none() {
3343− d = d.column(slot.head.name_span.column);
3344− }
3345− d = d.source(written_line(slot.node));
3346− if let Some(file) = slot.at.file {
3347− d.message = format!("{}\n in {}", d.message, file);
3348− }
3349− Some(d)
3350− })
3351− .collect();
3352− ctx.diagnostics.extend(found);
3353− ctx.trees = trees;
3354−}
1355+ let rest = rest.trim().to_string();
1356+ track_var_refs(&rest, &mut ctx.used_variables);
33551357
3356−/// What is wrong with a `@slot` or `@children` where it is written.
3357−fn slot_problem(slot: &SlotUse) -> Option<Diagnostic> {
3358− let line = slot.node.span.line;
3359− let what = if slot.is_slot() {
3360− match slot.name() {
3361− "" => "@slot".to_string(),
3362− name => format!("@slot {}", name),
1358+ // For @link, first token of rest is URL, remainder is inline text
1359+ let mut children = Vec::new();
1360+ let argument = if rest.is_empty() {
1361+ None
1362+ } else if kind == ElementKind::Link {
1363+ let rest_sub = substitute_vars(&protect_escapes(&rest), &ctx.variables);
1364+ if let Some((url, text)) = rest_sub.split_once(' ') {
1365+ let text = text.trim();
1366+ if !text.is_empty() {
1367+ children.push(Node::Text(parse_text_segments(text, ctx)));
1368+ }
1369+ Some(restore_escapes(url))
1370+ } else {
1371+ Some(restore_escapes(&rest_sub))
33631372 }
33641373 } else {
3365− "@children".to_string()
1374+ Some(restore_escapes(&substitute_vars(&protect_escapes(&rest), &ctx.variables)))
33661375 };
3367− if slot.inline {
3368− return Some(Diagnostic::error(
3369− code::MISPLACED_SLOT,
3370− line,
3371− format!(
3372− "{} goes on a line of its own: inline in text it marks and fills nothing",
3373− what
3374− ),
3375− ));
3376− }
3377− if let Some(list) = &slot.head.attrs {
3378− return Some(
3379− Diagnostic::error(
3380− code::UNEXPECTED_ARGUMENT,
3381− line,
3382− format!(
3383− "{} takes no attributes: it is replaced by content, so style the \
3384− element around it",
3385− what
3386− ),
3387− )
3388− .column(list.span.column),
3389− );
3390− }
3391− if slot.is_slot() {
3392− let name = slot.name();
3393− if name.is_empty() {
3394− return Some(Diagnostic::error(
3395− code::MISSING_ARGUMENT,
3396− line,
3397− "@slot needs a name: `@slot footer` (the caller's content without a \
3398− name goes where `@children` is)"
3399− .to_string(),
3400− ));
3401− }
3402− if !is_slot_name(name) {
3403− let joined = name.split_whitespace().collect::<Vec<_>>().join("-");
3404− let suggestion = is_slot_name(&joined).then_some(joined);
3405− let column = slot.text.map(|t| t.span.column);
3406− let d = Diagnostic::error(
3407− code::INVALID_SLOT_NAME,
3408− line,
3409− format!(
3410− "'{}' is not a slot name: a slot's name is one word of letters, digits, \
3411− `-` and `_`, starting with a letter, and its content goes on the lines \
3412− under it",
3413− name
3414− ),
3415− )
3416− .subject(name)
3417− .suggest(suggestion);
3418− return Some(match column {
3419− Some(column) => d.column(column),
3420− None => d,
3421− });
3422− }
3423− if matches!(slot.at.place, Place::Call) || slot.at.body {
3424− return None;
3425− }
3426− let message = match (slot.at.call, slot.at.place) {
3427− (Some((call, call_line)), Place::Element(Some(element))) => format!(
3428− "{} is inside @{}, so it fills nothing: a @slot block that fills a slot of \
3429− @{} (line {}) goes directly under the call",
3430− what, element, call, call_line
3431− ),
3432− _ => format!(
3433− "{} is outside a function's body: `@slot NAME` marks a place in a body \
3434− (`@let @name`), and directly under a call it fills one",
3435− what
3436− ),
3437− };
3438− return Some(Diagnostic::error(code::MISPLACED_SLOT, line, message));
3439− }
3440− if slot.at.body {
3441− return None;
3442− }
3443− let message = match slot.at.call {
3444− Some((call, _)) => format!(
3445− "@children is outside a function's body, so it stands for nothing: the content \
3446− for @{} is written directly under the call",
3447− call
3448− ),
3449− None => "@children is outside a function's body: it marks where a body puts the \
3450− content of each call"
3451− .to_string(),
3452− };
3453− Some(Diagnostic::error(code::MISPLACED_SLOT, line, message))
3454−}
3455−
3456−/// A `@slot NAME` block that fills a slot of a call.
3457−struct Filler<'a> {
3458− node: &'a syntax::Node,
3459− text: &'a syntax::Text,
3460− /// The include chain of the file it is in, when that isn't the file
3461− /// being compiled.
3462− file: Option<&'a str>,
3463−}
3464−
3465−/// Whether `@slot` is the built-in element here, and not a function
3466−/// defined so far that took its name.
3467−fn slot_is_built_in(ctx: &ParseContext) -> bool {
3468− ctx.env.function("slot").is_none()
3469−}
3470−
3471−/// The `@slot NAME` blocks directly under a call, in `block` (under its
3472−/// `@if`, `@else` and `@each` too, and in the files its `@include` lines
3473−/// brought in).
3474−fn fillers<'a>(
3475− block: &'a [syntax::Node],
3476− file: Option<&'a str>,
3477− included: &'a IncludedBy,
3478− out: &mut Vec<Filler<'a>>,
3479−) {
3480− for node in block {
3481− match &node.kind {
3482− NodeKind::Directive(directive)
3483− if matches!(directive.name(), "if" | "else" | "each") =>
3484− {
3485− fillers(&node.children, file, included, out);
3486− }
3487− NodeKind::Directive(directive) if directive.name() == "include" => {
3488− for (lines, file) in ran_includes(included, node) {
3489− fillers(lines, file, included, out);
3490− }
3491− }
3492− NodeKind::Element(line) if line.chain.len() == 1 && line.chain[0].name == "slot" => {
3493− if let Some(text) = &line.text {
3494− out.push(Filler { node, text, file });
3495− }
3496− }
3497− _ => {}
3498− }
3499− }
3500−}
3501−
3502−/// Whether `block`, the lines under a call, holds content other than
3503−/// `@slot` blocks (under `@if`, `@else` and `@each` too): text, an
3504−/// element, raw HTML, Markdown or an included file. For code that doesn't
3505−/// run.
3506−fn holds_content(block: &[syntax::Node], ctx: &ParseContext) -> bool {
3507− block.iter().any(|node| match &node.kind {
3508− NodeKind::Directive(directive) => match directive.name() {
3509− "if" | "else" | "each" => holds_content(&node.children, ctx),
3510− name => matches!(name, "raw" | "markdown" | "include"),
3511− },
3512− NodeKind::Element(line) => {
3513− line.chain[0].name != "slot" || !slot_is_built_in(ctx) || line.chain.len() > 1
3514− }
3515− NodeKind::Text(_) => true,
3516− _ => false,
3517− })
3518−}
3519−
3520−/// Check the `@slot NAME` blocks passed to each call of a line against
3521−/// the slots its function declares. `calls` has the function of each head
3522−/// of the chain that is a call.
3523−fn check_fillers(
3524− node: &syntax::Node,
3525− element: &syntax::ElementLine,
3526− calls: &[Option<(String, Rc<FnDef>)>],
3527− ctx: &mut ParseContext,
3528−) {
3529− if !slot_is_built_in(ctx) {
3530− return;
3531− }
3532− let included = ctx.included_by.clone();
3533− let last = element.chain.len() - 1;
3534− for (i, call) in calls.iter().enumerate() {
3535− let Some((name, function)) = call else {
3536− continue;
3537− };
3538− let mut found = Vec::new();
3539− if i == last {
3540− fillers(&node.children, None, &included, &mut found);
3541− } else if i + 1 == last
3542− && element.chain[last].name == "slot"
3543− && let Some(text) = &element.text
3544− {
3545− // `@card > @slot footer`
3546− found.push(Filler {
3547− node,
3548− text,
3549− file: None,
3550− });
3551− }
3552− for filler in found {
3553− let slot = filler.text.raw.trim();
3554− if !is_slot_name(slot) || function.slots.iter().any(|s| s == slot) {
3555− continue;
3556− }
3557− let mut d = unknown_slot(name, slot, &function.slots, filler.text.span.line)
3558− .column(filler.text.span.column)
3559− .source(written_line(filler.node));
3560− if let Some(file) = filler.file {
3561− d.message = format!("{}\n in {}", d.message, file);
3562− }
3563− ctx.push_once(d);
3564− }
3565− }
3566−}
3567−
3568−/// A `@slot NAME` block for a slot the function doesn't declare.
3569−fn unknown_slot(function: &str, slot: &str, slots: &[String], line: usize) -> Diagnostic {
3570− let candidates: Vec<&str> = slots.iter().map(String::as_str).collect();
3571− let suggestion = suggest_closest(slot, &candidates);
3572− let message = match (slots.is_empty(), suggestion) {
3573− (true, _) => format!(
3574− "@{} has no slot '{}': its body declares no slots (`@slot NAME`)",
3575− function, slot
3576− ),
3577− (false, Some(close)) => format!(
3578− "@{} has no slot '{}', did you mean '{}'? (its slots: {})",
3579− function,
3580− slot,
3581− close,
3582− slots.join(", ")
3583− ),
3584− (false, None) => format!(
3585− "@{} has no slot '{}' (its slots: {})",
3586− function,
3587− slot,
3588− slots.join(", ")
3589− ),
3590− };
3591− Diagnostic::error(code::UNKNOWN_SLOT, line, message)
3592− .subject(slot)
3593− .suggest(suggestion)
3594−}
3595−
3596−/// Content passed to a function whose body has no `@children`.
3597−fn no_children(function: &str, line: usize, column: Option<usize>) -> Diagnostic {
3598− let d = Diagnostic::error(
3599− code::UNEXPECTED_CONTENT,
3600− line,
3601− format!(
3602− "@{0} takes no content: its body has no `@children`, so the text and lines \
3603− passed to it would be dropped (pass text as a parameter, `@{0} [name value]`, \
3604− or add `@children` to the body)",
3605− function
3606− ),
3607− )
3608− .subject(function);
3609− match column {
3610− Some(column) => d.column(column),
3611− None => d,
3612− }
3613−}
3614−
3615−// ---------------------------------------------------------------------------
3616−// Element parsing
3617−// ---------------------------------------------------------------------------
3618−
3619−/// Build the element for `@name [attrs] text` (on its own line, in a chain,
3620−/// or inline in text).
3621−fn parse_single_element(
3622− head: &syntax::Head,
3623− text: Option<&syntax::Text>,
3624− line_num: usize,
3625− ctx: &mut ParseContext,
3626−) -> Result<Element, ParseError> {
3627− let kind = parse_element_kind(&head.name, line_num, ctx)?;
3628− let mut attrs = head.attrs.as_ref().map_or_else(Vec::new, |list| {
3629− parse_attr_list(&list.attrs, line_num, ctx, true, &[])
3630− });
3631−
3632− // The leading argument: for an element whose row names a leading
3633− // attribute (`@link`'s href, `@image`'s src, `@form`'s action, ...),
3634− // the first token of the text fills it, split before anything is
3635− // filled in, and the rest is content (an error on an element without
3636− // content). `@slot`'s whole text is its name. Any other element's text
3637− // is content, parsed like any line of text, as in `@el [padding 8]
3638− // Hello` or `@h2 Meet {@text htmlang}`; its layout decides how it
3639− // combines with the lines under it.
3640− let mut children = Vec::new();
3641− let mut argument = None;
3642− let leading = kind.arg().attributes();
3643− match text {
3644− Some(text) if !leading.is_empty() => {
3645− let (token, rest) = text.split_leading();
3646− let given = attrs
3647− .iter()
3648− .find(|a| a.html && leading.contains(&a.key.as_str()))
3649− .map(|a| (a.key.clone(), a.value.clone().unwrap_or_default()));
3650− if let Some((key, value)) = given {
3651− // The attribute wins; the text is content, as if the
3652− // element had no leading argument
3653− ctx.push_once(leading_twice(&kind, &token, &key, &value, text, ctx));
3654− if !takes_no_text(&kind) {
3655− children.push(Node::Text(text_segments(text, ctx)));
3656− }
3657− } else if let Some(d) = bad_leading_token(&kind, &token, &text.raw, ctx) {
3658− // Nothing is taken as the argument; the line is content
3659− ctx.push_once(d);
3660− if !takes_no_text(&kind) {
3661− children.push(Node::Text(text_segments(text, ctx)));
3662− }
3663− } else {
3664− let column = Some(token.span.column);
3665− if let Some(d) = text_as_url(&kind, &token, ctx) {
3666− ctx.push_once(d);
3667− }
3668− argument = Some(
3669− ctx.fill_value(&token.raw, text.span.line, column, Sink::Text)
3670− .0,
3671− );
3672− if let Some(rest) = rest {
3673− if let Some(d) = chain_after_argument(&kind, &token.raw, &rest, ctx) {
3674− ctx.push_once(d);
3675− }
3676− if takes_no_text(&kind) {
3677− let d = after_the_leading_argument(&kind, &token.raw, &rest);
3678− let d = at_attribute(d, Some(rest.span.column), ctx);
3679− ctx.push_once(d);
3680− } else {
3681− children.push(Node::Text(text_segments(&rest, ctx)));
3682− }
3683− }
3684− }
3685− }
3686− Some(text) if matches!(kind, ElementKind::Slot(_)) => {
3687− argument =
3688− Some(ctx.interpolate_text(&text.raw, text.span.line, Some(text.span.column)));
3689− }
3690− Some(text) => children.push(Node::Text(text_segments(text, ctx))),
3691− // `@link [href=/about]`: the attribute is the leading argument, so
3692− // both forms compile the same (`@image [src=a.svg, inline]`). Not
3693− // for `@source`, whose attribute depends on where it is.
3694− None if leading.len() == 1 => {
3695− if let Some(i) = attrs.iter().position(|a| a.html && a.key == leading[0]) {
3696− argument = Some(attrs.remove(i).value.unwrap_or_default());
3697− }
3698− }
3699− None => {}
3700− }
37011376
37021377 // For @slot, the argument is the slot name
37031378 let kind = if let ElementKind::Slot(_) = kind {
@@ -3706,352 +1381,209 @@ fn parse_single_element(
37061381 kind
37071382 };
37081383
1384+ // Every other element treats its argument as leading text content, as
1385+ // in `@el [padding 8] Hello` or `@paragraph Read {@link /more more}`.
1386+ let argument = match argument {
1387+ Some(_) if !argument_is_special(&kind) && !renders_argument_as_text(&kind) => {
1388+ children.insert(0, Node::Text(parse_text_segments(&rest, ctx)));
1389+ None
1390+ }
1391+ other => other,
1392+ };
1393+
37091394 Ok(Element {
37101395 kind,
37111396 attrs,
37121397 argument,
37131398 children,
37141399 line_num,
3715− function: None,
37161400 })
37171401}
37181402
3719−/// Whether `node` or a line inside it calls `@name` outside any `@if`
3720−/// (in a chain, or inline in text).
3721−fn calls_unguarded(node: &syntax::Node, name: &str) -> bool {
3722− if node.is_directive("if") || node.is_directive("else") {
3723− return false;
3724− }
3725− let text_calls = |text: &syntax::Text| {
3726− text.segments
3727− .iter()
3728− .any(|s| matches!(s, Segment::Inline(inline) if inline.head.name == name))
3729− };
3730− let here = match &node.kind {
3731− NodeKind::Element(element) => {
3732− element.chain.iter().any(|head| head.name == name)
3733− || element.text.as_ref().is_some_and(text_calls)
3734− }
3735− NodeKind::Text(text) => text_calls(text),
3736− _ => false,
3737− };
3738− here || node
3739− .children
3740− .iter()
3741− .any(|child| calls_unguarded(child, name))
3742−}
3743−
3744−/// `@td [padding 8] @children`: `@children` and `@slot NAME` mark where a
3745−/// call's content goes only on a line of their own; after an element's
3746−/// attributes, or in a verbatim body, they are text.
3747−fn marker_in_text(node: &syntax::Node) -> Option<Diagnostic> {
3748− let is_marker = |text: &str| {
3749− let text = text.trim();
3750− text == "@children" || text == "@slot" || text.starts_with("@slot ")
3751− };
3752− let mut line = node.span.line;
3753− let mut source = written_line(node);
3754− let (marker, message) = match &node.kind {
3755− NodeKind::Element(element) => {
3756− let text = element.text.as_ref()?;
3757− if !is_marker(&text.raw) {
3758− return None;
3759− }
3760− let name = &element.chain.last()?.name;
3761− let marker = text.raw.trim().to_string();
3762− let message = format!(
3763− "`{marker}` after @{name}'s attributes is text: it marks where a call's content \
3764− goes only on a line of its own, so write it on the next line, indented under \
3765− @{name}"
3766− );
3767− (marker, message)
3768− }
3769− NodeKind::Verbatim(verbatim) if verbatim.escaped => {
3770− let (i, written) = verbatim
3771− .text
3772− .lines()
3773− .enumerate()
3774− .find(|(_, l)| is_marker(l))?;
3775− let marker = written.trim().to_string();
3776− line += i;
3777− source = written.to_string();
3778− let message = format!(
3779− "`{marker}` in a verbatim body is text: the body is written as it is, so it can't \
3780− hold a call's content (pass the text as a parameter instead)"
3781− );
3782− (marker, message)
3783− }
3784− _ => return None,
3785− };
3786− Some(
3787− Diagnostic::error(code::MISPLACED_SLOT, line, message)
3788− .subject(marker)
3789− .source(source),
3790− )
3791−}
3792−
3793−/// A first word that can't be a leading argument: an inline element
3794−/// (`@link {@b x} y`), or a quote that isn't closed (`@link "a b`).
3795−fn bad_leading_token(
3796− kind: &ElementKind,
3797− token: &syntax::Arg,
3798− text: &str,
3799− ctx: &ParseContext,
3800−) -> Option<Diagnostic> {
3801− let what = leading_name(kind);
3802− let name = kind.name();
3803− let message = if token.raw.starts_with("{@") {
3804− format!(
3805− "@{0} takes its {1} first, before any text: write `@{0} VALUE {2}`, or give it as \
3806− `[{1}=VALUE]`",
3807− name,
3808− what,
3809− text.trim()
3810− )
3811− } else if token.raw.starts_with('"') && syntax::quoted_string(&token.raw).is_none() {
3812− format!(
3813− "@{}'s {} starts with a `\"` that isn't closed: close it (`\"...\"`), or write \
3814− `\\\"` for a quote in the value",
3815− name, what
3816− )
3817− } else {
3818− return None;
3819− };
3820− let d = Diagnostic::error(code::UNEXPECTED_ARGUMENT, token.span.line, message)
3821− .subject(token.raw.clone());
3822− Some(at_attribute(d, Some(token.span.column), ctx))
3823−}
3824−
3825−/// A first word taken as a URL that reads as text: a word with a capital
3826−/// and nothing a URL or a file name has, as in `@link [hx-get=/panel] Open
3827−/// panel`, whose href would be `Open`. It still is (a relative URL can be
3828−/// such a word), with a warning.
3829−fn text_as_url(kind: &ElementKind, token: &syntax::Arg, ctx: &ParseContext) -> Option<Diagnostic> {
3830− const URLS: &[&str] = &["href", "src", "srcset", "action", "data"];
3831− let word = token.raw.as_str();
3832− let reads_as_text = word.starts_with(char::is_uppercase)
3833− && !word.contains([
3834− '/', '.', ':', '#', '?', '=', '&', '%', '~', '$', '{', '\\', '"',
3835− ]);
3836− if !reads_as_text || !kind.arg().attributes().iter().any(|a| URLS.contains(a)) {
3837− return None;
3838− }
3839− let name = kind.name();
3840− let attr = leading_name(kind);
3841− let text = if takes_no_text(kind) {
3842− String::new()
3843− } else {
3844− format!(": write the {attr} before the text, or put the text on the lines under it")
3845− };
3846− let message = format!(
3847− "@{name} takes '{word}', its first word, as its {attr}{text}. A relative URL that \
3848− starts with a capital is written `./{word}`"
3849− );
3850− let d = Diagnostic::warning(code::TEXT_AS_URL, token.span.line, message).subject(word);
3851− Some(at_attribute(d, Some(token.span.column), ctx))
3852−}
3853−
3854−/// `@link /a > @image logo.png`: a `>` chains only after an element's
3855−/// name or its `[attributes]`, so after a leading argument it is text.
3856−/// Said when what follows names an element or a function.
3857−fn chain_after_argument(
3858− kind: &ElementKind,
3859− token: &str,
3860− rest: &syntax::Text,
3861− ctx: &ParseContext,
3862−) -> Option<Diagnostic> {
3863− let after = rest.raw.strip_prefix('>')?;
3864− let name_start = after.trim_start().strip_prefix('@')?;
3865− if after.len() == after.trim_start().len() {
3866− return None;
3867− }
3868− let name: String = name_start
3869− .chars()
3870− .take_while(|c| c.is_ascii_alphanumeric() || *c == '-')
3871− .collect();
3872− if ElementKind::from_name(&name).is_none() && ctx.env.function(&name).is_none() {
3873− return None;
3874− }
3875− let attr = leading_name(kind);
3876− let d = Diagnostic::warning(
3877− code::UNEXPECTED_ARGUMENT,
3878− rest.span.line,
3879− format!(
3880− "`{}` after @{}'s {} is text, not a chain: `>` chains after an element's name or \
3881− its [attributes], so write `@{} [{}={}] {}`",
3882− rest.raw.trim_end(),
3883− kind.name(),
3884− attr,
3885− kind.name(),
3886− attr,
3887− token,
3888− rest.raw.trim_end()
3889− ),
3890− )
3891− .subject(rest.raw.trim_end());
3892− Some(at_attribute(d, Some(rest.span.column), ctx))
3893−}
3894−
3895−/// A leading argument given twice, as the first token and as its
3896−/// attribute: `@link [href=/a] About`.
3897−fn leading_twice(
3898− kind: &ElementKind,
3899− token: &syntax::Arg,
3900− key: &str,
3901− value: &str,
3902− text: &syntax::Text,
3903− ctx: &ParseContext,
3904−) -> Diagnostic {
3905− let name = kind.name();
3906− let what = leading_name(kind);
3907− // The value as one token: quoted when it is empty or has a space in it
3908− let value = if !value.is_empty() && syntax::leading_token_len(value) == value.len() {
3909− value.to_string()
3910− } else {
3911− format!("\"{}\"", value.replace('\\', "\\\\").replace('"', "\\\""))
3912− };
3913− let written = if takes_no_text(kind) {
3914− format!("@{} {}", name, value)
3915− } else {
3916− format!("@{} {} {}", name, value, text.raw)
3917− };
3918− let d = Diagnostic::error(
3919− code::DUPLICATE_ATTRIBUTE,
3920− text.span.line,
3921− format!(
3922− "@{} takes its first word '{}' as its {}, and it also has {}=: give it once, \
3923− as `{}`",
3924− name, token.raw, what, key, written
3925− ),
3926− )
3927− .subject(token.raw.clone());
3928− at_attribute(d, Some(token.span.column), ctx)
3929−}
3930−
3931−/// The attribute an element's leading argument fills, for messages.
3932−fn leading_name(kind: &ElementKind) -> &'static str {
3933− match kind.arg() {
3934− TagArg::Source => "srcset in @picture or src elsewhere",
3935− arg => arg.attribute(false).unwrap_or("argument"),
3936− }
3937−}
3938−
3939−/// Whether text after an element's leading argument has nowhere to go:
3940−/// an element without content (`@image`, `@source`, ...), or `@optgroup`,
3941−/// which holds only `@option` lines, so `@optgroup Citrus fruits` would
3942−/// otherwise make `Citrus` the label and drop `fruits`.
3943−fn takes_no_text(kind: &ElementKind) -> bool {
3944− kind.layout() == Layout::Void || kind.is_tag("optgroup")
3945−}
3946−
3947−/// Text after the leading argument of an element without content:
3948−/// `@image logo.png Our logo`.
3949−fn after_the_leading_argument(kind: &ElementKind, token: &str, rest: &syntax::Text) -> Diagnostic {
3950− let name = kind.name();
3951− let attr = leading_name(kind);
3952− let alt = if matches!(kind, ElementKind::Image) || kind.is_tag("area") {
3953− " For a text alternative, write `alt=...`."
3954− } else {
3955− ""
3956− };
3957− let holds = if kind.layout() == Layout::Void {
3958− "it has no content"
3959− } else {
3960− "it holds only the elements on the lines under it"
3961− };
3962− let bare = syntax::quoted_string(token).unwrap_or(token);
3963− Diagnostic::error(
3964− code::UNEXPECTED_ARGUMENT,
3965− rest.span.line,
3966− format!(
3967− "@{0} takes one word after its attributes, its {1} ('{2}'), and {5}, so '{3}' \
3968− would go nowhere. A value with a space in it is quoted: `\"{6} {3}\"`.{4}",
3969− name, attr, token, rest.raw, alt, holds, bare
3970− ),
3971− )
3972− .subject(rest.raw.clone())
3973−}
1403+/// Elements whose argument is not text content: a URL, a source, an action,
1404+/// or a slot name.
1405+fn argument_is_special(kind: &ElementKind) -> bool {
1406+ matches!(
1407+ kind,
1408+ ElementKind::Link | ElementKind::Image | ElementKind::Script | ElementKind::Slot(_)
1409+ ) || kind
1410+ .spec()
1411+ .is_some_and(|spec| matches!(spec.arg, TagArg::Attr(_)))
1412+}
1413+
1414+/// The directive names (without `@`) the parser recognizes, for tools such
1415+/// as the language server.
1416+pub fn known_directives() -> &'static [&'static str] {
1417+ KNOWN_DIRECTIVES
1418+}
1419+
1420+const KNOWN_DIRECTIVES: &[&str] = &[
1421+ "page",
1422+ "let",
1423+ "include",
1424+ "raw",
1425+ "if",
1426+ "else",
1427+ "each",
1428+ "meta",
1429+ "head",
1430+ "style",
1431+ "markdown",
1432+ "data",
1433+];
39741434
3975−/// The element named `name`, or an "unknown element" error that suggests
3976−/// the closest element, directive or function.
3977−fn parse_element_kind(
3978− name: &str,
3979− line_num: usize,
3980− ctx: &mut ParseContext,
3981−) -> Result<ElementKind, ParseError> {
3982− if let Some(kind) = ElementKind::from_name(name) {
1435+fn parse_element_kind(s: &str, line_num: usize) -> Result<ElementKind, ParseError> {
1436+ if let Some(kind) = ElementKind::from_name(s) {
39831437 return Ok(kind);
39841438 }
3985− // A known name in a place it can't go: say why instead of suggesting
3986− // the name itself.
3987− let misplaced = if crate::ast::directive(name).is_some() {
3988− Some(format!(
3989− "unknown element @{}: @{} is a directive, which goes at the start of its own line",
3990− name, name
3991− ))
3992− } else if ctx.env.bundle(name).is_some() {
3993− Some(format!(
3994− "unknown element @{}: '{}' is an attribute bundle, used as `[${}]` \
3995− (a function is defined with `@let @{}`)",
3996− name, name, name, name
3997− ))
3998− } else if ctx.env.value(name).is_some() {
3999− Some(format!(
4000− "unknown element @{}: '{}' is a value, used as `${}` \
4001− (a function is defined with `@let @{}`)",
4002− name, name, name, name
4003− ))
4004− } else if ctx.namespace.contains(name) {
4005− ctx.used_functions.insert(name.to_string());
4006− Some(format!(
4007− "unknown element @{}: the function @{} isn't visible here. A definition is \
4008− visible from its line to the end of its block, and a function's body sees what \
4009− is defined above the function, so define @{} above this line, outside the block \
4010− it is in",
4011− name, name, name
4012− ))
4013− } else if matches!(name, "svg" | "math" | "template") {
4014− Some(format!(
4015− "unknown element @{}: htmlang doesn't write <{}>; put its markup in the page with \
4016− @raw{}",
4017− name,
4018− name,
4019− if name == "svg" {
4020− " (or an SVG file with `@image [inline] file.svg`)"
4021− } else {
4022− ""
4023− }
4024− ))
4025− } else {
4026− None
4027− };
4028− if let Some(message) = misplaced {
4029− return Err(Diagnostic::error(code::UNKNOWN_ELEMENT, line_num, message).subject(name));
1439+ if let Some(hint) = removed_syntax_hint(&format!("@{}", s)) {
1440+ return Err(ParseError {
1441+ line: line_num,
1442+ message: hint,
1443+ });
40301444 }
40311445 let all_known: Vec<&str> = ElementKind::all_names()
4032− .chain(DIRECTIVES.iter().map(|d| d.name))
1446+ .chain(KNOWN_DIRECTIVES.iter().copied())
40331447 .collect();
4034− // An HTML element htmlang writes under its own name (`@a` is `@link`).
4035− let written_otherwise = crate::ast::HTML_NAMES_WRITTEN_OTHERWISE
4036− .iter()
4037− .find(|(html, _)| *html == name)
4038− .map(|(_, htmlang)| *htmlang);
4039− let closest = written_otherwise.or_else(|| suggest_closest(name, &all_known));
4040− let mut message = match (closest, written_otherwise) {
4041− (Some(closest), Some(_)) => format!(
4042− "unknown element @{}, did you mean @{}? (@{} writes <{}>)",
4043− name, closest, closest, name
4044− ),
4045− (Some(closest), None) => format!("unknown element @{}, did you mean @{}?", name, closest),
4046− (None, _) => format!("unknown element @{}", name),
1448+ let message = match suggest_closest(s, &all_known) {
1449+ Some(closest) => format!("unknown element @{}, did you mean @{}?", s, closest),
1450+ None => format!("unknown element @{}", s),
40471451 };
4048− let function = suggest_fn_name(name, ctx);
4049− if let Some(function) = &function {
4050− message = format!("{}, or did you mean @{}?", message, function);
1452+ Err(ParseError {
1453+ line: line_num,
1454+ message,
1455+ })
1456+}
1457+
1458+/// Directives and element names removed when the language was simplified,
1459+/// with what replaces each. `htmlang upgrade` rewrites all of them.
1460+const REMOVED_SYNTAX: &[(&str, &str)] = &[
1461+ ("@fn", "use `@let name $param` with an indented body"),
1462+ ("@define", "use `@let name [attributes]`"),
1463+ ("@mixin", "use `@let name [attributes]`"),
1464+ ("@unless", "use `@if not <condition>`"),
1465+ ("@for", "use `@each $i in 1..10`"),
1466+ ("@repeat", "use `@each $_ in 1..N`"),
1467+ (
1468+ "@switch",
1469+ "use `@match`, with `@let __switch [...]` inside a case for its attributes",
1470+ ),
1471+ ("@use", "use `@include`"),
1472+ (
1473+ "@import",
1474+ "use `@include` (a file with only definitions emits no content)",
1475+ ),
1476+ ("@with", "use `@let alias $source`"),
1477+ (
1478+ "@layout",
1479+ "make the layout a function (`@let layout` with `@children`) and call it",
1480+ ),
1481+ (
1482+ "@extends",
1483+ "make the layout a function (`@let layout` with `@children` and `@slot`), \
1484+ `@include` its file and call it",
1485+ ),
1486+ ("@scope", "write the `@scope` rule in an `@style` block"),
1487+ (
1488+ "@starting-style",
1489+ "write the `@starting-style` rule in an `@style` block",
1490+ ),
1491+ ("@css-property", "write an `@property` rule in an `@style` block"),
1492+ ("@lang", "use `@page [lang ...] Title`"),
1493+ ("@favicon", "use `@page [favicon ...] Title`"),
1494+ ("@canonical", "use `@page [canonical ...] Title`"),
1495+ ("@base", "use `@page [base ...] Title`"),
1496+ ("@og", "use `@meta og:NAME VALUE`"),
1497+ ("@debug", "removed: a layout needs no compile-time messages"),
1498+ ("@svg", "use `@image [inline] file.svg`"),
1499+ ("@match", "use `@if $x == a` / `@else if $x == b` / `@else`"),
1500+ ("@case", "use `@if $x == a` / `@else if $x == b` / `@else`"),
1501+ ("@default", "use `@else` in an `@if` chain"),
1502+ ("@theme", "use a `@let --name value` line per token"),
1503+ (
1504+ "@json-ld",
1505+ "put a `<script type=\"application/ld+json\">` in `@head`",
1506+ ),
1507+ ("@font-face", "write the `@font-face` rule in an `@style` block"),
1508+ (
1509+ "@manifest",
1510+ "write a manifest.json file and link it from `@head`",
1511+ ),
1512+ ("@breakpoint", "write the media query in an `@style` block"),
1513+ ("@deprecated", "remove it"),
1514+ (
1515+ "@collection",
1516+ "use `@data $name dir/*.json` (each file becomes `$name.STEM.key`)",
1517+ ),
1518+ ("@env", "use `@data $name env:NAME [default]`"),
1519+ (
1520+ "@fetch",
1521+ "download the data before building and use `@data $name file.json`",
1522+ ),
1523+ (
1524+ "@translations",
1525+ "put each locale's strings in a JSON file and use `@data $t locales/$lang.json`",
1526+ ),
1527+ ("@defer", "remove it: the content is already in the page"),
1528+ ("@keyframes", "write the CSS `@keyframes` rule in `@style`"),
1529+ ("@log", "removed: a layout needs no compile-time messages"),
1530+ ("@warn", "removed: a layout needs no compile-time messages"),
1531+ ("@assert", "removed: a layout needs no compile-time checks"),
1532+ (
1533+ "@component",
1534+ "use `@let`: an `@style` block in a function body is scoped to it",
1535+ ),
1536+ ("@col", "use `@el`"),
1537+ ("@p", "use `@paragraph`"),
1538+ ("@img", "use `@image`"),
1539+ ("@btn", "use `@button`"),
1540+ ("@divider", "use `@hr`"),
1541+ ("@opt", "use `@option`"),
1542+];
1543+
1544+/// Attributes that became standard-library bundles or plain CSS.
1545+fn removed_attribute_hint(name: &str) -> Option<&'static str> {
1546+ match name {
1547+ "skeleton" => Some("use the `$skeleton` bundle"),
1548+ "no-scrollbar" => Some("use the `$no-scrollbar` bundle"),
1549+ "gradient" => Some("use `background linear-gradient(...)`"),
1550+ "animate" => Some("use `animation`"),
1551+ "inset-area" => Some("use `position-area`"),
1552+ "gap-x" => Some("use `column-gap`"),
1553+ "gap-y" => Some("use `row-gap`"),
1554+ "shadow" => Some("use `box-shadow`"),
1555+ "blur" => Some("use `filter blur(...)`"),
1556+ "backdrop-blur" => Some("use `backdrop-filter blur(...)`"),
1557+ "truncate" => Some("use the `$truncate` bundle"),
1558+ "critical" => Some("remove it"),
1559+ "grid" => Some("use `@grid`, or `display grid`"),
1560+ "bold" => Some("use `font-weight bold`"),
1561+ "italic" => Some("use `font-style italic`"),
1562+ "underline" => Some("use `text-decoration underline`"),
1563+ "size" => Some("use `font-size`"),
1564+ "rounded" => Some("use `border-radius`"),
1565+ "hidden" => Some("use `display none`"),
1566+ "padding-x" => Some("use `padding-inline`"),
1567+ "padding-y" => Some("use `padding-block`"),
1568+ "margin-x" => Some("use `margin-inline`"),
1569+ "margin-y" => Some("use `margin-block`"),
1570+ _ => None,
40511571 }
4052− Err(Diagnostic::error(code::UNKNOWN_ELEMENT, line_num, message)
4053− .subject(name)
4054− .suggest(closest.map(str::to_string).or(function)))
1572+}
1573+
1574+/// If `content` starts with removed syntax, the error message for it.
1575+fn removed_syntax_hint(content: &str) -> Option<String> {
1576+ let trimmed = content.trim_start();
1577+ REMOVED_SYNTAX.iter().find_map(|(name, replacement)| {
1578+ let rest = trimmed.strip_prefix(name)?;
1579+ if !(rest.is_empty() || rest.starts_with([' ', '['])) {
1580+ return None;
1581+ }
1582+ Some(format!(
1583+ "`{}` was removed: {} (run `htmlang upgrade` to rewrite it automatically)",
1584+ name, replacement
1585+ ))
1586+ })
40551587}
40561588
40571589/// Format include/import stack as a readable chain for error messages.
@@ -4122,37 +1654,34 @@ fn suggest_closest<'a>(input: &str, candidates: &[&'a str]) -> Option<&'a str> {
41221654 best
41231655}
41241656
4125−/// Suggest the closest user-defined function name for typos, from the
4126−/// functions defined so far and those defined anywhere in the file.
1657+/// Suggest the closest user-defined function name for typos.
41271658fn suggest_fn_name(input: &str, ctx: &ParseContext) -> Option<String> {
41281659 let input_chars: Vec<char> = input.chars().collect();
41291660 let max_allowed = 2usize.min(input_chars.len().saturating_sub(1));
4130− let mut best: Option<(usize, &String)> = None;
4131− let visible: Vec<&String> = ctx.defined_functions.keys().collect();
4132− for name in visible.into_iter().chain(ctx.namespace.iter()) {
1661+ let mut best: Option<String> = None;
1662+ let mut best_dist = usize::MAX;
1663+ for name in ctx.functions.keys() {
41331664 let nlen = name.chars().count();
41341665 if nlen.abs_diff(input_chars.len()) > max_allowed {
41351666 continue;
41361667 }
41371668 let name_chars: Vec<char> = name.chars().collect();
41381669 let dist = levenshtein_bounded(&input_chars, &name_chars, max_allowed);
4139− if dist <= max_allowed && best.is_none_or(|b| (dist, name) < b) {
4140− best = Some((dist, name));
1670+ if dist < best_dist && dist <= max_allowed {
1671+ best_dist = dist;
1672+ best = Some(name.clone());
41411673 }
41421674 }
4143− best.map(|(_, name)| name.clone())
1675+ best
41441676}
41451677
41461678/// Suggest the closest variable name for undefined `$var` references.
4147−fn suggest_var_name(input: &str, vars: &[&str]) -> Option<String> {
1679+fn suggest_var_name(input: &str, vars: &HashMap<String, String>) -> Option<String> {
41481680 let input_chars: Vec<char> = input.chars().collect();
41491681 let max_allowed = 2usize.min(input_chars.len().saturating_sub(1));
41501682 let mut best: Option<String> = None;
41511683 let mut best_dist = usize::MAX;
4152− let mut vars = vars.to_vec();
4153− // The same answer every time, whatever the order of the names
4154− vars.sort_unstable();
4155− for name in vars {
1684+ for name in vars.keys().filter(|k| !k.ends_with('#')) {
41561685 let nlen = name.chars().count();
41571686 if nlen.abs_diff(input_chars.len()) > max_allowed {
41581687 continue;
@@ -4161,1988 +1690,1041 @@ fn suggest_var_name(input: &str, vars: &[&str]) -> Option<String> {
41611690 let dist = levenshtein_bounded(&input_chars, &name_chars, max_allowed);
41621691 if dist < best_dist && dist <= max_allowed {
41631692 best_dist = dist;
4164− best = Some(name.to_string());
1693+ best = Some(name.clone());
41651694 }
41661695 }
41671696 best
41681697}
41691698
4170−// ---------------------------------------------------------------------------
4171−// Attribute parsing
4172−// ---------------------------------------------------------------------------
4173−
4174−/// The quoted strings of a CSS value, without their quotes.
4175−fn css_strings(value: &str) -> Vec<&str> {
4176− let mut strings = Vec::new();
4177− let mut start = None;
4178− let mut escaped = false;
4179− for (i, c) in value.char_indices() {
4180− match (c, start) {
4181− _ if escaped => escaped = false,
4182− ('\\', Some(_)) => escaped = true,
4183− ('"', None) => start = Some(i + 1),
4184− ('"', Some(from)) => {
4185− strings.push(&value[from..i]);
4186− start = None;
1699+/// Check for undefined `$var` references and return "did you mean?" diagnostics.
1700+/// `indent` is the line's leading whitespace, which `input` has had trimmed;
1701+/// reported columns and source lines include it.
1702+fn check_undefined_vars(
1703+ input: &str,
1704+ vars: &HashMap<String, String>,
1705+ line_num: usize,
1706+ indent: usize,
1707+) -> Vec<Diagnostic> {
1708+ let mut warnings = Vec::new();
1709+ if !input.contains('$') {
1710+ return warnings;
1711+ }
1712+ let chars: Vec<char> = input.chars().collect();
1713+ let mut i = 0;
1714+ while i < chars.len() {
1715+ if chars[i] == '$'
1716+ && i + 1 < chars.len()
1717+ && (chars[i + 1].is_alphanumeric() || chars[i + 1] == '_' || chars[i + 1] == '-')
1718+ {
1719+ let col = i;
1720+ let start = i + 1;
1721+ let mut end = start;
1722+ while end < chars.len()
1723+ && (chars[end].is_alphanumeric()
1724+ || chars[end] == '-'
1725+ || chars[end] == '_'
1726+ || chars[end] == '.')
1727+ {
1728+ end += 1;
41871729 }
4188− _ => {}
1730+ while end > start && chars[end - 1] == '.' {
1731+ end -= 1;
1732+ }
1733+ let name: String = chars[start..end].iter().collect();
1734+ if !name.is_empty()
1735+ && !vars.contains_key(&name)
1736+ && let Some(closest) = suggest_var_name(&name, vars)
1737+ {
1738+ warnings.push(Diagnostic {
1739+ line: line_num,
1740+ column: Some(indent + col),
1741+ message: format!(
1742+ "undefined variable '${}', did you mean '${}'?",
1743+ name, closest
1744+ ),
1745+ severity: Severity::Warning,
1746+ source_line: Some(format!("{}{}", " ".repeat(indent), input)),
1747+ });
1748+ }
1749+ i = end;
1750+ } else {
1751+ i += 1;
41891752 }
41901753 }
4191− strings
1754+ warnings
41921755}
41931756
4194−/// An `if(...)` in a CSS value that isn't CSS's if(): CSS writes each
4195−/// branch `CONDITION: VALUE`, so an if() without a `:` is something else.
4196−/// Quoted CSS strings are text, not calls.
4197−fn not_css_if(value: &str) -> Option<&str> {
4198− let mut quote = None;
4199− let mut prev = None;
4200− let mut chars = value.char_indices();
4201− while let Some((at, c)) = chars.next() {
4202− match quote {
4203− Some(_) if c == '\\' => {
4204− chars.next();
1757+// ---------------------------------------------------------------------------
1758+// Attribute parsing
1759+// ---------------------------------------------------------------------------
1760+
1761+/// Attributes that expect purely numeric values (px-based) or values with CSS units.
1762+const NUMERIC_ATTRS: &[&str] = &[
1763+ "spacing",
1764+ "gap",
1765+ "padding",
1766+ "padding-top",
1767+ "padding-bottom",
1768+ "padding-left",
1769+ "padding-right",
1770+ "min-width",
1771+ "max-width",
1772+ "min-height",
1773+ "max-height",
1774+ "border-radius",
1775+ "font-size",
1776+ "column-gap",
1777+ "row-gap",
1778+ "top",
1779+ "right",
1780+ "bottom",
1781+ "left",
1782+ "letter-spacing",
1783+];
1784+
1785+const CSS_UNIT_SUFFIXES: &[&str] = &[
1786+ "px", "%", "rem", "em", "vh", "vw", "vmin", "vmax", "dvh", "svh", "lvh", "ch", "ex", "cm",
1787+ "mm", "in", "pt", "pc", "fr",
1788+];
1789+
1790+fn has_css_unit(value: &str) -> bool {
1791+ CSS_UNIT_SUFFIXES.iter().any(|u| value.ends_with(u))
1792+ || value.starts_with("var(")
1793+ || value.starts_with("calc(")
1794+ || value.starts_with("clamp(")
1795+ || value.starts_with("min(")
1796+ || value.starts_with("max(")
1797+}
1798+
1799+/// Attributes that accept numeric OR keyword values.
1800+const NUMERIC_OR_KEYWORD_ATTRS: &[&str] = &["width", "height"];
1801+const SIZE_KEYWORDS: &[&str] = &["fill", "shrink"];
1802+
1803+fn validate_attr_value(attr: &Attribute, line_num: usize, ctx: &mut ParseContext) {
1804+ let base_key = crate::vocab::base_attribute(attr.key.as_str());
1805+
1806+ if let Some(val) = &attr.value {
1807+ if NUMERIC_ATTRS.contains(&base_key) {
1808+ // All space-separated parts must be numeric or have a CSS unit
1809+ for part in val.split_whitespace() {
1810+ if part.parse::<f64>().is_err() && !has_css_unit(part) {
1811+ ctx.diagnostics.push(Diagnostic {
1812+ line: line_num,
1813+ column: None,
1814+ message: format!(
1815+ "'{}' expects a numeric value (with optional unit), got '{}'",
1816+ attr.key, val
1817+ ),
1818+ severity: Severity::Warning,
1819+ source_line: None,
1820+ });
1821+ return;
1822+ }
42051823 }
4206− Some(q) if c == q => quote = None,
4207− Some(_) => {}
4208− None if matches!(c, '"' | '\'') => quote = Some(c),
4209− None => {
4210− let word_before =
4211− prev.is_some_and(|p: char| p.is_alphanumeric() || matches!(p, '-' | '_'));
4212− if !word_before && value[at..].starts_with("if(") {
4213− let mut depth = 0;
4214− let close = value[at + 2..].char_indices().find_map(|(i, c)| {
4215− match c {
4216− '(' => depth += 1,
4217− ')' => depth -= 1,
4218− _ => {}
4219− }
4220− (depth == 0).then_some(at + 2 + i)
1824+ } else if NUMERIC_OR_KEYWORD_ATTRS.contains(&base_key) {
1825+ let is_keyword = SIZE_KEYWORDS.contains(&val.as_str());
1826+ let is_numeric = val.parse::<f64>().is_ok();
1827+ let has_unit = has_css_unit(val);
1828+ if !is_keyword && !is_numeric && !has_unit {
1829+ ctx.diagnostics.push(Diagnostic {
1830+ line: line_num,
1831+ column: None,
1832+ message: format!(
1833+ "'{}' expects a number or one of [{}], got '{}'",
1834+ attr.key,
1835+ SIZE_KEYWORDS.join(", "),
1836+ val
1837+ ),
1838+ severity: Severity::Warning,
1839+ source_line: None,
1840+ });
1841+ }
1842+ } else if base_key == "opacity" {
1843+ if let Ok(v) = val.parse::<f64>() {
1844+ if !(0.0..=1.0).contains(&v) {
1845+ ctx.diagnostics.push(Diagnostic {
1846+ line: line_num,
1847+ column: None,
1848+ message: format!("'opacity' should be between 0 and 1, got '{}'", val),
1849+ severity: Severity::Warning,
1850+ source_line: None,
42211851 });
4222− let end = close.map_or(value.len(), |c| c + 1);
4223− if !value[at + 3..end].contains(':') {
4224− return Some(&value[at..end]);
4225− }
42261852 }
1853+ } else {
1854+ ctx.diagnostics.push(Diagnostic {
1855+ line: line_num,
1856+ column: None,
1857+ message: format!("'opacity' expects a numeric value, got '{}'", val),
1858+ severity: Severity::Warning,
1859+ source_line: None,
1860+ });
42271861 }
4228− }
4229− prev = Some(c);
4230− }
4231− None
4232−}
4233−
4234−/// Why a CSS value can't be written into a rule as it is, whatever it
4235−/// means: a `;` (outside parentheses, where CSS's own `if()` uses it), a
4236−/// `{` or a `}` would end the declaration or the rule, and an unclosed
4237−/// quote or parenthesis would run on into the rules after it. Quoted
4238−/// strings are text, and a backslash escapes the character after it, as
4239−/// in CSS. A `</style` anywhere, even in a string, would end the page's
4240−/// `<style>` element and start HTML.
4241−fn css_breakout(value: &str) -> Option<&'static str> {
4242− if value.to_ascii_lowercase().contains("</style") {
4243− return Some("a `</style`, which would end the page's style element");
4244− }
4245− let mut quote = None;
4246− let mut depth = 0usize;
4247− let mut chars = value.chars();
4248− while let Some(c) = chars.next() {
4249− match (quote, c) {
4250− (_, '\\') => {
4251− chars.next();
1862+ } else if base_key == "z-index" {
1863+ if val.parse::<i32>().is_err() {
1864+ ctx.diagnostics.push(Diagnostic {
1865+ line: line_num,
1866+ column: None,
1867+ message: format!("'z-index' expects an integer, got '{}'", val),
1868+ severity: Severity::Warning,
1869+ source_line: None,
1870+ });
42521871 }
4253− (Some(q), c) if c == q => quote = None,
4254− (Some(_), _) => {}
4255− (None, '"' | '\'') => quote = Some(c),
4256− (None, '(') => depth += 1,
4257− (None, ')') if depth == 0 => return Some("a `)` that closes nothing"),
4258− (None, ')') => depth -= 1,
4259− (None, ';') if depth == 0 => return Some("a `;`, which would end the declaration"),
4260− (None, '{' | '}') => return Some("a `{` or `}`, which would end the CSS rule"),
4261− _ => {}
4262− }
4263− }
4264− match (quote, depth) {
4265− (Some('"'), _) => Some("a `\"` that isn't closed"),
4266− (Some(_), _) => Some("a `'` that isn't closed"),
4267− (None, 0) => None,
4268− (None, _) => Some("a `(` that isn't closed"),
4269− }
4270−}
4271−
4272−/// The hex colors of a CSS value that don't have 3, 4, 6 or 8 hex
4273−/// digits. A `#` word in a CSS value is a color, except inside `url(...)`
4274−/// and quoted strings.
4275−fn bad_hex_colors(value: &str) -> Vec<&str> {
4276− let mut bad = Vec::new();
4277− let mut quote = None;
4278− let mut in_url = 0usize;
4279− let mut depth = 0usize;
4280− let mut chars = value.char_indices().peekable();
4281− while let Some((at, c)) = chars.next() {
4282− match (quote, c) {
4283− (_, '\\') => {
4284− chars.next();
1872+ } else if base_key == "display" {
1873+ const DISPLAY_VALUES: &[&str] = &[
1874+ "none",
1875+ "block",
1876+ "inline",
1877+ "inline-block",
1878+ "flex",
1879+ "inline-flex",
1880+ "grid",
1881+ "inline-grid",
1882+ "table",
1883+ "table-row",
1884+ "table-cell",
1885+ "contents",
1886+ "flow-root",
1887+ "list-item",
1888+ ];
1889+ if !DISPLAY_VALUES.contains(&val.as_str()) && !val.starts_with("var(") {
1890+ let suggestion = suggest_closest(val, DISPLAY_VALUES);
1891+ let msg = match suggestion {
1892+ Some(s) => format!("unknown display value '{}', did you mean '{}'?", val, s),
1893+ None => format!("unknown display value '{}'", val),
1894+ };
1895+ ctx.diagnostics.push(Diagnostic {
1896+ line: line_num,
1897+ column: None,
1898+ message: msg,
1899+ severity: Severity::Warning,
1900+ source_line: None,
1901+ });
42851902 }
4286− (Some(q), c) if c == q => quote = None,
4287− (Some(_), _) => {}
4288− (None, '"' | '\'') => quote = Some(c),
4289− (None, '(') => {
4290− depth += 1;
4291− if value[..at].ends_with("url") && in_url == 0 {
4292− in_url = depth;
4293− }
1903+ } else if base_key == "position" {
1904+ const POSITION_VALUES: &[&str] = &["static", "relative", "absolute", "fixed", "sticky"];
1905+ if !POSITION_VALUES.contains(&val.as_str()) && !val.starts_with("var(") {
1906+ let suggestion = suggest_closest(val, POSITION_VALUES);
1907+ let msg = match suggestion {
1908+ Some(s) => format!("unknown position value '{}', did you mean '{}'?", val, s),
1909+ None => format!("unknown position value '{}'", val),
1910+ };
1911+ ctx.diagnostics.push(Diagnostic {
1912+ line: line_num,
1913+ column: None,
1914+ message: msg,
1915+ severity: Severity::Warning,
1916+ source_line: None,
1917+ });
42941918 }
4295− (None, ')') => {
4296− if in_url == depth {
4297− in_url = 0;
4298− }
4299− depth = depth.saturating_sub(1);
1919+ } else if base_key == "overflow" || base_key == "overflow-x" || base_key == "overflow-y" {
1920+ const OVERFLOW_VALUES: &[&str] = &["visible", "hidden", "scroll", "auto", "clip"];
1921+ if !OVERFLOW_VALUES.contains(&val.as_str()) && !val.starts_with("var(") {
1922+ let suggestion = suggest_closest(val, OVERFLOW_VALUES);
1923+ let msg = match suggestion {
1924+ Some(s) => format!("unknown overflow value '{}', did you mean '{}'?", val, s),
1925+ None => format!("unknown overflow value '{}'", val),
1926+ };
1927+ ctx.diagnostics.push(Diagnostic {
1928+ line: line_num,
1929+ column: None,
1930+ message: msg,
1931+ severity: Severity::Warning,
1932+ source_line: None,
1933+ });
43001934 }
4301− (None, '#') if in_url == 0 => {
4302− let end = value[at + 1..]
4303− .find(|c: char| !(c.is_alphanumeric() || c == '-' || c == '_'))
4304− .map_or(value.len(), |n| at + 1 + n);
4305− let hex = &value[at + 1..end];
4306− if !(matches!(hex.len(), 3 | 4 | 6 | 8)
4307− && hex.chars().all(|c| c.is_ascii_hexdigit()))
4308− {
4309− bad.push(&value[at..end]);
4310− }
1935+ } else if base_key == "text-align" {
1936+ const TEXT_ALIGN_VALUES: &[&str] =
1937+ &["left", "right", "center", "justify", "start", "end"];
1938+ if !TEXT_ALIGN_VALUES.contains(&val.as_str()) && !val.starts_with("var(") {
1939+ let suggestion = suggest_closest(val, TEXT_ALIGN_VALUES);
1940+ let msg = match suggestion {
1941+ Some(s) => format!("unknown text-align value '{}', did you mean '{}'?", val, s),
1942+ None => format!("unknown text-align value '{}'", val),
1943+ };
1944+ ctx.diagnostics.push(Diagnostic {
1945+ line: line_num,
1946+ column: None,
1947+ message: msg,
1948+ severity: Severity::Warning,
1949+ source_line: None,
1950+ });
43111951 }
4312− _ => {}
4313− }
4314− }
4315− bad
4316−}
4317−
4318−/// A diagnostic about an attribute, with its column and source line when
4319−/// it is on the line being evaluated.
4320−fn at_attribute(diagnostic: Diagnostic, column: Option<usize>, ctx: &ParseContext) -> Diagnostic {
4321− match (&ctx.current_source, column) {
4322− ((current, Some(text)), Some(column)) if *current == diagnostic.line => {
4323− diagnostic.column(column).source(text.clone())
4324− }
4325− _ => diagnostic,
4326− }
4327−}
4328−
4329−/// Check a style's value. Values go to the CSS as written, so only what
4330−/// can't be wrong in any CSS is checked: a value that would break out of
4331−/// its rule is an error (and it is left out); a hex color without 3, 4, 6
4332−/// or 8 digits, an `if()` that isn't CSS's and a quoted font stack are
4333−/// warnings. Returns whether the value can be written.
4334−fn check_css_value(
4335− attr: &Attribute,
4336− base: &str,
4337− line: usize,
4338− column: Option<usize>,
4339− ctx: &mut ParseContext,
4340−) -> bool {
4341− let Some(value) = &attr.value else {
4342− return true;
4343− };
4344− if let Some(reason) = css_breakout(value) {
4345− let diagnostic = Diagnostic::error(
4346− code::INVALID_VALUE,
4347− line,
4348− format!(
4349− "the value of '{}' has {}: `{}` can't be written into the page's CSS",
4350− attr.key, reason, value
4351− ),
4352− )
4353− .subject(value.as_str());
4354− ctx.diagnostics.push(at_attribute(diagnostic, column, ctx));
4355− return false;
4356− }
4357− if crate::vocab::is_custom_property(base) {
4358− return true;
4359− }
4360−
4361− let warn = |ctx: &mut ParseContext, diagnostic: Diagnostic| {
4362− let diagnostic = at_attribute(diagnostic, column, ctx);
4363− ctx.diagnostics.push(diagnostic);
4364− };
4365− // In CSS, a quoted font-family is one family, commas and all
4366− if base == "font-family"
4367− && let Some(family) = css_strings(value).into_iter().find(|s| s.contains(','))
4368− {
4369− let stack = family
4370− .split(',')
4371− .map(str::trim)
4372− .collect::<Vec<_>>()
4373− .join("\\, ");
4374− warn(
4375− ctx,
4376− Diagnostic::warning(
4377− code::INVALID_VALUE,
4378− line,
4379− format!(
4380− "font-family \"{}\" is one family, whose name has a comma in it: \
4381− for a font stack, write `font-family {}`",
4382− family, stack
4383− ),
4384− )
4385− .subject(format!("\"{}\"", family))
4386− .suggest(Some(stack)),
4387− );
4388− }
4389− if let Some(call) = not_css_if(value) {
4390− warn(
4391− ctx,
4392− Diagnostic::warning(
4393− code::INVALID_VALUE,
4394− line,
4395− format!(
4396− "'{}' is not CSS's if(), whose branches are written \
4397− `if(CONDITION: VALUE; else: VALUE)`",
4398− call
4399− ),
4400− )
4401− .subject(call),
4402− );
4403− }
4404− for color in bad_hex_colors(value) {
4405− warn(
4406− ctx,
4407− Diagnostic::warning(
4408− code::INVALID_COLOR,
4409− line,
4410− format!(
4411− "invalid hex color '{}': a hex color has 3, 4, 6 or 8 hex digits",
4412− color
4413− ),
4414− )
4415− .subject(color),
4416− );
4417− }
4418− true
4419−}
4420−
4421−/// An unknown prefix: the message, the text it is about, and what to write
4422−/// instead, when something is close enough.
4423−struct PrefixProblem {
4424− message: String,
4425− subject: String,
4426− suggestion: Option<String>,
4427−}
4428−
4429−/// What is wrong with the prefix `rest` starts with, when the known
4430−/// prefixes are already split off it and what is left still starts with
4431−/// one: a word and a `:` (`hovr:`), or a word and a parenthesised argument
4432−/// and a `:` (`nth-chld(2):`). Selector prefixes are CSS's pseudo-classes
4433−/// and pseudo-elements under their CSS names, so an unknown one gets the
4434−/// closest name as a suggestion. Only names with the same first letter are
4435−/// suggested: `odd:` is two edits from `md:`, which it doesn't mean.
4436−fn unknown_prefix(rest: &str) -> Option<PrefixProblem> {
4437− use crate::vocab::{self, Pseudo};
4438− let name_len = rest.find(|c: char| !(c.is_ascii_alphanumeric() || c == '-'))?;
4439− let name = &rest[..name_len];
4440− if name.is_empty() {
4441− return None;
4442− }
4443− if rest[name_len..].starts_with('(') {
4444− // `name(...):`: a pseudo-class with an argument
4445− let close = vocab::closing_paren(rest, name_len)?;
4446− if !rest[close + 1..].starts_with(':') {
4447− return None;
4448− }
4449− let written = &rest[..close + 2];
4450− if matches!(vocab::pseudo(name), Some(Pseudo::Class | Pseudo::Element)) {
4451− let bare = format!("{}:", name);
4452− return Some(PrefixProblem {
4453− message: format!(
4454− "'{}': `{}` takes no argument: write `{}`",
4455− written,
4456− vocab::pseudo_selector(&bare).unwrap_or_default(),
4457− bare
4458− ),
4459− subject: written.to_string(),
4460− suggestion: Some(bare),
4461− });
4462− }
4463− let functional: Vec<&str> = vocab::functional_pseudos()
4464− .into_iter()
4465− .filter(|p| p.chars().next() == name.chars().next())
4466− .collect();
4467− let suggestion = suggest_closest(name, &functional)
4468− .filter(|&closest| closest != name)
4469− .map(|closest| format!("{}(", closest));
4470− let written = format!("{}(", name);
4471− let message = match &suggestion {
4472− Some(closest) => format!("unknown prefix '{}', did you mean '{}'?", written, closest),
4473− None => format!("unknown prefix '{}'", written),
4474− };
4475− return Some(PrefixProblem {
4476− message,
4477− subject: written,
4478− suggestion,
4479− });
4480− }
4481− if !rest[name_len..].starts_with(':') {
4482− return None;
4483− }
4484− let written = &rest[..name_len + 1];
4485− // `has:`: its argument is missing
4486− if vocab::pseudo(name) == Some(Pseudo::Function) {
4487− return Some(PrefixProblem {
4488− message: format!(
4489− "'{}': `:{}()` takes an argument, in parentheses, as in CSS: `{}(...):`",
4490− written, name, name
4491− ),
4492− subject: written.to_string(),
4493− suggestion: None,
4494− });
4495− }
4496− let prefixes = vocab::all_prefixes();
4497− let candidates: Vec<&str> = prefixes
4498− .iter()
4499− .map(String::as_str)
4500− .filter(|p| p.chars().next() == written.chars().next())
4501− .collect();
4502− // The closest name that starts with the same letter (`hvoer:` →
4503− // `hover:`), else the first that starts with the word written and a `-`
4504− // (`first:` → `first-child:`)
4505− let suggestion = suggest_closest(written, &candidates)
4506− .or_else(|| {
4507− let longer = format!("{}-", name);
4508− candidates.iter().copied().find(|p| p.starts_with(&longer))
4509− })
4510− .filter(|&closest| closest != written)
4511− .map(str::to_string);
4512− let message = match &suggestion {
4513− Some(closest) => format!("unknown prefix '{}', did you mean '{}'?", written, closest),
4514− None => format!("unknown prefix '{}'", written),
4515− };
4516− Some(PrefixProblem {
4517− message,
4518− subject: written.to_string(),
4519− suggestion,
4520− })
4521−}
4522−
4523−/// Check an attribute's element prefix (`@td:padding 8`), when it has one:
4524−/// it names a built-in element that has an HTML tag of its own (not a
4525−/// function, and not `@el`, whose `<div>` other elements write too), there
4526−/// is one, not with `children:`, and what it styles is a CSS property, not
4527−/// one of htmlang's words, which compile against each element's layout and
4528−/// its parent's. Returns false, after reporting, when the attribute can't
4529−/// be written.
4530−fn check_element_prefixes(
4531− attr: &Attribute,
4532− prefixes: &[&str],
4533− base: &str,
4534− line: usize,
4535− column: Option<usize>,
4536− ctx: &mut ParseContext,
4537−) -> bool {
4538− use crate::ast::ElementKind;
4539− use crate::vocab;
4540− let elements: Vec<&str> = prefixes
4541− .iter()
4542− .copied()
4543− .filter(|p| vocab::element_prefix(p).is_some())
4544− .collect();
4545− let Some(&prefix) = elements.first() else {
4546− return true;
4547− };
4548− let fail = |ctx: &mut ParseContext,
4549− code: &'static str,
4550− message: String,
4551− subject: &str,
4552− suggestion: Option<String>| {
4553− let diagnostic = Diagnostic::error(code, line, message)
4554− .subject(subject)
4555− .suggest(suggestion);
4556− let diagnostic = at_attribute(diagnostic, column, ctx);
4557− ctx.diagnostics.push(diagnostic);
4558− false
4559− };
4560− let name = vocab::element_prefix(prefix).unwrap_or_default();
4561− if is_function(name, ctx) {
4562− return fail(
4563− ctx,
4564− code::INVALID_PREFIX,
4565− format!(
4566− "'{}': @{} is a function, and `{}` would pick elements out by their HTML tag, \
4567− which a function doesn't have: style what @{} writes in its body, or pass it \
4568− attributes",
4569− attr.key, name, prefix, name
4570− ),
4571− prefix,
4572− None,
4573− );
4574− }
4575− match ElementKind::from_name(name) {
4576− None => {
4577− let own: Vec<&str> = ElementKind::all_names()
4578− .filter(|n| ElementKind::from_name(n).is_some_and(|k| k.own_tag().is_some()))
4579− .collect();
4580− // An HTML name htmlang writes under another (`@a:` is `@link:`)
4581− let (written_otherwise, shared) = match crate::ast::HTML_NAMES_WRITTEN_OTHERWISE
4582− .iter()
4583− .find(|(html, _)| *html == name)
1952+ } else if base_key == "cursor" {
1953+ const CURSOR_VALUES: &[&str] = &[
1954+ "auto",
1955+ "default",
1956+ "none",
1957+ "pointer",
1958+ "wait",
1959+ "text",
1960+ "move",
1961+ "not-allowed",
1962+ "crosshair",
1963+ "grab",
1964+ "grabbing",
1965+ "help",
1966+ "progress",
1967+ "col-resize",
1968+ "row-resize",
1969+ "n-resize",
1970+ "s-resize",
1971+ "e-resize",
1972+ "w-resize",
1973+ "zoom-in",
1974+ "zoom-out",
1975+ "context-menu",
1976+ "cell",
1977+ "copy",
1978+ "alias",
1979+ "no-drop",
1980+ ];
1981+ if !CURSOR_VALUES.contains(&val.as_str())
1982+ && !val.starts_with("url(")
1983+ && !val.starts_with("var(")
45841984 {
4585− Some((_, htmlang)) if own.contains(htmlang) => (Some(*htmlang), false),
4586− Some(_) => (None, true),
4587− None => (None, false),
4588− };
4589− // `@each:`, `@markdown:`: a directive, which is no element
4590− if crate::ast::directive(name).is_some() {
4591− return fail(
4592− ctx,
4593− code::UNKNOWN_PREFIX,
4594− format!(
4595− "unknown element @{} in '{}': @{} is a directive, and an element \
4596− prefix names an element with an HTML tag of its own, such as `@td:`",
4597− name, prefix, name
4598− ),
4599− prefix,
4600− None,
4601− );
1985+ let suggestion = suggest_closest(val, CURSOR_VALUES);
1986+ let msg = match suggestion {
1987+ Some(s) => format!("unknown cursor value '{}', did you mean '{}'?", val, s),
1988+ None => format!("unknown cursor value '{}'", val),
1989+ };
1990+ ctx.diagnostics.push(Diagnostic {
1991+ line: line_num,
1992+ column: None,
1993+ message: msg,
1994+ severity: Severity::Warning,
1995+ source_line: None,
1996+ });
46021997 }
4603− // `@div:`, `@span:`: several elements write it
4604− if shared {
4605− return fail(
4606− ctx,
4607− code::UNKNOWN_PREFIX,
4608− format!(
4609− "unknown element @{} in '{}': htmlang writes <{}> for several \
4610− elements, so no element prefix picks it out",
4611− name, prefix, name
1998+ } else if base_key == "font-weight" {
1999+ const WEIGHT_VALUES: &[&str] = &[
2000+ "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600",
2001+ "700", "800", "900",
2002+ ];
2003+ if !WEIGHT_VALUES.contains(&val.as_str()) && !val.starts_with("var(") {
2004+ ctx.diagnostics.push(Diagnostic {
2005+ line: line_num,
2006+ column: None,
2007+ message: format!(
2008+ "'font-weight' expects a weight keyword or number 100-900, got '{}'",
2009+ val
46122010 ),
4613− prefix,
4614− None,
4615− );
2011+ severity: Severity::Warning,
2012+ source_line: None,
2013+ });
46162014 }
4617− // A name with the same first letter first (`@tdd:` is `@td:`)
4618− let same_letter: Vec<&str> = own
4619− .iter()
4620− .copied()
4621− .filter(|n| n.chars().next() == name.chars().next())
4622− .collect();
4623− let closest = written_otherwise
4624− .or_else(|| suggest_closest(name, &same_letter))
4625− .or_else(|| suggest_closest(name, &own));
4626− let message = match (closest, written_otherwise) {
4627− (Some(closest), Some(_)) => format!(
4628− "unknown element @{} in '{}', did you mean '@{}:'? (@{} writes <{}>)",
4629− name, prefix, closest, closest, name
4630− ),
4631− (Some(closest), None) => format!(
4632− "unknown element @{} in '{}', did you mean '@{}:'?",
4633− name, prefix, closest
4634− ),
4635− (None, _) => format!("unknown element @{} in '{}'", name, prefix),
4636− };
4637− let suggestion = closest.map(|c| format!("@{}:", c));
4638− fail(ctx, code::UNKNOWN_PREFIX, message, prefix, suggestion)
4639− }
4640− Some(kind) if kind.own_tag().is_none() => {
4641− let reason = match kind.tag() {
4642− None => format!(
4643− "@{} writes no element of its own, so there is nothing for `{}` to style",
4644− name, prefix
4645− ),
4646− Some(_) if kind.is_verbatim() => {
4647− format!("@{} isn't shown, so there is nothing to style", name)
4648− }
4649− Some("span") => format!(
4650− "@{} writes a <span>, as every line of text in a row or column does, so \
4651− `{}` can't pick it out",
4652− name, prefix
4653− ),
4654− Some(tag) => {
4655− let others: Vec<String> = ElementKind::all_names()
4656− .filter(|n| {
4657− *n != name
4658− && ElementKind::from_name(n).and_then(|k| k.tag()) == Some(tag)
4659− })
4660− .map(|n| format!("@{}", n))
4661− .collect();
4662− let others = match others.split_last() {
4663− Some((last, [])) => last.clone(),
4664− Some((last, rest)) => format!("{} and {}", rest.join(", "), last),
4665− None => String::new(),
2015+ } else if base_key == "color" || base_key == "background" {
2016+ // Validate named CSS colors (only if not hex, rgb, hsl, var, etc.)
2017+ if !val.starts_with('#')
2018+ && !val.starts_with("rgb")
2019+ && !val.starts_with("hsl")
2020+ && !val.starts_with("var(")
2021+ && !val.starts_with("linear-gradient")
2022+ && !val.starts_with("radial-gradient")
2023+ && !val.starts_with("conic-gradient")
2024+ && !val.starts_with("oklch")
2025+ && !val.starts_with("oklab")
2026+ && !val.starts_with("color(")
2027+ && !val.starts_with("light-dark(")
2028+ && !val.contains("url(")
2029+ && !val.contains(' ')
2030+ // skip shorthand multi-value
2031+ {
2032+ const NAMED_COLORS: &[&str] = &[
2033+ "transparent",
2034+ "currentcolor",
2035+ "inherit",
2036+ "initial",
2037+ "unset",
2038+ "black",
2039+ "white",
2040+ "red",
2041+ "green",
2042+ "blue",
2043+ "yellow",
2044+ "orange",
2045+ "purple",
2046+ "pink",
2047+ "brown",
2048+ "gray",
2049+ "grey",
2050+ "cyan",
2051+ "magenta",
2052+ "lime",
2053+ "olive",
2054+ "navy",
2055+ "teal",
2056+ "aqua",
2057+ "fuchsia",
2058+ "maroon",
2059+ "silver",
2060+ "coral",
2061+ "salmon",
2062+ "tomato",
2063+ "crimson",
2064+ "firebrick",
2065+ "darkred",
2066+ "indigo",
2067+ "violet",
2068+ "plum",
2069+ "orchid",
2070+ "thistle",
2071+ "lavender",
2072+ "gold",
2073+ "khaki",
2074+ "wheat",
2075+ "tan",
2076+ "sienna",
2077+ "chocolate",
2078+ "peru",
2079+ "beige",
2080+ "ivory",
2081+ "linen",
2082+ "snow",
2083+ "seashell",
2084+ "mintcream",
2085+ "skyblue",
2086+ "steelblue",
2087+ "royalblue",
2088+ "dodgerblue",
2089+ "cornflowerblue",
2090+ "slategray",
2091+ "slategrey",
2092+ "dimgray",
2093+ "dimgrey",
2094+ "lightgray",
2095+ "lightgrey",
2096+ "darkgray",
2097+ "darkgrey",
2098+ "gainsboro",
2099+ "whitesmoke",
2100+ ];
2101+ if !NAMED_COLORS.contains(&val.to_lowercase().as_str()) {
2102+ let lower = val.to_lowercase();
2103+ let suggestion = suggest_closest(&lower, NAMED_COLORS);
2104+ let msg = match suggestion {
2105+ Some(s) => format!("unknown color '{}', did you mean '{}'?", val, s),
2106+ None => format!("unknown color '{}'", val),
46662107 };
4667− format!(
4668− "@{} writes a <{}>, as {} do, so `{}` can't pick it out",
4669− name, tag, others, prefix
4670− )
2108+ ctx.diagnostics.push(Diagnostic {
2109+ line: line_num,
2110+ column: None,
2111+ message: msg,
2112+ severity: Severity::Warning,
2113+ source_line: None,
2114+ });
46712115 }
4672− };
4673− fail(
4674− ctx,
4675− code::INVALID_PREFIX,
4676− format!(
4677− "'{}': {}. Give those elements their styles themselves, or a bundle \
4678− (`@let name [...]`, used as `[$name]`)",
4679− attr.key, reason
4680− ),
4681− prefix,
4682− None,
4683− )
4684− }
4685− Some(_) if elements.len() > 1 => fail(
4686− ctx,
4687− code::INVALID_PREFIX,
4688− format!(
4689− "'{}': a style takes one element prefix, which styles every such element \
4690− inside this one, at any depth",
4691− attr.key
4692− ),
4693− &attr.key,
4694− None,
4695− ),
4696− Some(_) if prefixes.contains(&vocab::CHILDREN) => fail(
4697− ctx,
4698− code::INVALID_PREFIX,
4699− format!(
4700− "'{}': `children:` and `{}` each say which elements the style is for: write \
4701− one of them",
4702− attr.key, prefix
4703− ),
4704− &attr.key,
4705− None,
4706− ),
4707− Some(_) if vocab::is_htmlang_word(base, attr.value.as_deref()) => {
4708− let value = attr.value.as_deref().map(str::trim);
4709− let css = match (base, value) {
4710− ("spacing", _) => " (`gap`)",
4711− ("wrap", _) => " (`flex-wrap wrap`)",
4712− ("grid-cols", _) => " (`grid-template-columns`)",
4713− ("grid-rows", _) => " (`grid-template-rows`)",
4714− ("col-span", _) => " (`grid-column span N`)",
4715− ("row-span", _) => " (`grid-row span N`)",
4716− ("width", Some("fill")) => " (`flex 1` in a row, `width 100%` otherwise)",
4717− ("height", Some("fill")) => " (`flex 1` in a column, `height 100%` otherwise)",
4718− ("width", _) => " (`flex-shrink 0` in a row, `width fit-content` otherwise)",
4719− ("height", _) => " (`flex-shrink 0` in a column, `height fit-content` otherwise)",
4720− ("center-x", _) => " (`margin-inline auto`)",
4721− ("center-y", _) => " (`margin-block auto`)",
4722− _ => "",
4723− };
4724− let word = match value {
4725− Some(v) if matches!(base, "width" | "height") => format!("{} {}", base, v),
4726− _ => base.to_string(),
4727− };
4728− fail(
4729− ctx,
4730− code::INVALID_PREFIX,
4731− format!(
4732− "'{}': `{}` is one of htmlang's layout words, which compile against each \
4733− element's layout and its parent's, and `{}` styles elements whose \
4734− parents it doesn't know: write `{}` on the elements themselves, or the \
4735− CSS you mean{}",
4736− attr.key, word, prefix, word, css
4737− ),
4738− &attr.key,
4739− None,
4740− )
4741− }
4742− Some(_) => true,
4743− }
4744−}
4745−
4746−/// Check an attribute's prefixes: each is known, their selector prefixes
4747−/// read left to right with a pseudo-element (`before:`) last, the argument
4748−/// of `has(...)` or `nth-child(...)` can be written into the CSS, and a word that
4749−/// places an element in its parent (`width fill`, `center-x`, `align-*`)
4750−/// isn't under `children:`, whose styles go on the children. Media,
4751−/// container and width prefixes go anywhere. Returns false, after
4752−/// reporting, when the attribute can't be written.
4753−fn check_prefixes(
4754− attr: &Attribute,
4755− line: usize,
4756− column: Option<usize>,
4757− ctx: &mut ParseContext,
4758−) -> bool {
4759− use crate::vocab;
4760− let (prefixes, base) = vocab::split_prefixes(&attr.key);
4761− let fail =
4762− |ctx: &mut ParseContext, message: String, subject: &str, suggestion: Option<String>| {
4763− let diagnostic = Diagnostic::error(code::INVALID_PREFIX, line, message)
4764− .subject(subject)
4765− .suggest(suggestion);
4766− let diagnostic = at_attribute(diagnostic, column, ctx);
4767− ctx.diagnostics.push(diagnostic);
4768− false
4769− };
4770−
4771− if let Some(problem) = unknown_prefix(base) {
4772− let diagnostic = Diagnostic::error(code::UNKNOWN_PREFIX, line, problem.message)
4773− .subject(problem.subject)
4774− .suggest(problem.suggestion);
4775− let diagnostic = at_attribute(diagnostic, column, ctx);
4776− ctx.diagnostics.push(diagnostic);
4777− return false;
4778− }
4779− if !check_element_prefixes(attr, &prefixes, base, line, column, ctx) {
4780− return false;
4781− }
4782− // The argument of `has(...)` or `nth-child(...)` goes into the CSS as
4783− // written
4784− for prefix in &prefixes {
4785− if let Some(reason) = css_breakout(prefix.trim_end_matches(':')) {
4786− return fail(
4787− ctx,
4788− format!(
4789− "the prefix '{}' has {}: it can't be written into the page's CSS",
4790− prefix, reason
4791− ),
4792− prefix,
4793− None,
4794− );
4795− }
4796− }
4797− // `nth-child():` or `has( ):`: CSS has no pseudo-class with an empty
4798− // argument
4799− let empty_argument = |prefix: &str| {
4800− prefix
4801− .strip_suffix("):")
4802− .and_then(|p| p.split_once('('))
4803− .is_some_and(|(_, argument)| argument.trim().is_empty())
4804− };
4805− if let Some(empty) = prefixes.iter().find(|p| empty_argument(p)) {
4806− return fail(
4807− ctx,
4808− format!(
4809− "'{}': `:{}()` takes an argument between its parentheses, as in CSS",
4810− attr.key,
4811− vocab::pseudo_name(empty)
4812− ),
4813− empty,
4814− None,
4815− );
4816− }
4817− // A pseudo-element is the last selector prefix: CSS has no
4818− // `::before:hover`
4819− let selectors: Vec<&str> = prefixes
4820− .iter()
4821− .copied()
4822− .filter(|p| vocab::at_rule_rank(p).is_none())
4823− .collect();
4824− // Only one: an element has one `::before`, which has no `::after`
4825− let elements: Vec<&str> = selectors
4826− .iter()
4827− .copied()
4828− .filter(|p| vocab::is_pseudo_element(p))
4829− .collect();
4830− if elements.len() > 1 {
4831− return fail(
4832− ctx,
4833− format!(
4834− "'{}': `{}` and `{}` each select a pseudo-element, and a style applies to one \
4835− of them",
4836− attr.key, elements[0], elements[1]
4837− ),
4838− &attr.key,
4839− None,
4840− );
4841− }
4842− if let Some(at) = selectors.iter().position(|p| vocab::is_pseudo_element(p))
4843− && at + 1 < selectors.len()
4844− {
4845− let element = selectors[at];
4846− // The same prefixes, with the pseudo-element moved after the other
4847− // selector prefixes
4848− let mut order: Vec<&str> = prefixes.iter().copied().filter(|p| *p != element).collect();
4849− let last_selector = order
4850− .iter()
4851− .rposition(|p| vocab::at_rule_rank(p).is_none())
4852− .map_or(order.len(), |i| i + 1);
4853− order.insert(last_selector, element);
4854− let fixed = format!("{}{}", order.concat(), base);
4855− return fail(
4856− ctx,
4857− format!(
4858− "'{}': `{}` selects a pseudo-element, which comes after the other selector \
4859− prefixes, as in CSS: write `{}`",
4860− attr.key, element, fixed
4861− ),
4862− &attr.key,
4863− Some(fixed),
4864− );
4865− }
4866− // Under `children:` the styles go on the children, whose parent is this
4867− // element: a word that places an element in its parent can't say where
4868− if prefixes.contains(&"children:") && vocab::places_in_parent(base, attr.value.as_deref()) {
4869− // The CSS of `fill` and `shrink` depends on the direction: along
4870− // it, they are flex properties
4871− let (word, css) = match (base, attr.value.as_deref().map(str::trim)) {
4872− ("width", Some("fill")) => (
4873− "width fill",
4874− " (`children:flex 1` in a row, `children:width 100%` otherwise)",
4875− ),
4876− ("height", Some("fill")) => (
4877− "height fill",
4878− " (`children:flex 1` in a column, `children:height 100%` otherwise)",
4879− ),
4880− ("width", Some(_)) => (
4881− "width shrink",
4882− " (`children:flex-shrink 0` in a row, `children:width fit-content` otherwise)",
4883− ),
4884− ("height", Some(_)) => (
4885− "height shrink",
4886− " (`children:flex-shrink 0` in a column, `children:height fit-content` \
4887− otherwise)",
4888− ),
4889− _ => (base, ""),
4890− };
4891− return fail(
4892− ctx,
4893− format!(
4894− "'{}{}': `{}` places an element in its parent, and under `children:` that \
4895− parent is this element: write `{}` on the children themselves, or the CSS \
4896− you mean{}",
4897− attr.key,
4898− attr.value
4899− .as_deref()
4900− .map_or(String::new(), |v| format!(" {}", v.trim())),
4901− word,
4902− word,
4903− css
4904− ),
4905− &attr.key,
4906− None,
4907− );
4908− }
4909− true
4910−}
4911−
4912−/// Check an attribute written as a style or a flag (not `key=value`): its
4913−/// prefix, its name, and, for a style, its value. A name htmlang doesn't
4914−/// know but CSS could have (`corner-shape`) is passed to the CSS as written,
4915−/// with a warning; custom properties (`--brand`) and vendor-prefixed ones
4916−/// (`-webkit-...`) without one. Anything that can't be written into the
4917−/// page is an error; returns false then, and the attribute is left out.
4918−fn check_attribute(
4919− attr: &Attribute,
4920− line: usize,
4921− column: Option<usize>,
4922− before: Option<&Attribute>,
4923− ctx: &mut ParseContext,
4924−) -> bool {
4925− use crate::vocab;
4926− let (prefixes, base) = vocab::split_prefixes(&attr.key);
4927− let fail = |ctx: &mut ParseContext, code: &'static str, message: String, subject: &str| {
4928− let diagnostic = Diagnostic::error(code, line, message).subject(subject);
4929− let diagnostic = at_attribute(diagnostic, column, ctx);
4930− ctx.diagnostics.push(diagnostic);
4931− false
4932− };
4933−
4934− if !check_prefixes(attr, line, column, ctx) {
4935− return false;
4936− }
4937− let prefixed = !prefixes.is_empty();
4938− // `md:id=x`: `=` makes an HTML attribute, which has no states
4939− if prefixed && let Some((name, _)) = base.split_once('=') {
4940− return fail(
4941− ctx,
4942− code::INVALID_PREFIX,
4943− format!(
4944− "'{}': a prefix applies to a style, and `{}=` is an HTML attribute",
4945− attr.key, name
4946− ),
4947− &attr.key,
4948− );
4949− }
4950− let Some(value) = &attr.value else {
4951− // `inline` puts a file into the page as it compiles, which no
4952− // state or media condition can undo
4953− if base == "inline" && prefixed {
4954− return fail(
4955− ctx,
4956− code::INVALID_PREFIX,
4957− format!(
4958− "'{}': `inline` puts the image's file into the page, which can't depend \
4959− on a prefix",
4960− attr.key
4961− ),
4962− &attr.key,
4963− );
4964− }
4965− if vocab::HTMLANG_FLAGS.contains(&base) {
4966− return true;
4967− }
4968− if vocab::is_html_flag(base) {
4969− if !prefixed {
4970− return true;
4971− }
4972− return fail(
4973− ctx,
4974− code::INVALID_PREFIX,
4975− format!(
4976− "'{}': a prefix applies to a style, and '{}' is an HTML attribute",
4977− attr.key, base
4978− ),
4979− &attr.key,
4980− );
4981− }
4982− if vocab::is_style_attribute(base)
4983− || vocab::is_custom_property(base)
4984− || vocab::is_vendor_property(base)
4985− {
4986− return fail(
4987− ctx,
4988− code::MISSING_VALUE,
4989− format!("'{}' needs a value: `{} VALUE`", attr.key, attr.key),
4990− &attr.key,
4991− );
4992− }
4993− if vocab::is_html_attribute(base) && !prefixed {
4994− return fail(
4995− ctx,
4996− code::HTML_ATTRIBUTE_FORM,
4997− format!(
4998− "'{}' is an HTML attribute that isn't a flag: write `{}=VALUE`",
4999− base, base
5000− ),
5001− base,
5002− );
5003− }
5004− return unknown_attribute(attr, base, line, column, before, true, ctx);
5005− };
5006−
5007− if vocab::HTMLANG_FLAGS.contains(&base) {
5008− return fail(
5009− ctx,
5010− code::INVALID_VALUE,
5011− format!(
5012− "'{}' is a flag and takes no value: write `{}` alone",
5013− base, attr.key
5014− ),
5015− &attr.key,
5016− );
5017− }
5018− if vocab::is_style_attribute(base)
5019− || vocab::is_custom_property(base)
5020− || vocab::is_vendor_property(base)
5021− {
5022− return check_css_value(attr, base, line, column, ctx);
5023− }
5024− if vocab::is_html_attribute(base) && !prefixed {
5025− let diagnostic = Diagnostic::error(
5026− code::HTML_ATTRIBUTE_FORM,
5027− line,
5028− format!(
5029− "'{}' is an HTML attribute: write `{}={}`",
5030− attr.key, attr.key, value
5031− ),
5032− )
5033− .subject(attr.key.as_str());
5034− let diagnostic = at_attribute(diagnostic, column, ctx);
5035− ctx.diagnostics.push(diagnostic);
5036− return false;
5037− }
5038− let passes = vocab::is_property_name(base);
5039− unknown_attribute(attr, base, line, column, before, !passes, ctx)
5040− && check_css_value(attr, base, line, column, ctx)
5041−}
5042−
5043−/// Whether an attribute of a bundle could pass a parameter to a function
5044−/// it is spliced into (`@let t [title Hello]`): a name without a prefix
5045−/// that isn't a style or a flag. Such a name is checked where the bundle is
5046−/// used.
5047−fn could_be_parameter(attr: &Attribute) -> bool {
5048− use crate::vocab;
5049− let key = attr.key.as_str();
5050− let flag =
5051− attr.value.is_none() && (vocab::HTMLANG_FLAGS.contains(&key) || vocab::is_html_flag(key));
5052− !attr.html
5053− && !flag
5054− && !vocab::is_style_attribute(key)
5055− && key.starts_with(|c: char| c.is_alphabetic())
5056− && key
5057− .chars()
5058− .all(|c| c.is_alphanumeric() || matches!(c, '-' | '_'))
5059−}
5060−
5061−/// At a call, a name close to one of the function's parameters is a
5062−/// misspelled parameter, not an attribute for its root: report it, and
5063−/// return true (it is left out).
5064−fn misspelled_parameter(
5065− attr: &Attribute,
5066− text_keys: &[String],
5067− line: usize,
5068− column: Option<usize>,
5069− ctx: &mut ParseContext,
5070−) -> bool {
5071− if text_keys.is_empty() || !could_be_parameter(attr) {
5072− return false;
5073− }
5074− let params: Vec<&str> = text_keys.iter().map(String::as_str).collect();
5075− let Some(closest) = suggest_closest(&attr.key, &params) else {
5076− return false;
5077− };
5078− let what = if ctx.in_page {
5079− "@page word"
5080− } else {
5081− "parameter"
5082− };
5083− let diagnostic = Diagnostic::error(
5084− code::UNKNOWN_ATTRIBUTE,
5085− line,
5086− format!(
5087− "unknown {} '{}', did you mean '{}'?",
5088− what, attr.key, closest
5089− ),
5090− )
5091− .subject(attr.key.as_str())
5092− .suggest(Some(closest));
5093− let diagnostic = at_attribute(diagnostic, column, ctx);
5094− ctx.diagnostics.push(diagnostic);
5095− true
5096−}
5097−
5098−/// An attribute name htmlang doesn't know. A style whose name CSS could
5099−/// have goes to the CSS as written, with a warning; anything else (a flag,
5100−/// a name that isn't a word) is an error. Returns whether it is kept.
5101−fn unknown_attribute(
5102− attr: &Attribute,
5103− base: &str,
5104− line: usize,
5105− column: Option<usize>,
5106− before: Option<&Attribute>,
5107− error: bool,
5108− ctx: &mut ParseContext,
5109−) -> bool {
5110− // `@td padding 8`: an element prefix without its colon
5111− if let Some(name) = base.strip_prefix('@')
5112− && crate::ast::ElementKind::from_name(name).is_some()
5113− {
5114− let example = match attr.value.as_deref() {
5115− Some(value) => format!("{}:{}", attr.key, value.trim()),
5116− None => format!("{}:padding 8", attr.key),
5117− };
5118− let diagnostic = Diagnostic::error(
5119− code::UNKNOWN_ATTRIBUTE,
5120− line,
5121− format!(
5122− "unknown attribute '{}': an element prefix ends in a colon, as in `{}`",
5123− attr.key, example
5124− ),
5125− )
5126− .subject(base);
5127− let diagnostic = at_attribute(diagnostic, column, ctx);
5128− ctx.diagnostics.push(diagnostic);
5129− return false;
5130− }
5131− // `[card]` where `card` is a bundle: it is used as `$card`
5132− if attr.value.is_none() && ctx.env.bundle(base).is_some() && base == attr.key {
5133− ctx.used_defines.insert(base.to_string());
5134− let diagnostic = Diagnostic::error(
5135− code::UNKNOWN_ATTRIBUTE,
5136− line,
5137− format!(
5138− "unknown attribute '{}': '{}' is an attribute bundle, used as `${}`",
5139− base, base, base
5140− ),
5141− )
5142− .subject(base)
5143− .suggest(Some(format!("${}", base)));
5144− let diagnostic = at_attribute(diagnostic, column, ctx);
5145− ctx.diagnostics.push(diagnostic);
5146− return false;
5147− }
5148− // `hover:title x`: an HTML attribute's name is not a suggestion for
5149− // itself
5150− let suggestion =
5151− suggest_closest(base, &crate::vocab::all_attributes()).filter(|&closest| closest != base);
5152− // `hx-trigger=load, every 2s`: right after a `key=value`, a name that
5153− // isn't close to one htmlang knows is the rest of that value, which
5154− // the comma ended. It is left out.
5155− let cut = before.filter(|b| b.html && b.value.is_some());
5156− let rest = match &attr.value {
5157− Some(value) => format!("{} {}", attr.key, value),
5158− None => attr.key.clone(),
5159− };
5160− let joined = cut.map(|cut| {
5161− let value = cut.value.as_deref().unwrap_or("");
5162− (
5163− format!("{}={}", cut.key, value),
5164− format!("{}={}\\, {}", cut.key, value, rest),
5165− )
5166− });
5167− if let (Some((cut, joined)), None) = (&joined, suggestion) {
5168− let diagnostic = Diagnostic::error(
5169− code::SPLIT_VALUE,
5170− line,
5171− format!(
5172− "unknown attribute '{}' after `{}`: if '{}' is the rest of its value, the comma \
5173− ended it. To keep a comma in a value, write `\\,`: `{}`",
5174− base, cut, rest, joined
5175− ),
5176− )
5177− .subject(base);
5178− let diagnostic = at_attribute(diagnostic, column, ctx);
5179− ctx.diagnostics.push(diagnostic);
5180− return false;
5181− }
5182− let mut message = match (&suggestion, error) {
5183− (Some(closest), true) => {
5184− format!(
5185− "unknown attribute '{}', did you mean '{}'?",
5186− attr.key, closest
5187− )
5188− }
5189− (None, true) => format!("unknown attribute '{}'", attr.key),
5190− (Some(closest), false) => format!(
5191− "unknown CSS property '{}', did you mean '{}'? It is written to the CSS as it is",
5192− base, closest
5193− ),
5194− (None, false) => format!(
5195− "unknown CSS property '{}': it is written to the CSS as it is",
5196− base
5197− ),
5198− };
5199− // `box-shadow 0 1px red, 0 2px blue` or `font-family Inter,
5200− // sans-serif`: the comma ended the attribute, and the rest of the
5201− // value became one
5202− let rest_of_a_value = !base.starts_with(|c: char| c.is_ascii_alphabetic() || c == '-')
5203− || (suggestion.is_none() && attr.value.is_none() && before.is_some());
5204− if joined.is_some() || (rest_of_a_value && error) {
5205− if !message.ends_with('?') {
5206− message.push('.');
5207− }
5208− match &joined {
5209− Some((cut, joined)) => message.push_str(&format!(
5210− " If it is the rest of `{}`, the comma ended it: write `{}`",
5211− cut, joined
5212− )),
5213− None => message
5214− .push_str(" A comma separates attributes: to keep one in a value, write `\\,`"),
2116+ }
52152117 }
52162118 }
5217− let severity = if error {
5218− Severity::Error
5219− } else {
5220− Severity::Warning
5221− };
5222− let diagnostic = Diagnostic::new(code::UNKNOWN_ATTRIBUTE, severity, line, message)
5223− .subject(base)
5224− .suggest(suggestion);
5225− let diagnostic = at_attribute(diagnostic, column, ctx);
5226− ctx.diagnostics.push(diagnostic);
5227− !error
52282119}
52292120
5230−/// Evaluate the attributes of a list: bundles are spliced in, `if()`
5231−/// chooses, and variables fill values. A variable fills only the value it
5232−/// is written in: attributes come from bundles, never from text. With
5233−/// `validate`, unknown names and invalid values are reported. `text_keys`
5234−/// are a called function's parameters: their values are text rather than
5235−/// CSS, and they aren't checked as attributes.
5236−fn parse_attr_list(
5237− tokens: &[syntax::Attr],
2121+fn parse_attr_brackets(
2122+ input: &str,
52382123 line_num: usize,
52392124 ctx: &mut ParseContext,
5240− validate: bool,
5241− text_keys: &[String],
5242−) -> Vec<Attribute> {
5243− parse_attrs(tokens, line_num, ctx, validate, text_keys)
5244− .into_iter()
5245− .map(|(attr, _)| attr)
5246− .collect()
2125+) -> Result<(Vec<Attribute>, String), ParseError> {
2126+ parse_attr_brackets_inner(input, line_num, ctx, true)
2127+}
2128+
2129+fn parse_attr_brackets_no_validate(
2130+ input: &str,
2131+ line_num: usize,
2132+ ctx: &mut ParseContext,
2133+) -> Result<(Vec<Attribute>, String), ParseError> {
2134+ parse_attr_brackets_inner(input, line_num, ctx, false)
52472135}
52482136
5249−/// [`parse_attr_list`], with the value of each attribute whose key is one
5250−/// of `text_keys` (a call's parameters) as a value with its type (see
5251−/// [`ParseContext::slot_value`]), so a parameter can get a list or a
5252−/// record.
5253−fn parse_attrs(
5254− tokens: &[syntax::Attr],
2137+fn parse_attr_brackets_inner(
2138+ input: &str,
52552139 line_num: usize,
52562140 ctx: &mut ParseContext,
52572141 validate: bool,
5258− text_keys: &[String],
5259−) -> Vec<(Attribute, Option<Value>)> {
5260− let mut read = ReadAttrs::default();
5261− read_attrs(tokens, "", line_num, ctx, validate, text_keys, &mut read);
5262− read.attrs
2142+) -> Result<(Vec<Attribute>, String), ParseError> {
2143+ let mut depth = 0;
2144+ let mut end_pos = 0;
2145+
2146+ for (i, c) in input.char_indices() {
2147+ match c {
2148+ '[' => depth += 1,
2149+ ']' => {
2150+ depth -= 1;
2151+ if depth == 0 {
2152+ end_pos = i;
2153+ break;
2154+ }
2155+ }
2156+ _ => {}
2157+ }
2158+ }
2159+
2160+ if depth != 0 {
2161+ return Err(ParseError {
2162+ line: line_num,
2163+ message: "unclosed '[' in attribute list".to_string(),
2164+ });
2165+ }
2166+
2167+ let attrs_inner = &input[1..end_pos];
2168+ let remaining = input[end_pos + 1..].trim().to_string();
2169+ let attrs = parse_attr_list(attrs_inner, line_num, ctx, validate);
2170+
2171+ Ok((attrs, remaining))
52632172}
52642173
5265−/// The attributes of a list read so far, and the keys written (for the
5266−/// duplicate check).
5267−#[derive(Default)]
5268−struct ReadAttrs {
5269− attrs: Vec<(Attribute, Option<Value>)>,
5270− seen_keys: Vec<(String, bool)>,
2174+fn is_valid_hex_color(s: &str) -> bool {
2175+ if !s.starts_with('#') {
2176+ return true; // Not a hex color, skip
2177+ }
2178+ let hex = &s[1..];
2179+ matches!(hex.len(), 3 | 4 | 6 | 8) && hex.chars().all(|c| c.is_ascii_hexdigit())
52712180}
52722181
5273−/// [`parse_attrs`] for the attributes of `tokens`, each under the prefixes
5274−/// `prefix` (`md:` for those of `md:[...]`), which distribute over a
5275−/// group, a bundle and the branch an `if()` takes. Only styles take a
5276−/// prefix, so an HTML attribute there is an error.
5277−fn read_attrs(
5278− tokens: &[syntax::Attr],
5279− prefix: &str,
2182+fn parse_attr_list(
2183+ input: &str,
52802184 line_num: usize,
52812185 ctx: &mut ParseContext,
52822186 validate: bool,
5283− text_keys: &[String],
5284− out: &mut ReadAttrs,
5285−) {
5286− let mut chosen = Vec::new();
5287− choose_attrs(
5288− tokens,
5289− prefix,
5290− line_num,
5291− ctx,
5292− validate,
5293− text_keys,
5294− &mut chosen,
5295− );
5296−
5297− for token in &chosen {
5298− let line = if token.span.line == 0 {
5299− line_num
5300− } else {
5301− token.span.line
2187+) -> Vec<Attribute> {
2188+ let mut attrs = Vec::new();
2189+ let mut seen_keys: Vec<String> = Vec::new();
2190+
2191+ for part in split_commas(input) {
2192+ let part = part.trim();
2193+ // A whole attribute `if(cond, a, b)` is the chosen branch's text.
2194+ let chosen;
2195+ let part = match choose_if(part, ctx, line_num) {
2196+ Some(branch) => {
2197+ chosen = branch;
2198+ chosen.as_str()
2199+ }
2200+ None => part,
53022201 };
5303− let (key, value, html) = (token.key.clone(), token.value.clone(), token.html);
5304− let column = |at: usize| Some(token.span.column + at);
5305−
5306− // `md:[...]`, `md:$card`, `md:if(...)`: the prefixes apply to each
5307− // attribute there, and a prefix a parameter can't have
5308− if let Some(prefixed) = &token.prefixed {
5309− if let Some(inner) = group_prefix(token, prefixed, prefix, line, ctx) {
5310− read_attrs(
5311− prefixed.target.attrs(),
5312− &inner,
5313− line_num,
5314− ctx,
5315− validate,
5316− text_keys,
5317− out,
5318− );
5319− }
2202+ if part.is_empty() {
53202203 continue;
53212204 }
53222205
5323− // `$name` (or `${name}`) alone: an attribute bundle, spliced in
5324− let bundle = key.strip_prefix('$').filter(|_| value.is_none() && !html);
5325− let bundle = bundle.and_then(|after| match interp::reference(after, &ctx.env)? {
5326− (interp::Reference::Var(name), len) if len == after.len() => Some(name),
5327− _ => None,
5328− });
5329− if let Some(name) = bundle {
5330− if let Some(define_attrs) = ctx.env.bundle(&name).cloned() {
5331− ctx.used_defines.insert(name.clone());
5332− for attr in define_attrs.iter() {
5333− if !prefix.is_empty() {
5334− let prefixed = Attribute {
5335− key: format!("{}{}", prefix, attr.key),
5336− ..attr.clone()
5337− };
5338− if prefixed_parameter(&prefixed, text_keys, line, column(0), validate, ctx)
5339− {
5340− continue;
5341− }
5342− if let Some(attr) =
5343− prefixed_member(attr, prefix, &name, line, column(0), validate, ctx)
5344− {
5345− out.attrs.push((attr, None));
5346− }
5347− continue;
5348− }
5349− let attrs = &out.attrs;
5350− // Checked here, where it is either a parameter or not
5351− let checked_here = validate
5352− && !ctx.in_bundle
5353− && could_be_parameter(attr)
5354− && !text_keys.contains(&attr.key);
5355− if checked_here
5356− && (misspelled_parameter(attr, text_keys, line, column(0), ctx)
5357− || !check_attribute(
5358− attr,
5359− line,
5360− column(0),
5361− attrs.last().map(|(a, _)| a),
5362− ctx,
5363− ))
5364− {
5365− continue;
5366− }
5367− out.attrs.push((attr.clone(), None));
5368− }
5369− } else {
5370− not_a_bundle(&name, line, column(0), ctx);
5371− }
5372− continue;
5373− }
5374− // A name never comes from a variable
5375− if key.contains('$') {
5376− track_var_refs(&key, &mut ctx.used_variables);
5377− ctx.diagnostics.push(
5378− Diagnostic::error(
5379− code::ATTRIBUTE_FROM_VARIABLE,
5380− line,
5381− format!(
5382− "'{}': an attribute's name can't come from a variable. A variable \
5383− fills a value (`padding $size`), and whole attributes come from a \
5384− bundle (`@let name [padding 8]`, used as `[$name]`)",
5385− key
5386− ),
5387− )
5388− .subject(key.as_str()),
5389− );
2206+ // $define reference — expand attribute bundle
2207+ if let Some(name) = part.strip_prefix('$')
2208+ && let Some(define_attrs) = ctx.defines.get(name)
2209+ {
2210+ ctx.used_defines.insert(name.to_string());
2211+ attrs.extend(define_attrs.clone());
53902212 continue;
53912213 }
53922214
5393− // Only a style has states: `md:[id=x]`, `md:id=x`
5394− if html && (!prefix.is_empty() || !crate::vocab::split_prefixes(&key).0.is_empty()) {
5395− let written = format!("{}{}", prefix, key);
5396− let (name, _) = crate::vocab::split_prefixes(&written);
5397− let diagnostic = Diagnostic::error(
5398− code::INVALID_PREFIX,
5399− line,
5400− format!(
5401− "'{}=': a prefix applies to a style, and `{}=` is an HTML attribute, \
5402− which has no states",
5403− written,
5404− &written[name.concat().len()..]
2215+ track_var_refs(part, &mut ctx.used_variables);
2216+
2217+ if let Some((attr, condition)) = split_trailing_if(part) {
2218+ ctx.diagnostics.push(Diagnostic {
2219+ line: line_num,
2220+ column: None,
2221+ message: format!(
2222+ "`KEY if CONDITION` was removed: write `if({}, {})`",
2223+ condition, attr
54052224 ),
5406− )
5407− .subject(token.key.as_str());
5408− let diagnostic = at_attribute(diagnostic, column(0), ctx);
5409− ctx.diagnostics.push(diagnostic);
2225+ severity: Severity::Error,
2226+ source_line: None,
2227+ });
54102228 continue;
54112229 }
5412− let key = if prefix.is_empty() {
5413− key
5414− } else {
5415− format!("{}{}", prefix, key)
2230+ // A value `if(cond, a, b)` picks `a` or `b` (free text) by `cond`;
2231+ // an empty choice leaves the attribute out.
2232+ let Some(part) = choose_if_value(part, ctx, line_num) else {
2233+ continue;
54162234 };
2235+ let part = substitute_vars(&part, &ctx.variables);
54172236
5418− // A value's variables are filled in. A style's value is CSS, where
5419− // quoted text keeps its quotes; an HTML attribute's (and a
5420− // parameter's) is text, where it loses them.
5421− let sink = if html || text_keys.contains(&key) {
5422− Sink::Text
5423− } else {
5424− Sink::Css
5425− };
5426− let mut filled = true;
5427− let mut quoted = None;
5428− let mut typed = None;
5429− let value = match value {
5430− None => None,
5431− // A parameter's value keeps its type
5432− Some(value) if !html && text_keys.contains(&key) => {
5433− let at = column(token.raw.len() - value.len());
5434− let (value, ok) = ctx.slot_value(&value, line, at);
5435− filled = ok;
5436− if let Value::Quoted(q) = &value {
5437− quoted = Some(q.clone());
5438− }
5439− let text = value.to_string();
5440− typed = Some(value);
5441− Some(text)
2237+ let attr = if let Some((key, value)) = split_html_attribute(&part) {
2238+ Attribute {
2239+ key: key.to_string(),
2240+ value: Some(value.to_string()),
2241+ html: true,
54422242 }
5443− Some(value) => {
5444− let at = column(token.raw.len() - value.len());
5445− let (text, is_quoted, ok) = ctx.fill_value(&value, line, at, sink);
5446− filled = ok;
5447− quoted = is_quoted;
5448− Some(text)
2243+ } else if let Some((key, value)) = part.split_once(' ') {
2244+ let value = value.trim().to_string();
2245+ Attribute {
2246+ key: key.trim().to_string(),
2247+ value: Some(value),
2248+ html: false,
2249+ }
2250+ } else {
2251+ Attribute {
2252+ key: part.to_string(),
2253+ value: None,
2254+ html: false,
54492255 }
54502256 };
5451− let attr = Attribute {
5452− key,
5453− value,
5454− html,
5455− quoted,
5456− };
5457− // A value that couldn't be filled in is already reported, and a
5458− // parameter's value is text for the function
5459− let validate = validate && filled && !text_keys.contains(&attr.key);
54602257
5461− // A duplicate is reported (compare the full key, so `border` and
5462− // `hover:border` differ, and the form, so `width=800` and
5463− // `width 200` do too), and the later one wins
2258+ // Warn on duplicate attributes (compare full key so pseudo-class
2259+ // variants like `border` and `hover:border` are not conflated)
54642260 if validate {
5465− let seen = (normal_key(&attr.key), attr.html);
5466− if out.seen_keys.contains(&seen) {
5467− let written = if attr.html { "=" } else { "" };
5468− let message = format!(
5469− "duplicate attribute '{}{}': the later one wins",
5470− attr.key, written
5471− );
5472− let diagnostic = Diagnostic::warning(code::DUPLICATE_ATTRIBUTE, line, message)
5473− .subject(attr.key.as_str());
5474− let diagnostic = at_attribute(diagnostic, column(0), ctx);
5475− ctx.diagnostics.push(diagnostic);
2261+ if seen_keys.contains(&attr.key) {
2262+ ctx.diagnostics.push(Diagnostic {
2263+ line: line_num,
2264+ column: None,
2265+ message: format!("duplicate attribute '{}'", attr.key),
2266+ severity: Severity::Warning,
2267+ source_line: None,
2268+ });
54762269 } else {
5477− out.seen_keys.push(seen);
2270+ seen_keys.push(attr.key.clone());
54782271 }
5479− }
54802272
5481− if validate && misspelled_parameter(&attr, text_keys, line, column(0), ctx) {
5482− continue;
5483− }
5484− if prefixed_parameter(&attr, text_keys, line, column(0), validate, ctx) {
5485− continue;
5486− }
5487− if validate && attr.html && attr.key == "class" {
5488− reserved_class(&attr, line, column(0), ctx);
5489− }
5490− // `padding=4`: a style written as an HTML attribute, which the
5491− // browser ignores (`width=` and `height=` are real on some
5492− // elements, see `validate_tree`)
5493− if validate
5494− && attr.html
5495− && crate::vocab::is_style_attribute(&attr.key)
5496− && !crate::vocab::HTML_ATTRIBUTES.contains(&attr.key.as_str())
5497− {
5498− let value = token.value.as_deref().unwrap_or("").trim();
5499− let diagnostic = Diagnostic::warning(
5500− code::HTML_ATTRIBUTE_FORM,
5501− line,
5502− format!(
5503− "'{0}={1}' is an HTML attribute, but {0} is a style: write `{0} {1}`",
5504− attr.key, value
5505− ),
5506− )
5507− .subject(token.raw.as_str())
5508− .suggest(Some(format!("{} {}", attr.key, value)));
5509− let diagnostic = at_attribute(diagnostic, column(0), ctx);
5510− ctx.diagnostics.push(diagnostic);
2273+ // Color validation for hex colors
2274+ if !attr.html
2275+ && matches!(crate::vocab::base_attribute(&attr.key), "background" | "color")
2276+ && let Some(ref val) = attr.value
2277+ && val.starts_with('#')
2278+ && !is_valid_hex_color(val)
2279+ {
2280+ ctx.diagnostics.push(Diagnostic {
2281+ line: line_num,
2282+ column: None,
2283+ message: format!("invalid hex color '{}'", val),
2284+ severity: Severity::Warning,
2285+ source_line: None,
2286+ });
2287+ }
55112288 }
55122289
5513− // A style or a flag: its name is checked, and what can't be
5514− // written into the page is an error and left out
5515− let checked = validate && !attr.html && !(ctx.in_bundle && could_be_parameter(&attr));
5516− let before = out.attrs.last().map(|(a, _)| a);
5517− if checked && !check_attribute(&attr, line, column(0), before, ctx) {
5518− continue;
2290+ // Warn on unknown attributes. `key=value` HTML attributes may use any
2291+ // name; everything else must be a known style.
2292+ if validate && !attr.html {
2293+ let base_key = crate::vocab::base_attribute(attr.key.as_str());
2294+ let is_boolean_html =
2295+ attr.value.is_none() && crate::vocab::BOOLEAN_HTML_ATTRS.contains(&base_key);
2296+ // A removed attribute that shares its name with a CSS property
2297+ // (bare `grid`) still gets its hint.
2298+ let removed = removed_attribute_hint(base_key)
2299+ .filter(|_| attr.value.is_none() || !crate::vocab::is_css_property(base_key));
2300+ if let Some(hint) = removed {
2301+ ctx.diagnostics.push(Diagnostic {
2302+ line: line_num,
2303+ column: None,
2304+ message: format!(
2305+ "attribute '{}' was removed: {} (run `htmlang upgrade`)",
2306+ base_key, hint
2307+ ),
2308+ severity: Severity::Warning,
2309+ source_line: None,
2310+ });
2311+ } else if is_boolean_html || crate::vocab::is_style_attribute(base_key) {
2312+ validate_attr_value(&attr, line_num, ctx);
2313+ } else if crate::vocab::HTML_ATTRIBUTES.contains(&base_key)
2314+ || base_key.starts_with("aria-")
2315+ || base_key.starts_with("data-")
2316+ {
2317+ ctx.diagnostics.push(Diagnostic {
2318+ line: line_num,
2319+ column: None,
2320+ message: format!(
2321+ "'{}' is an HTML attribute: write `{}={}` (run `htmlang upgrade`)",
2322+ attr.key,
2323+ attr.key,
2324+ attr.value.as_deref().unwrap_or("")
2325+ ),
2326+ severity: Severity::Warning,
2327+ source_line: None,
2328+ });
2329+ } else {
2330+ let suggestion = suggest_closest(base_key, &crate::vocab::all_attributes());
2331+ let msg = match suggestion {
2332+ Some(closest) => {
2333+ format!(
2334+ "unknown attribute '{}', did you mean '{}'?",
2335+ attr.key, closest
2336+ )
2337+ }
2338+ None => format!("unknown attribute '{}'", attr.key),
2339+ };
2340+ ctx.diagnostics.push(Diagnostic {
2341+ line: line_num,
2342+ column: None,
2343+ message: msg,
2344+ severity: Severity::Warning,
2345+ source_line: None,
2346+ });
2347+ }
55192348 }
55202349
5521− out.attrs.push((attr, typed));
2350+ attrs.push(attr);
55222351 }
2352+
2353+ attrs
55232354}
55242355
5525−/// At a call, a parameter under prefixes (`md:title x`, `md:[title x]`):
5526−/// a parameter has one value, with no states, so it is reported (with
5527−/// `validate`) and left out; returns true then. A parameter named like a
5528−/// style (`color`) is a style under a prefix, for the root element.
5529−fn prefixed_parameter(
5530− attr: &Attribute,
5531− text_keys: &[String],
5532− line: usize,
5533− column: Option<usize>,
5534− validate: bool,
5535− ctx: &mut ParseContext,
5536−) -> bool {
5537− let (prefixes, name) = crate::vocab::split_prefixes(&attr.key);
5538− if attr.html
5539− || prefixes.is_empty()
5540− || !text_keys.iter().any(|k| k == name)
5541− || crate::vocab::is_style_attribute(name)
5542− {
5543− return false;
5544− }
5545− if validate {
5546− let what = if ctx.in_page {
5547− "@page's own word"
5548− } else {
5549− "a parameter"
5550− };
5551− let diagnostic = Diagnostic::error(
5552− code::INVALID_PREFIX,
5553− line,
5554− format!(
5555− "'{}': `{}` is {}, which has one value, and a prefix applies to a style, \
5556− which has states",
5557− attr.key, name, what
5558− ),
5559− )
5560− .subject(attr.key.as_str());
5561− let diagnostic = at_attribute(diagnostic, column, ctx);
5562− ctx.diagnostics.push(diagnostic);
5563− }
5564− true
2356+/// Split an HTML attribute written `key=value` (`alt=`, `type=email`,
2357+/// `aria-label=Close menu`). Returns `None` for style attributes.
2358+fn split_html_attribute(part: &str) -> Option<(&str, &str)> {
2359+ let first_token = part.split(char::is_whitespace).next()?;
2360+ let eq = first_token.find('=')?;
2361+ let key = &part[..eq];
2362+ let valid_key = key.starts_with(|c: char| c.is_ascii_alphabetic())
2363+ && key
2364+ .chars()
2365+ .all(|c| c.is_ascii_alphanumeric() || matches!(c, '-' | '_' | '.'));
2366+ valid_key.then(|| (key, part[eq + 1..].trim()))
55652367}
55662368
5567−/// The prefixes of a prefixed group, bundle or `if()` inside `outer` (the
5568−/// prefixes of the groups it is in), when they are all known; else the
5569−/// unknown one is reported. Text after a group's `]` is an error too.
5570−fn group_prefix(
5571− token: &syntax::Attr,
5572− prefixed: &syntax::Prefixed,
5573− outer: &str,
5574− line: usize,
5575− ctx: &mut ParseContext,
5576−) -> Option<String> {
5577− let at = |ctx: &ParseContext, diagnostic: Diagnostic, span: syntax::Span| match &ctx
5578− .current_source
5579− {
5580− (current, Some(text)) if span.line != 0 && *current == span.line => {
5581− diagnostic.column(span.column).source(text.clone())
5582− }
5583− _ => diagnostic,
5584− };
5585− if let syntax::Branch::Group {
5586− trailing: Some(trailing),
5587− ..
5588− } = &prefixed.target
5589− {
5590− let diagnostic = Diagnostic::error(
5591− code::UNEXPECTED_ARGUMENT,
5592− line,
5593− format!(
5594− "'{}' after the `]` of `{}[...]`: the prefixes apply to the attributes in the \
5595− group, so it goes inside it",
5596− trailing.raw, prefixed.prefix
5597− ),
5598− )
5599− .subject(trailing.raw.as_str());
5600− let diagnostic = at(ctx, diagnostic, trailing.span);
5601− ctx.push_once(diagnostic);
5602− }
5603− let (known, rest) = crate::vocab::split_prefixes(&prefixed.prefix);
5604− if !rest.is_empty() {
5605− let problem = unknown_prefix(rest).unwrap_or_else(|| {
5606− let written = rest.split_inclusive(':').next().unwrap_or(rest);
5607− PrefixProblem {
5608− message: format!("unknown prefix '{}'", written),
5609− subject: written.to_string(),
5610− suggestion: None,
2369+fn split_commas(input: &str) -> Vec<&str> {
2370+ let mut parts = Vec::new();
2371+ let mut start = 0;
2372+ let mut depth = 0;
2373+ let mut in_quotes = false;
2374+
2375+ for (i, c) in input.char_indices() {
2376+ match c {
2377+ '"' => in_quotes = !in_quotes,
2378+ _ if in_quotes => {}
2379+ '[' | '(' => depth += 1,
2380+ ']' | ')' => depth -= 1,
2381+ ',' if depth == 0 => {
2382+ parts.push(&input[start..i]);
2383+ start = i + 1;
56112384 }
5612− });
5613− let diagnostic = Diagnostic::error(code::UNKNOWN_PREFIX, line, problem.message)
5614− .subject(problem.subject)
5615− .suggest(problem.suggestion);
5616− let diagnostic = at(ctx, diagnostic, token.span);
5617− ctx.push_once(diagnostic);
5618− return None;
2385+ _ => {}
2386+ }
56192387 }
5620− Some(format!("{}{}", outer, known.concat()))
2388+ parts.push(&input[start..]);
2389+ parts
56212390}
56222391
5623−/// An attribute of the bundle `bundle`, spliced in under `prefix`
5624−/// (`md:$card`): the same attribute with the prefixes in front, when it can
5625−/// take them. An HTML attribute can't; a style's prefixes are checked, as
5626−/// is a flag or a name that isn't a style (a bundle's parameter), which
5627−/// under a prefix are attributes like any other.
5628−fn prefixed_member(
5629− attr: &Attribute,
5630− prefix: &str,
5631− bundle: &str,
5632− line: usize,
5633− column: Option<usize>,
5634− validate: bool,
5635− ctx: &mut ParseContext,
5636−) -> Option<Attribute> {
5637− let key = format!("{}{}", prefix, attr.key);
5638− if attr.html {
5639− if validate {
5640− let diagnostic = Diagnostic::error(
5641− code::INVALID_PREFIX,
5642− line,
5643− format!(
5644− "'{}${}': the bundle has `{}=`, an HTML attribute, and a prefix applies to \
5645− styles, which have states",
5646− prefix, bundle, attr.key
5647− ),
5648− )
5649− .subject(format!("{}${}", prefix, bundle));
5650− let diagnostic = at_attribute(diagnostic, column, ctx);
5651− ctx.diagnostics.push(diagnostic);
2392+// ---------------------------------------------------------------------------
2393+// Chain splitting (the > operator)
2394+// ---------------------------------------------------------------------------
2395+
2396+fn split_chain(content: &str) -> Vec<String> {
2397+ let mut segments = Vec::new();
2398+ let mut current = String::new();
2399+ let chars: Vec<char> = content.chars().collect();
2400+ let mut i = 0;
2401+ let mut bracket_depth = 0;
2402+
2403+ while i < chars.len() {
2404+ if chars[i] == '[' {
2405+ bracket_depth += 1;
56522406 }
5653− return None;
5654− }
5655− let prefixed = Attribute {
5656− key,
5657− ..attr.clone()
5658− };
5659− if validate {
5660− let fine = if attr.value.is_none() || could_be_parameter(attr) {
5661− check_attribute(&prefixed, line, column, None, ctx)
5662− } else {
5663− check_prefixes(&prefixed, line, column, ctx)
5664− };
5665− if !fine {
5666− return None;
2407+ if chars[i] == ']' {
2408+ bracket_depth -= 1;
56672409 }
5668− }
5669− Some(prefixed)
5670−}
56712410
5672−/// `class=hl-x`: the `hl-` prefix is htmlang's, for its generated classes,
5673−/// whose rules would then apply to the element too. It goes into the page
5674−/// as written, so this is a warning.
5675−fn reserved_class(attr: &Attribute, line: usize, column: Option<usize>, ctx: &mut ParseContext) {
5676− let classes = attr.value.as_deref().unwrap_or_default();
5677− for class in classes.split_whitespace() {
5678− if class.starts_with(crate::codegen::CLASS_PREFIX) {
5679− let diagnostic = Diagnostic::warning(
5680− code::INVALID_VALUE,
5681− line,
5682− format!(
5683− "class '{}' starts with `{}`, which htmlang keeps for the classes it \
5684− generates, so their styles could apply to this element: give it \
5685− another name",
5686− class,
5687− crate::codegen::CLASS_PREFIX
5688− ),
5689− )
5690− .subject(class);
5691− let diagnostic = at_attribute(diagnostic, column, ctx);
5692− ctx.diagnostics.push(diagnostic);
2411+ // Match " > @" outside brackets
2412+ if bracket_depth == 0
2413+ && i + 3 < chars.len()
2414+ && chars[i] == ' '
2415+ && chars[i + 1] == '>'
2416+ && chars[i + 2] == ' '
2417+ && chars[i + 3] == '@'
2418+ {
2419+ segments.push(current.trim().to_string());
2420+ current = String::new();
2421+ i += 3; // skip " > ", keep the "@"
2422+ continue;
56932423 }
2424+
2425+ current.push(chars[i]);
2426+ i += 1;
56942427 }
5695−}
56962428
5697−/// A style's key as the CSS reads it, for finding duplicates: its at-rule
5698−/// prefixes in one order (`dark:md:` is `md:dark:`), then its selector
5699−/// prefixes as written, whose order is the selector's.
5700−fn normal_key(key: &str) -> String {
5701− let (prefixes, name) = crate::vocab::split_prefixes(key);
5702− let mut at: Vec<(usize, &str)> = prefixes
5703− .iter()
5704− .filter_map(|p| crate::vocab::at_rule_rank(p).map(|rank| (rank, *p)))
5705− .collect();
5706− at.sort_unstable();
5707− at.dedup();
5708− let mut normal: String = at.iter().map(|(_, p)| *p).collect();
5709− for prefix in prefixes
5710− .iter()
5711− .filter(|p| crate::vocab::at_rule_rank(p).is_none())
5712− {
5713− normal.push_str(prefix);
2429+ if !current.trim().is_empty() {
2430+ segments.push(current.trim().to_string());
57142431 }
5715− normal.push_str(name);
5716− normal
5717−}
57182432
5719−/// `[$name]` where `$name` isn't an attribute bundle.
5720−fn not_a_bundle(name: &str, line: usize, column: Option<usize>, ctx: &mut ParseContext) {
5721− track_var_refs(&format!("${}", name), &mut ctx.used_variables);
5722− let is_value = interp::name_len(name) > 0 && interp::resolve(name, &ctx.env).is_some();
5723− let diagnostic = if is_value {
5724− Diagnostic::error(
5725− code::ATTRIBUTE_FROM_VARIABLE,
5726− line,
5727− format!(
5728− "'${}' is a value, not an attribute: attributes come from a bundle \
5729− (`@let name [padding 8]`, used as `[$name]`), and a value fills an \
5730− attribute's value (`padding ${}`)",
5731− name, name
5732− ),
5733− )
5734− .subject(name)
5735− } else if ctx.env.function(name).is_some() {
5736− ctx.used_functions.insert(name.to_string());
5737− Diagnostic::error(
5738− code::UNDEFINED_VARIABLE,
5739− line,
5740− format!(
5741− "'${}' is a function, not an attribute bundle: it is called as an element, \
5742− `@{}`",
5743− name, name
5744− ),
5745− )
5746− .subject(name)
5747− } else {
5748− let mut bundles = ctx.env.bundle_names();
5749− bundles.sort_unstable();
5750− let suggestion = suggest_closest(name, &bundles);
5751− let message = match suggestion {
5752− Some(closest) => format!(
5753− "undefined attribute bundle '${}', did you mean '${}'?",
5754− name, closest
5755− ),
5756− None => format!("undefined attribute bundle '${}'", name),
5757− };
5758− Diagnostic::error(code::UNDEFINED_VARIABLE, line, message)
5759− .subject(name)
5760− .suggest(suggestion)
5761− };
5762− let diagnostic = match (&ctx.current_source, column) {
5763− ((current, Some(text)), Some(column)) if *current == line => {
5764− diagnostic.column(column).source(text.clone())
5765− }
5766− _ => diagnostic,
5767− };
5768− ctx.diagnostics.push(diagnostic);
2433+ segments
57692434}
57702435
57712436// ---------------------------------------------------------------------------
57722437// Text segment parsing (inline {...} elements)
57732438// ---------------------------------------------------------------------------
57742439
5775−/// While a slot is filled in, each escape (see [`syntax::ESCAPES`]) is a
5776−/// private-use placeholder, U+E000 plus its place in the table, so it
5777−/// can't start a variable, a quote or an inline element. Afterwards it
5778−/// becomes what it stands for.
2440+/// Escapes in text: `\@`, `\$`, `\{`, `\--` and `\\` stand for the
2441+/// character(s) themselves. While a text is processed, each is a private-use
2442+/// placeholder, so it can't start a variable, an inline element or a line.
2443+const ESCAPES: &[(&str, char, &str)] = &[
2444+ ("\\\\", '\u{E000}', "\\"),
2445+ ("\\$", '\u{E001}', "$"),
2446+ ("\\{", '\u{E002}', "{"),
2447+ ("\\@", '\u{E003}', "@"),
2448+ ("\\--", '\u{E004}', "--"),
2449+];
2450+
57792451fn protect_escapes(text: &str) -> String {
57802452 if !text.contains('\\') {
57812453 return text.to_string();
57822454 }
5783− let mut out = String::with_capacity(text.len());
5784− let mut i = 0;
5785− while let Some(c) = text[i..].chars().next() {
5786− let len = syntax::escape_len(&text[i..]);
5787− if len == 0 {
5788− out.push(c);
5789− i += c.len_utf8();
5790− continue;
5791− }
5792− let escape = &text[i..i + len];
5793− let index = syntax::ESCAPES.iter().position(|e| *e == escape);
5794− out.extend(index.and_then(|n| char::from_u32(0xE000 + n as u32)));
5795− i += len;
2455+ let mut out = text.to_string();
2456+ for (escape, placeholder, _) in ESCAPES {
2457+ out = out.replace(escape, &placeholder.to_string());
57962458 }
57972459 out
57982460}
57992461
5800−/// The escape a placeholder stands for, as written (`\,`).
5801−fn escape_of(c: char) -> Option<&'static str> {
5802− let index = (c as u32).checked_sub(0xE000)?;
5803− syntax::ESCAPES.get(index as usize).copied()
5804−}
5805−
58062462fn restore_escapes(text: &str) -> String {
5807− text.chars()
5808− .fold(String::with_capacity(text.len()), |mut out, c| {
5809− match escape_of(c) {
5810− // What the escape stands for: what follows the backslash
5811− Some(escape) => out.push_str(&escape[1..]),
5812− None => out.push(c),
5813− }
5814− out
5815− })
5816−}
5817−
5818−/// Inside the quoted strings of a CSS value, `\"` and `\\` mean in CSS what
5819−/// they mean in htmlang, so they stay as written there.
5820−fn keep_css_string_escapes(protected: &str) -> String {
5821− let mut out = String::with_capacity(protected.len());
5822− let mut inside = false;
5823− for c in protected.chars() {
5824− match escape_of(c) {
5825− Some(escape @ ("\\\"" | "\\\\")) if inside => out.push_str(escape),
5826− _ => {
5827− if c == '"' {
5828− inside = !inside;
5829− }
5830− out.push(c);
5831− }
5832− }
2463+ let mut out = text.to_string();
2464+ for (_, placeholder, literal) in ESCAPES {
2465+ out = out.replace(*placeholder, literal);
58332466 }
58342467 out
58352468}
58362469
5837−/// Evaluate text: fill in the variables of its plain runs and build its
5838−/// inline elements. Each run is one slot, so a value can't make markup.
5839−fn text_segments(text: &syntax::Text, ctx: &mut ParseContext) -> Vec<TextSegment> {
2470+fn parse_text_segments(input: &str, ctx: &mut ParseContext) -> Vec<TextSegment> {
58402471 let mut segments = Vec::new();
5841− // The plain text so far, and where it starts
5842− let mut plain = String::new();
5843− let mut start: Option<syntax::Span> = None;
5844− let flush = |plain: &mut String,
5845− start: &mut Option<syntax::Span>,
5846− segments: &mut Vec<TextSegment>,
5847− ctx: &mut ParseContext| {
5848− if !plain.is_empty() {
5849− let at = start.unwrap_or(text.span);
5850− let filled = ctx.interpolate_text(plain, at.line, Some(at.column));
5851− segments.push(TextSegment::Plain(filled));
5852− plain.clear();
5853− }
5854− *start = None;
5855− };
5856− for segment in &text.segments {
5857− match segment {
5858− Segment::Plain { raw, span } => {
5859− start.get_or_insert(*span);
5860− plain.push_str(raw);
5861− }
5862− Segment::Inline(inline) => {
5863− let line = ctx.current_line;
5864− match resolve(&inline.head, inline.text.as_ref(), line, &text.raw, ctx) {
5865− Ok(resolved) => {
5866− if !inline.closed {
5867− let d = Diagnostic::warning(
5868− code::UNCLOSED_BRACKET,
5869− inline.span.line,
5870− format!(
5871− "unclosed `{{`: the inline @{} runs to the end of the line. \
5872− An inline element ends with `}}` (a brace that is text is \
5873− written `\\{{`)",
5874− inline.head.name
5875− ),
5876− );
5877− let d = at_attribute(d, Some(inline.span.column), ctx);
5878− ctx.push_once(d);
5879− }
5880− flush(&mut plain, &mut start, &mut segments, ctx);
5881− // A function called inline gets no children: its
5882− // content is the text after its attributes
5883− match Evaluator.complete(resolved, Vec::new(), ctx) {
5884− Ok(nodes) => segments.extend(inline_segments(nodes, line)),
5885− Err(mut e) => {
5886− e.source_line
5887− .get_or_insert_with(|| text.raw.as_str().into());
5888− ctx.diagnostics.push(e);
5889− }
5890− }
2472+ let mut current_text = String::new();
2473+ let chars: Vec<char> = protect_escapes(input).chars().collect();
2474+ let mut i = 0;
2475+
2476+ while i < chars.len() {
2477+ if chars[i] == '{' && i + 1 < chars.len() && chars[i + 1] == '@' {
2478+ // Flush accumulated plain text
2479+ if !current_text.is_empty() {
2480+ segments.push(TextSegment::Plain(restore_escapes(&substitute_vars(
2481+ &current_text,
2482+ &ctx.variables,
2483+ ))));
2484+ current_text.clear();
2485+ }
2486+
2487+ // Find matching }
2488+ let mut depth = 0;
2489+ let start = i + 1; // after {
2490+ i += 1;
2491+ loop {
2492+ if i >= chars.len() {
2493+ break;
2494+ }
2495+ if chars[i] == '{' {
2496+ depth += 1;
2497+ } else if chars[i] == '}' {
2498+ if depth == 0 {
2499+ break;
58912500 }
5892− Err(mut e) => {
5893− // A misspelled element is an error inline too (a
5894− // brace that is text is written `\{`); the braces
5895− // stay as written
5896− e.source_line = Some(text.raw.as_str().into());
5897− ctx.diagnostics.push(e);
5898− start.get_or_insert(inline.span);
5899− plain.push('{');
5900− plain.push_str(&inline.raw);
5901− if inline.closed {
5902− plain.push('}');
5903− }
2501+ depth -= 1;
2502+ }
2503+ i += 1;
2504+ }
2505+
2506+ let inner: String = chars[start..i].iter().collect();
2507+ i += 1; // skip }
2508+
2509+ match parse_single_element(&inner, ctx.current_line, ctx) {
2510+ Ok(elem) => segments.push(TextSegment::Inline(elem)),
2511+ Err(e) => {
2512+ // Keep the braces as literal text, but flag what looks
2513+ // like a mistyped inline element.
2514+ if inner.trim_start().starts_with('@') {
2515+ ctx.diagnostics.push(Diagnostic {
2516+ line: ctx.current_line,
2517+ column: None,
2518+ message: e.message,
2519+ severity: Severity::Warning,
2520+ source_line: Some(input.to_string()),
2521+ });
59042522 }
2523+ current_text.push('{');
2524+ current_text.push_str(&inner);
2525+ current_text.push('}');
59052526 }
59062527 }
2528+ } else {
2529+ current_text.push(chars[i]);
2530+ i += 1;
59072531 }
59082532 }
5909− flush(&mut plain, &mut start, &mut segments, ctx);
5910− segments
5911−}
59122533
5913−/// The variable `raw` is, when it is exactly one `$name` or `${name}`.
5914−fn whole_reference(raw: &str, env: &Env) -> Option<String> {
5915− let after = raw.trim().strip_prefix('$')?;
5916− match interp::reference(after, env)? {
5917− (interp::Reference::Var(path), len) if len == after.len() => Some(path),
5918− _ => None,
2534+ if !current_text.is_empty() {
2535+ segments.push(TextSegment::Plain(restore_escapes(&substitute_vars(
2536+ &current_text,
2537+ &ctx.variables,
2538+ ))));
59192539 }
2540+
2541+ segments
59202542}
59212543
5922−/// The attributes of `tokens` after each whole-attribute `if()` has
5923−/// chosen (see [`syntax::Choice`]), in order, into `out`. The branch not
5924−/// taken isn't evaluated; with `validate`, its attribute names are checked
5925−/// like code that doesn't run, under the prefixes `prefix` the `if()` is
5926−/// under (`hover:if(...)`).
5927−fn choose_attrs(
5928− tokens: &[syntax::Attr],
5929− prefix: &str,
5930− line_num: usize,
5931− ctx: &mut ParseContext,
5932− validate: bool,
5933− text_keys: &[String],
5934− out: &mut Vec<syntax::Attr>,
5935−) {
5936− for token in tokens {
5937− let Some(choice) = &token.choice else {
5938− out.push(token.clone());
5939− continue;
2544+/// The items of a text list: a range `A..B [step N]`, or comma-separated.
2545+fn text_list_items(list: &str) -> Vec<String> {
2546+ if let Some((start, rest)) = list.split_once("..") {
2547+ let (end, step) = match rest.split_once(" step ") {
2548+ Some((end, step)) => (end.trim(), step.trim().parse::<i64>().unwrap_or(1).max(1)),
2549+ None => (rest.trim(), 1),
59402550 };
5941− let Some(condition) = choice_shape(token, choice, line_num, ctx) else {
5942− continue;
5943− };
5944− let taken = match condition.span.line {
5945− 0 => ctx.condition(&condition.raw, line_num, None),
5946− line => ctx.condition(&condition.raw, line, Some(condition.span.column)),
5947− };
5948− let (chosen, other) = match taken {
5949− true => (choice.branches.first(), choice.branches.get(1)),
5950− false => (choice.branches.get(1), choice.branches.first()),
5951− };
5952− if let Some(other) = other {
5953− track_var_refs(&branch_text(other), &mut ctx.used_variables);
5954− if validate {
5955− check_branch(token, other, prefix, line_num, ctx, text_keys);
5956− }
5957− }
5958− if let Some(branch) = chosen {
5959− choose_attrs(
5960− branch.attrs(),
5961− prefix,
5962− line_num,
5963− ctx,
5964− validate,
5965− text_keys,
5966− out,
5967− );
2551+ if let (Ok(start), Ok(end)) = (start.trim().parse::<i64>(), end.parse::<i64>()) {
2552+ return numeric_range(start, end, step);
59682553 }
59692554 }
2555+ list.split(',')
2556+ .map(|s| s.trim().to_string())
2557+ .filter(|s| !s.is_empty())
2558+ .collect()
59702559}
59712560
5972−/// Report what is wrong with the shape of `if()`: an empty condition, a
5973−/// number of branches other than one or two, text after a group's `]`.
5974−/// Returns the condition when the `if()` can be evaluated.
5975−fn choice_shape<'a>(
5976− token: &syntax::Attr,
5977− choice: &'a syntax::Choice,
5978− line_num: usize,
5979− ctx: &mut ParseContext,
5980−) -> Option<&'a syntax::Arg> {
5981− let line = if token.span.line == 0 {
5982− line_num
5983− } else {
5984− token.span.line
2561+/// Make `$target` (and `$target.key`, and nested lists) a copy of the list
2562+/// item stored under `source`.
2563+fn bind_item(vars: &mut HashMap<String, String>, source: &str, target: &str) {
2564+ let under = |key: &str, name: &str| {
2565+ key.strip_prefix(name)
2566+ .is_some_and(|rest| rest.is_empty() || rest.starts_with(['.', '#']))
59852567 };
5986− // The line the column points into, when it is the one being evaluated
5987− let source = |ctx: &ParseContext, diagnostic: Diagnostic, at: usize| match &ctx.current_source {
5988− (current, Some(text)) if *current == at => diagnostic.source(text.clone()),
5989− _ => diagnostic,
5990− };
5991− for branch in &choice.branches {
5992− if let syntax::Branch::Group {
5993− trailing: Some(trailing),
5994− ..
5995− } = branch
5996− {
5997− let diagnostic = source(
5998− ctx,
5999− Diagnostic::error(
6000− code::UNEXPECTED_ARGUMENT,
6001− trailing.span.line,
6002− format!(
6003− "'{}' after the `]` of a group in if(): a branch is one attribute, \
6004− one `[group]` of attributes or one `$bundle`",
6005− trailing.raw
6006− ),
6007− )
6008− .column(trailing.span.column)
6009− .subject(trailing.raw.as_str()),
6010− trailing.span.line,
6011− );
6012− ctx.push_once(diagnostic);
2568+ vars.retain(|key, _| !under(key, target));
2569+ let copies: Vec<(String, String)> = vars
2570+ .iter()
2571+ .filter(|(key, _)| under(key, source))
2572+ .map(|(key, value)| (format!("{}{}", target, &key[source.len()..]), value.clone()))
2573+ .collect();
2574+ vars.extend(copies);
2575+ // A record has no text of its own
2576+ vars.entry(target.to_string()).or_default();
2577+}
2578+
2579+/// Inclusive integer range from `start` to `end` (counting down when
2580+/// `start > end`), stepping by `step`. Stops instead of overflowing.
2581+fn numeric_range(start: i64, end: i64, step: i64) -> Vec<String> {
2582+ let mut items = Vec::new();
2583+ let mut n = start;
2584+ if start <= end {
2585+ while n <= end {
2586+ items.push(n.to_string());
2587+ match n.checked_add(step) {
2588+ Some(next) => n = next,
2589+ None => break,
2590+ }
60132591 }
6014− }
6015− match &choice.condition {
6016− Some(condition) if (1..=2).contains(&choice.branches.len()) => Some(condition),
6017− _ => {
6018− let diagnostic = source(
6019− ctx,
6020− Diagnostic::error(
6021− code::INVALID_EXPRESSION,
6022− line,
6023− format!(
6024− "`{}`: if() takes a condition and one or two branches, \
6025− `if(CONDITION, A, B)`",
6026− token.raw
6027− ),
6028− )
6029− .column(token.span.column),
6030− line,
6031− );
6032− ctx.push_once(diagnostic);
6033− None
2592+ } else {
2593+ while n >= end {
2594+ items.push(n.to_string());
2595+ match n.checked_sub(step) {
2596+ Some(next) => n = next,
2597+ None => break,
2598+ }
60342599 }
60352600 }
2601+ items
60362602}
60372603
6038−/// A branch's text, for the names it uses.
6039−fn branch_text(branch: &syntax::Branch) -> String {
6040− let raws: Vec<&str> = branch.attrs().iter().map(|a| a.raw.as_str()).collect();
6041− raws.join(", ")
6042−}
60432604
6044−/// Check attributes that are never evaluated (in code that doesn't run,
6045−/// or the branch an `if()` didn't take), as far as they can be checked:
6046−/// names are, and literal values; a value with a variable depends on what
6047−/// the variable holds. Each branch of an `if()` is checked on its own.
6048−fn check_attrs(tokens: &[syntax::Attr], line: usize, ctx: &mut ParseContext, text_keys: &[String]) {
6049− parse_attr_list(&literal_attrs(tokens), line, ctx, true, text_keys);
6050− check_choices(tokens, "", line, ctx, text_keys);
2605+
2606+/// Find a leftover `key if condition` (ignoring ` if ` inside parentheses
2607+/// or quotes), to point at `if()`.
2608+fn split_trailing_if(part: &str) -> Option<(&str, &str)> {
2609+ let mut depth = 0;
2610+ let mut quote = None;
2611+ for (i, c) in part.char_indices() {
2612+ match c {
2613+ '"' | '\'' if quote == Some(c) => quote = None,
2614+ '"' | '\'' if quote.is_none() => quote = Some(c),
2615+ _ if quote.is_some() => {}
2616+ '(' => depth += 1,
2617+ ')' => depth -= 1,
2618+ _ if depth == 0 && part[i..].starts_with(" if ") => {
2619+ return Some((&part[..i], part[i + 4..].trim()));
2620+ }
2621+ _ => {}
2622+ }
2623+ }
2624+ None
60512625}
60522626
6053−/// [`check_attrs`] for a branch of the `if()` `token`, under the prefixes
6054−/// `prefix` it is under: `hover:if($on, color red, [id=x])` checks
6055−/// `hover:[id=x]`, an error whichever branch is taken.
6056−fn check_branch(
6057− token: &syntax::Attr,
6058− branch: &syntax::Branch,
6059− prefix: &str,
6060− line: usize,
6061− ctx: &mut ParseContext,
6062− text_keys: &[String],
6063−) {
6064− if prefix.is_empty() {
6065− check_attrs(branch.attrs(), line, ctx, text_keys);
6066− return;
2627+/// Evaluate `if(cond, a)` or `if(cond, a, b)` when it is all of `text`,
2628+/// returning the chosen branch (empty when `cond` fails and there is no `b`).
2629+fn choose_if(text: &str, ctx: &mut ParseContext, line: usize) -> Option<String> {
2630+ let inner = text.strip_prefix("if(")?.strip_suffix(')')?;
2631+ let args = split_if_args(inner);
2632+ // `if(a) (b)` isn't one call
2633+ if split_trailing_paren(inner) || !(2..=3).contains(&args.len()) {
2634+ return None;
60672635 }
6068− let list = syntax::AttrList {
6069− attrs: branch.attrs().to_vec(),
6070− span: token.span,
6071− closed: true,
6072− quoted_close: None,
6073− };
6074− let grouped = syntax::Attr {
6075− key: prefix.to_string(),
6076− value: None,
6077− html: false,
6078− raw: token.raw.clone(),
6079− span: token.span,
6080− choice: None,
6081− prefixed: Some(Box::new(syntax::Prefixed {
6082− prefix: prefix.to_string(),
6083− prefix_span: token.span,
6084− target: syntax::Branch::Group {
6085− list,
6086− trailing: None,
6087− },
6088− })),
2636+ let branch = if ctx.condition(args[0].trim(), line) {
2637+ args[1]
2638+ } else {
2639+ args.get(2).copied().unwrap_or("")
60892640 };
6090− check_attrs(std::slice::from_ref(&grouped), line, ctx, text_keys);
2641+ Some(branch.trim().to_string())
60912642}
60922643
6093−/// [`check_attrs`] for the branches of each `if()` of `tokens`, which are
6094−/// under the prefixes `prefix`, also inside a prefixed group or as a
6095−/// prefixed `if()`.
6096−fn check_choices(
6097− tokens: &[syntax::Attr],
6098− prefix: &str,
6099− line: usize,
6100− ctx: &mut ParseContext,
6101− text_keys: &[String],
6102−) {
6103− for token in tokens {
6104− if let Some(choice) = &token.choice
6105− && choice_shape(token, choice, line, ctx).is_some()
6106− {
6107− for branch in &choice.branches {
6108− check_branch(token, branch, prefix, line, ctx, text_keys);
2644+/// Whether the parentheses in `inner` close before its end, as in the
2645+/// inside of `if(a)(b)`.
2646+fn split_trailing_paren(inner: &str) -> bool {
2647+ let mut depth = 0i32;
2648+ let mut quote = None;
2649+ for c in inner.chars() {
2650+ match c {
2651+ '"' | '\'' if quote == Some(c) => quote = None,
2652+ '"' | '\'' if quote.is_none() => quote = Some(c),
2653+ _ if quote.is_some() => {}
2654+ '(' => depth += 1,
2655+ ')' => {
2656+ depth -= 1;
2657+ if depth < 0 {
2658+ return true;
2659+ }
61092660 }
2661+ _ => {}
61102662 }
6111− if let Some(prefixed) = &token.prefixed {
6112− let inner = format!("{}{}", prefix, prefixed.prefix);
6113− check_choices(prefixed.target.attrs(), &inner, line, ctx, text_keys);
2663+ }
2664+ false
2665+}
2666+
2667+/// Resolve a value written `if(cond, a, b)`: evaluate `cond` and keep the
2668+/// chosen branch's text, or `None` when the choice is empty. Other
2669+/// attributes are returned unchanged.
2670+fn choose_if_value(part: &str, ctx: &mut ParseContext, line: usize) -> Option<String> {
2671+ let Some(pos) = part.find(['=', ' ']) else {
2672+ return Some(part.to_string());
2673+ };
2674+ let (head, value) = part.split_at(pos + 1);
2675+ match choose_if(value.trim(), ctx, line) {
2676+ Some(branch) if branch.is_empty() => None,
2677+ Some(branch) => Some(format!("{}{}", head, branch)),
2678+ None => Some(part.to_string()),
2679+ }
2680+}
2681+
2682+fn split_if_args(input: &str) -> Vec<&str> {
2683+ let mut parts = Vec::new();
2684+ let mut start = 0;
2685+ let mut depth = 0;
2686+ let mut quote = None;
2687+ for (i, c) in input.char_indices() {
2688+ match c {
2689+ '"' | '\'' if quote == Some(c) => quote = None,
2690+ '"' | '\'' if quote.is_none() => quote = Some(c),
2691+ _ if quote.is_some() => {}
2692+ '(' => depth += 1,
2693+ ')' => depth -= 1,
2694+ ',' if depth == 0 => {
2695+ parts.push(&input[start..i]);
2696+ start = i + 1;
2697+ }
2698+ _ => {}
61142699 }
61152700 }
2701+ parts.push(&input[start..]);
2702+ parts
61162703}
61172704
61182705// ---------------------------------------------------------------------------
61192706// Post-parse validation (context-dependent warnings)
61202707// ---------------------------------------------------------------------------
61212708
2709+/// Attributes that only make sense on container elements (@row, @el, @el).
2710+const CONTAINER_ONLY_ATTRS: &[&str] = &[
2711+ "spacing",
2712+ "gap",
2713+ "wrap",
2714+ "grid-cols",
2715+ "grid-rows",
2716+ "container",
2717+ "container-name",
2718+ "container-type",
2719+];
2720+
61222721fn element_kind_name(kind: &ElementKind) -> String {
61232722 format!("@{}", kind.name())
61242723}
61252724
6126−/// HTML elements whose start tag ends an open `<p>`: written inside a
6127−/// `@paragraph`, the browser moves them out of it. (`div` isn't here:
6128−/// inside text, htmlang writes its `<div>`s as `<span>`s.)
6129−#[rustfmt::skip]
6130−const ENDS_A_PARAGRAPH: &[&str] = &[
6131− "address", "article", "aside", "blockquote", "dd", "details", "dialog", "dl", "dt",
6132− "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6",
6133− "header", "hgroup", "hr", "li", "main", "menu", "nav", "ol", "p", "pre", "search",
6134− "section", "summary", "table", "ul",
6135−];
6136−
6137−/// The HTML element `kind` is written as, if the browser would take it out
6138−/// of a `<p>`.
6139−fn ends_a_paragraph(kind: &ElementKind) -> Option<&'static str> {
6140− let html = match kind {
6141− ElementKind::Paragraph => "p",
6142− ElementKind::Tag(spec) => spec.html,
6143− _ => return None,
6144− };
6145− ENDS_A_PARAGRAPH.contains(&html).then_some(html)
2725+fn is_container(kind: &ElementKind) -> bool {
2726+ matches!(kind, ElementKind::Row | ElementKind::El)
2727+ || kind.spec().is_some_and(|spec| spec.container)
61462728}
61472729
61482730/// Stricter checks for `htmlang lint`, on top of the diagnostics every
@@ -6152,171 +2734,133 @@ pub fn lint(nodes: &[Node]) -> Vec<Diagnostic> {
61522734 fn walk(nodes: &[Node], depth: usize, out: &mut Vec<Diagnostic>) {
61532735 for node in nodes {
61542736 let Node::Element(elem) = node else { continue };
6155− let start = out.len();
6156− let mut warn = |code: &'static str, message: String| {
6157− out.push(Diagnostic::warning(code, elem.line_num, message))
2737+ let mut warn = |message: String| {
2738+ out.push(Diagnostic {
2739+ line: elem.line_num,
2740+ column: None,
2741+ message,
2742+ severity: Severity::Warning,
2743+ source_line: None,
2744+ })
61582745 };
61592746 if depth > 10 {
6160− warn(
6161− code::DEEP_NESTING,
6162− format!(
6163− "deeply nested element ({} levels): consider simplifying",
6164− depth
6165− ),
6166− );
2747+ warn(format!(
2748+ "deeply nested element ({} levels): consider simplifying",
2749+ depth
2750+ ));
61672751 }
6168− // A function's body may draw with an empty element (a spacer,
6169− // a dot): only one written in the page is flagged
6170− if elem.kind.layout().is_container()
2752+ if matches!(elem.kind, ElementKind::Row | ElementKind::El)
61712753 && elem.children.is_empty()
6172− && elem.function.is_none()
61732754 {
6174− warn(
6175− code::EMPTY_CONTAINER,
6176− format!("empty container (@{}) has no children", elem.kind.name()),
6177− );
2755+ warn(format!("empty container (@{}) has no children", elem.kind.name()));
61782756 }
61792757 if elem.kind.is_tag("button") && !elem.attrs.iter().any(|a| a.key == "type") {
6180− warn(
6181− code::MISSING_BUTTON_TYPE,
6182− "@button missing 'type' attribute (defaults to submit)".to_string(),
6183− );
2758+ warn("@button missing 'type' attribute (defaults to submit)".to_string());
61842759 }
6185− in_function_body(elem, &mut out[start..]);
61862760 walk(&elem.children, depth + 1, out);
61872761 }
61882762 }
61892763 let mut out = Vec::new();
61902764 walk(nodes, 0, &mut out);
6191− dedupe(&mut out);
61922765 out
61932766}
61942767
6195−/// `in_paragraph`: the nodes are inside a `@paragraph` (and not inside a
6196−/// `@button` in it, which the browser keeps whole).
2768+
61972769fn validate_tree(
61982770 nodes: &[Node],
61992771 parent_kind: Option<&ElementKind>,
6200− in_paragraph: bool,
62012772 diagnostics: &mut Vec<Diagnostic>,
62022773) {
62032774 for node in nodes {
6204− // An element inside a line of text (`{@kbd ...}`, an inline call)
6205− // is checked like one on a line of its own
6206− if let Node::Text(segments) = node {
6207− let inline: Vec<Node> = segments
6208− .iter()
6209− .filter_map(|segment| match segment {
6210− TextSegment::Inline(elem) => Some(Node::Element(elem.clone())),
6211− _ => None,
6212− })
6213− .collect();
6214− validate_tree(&inline, parent_kind, in_paragraph, diagnostics);
6215− }
62162775 if let Node::Element(elem) = node {
6217− let start = diagnostics.len();
6218− dropped_by_the_element(elem, diagnostics);
6219− if in_paragraph && let Some(html) = ends_a_paragraph(&elem.kind) {
6220− diagnostics.push(
6221− Diagnostic::warning(
6222− code::BLOCK_IN_PARAGRAPH,
6223− elem.line_num,
6224− format!(
6225− "{0} inside @paragraph: HTML ends a <p> before a <{1}>, so the \
6226− browser moves the <{1}> out of the paragraph. Put {0} after the \
6227− paragraph, or use @el, @row or @grid, which are laid out inline \
6228− in text",
6229− element_kind_name(&elem.kind),
6230− html
6231− ),
6232− )
6233− .subject(elem.kind.name()),
6234− );
6235− }
62362776 for attr in &elem.attrs {
62372777 let base = crate::vocab::base_attribute(&attr.key);
6238−
6239− // htmlang's words for laying out children, on an element
6240− // that doesn't lay out its children: left out (codegen)
6241− if !attr.html
6242− && crate::vocab::CONTAINER_ATTRIBUTES.contains(&base)
6243− && !elem.kind.layout().is_container()
6244− && !has_no_element(&elem.kind)
6245− && !crate::vocab::split_prefixes(&attr.key)
6246− .0
6247− .contains(&"children:")
2778+ if base == "width"
2779+ && attr.value.as_deref() == Some("fill")
2780+ && !matches!(parent_kind, Some(ElementKind::Row))
2781+ {
2782+ diagnostics.push(Diagnostic {
2783+ line: elem.line_num,
2784+ column: None,
2785+ message: "'width fill' works best inside @row; using 100% as fallback"
2786+ .to_string(),
2787+ severity: Severity::Warning,
2788+ source_line: None,
2789+ });
2790+ }
2791+ if base == "height"
2792+ && attr.value.as_deref() == Some("fill")
2793+ && !parent_kind.is_some_and(ElementKind::is_column)
62482794 {
6249− diagnostics.push(not_a_container(&elem.kind, elem.line_num, base));
2795+ diagnostics.push(Diagnostic {
2796+ line: elem.line_num,
2797+ column: None,
2798+ message: "'height fill' works best inside @el; using 100% as fallback"
2799+ .to_string(),
2800+ severity: Severity::Warning,
2801+ source_line: None,
2802+ });
2803+ }
2804+
2805+ // Container-only attributes on non-container elements
2806+ if CONTAINER_ONLY_ATTRS.contains(&base) && !is_container(&elem.kind) {
2807+ diagnostics.push(Diagnostic {
2808+ line: elem.line_num,
2809+ column: None,
2810+ message: format!(
2811+ "'{}' has no effect on {} (only works on @row, @el, @el)",
2812+ base,
2813+ element_kind_name(&elem.kind)
2814+ ),
2815+ severity: Severity::Warning,
2816+ source_line: None,
2817+ });
62502818 }
62512819
62522820 // Form-specific: placeholder only on @input/@textarea
62532821 if base == "placeholder"
62542822 && !(elem.kind.is_tag("input") || elem.kind.is_tag("textarea"))
62552823 {
6256− diagnostics.push(Diagnostic::new(
6257− code::NO_EFFECT,
6258− Severity::Warning,
6259− elem.line_num,
6260− format!(
2824+ diagnostics.push(Diagnostic {
2825+ line: elem.line_num,
2826+ column: None,
2827+ message: format!(
62612828 "'placeholder' has no effect on {} (only works on @input, @textarea)",
62622829 element_kind_name(&elem.kind)
62632830 ),
6264− ));
2831+ severity: Severity::Warning,
2832+ source_line: None,
2833+ });
62652834 }
62662835
6267− // 'for' only on @label and @output
6268− if base == "for" && !(elem.kind.is_tag("label") || elem.kind.is_tag("output")) {
6269− diagnostics.push(Diagnostic::new(
6270− code::NO_EFFECT,
6271− Severity::Warning,
6272− elem.line_num,
6273− format!(
6274− "'for' has no effect on {} (only works on @label and @output)",
2836+ // 'for' only on @label
2837+ if base == "for" && !elem.kind.is_tag("label") {
2838+ diagnostics.push(Diagnostic {
2839+ line: elem.line_num,
2840+ column: None,
2841+ message: format!(
2842+ "'for' has no effect on {} (only works on @label)",
62752843 element_kind_name(&elem.kind)
62762844 ),
6277− ));
6278− }
6279−
6280− // `width=` and `height=` are HTML attributes of media and
6281− // embedded content only; elsewhere they are styles
6282− if attr.html
6283− && (base == "width" || base == "height")
6284− && !matches!(elem.kind, ElementKind::Image)
6285− && ![
6286− "video", "canvas", "iframe", "embed", "object", "input", "source",
6287− ]
6288− .iter()
6289− .any(|tag| elem.kind.is_tag(tag))
6290− {
6291− let value = attr.value.as_deref().unwrap_or("");
6292− diagnostics.push(
6293− Diagnostic::warning(
6294− code::HTML_ATTRIBUTE_FORM,
6295− elem.line_num,
6296− format!(
6297− "'{0}={1}' has no effect on {2}, which has no {0} attribute: \
6298− the style is written `{0} {1}`",
6299− base,
6300− value,
6301− element_kind_name(&elem.kind)
6302− ),
6303− )
6304− .subject(format!("{}={}", base, value)),
6305− );
2845+ severity: Severity::Warning,
2846+ source_line: None,
2847+ });
63062848 }
63072849
63082850 // 'rows'/'cols' only on @textarea
6309− if (base == "rows" || base == "cols") && !elem.kind.is_tag("textarea") {
6310− diagnostics.push(Diagnostic::new(
6311− code::NO_EFFECT,
6312− Severity::Warning,
6313− elem.line_num,
6314− format!(
2851+ if (base == "rows" || base == "cols") && !elem.kind.is_tag("textarea")
2852+ {
2853+ diagnostics.push(Diagnostic {
2854+ line: elem.line_num,
2855+ column: None,
2856+ message: format!(
63152857 "'{}' has no effect on {} (only works on @textarea)",
63162858 base,
63172859 element_kind_name(&elem.kind)
63182860 ),
6319− ));
2861+ severity: Severity::Warning,
2862+ source_line: None,
2863+ });
63202864 }
63212865
63222866 // Media-specific attributes only on @video/@audio
@@ -6331,35 +2875,40 @@ fn validate_tree(
63312875 | "preload"
63322876 ) && !matches!(elem.kind.name(), "video" | "audio")
63332877 {
6334− diagnostics.push(Diagnostic::new(
6335− code::NO_EFFECT,
6336− Severity::Warning,
6337− elem.line_num,
6338− format!(
2878+ diagnostics.push(Diagnostic {
2879+ line: elem.line_num,
2880+ column: None,
2881+ message: format!(
63392882 "'{}' has no effect on {} (only works on @video, @audio)",
63402883 base,
63412884 element_kind_name(&elem.kind)
63422885 ),
6343− ));
2886+ severity: Severity::Warning,
2887+ source_line: None,
2888+ });
63442889 }
63452890 }
63462891 // Missing alt text on @image
63472892 if matches!(elem.kind, ElementKind::Image) && !elem.attrs.iter().any(|a| a.key == "alt")
63482893 {
6349− diagnostics.push(Diagnostic::new(
6350− code::MISSING_ALT,
6351− Severity::Warning,
6352− elem.line_num,
6353− "@image missing 'alt' attribute (accessibility)".to_string(),
6354− ));
2894+ diagnostics.push(Diagnostic {
2895+ line: elem.line_num,
2896+ column: None,
2897+ message: "@image missing 'alt' attribute (accessibility)".to_string(),
2898+ severity: Severity::Warning,
2899+ source_line: None,
2900+ });
63552901 }
6356− if elem.kind.is_tag("input") && !elem.attrs.iter().any(|a| a.key == "type") {
6357− diagnostics.push(Diagnostic::new(
6358− code::MISSING_INPUT_TYPE,
6359− Severity::Warning,
6360− elem.line_num,
6361− "@input missing 'type' attribute (defaults to 'text')".to_string(),
6362− ));
2902+ if elem.kind.is_tag("input")
2903+ && !elem.attrs.iter().any(|a| a.key == "type")
2904+ {
2905+ diagnostics.push(Diagnostic {
2906+ line: elem.line_num,
2907+ column: None,
2908+ message: "@input missing 'type' attribute (defaults to 'text')".to_string(),
2909+ severity: Severity::Warning,
2910+ source_line: None,
2911+ });
63632912 }
63642913 if matches!(elem.kind, ElementKind::Link) {
63652914 // For @link, argument is the URL, not text content
@@ -6370,50 +2919,44 @@ fn validate_tree(
63702919 .iter()
63712920 .any(|a| a.key == "aria-label" || a.key == "title")
63722921 {
6373− diagnostics.push(Diagnostic::new(
6374− code::MISSING_LINK_TEXT,
6375− Severity::Warning,
6376− elem.line_num,
6377− "@link has no visible text or aria-label (accessibility)".to_string(),
6378− ));
2922+ diagnostics.push(Diagnostic {
2923+ line: elem.line_num,
2924+ column: None,
2925+ message: "@link has no visible text or aria-label (accessibility)"
2926+ .to_string(),
2927+ severity: Severity::Warning,
2928+ source_line: None,
2929+ });
63792930 }
63802931 }
63812932
6382− // Contrast ratio check for hex color pairs, each pair on the
6383− // same elements: the element's own, or those an element prefix
6384− // (`@td:`) picks out inside it
6385− let inside = |key: &str| {
6386− crate::vocab::split_prefixes(key)
6387− .0
6388− .into_iter()
6389− .find_map(crate::vocab::element_prefix)
6390− .map(str::to_string)
6391− };
6392− let mut targets: Vec<Option<String>> = Vec::new();
6393− for attr in elem.attrs.iter().filter(|a| !a.html) {
6394− let target = inside(&attr.key);
6395− if !targets.contains(&target) {
6396− targets.push(target);
6397− }
6398− }
6399− for target in targets {
6400− let color = |property: &str| {
6401− elem.attrs
6402− .iter()
6403− .filter(|a| !a.html && inside(&a.key) == target)
6404− .find(|a| crate::vocab::base_attribute(&a.key) == property)
6405− .and_then(|a| a.value.as_deref())
6406− };
6407− let (bg_color, fg_color) = (color("background"), color("color"));
2933+ // Contrast ratio check for hex color pairs
2934+ {
2935+ let bg_color = elem
2936+ .attrs
2937+ .iter()
2938+ .find(|a| crate::vocab::base_attribute(&a.key) == "background")
2939+ .and_then(|a| a.value.as_deref());
2940+ let fg_color = elem
2941+ .attrs
2942+ .iter()
2943+ .find(|a| crate::vocab::base_attribute(&a.key) == "color")
2944+ .and_then(|a| a.value.as_deref());
64082945 if let (Some(bg), Some(fg)) = (bg_color, fg_color)
6409− && let (Some(bg_rgb), Some(fg_rgb)) = (parse_hex_rgb(bg), parse_hex_rgb(fg))
2946+ && let (Some(bg_rgb), Some(fg_rgb)) = (crate::expr::parse_hex_rgb(bg), crate::expr::parse_hex_rgb(fg))
64102947 {
64112948 let ratio = contrast_ratio(bg_rgb, fg_rgb);
64122949 if ratio < 4.5 {
6413− diagnostics.push(Diagnostic::new(code::LOW_CONTRAST, Severity::Warning, elem.line_num, format!(
2950+ diagnostics.push(Diagnostic {
2951+ line: elem.line_num,
2952+ column: None,
2953+ message: format!(
64142954 "low contrast ratio {:.1}:1 between '{}' and '{}' (WCAG AA requires 4.5:1)",
64152955 ratio, fg, bg
6416− )));
2956+ ),
2957+ severity: Severity::Warning,
2958+ source_line: None,
2959+ });
64172960 }
64182961 }
64192962 }
@@ -6428,34 +2971,45 @@ fn validate_tree(
64282971 let has_title = elem.attrs.iter().any(|a| a.key == "title");
64292972 let in_label = parent_kind.is_some_and(|k| k.is_tag("label"));
64302973 if !has_id && !has_aria_label && !has_title && !in_label {
6431− diagnostics.push(Diagnostic::new(code::MISSING_LABEL, Severity::Warning, elem.line_num, format!(
2974+ diagnostics.push(Diagnostic {
2975+ line: elem.line_num,
2976+ column: None,
2977+ message: format!(
64322978 "{} should have an 'id' (with matching @label[for]), 'aria-label', or be wrapped in @label (accessibility)",
64332979 element_kind_name(&elem.kind)
6434− )));
2980+ ),
2981+ severity: Severity::Warning,
2982+ source_line: None,
2983+ });
64352984 }
64362985 }
64372986
64382987 // @iframe should have title attribute
6439− if elem.kind.is_tag("iframe") && !elem.attrs.iter().any(|a| a.key == "title") {
6440− diagnostics.push(Diagnostic::new(
6441− code::MISSING_TITLE,
6442− Severity::Warning,
6443− elem.line_num,
6444− "@iframe missing 'title' attribute (accessibility)".to_string(),
6445− ));
2988+ if elem.kind.is_tag("iframe")
2989+ && !elem.attrs.iter().any(|a| a.key == "title")
2990+ {
2991+ diagnostics.push(Diagnostic {
2992+ line: elem.line_num,
2993+ column: None,
2994+ message: "@iframe missing 'title' attribute (accessibility)".to_string(),
2995+ severity: Severity::Warning,
2996+ source_line: None,
2997+ });
64462998 }
64472999
64483000 // @button should have accessible text
64493001 if elem.kind.is_tag("button") {
6450− let has_text = !elem.children.is_empty();
3002+ let has_text = elem.argument.is_some() || !elem.children.is_empty();
64513003 let has_aria = elem.attrs.iter().any(|a| a.key == "aria-label");
64523004 if !has_text && !has_aria {
6453− diagnostics.push(Diagnostic::new(
6454− code::MISSING_BUTTON_TEXT,
6455− Severity::Warning,
6456− elem.line_num,
6457− "@button has no text content or aria-label (accessibility)".to_string(),
6458− ));
3005+ diagnostics.push(Diagnostic {
3006+ line: elem.line_num,
3007+ column: None,
3008+ message: "@button has no text content or aria-label (accessibility)"
3009+ .to_string(),
3010+ severity: Severity::Warning,
3011+ source_line: None,
3012+ });
64593013 }
64603014 }
64613015
@@ -6468,15 +3022,16 @@ fn validate_tree(
64683022 let has_track = elem
64693023 .children
64703024 .iter()
6471− .any(|c| matches!(c, Node::Element(e) if e.kind.is_tag("track")));
3025+ .any(|c| matches!(c, Node::Element(e) if e.kind.is_tag("source")));
64723026 if !has_aria && !has_track {
6473− diagnostics.push(Diagnostic::new(
6474− code::MISSING_CAPTIONS,
6475− Severity::Warning,
6476− elem.line_num,
6477− "@video should have aria-label or a captions @track for accessibility"
3027+ diagnostics.push(Diagnostic {
3028+ line: elem.line_num,
3029+ column: None,
3030+ message: "@video should have aria-label or captions for accessibility"
64783031 .to_string(),
6479− ));
3032+ severity: Severity::Warning,
3033+ source_line: None,
3034+ });
64803035 }
64813036 }
64823037
@@ -6486,204 +3041,20 @@ fn validate_tree(
64863041 && let Ok(n) = val.parse::<i32>()
64873042 && n > 0
64883043 {
6489− diagnostics.push(Diagnostic::new(code::POSITIVE_TABINDEX, Severity::Warning, elem.line_num, format!("tabindex {} is positive — avoid positive tabindex values as they disrupt natural tab order", n)));
3044+ diagnostics.push(Diagnostic {
3045+ line: elem.line_num,
3046+ column: None,
3047+ message: format!("tabindex {} is positive — avoid positive tabindex values as they disrupt natural tab order", n),
3048+ severity: Severity::Warning,
3049+ source_line: None,
3050+ });
64903051 }
6491− in_function_body(elem, &mut diagnostics[start..]);
6492−
6493− // An element that ends the <p> takes what is inside it out of
6494− // the paragraph too, so only it is reported
6495− let in_paragraph = elem.kind == ElementKind::Paragraph
6496− || (in_paragraph
6497− && ends_a_paragraph(&elem.kind).is_none()
6498− && !elem.kind.is_tag("button"));
6499− validate_tree(&elem.children, Some(&elem.kind), in_paragraph, diagnostics);
6500− }
6501− }
6502−}
6503−
6504−/// What an element has no place for in HTML, which would otherwise be
6505−/// left out of the page: attributes on `@fragment` (which has no element
6506−/// of its own), styles on `@script` (which isn't shown), a body under a
6507−/// `@script` that has a src (which the browser doesn't run), an element
6508−/// under a `@script` (whose body is code), and content in a void element
6509−/// such as `@input`.
6510−fn dropped_by_the_element(elem: &Element, diagnostics: &mut Vec<Diagnostic>) {
6511− let name = elem.kind.name();
6512− let keys = |attrs: Vec<&Attribute>| {
6513− attrs
6514− .iter()
6515− .map(|a| format!("'{}'", a.key))
6516− .collect::<Vec<_>>()
6517− .join(", ")
6518− };
6519− let mut error = |code: &'static str, message: String| {
6520− diagnostics.push(Diagnostic::error(code, elem.line_num, message).subject(name))
6521− };
6522− if elem.kind == ElementKind::Fragment && !elem.attrs.is_empty() {
6523− error(
6524− code::UNEXPECTED_ARGUMENT,
6525− format!(
6526− "@fragment has no element of its own to put attributes on, so {} would go \
6527− nowhere: put them on its children, or use @el",
6528− keys(elem.attrs.iter().collect())
6529− ),
6530− );
6531− }
6532− // The leading argument given twice: an attribute passed to the root
6533− // of a function whose body gives the argument (written on one line,
6534− // it is reported where it is read, and the attribute wins there)
6535− if let Some(argument) = &elem.argument
6536− && let Some(attr) = elem
6537− .attrs
6538− .iter()
6539− .find(|a| a.html && elem.kind.arg().attributes().contains(&a.key.as_str()))
6540− {
6541− error(
6542− code::DUPLICATE_ATTRIBUTE,
6543− format!(
6544− "@{} takes '{}' as its {}, and it also has {}={}: give it once",
6545− name,
6546− argument,
6547− leading_name(&elem.kind),
6548− attr.key,
6549− attr.value.as_deref().unwrap_or("")
6550− ),
6551− );
6552− }
6553− if elem.kind.is_verbatim() {
6554− let styles: Vec<&Attribute> = elem
6555− .attrs
6556− .iter()
6557− .filter(|a| !a.html && !crate::vocab::is_html_flag(&a.key))
6558− .collect();
6559− if !styles.is_empty() {
6560− error(
6561− code::UNEXPECTED_ARGUMENT,
6562− format!(
6563− "@{} isn't shown on the page, so its styles {} would go nowhere",
6564− name,
6565− keys(styles)
6566− ),
6567− );
6568− }
6569− let src = elem.argument.clone().or_else(|| {
6570− elem.attrs
6571− .iter()
6572− .find(|a| a.html && a.key == "src")
6573− .map(|a| a.value.clone().unwrap_or_default())
6574− });
6575− if let Some(src) = src
6576− && !elem.children.is_empty()
6577− {
6578− error(
6579− code::UNEXPECTED_CONTENT,
6580− format!(
6581− "@{0} has both a src ('{1}') and a body: the browser runs only the file, \
6582− so the body would go nowhere. Put the code in {1}, or leave out the src",
6583− name, src
6584− ),
6585− );
6586− } else if let Some(Node::Element(child)) = elem
6587− .children
6588− .iter()
6589− .find(|child| matches!(child, Node::Element(_)))
6590− {
6591− // `@script > @b x`: its body is code, not elements
6592− error(
6593− code::UNEXPECTED_CONTENT,
6594− format!(
6595− "@{} holds its code as the lines under it, kept as written, so @{} would \
6596− go nowhere",
6597− name,
6598− child.kind.name()
6599− ),
6600− );
6601− }
6602− }
6603− if elem.kind != ElementKind::Image && elem.attrs.iter().any(|a| !a.html && a.key == "inline") {
6604− error(
6605− code::UNEXPECTED_ARGUMENT,
6606− format!(
6607− "`inline` puts an image's file into the page, and @{} has none: it only \
6608− works on @image",
6609− name
6610− ),
6611− );
6612− }
6613− if elem.kind.layout() == Layout::Void && !elem.children.is_empty() {
6614− error(
6615− code::UNEXPECTED_CONTENT,
6616− format!(
6617− "@{} takes no content: it is an element without a closing tag, so its text \
6618− and indented lines would go nowhere",
6619− name
6620− ),
6621− );
6622− }
6623−}
6624−
6625−/// `@fragment`, `@script`, `@children` and `@slot`, whose attributes are
6626−/// reported on their own (see `dropped_by_the_element`).
6627−fn has_no_element(kind: &ElementKind) -> bool {
6628− matches!(
6629− kind,
6630− ElementKind::Fragment | ElementKind::Children | ElementKind::Slot(_)
6631− ) || kind.is_verbatim()
6632−}
6633−
6634−/// htmlang's word `word` for laying out children (`spacing`, `wrap`,
6635−/// `grid-cols`, `grid-rows`) on an element that doesn't lay out its
6636−/// children: an error, and the word is left out.
6637−fn not_a_container(kind: &ElementKind, line: usize, word: &str) -> Diagnostic {
6638− let name = element_kind_name(kind);
6639− let (what, instead) = match kind.layout() {
6640− Layout::Text => (
6641− "is text, whose lines and children flow together with no gap between them",
6642− "; to space the children out, put them in an @el or @row",
6643− ),
6644− Layout::Void => ("has no content to lay out", ""),
6645− _ => (
6646− "keeps HTML's own layout",
6647− "; for a flex layout of your own, write CSS, such as `display flex, gap 8`",
6648− ),
6649− };
6650− Diagnostic::error(
6651− code::NO_EFFECT,
6652− line,
6653− format!(
6654− "'{0}' can't go on {1}: {1} {2}. `{0}` works on a row, column or grid \
6655− (@el, @row, @grid, @section, ...){3}",
6656− word, name, what, instead
6657− ),
6658− )
6659− .subject(word)
6660−}
66613052
6662−/// Diagnostics about an element a function's body wrote are reported at
6663−/// the call (see `belongs_to_call`); say which body the element is in.
6664−fn in_function_body(elem: &Element, diagnostics: &mut [Diagnostic]) {
6665− if let Some(function) = &elem.function {
6666− for d in diagnostics {
6667− d.message = format!("{}\n in the body of @{}", d.message, function);
3053+ validate_tree(&elem.children, Some(&elem.kind), diagnostics);
66683054 }
66693055 }
66703056}
66713057
6672−/// Report each diagnostic once: a line that runs many times (in a loop, in
6673−/// a function called from one place many times) reports its problems once.
6674−fn dedupe(diagnostics: &mut Vec<Diagnostic>) {
6675− let mut seen = HashSet::new();
6676− diagnostics.retain(|d| {
6677− seen.insert((
6678− d.code,
6679− d.line,
6680− d.column,
6681− d.message.clone(),
6682− d.severity as u8,
6683− ))
6684− });
6685−}
6686−
66873058fn relative_luminance(r: u8, g: u8, b: u8) -> f64 {
66883059 fn linearize(c: u8) -> f64 {
66893060 let s = c as f64 / 255.0;
@@ -6696,24 +3067,6 @@ fn relative_luminance(r: u8, g: u8, b: u8) -> f64 {
66963067 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b)
66973068}
66983069
6699−/// The red, green and blue of a `#rgb` or `#rrggbb` colour.
6700−fn parse_hex_rgb(s: &str) -> Option<(u8, u8, u8)> {
6701− let s = s.strip_prefix('#')?;
6702− if !s.bytes().all(|b| b.is_ascii_hexdigit()) {
6703− return None;
6704− }
6705− let channel = |i: usize, len: usize| u8::from_str_radix(&s[i..i + len], 16).ok();
6706− match s.len() {
6707− 3 => Some((
6708− channel(0, 1)? * 17,
6709− channel(1, 1)? * 17,
6710− channel(2, 1)? * 17,
6711− )),
6712− 6 => Some((channel(0, 2)?, channel(2, 2)?, channel(4, 2)?)),
6713− _ => None,
6714− }
6715−}
6716−
67173070fn contrast_ratio(c1: (u8, u8, u8), c2: (u8, u8, u8)) -> f64 {
67183071 let l1 = relative_luminance(c1.0, c1.1, c1.2);
67193072 let l2 = relative_luminance(c2.0, c2.1, c2.2);
@@ -6721,48 +3074,65 @@ fn contrast_ratio(c1: (u8, u8, u8), c2: (u8, u8, u8)) -> f64 {
67213074 (lighter + 0.05) / (darker + 0.05)
67223075}
67233076
3077+// ---------------------------------------------------------------------------
3078+// Variable substitution
3079+// ---------------------------------------------------------------------------
3080+
3081+/// Interpolate `$name` variables and `${expr}` expressions into text.
3082+/// Undefined variables, and expressions that don't evaluate, are left as
3083+/// written so they show up in the output.
3084+fn substitute_vars(input: &str, vars: &HashMap<String, String>) -> String {
3085+ if !input.contains('$') {
3086+ return input.to_string();
3087+ }
3088+ let is_name_char = |c: char| c.is_alphanumeric() || matches!(c, '_' | '-' | '.');
3089+ let mut result = String::with_capacity(input.len());
3090+ let mut rest = input;
3091+ while let Some(pos) = rest.find('$') {
3092+ result.push_str(&rest[..pos]);
3093+ let after = &rest[pos + 1..];
3094+ if after.starts_with('{')
3095+ && let Some(close) = matching_brace(after)
3096+ {
3097+ let source = &after[1..close];
3098+ match crate::expr::eval(source, &|name: &str| lookup(vars, name)) {
3099+ Ok(value) => result.push_str(&value.to_string()),
3100+ Err(_) => result.push_str(&rest[pos..pos + 1 + close + 1]),
3101+ }
3102+ rest = &after[close + 1..];
3103+ continue;
3104+ }
3105+ let mut end = after.find(|c: char| !is_name_char(c)).unwrap_or(after.len());
3106+ while end > 0 && after[..end].ends_with('.') {
3107+ end -= 1;
3108+ }
3109+ let name = &after[..end];
3110+ match vars.get(name) {
3111+ Some(value) if !name.is_empty() => result.push_str(value),
3112+ _ => {
3113+ result.push('$');
3114+ result.push_str(name);
3115+ }
3116+ }
3117+ rest = &after[end..];
3118+ }
3119+ result.push_str(rest);
3120+ result
3121+}
3122+
67243123/// `@image [inline] icon.svg` becomes the SVG's markup, with `width`,
6725−/// `height`, `color` / `fill` and the HTML attributes (`class=`, `id=`,
6726−/// `aria-label=`, ...) applied to the `<svg>` tag; any other attribute is
6727−/// an error. Other nodes are returned unchanged.
3124+/// `height`, `color` / `fill`, `class=` and `id=` applied to the `<svg>`
3125+/// tag. Other nodes are returned unchanged.
67283126fn inline_svg(node: Node, line_num: usize, ctx: &mut ParseContext) -> Node {
67293127 let Node::Element(elem) = &node else {
67303128 return node;
67313129 };
6732− let inline = elem.kind == ElementKind::Image
3130+ let is_inline_svg = elem.kind == ElementKind::Image
67333131 && elem.attrs.iter().any(|a| a.key == "inline" && !a.html)
6734− && elem.argument.as_deref().is_some_and(|src| !src.is_empty());
6735− if !inline {
3132+ && elem.argument.as_deref().is_some_and(|src| src.ends_with(".svg"));
3133+ if !is_inline_svg {
67363134 return node;
67373135 }
6738− // A raster image: its file, read relative to this one, as a `data:` URI
6739− if !elem
6740− .argument
6741− .as_deref()
6742− .is_some_and(|src| src.ends_with(".svg"))
6743− {
6744− let Node::Element(mut elem) = node else {
6745− return node;
6746− };
6747− let filename = elem.argument.clone().unwrap_or_default();
6748− let resolved = ctx.resolve(&filename);
6749− match std::fs::read(&resolved) {
6750− Ok(data) => {
6751− elem.argument = Some(crate::codegen::data_uri(&filename, &data));
6752− ctx.included_files.push(resolved);
6753− }
6754− Err(e) => ctx.diagnostics.push(Diagnostic::new(
6755− code::UNREADABLE_FILE,
6756− Severity::Error,
6757− line_num,
6758− format!(
6759− "cannot load image '{}' to put it into the page: {}",
6760− filename, e
6761− ),
6762− )),
6763− }
6764− return Node::Element(elem);
6765− }
67663136 let filename = elem.argument.clone().unwrap_or_default();
67673137 let resolved = match &ctx.base_path {
67683138 Some(base) => base.join(&filename),
@@ -6771,104 +3141,104 @@ fn inline_svg(node: Node, line_num: usize, ctx: &mut ParseContext) -> Node {
67713141 let mut svg = match std::fs::read_to_string(&resolved) {
67723142 Ok(text) => text.trim().to_string(),
67733143 Err(e) => {
6774− ctx.diagnostics.push(Diagnostic::new(
6775− code::UNREADABLE_FILE,
6776− Severity::Error,
6777− line_num,
6778− format!("cannot load SVG '{}': {}", filename, e),
6779− ));
3144+ ctx.diagnostics.push(Diagnostic {
3145+ line: line_num,
3146+ column: None,
3147+ message: format!("cannot load SVG '{}': {}", filename, e),
3148+ severity: Severity::Error,
3149+ source_line: None,
3150+ });
67803151 return node;
67813152 }
67823153 };
67833154 ctx.included_files.push(resolved);
6784− // The file's markup has no class of its own, so a style reaches it only
6785− // as one of the root's attributes: anything else is reported, never
6786− // left out silently
6787− let mut left_out: Vec<String> = Vec::new();
6788− // The styles go in the root's `style=`, where a length takes its unit
6789− // and `var(--name)` works, as in any CSS
6790− let mut style: Vec<String> = Vec::new();
67913155 for attr in &elem.attrs {
6792− let target = match (attr.key.as_str(), attr.html, &attr.value) {
6793− ("inline", false, None) | ("src", true, _) => continue,
6794− // `fill` and `shrink` are layout words, which need a class
6795− ("width" | "height", false, Some(value))
6796− if matches!(value.as_str(), "fill" | "shrink") =>
6797− {
6798− left_out.push(format!("{} {}", attr.key, value));
6799− continue;
6800− }
6801− ("width" | "height", false, Some(value)) => {
6802− let value = crate::vocab::with_px(&attr.key, value);
6803− style.push(format!("{}:{}", attr.key, value));
6804− continue;
6805− }
6806− ("color" | "fill", false, Some(value)) => {
6807− style.push(format!("fill:{}", value));
6808− continue;
6809− }
6810− ("style", true, Some(value)) => {
6811− style.insert(0, value.trim().trim_end_matches(';').to_string());
6812− continue;
6813− }
6814− ("alt", true, _) => {
6815− left_out.push("alt".to_string());
6816− continue;
6817− }
6818− (key, true, Some(_)) => key,
6819− (key, false, None) if crate::vocab::is_html_flag(key) => key,
6820− _ => {
6821− left_out.push(attr.key.clone());
6822− continue;
6823− }
3156+ let Some(value) = &attr.value else { continue };
3157+ let target = match (attr.key.as_str(), attr.html) {
3158+ ("width", false) | ("height", false) => attr.key.as_str(),
3159+ ("color", false) | ("fill", false) => "fill",
3160+ ("class", true) | ("id", true) => attr.key.as_str(),
3161+ _ => continue,
68243162 };
6825− let value = attr.value.as_deref().unwrap_or("");
6826− svg = set_svg_attr(&svg, target, &html_escape_md(value));
3163+ svg = set_svg_attr(&svg, target, value);
68273164 }
6828− if !style.is_empty() {
6829− // After the file's own `style=`, which stays: these come later, so
6830− // they win where both set a property
6831− let mut value = html_escape_md(&style.join(";"));
6832− if let Some(own) = svg_attr_value(&svg, "style")
6833− .map(|range| svg[range].trim().trim_end_matches(';').to_string())
6834− .filter(|own| !own.is_empty())
6835− {
6836− value = format!("{};{}", own, value);
3165+ Node::Raw(svg)
3166+}
3167+
3168+/// The first `$name|filter` (old filter syntax) in `text`, as (name, filter).
3169+fn old_filter_syntax(text: &str) -> Option<(String, String)> {
3170+ const FILTERS: &[&str] = &[
3171+ "uppercase", "lowercase", "capitalize", "trim", "length", "reverse", "truncate",
3172+ "replace", "default", "lighten", "darken", "alpha", "mix",
3173+ ];
3174+ let mut rest = text;
3175+ while let Some(pos) = rest.find('$') {
3176+ let after = &rest[pos + 1..];
3177+ let end = after
3178+ .find(|c: char| !(c.is_alphanumeric() || matches!(c, '_' | '-' | '.')))
3179+ .unwrap_or(after.len());
3180+ if let Some(filter) = after[end..].strip_prefix('|') {
3181+ let name_end = filter.find(|c: char| !c.is_ascii_alphabetic()).unwrap_or(filter.len());
3182+ if end > 0 && FILTERS.contains(&&filter[..name_end]) {
3183+ return Some((after[..end].to_string(), filter[..name_end].to_string()));
3184+ }
68373185 }
6838− svg = set_svg_attr(&svg, "style", &value);
3186+ rest = &after[end..];
68393187 }
6840− if !left_out.is_empty() {
6841− let alt = left_out.iter().any(|name| name == "alt");
6842− let names = left_out
6843− .iter()
6844− .map(|name| format!("'{}'", name))
6845− .collect::<Vec<_>>()
6846− .join(", ");
6847− let mut message = format!(
6848− "{} can't go on an inline SVG: `@image [inline]` puts the file's own markup into the page, which takes `width` and `height` as lengths, `color` or `fill` (as its fill) and HTML attributes (`class=`, `aria-label=`, ...)",
6849− names
6850− );
6851− if alt {
6852− message.push_str("; an SVG has no alt text: name it with `aria-label=` and `role=img`");
3188+ None
3189+}
3190+
3191+/// Index of the `}` matching the `{` that `s` starts with (skipping
3192+/// braces inside string literals).
3193+fn matching_brace(s: &str) -> Option<usize> {
3194+ let mut depth = 0;
3195+ let mut in_string = false;
3196+ for (i, c) in s.char_indices() {
3197+ match c {
3198+ '"' => in_string = !in_string,
3199+ _ if in_string => {}
3200+ '{' => depth += 1,
3201+ '}' => {
3202+ depth -= 1;
3203+ if depth == 0 {
3204+ return Some(i);
3205+ }
3206+ }
3207+ _ => {}
68533208 }
6854− ctx.diagnostics.push(Diagnostic::new(
6855− code::UNEXPECTED_ARGUMENT,
6856− Severity::Error,
6857− line_num,
6858− message,
6859− ));
68603209 }
6861− Node::Raw(svg)
3210+ None
68623211}
68633212
68643213// ---------------------------------------------------------------------------
68653214// Variable usage tracking
68663215// ---------------------------------------------------------------------------
68673216
6868−/// Record the names a string refers to (by syntax) as used.
3217+/// Scan a string for $name references and record them in the used set.
68693218fn track_var_refs(input: &str, used: &mut HashSet<String>) {
6870− if input.contains('$') {
6871− used.extend(interp::names(input).into_iter().map(String::from));
3219+ if !input.contains('$') {
3220+ return;
3221+ }
3222+ let chars: Vec<char> = input.chars().collect();
3223+ let mut i = 0;
3224+ while i < chars.len() {
3225+ if chars[i] == '$'
3226+ && i + 1 < chars.len()
3227+ && (chars[i + 1].is_alphanumeric() || chars[i + 1] == '_' || chars[i + 1] == '-')
3228+ {
3229+ let start = i + 1;
3230+ let mut end = start;
3231+ while end < chars.len()
3232+ && (chars[end].is_alphanumeric() || chars[end] == '-' || chars[end] == '_')
3233+ {
3234+ end += 1;
3235+ }
3236+ let name: String = chars[start..end].iter().collect();
3237+ used.insert(name);
3238+ i = end;
3239+ } else {
3240+ i += 1;
3241+ }
68723242 }
68733243}
68743244
@@ -6876,63 +3246,49 @@ fn track_var_refs(input: &str, used: &mut HashSet<String>) {
68763246// Unused definition warnings
68773247// ---------------------------------------------------------------------------
68783248
6879−/// Warn about definitions nothing uses, except `exported` ones (the
6880−/// definitions of a library, for the files that include it).
6881−fn check_unused(ctx: &mut ParseContext, exported: &HashSet<String>) {
3249+fn check_unused(ctx: &mut ParseContext) {
68823250 // Check unused @let variables
68833251 for (name, &line) in &ctx.let_lines {
6884− if exported.contains(name) {
6885− // A library's names are for other files (a custom property
6886− // isn't a variable, so it is never listed here)
6887− continue;
3252+ if name.starts_with("--") {
3253+ continue; // CSS vars are always used
68883254 }
68893255 if !ctx.used_variables.contains(name) {
6890− ctx.diagnostics.push(
6891− Diagnostic::new(
6892− code::UNUSED_VARIABLE,
6893− Severity::Warning,
6894− line,
6895− format!("unused variable '${}' (defined but never referenced)", name),
6896− )
6897− .subject(name.as_str()),
6898− );
3256+ ctx.diagnostics.push(Diagnostic {
3257+ line,
3258+ column: None,
3259+ message: format!("unused variable '${}' (defined but never referenced)", name),
3260+ severity: Severity::Warning,
3261+ source_line: None,
3262+ });
68993263 }
69003264 }
69013265
6902− // Check unused attribute bundles (@let name [...]). A `$name` in code
6903− // that doesn't run (an `if()` branch or `@if` not taken) counts too.
3266+ // Check unused attribute bundles (@let name [...])
69043267 for (name, &line) in &ctx.define_lines {
6905− if !ctx.used_defines.contains(name)
6906− && !ctx.used_variables.contains(name)
6907− && !exported.contains(name)
6908− {
6909− ctx.diagnostics.push(
6910− Diagnostic::new(
6911− code::UNUSED_BUNDLE,
6912− Severity::Warning,
6913− line,
6914− format!(
6915− "unused attribute bundle '${}' (defined but never referenced)",
6916− name
6917− ),
6918− )
6919− .subject(name.as_str()),
6920− );
3268+ if !ctx.used_defines.contains(name) {
3269+ ctx.diagnostics.push(Diagnostic {
3270+ line,
3271+ column: None,
3272+ message: format!(
3273+ "unused attribute bundle '${}' (defined but never referenced)",
3274+ name
3275+ ),
3276+ severity: Severity::Warning,
3277+ source_line: None,
3278+ });
69213279 }
69223280 }
69233281
69243282 // Check unused functions (@let name ... with body)
69253283 for (name, &line) in &ctx.fn_lines {
6926− if !ctx.used_functions.contains(name) && !exported.contains(name) {
6927− ctx.diagnostics.push(
6928− Diagnostic::new(
6929− code::UNUSED_FUNCTION,
6930− Severity::Warning,
6931− line,
6932− format!("unused function '@{}' (defined but never called)", name),
6933− )
6934− .subject(name.as_str()),
6935− );
3284+ if !ctx.used_functions.contains(name) {
3285+ ctx.diagnostics.push(Diagnostic {
3286+ line,
3287+ column: None,
3288+ message: format!("unused function '@{}' (defined but never called)", name),
3289+ severity: Severity::Warning,
3290+ source_line: None,
3291+ });
69363292 }
69373293 }
69383294}
@@ -7018,6 +3374,34 @@ fn parse_json_with_error(input: &str) -> Result<JsonValue, String> {
70183374 }
70193375}
70203376
3377+/// Visit the lines of a block in source order, children after their line.
3378+fn for_each_line<'a>(block: &'a [Syntax], f: &mut impl FnMut(&'a Syntax)) {
3379+ for node in block {
3380+ f(node);
3381+ if let Syntax::Line { children, .. } = node {
3382+ for_each_line(children, f);
3383+ }
3384+ }
3385+}
3386+
3387+/// The text of a block whose lines are content, not htmlang (`@head`,
3388+/// `@style`, `@markdown`): each line trimmed, verbatim text as is.
3389+fn block_text(block: &[Syntax]) -> String {
3390+ let mut text = String::new();
3391+ for_each_line(block, &mut |node| match node {
3392+ Syntax::Line { text: line, .. } => {
3393+ text.push_str(line.trim());
3394+ text.push('\n');
3395+ }
3396+ Syntax::Raw { text: raw, .. } => {
3397+ text.push_str(raw);
3398+ text.push('\n');
3399+ }
3400+ _ => {}
3401+ });
3402+ text
3403+}
3404+
70213405fn parse_json_value(chars: &[char], mut pos: usize) -> Option<(JsonValue, usize)> {
70223406 pos = skip_ws(chars, pos);
70233407 if pos >= chars.len() {
@@ -7198,21 +3582,68 @@ fn skip_ws(chars: &[char], mut pos: usize) -> usize {
71983582 pos
71993583}
72003584
7201−/// A JSON value as an htmlang value: an object is a record, an array a
7202−/// list, a string text (never quoted text), `null` empty. A number keeps
7203−/// the text it is written with (`1.50`), and reads as a number.
7204−fn json_value(json: JsonValue) -> Value {
7205− match json {
7206− JsonValue::Null => Value::empty(),
7207− JsonValue::Bool(b) => Value::Bool(b),
7208− JsonValue::Number(n) | JsonValue::Str(n) => Value::Str(n),
7209− JsonValue::Array(items) => Value::list(items.into_iter().map(json_value).collect()),
7210− JsonValue::Object(pairs) => Value::Record(Rc::new(
7211− pairs
7212− .into_iter()
7213− .map(|(key, value)| (key, json_value(value)))
3585+/// Flatten a JSON value into variable assignments.
3586+/// - Top-level object: each key becomes `prefix.key`
3587+/// - Top-level array: `prefix` becomes comma-separated, `prefix._count` set
3588+/// - Array of objects: each item becomes space-separated values for @each destructuring
3589+fn flatten_json(prefix: &str, value: &JsonValue, vars: &mut HashMap<String, String>) {
3590+ match value {
3591+ JsonValue::Str(s) => {
3592+ vars.insert(prefix.to_string(), s.clone());
3593+ }
3594+ JsonValue::Number(n) => {
3595+ vars.insert(prefix.to_string(), n.clone());
3596+ }
3597+ JsonValue::Bool(b) => {
3598+ vars.insert(prefix.to_string(), b.to_string());
3599+ }
3600+ JsonValue::Null => {
3601+ vars.insert(prefix.to_string(), String::new());
3602+ }
3603+ JsonValue::Object(pairs) => {
3604+ for (key, val) in pairs {
3605+ flatten_json(&format!("{}.{}", prefix, key), val, vars);
3606+ }
3607+ }
3608+ JsonValue::Array(items) => {
3609+ // A list: its length under `NAME#` (see `lookup`), its text
3610+ // items joined as its value, and each item as `NAME.INDEX`
3611+ vars.insert(format!("{}#", prefix), items.len().to_string());
3612+ let text: Vec<String> = items
3613+ .iter()
3614+ .map(json_value_to_string)
3615+ .filter(|s| !s.is_empty())
3616+ .collect();
3617+ vars.insert(prefix.to_string(), text.join(", "));
3618+ // Also set indexed access: prefix.0, prefix.1, etc.
3619+ for (i, item) in items.iter().enumerate() {
3620+ flatten_json(&format!("{}.{}", prefix, i), item, vars);
3621+ }
3622+ }
3623+ }
3624+}
3625+
3626+/// Resolve `$name` for an expression: a list if `name` was loaded from a
3627+/// JSON array, else its text.
3628+fn lookup(vars: &HashMap<String, String>, name: &str) -> Option<crate::expr::Value> {
3629+ use crate::expr::Value;
3630+ match vars.get(&format!("{}#", name)).and_then(|n| n.parse::<usize>().ok()) {
3631+ Some(len) => Some(Value::List(
3632+ (0..len)
3633+ .map(|i| vars.get(&format!("{}.{}", name, i)).cloned().unwrap_or_default())
72143634 .collect(),
72153635 )),
3636+ None => vars.get(name).cloned().map(Value::Str),
3637+ }
3638+}
3639+
3640+fn json_value_to_string(v: &JsonValue) -> String {
3641+ match v {
3642+ JsonValue::Str(s) => s.clone(),
3643+ JsonValue::Number(n) => n.clone(),
3644+ JsonValue::Bool(b) => b.to_string(),
3645+ JsonValue::Null => String::new(),
3646+ JsonValue::Array(_) | JsonValue::Object(_) => String::new(),
72163647 }
72173648}
72183649
@@ -7220,29 +3651,6 @@ fn json_value(json: JsonValue) -> Value {
72203651// SVG attribute injection helper
72213652// ---------------------------------------------------------------------------
72223653
7223−/// Where the root `<svg ...>` tag's `attr_name="..."` value is, as a byte
7224−/// range of `svg`. Only the opening tag is read, so a child's attribute is
7225−/// never found, and the name must follow whitespace, so `width` doesn't
7226−/// match `stroke-width`.
7227−fn svg_attr_value(svg: &str, attr_name: &str) -> Option<std::ops::Range<usize>> {
7228− let tag_start = svg.find("<svg")?;
7229− let tag_end = svg[tag_start..]
7230− .find('>')
7231− .map(|p| tag_start + p)
7232− .unwrap_or(svg.len());
7233− let tag = &svg[tag_start..tag_end];
7234− let pattern = format!("{}=\"", attr_name);
7235− let (pos, _) = tag.match_indices(&pattern).find(|(pos, _)| {
7236− tag[..*pos]
7237− .chars()
7238− .next_back()
7239− .is_some_and(char::is_whitespace)
7240− })?;
7241− let value_start = tag_start + pos + pattern.len();
7242− let end = svg[value_start..tag_end].find('"')?;
7243− Some(value_start..value_start + end)
7244−}
7245−
72463654fn set_svg_attr(svg: &str, attr_name: &str, value: &str) -> String {
72473655 // Only the opening <svg ...> tag is touched, so child attributes such as
72483656 // `stroke-width` are left alone.
@@ -7253,14 +3661,26 @@ fn set_svg_attr(svg: &str, attr_name: &str, value: &str) -> String {
72533661 .find('>')
72543662 .map(|p| tag_start + p)
72553663 .unwrap_or(svg.len());
3664+ let tag = &svg[tag_start..tag_end];
72563665
7257− // Replace an existing attribute
7258− if let Some(existing) = svg_attr_value(svg, attr_name) {
7259− let mut result = String::with_capacity(svg.len());
7260− result.push_str(&svg[..existing.start]);
7261− result.push_str(value);
7262− result.push_str(&svg[existing.end..]);
7263− return result;
3666+ // Replace an existing attribute (must be preceded by whitespace so that
3667+ // `width` doesn't match `stroke-width`).
3668+ let pattern = format!("{}=\"", attr_name);
3669+ let existing = tag.match_indices(&pattern).find(|(pos, _)| {
3670+ tag[..*pos]
3671+ .chars()
3672+ .next_back()
3673+ .is_some_and(char::is_whitespace)
3674+ });
3675+ if let Some((pos, _)) = existing {
3676+ let value_start = tag_start + pos + pattern.len();
3677+ if let Some(end) = svg[value_start..tag_end].find('"') {
3678+ let mut result = String::with_capacity(svg.len());
3679+ result.push_str(&svg[..value_start]);
3680+ result.push_str(value);
3681+ result.push_str(&svg[value_start + end..]);
3682+ return result;
3683+ }
72643684 }
72653685
72663686 // Otherwise inject it into the opening tag (before a self-closing `/`).
@@ -7583,10 +4003,7 @@ mod tests {
75834003 #[test]
75844004 fn parses_page_directive() {
75854005 let r = parse_ok("@page My Title\n");
7586− assert_eq!(
7587− r.document.page.map(|p| p.title).as_deref(),
7588− Some("My Title")
7589− );
4006+ assert_eq!(r.document.page_title.as_deref(), Some("My Title"));
75904007 }
75914008
75924009 #[test]
crates/htmlang-core/src/std.hl+46−2
@@ -1,9 +1,53 @@
11-- The htmlang standard library, available in every file. It is ordinary
2−-- htmlang: a file's own @let with the same name takes precedence.
2+-- htmlang: a file's own @let with the same name takes precedence, and
3+-- attributes on a call style the component's root element, so
4+-- `@badge [background red] New` works like a built-in element.
5+
6+-- Small pill for counts and statuses.
7+@let badge
8+ @text [display inline-flex, align-items center, padding 2px 8px, font-size 0.75rem, font-weight 600, justify-content center, border-radius 9999px, line-height 1]
9+ @children
10+
11+-- Label with slightly rounded corners.
12+@let tag
13+ @text [display inline-flex, align-items center, padding 2px 8px, font-size 0.75rem, font-weight 600, border-radius 4px]
14+ @children
15+
16+-- Outlined, fully rounded label.
17+@let chip
18+ @text [display inline-flex, align-items center, column-gap 4px, padding 4px 12px, border-radius 9999px, font-size 0.875rem, border 1 solid currentColor]
19+ @children
20+
21+-- Circular frame for an image or initials.
22+@let avatar
23+ @el [display inline-flex, flex-direction row, align-items center, justify-content center, border-radius 9999px, overflow hidden, flex-shrink 0]
24+ @children
325
426-- Takes up the remaining space in a row or column.
5−@let @spacer
27+@let spacer
628 @el [flex 1]
729
30+-- Text that shows `tip` when hovered.
31+@let tooltip $tip
32+ @text [position relative, cursor help, title=$tip]
33+ @children
34+
35+-- Horizontally scrolling row that snaps to each child.
36+@let carousel
37+ @row [overflow-x auto, scroll-snap-type x mandatory, scrollbar-width none, children:scroll-snap-align start, children:flex-shrink 0]
38+ @children
39+
40+-- Breadcrumb trail: each crumb is an @li.
41+@let breadcrumb
42+ @nav [aria-label=breadcrumb]
43+ @ol [display flex, flex-direction row, flex-wrap wrap, gap 8px]
44+ @children
45+
46+-- Loading placeholder: [$skeleton]
47+@let skeleton [background linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%), background-size 200% 100%, animation hl-skeleton 1.5s ease-in-out infinite]
48+
849-- Cut text off at one line with an ellipsis: [$truncate]
950@let truncate [overflow hidden, text-overflow ellipsis, white-space nowrap]
51+
52+-- Hide scrollbars but keep scrolling: [$no-scrollbar]
53+@let no-scrollbar [scrollbar-width none]
crates/htmlang-core/src/syntax.rs+371−2826

This diff is too big to show here.

crates/htmlang-core/src/value.rsdeleted−406

This diff is too big to show here.

crates/htmlang-core/src/vocab.rs+157−776

This diff is too big to show here.

crates/htmlang-wasm/playground/index.htmldeleted−113

This diff is too big to show here.

crates/htmlang-wasm/src/lib.rs+16−77

This diff is too big to show here.

editors/vscode/README.md+27−86

This diff is too big to show here.

editors/vscode/snippets/htmlang.json+175−248

This diff is too big to show here.

editors/vscode/syntaxes/htmlang.tmLanguage.json+30−253

This diff is too big to show here.

examples/blog.hl+48−86

This diff is too big to show here.

examples/blog.html.map+1−1

This diff is too big to show here.

examples/demo.hl+303−271

This diff is too big to show here.

examples/demo.html+3−800

This diff is too big to show here.

examples/demo.html.map+1−1

This diff is too big to show here.

examples/docs.hl+61−132

This diff is too big to show here.

examples/docs.html.map+1−1

This diff is too big to show here.

examples/landing.hl+65−131

This diff is too big to show here.

examples/landing.html.map+1−1

This diff is too big to show here.

examples/posts.jsondeleted−27

This diff is too big to show here.

src/bin/htmlang_lsp/analysis.rs+888−1294

This diff is too big to show here.

src/bin/htmlang_lsp/completion.rs+158−1359

This diff is too big to show here.

src/bin/htmlang_lsp/docs.rs+99−356

This diff is too big to show here.

src/bin/htmlang_lsp/hover.rs+91−349

This diff is too big to show here.

src/bin/htmlang_lsp/main.rs+108−55

This diff is too big to show here.

src/bin/htmlang_lsp/navigation.rs+260−504

This diff is too big to show here.

src/bin/htmlang_lsp/state.rs+3−41

This diff is too big to show here.

src/bin/htmlang_lsp/tree.rsdeleted−222

This diff is too big to show here.

src/cli.rs+6−4

This diff is too big to show here.

src/fmt.rs+401−394

This diff is too big to show here.

src/lib.rs+1−3

This diff is too big to show here.

src/main.rs+159−215

This diff is too big to show here.

src/serve.rs+50−128

This diff is too big to show here.

src/upgrade.rsnew file+2012

This diff is too big to show here.

tests/common/mod.rsdeleted−140

This diff is too big to show here.

tests/docs.rs+19−115

This diff is too big to show here.

tests/editor.rsdeleted−157

This diff is too big to show here.

tests/fmt.rsdeleted−55

This diff is too big to show here.

tests/regressions.rs+47−2065

This diff is too big to show here.

tests/snapshots.rs+667−4342

This diff is too big to show here.

tests/snapshots/accessibility.html+1−1

This diff is too big to show here.

tests/snapshots/alignment.html+1−1

This diff is too big to show here.

tests/snapshots/anchor_positioning.html+1−1

This diff is too big to show here.

tests/snapshots/animate_shorthand.html+1−1

This diff is too big to show here.

tests/snapshots/animations.html+1−1

This diff is too big to show here.

tests/snapshots/arithmetic.html+1−1

This diff is too big to show here.

tests/snapshots/attributes.html+1−1

This diff is too big to show here.

tests/snapshots/basic_elements.html+1−1

This diff is too big to show here.

tests/snapshots/breadcrumb.hlnew file+4

This diff is too big to show here.

tests/snapshots/breadcrumb.htmlnew file+1

This diff is too big to show here.

tests/snapshots/chain_operator.html+1−1

This diff is too big to show here.

tests/snapshots/clamp_css.html+1−1

This diff is too big to show here.

tests/snapshots/code_samples.hldeleted−28

This diff is too big to show here.

tests/snapshots/code_samples.htmldeleted−5

This diff is too big to show here.

tests/snapshots/color_scheme.html+1−1

This diff is too big to show here.

tests/snapshots/colour_variants.hldeleted−12

This diff is too big to show here.

tests/snapshots/colour_variants.htmldeleted−1

This diff is too big to show here.

tests/snapshots/computed_let.html+1−1

This diff is too big to show here.

tests/snapshots/conditionals.html+1−1

This diff is too big to show here.

tests/snapshots/container_queries.hl+2−2

This diff is too big to show here.

tests/snapshots/container_queries.html+1−1

This diff is too big to show here.

tests/snapshots/css_property.html+1−1

This diff is too big to show here.

tests/snapshots/css_shorthands.hl+4−1

This diff is too big to show here.

tests/snapshots/css_shorthands.html+1−1

This diff is too big to show here.

tests/snapshots/css_units.html+1−1

This diff is too big to show here.

tests/snapshots/css_vars.hl+5−5

This diff is too big to show here.

tests/snapshots/css_vars.html+1−1

This diff is too big to show here.

tests/snapshots/custom_properties.hldeleted−47

This diff is too big to show here.

tests/snapshots/custom_properties.htmldeleted−1

This diff is too big to show here.

tests/snapshots/dark_mode.html+1−1

This diff is too big to show here.

tests/snapshots/data_directive.html+1−1

This diff is too big to show here.

tests/snapshots/direction_attr.html+1−1

This diff is too big to show here.

tests/snapshots/each_destructuring.html+1−1

This diff is too big to show here.

tests/snapshots/each_else.html+1−1

This diff is too big to show here.

tests/snapshots/each_index.html+1−1

This diff is too big to show here.

tests/snapshots/each_range.html+1−1

This diff is too big to show here.

tests/snapshots/each_step.html+1−1

This diff is too big to show here.

tests/snapshots/element_prefixes.hldeleted−42

This diff is too big to show here.

tests/snapshots/element_prefixes.htmldeleted−3

This diff is too big to show here.

tests/snapshots/else_if.html+1−1

This diff is too big to show here.

tests/snapshots/env_directive.html+1−1

This diff is too big to show here.

tests/snapshots/escapes_and_quotes.hldeleted−19

This diff is too big to show here.

tests/snapshots/escapes_and_quotes.htmldeleted−1

This diff is too big to show here.

tests/snapshots/extra_css.html+1−1

This diff is too big to show here.

tests/snapshots/fn_defaults.hl+1−1

This diff is too big to show here.

tests/snapshots/fn_defaults.html+1−1

This diff is too big to show here.

tests/snapshots/form_elements.html+1−1

This diff is too big to show here.

tests/snapshots/fragment.html+1−1

This diff is too big to show here.

tests/snapshots/function_calls.hldeleted−66

This diff is too big to show here.

tests/snapshots/function_calls.htmldeleted−1

This diff is too big to show here.

tests/snapshots/function_definitions.hldeleted−35

This diff is too big to show here.

tests/snapshots/function_definitions.htmldeleted−1

This diff is too big to show here.

tests/snapshots/functions.hl+2−2

This diff is too big to show here.

tests/snapshots/functions.html+1−1

This diff is too big to show here.

tests/snapshots/grid_areas.html+1−1

This diff is too big to show here.

tests/snapshots/has_pseudo.html+1−1

This diff is too big to show here.

tests/snapshots/hidden_attr.html+1−1

This diff is too big to show here.

tests/snapshots/html_elements.hldeleted−42

This diff is too big to show here.

tests/snapshots/html_elements.htmldeleted−1

This diff is too big to show here.

tests/snapshots/if_expr.hl+3−21

This diff is too big to show here.

tests/snapshots/if_expr.html+1−1

This diff is too big to show here.

tests/snapshots/initial_letter.html+1−1

This diff is too big to show here.

tests/snapshots/inline_text.html+1−1

This diff is too big to show here.

tests/snapshots/lang_directive.hl+1−1

This diff is too big to show here.

tests/snapshots/lang_directive.html+1−1

This diff is too big to show here.

tests/snapshots/layer_wrapping.html+1−1

This diff is too big to show here.

tests/snapshots/layout_direction.hldeleted−33

This diff is too big to show here.

tests/snapshots/layout_direction.htmldeleted−1

This diff is too big to show here.

tests/snapshots/layout_modes.hldeleted−44

This diff is too big to show here.

tests/snapshots/layout_modes.htmldeleted−2

This diff is too big to show here.

tests/snapshots/leading_argument.hldeleted−50

This diff is too big to show here.

tests/snapshots/leading_argument.htmldeleted−1

This diff is too big to show here.

tests/snapshots/list_elements.html+1−1

This diff is too big to show here.

tests/snapshots/loops.html+1−1

This diff is too big to show here.

tests/snapshots/manifest_directive.html+1−1

This diff is too big to show here.

tests/snapshots/markdown_block.html+1−1

This diff is too big to show here.

tests/snapshots/match_directive.html+1−1

This diff is too big to show here.

tests/snapshots/media_elements.html+1−1

This diff is too big to show here.

tests/snapshots/media_extended.html+1−1

This diff is too big to show here.

tests/snapshots/meta_head.html+1−1

This diff is too big to show here.

tests/snapshots/mixin_spread.hl+1−1

This diff is too big to show here.

tests/snapshots/mixin_spread.html+1−1

This diff is too big to show here.

tests/snapshots/named_slots.hl+1−1

This diff is too big to show here.

tests/snapshots/named_slots.html+1−1

This diff is too big to show here.

tests/snapshots/names_and_values.hldeleted−18

This diff is too big to show here.

tests/snapshots/names_and_values.htmldeleted−1

This diff is too big to show here.

tests/snapshots/new_css.html+1−1

This diff is too big to show here.

tests/snapshots/new_css_attrs.hl+1−1

This diff is too big to show here.

tests/snapshots/new_css_attrs.html+1−1

This diff is too big to show here.

tests/snapshots/new_css_properties.html+1−1

This diff is too big to show here.

tests/snapshots/new_css_properties_2.html+1−1

This diff is too big to show here.

tests/snapshots/new_css_properties_3.html+1−1

This diff is too big to show here.

tests/snapshots/new_css_properties_4.html+1−1

This diff is too big to show here.

tests/snapshots/new_directives.hl+1−4

This diff is too big to show here.

tests/snapshots/new_directives.html+2−3

This diff is too big to show here.

tests/snapshots/new_elements.html+1−1

This diff is too big to show here.

tests/snapshots/new_elements_2.html+1−1

This diff is too big to show here.

tests/snapshots/new_elements_3.html+1−1

This diff is too big to show here.

tests/snapshots/new_elements_4.hl+11−2

This diff is too big to show here.

tests/snapshots/new_elements_4.html+1−1

This diff is too big to show here.

tests/snapshots/new_elements_5.hlnew file+19

This diff is too big to show here.

tests/snapshots/new_elements_5.htmlnew file+1

This diff is too big to show here.

tests/snapshots/new_elements_6.html+1−1

This diff is too big to show here.

tests/snapshots/new_html_attrs.html+1−1

This diff is too big to show here.

tests/snapshots/new_pseudos.html+1−1

This diff is too big to show here.

tests/snapshots/no_page.html+1−1

This diff is too big to show here.

tests/snapshots/nth_pseudo.hl+2−2

This diff is too big to show here.

tests/snapshots/nth_pseudo.html+1−1

This diff is too big to show here.

tests/snapshots/og_directive.html+1−1

This diff is too big to show here.

tests/snapshots/one_css_path.hldeleted−14

This diff is too big to show here.

tests/snapshots/one_css_path.htmldeleted−4

This diff is too big to show here.

tests/snapshots/page_root.hldeleted−15

This diff is too big to show here.

tests/snapshots/page_root.htmldeleted−1

This diff is too big to show here.

tests/snapshots/parameters.hldeleted−31

This diff is too big to show here.

tests/snapshots/parameters.htmldeleted−1

This diff is too big to show here.

tests/snapshots/popover_api.html+1−1

This diff is too big to show here.

tests/snapshots/positional.html+1−1

This diff is too big to show here.

tests/snapshots/prefixes_compose.hldeleted−17

This diff is too big to show here.

tests/snapshots/prefixes_compose.htmldeleted−1

This diff is too big to show here.

tests/snapshots/pseudo_elements.html+1−1

This diff is too big to show here.

tests/snapshots/pseudo_states.html+1−1

This diff is too big to show here.

tests/snapshots/pseudo_states_extended.hl+2−2

This diff is too big to show here.

tests/snapshots/pseudo_states_extended.html+1−1

This diff is too big to show here.

tests/snapshots/px_rule.hldeleted−20

This diff is too big to show here.

tests/snapshots/px_rule.htmldeleted−1

This diff is too big to show here.

tests/snapshots/raw_html.html+1−1

This diff is too big to show here.

tests/snapshots/repeat_directive.html+1−1

This diff is too big to show here.

tests/snapshots/responsive.html+1−1

This diff is too big to show here.

tests/snapshots/responsive_images.hl+1−1

This diff is too big to show here.

tests/snapshots/responsive_images.html+1−1

This diff is too big to show here.

tests/snapshots/scope_css.html+1−1

This diff is too big to show here.

tests/snapshots/script_element.html+1−1

This diff is too big to show here.

tests/snapshots/scroll_driven_animations.html+1−1

This diff is too big to show here.

tests/snapshots/selection_pseudo.html+1−1

This diff is too big to show here.

tests/snapshots/semantic_elements.html+1−1

This diff is too big to show here.

tests/snapshots/sizing.html+1−1

This diff is too big to show here.

tests/snapshots/slots_and_children.hldeleted−59

This diff is too big to show here.

tests/snapshots/slots_and_children.htmldeleted−1

This diff is too big to show here.

tests/snapshots/starting_style.html+1−1

This diff is too big to show here.

tests/snapshots/stress_deeply_nested.hl+20−20

This diff is too big to show here.

tests/snapshots/stress_deeply_nested.html+1−1

This diff is too big to show here.

tests/snapshots/stress_large.hl+139−139

This diff is too big to show here.

tests/snapshots/stress_large.html+1−1

This diff is too big to show here.

tests/snapshots/string_interpolation.html+1−1

This diff is too big to show here.

tests/snapshots/style_block.html+1−1

This diff is too big to show here.

tests/snapshots/subgrid_css.html+1−1

This diff is too big to show here.

tests/snapshots/table_elements.html+1−1

This diff is too big to show here.

tests/snapshots/text_everywhere.hldeleted−41

This diff is too big to show here.

tests/snapshots/text_everywhere.htmldeleted−3

This diff is too big to show here.

tests/snapshots/translations_i18n.html+1−1

This diff is too big to show here.

tests/snapshots/unless_directive.html+1−1

This diff is too big to show here.

tests/snapshots/values_and_scope.hldeleted−62

This diff is too big to show here.

tests/snapshots/values_and_scope.htmldeleted−1

This diff is too big to show here.

tests/snapshots/variable_filters.html+1−1

This diff is too big to show here.

tests/snapshots/variable_slots.hldeleted−18

This diff is too big to show here.

tests/snapshots/variable_slots.htmldeleted−1

This diff is too big to show here.

tests/snapshots/variables_defines.html+1−1

This diff is too big to show here.

tests/snapshots/view_transitions.html+1−1

This diff is too big to show here.

tests/snapshots/with_directive.html+1−1

This diff is too big to show here.