@@ -1,8 +1,7 @@
1use std::collections::HashMap;
1use std::collections::HashMap;
2−use std::hash::Hash;
2+use std::hash::{Hash, Hasher};
4use crate::ast::*;
4use crate::ast::*;
5−use crate::vocab::with_px;
7// ---------------------------------------------------------------------------
6// ---------------------------------------------------------------------------
8// Style collector: deduplicates CSS and assigns class names
7// Style collector: deduplicates CSS and assigns class names
@@ -17,315 +16,52 @@ const BREAKPOINTS: &[(&str, &str)] = &[
17 ("2xl", "1536px"),
16 ("2xl", "1536px"),
20−/// The prefix of every generated class (`hl-2k9xq0m`), which keeps them
19+/// Generate short CSS class names: a, b, ..., z, a0, a1, ..., z9, aa, ab, ...
21−/// out of the author's own class names.
20+pub(crate) fn short_class_name(idx: usize) -> String {
22−pub const CLASS_PREFIX: &str = "hl-";
21+ if idx < 26 {
23−
22+ return String::from((b'a' + idx as u8) as char);
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;
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);
40− hash = (hash ^ (hash >> 30)).wrapping_mul(0xbf58_476d_1ce4_e5b9);
41− hash = (hash ^ (hash >> 27)).wrapping_mul(0x94d0_49bb_1331_11eb);
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";
51− let digit = DIGITS[(n % 36) as usize] as char;
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)]
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)]
74− selector: Vec<String>,
78− /// The condition of an attribute's key, and the name after its
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()),
89− condition.at.sort_unstable();
90− condition.at.dedup();
94− /// Only the at-rule part: a direction under `hover:` is the one without
96− fn at_only(at: &[usize]) -> Condition {
99− selector: Vec::new(),
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)
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> {
113− .position(|p| crate::vocab::element_prefix(p).is_some())
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| {
124− .any(|&b| crate::vocab::at_rule_implied(a, b))
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))
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>);
142−fn at_order(at: &[usize]) -> AtOrder {
145− at.last().copied().unwrap_or(0),
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
159−type SelectorOrder = (bool, Vec<(usize, String)>, Vec<(usize, String)>);
161−fn selector_order(selector: &[String]) -> SelectorOrder {
162− let table = crate::vocab::PSEUDOS;
163− let ranked = |chain: &[String]| -> Vec<(usize, String)> {
167− let name = crate::vocab::pseudo_name(p);
170− .position(|(q, _)| *q == name)
171− .unwrap_or(table.len());
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])),
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) {
190− .position(|p| crate::vocab::element_prefix(p).is_some())
191− .unwrap_or(chain.len());
193− selector_order(&chain[..at]),
194− chain.get(at).cloned().unwrap_or_default(),
195− selector_order(chain.get(at + 1..).unwrap_or_default()),
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);
214− } else if let Some(pseudo) = crate::vocab::pseudo_selector(prefix) {
215− out.push_str(&pseudo);
218− out
24+ let mut n = idx - 26;
219−}
25+ let mut name = String::new();
220−
26+ // First char is always a letter
221−/// The rule for the elements an element prefix picks out inside the
27+ name.push((b'a' + (n % 26) as u8) as char);
222−/// element with the class `class` (see [`Condition::inside`]): the scope's
28+ n /= 26;
223−/// root, from the selector prefixes before it (`hover:@td:` is inside a
29+ loop {
224−/// hovered element), and the selector for the elements, from those after
30+ name.push((b'a' + (n % 36).min(25) as u8) as char);
225−/// it (`@td:hover:` is a hovered cell). `:scope td` leaves out the root
31+ if n < 36 {
226−/// itself, so `@ul [@ul:...]` styles the lists inside, not its own. `None`
32+ break;
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);
238− Some((root, target))
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()
246− .unwrap_or_default();
247− let name = prefix.trim_end_matches(':');
248− let width = |name: &str| {
251− .find(|(n, _)| *n == name)
252− .map_or("0", |(_, w)| *w)
254− let (kind, feature, value) = if let Some(size) = name.strip_prefix("cq-") {
255− ("@container", "min-width", width(size))
259− return "@media print".to_string();
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)),
269− format!("{} ({}: {})", kind, feature, value)
271− format!("{}({}:{})", kind, feature, value)
273−}
36+ // Reverse so it reads naturally
274−
37+ name.chars().rev().collect()
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
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}"));
286− for prefix in &condition.selector {
287− text.push_str(prefix);
291− text.push_str(body);
294− text.push_str(distinct);
298struct StyleEntry {
40struct StyleEntry {
299 class_name: String,
41 class_name: String,
300− /// The hash of the style, which names the class
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,
42+ base: String,
308− /// The element's rules: under each condition, its declarations, in the
43+ /// (CSS selector suffix, css_rules) — e.g. (":hover", "color:red;")
309− /// order they are written
44+ pseudo: Vec<(String, String)>,
310− rules: Vec<(Condition, String)>,
45+ /// Responsive overrides: (breakpoint_prefix, css)
311− /// What else tells two elements with the same CSS apart: the rules
46+ responsive: Vec<(String, String)>,
312− /// keyed on this class (see [`StyleCollector::keyed`]). Not written.
47+ /// Dark mode overrides
313− distinct: String,
50+ print: String,
52+ motion_reduce: String,
55+ /// Container query overrides: (breakpoint_prefix, css)
56+ container: Vec<(String, String)>,
316struct StyleCollector {
59struct StyleCollector {
317 entries: Vec<StyleEntry>,
60 entries: Vec<StyleEntry>,
318− /// Maps a style's hash to its entries (more than one only when two
61+ /// Maps a pre-hashed style signature to an index into `entries`.
319− /// styles hash alike, which the full comparison tells apart).
62+ /// Using u64 as the key keeps lookups allocation-free; on the rare case of
63+ /// a hash collision we fall back to a full equality check against the entry.
320 index: HashMap<u64, Vec<usize>>,
64 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)>,
331impl StyleCollector {
67impl StyleCollector {
@@ -333,328 +69,342 @@ impl StyleCollector {
333 StyleCollector {
69 StyleCollector {
334 entries: Vec::new(),
70 entries: Vec::new(),
335 index: HashMap::new(),
71 index: HashMap::new(),
336− names: std::collections::HashSet::new(),
338− keyed_seen: std::collections::HashSet::new(),
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);
350 /// Returns a class name for this style combination, or None if all empty.
75 /// Returns a class name for this style combination, or None if all empty.
76+ #[allow(clippy::too_many_arguments)]
351 fn get_class(
77 fn get_class(
352 &mut self,
78 &mut self,
353− defaults: String,
79+ base: String,
354− mut rules: Vec<(Condition, String)>,
80+ pseudo: Vec<(String, String)>,
355− distinct: String,
81+ responsive: Vec<(String, String)>,
85+ motion_reduce: String,
88+ container: Vec<(String, String)>,
356 ) -> Option<String> {
89 ) -> Option<String> {
357− rules.retain(|(_, body)| !body.is_empty());
90+ if base.is_empty()
358− if defaults.is_empty() && rules.is_empty() {
91+ && pseudo.is_empty()
92+ && responsive.is_empty()
95+ && motion_safe.is_empty()
96+ && motion_reduce.is_empty()
97+ && landscape.is_empty()
98+ && portrait.is_empty()
99+ && container.is_empty()
359 return None;
101 return None;
361− rules.sort_by_cached_key(|(condition, _)| condition.order());
103+ use std::collections::hash_map::DefaultHasher;
362− let style = stable_hash(&style_text(&defaults, &rules, &distinct));
104+ let mut h = DefaultHasher::new();
363−
105+ base.hash(&mut h);
106+ pseudo.hash(&mut h);
107+ responsive.hash(&mut h);
110+ motion_safe.hash(&mut h);
111+ motion_reduce.hash(&mut h);
112+ landscape.hash(&mut h);
113+ portrait.hash(&mut h);
114+ container.hash(&mut h);
115+ let sig = h.finish();
364− if let Some(indices) = self.index.get(&style) {
117+ if let Some(indices) = self.index.get(&sig) {
365 for &idx in indices {
118 for &idx in indices {
366 let e = &self.entries[idx];
119 let e = &self.entries[idx];
367− if e.defaults == defaults && e.rules == rules && e.distinct == distinct {
120+ if e.base == base
121+ && e.pseudo == pseudo
122+ && e.responsive == responsive
125+ && e.motion_safe == motion_safe
126+ && e.motion_reduce == motion_reduce
127+ && e.landscape == landscape
128+ && e.portrait == portrait
129+ && e.container == container
368 return Some(e.class_name.clone());
131 return Some(e.class_name.clone());
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
375 let idx = self.entries.len();
135 let idx = self.entries.len();
376− let name = (CLASS_DIGITS..=13)
136+ let name = short_class_name(idx);
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());
381 self.entries.push(StyleEntry {
137 self.entries.push(StyleEntry {
382 class_name: name.clone(),
138 class_name: name.clone(),
384− defaults,
140+ pseudo,
385− rules,
141+ responsive,
388− self.index.entry(style).or_default().push(idx);
150+ self.index.entry(sig).or_default().push(idx);
389 Some(name)
151 Some(name)
392− /// The classes given, in the order they were
154+ fn to_css_formatted(&self, dev: bool, use_layer: bool) -> String {
393− fn classes(&self) -> impl Iterator<Item = Class> + '_ {
155+ let mut css = String::new();
394− self.entries.iter().map(|e| Class {
156+ let (sp, nl) = if dev { (" ", "\n") } else { ("", "") };
395− name: e.class_name.clone(),
400− /// All generated rules, in three layers (see [`LAYERS`]): the element
158+ // Wrap in @layer for specificity management
401− /// kinds' defaults in `hl-kind` (`:where(.hl-a)`), the rules for the
159+ if use_layer {
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])),
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(","));
424− kind.push_str(&format!(" {} {{{}}}\n", selector, body));
161+ css.push_str("@layer htmlang {\n");
163+ css.push_str("@layer htmlang{");
167+ // Non-responsive rules
168+ for e in &self.entries {
169+ if !e.base.is_empty() {
170+ if use_layer && dev {
426− kind.push_str(&format!("{}{{{}}}", selector, body));
171+ css.push_str(&format!(" .{}{sp}{{{}}}{nl}", e.class_name, e.base));
173+ css.push_str(&format!(".{}{sp}{{{}}}{nl}", e.class_name, e.base));
176+ for (selector, pseudo_css) in &e.pseudo {
177+ if !pseudo_css.is_empty() {
178+ if use_layer && dev {
179+ css.push_str(&format!(
180+ " .{}{}{sp}{{{}}}{nl}",
181+ e.class_name, selector, pseudo_css
184+ css.push_str(&format!(
185+ ".{}{}{sp}{{{}}}{nl}",
186+ e.class_name, selector, pseudo_css
193+ // Responsive rules grouped by breakpoint
194+ for &(bp_name, bp_width) in BREAKPOINTS {
195+ let mut bp_css = String::new();
196+ for e in &self.entries {
197+ for (bp, rule_css) in &e.responsive {
198+ if bp == bp_name && !rule_css.is_empty() {
200+ bp_css.push_str(&format!(" .{} {{{}}}\n", e.class_name, rule_css));
202+ bp_css.push_str(&format!(".{}{{{}}}", e.class_name, rule_css));
207+ if !bp_css.is_empty() {
209+ css.push_str(&format!(
210+ "@media (min-width: {}) {{\n{}}}\n",
214+ css.push_str(&format!("@media(min-width:{}){{{}}}", bp_width, bp_css));
430− let mut inside = self.blocks(true, dev);
219+ // Dark mode rules
431− // A function's scoped `@style`, nested under its class
220+ let mut dark_css = String::new();
432− for block in scoped {
221+ for e in &self.entries {
222+ if !e.dark.is_empty() {
224+ dark_css.push_str(&format!(" .{} {{{}}}\n", e.class_name, e.dark));
226+ dark_css.push_str(&format!(".{}{{{}}}", e.class_name, e.dark));
230+ if !dark_css.is_empty() {
434− inside.push_str(block);
232+ css.push_str(&format!(
435− inside.push('\n');
233+ "@media (prefers-color-scheme: dark) {{\n{}}}\n",
437− inside.push_str(&compact_css(block));
237+ css.push_str(&format!(
238+ "@media(prefers-color-scheme:dark){{{}}}",
441− let mut css = String::new();
245+ let mut print_css = String::new();
442− for (name, rules) in [
246+ for e in &self.entries {
444− ("hl-inside", inside),
445− ("htmlang", self.blocks(false, dev)),
447− if rules.is_empty() {
247+ if !e.print.is_empty() {
448− continue;
248+ if dev {
249+ print_css.push_str(&format!(" .{} {{{}}}\n", e.class_name, e.print));
251+ print_css.push_str(&format!(".{}{{{}}}", e.class_name, e.print));
255+ if !print_css.is_empty() {
451− css.push_str(&format!("@layer {} {{\n{}}}\n", name, rules));
257+ css.push_str(&format!("@media print {{\n{}}}\n", print_css));
453− css.push_str(&format!("@layer {}{{{}}}", name, rules));
259+ css.push_str(&format!("@media print{{{}}}", print_css));
459− /// The rules of every block of at-rules, in order: those for the
263+ // Motion safe rules
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();
264+ let mut motion_safe_css = String::new();
465− self.entries.iter().flat_map(move |e| {
265+ for e in &self.entries {
466− e.rules
266+ if !e.motion_safe.is_empty() {
468− .filter(move |(c, _)| c.inside().is_some() == inside)
469− .map(move |(c, body)| (e, c, body))
472− let mut blocks: Vec<&[usize]> = vec![&[]];
473− let keyed = self.keyed.iter().filter(|_| !inside);
475− .map(|(_, c, _)| c.at.as_slice())
476− .chain(keyed.map(|(at, _, _)| at.as_slice()));
478− if !blocks.contains(&at) {
482− blocks.sort_by_key(|at| at_order(at));
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 {
267+ if dev {
489− " ".repeat(depth.max(1))
268+ motion_safe_css
490− } else {
269+ .push_str(&format!(" .{} {{{}}}\n", e.class_name, e.motion_safe));
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
498− let keyed: Vec<(&str, &str)> = self
501− .filter(|(a, _, _)| a.as_slice() == at)
502− .map(|(_, selector, body)| (selector.as_str(), body.as_str()))
504− emit_selector_rules(&mut inner, &keyed, &indent, dev);
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);
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
519− let mut scopes: Vec<(String, Vec<(String, &str)>)> = Vec::new();
520− for chain in chains {
521− let Some(element) = chain
523− .position(|p| crate::vocab::element_prefix(p).is_some())
528− rules().filter(|(_, c, _)| c.at == at && c.selector == chain)
530− let Some((root, target)) = scoped_selector(&e.class_name, chain, element)
534− match scopes.iter_mut().find(|(r, _)| *r == root) {
535− Some((_, targets)) => targets.push((target, body)),
536− None => scopes.push((root, vec![(target, body)])),
540− let inner_indent = if dev {
541− format!("{} ", indent)
543− String::new()
271+ motion_safe_css.push_str(&format!(".{}{{{}}}", e.class_name, e.motion_safe));
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 { "}" });
275+ if !motion_safe_css.is_empty() {
277+ css.push_str(&format!(
278+ "@media (prefers-reduced-motion: no-preference) {{\n{}}}\n",
556− chains.sort_by_cached_key(|chain| selector_order(chain));
282+ css.push_str(&format!(
557− for chain in chains {
283+ "@media(prefers-reduced-motion:no-preference){{{}}}",
558− let pairs: Vec<(String, &str)> = rules()
284+ motion_safe_css
559− .filter(|(_, c, _)| c.at == at && c.selector == chain)
285+ ));
560− .map(|(e, _, body)| (selector(&e.class_name, chain), body.as_str()))
286+ }
562− emit_grouped_rules(&mut inner, &pairs, &indent, dev);
288+
289+ // Motion reduce rules
290+ let mut motion_reduce_css = String::new();
291+ for e in &self.entries {
292+ if !e.motion_reduce.is_empty() {
295+ .push_str(&format!(" .{} {{{}}}\n", e.class_name, e.motion_reduce));
298+ .push_str(&format!(".{}{{{}}}", e.class_name, e.motion_reduce));
565− if inner.is_empty() {
302+ if !motion_reduce_css.is_empty() {
566− continue;
303+ if dev {
304+ css.push_str(&format!(
305+ "@media (prefers-reduced-motion: reduce) {{\n{}}}\n",
309+ css.push_str(&format!(
310+ "@media(prefers-reduced-motion:reduce){{{}}}",
568− // Each at-rule wraps the next, outermost first
314+ }
569− for (level, &rank) in at.iter().enumerate().rev() {
315+
570− let pad = if dev {
316+ // Landscape rules
573− String::new()
317+ let mut landscape_css = String::new();
574− };
318+ for e in &self.entries {
319+ if !e.landscape.is_empty() {
575− inner = if dev {
320+ if dev {
576− format!("{pad}{} {{\n{inner}{pad}}}\n", at_rule(rank, true))
321+ landscape_css.push_str(&format!(" .{} {{{}}}\n", e.class_name, e.landscape));
578− format!("{}{{{inner}}}", at_rule(rank, false))
323+ landscape_css.push_str(&format!(".{}{{{}}}", e.class_name, e.landscape));
327+ if !landscape_css.is_empty() {
329+ css.push_str(&format!(
330+ "@media (orientation: landscape) {{\n{}}}\n",
334+ css.push_str(&format!(
335+ "@media(orientation:landscape){{{}}}",
581− css.push_str(&inner);
587−/// Emit CSS rules from `(selector, body)` pairs, merging identical bodies
341+ // Portrait rules
588−/// into a single selector-list rule (e.g. `.a,.b{body}`). The first occurrence
342+ let mut portrait_css = String::new();
589−/// of each distinct body determines ordering, so output stays deterministic
343+ for e in &self.entries {
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) {
592− if pairs.is_empty() {
595− // Group in first-occurrence order.
596− let mut order: Vec<&str> = Vec::new();
597− let mut groups: HashMap<&str, Vec<&str>> = HashMap::new();
598− for (selector, body) in pairs {
599− if body.is_empty() {
344+ if !e.portrait.is_empty() {
600− continue;
345+ if dev {
346+ portrait_css.push_str(&format!(" .{} {{{}}}\n", e.class_name, e.portrait));
348+ portrait_css.push_str(&format!(".{}{{{}}}", e.class_name, e.portrait));
602− if !groups.contains_key(body) {
352+ if !portrait_css.is_empty() {
603− order.push(body);
353+ if dev {
354+ css.push_str(&format!(
355+ "@media (orientation: portrait) {{\n{}}}\n",
359+ css.push_str(&format!("@media(orientation:portrait){{{}}}", portrait_css));
605− groups.entry(body).or_default().push(selector);
607− let sp = if dev { " " } else { "" };
608− let nl = if dev { "\n" } else { "" };
609− for body in &order {
610− out.push_str(indent);
611− out.push_str(&groups[body].join(","));
620−/// Emit `(selector, body)` rules in their order, merging a run of rules
363+ // Container query rules grouped by breakpoint
621−/// with the same body into one rule with a selector list (the order
364+ for &(bp_name, bp_width) in BREAKPOINTS {
622−/// matters: two rules may apply to one element).
365+ let mut cq_css = String::new();
623−fn emit_selector_rules(out: &mut String, rules: &[(&str, &str)], indent: &str, dev: bool) {
366+ for e in &self.entries {
624− let mut i = 0;
367+ for (bp, rule_css) in &e.container {
625− while i < rules.len() {
368+ if bp == bp_name && !rule_css.is_empty() {
626− let body = rules[i].1;
369+ if dev {
627− let run = rules[i..].iter().take_while(|(_, b)| *b == body).count();
370+ cq_css.push_str(&format!(" .{} {{{}}}\n", e.class_name, rule_css));
628− if !body.is_empty() {
371+ } else {
629− let selectors: Vec<&str> = rules[i..i + run].iter().map(|(s, _)| *s).collect();
372+ cq_css.push_str(&format!(".{}{{{}}}", e.class_name, rule_css));
630− out.push_str(indent);
373+ }
631− out.push_str(&selectors.join(","));
374+ }
633− out.push(' ');
376+ }
377+ if !cq_css.is_empty() {
379+ css.push_str(&format!(
380+ "@container (min-width: {}) {{\n{}}}\n",
384+ css.push_str(&format!("@container(min-width:{}){{{}}}", bp_width, cq_css));
635− out.push('{');
387+ }
636− out.push_str(body);
388+
637− out.push('}');
389+ // Close @layer
639− out.push('\n');
392+ css.push_str("}\n");
646struct GenContext {
402struct GenContext {
647 dev: bool,
403 dev: bool,
648 depth: usize,
404 depth: usize,
649 has_interactive: bool,
406 has_interactive: bool,
650− /// Writing inside a text element, at any depth: htmlang's own `<div>`s
407+ has_defer: bool,
651− /// are `<span>`s there, which text can hold.
653− /// How the element whose children are being written lays them out
655− /// Writing the children of a `@picture`, where `@source`'s leading
656− /// argument is its `srcset`
660impl GenContext {
410impl GenContext {
@@ -680,26 +430,23 @@ pub struct CodegenOptions {
680 pub dev: bool,
430 pub dev: bool,
681 pub partial: bool,
431 pub partial: bool,
682 pub minify: bool,
432 pub minify: bool,
685/// Generate HTML from a parsed document using the given options.
436/// Generate HTML from a parsed document using the given options.
686pub fn generate_with(doc: &Document, opts: &CodegenOptions) -> String {
437pub fn generate_with(doc: &Document, opts: &CodegenOptions) -> String {
687− generate_with_classes(doc, opts).0
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();
694 let mut html = if opts.partial {
438 let mut html = if opts.partial {
695− generate_partial_inner(doc, opts.dev, &mut classes)
439+ generate_partial_inner(doc, opts.dev)
697− generate_full_inner(doc, opts.dev, &mut classes)
441+ generate_full_inner(doc, opts.dev)
699 if opts.minify {
443 if opts.minify {
700 html = minify_html(&html);
444 html = minify_html(&html);
702− (html, classes)
446+ if opts.compat {
447+ html = add_vendor_prefixes(&html);
705pub fn generate(doc: &Document) -> String {
452pub fn generate(doc: &Document) -> String {
@@ -747,6 +494,38 @@ pub fn generate_minified(doc: &Document) -> String {
497+pub fn generate_compat(doc: &Document) -> String {
502+ ..Default::default()
507+pub fn generate_dev_compat(doc: &Document) -> String {
513+ ..Default::default()
518+pub fn generate_minified_compat(doc: &Document) -> String {
524+ ..Default::default()
750fn minify_html(html: &str) -> String {
529fn minify_html(html: &str) -> String {
751 let mut result = String::with_capacity(html.len());
530 let mut result = String::with_capacity(html.len());
752 let mut in_pre = false;
531 let mut in_pre = false;
@@ -761,9 +540,9 @@ fn minify_html(html: &str) -> String {
761 if i + 4 < chars.len() && chars[i] == '<' {
540 if i + 4 < chars.len() && chars[i] == '<' {
762 let rest: String = chars[i..].iter().take(10).collect();
541 let rest: String = chars[i..].iter().take(10).collect();
763 let rest_lower = rest.to_lowercase();
542 let rest_lower = rest.to_lowercase();
764− if rest_lower.starts_with("<pre") || rest_lower.starts_with("<textarea") {
543+ if rest_lower.starts_with("<pre") {
765 in_pre = true;
544 in_pre = true;
766− } else if rest_lower.starts_with("</pre") || rest_lower.starts_with("</textarea") {
545+ } else if rest_lower.starts_with("</pre") {
767 in_pre = false;
546 in_pre = false;
768 } else if rest_lower.starts_with("<script") {
547 } else if rest_lower.starts_with("<script") {
769 in_script = true;
548 in_script = true;
@@ -805,11 +584,10 @@ fn minify_html(html: &str) -> String {
805 continue;
584 continue;
808− // Collapse whitespace runs to a single space. Spaces are never
587+ // Collapse whitespace between tags
809− // dropped entirely: next to inline elements they are significant
810− // ("Built with <span>" must keep its space).
811 if chars[i].is_whitespace() {
588 if chars[i].is_whitespace() {
812 if !prev_was_space {
589 if !prev_was_space {
590+ // Only emit a space if we're between content (not between tags)
813 result.push(' ');
591 result.push(' ');
814 prev_was_space = true;
592 prev_was_space = true;
@@ -817,6 +595,14 @@ fn minify_html(html: &str) -> String {
817 continue;
595 continue;
598+ // Trim space before closing tags
599+ if chars[i] == '<' && prev_was_space {
600+ // Remove trailing space before tag
601+ if result.ends_with(' ') {
820 prev_was_space = false;
606 prev_was_space = false;
821 result.push(chars[i]);
607 result.push(chars[i]);
@@ -825,288 +611,717 @@ fn minify_html(html: &str) -> String {
614+/// Add vendor prefixes to CSS within <style> tags for broader browser compatibility.
615+fn add_vendor_prefixes(html: &str) -> String {
616+ // Find CSS within <style>...</style> and add vendor prefixes
617+ let mut result = String::with_capacity(html.len() + 512);
618+ let mut rest = html;
619+ while let Some(start) = rest.find("<style>") {
620+ let after_tag = start + 7;
621+ result.push_str(&rest[..after_tag]);
622+ rest = &rest[after_tag..];
623+ if let Some(end) = rest.find("</style>") {
624+ let css = &rest[..end];
625+ result.push_str(&prefix_css(css));
626+ result.push_str("</style>");
627+ rest = &rest[end + 8..];
632+ result.push_str(rest);
636+fn prefix_css(css: &str) -> String {
637+ let mut out = String::with_capacity(css.len() + 256);
639+ let bytes = css.as_bytes();
640+ while i < bytes.len() {
641+ // Find property declarations
642+ if let Some(pos) = css[i..].find('{') {
643+ let brace = i + pos;
644+ out.push_str(&css[i..=brace]);
646+ // Process declarations within this block
647+ if let Some(close) = css[i..].find('}') {
648+ let block = &css[i..i + close];
649+ out.push_str(&prefix_declarations(block));
654+ out.push_str(&css[i..]);
661+fn prefix_declarations(block: &str) -> String {
662+ let mut out = String::with_capacity(block.len() + 128);
663+ for decl in block.split(';') {
664+ let decl = decl.trim();
665+ if decl.is_empty() {
668+ if let Some((prop, val)) = decl.split_once(':') {
669+ let prop = prop.trim();
670+ let val = val.trim();
672+ "backdrop-filter" => {
673+ out.push_str(&format!("-webkit-backdrop-filter:{};", val));
674+ out.push_str(&format!("backdrop-filter:{};", val));
677+ out.push_str(&format!("-webkit-user-select:{};", val));
678+ out.push_str(&format!("-moz-user-select:{};", val));
679+ out.push_str(&format!("user-select:{};", val));
682+ out.push_str(&format!("-webkit-appearance:{};", val));
683+ out.push_str(&format!("-moz-appearance:{};", val));
684+ out.push_str(&format!("appearance:{};", val));
686+ "background-clip" if val.contains("text") => {
687+ out.push_str(&format!("-webkit-background-clip:{};", val));
688+ out.push_str(&format!("background-clip:{};", val));
691+ out.push_str(&format!("-webkit-hyphens:{};", val));
692+ out.push_str(&format!("-ms-hyphens:{};", val));
693+ out.push_str(&format!("hyphens:{};", val));
695+ "text-size-adjust" => {
696+ out.push_str(&format!("-webkit-text-size-adjust:{};", val));
697+ out.push_str(&format!("-ms-text-size-adjust:{};", val));
698+ out.push_str(&format!("text-size-adjust:{};", val));
700+ "mask-image" | "mask-size" | "mask-repeat" | "mask-position" => {
701+ out.push_str(&format!("-webkit-{}:{};", prop, val));
702+ out.push_str(&format!("{}:{};", prop, val));
828−fn generate_full_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -> String {
717+fn generate_full_inner(doc: &Document, dev: bool) -> String {
829− // Without `@page` the output is a fragment
830− let Some(page) = &doc.page else {
831− return generate_partial_inner(doc, dev, classes);
833 let mut styles = StyleCollector::new();
718 let mut styles = StyleCollector::new();
834 let mut ctx = GenContext {
719 let mut ctx = GenContext {
836 depth: 0,
721 depth: 0,
837 has_interactive: false,
723 has_interactive: false,
838− in_text: false,
724+ has_defer: false,
839− flow: Flow::default(),
843− // The page is the root element: `<body>` is a column (the reset makes
727+ // Check if document has @main for skip-to-content link
844− // it one, filling the viewport), `@page`'s styles are its class, and
728+ let has_main = has_element_kind(&doc.nodes, &ElementKind::Main);
845− // the page's top-level elements are its children
846− let root = Element {
847− kind: ElementKind::El,
848− attrs: page.styles.clone(),
850− children: Vec::new(),
854− let mut own = Flow::of(&root);
855− let top = Flow::default();
859− has_overlay_children: holds_overlays(&doc.nodes),
863− let body_class = element_class(&root, &site, &mut styles);
864− own.class = body_class.clone();
867 let mut body = String::new();
730 let mut body = String::new();
870− Some(Layout::Column),
876− let element_css = build_element_css(doc, &styles, dev);
877− let nl = if dev { "\n" } else { "" };
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\">{}",
887− meta_html.push_str(&format!(
888− "<title>{}</title>{}",
889− html_escape(&page.title),
892− for (name, content) in &doc.meta_tags {
893− meta_html.push_str(&format!(
894− "<meta name=\"{}\" content=\"{}\">{}",
896− html_escape(content),
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),
908− if let Some(path) = &page.favicon {
909− meta_html.push_str(&format!(
910− "<link rel=\"icon\" href=\"{}\">{}",
915− for block in &doc.head_blocks {
916− meta_html.push_str(block);
917− meta_html.push_str(nl);
920− // `@page`'s HTML attributes go on `<html>`
732+ // Skip-to-content link for accessibility (only when @main exists)
921− let mut root_attrs = String::new();
733+ if has_main {
922− for attr in html_attrs(&page.html_attrs) {
923− push_html_attr(&mut root_attrs, attr);
925− let mut body_attrs = String::new();
926− emit_class_attr(&mut body_attrs, body_class.as_deref(), None);
928− // Focus-visible CSS for interactive elements (accessibility)
929− let focus_visible_css = if ctx.has_interactive {
930− let focusable = ":where(a,button,input,select,textarea):focus-visible";
932− format!(
735+ body.push_str("<a href=\"#hl-main\" class=\"hl-skip\">Skip to content</a>\n");
933− "{}{} {{ outline: 2px solid currentColor; outline-offset: 2px; }}\n",
934− OWN_ELEMENTS, focusable
937− format!(
737+ body.push_str("<a href=\"#hl-main\" class=\"hl-skip\">Skip to content</a>");
938− "{}{}{{outline:2px solid currentColor;outline-offset:2px}}",
939− OWN_ELEMENTS, focusable
945− let reset_css = reset_css(dev, true, &focus_visible_css);
946− classes.extend(styles.classes());
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}",
955−/// Assemble every CSS block the document needs (font faces, custom
956−/// properties, generated class rules, keyframes, and user CSS). Shared by
957−/// full-page and partial output so both emit the same styles.
958−fn build_element_css(doc: &Document, styles: &StyleCollector, dev: bool) -> String {
959− let mut element_css = String::new();
961− // Collect the CSS custom properties declared with `@let --name` so they
741+ for node in &doc.nodes {
962− // can be emitted in a single `:root` block below.
742+ generate_node(node, None, &mut body, &mut styles, &mut ctx);
963− let mut root_vars: Vec<(String, String)> = Vec::new();
964− for (name, value) in &doc.css_vars {
965− root_vars.push((name.clone(), value.clone()));
968− // Generated rules always go in htmlang's layers, so unlayered user CSS
745+ // Collect external domains for DNS prefetch
969− // (`@style`, `@raw`) overrides them regardless of specificity.
746+ let dns_prefetch_html = collect_dns_prefetch(&body, dev);
970− let styles_css = styles.to_css_formatted(dev, &doc.scoped_css);
747+
748+ let mut element_css = String::new();
972− // Emit the :root block first so the cascade picks up the custom
750+ // CSS custom properties (includes @theme runtime tokens)
973− // properties before the class rules consume them.
751+ let has_theme_tokens = !doc.theme_tokens.is_empty();
974− if !root_vars.is_empty() {
752+ if !doc.css_vars.is_empty() || has_theme_tokens {
976 element_css.push_str(":root {\n");
754 element_css.push_str(":root {\n");
977− for (name, value) in &root_vars {
755+ for (name, value) in &doc.css_vars {
978 element_css.push_str(&format!(" {}: {};\n", name, value));
756 element_css.push_str(&format!(" {}: {};\n", name, value));
758+ // @theme tokens as runtime CSS custom properties
759+ for (name, value) in &doc.theme_tokens {
760+ let css_name = format!("--{}", name);
761+ // Only emit if not already in css_vars
762+ if !doc.css_vars.iter().any(|(n, _)| *n == css_name) {
763+ element_css.push_str(&format!(" {}: {};\n", css_name, value));
980 element_css.push_str("}\n");
766 element_css.push_str("}\n");
982 element_css.push_str(":root{");
768 element_css.push_str(":root{");
983− for (name, value) in &root_vars {
769+ for (name, value) in &doc.css_vars {
984 element_css.push_str(name);
770 element_css.push_str(name);
985 element_css.push(':');
771 element_css.push(':');
986 element_css.push_str(value);
772 element_css.push_str(value);
987 element_css.push(';');
773 element_css.push(';');
775+ for (name, value) in &doc.theme_tokens {
776+ let css_name = format!("--{}", name);
777+ if !doc.css_vars.iter().any(|(n, _)| *n == css_name) {
778+ element_css.push_str(&css_name);
779+ element_css.push(':');
780+ element_css.push_str(value);
781+ element_css.push(';');
989 element_css.push('}');
784 element_css.push('}');
788+ let has_custom_css = !doc.custom_css.is_empty();
789+ let styles_css = styles.to_css_formatted(dev, !has_custom_css);
790+ // Fold literal values declared via `@theme` / `@let --name` back into
791+ // `var(--name)` references so the generated CSS actually uses the
792+ // custom properties emitted in `:root`. Saves bytes and makes runtime
793+ // theming take effect.
794+ let styles_css = substitute_css_vars(&styles_css, &doc.css_vars);
993 element_css.push_str(&styles_css);
795 element_css.push_str(&styles_css);
995− // @style blocks (custom CSS)
797+ // @keyframes
996− for block in &doc.custom_css {
798+ for (name, kf_body) in &doc.keyframes {
998− element_css.push_str(block);
800+ element_css.push_str(&format!("@keyframes {} {{\n{}\n}}\n", name, kf_body));
999− element_css.push('\n');
1000 } else {
801 } else {
1001− element_css.push_str(&compact_css(block));
802+ element_css.push_str(&format!("@keyframes {}{{{}}}", name, kf_body));
1005− element_css
806+ // Auto-inject skeleton keyframe if skeleton attribute is used
807+ let skeleton_used = element_css.contains("hl-skeleton");
810+ element_css.push_str("@keyframes hl-skeleton {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n");
812+ element_css.push_str("@keyframes hl-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}");
1008−/// An `@style` body on one line: each line trimmed, and the lines joined with
816+ // Also inject carousel webkit scrollbar hiding
1009−/// a space, so a value that goes on over two lines (`margin: 0` then `auto;`)
817+ let carousel_used = element_css.contains("scroll-snap-type:x mandatory");
1010−/// keeps its words apart.
818+ if carousel_used && !element_css.contains("::-webkit-scrollbar") {
1011−fn compact_css(block: &str) -> String {
819+ // The carousel class already has scrollbar-width:none, but webkit needs pseudo-element
1012− block
820+ // We add a global rule for carousel-style elements
1015− .filter(|l| !l.is_empty())
1016− .collect::<Vec<_>>()
1020−/// htmlang's own elements: those with a generated class, or the class of a
823+ // @style blocks (custom CSS)
1021−/// function's scoped `@style`. The reset's rules for elements are kept to
824+ for block in &doc.custom_css {
1022−/// them, so `@raw` and `@markdown` content, and the page a fragment is put
825+ if dev {
1023−/// into, keep their own.
826+ element_css.push_str(block);
1024−const OWN_ELEMENTS: &str = ":where([class^=\"hl-\"],[class*=\" hl-\"])";
827+ element_css.push('\n');
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"];
1036−/// 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();
1048− rules.push(if dev {
1049− "*, *::before, *::after { box-sizing: border-box; }".to_string()
1050 } else {
828 } else {
1051− "*,*::before,*::after{box-sizing:border-box}".to_string()
829+ // Minify: collapse whitespace
1052− });
830+ let minified: String = block.lines().map(|l| l.trim()).collect::<Vec<_>>().join("");
831+ element_css.push_str(&minified);
836+ for block in &doc.scope_blocks {
1053− rules.push(if dev {
837+ if dev {
1054− "body { margin: 0; font-family: system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; min-height: 100dvh; }".to_string()
838+ element_css.push_str(block);
839+ element_css.push('\n');
1055 } else {
840 } else {
1056− "body{margin:0;font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;min-height:100dvh}".to_string()
841+ let minified: String = block.lines().map(|l| l.trim()).collect::<Vec<_>>().join("");
1057− });
842+ element_css.push_str(&minified);
846+ // @starting-style blocks
847+ if !doc.starting_style_blocks.is_empty() {
849+ element_css.push_str("@starting-style {\n");
850+ for block in &doc.starting_style_blocks {
851+ element_css.push_str(block);
852+ element_css.push('\n');
854+ element_css.push_str("}\n");
856+ element_css.push_str("@starting-style{");
857+ for block in &doc.starting_style_blocks {
858+ let minified: String = block.lines().map(|l| l.trim()).collect::<Vec<_>>().join("");
859+ element_css.push_str(&minified);
861+ element_css.push('}');
865+ // Build meta tags string
866+ let meta_html = if doc.meta_tags.is_empty() {
869+ let mut m = String::new();
870+ for (name, content) in &doc.meta_tags {
872+ m.push_str(&format!(
873+ "<meta name=\"{}\" content=\"{}\">\n",
875+ html_escape(content)
878+ m.push_str(&format!(
879+ "<meta name=\"{}\" content=\"{}\">",
881+ html_escape(content)
888+ // Build OG meta tags
889+ let og_html = if doc.og_tags.is_empty() {
892+ let mut o = String::new();
893+ for (property, content) in &doc.og_tags {
895+ o.push_str(&format!(
896+ "<meta property=\"og:{}\" content=\"{}\">\n",
897+ html_escape(property),
898+ html_escape(content)
901+ o.push_str(&format!(
902+ "<meta property=\"og:{}\" content=\"{}\">",
903+ html_escape(property),
904+ html_escape(content)
911+ // Build head blocks string
912+ let head_html = if doc.head_blocks.is_empty() {
915+ let mut h = String::new();
916+ for block in &doc.head_blocks {
925+ let lang_attr = match &doc.lang {
926+ Some(lang) => format!(" lang=\"{}\"", html_escape(lang)),
927+ None => String::new(),
930+ let favicon_html = match &doc.favicon {
932+ // Try to read and inline the favicon
933+ if let Ok(data) = std::fs::read(path) {
934+ let mime = if path.ends_with(".ico") {
936+ } else if path.ends_with(".png") {
938+ } else if path.ends_with(".svg") {
943+ let b64 = base64_encode(&data);
946+ "<link rel=\"icon\" href=\"data:{};base64,{}\">\n",
950+ format!("<link rel=\"icon\" href=\"data:{};base64,{}\">", mime, b64)
953+ // Fall back to href
955+ format!("<link rel=\"icon\" href=\"{}\">\n", html_escape(path))
957+ format!("<link rel=\"icon\" href=\"{}\">", html_escape(path))
961+ None => String::new(),
965+ let canonical_html = match &doc.canonical {
968+ format!("<link rel=\"canonical\" href=\"{}\">\n", html_escape(url))
970+ format!("<link rel=\"canonical\" href=\"{}\">", html_escape(url))
973+ None => String::new(),
977+ let base_html = match &doc.base_url {
980+ format!("<base href=\"{}\">\n", html_escape(url))
982+ format!("<base href=\"{}\">", html_escape(url))
985+ None => String::new(),
989+ for (name, url) in &doc.font_faces {
990+ let format_hint = if url.ends_with(".woff2") {
992+ } else if url.ends_with(".woff") {
994+ } else if url.ends_with(".ttf") {
995+ " format('truetype')"
996+ } else if url.ends_with(".otf") {
997+ " format('opentype')"
1002+ element_css.insert_str(0, &format!(
1003+ "@font-face {{\n font-family: '{}';\n src: url('{}'){};\n font-display: swap;\n}}\n",
1004+ name, url, format_hint
1007+ element_css.insert_str(
1010+ "@font-face{{font-family:'{}';src:url('{}'){};font-display:swap}}",
1011+ name, url, format_hint
1018+ let json_ld_html: String = doc
1024+ "<script type=\"application/ld+json\">\n{}\n</script>\n",
1028+ format!("<script type=\"application/ld+json\">{}</script>", block)
1034+ let manifest_html = if let Some(ref manifest) = doc.manifest {
1035+ let mut json = String::from("{");
1036+ json.push_str(&format!("\"name\":\"{}\",", manifest.name));
1037+ if let Some(ref short) = manifest.short_name {
1038+ json.push_str(&format!("\"short_name\":\"{}\",", short));
1040+ json.push_str(&format!("\"start_url\":\"{}\",", manifest.start_url));
1041+ json.push_str(&format!("\"display\":\"{}\"", manifest.display));
1042+ if let Some(ref bg) = manifest.background_color {
1043+ json.push_str(&format!(",\"background_color\":\"{}\"", bg));
1045+ if let Some(ref tc) = manifest.theme_color {
1046+ json.push_str(&format!(",\"theme_color\":\"{}\"", tc));
1048+ if let Some(ref desc) = manifest.description {
1049+ json.push_str(&format!(",\"description\":\"{}\"", desc));
1051+ if !manifest.icons.is_empty() {
1052+ json.push_str(",\"icons\":[");
1053+ for (i, (src, sizes)) in manifest.icons.iter().enumerate() {
1057+ json.push_str(&format!(
1058+ "{{\"src\":\"{}\",\"sizes\":\"{}\",\"type\":\"image/png\"}}",
1066+ // Inline the manifest as a data URI
1067+ let encoded = base64_encode(json.as_bytes());
1070+ "<link rel=\"manifest\" href=\"data:application/manifest+json;base64,{}\">\n",
1075+ "<link rel=\"manifest\" href=\"data:application/manifest+json;base64,{}\">",
1058 } else {
1079 } else {
1059− rules.push(if dev {
1080+ String::new()
1060− format!("{own}, {own}::before, {own}::after {{ box-sizing: border-box; }}")
1081+ };
1083+ // Preload hints (auto-detect fonts from @font-face)
1084+ let mut preload_html = String::new();
1085+ for (_, url) in &doc.font_faces {
1087+ preload_html.push_str(&format!(
1088+ "<link rel=\"preload\" href=\"{}\" as=\"font\" type=\"font/woff2\" crossorigin>\n",
1061 } else {
1091 } else {
1062− format!("{own},{own}::before,{own}::after{{box-sizing:border-box}}")
1092+ preload_html.push_str(&format!(
1063− });
1093+ "<link rel=\"preload\" href=\"{}\" as=\"font\" type=\"font/woff2\" crossorigin>",
1098+ // Explicit preload hints from the document
1099+ for hint in &doc.preload_hints {
1101+ preload_html.push_str(&format!(
1102+ "<link rel=\"preload\" href=\"{}\" as=\"{}\"{}>\n",
1103+ html_escape(&hint.href),
1105+ if hint.crossorigin { " crossorigin" } else { "" }
1108+ preload_html.push_str(&format!(
1109+ "<link rel=\"preload\" href=\"{}\" as=\"{}\"{}>",
1110+ html_escape(&hint.href),
1112+ if hint.crossorigin { " crossorigin" } else { "" }
1065− let hidden = "[hidden]:not([hidden=\"until-found\"]),dialog:not([open]):not(:popover-open),\
1116+
1066− [popover]:not(:popover-open):not(dialog[open])";
1117+ // Auto theme-color meta from @theme primary token
1067− rules.push(if dev {
1118+ let theme_color_html = doc
1068− format!("{own}:where({hidden}) {{ display: none !important; }}")
1119+ .theme_tokens
1121+ .find(|(name, _)| name == "primary" || name == "theme-color")
1122+ .map(|(_, value)| {
1125+ "<meta name=\"theme-color\" content=\"{}\">\n",
1130+ "<meta name=\"theme-color\" content=\"{}\">",
1135+ .unwrap_or_default();
1137+ // Focus-visible CSS for interactive elements (accessibility)
1138+ let focus_visible_css = if ctx.has_interactive {
1140+ "a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n"
1142+ "a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}"
1148+ // Skip-to-content CSS (visually hidden but accessible)
1149+ let skip_link_css = if has_main {
1151+ ".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"
1153+ ".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}"
1069 } else {
1155 } else {
1070− format!("{own}:where({hidden}){{display:none!important}}")
1156+ ""
1072− let mut rules = rules.join(if dev { "\n" } else { "" });
1158+
1073− if dev {
1159+ // Noscript fallback: show deferred content if JS is disabled
1074− rules.push('\n');
1160+ let noscript_html = if ctx.has_defer {
1076− rules.push_str(focus_visible_css);
1162+ "<noscript><style>.hl-defer-placeholder { display: none; }</style></noscript>\n"
1077− if dev {
1163+ } else {
1078− format!(
1164+ "<noscript><style>.hl-defer-placeholder{display:none}</style></noscript>"
1079− "@layer {};\n@layer hl-reset {{\n{}}}\n",
1165+ }
1083 } else {
1166 } else {
1084− format!("@layer {};@layer hl-reset{{{}}}", LAYERS.join(","), rules)
1167+ ""
1170+ match &doc.page_title {
1178+<meta charset=\"utf-8\">
1179+<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
1180+<title>{title}</title>
1181+{theme_color_html}{base_html}{canonical_html}{manifest_html}{preload_html}{dns_prefetch_html}{meta_html}{og_html}{favicon_html}{json_ld_html}{head_html}\
1183+*, *::before, *::after {{ box-sizing: border-box; }}
1184+body {{ margin: 0; font-family: system-ui, -apple-system, sans-serif; }}
1185+img {{ display: block; }}
1186+{focus_visible_css}{skip_link_css}{element_css}\
1195+ title = html_escape(title),
1196+ lang_attr = lang_attr,
1197+ theme_color_html = theme_color_html,
1198+ base_html = base_html,
1199+ canonical_html = canonical_html,
1200+ manifest_html = manifest_html,
1201+ preload_html = preload_html,
1202+ dns_prefetch_html = dns_prefetch_html,
1203+ meta_html = meta_html,
1204+ favicon_html = favicon_html,
1205+ json_ld_html = json_ld_html,
1206+ head_html = head_html,
1208+ focus_visible_css = focus_visible_css,
1209+ skip_link_css = skip_link_css,
1210+ noscript_html = noscript_html,
1211+ element_css = element_css,
1216+ "<!DOCTYPE html><html{lang_attr}><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>{title}</title>{theme_color_html}{base_html}{canonical_html}{manifest_html}{preload_html}{dns_prefetch_html}{meta_html}{og_html}{favicon_html}{json_ld_html}{head_html}<style>*,*::before,*::after{{box-sizing:border-box}}body{{margin:0;font-family:system-ui,-apple-system,sans-serif}}img{{display:block}}{focus_visible_css}{skip_link_css}{element_css}</style>{noscript_html}</head><body>{body}</body></html>",
1217+ title = html_escape(title),
1218+ lang_attr = lang_attr,
1219+ theme_color_html = theme_color_html,
1220+ base_html = base_html,
1221+ canonical_html = canonical_html,
1222+ manifest_html = manifest_html,
1223+ preload_html = preload_html,
1224+ dns_prefetch_html = dns_prefetch_html,
1225+ meta_html = meta_html,
1227+ favicon_html = favicon_html,
1228+ json_ld_html = json_ld_html,
1229+ head_html = head_html,
1230+ focus_visible_css = focus_visible_css,
1231+ skip_link_css = skip_link_css,
1232+ noscript_html = noscript_html,
1233+ element_css = element_css,
1239+ if element_css.is_empty() {
1242+ format!("<style>\n{}</style>\n{}", element_css, body)
1244+ format!("<style>{}</style>{}", element_css, body)
1088/// Generate an HTML fragment: body + optional <style>, no <html>/<head>/<body> wrapper.
1250/// 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 {
1251+fn generate_partial_inner(doc: &Document, dev: bool) -> String {
1090 let mut styles = StyleCollector::new();
1252 let mut styles = StyleCollector::new();
1091 let mut ctx = GenContext {
1253 let mut ctx = GenContext {
1093 depth: 0,
1255 depth: 0,
1094 has_interactive: false,
1257 has_interactive: false,
1095− in_text: false,
1258+ has_defer: false,
1096− flow: Flow::default(),
1099 let mut body = String::new();
1260 let mut body = String::new();
1101− generate_children(&doc.nodes, None, &mut body, &mut styles, &mut ctx);
1262+ for node in &doc.nodes {
1263+ generate_node(node, None, &mut body, &mut styles, &mut ctx);
1266+ let has_custom_css = !doc.custom_css.is_empty();
1267+ let mut element_css = String::new();
1269+ // CSS custom properties
1270+ if !doc.css_vars.is_empty() || !doc.theme_tokens.is_empty() {
1272+ element_css.push_str(":root {\n");
1273+ for (name, value) in &doc.css_vars {
1274+ element_css.push_str(&format!(" {}: {};\n", name, value));
1276+ for (name, value) in &doc.theme_tokens {
1277+ let css_name = format!("--{}", name);
1278+ if !doc.css_vars.iter().any(|(n, _)| *n == css_name) {
1279+ element_css.push_str(&format!(" {}: {};\n", css_name, value));
1282+ element_css.push_str("}\n");
1284+ element_css.push_str(":root{");
1285+ for (name, value) in &doc.css_vars {
1286+ element_css.push_str(name);
1287+ element_css.push(':');
1288+ element_css.push_str(value);
1289+ element_css.push(';');
1291+ for (name, value) in &doc.theme_tokens {
1292+ let css_name = format!("--{}", name);
1293+ if !doc.css_vars.iter().any(|(n, _)| *n == css_name) {
1294+ element_css.push_str(&css_name);
1295+ element_css.push(':');
1296+ element_css.push_str(value);
1297+ element_css.push(';');
1300+ element_css.push('}');
1304+ let styles_css = styles.to_css_formatted(dev, !has_custom_css);
1305+ let styles_css = substitute_css_vars(&styles_css, &doc.css_vars);
1306+ element_css.push_str(&styles_css);
1308+ for (name, kf_body) in &doc.keyframes {
1310+ element_css.push_str(&format!("@keyframes {} {{\n{}\n}}\n", name, kf_body));
1312+ element_css.push_str(&format!("@keyframes {}{{{}}}", name, kf_body));
1103− let mut element_css = build_element_css(doc, &styles, dev);
1316+ for block in &doc.custom_css {
1104− // htmlang's own elements get the reset's rules for elements (which
1317+ if dev {
1105− // also puts htmlang's layers in order)
1318+ element_css.push_str(block);
1106− if !styles.entries.is_empty() || !doc.scoped_css.is_empty() {
1319+ element_css.push('\n');
1107− element_css.insert_str(0, &reset_css(dev, false, ""));
1320+ } else {
1321+ let minified: String = block.lines().map(|l| l.trim()).collect::<Vec<_>>().join("");
1322+ element_css.push_str(&minified);
1109− classes.extend(styles.classes());
1111 if element_css.is_empty() {
1326 if element_css.is_empty() {
@@ -1121,20 +1336,44 @@ fn generate_partial_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -
1121// Node generation
1336// Node generation
1122// ---------------------------------------------------------------------------
1337// ---------------------------------------------------------------------------
1124−/// Write `node`, which is inside an element with the layout `parent`
1125−/// (`None` at the top of the page).
1126fn generate_node(
1339fn generate_node(
1127 node: &Node,
1340 node: &Node,
1128− parent: Option<Layout>,
1341+ parent_kind: Option<&ElementKind>,
1129 out: &mut String,
1342 out: &mut String,
1130 styles: &mut StyleCollector,
1343 styles: &mut StyleCollector,
1131 ctx: &mut GenContext,
1344 ctx: &mut GenContext,
1133 match node {
1346 match node {
1134− Node::Element(elem) => generate_element(elem, parent, out, styles, ctx),
1347+ Node::Element(elem) => generate_element(elem, parent_kind, out, styles, ctx),
1135 Node::Text(segments) => {
1348 Node::Text(segments) => {
1136− // In a row, column or grid each line of text is a child
1349+ let needs_wrap = matches!(
1137− let needs_wrap = parent.is_some_and(Layout::is_container);
1350+ parent_kind,
1351+ Some(ElementKind::Row)
1352+ | Some(ElementKind::Column)
1353+ | Some(ElementKind::El)
1354+ | Some(ElementKind::Nav)
1355+ | Some(ElementKind::Header)
1356+ | Some(ElementKind::Footer)
1357+ | Some(ElementKind::Main)
1358+ | Some(ElementKind::Section)
1359+ | Some(ElementKind::Article)
1360+ | Some(ElementKind::Aside)
1361+ | Some(ElementKind::ListItem)
1362+ | Some(ElementKind::Form)
1363+ | Some(ElementKind::Details)
1364+ | Some(ElementKind::Figure)
1365+ | Some(ElementKind::Blockquote)
1366+ | Some(ElementKind::Dialog)
1367+ | Some(ElementKind::DefinitionList)
1368+ | Some(ElementKind::DefinitionDescription)
1369+ | Some(ElementKind::Fieldset)
1370+ | Some(ElementKind::Datalist)
1371+ | Some(ElementKind::Grid)
1372+ | Some(ElementKind::Stack)
1373+ | Some(ElementKind::Noscript)
1374+ | Some(ElementKind::Address)
1375+ | Some(ElementKind::Search)
1138 if needs_wrap {
1377 if needs_wrap {
1139 out.push_str(&ctx.indent());
1378 out.push_str(&ctx.indent());
1140 out.push_str("<span>");
1379 out.push_str("<span>");
@@ -1153,191 +1392,195 @@ fn generate_node(
1156−/// What goes between two things written one after the other in an element
1395+/// HTML attributes that are passed through to the HTML tag rather than converted to CSS.
1157−/// with this layout (`None`: the top of the page): text flows, so its lines
1396+const HTML_PASSTHROUGH_ATTRS: &[&str] = &[
1158−/// and children are joined with a space; in HTML's own layout, and at the
1397+ "type",
1159−/// top of the page, two lines of text are separated by a line break (a
1398+ "placeholder",
1160−/// space, except where whitespace is kept, as in `@pre`).
1399+ "name",
1161−fn separator(layout: Option<Layout>, previous_is_text: bool, next: &Node) -> Option<char> {
1400+ "value",
1162− match layout {
1401+ "disabled",
1163− Some(Layout::Text) => Some(' '),
1402+ "required",
1164− Some(Layout::Native) | None if previous_is_text && matches!(next, Node::Text(_)) => {
1403+ "checked",
1165− Some('\n')
1404+ "for",
1167− _ => None,
1406+ "method",
1168− }
1407+ "autocomplete",
1428+ // Image optimization
1431+ // Media src (explicit attribute form)
1433+ // New element attributes
1454+ "popovertargetaction",
1455+ // Modern form/input hints
1458+ // Performance hints
1464+ // ARIA live regions
1171−/// Write the children of an element (or of a `@fragment`, which has no
1470+/// Boolean HTML attributes (rendered without a value, e.g., `<input disabled>`).
1172−/// element of its own) laid out as `layout` (`None`: the top of the page).
1471+const BOOLEAN_HTML_ATTRS: &[&str] = &[
1173−/// The first line of an element's text is its first child.
1472+ "disabled",
1174−fn generate_children(
1473+ "required",
1175− children: &[Node],
1474+ "checked",
1176− layout: Option<Layout>,
1475+ "multiple",
1177− out: &mut String,
1476+ "controls",
1178− styles: &mut StyleCollector,
1477+ "autoplay",
1179− ctx: &mut GenContext,
1478+ "loop",
1181− generate_run(children, layout, &mut None, out, styles, ctx);
1480+ "open",
1182−}
1481+ "novalidate",
1184−/// [`generate_children`], with `previous` saying whether what was written
1490+fn emit_html_passthrough_attrs(out: &mut String, attrs: &[Attribute]) {
1185−/// last was a line of text (`None`: nothing yet). A `@fragment`'s children
1491+ for attr in attrs {
1186−/// are written as if they stood in its place, so its lines are separated
1492+ let key = attr.key.as_str();
1187−/// from the lines around it like any other lines.
1493+ let is_passthrough = HTML_PASSTHROUGH_ATTRS.contains(&key)
1188−fn generate_run(
1494+ || key.starts_with("aria-")
1189− children: &[Node],
1495+ || key.starts_with("data-");
1190− layout: Option<Layout>,
1496+ if !is_passthrough {
1191− previous: &mut Option<bool>,
1193− styles: &mut StyleCollector,
1194− ctx: &mut GenContext,
1196− for child in children {
1197− if let Node::Element(elem) = child
1198− && elem.kind == ElementKind::Fragment
1200− generate_run(&elem.children, layout, previous, out, styles, ctx);
1201 continue;
1497 continue;
1203− let start = out.len();
1499+ if BOOLEAN_HTML_ATTRS.contains(&key) && attr.value.is_none() {
1204− if let Some(previous_is_text) = *previous
1500+ out.push(' ');
1205− && let Some(sep) = separator(layout, previous_is_text, child)
1501+ out.push_str(key);
1206− {
1502+ } else if let Some(val) = &attr.value {
1207− out.push(sep);
1503+ out.push(' ');
1208− }
1504+ out.push_str(key);
1209− let body = out.len();
1505+ out.push_str("=\"");
1210− generate_node(child, layout, out, styles, ctx);
1506+ out.push_str(&html_escape(strip_string_quotes(val)));
1211− // A child that writes nothing (an empty `@fragment`) takes no
1507+ out.push('"');
1212− // separator either, so text never gets two spaces in a row
1213− if out.len() == body {
1214− out.truncate(start);
1217− *previous = Some(matches!(child, Node::Text(_)));
1221−/// Emit the element's leading argument as its attribute (`@iframe URL` →
1512+/// If the value is wrapped in a single pair of matching quotes (e.g.
1222−/// `src="URL"`, `@form /submit` → `action="/submit"`, `@link /a` →
1513+/// `"Avatar"`), return the inner content. Quotes act as source-level
1223−/// `href="/a"`), first, before the class. `@image [inline] photo.png` puts
1514+/// delimiters in the `.hl` syntax and shouldn't leak into HTML attribute
1224−/// the file itself into the page.
1515+/// values. Multi-quoted values like `"h h" "s m"` are left unchanged —
1225−fn emit_argument_attr(out: &mut String, elem: &Element, in_picture: bool) {
1516+/// those are real string tokens (used e.g. by CSS `grid-template-areas`).
1226− let (Some(attr), Some(value)) = (elem.kind.leading_attribute(in_picture), &elem.argument)
1517+fn strip_string_quotes(val: &str) -> &str {
1227− else {
1518+ let bytes = val.as_bytes();
1228− return;
1519+ if bytes.len() < 2 {
1229− };
1520+ return val;
1230− // `@image [inline]`'s file is already a `data:` URI (see the parser)
1231− let value = html_escape(value);
1233− out.push_str(attr);
1234− out.push_str("=\"");
1235− out.push_str(&value);
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
1244− .map(str::to_ascii_lowercase)
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",
1256− format!("data:{};base64,{}", mime, base64_encode(data))
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);
1268−}
1522+ let first = bytes[0];
1269−
1523+ let last = bytes[bytes.len() - 1];
1270−/// The HTML attributes of `attrs`, `key=value` ones and flags, each name
1524+ if (first == b'"' && last == b'"') || (first == b'\'' && last == b'\'') {
1271−/// once: the later one wins, as a style does. (Of two attributes with one
1525+ let inner = &val[1..val.len() - 1];
1272−/// name, the browser keeps the first, so a bundle's attribute or a
1526+ if !inner.as_bytes().contains(&first) {
1273−/// function's own would win over one written after it.)
1527+ return inner;
1274−fn html_attrs(attrs: &[Attribute]) -> impl Iterator<Item = &Attribute> {
1528+ }
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..]
1280− .any(|other| is_html(other) && other.key == attr.key);
1281− (is_html(attr) && !later).then_some(attr)
1285−/// ` key="value"`, or ` key` for a flag.
1286−fn push_html_attr(out: &mut String, attr: &Attribute) {
1288− out.push_str(&attr.key);
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("")));
1297−// True if any direct child is `@in-front` or `@behind`. Such children render
1298−// as absolutely positioned overlays, so the parent automatically becomes a
1299−// positioning context (position:relative + isolation:isolate).
1300−fn has_overlay_children(elem: &Element) -> bool {
1301− holds_overlays(&elem.children)
1304−fn holds_overlays(children: &[Node]) -> bool {
1305− children.iter().any(|child| {
1308− Node::Element(e) if e.kind.is_tag("in-front") || e.kind.is_tag("behind")
1313fn generate_element(
1533fn generate_element(
1314 elem: &Element,
1534 elem: &Element,
1315− parent: Option<Layout>,
1535+ parent_kind: Option<&ElementKind>,
1316 out: &mut String,
1536 out: &mut String,
1317 styles: &mut StyleCollector,
1537 styles: &mut StyleCollector,
1318 ctx: &mut GenContext,
1538 ctx: &mut GenContext,
1320 // Self-closing elements
1540 // Self-closing elements
1321− if elem.kind.layout() == Layout::Void {
1541+ if matches!(
1322− generate_self_closing(elem, parent, out, styles, ctx);
1542+ elem.kind,
1544+ | ElementKind::Input
1545+ | ElementKind::HorizontalRule
1546+ | ElementKind::Source
1547+ | ElementKind::Spacer
1549+ generate_self_closing(elem, parent_kind, out, styles, ctx);
1325− // A verbatim element (@script) writes its body as it is, with no HTML
1552+ // @script renders as <script> with raw body content (no HTML escaping)
1326− // escaping; it isn't shown, so it has no class (its styles are an error)
1553+ if elem.kind == ElementKind::Script {
1327− if elem.kind.is_verbatim() {
1328− let tag = elem.kind.spec().map_or("script", |spec| spec.html);
1329 out.push_str(&ctx.indent());
1554 out.push_str(&ctx.indent());
1330− out.push('<');
1555+ out.push_str("<script");
1331− out.push_str(tag);
1556+ // Pass through src, type, defer, async, etc.
1332− emit_argument_attr(out, elem, false);
1557+ for attr in &elem.attrs {
1333− let (id, class) = extract_id_class(&elem.attrs);
1558+ let key = attr.key.as_str();
1334− for (key, value) in [("id", id), ("class", class)] {
1559+ if matches!(
1335− if let Some(value) = value {
1560+ key,
1336− out.push_str(&format!(" {}=\"{}\"", key, html_escape(&value)));
1561+ "src"
1570+ if let Some(val) = &attr.value {
1573+ out.push_str("=\"");
1574+ out.push_str(&html_escape(val));
1339− emit_html_attrs(out, &elem.attrs);
1340 out.push('>');
1582 out.push('>');
1583+ // Children are raw JS code, not HTML
1341 for child in &elem.children {
1584 for child in &elem.children {
1342 match child {
1585 match child {
1343 Node::Text(segments) => {
1586 Node::Text(segments) => {
@@ -1351,10 +1594,46 @@ fn generate_element(
1354− out.push_str("</");
1597+ out.push_str("</script>");
1355− out.push_str(tag);
1598+ out.push_str(ctx.nl());
1601+ // @breadcrumb generates semantic <nav aria-label="breadcrumb"><ol>...</ol></nav>
1602+ if elem.kind == ElementKind::Breadcrumb {
1603+ let gen_class = compute_class(&elem.attrs, &elem.kind, parent_kind, styles);
1604+ let (id, user_class) = extract_id_class(&elem.attrs);
1605+ out.push_str(&ctx.indent());
1606+ out.push_str("<nav aria-label=\"breadcrumb\"");
1607+ emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1608+ if let Some(id) = id {
1609+ out.push_str(" id=\"");
1610+ out.push_str(&html_escape(&id));
1356 out.push('>');
1613 out.push('>');
1357 out.push_str(ctx.nl());
1614 out.push_str(ctx.nl());
1616+ out.push_str(&ctx.indent());
1617+ out.push_str("<ol>");
1618+ out.push_str(ctx.nl());
1620+ for child in &elem.children {
1621+ out.push_str(&ctx.indent());
1622+ out.push_str("<li>");
1623+ let mut buf = String::new();
1624+ generate_node(child, Some(&elem.kind), &mut buf, styles, ctx);
1625+ out.push_str(buf.trim());
1626+ out.push_str("</li>");
1627+ out.push_str(ctx.nl());
1630+ out.push_str(&ctx.indent());
1631+ out.push_str("</ol>");
1632+ out.push_str(ctx.nl());
1634+ out.push_str(&ctx.indent());
1635+ out.push_str("</nav>");
1636+ out.push_str(ctx.nl());
1360 if elem.kind == ElementKind::Children {
1639 if elem.kind == ElementKind::Children {
@@ -1364,38 +1643,185 @@ fn generate_element(
1366 if elem.kind == ElementKind::Fragment {
1645 if elem.kind == ElementKind::Fragment {
1367− // Render children without a wrapper element, as if they were
1646+ // Render children without a wrapper element
1368− // written where the fragment is
1647+ for child in &elem.children {
1369− generate_children(&elem.children, parent, out, styles, ctx);
1648+ generate_node(child, parent_kind, out, styles, ctx);
1373− let mut own = Flow::of(elem);
1374 let tag = match &elem.kind {
1653 let tag = match &elem.kind {
1375− ElementKind::Row | ElementKind::El => "div",
1654+ ElementKind::Row
1655+ | ElementKind::Column
1657+ | ElementKind::Grid
1658+ | ElementKind::Stack => "div",
1376 ElementKind::Text => "span",
1659 ElementKind::Text => "span",
1377 ElementKind::Paragraph => "p",
1660 ElementKind::Paragraph => "p",
1378 ElementKind::Link => "a",
1661 ElementKind::Link => "a",
1379− ElementKind::Tag(spec) => spec.html,
1662+ ElementKind::Button => "button",
1663+ ElementKind::Select => "select",
1664+ ElementKind::Textarea => "textarea",
1665+ ElementKind::Option => "option",
1666+ ElementKind::Label => "label",
1667+ // Semantic elements
1668+ ElementKind::Nav => "nav",
1669+ ElementKind::Header => "header",
1670+ ElementKind::Footer => "footer",
1671+ ElementKind::Main => "main",
1672+ ElementKind::Section => "section",
1673+ ElementKind::Article => "article",
1674+ ElementKind::Aside => "aside",
1676+ ElementKind::List => {
1677+ if elem.attrs.iter().any(|a| a.key == "ordered") {
1683+ ElementKind::ListItem => "li",
1685+ ElementKind::Table => "table",
1686+ ElementKind::TableHead => "thead",
1687+ ElementKind::TableBody => "tbody",
1688+ ElementKind::TableRow => "tr",
1689+ ElementKind::TableCell => "td",
1690+ ElementKind::TableHeaderCell => "th",
1692+ ElementKind::Video => "video",
1693+ ElementKind::Audio => "audio",
1694+ // Additional semantic elements
1695+ ElementKind::Form => "form",
1696+ ElementKind::Details => "details",
1697+ ElementKind::Summary => "summary",
1698+ ElementKind::Blockquote => "blockquote",
1699+ ElementKind::Cite => "cite",
1700+ ElementKind::Code => "code",
1701+ ElementKind::Pre => "pre",
1702+ ElementKind::Figure => "figure",
1703+ ElementKind::FigCaption => "figcaption",
1704+ ElementKind::Progress => "progress",
1705+ ElementKind::Meter => "meter",
1707+ ElementKind::Dialog => "dialog",
1708+ ElementKind::DefinitionList => "dl",
1709+ ElementKind::DefinitionTerm => "dt",
1710+ ElementKind::DefinitionDescription => "dd",
1711+ ElementKind::Fieldset => "fieldset",
1712+ ElementKind::Legend => "legend",
1713+ ElementKind::Picture => "picture",
1714+ ElementKind::Time => "time",
1715+ ElementKind::Mark => "mark",
1716+ ElementKind::Kbd => "kbd",
1717+ ElementKind::Abbr => "abbr",
1718+ ElementKind::Datalist => "datalist",
1719+ ElementKind::Iframe => "iframe",
1720+ ElementKind::Output => "output",
1721+ ElementKind::Canvas => "canvas",
1722+ ElementKind::Badge => "span",
1723+ ElementKind::Tooltip => "span",
1724+ ElementKind::Avatar => "div",
1725+ ElementKind::Carousel => "div",
1726+ ElementKind::Chip => "span",
1727+ ElementKind::Tag => "span",
1728+ ElementKind::Noscript => "noscript",
1729+ ElementKind::Address => "address",
1730+ ElementKind::Search => "search",
1732+ | ElementKind::Input
1733+ | ElementKind::HorizontalRule
1734+ | ElementKind::Children
1735+ | ElementKind::Slot(_)
1736+ | ElementKind::Fragment
1737+ | ElementKind::Source
1738+ | ElementKind::Spacer
1739+ | ElementKind::Script
1740+ | ElementKind::Breadcrumb => unreachable!(),
1743+ let kind_label = match elem.kind {
1744+ ElementKind::Row => "row",
1745+ ElementKind::Column => "column",
1746+ ElementKind::El => "el",
1747+ ElementKind::Text => "text",
1748+ ElementKind::Paragraph => "paragraph",
1749+ ElementKind::Link => "link",
1750+ ElementKind::Button => "button",
1751+ ElementKind::Select => "select",
1752+ ElementKind::Textarea => "textarea",
1753+ ElementKind::Option => "option",
1754+ ElementKind::Label => "label",
1755+ ElementKind::Nav => "nav",
1756+ ElementKind::Header => "header",
1757+ ElementKind::Footer => "footer",
1758+ ElementKind::Main => "main",
1759+ ElementKind::Section => "section",
1760+ ElementKind::Article => "article",
1761+ ElementKind::Aside => "aside",
1762+ ElementKind::List => "list",
1763+ ElementKind::ListItem => "item",
1764+ ElementKind::Table => "table",
1765+ ElementKind::TableHead => "thead",
1766+ ElementKind::TableBody => "tbody",
1767+ ElementKind::TableRow => "tr",
1768+ ElementKind::TableCell => "td",
1769+ ElementKind::TableHeaderCell => "th",
1770+ ElementKind::Video => "video",
1771+ ElementKind::Audio => "audio",
1772+ ElementKind::Form => "form",
1773+ ElementKind::Details => "details",
1774+ ElementKind::Summary => "summary",
1775+ ElementKind::Blockquote => "blockquote",
1776+ ElementKind::Cite => "cite",
1777+ ElementKind::Code => "code",
1778+ ElementKind::Pre => "pre",
1779+ ElementKind::Figure => "figure",
1780+ ElementKind::FigCaption => "figcaption",
1781+ ElementKind::Fragment => "fragment",
1782+ ElementKind::Dialog => "dialog",
1783+ ElementKind::DefinitionList => "dl",
1784+ ElementKind::DefinitionTerm => "dt",
1785+ ElementKind::DefinitionDescription => "dd",
1786+ ElementKind::Fieldset => "fieldset",
1787+ ElementKind::Legend => "legend",
1788+ ElementKind::Picture => "picture",
1789+ ElementKind::Time => "time",
1790+ ElementKind::Mark => "mark",
1791+ ElementKind::Kbd => "kbd",
1792+ ElementKind::Abbr => "abbr",
1793+ ElementKind::Datalist => "datalist",
1794+ ElementKind::Iframe => "iframe",
1795+ ElementKind::Output => "output",
1796+ ElementKind::Canvas => "canvas",
1797+ ElementKind::Grid => "grid",
1798+ ElementKind::Stack => "stack",
1799+ ElementKind::Badge => "badge",
1800+ ElementKind::Tooltip => "tooltip",
1801+ ElementKind::Avatar => "avatar",
1802+ ElementKind::Carousel => "carousel",
1803+ ElementKind::Chip => "chip",
1804+ ElementKind::Tag => "tag",
1805+ ElementKind::Noscript => "noscript",
1806+ ElementKind::Address => "address",
1807+ ElementKind::Search => "search",
1380 _ => "",
1808 _ => "",
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 };
1387− let kind_label = elem.kind.name();
1389 // Track interactive elements for focus-visible CSS
1811 // Track interactive elements for focus-visible CSS
1390− if elem.kind == ElementKind::Link
1812+ if matches!(
1391− || matches!(kind_label, "button" | "input" | "select" | "textarea")
1813+ elem.kind,
1392− {
1814+ ElementKind::Link
1815+ | ElementKind::Button
1816+ | ElementKind::Input
1817+ | ElementKind::Select
1818+ | ElementKind::Textarea
1393 ctx.has_interactive = true;
1820 ctx.has_interactive = true;
1396 // Compute CSS for each state and get a class name
1823 // Compute CSS for each state and get a class name
1397− let gen_class = element_class(elem, &Site::new(elem, parent, &ctx.flow), styles);
1824+ let gen_class = compute_class(&elem.attrs, &elem.kind, parent_kind, styles);
1398− own.class = gen_class.clone();
1399 let (id, user_class) = extract_id_class(&elem.attrs);
1825 let (id, user_class) = extract_id_class(&elem.attrs);
1401 if ctx.dev && elem.line_num > 0 {
1827 if ctx.dev && elem.line_num > 0 {
@@ -1409,9 +1835,85 @@ fn generate_element(
1409 out.push('<');
1835 out.push('<');
1410 out.push_str(tag);
1836 out.push_str(tag);
1412− emit_argument_attr(out, elem, ctx.in_picture);
1838+ // @main gets id="hl-main" for skip-to-content link (unless user set an id)
1839+ if elem.kind == ElementKind::Main && id.is_none() {
1840+ out.push_str(" id=\"hl-main\"");
1414− emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1843+ if elem.kind == ElementKind::Link
1844+ && let Some(url) = &elem.argument
1846+ out.push_str(" href=\"");
1847+ out.push_str(&html_escape(url));
1849+ // Auto rel="noopener noreferrer" and target="_blank" for external links
1850+ let is_external = url.starts_with("http://") || url.starts_with("https://");
1852+ let has_rel = elem.attrs.iter().any(|a| a.key == "rel");
1853+ let has_target = elem.attrs.iter().any(|a| a.key == "target");
1855+ out.push_str(" rel=\"noopener noreferrer\"");
1858+ out.push_str(" target=\"_blank\"");
1864+ if matches!(elem.kind, ElementKind::Video | ElementKind::Audio)
1865+ && let Some(src) = &elem.argument
1867+ out.push_str(" src=\"");
1868+ out.push_str(&html_escape(src));
1873+ if elem.kind == ElementKind::Form
1874+ && let Some(action) = &elem.argument
1876+ out.push_str(" action=\"");
1877+ out.push_str(&html_escape(action));
1882+ if elem.kind == ElementKind::Iframe
1883+ && let Some(src) = &elem.argument
1885+ out.push_str(" src=\"");
1886+ out.push_str(&html_escape(src));
1891+ if elem.kind == ElementKind::Tooltip
1892+ && let Some(text) = &elem.argument
1894+ out.push_str(" title=\"");
1895+ out.push_str(&html_escape(text));
1899+ // Critical CSS: inline styles directly instead of using a class
1900+ let is_critical = elem.attrs.iter().any(|a| a.key == "critical");
1902+ let inline_css = attrs_to_css(&elem.attrs, "", &elem.kind, parent_kind);
1903+ if !inline_css.is_empty() {
1904+ out.push_str(" style=\"");
1905+ out.push_str(&html_escape(&inline_css));
1908+ // Still use class for non-base styles (pseudo, responsive, etc.)
1909+ if gen_class.as_deref().is_some_and(|c| !c.is_empty()) {
1910+ emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1911+ } else if let Some(ref uc) = user_class {
1912+ emit_class_attr(out, None, Some(uc));
1915+ emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1416 if let Some(id) = id {
1918 if let Some(id) = id {
1417 out.push_str(" id=\"");
1919 out.push_str(" id=\"");
@@ -1419,7 +1921,7 @@ fn generate_element(
1419 out.push('"');
1921 out.push('"');
1422− emit_html_attrs(out, &elem.attrs);
1924+ emit_html_passthrough_attrs(out, &elem.attrs);
1424 // Source map attributes in dev mode
1926 // Source map attributes in dev mode
1425 if ctx.dev && elem.line_num > 0 {
1927 if ctx.dev && elem.line_num > 0 {
@@ -1430,27 +1932,51 @@ fn generate_element(
1432 out.push('>');
1934 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");
1438 out.push_str(ctx.nl());
1935 out.push_str(ctx.nl());
1440− let layout = elem.kind.layout();
1937+ // Inline text argument
1941+ | ElementKind::Button
1942+ | ElementKind::Label
1943+ | ElementKind::Option
1944+ | ElementKind::Textarea
1945+ | ElementKind::ListItem
1946+ | ElementKind::TableCell
1947+ | ElementKind::TableHeaderCell
1948+ | ElementKind::Summary
1949+ | ElementKind::Cite
1950+ | ElementKind::Code
1951+ | ElementKind::FigCaption
1952+ | ElementKind::Legend
1953+ | ElementKind::DefinitionTerm
1954+ | ElementKind::Mark
1956+ | ElementKind::Abbr
1957+ | ElementKind::Time
1958+ | ElementKind::DefinitionDescription
1959+ | ElementKind::Badge
1960+ | ElementKind::Tooltip
1961+ | ElementKind::Chip
1963+ ) && let Some(text) = &elem.argument
1965+ out.push_str(&html_escape(text));
1441 ctx.depth += 1;
1969 ctx.depth += 1;
1442− let outer_in_text = ctx.in_text;
1970+ let is_paragraph = elem.kind == ElementKind::Paragraph;
1443− ctx.in_text = in_text || layout == Layout::Text;
1971+ for (i, child) in elem.children.iter().enumerate() {
1444− let outer_flow = std::mem::replace(&mut ctx.flow, own);
1972+ generate_node(child, Some(&elem.kind), out, styles, ctx);
1445− let outer_picture = std::mem::replace(&mut ctx.in_picture, elem.kind.is_tag("picture"));
1973+ if is_paragraph && i < elem.children.len() - 1 {
1446− generate_children(&elem.children, Some(layout), out, styles, ctx);
1974+ out.push(' ');
1447− ctx.in_picture = outer_picture;
1975+ }
1448− ctx.flow = outer_flow;
1976+ }
1449− ctx.in_text = outer_in_text;
1450 ctx.depth -= 1;
1977 ctx.depth -= 1;
1452 out.push_str(&ctx.indent());
1979 out.push_str(&ctx.indent());
1453− ctx.dev = outer_dev;
1454 out.push_str("</");
1980 out.push_str("</");
1455 out.push_str(tag);
1981 out.push_str(tag);
1456 out.push('>');
1982 out.push('>');
@@ -1459,18 +1985,21 @@ fn generate_element(
1460fn generate_self_closing(
1986fn generate_self_closing(
1461 elem: &Element,
1987 elem: &Element,
1462− parent: Option<Layout>,
1988+ parent_kind: Option<&ElementKind>,
1463 out: &mut String,
1989 out: &mut String,
1464 styles: &mut StyleCollector,
1990 styles: &mut StyleCollector,
1465 ctx: &mut GenContext,
1991 ctx: &mut GenContext,
1467− let gen_class = element_class(elem, &Site::new(elem, parent, &ctx.flow), styles);
1993+ let gen_class = compute_class(&elem.attrs, &elem.kind, parent_kind, styles);
1468 let (id, user_class) = extract_id_class(&elem.attrs);
1994 let (id, user_class) = extract_id_class(&elem.attrs);
1470− let (tag, kind_label) = match &elem.kind {
1996+ let (tag, kind_label) = match elem.kind {
1471 ElementKind::Image => ("img", "image"),
1997 ElementKind::Image => ("img", "image"),
1472− ElementKind::Tag(spec) => (spec.html, spec.name),
1998+ ElementKind::Input => ("input", "input"),
1473− _ => unreachable!("not a void element: {:?}", elem.kind),
1999+ ElementKind::HorizontalRule => ("hr", "hr"),
2000+ ElementKind::Source => ("source", "source"),
2001+ ElementKind::Spacer => ("div", "spacer"),
2002+ _ => unreachable!(),
1476 if ctx.dev && elem.line_num > 0 {
2005 if ctx.dev && elem.line_num > 0 {
@@ -1483,7 +2012,43 @@ fn generate_self_closing(
1483 out.push_str(&ctx.indent());
2012 out.push_str(&ctx.indent());
1484 out.push('<');
2013 out.push('<');
1485 out.push_str(tag);
2014 out.push_str(tag);
1486− emit_argument_attr(out, elem, ctx.in_picture);
2015+
2016+ // Image src (with optional non-SVG base64 inlining)
2017+ if elem.kind == ElementKind::Image {
2018+ let src = elem.argument.as_deref().unwrap_or("");
2019+ let is_inline = elem.attrs.iter().any(|a| a.key == "inline");
2020+ if is_inline && !src.is_empty() && !src.ends_with(".svg") {
2021+ let mime = if src.ends_with(".png") {
2023+ } else if src.ends_with(".jpg") || src.ends_with(".jpeg") {
2025+ } else if src.ends_with(".gif") {
2027+ } else if src.ends_with(".webp") {
2029+ } else if src.ends_with(".avif") {
2032+ "application/octet-stream"
2034+ if let Ok(data) = std::fs::read(src) {
2035+ let b64 = base64_encode(&data);
2036+ out.push_str(" src=\"data:");
2037+ out.push_str(mime);
2038+ out.push_str(";base64,");
2039+ out.push_str(&b64);
2042+ out.push_str(" src=\"");
2043+ out.push_str(&html_escape(src));
2047+ out.push_str(" src=\"");
2048+ out.push_str(&html_escape(src));
1488 emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
2053 emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
@@ -1493,7 +2058,7 @@ fn generate_self_closing(
1493 out.push('"');
2058 out.push('"');
1496− emit_html_attrs(out, &elem.attrs);
2061+ emit_html_passthrough_attrs(out, &elem.attrs);
1498 // Source map attributes in dev mode (self-closing)
2063 // Source map attributes in dev mode (self-closing)
1499 if ctx.dev && elem.line_num > 0 {
2064 if ctx.dev && elem.line_num > 0 {
@@ -1503,6 +2068,93 @@ fn generate_self_closing(
2071+ // Image optimization: auto-add loading="lazy" and decoding="async"
2072+ if elem.kind == ElementKind::Image {
2073+ // SVG inlining: @image [inline] logo.svg
2074+ if elem.attrs.iter().any(|a| a.key == "inline")
2075+ && let Some(src) = &elem.argument
2076+ && src.ends_with(".svg")
2077+ && let Ok(svg_content) = std::fs::read_to_string(src)
2079+ // Close the tag we opened, then emit inline SVG instead
2080+ out.truncate(out.rfind('<').unwrap_or(0));
2081+ out.push_str(&ctx.indent());
2082+ out.push_str(svg_content.trim());
2083+ out.push_str(ctx.nl());
2086+ // Responsive srcset: @image photo.jpg [responsive 400 800 1200]
2087+ let responsive_attr = elem.attrs.iter().find(|a| a.key == "responsive");
2088+ if let Some(resp) = responsive_attr
2089+ && let Some(ref sizes_str) = resp.value
2091+ let widths: Vec<&str> = sizes_str.split_whitespace().collect();
2092+ if !widths.is_empty() {
2093+ let src = elem.argument.as_deref().unwrap_or("");
2094+ if !src.is_empty() {
2095+ // Generate srcset with width descriptors
2096+ // Convention: file-{width}.ext (e.g., photo-400.jpg)
2097+ let dot_pos = src.rfind('.').unwrap_or(src.len());
2098+ let base = &src[..dot_pos];
2099+ let ext = &src[dot_pos..];
2100+ let mut srcset_parts = Vec::new();
2102+ srcset_parts.push(format!("{}-{}{} {}w", base, w, ext, w));
2104+ out.push_str(" srcset=\"");
2105+ out.push_str(&srcset_parts.join(", "));
2107+ // Generate sizes attribute
2108+ let max_width = widths.last().unwrap_or(&"100vw");
2109+ out.push_str(&format!(
2110+ " sizes=\"(max-width: {}px) 100vw, {}px\"",
2111+ max_width, max_width
2117+ // Auto image dimensions: read local image file to inject width/height + aspect-ratio
2118+ let has_width = elem.attrs.iter().any(|a| a.key == "width");
2119+ let has_height = elem.attrs.iter().any(|a| a.key == "height");
2120+ if (!has_width || !has_height)
2121+ && let Some(ref src) = elem.argument
2122+ && !src.starts_with("http://")
2123+ && !src.starts_with("https://")
2124+ && !src.starts_with("data:")
2125+ && let Some((w, h)) = read_image_dimensions(src)
2128+ out.push_str(&format!(" width=\"{}\"", w));
2131+ out.push_str(&format!(" height=\"{}\"", h));
2133+ // Auto aspect-ratio to prevent CLS
2134+ if !elem.attrs.iter().any(|a| a.key == "aspect-ratio") {
2135+ out.push_str(&format!(" style=\"aspect-ratio:{}/{}\"", w, h));
2139+ // Smart image loading: first 3 images get fetchpriority="high" (above the fold),
2140+ // subsequent images get loading="lazy" + decoding="async"
2141+ ctx.image_count += 1;
2142+ if ctx.image_count <= 3 {
2143+ // Above-the-fold: eager loading with high priority
2144+ if !elem.attrs.iter().any(|a| a.key == "fetchpriority") {
2145+ out.push_str(" fetchpriority=\"high\"");
2148+ // Below-the-fold: lazy loading
2149+ if !elem.attrs.iter().any(|a| a.key == "loading") {
2150+ out.push_str(" loading=\"lazy\"");
2152+ if !elem.attrs.iter().any(|a| a.key == "decoding") {
2153+ out.push_str(" decoding=\"async\"");
1506 out.push('>');
2158 out.push('>');
1507 out.push_str(ctx.nl());
2159 out.push_str(ctx.nl());
@@ -1518,10 +2170,7 @@ fn generate_text_segments(
1518 TextSegment::Plain(text) => out.push_str(&html_escape(text)),
2170 TextSegment::Plain(text) => out.push_str(&html_escape(text)),
1519 TextSegment::Inline(elem) => {
2171 TextSegment::Inline(elem) => {
1520 let mut buf = String::new();
2172 let mut buf = String::new();
1521− // An element inside a line of text is in text
2173+ generate_element(elem, None, &mut buf, styles, ctx);
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;
1525 out.push_str(buf.trim_end());
2174 out.push_str(buf.trim_end());
@@ -1534,97 +2183,141 @@ fn generate_text_segments(
1535fn compute_class(
2184fn compute_class(
1536 attrs: &[Attribute],
2185 attrs: &[Attribute],
1537− site: &Site,
2186+ kind: &ElementKind,
2187+ parent_kind: Option<&ElementKind>,
1538 styles: &mut StyleCollector,
2188 styles: &mut StyleCollector,
1540) -> Option<String> {
2189) -> Option<String> {
1541− // Every condition an attribute is under, and none
2190+ let base = attrs_to_css(attrs, "", kind, parent_kind);
1542− let mut conditions = vec![Condition::default()];
2191+
1543− for attr in attrs.iter().filter(|a| !a.html) {
2192+ // Collect pseudo-state overrides
1544− let (condition, _) = Condition::of(&attr.key);
2193+ let mut pseudo = Vec::new();
1545− if !conditions.contains(&condition) {
2194+ for &(prefix, selector) in PSEUDO_PREFIXES {
1546− conditions.push(condition);
2195+ let css = attrs_to_css(attrs, prefix, kind, parent_kind);
2196+ if !css.is_empty() {
2197+ pseudo.push((selector.to_string(), css));
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
1554− let css = dedupe_declarations(&attrs_to_css(attrs, &condition, site));
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)
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)
1570− styles.get_class(defaults, rules, distinct)
1573−/// The defaults of an element's kind where it is: an overlay's positioning
2201+ // Auto-add ::-webkit-scrollbar pseudo for no-scrollbar attribute
1574−/// context, its layout, and its kind's own CSS (a heading's `margin:0`).
2202+ if attrs.iter().any(|a| a.key == "no-scrollbar") {
1575−fn default_css(site: &Site) -> String {
2203+ pseudo.push((
1576− let mut css = String::new();
2204+ "::-webkit-scrollbar".to_string(),
1577− // Elements with @in-front / @behind children become positioning
2205+ "display:none;".to_string(),
1578− // contexts
2206+ ));
1579− if site.has_overlay_children {
1580− css.push_str("position:relative;isolation:isolate;");
1583− css.push_str(layout_css(site.kind.layout(), site.inline));
1585− css.push_str(site.kind.css());
1589−/// The declarations of a rule body, as (property, `property:value;`), for
2209+ // Collect nth:EXPR: dynamic pseudo selectors
1590−/// bodies htmlang wrote: every declaration ends in `;`, and a `;` inside
2210+ let mut nth_prefixes: Vec<String> = Vec::new();
1591−/// quotes or parentheses doesn't end one.
2211+ for attr in attrs {
1592−fn declarations(css: &str) -> impl Iterator<Item = (&str, &str)> {
2212+ if attr.key.starts_with("nth:") {
1593− let mut rest = css;
2213+ let rest = &attr.key[4..];
1594− std::iter::from_fn(move || {
2214+ if let Some(colon_pos) = rest.find(':') {
1595− if rest.is_empty() {
2215+ let prefix = format!("nth:{}:", &rest[..colon_pos]);
1596− return None;
2216+ if !nth_prefixes.contains(&prefix) {
1597− }
2217+ nth_prefixes.push(prefix);
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() {
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),
1609− ';' if depth == 0 => {
1616− let (declaration, after) = rest.split_at(end);
2221+ }
1617− rest = after;
2222+ for prefix in &nth_prefixes {
1618− let name = declaration.split(':').next().unwrap_or("").trim();
2223+ let expr = &prefix[4..prefix.len() - 1];
1619− Some((name, declaration))
2224+ let selector = format!(":nth-child({})", expr);
1620− })
2225+ let css = attrs_to_css(attrs, prefix, kind, parent_kind);
2226+ if !css.is_empty() {
2227+ pseudo.push((selector, css));
2231+ // Collect has(...): dynamic pseudo selectors
2232+ let mut has_prefixes: Vec<String> = Vec::new();
2233+ for attr in attrs {
2234+ if attr.key.starts_with("has(")
2235+ && let Some(close) = attr.key.find("):")
2237+ let prefix = format!("{}:", &attr.key[..close + 1]);
2238+ if !has_prefixes.contains(&prefix) {
2239+ has_prefixes.push(prefix);
2243+ for prefix in &has_prefixes {
2244+ let inner = &prefix[4..prefix.len() - 2]; // extract selector from has(selector):
2245+ let selector = format!(":has({})", inner);
2246+ let css = attrs_to_css(attrs, prefix, kind, parent_kind);
2247+ if !css.is_empty() {
2248+ pseudo.push((selector, css));
2252+ // Collect responsive overrides
2253+ let mut responsive = Vec::new();
2254+ for &(bp_name, _) in BREAKPOINTS {
2255+ let prefix = format!("{}:", bp_name);
2256+ let css = attrs_to_css(attrs, &prefix, kind, parent_kind);
2257+ if !css.is_empty() {
2258+ responsive.push((bp_name.to_string(), css));
2262+ // Collect container query overrides
2263+ let mut container = Vec::new();
2264+ for &(bp_name, _) in BREAKPOINTS {
2265+ let prefix = format!("cq-{}:", bp_name);
2266+ let css = attrs_to_css(attrs, &prefix, kind, parent_kind);
2267+ if !css.is_empty() {
2268+ container.push((bp_name.to_string(), css));
2272+ let dark = attrs_to_css(attrs, "dark:", kind, parent_kind);
2273+ let print = attrs_to_css(attrs, "print:", kind, parent_kind);
2274+ let motion_safe = attrs_to_css(attrs, "motion-safe:", kind, parent_kind);
2275+ let motion_reduce = attrs_to_css(attrs, "motion-reduce:", kind, parent_kind);
2276+ let landscape = attrs_to_css(attrs, "landscape:", kind, parent_kind);
2277+ let portrait = attrs_to_css(attrs, "portrait:", kind, parent_kind);
2279+ // Dedupe: if a property is declared twice within a single rule, keep only
2280+ // the last occurrence (element-kind defaults are written before
2281+ // user attributes, so a user [list-style disc] correctly overrides the
2282+ // default list-style:none, and we don't need to ship both).
2283+ let base = dedupe_declarations(&base);
2284+ let pseudo: Vec<(String, String)> = pseudo
2286+ .map(|(sel, css)| (sel, dedupe_declarations(&css)))
2288+ let responsive: Vec<(String, String)> = responsive
2290+ .map(|(bp, css)| (bp, dedupe_declarations(&css)))
2292+ let dark = dedupe_declarations(&dark);
2293+ let print = dedupe_declarations(&print);
2294+ let motion_safe = dedupe_declarations(&motion_safe);
2295+ let motion_reduce = dedupe_declarations(&motion_reduce);
2296+ let landscape = dedupe_declarations(&landscape);
2297+ let portrait = dedupe_declarations(&portrait);
2298+ let container: Vec<(String, String)> = container
2300+ .map(|(bp, css)| (bp, dedupe_declarations(&css)))
1623/// Dedupe CSS declarations within a single rule body: for any property
2317/// Dedupe CSS declarations within a single rule body: for any property
1624/// declared more than once, keep only the last occurrence. Unparseable
2318/// declared more than once, keep only the last occurrence. Unparseable
1625−/// segments (no `:`) are preserved as-is. Semicolons inside parentheses or
2319+/// segments (no `:`) are preserved as-is. Semicolons inside parentheses are
1626−/// quoted strings are treated as part of a value, not as declaration
2320+/// treated as part of a value, not as declaration separators.
1628fn dedupe_declarations(css: &str) -> String {
2321fn dedupe_declarations(css: &str) -> String {
1629 if css.is_empty() {
2322 if css.is_empty() {
1630 return String::new();
2323 return String::new();
@@ -1639,26 +2332,8 @@ fn dedupe_declarations(css: &str) -> String {
1639 let mut decls: Vec<(Option<String>, String)> = Vec::new();
2332 let mut decls: Vec<(Option<String>, String)> = Vec::new();
1640 let mut current = String::new();
2333 let mut current = String::new();
1641 let mut depth: i32 = 0;
2334 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;
1646 for ch in css.chars() {
2335 for ch in css.chars() {
1647− if escaped {
2336+ if ch == '(' {
1650− } else if ch == '\\' {
1653− } else if let Some(q) = quote {
1658− } else if ch == '"' || ch == '\'' {
1661− } else if ch == '(' {
1662 depth += 1;
2337 depth += 1;
1663 current.push(ch);
2338 current.push(ch);
1664 } else if ch == ')' {
2339 } else if ch == ')' {
@@ -1687,652 +2362,1562 @@ fn dedupe_declarations(css: &str) -> String {
1687 decls.push((prop, std::mem::take(&mut current)));
2362 decls.push((prop, std::mem::take(&mut current)));
1690− if decls.len() < 2 {
2365+ if decls.len() < 2 {
1691− return css.to_string();
2366+ return css.to_string();
2369+ // Find index of last occurrence of each property.
2370+ use std::collections::HashMap;
2371+ let mut last: HashMap<String, usize> = HashMap::new();
2372+ for (i, (prop, _)) in decls.iter().enumerate() {
2373+ if let Some(p) = prop {
2374+ last.insert(p.clone(), i);
2378+ let mut out = String::with_capacity(css.len());
2379+ for (i, (prop, raw)) in decls.iter().enumerate() {
2380+ let keep = match prop {
2381+ Some(p) => last.get(p) == Some(&i),
2391+fn emit_class_attr(out: &mut String, gen_class: Option<&str>, user_class: Option<&str>) {
2392+ match (gen_class, user_class) {
2393+ (Some(g), Some(u)) => {
2394+ out.push_str(" class=\"");
2397+ out.push_str(&html_escape(u));
2400+ (Some(g), None) => {
2401+ out.push_str(" class=\"");
2405+ (None, Some(u)) => {
2406+ out.push_str(" class=\"");
2407+ out.push_str(&html_escape(u));
2414+// ---------------------------------------------------------------------------
2415+// Attribute → CSS mapping
2416+// ---------------------------------------------------------------------------
2418+/// (htmlang prefix, CSS selector suffix)
2419+const PSEUDO_PREFIXES: &[(&str, &str)] = &[
2420+ ("hover:", ":hover"),
2421+ ("active:", ":active"),
2422+ ("focus:", ":focus"),
2423+ ("focus-visible:", ":focus-visible"),
2424+ ("focus-within:", ":focus-within"),
2425+ ("disabled:", ":disabled"),
2426+ ("checked:", ":checked"),
2427+ ("placeholder:", "::placeholder"),
2428+ ("first:", ":first-child"),
2429+ ("last:", ":last-child"),
2430+ ("odd:", ":nth-child(odd)"),
2431+ ("even:", ":nth-child(even)"),
2432+ ("before:", "::before"),
2433+ ("after:", "::after"),
2434+ ("selection:", "::selection"),
2435+ ("visited:", ":visited"),
2436+ ("empty:", ":empty"),
2437+ ("target:", ":target"),
2438+ ("valid:", ":valid"),
2439+ ("invalid:", ":invalid"),
2441+const RESPONSIVE_PREFIXES: &[&str] = &["sm:", "md:", "lg:", "xl:", "2xl:"];
2442+const MEDIA_PREFIXES: &[&str] = &[
2450+const CONTAINER_QUERY_PREFIXES: &[&str] = &["cq-sm:", "cq-md:", "cq-lg:", "cq-xl:", "cq-2xl:"];
2452+fn is_prefixed_attr(key: &str) -> bool {
2453+ PSEUDO_PREFIXES.iter().any(|&(p, _)| key.starts_with(p))
2454+ || RESPONSIVE_PREFIXES.iter().any(|p| key.starts_with(p))
2455+ || MEDIA_PREFIXES.iter().any(|p| key.starts_with(p))
2456+ || CONTAINER_QUERY_PREFIXES.iter().any(|p| key.starts_with(p))
2457+ || key.starts_with("nth:")
2458+ || key.starts_with("has(")
2462+ attrs: &[Attribute],
2463+ state_prefix: &str,
2464+ kind: &ElementKind,
2465+ parent_kind: Option<&ElementKind>,
2467+ let mut css = String::new();
2469+ // Base element styles only for the default (non-state) pass
2470+ if state_prefix.is_empty() {
2472+ ElementKind::Row => css.push_str("display:flex;flex-direction:row;"),
2473+ ElementKind::Column => css.push_str("display:flex;flex-direction:column;"),
2474+ ElementKind::El => css.push_str("display:flex;flex-direction:column;"),
2475+ ElementKind::Paragraph => css.push_str("margin:0;"),
2476+ // Semantic elements get flex column layout like @el
2477+ ElementKind::Nav | ElementKind::Header | ElementKind::Footer
2478+ | ElementKind::Main | ElementKind::Section | ElementKind::Article
2479+ | ElementKind::Aside => css.push_str("display:flex;flex-direction:column;"),
2480+ // Lists: reset browser defaults
2481+ ElementKind::List => css.push_str("margin:0;padding-left:0;list-style:none;"),
2482+ ElementKind::ListItem => css.push_str("display:flex;flex-direction:column;"),
2483+ // Form: flex column like @el
2484+ ElementKind::Form => css.push_str("display:flex;flex-direction:column;"),
2485+ // Details: flex column
2486+ ElementKind::Details => css.push_str("display:flex;flex-direction:column;"),
2487+ // Figure: flex column
2488+ ElementKind::Figure => css.push_str("display:flex;flex-direction:column;margin:0;"),
2489+ // Blockquote: flex column, reset browser margin
2490+ ElementKind::Blockquote => css.push_str("display:flex;flex-direction:column;margin:0;"),
2491+ // Pre: preserve whitespace
2492+ ElementKind::Pre => css.push_str("margin:0;white-space:pre;font-family:ui-monospace,monospace;"),
2493+ // Code: monospace font
2494+ ElementKind::Code => css.push_str("font-family:ui-monospace,monospace;"),
2496+ ElementKind::Dialog => css.push_str("display:flex;flex-direction:column;"),
2497+ ElementKind::DefinitionList => css.push_str("margin:0;"),
2498+ ElementKind::DefinitionDescription => css.push_str("margin:0;display:flex;flex-direction:column;"),
2499+ ElementKind::Fieldset => css.push_str("display:flex;flex-direction:column;border:1px solid currentColor;padding:0.5em;margin:0;"),
2500+ ElementKind::Kbd => css.push_str("font-family:ui-monospace,monospace;"),
2501+ ElementKind::Grid => css.push_str("display:grid;"),
2502+ ElementKind::Stack => css.push_str("position:relative;"),
2503+ ElementKind::Badge => css.push_str("display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:9999px;font-size:0.75rem;font-weight:600;line-height:1;"),
2504+ ElementKind::Tooltip => css.push_str("position:relative;cursor:help;"),
2505+ ElementKind::Spacer => css.push_str("flex:1;"),
2506+ ElementKind::Avatar => css.push_str("display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;flex-shrink:0;"),
2507+ ElementKind::Carousel => css.push_str("display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;"),
2508+ ElementKind::Chip => css.push_str("display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:9999px;font-size:0.875rem;border:1px solid currentColor;"),
2509+ ElementKind::Tag => css.push_str("display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:0.75rem;font-weight:600;"),
2512+ // Children of @carousel get scroll-snap-align and flex-shrink
2513+ if matches!(parent_kind, Some(ElementKind::Carousel)) {
2514+ css.push_str("scroll-snap-align:start;flex-shrink:0;");
2518+ for attr in attrs {
2519+ // Determine the effective key for this pass
2520+ let effective_key = if state_prefix.is_empty() {
2521+ if is_prefixed_attr(&attr.key) {
2526+ match attr.key.strip_prefix(state_prefix) {
2532+ let val = attr.value.as_deref();
2534+ match effective_key {
2536+ "spacing" | "gap" => {
2537+ if let Some(v) = val {
2538+ push_css(&mut css, "gap", &css_px(v));
2542+ if let Some(v) = val {
2543+ push_css(&mut css, "padding", &css_px_multi(v));
2547+ if let Some(v) = val {
2548+ push_css(&mut css, "padding-left", &css_px(v));
2549+ push_css(&mut css, "padding-right", &css_px(v));
2553+ if let Some(v) = val {
2554+ push_css(&mut css, "padding-top", &css_px(v));
2555+ push_css(&mut css, "padding-bottom", &css_px(v));
2561+ if let Some(v) = val {
2563+ "fill" => match parent_kind {
2564+ Some(ElementKind::Row) => {
2565+ push_css(&mut css, "flex", "1");
2566+ push_css(&mut css, "min-width", "0");
2568+ _ => push_css(&mut css, "width", "100%"),
2570+ "shrink" => push_css(&mut css, "flex-shrink", "0"),
2571+ _ => push_css(&mut css, "width", &css_px(v)),
2576+ if let Some(v) = val {
2578+ "fill" => match parent_kind {
2579+ Some(ElementKind::Column) => {
2580+ push_css(&mut css, "flex", "1");
2581+ push_css(&mut css, "min-height", "0");
2583+ _ => push_css(&mut css, "height", "100%"),
2585+ "shrink" => push_css(&mut css, "flex-shrink", "0"),
2586+ _ => push_css(&mut css, "height", &css_px(v)),
2591+ if let Some(v) = val {
2592+ push_css(&mut css, "min-width", &css_px(v));
2596+ if let Some(v) = val {
2597+ push_css(&mut css, "max-width", &css_px(v));
2601+ if let Some(v) = val {
2602+ push_css(&mut css, "min-height", &css_px(v));
2606+ if let Some(v) = val {
2607+ push_css(&mut css, "max-height", &css_px(v));
2612+ "center-x" => match parent_kind {
2613+ Some(ElementKind::Column) | Some(ElementKind::El) => {
2614+ push_css(&mut css, "align-self", "center");
2617+ push_css(&mut css, "margin-left", "auto");
2618+ push_css(&mut css, "margin-right", "auto");
2621+ "center-y" => match parent_kind {
2622+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "center"),
2624+ push_css(&mut css, "margin-top", "auto");
2625+ push_css(&mut css, "margin-bottom", "auto");
2628+ "align-left" => match parent_kind {
2629+ Some(ElementKind::Column) | Some(ElementKind::El) => {
2630+ push_css(&mut css, "align-self", "flex-start");
2632+ _ => push_css(&mut css, "margin-right", "auto"),
2634+ "align-right" => match parent_kind {
2635+ Some(ElementKind::Column) | Some(ElementKind::El) => {
2636+ push_css(&mut css, "align-self", "flex-end");
2638+ _ => push_css(&mut css, "margin-left", "auto"),
2640+ "align-top" => match parent_kind {
2641+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "flex-start"),
2642+ _ => push_css(&mut css, "margin-bottom", "auto"),
2644+ "align-bottom" => match parent_kind {
2645+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "flex-end"),
2646+ _ => push_css(&mut css, "margin-top", "auto"),
2651+ if let Some(v) = val {
2652+ push_css(&mut css, "background", v);
2656+ if let Some(v) = val {
2657+ push_css(&mut css, "color", v);
2661+ if let Some(v) = val {
2662+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
2663+ if parts.len() == 2 {
2667+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
2673+ &format!("{} solid currentColor", css_px(parts[0])),
2678+ "border-top" | "border-bottom" | "border-left" | "border-right" => {
2679+ if let Some(v) = val {
2680+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
2681+ if parts.len() == 2 {
2685+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
2691+ &format!("{} solid currentColor", css_px(parts[0])),
2697+ if let Some(v) = val {
2698+ push_css(&mut css, "border-radius", &css_px(v));
2701+ "bold" => push_css(&mut css, "font-weight", "bold"),
2702+ "italic" => push_css(&mut css, "font-style", "italic"),
2703+ "underline" => push_css(&mut css, "text-decoration", "underline"),
2705+ if let Some(v) = val {
2706+ push_css(&mut css, "font-size", &css_px(v));
2710+ if let Some(v) = val {
2711+ push_css(&mut css, "font-family", v);
2715+ if let Some(v) = val {
2716+ push_css(&mut css, "transition", v);
2720+ if let Some(v) = val {
2721+ push_css(&mut css, "cursor", v);
2725+ if let Some(v) = val {
2726+ push_css(&mut css, "opacity", v);
2732+ if let Some(v) = val {
2733+ push_css(&mut css, "text-align", v);
2737+ if let Some(v) = val {
2738+ push_css(&mut css, "line-height", &css_line_height(v));
2741+ "letter-spacing" => {
2742+ if let Some(v) = val {
2743+ push_css(&mut css, "letter-spacing", &css_px(v));
2746+ "text-transform" => {
2747+ if let Some(v) = val {
2748+ push_css(&mut css, "text-transform", v);
2752+ if let Some(v) = val {
2753+ push_css(&mut css, "white-space", v);
2757+ // Overflow & positioning
2759+ if let Some(v) = val {
2760+ push_css(&mut css, "overflow", v);
2764+ if let Some(v) = val {
2765+ push_css(&mut css, "position", v);
2769+ if let Some(v) = val {
2770+ push_css(&mut css, "top", &css_px(v));
2774+ if let Some(v) = val {
2775+ push_css(&mut css, "right", &css_px(v));
2779+ if let Some(v) = val {
2780+ push_css(&mut css, "bottom", &css_px(v));
2784+ if let Some(v) = val {
2785+ push_css(&mut css, "left", &css_px(v));
2789+ if let Some(v) = val {
2790+ push_css(&mut css, "z-index", v);
2794+ // Display & visibility
2796+ if let Some(v) = val {
2797+ push_css(&mut css, "display", v);
2801+ if let Some(v) = val {
2802+ push_css(&mut css, "visibility", v);
2805+ "hidden" => push_css(&mut css, "display", "none"),
2807+ // Transform & filters
2809+ if let Some(v) = val {
2810+ push_css(&mut css, "transform", v);
2813+ "backdrop-filter" => {
2814+ if let Some(v) = val {
2815+ push_css(&mut css, "backdrop-filter", v);
2821+ if let Some(v) = val {
2822+ push_css(&mut css, "box-shadow", v);
2827+ "wrap" => push_css(&mut css, "flex-wrap", "wrap"),
2829+ if let Some(v) = val {
2830+ push_css(&mut css, "column-gap", &css_px(v));
2834+ if let Some(v) = val {
2835+ push_css(&mut css, "row-gap", &css_px(v));
2841+ push_css(&mut css, "display", "grid");
2844+ if let Some(v) = val {
2845+ if let Ok(n) = v.parse::<u32>() {
2848+ "grid-template-columns",
2849+ &format!("repeat({},1fr)", n),
2852+ push_css(&mut css, "grid-template-columns", v);
2857+ if let Some(v) = val {
2858+ if let Ok(n) = v.parse::<u32>() {
2861+ "grid-template-rows",
2862+ &format!("repeat({},1fr)", n),
2865+ push_css(&mut css, "grid-template-rows", v);
2870+ if let Some(v) = val {
2871+ push_css(&mut css, "grid-column", &format!("span {}", v));
2875+ if let Some(v) = val {
2876+ push_css(&mut css, "grid-row", &format!("span {}", v));
2882+ if let Some(v) = val {
2883+ push_css(&mut css, "animation", v);
2888+ "aspect-ratio" => {
2889+ if let Some(v) = val {
2890+ push_css(&mut css, "aspect-ratio", v);
2894+ // CSS containment for rendering performance
2896+ if let Some(v) = val {
2897+ push_css(&mut css, "contain", v);
2899+ push_css(&mut css, "contain", "layout style paint");
2902+ "content-visibility" => {
2903+ if let Some(v) = val {
2904+ push_css(&mut css, "content-visibility", v);
2906+ push_css(&mut css, "content-visibility", "auto");
2910+ // Outline (like border but doesn't affect layout)
2912+ if let Some(v) = val {
2913+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
2914+ if parts.len() == 2 {
2918+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
2924+ &format!("{} solid currentColor", css_px(parts[0])),
2930+ // Logical properties (i18n-aware)
2931+ "padding-inline" => {
2932+ if let Some(v) = val {
2933+ push_css(&mut css, "padding-inline", &css_px_multi(v));
2936+ "padding-block" => {
2937+ if let Some(v) = val {
2938+ push_css(&mut css, "padding-block", &css_px_multi(v));
2941+ "margin-inline" => {
2942+ if let Some(v) = val {
2943+ push_css(&mut css, "margin-inline", &css_px_multi(v));
2946+ "margin-block" => {
2947+ if let Some(v) = val {
2948+ push_css(&mut css, "margin-block", &css_px_multi(v));
2952+ // Logical property start/end variants
2953+ "padding-inline-start"
2954+ | "padding-inline-end"
2955+ | "padding-block-start"
2956+ | "padding-block-end"
2957+ | "margin-inline-start"
2958+ | "margin-inline-end"
2959+ | "margin-block-start"
2960+ | "margin-block-end" => {
2961+ if let Some(v) = val {
2962+ push_css(&mut css, effective_key, &css_px(v));
2967+ "inset-inline" | "inset-block" => {
2968+ if let Some(v) = val {
2969+ push_css(&mut css, effective_key, &css_px_multi(v));
2972+ "inset-inline-start" | "inset-inline-end" | "inset-block-start" | "inset-block-end" => {
2973+ if let Some(v) = val {
2974+ push_css(&mut css, effective_key, &css_px(v));
2981+ | "border-inline-start"
2982+ | "border-inline-end"
2983+ | "border-block-start"
2984+ | "border-block-end" => {
2985+ if let Some(v) = val {
2986+ push_css(&mut css, effective_key, v);
2990+ // Logical border-radius
2991+ "border-start-start-radius"
2992+ | "border-start-end-radius"
2993+ | "border-end-start-radius"
2994+ | "border-end-end-radius" => {
2995+ if let Some(v) = val {
2996+ push_css(&mut css, effective_key, &css_px(v));
3000+ // Logical scroll margins & padding
3001+ "scroll-margin-inline"
3002+ | "scroll-margin-block"
3003+ | "scroll-padding-inline"
3004+ | "scroll-padding-block" => {
3005+ if let Some(v) = val {
3006+ push_css(&mut css, effective_key, &css_px_multi(v));
3011+ "inline-size" | "block-size" | "min-inline-size" | "max-inline-size"
3012+ | "min-block-size" | "max-block-size" => {
3013+ if let Some(v) = val {
3014+ push_css(&mut css, effective_key, &css_px(v));
3019+ "scroll-snap-type" => {
3020+ if let Some(v) = val {
3021+ push_css(&mut css, "scroll-snap-type", v);
3024+ "scroll-snap-align" => {
3025+ if let Some(v) = val {
3026+ push_css(&mut css, "scroll-snap-align", v);
3032+ if let Some(v) = val {
3033+ push_css(&mut css, "margin", &css_px_multi(v));
3037+ if let Some(v) = val {
3038+ push_css(&mut css, "margin-left", &css_px(v));
3039+ push_css(&mut css, "margin-right", &css_px(v));
3043+ if let Some(v) = val {
3044+ push_css(&mut css, "margin-top", &css_px(v));
3045+ push_css(&mut css, "margin-bottom", &css_px(v));
3051+ if let Some(v) = val {
3052+ push_css(&mut css, "filter", v);
3056+ // Object fit/position (for images)
3058+ if let Some(v) = val {
3059+ push_css(&mut css, "object-fit", v);
3062+ "object-position" => {
3063+ if let Some(v) = val {
3064+ push_css(&mut css, "object-position", v);
3070+ if let Some(v) = val {
3071+ push_css(&mut css, "text-shadow", v);
3076+ "text-overflow" => {
3077+ if let Some(v) = val {
3078+ push_css(&mut css, "text-overflow", v);
3083+ "pointer-events" => {
3084+ if let Some(v) = val {
3085+ push_css(&mut css, "pointer-events", v);
3089+ if let Some(v) = val {
3090+ push_css(&mut css, "user-select", v);
3094+ // Flexbox/grid alignment
3095+ "justify-content" => {
3096+ if let Some(v) = val {
3097+ push_css(&mut css, "justify-content", v);
3101+ if let Some(v) = val {
3102+ push_css(&mut css, "align-items", v);
3108+ if let Some(v) = val {
3109+ push_css(&mut css, "order", v);
3113+ // Background extras
3114+ "background-size" => {
3115+ if let Some(v) = val {
3116+ push_css(&mut css, "background-size", v);
3119+ "background-position" => {
3120+ if let Some(v) = val {
3121+ push_css(&mut css, "background-position", v);
3124+ "background-repeat" => {
3125+ if let Some(v) = val {
3126+ push_css(&mut css, "background-repeat", v);
3132+ if let Some(v) = val {
3133+ push_css(&mut css, "word-break", v);
3136+ "overflow-wrap" => {
3137+ if let Some(v) = val {
3138+ push_css(&mut css, "overflow-wrap", v);
3142+ // Container queries
3144+ push_css(&mut css, "container-type", "inline-size");
3146+ "container-name" => {
3147+ if let Some(v) = val {
3148+ push_css(&mut css, "container-name", v);
3151+ "container-type" => {
3152+ if let Some(v) = val {
3153+ push_css(&mut css, "container-type", v);
3159+ if let Some(v) = val {
3160+ push_css(&mut css, "overflow-x", v);
3164+ if let Some(v) = val {
3165+ push_css(&mut css, "overflow-y", v);
3169+ // Inset (shorthand for top/right/bottom/left)
3171+ if let Some(v) = val {
3172+ push_css(&mut css, "inset", &css_px(v));
3176+ // Accent & caret colors
3177+ "accent-color" => {
3178+ if let Some(v) = val {
3179+ push_css(&mut css, "accent-color", v);
3183+ if let Some(v) = val {
3184+ push_css(&mut css, "caret-color", v);
3188+ // Color scheme & appearance
3189+ "color-scheme" => {
3190+ if let Some(v) = val {
3191+ push_css(&mut css, "color-scheme", v);
3195+ if let Some(v) = val {
3196+ push_css(&mut css, "appearance", v);
3202+ if let Some(v) = val {
3203+ push_css(&mut css, "list-style", v);
3208+ "border-collapse" => {
3209+ if let Some(v) = val {
3210+ push_css(&mut css, "border-collapse", v);
3213+ "border-spacing" => {
3214+ if let Some(v) = val {
3215+ push_css(&mut css, "border-spacing", &css_px(v));
3220+ "text-decoration" => {
3221+ if let Some(v) = val {
3222+ push_css(&mut css, "text-decoration", v);
3225+ "text-decoration-color" => {
3226+ if let Some(v) = val {
3227+ push_css(&mut css, "text-decoration-color", v);
3230+ "text-decoration-thickness" => {
3231+ if let Some(v) = val {
3232+ push_css(&mut css, "text-decoration-thickness", &css_px(v));
3235+ "text-decoration-style" => {
3236+ if let Some(v) = val {
3237+ push_css(&mut css, "text-decoration-style", v);
3240+ "text-underline-offset" => {
3241+ if let Some(v) = val {
3242+ push_css(&mut css, "text-underline-offset", &css_px(v));
3247+ "column-width" => {
3248+ if let Some(v) = val {
3249+ push_css(&mut css, "column-width", &css_px(v));
3253+ if let Some(v) = val {
3254+ push_css(&mut css, "column-rule", v);
3258+ // Place items/self
3260+ if let Some(v) = val {
3261+ push_css(&mut css, "place-items", v);
3265+ if let Some(v) = val {
3266+ push_css(&mut css, "place-self", v);
3271+ "scroll-behavior" => {
3272+ if let Some(v) = val {
3273+ push_css(&mut css, "scroll-behavior", v);
3279+ if let Some(v) = val {
3280+ push_css(&mut css, "resize", v);
3284+ // New CSS properties
3286+ if let Some(v) = val {
3287+ push_css(&mut css, "clip-path", v);
3290+ "mix-blend-mode" => {
3291+ if let Some(v) = val {
3292+ push_css(&mut css, "mix-blend-mode", v);
3295+ "background-blend-mode" => {
3296+ if let Some(v) = val {
3297+ push_css(&mut css, "background-blend-mode", v);
3300+ "writing-mode" => {
3301+ if let Some(v) = val {
3302+ push_css(&mut css, "writing-mode", v);
3305+ "column-count" => {
3306+ if let Some(v) = val {
3307+ push_css(&mut css, "column-count", v);
3311+ if let Some(v) = val {
3312+ push_css(&mut css, "column-gap", &css_px(v));
3316+ if let Some(v) = val {
3317+ push_css(&mut css, "text-indent", &css_px(v));
3321+ if let Some(v) = val {
3322+ push_css(&mut css, "hyphens", v);
3326+ if let Some(v) = val {
3327+ push_css(&mut css, "flex-grow", v);
3331+ if let Some(v) = val {
3332+ push_css(&mut css, "flex-shrink", v);
3336+ if let Some(v) = val {
3337+ push_css(&mut css, "flex-basis", &css_px(v));
3341+ if let Some(v) = val {
3342+ push_css(&mut css, "isolation", v);
3345+ "place-content" => {
3346+ if let Some(v) = val {
3347+ push_css(&mut css, "place-content", v);
3350+ "background-image" => {
3351+ if let Some(v) = val {
3352+ push_css(&mut css, "background-image", v);
3356+ if let Some(v) = val {
3357+ push_css(&mut css, "font-weight", v);
3361+ if let Some(v) = val {
3362+ push_css(&mut css, "font-style", v);
3366+ if let Some(v) = val {
3367+ push_css(&mut css, "text-wrap", v);
3371+ if let Some(v) = val {
3372+ push_css(&mut css, "will-change", v);
3375+ "touch-action" => {
3376+ if let Some(v) = val {
3377+ push_css(&mut css, "touch-action", v);
3380+ "vertical-align" => {
3381+ if let Some(v) = val {
3382+ push_css(&mut css, "vertical-align", v);
3385+ "scroll-margin" => {
3386+ if let Some(v) = val {
3387+ push_css(&mut css, "scroll-margin", &css_px(v));
3390+ "scroll-margin-top"
3391+ | "scroll-margin-bottom"
3392+ | "scroll-margin-left"
3393+ | "scroll-margin-right" => {
3394+ if let Some(v) = val {
3395+ push_css(&mut css, effective_key, &css_px(v));
3398+ "scroll-padding" => {
3399+ if let Some(v) = val {
3400+ push_css(&mut css, "scroll-padding", &css_px(v));
3403+ "scroll-padding-top"
3404+ | "scroll-padding-bottom"
3405+ | "scroll-padding-left"
3406+ | "scroll-padding-right" => {
3407+ if let Some(v) = val {
3408+ push_css(&mut css, effective_key, &css_px(v));
3412+ if let Some(v) = val {
3413+ push_css(&mut css, "direction", v);
3418+ if let Some(v) = val {
3419+ // Wrap in quotes if not already quoted and not a CSS keyword
3420+ if v.starts_with('"')
3421+ || v.starts_with('\'')
3424+ || v.starts_with("attr(")
3425+ || v.starts_with("counter(")
3427+ push_css(&mut css, "content", v);
3429+ push_css(&mut css, "content", &format!("\"{}\"", v));
3434+ // --- CSS Shorthands ---
3436+ push_css(&mut css, "overflow", "hidden");
3437+ push_css(&mut css, "text-overflow", "ellipsis");
3438+ push_css(&mut css, "white-space", "nowrap");
3441+ if let Some(v) = val {
3442+ push_css(&mut css, "display", "-webkit-box");
3443+ push_css(&mut css, "-webkit-line-clamp", v);
3444+ push_css(&mut css, "-webkit-box-orient", "vertical");
3445+ push_css(&mut css, "overflow", "hidden");
3449+ if let Some(v) = val {
3450+ push_css(&mut css, "filter", &format!("blur({})", css_px(v)));
3453+ "backdrop-blur" => {
3454+ if let Some(v) = val {
3455+ push_css(&mut css, "backdrop-filter", &format!("blur({})", css_px(v)));
3458+ "no-scrollbar" => {
3459+ push_css(&mut css, "scrollbar-width", "none");
3460+ push_css(&mut css, "-ms-overflow-style", "none");
3466+ "linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%)",
3468+ push_css(&mut css, "background-size", "200% 100%");
3472+ "hl-skeleton 1.5s ease-in-out infinite",
3476+ if let Some(v) = val {
3477+ // Parse: "from to [angle]" or "color1 color2 [angle]"
3478+ let parts: Vec<&str> = v.split_whitespace().collect();
3479+ let bg = if parts.len() >= 3
3480+ && (parts[2].ends_with("deg")
3481+ || parts[2].ends_with("turn")
3482+ || parts[2].ends_with("rad"))
3484+ format!("linear-gradient({},{},{})", parts[2], parts[0], parts[1])
3485+ } else if parts.len() >= 2 {
3486+ format!("linear-gradient({},{})", parts[0], parts[1])
3488+ format!("linear-gradient({},transparent)", parts[0])
3490+ push_css(&mut css, "background", &bg);
3495+ "grid-template-areas" => {
3496+ if let Some(v) = val {
3497+ push_css(&mut css, "grid-template-areas", v);
3501+ if let Some(v) = val {
3502+ push_css(&mut css, "grid-area", v);
3506+ // View transitions
3507+ "view-transition-name" => {
3508+ if let Some(v) = val {
3509+ push_css(&mut css, "view-transition-name", v);
3513+ // Animate shorthand (alias for animation)
3515+ if let Some(v) = val {
3516+ push_css(&mut css, "animation", v);
3521+ "grid-template-columns" => {
3522+ if let Some(v) = val {
3523+ push_css(&mut css, "grid-template-columns", v);
3526+ "grid-template-rows" => {
3527+ if let Some(v) = val {
3528+ push_css(&mut css, "grid-template-rows", v);
3532+ // Scroll-driven animations
3533+ "animation-timeline" => {
3534+ if let Some(v) = val {
3535+ push_css(&mut css, "animation-timeline", v);
3538+ "animation-range" => {
3539+ if let Some(v) = val {
3540+ push_css(&mut css, "animation-range", v);
3543+ "view-timeline-name" => {
3544+ if let Some(v) = val {
3545+ push_css(&mut css, "view-timeline-name", v);
3548+ "view-timeline-axis" => {
3549+ if let Some(v) = val {
3550+ push_css(&mut css, "view-timeline-axis", v);
3553+ "scroll-timeline-name" => {
3554+ if let Some(v) = val {
3555+ push_css(&mut css, "scroll-timeline-name", v);
3558+ "scroll-timeline-axis" => {
3559+ if let Some(v) = val {
3560+ push_css(&mut css, "scroll-timeline-axis", v);
3564+ // Anchor positioning
3566+ if let Some(v) = val {
3567+ push_css(&mut css, "anchor-name", v);
3570+ "position-anchor" => {
3571+ if let Some(v) = val {
3572+ push_css(&mut css, "position-anchor", v);
3575+ "position-area" => {
3576+ if let Some(v) = val {
3577+ push_css(&mut css, "position-area", v);
3581+ // Legacy alias for position-area
3582+ if let Some(v) = val {
3583+ push_css(&mut css, "position-area", v);
1694− // Find index of last occurrence of each property.
3587+ // initial-letter (drop caps)
1695− use std::collections::HashMap;
3588+ "initial-letter" => {
1696− let mut last: HashMap<String, usize> = HashMap::new();
3589+ if let Some(v) = val {
1697− for (i, (prop, _)) in decls.iter().enumerate() {
3590+ push_css(&mut css, "initial-letter", v);
1698− if let Some(p) = prop {
3591+ }
1699− last.insert(p.clone(), i);
3592+ }
1703− let mut out = String::with_capacity(css.len());
3594+ // Critical CSS hint — not CSS, handled elsewhere
1704− for (i, (prop, raw)) in decls.iter().enumerate() {
3595+ "critical" => {}
1705− let keep = match prop {
3596+
1706− Some(p) => last.get(p) == Some(&i),
3597+ // Identity and HTML passthrough — not CSS
1707− None => true,
3598+ "id" | "class" => {}
1708− };
3599+ "type" | "placeholder" | "name" | "value" | "disabled" | "required" | "checked"
1709− if keep {
3600+ | "for" | "action" | "method" | "autocomplete" | "min" | "max" | "step" | "pattern"
1710− out.push_str(raw);
3601+ | "maxlength" | "rows" | "cols" | "multiple" | "alt" | "role" | "tabindex"
1711− }
3602+ | "title" | "controls" | "autoplay" | "loop" | "muted" | "poster" | "preload"
1712− }
3603+ | "loading" | "decoding" | "ordered" | "src" | "open" | "novalidate" | "low"
1713− out
3604+ | "high" | "optimum" | "colspan" | "rowspan" | "scope" | "inline" | "responsive"
1714−}
3605+ | "datetime" | "media" | "sizes" | "srcset" | "cite" | "list" | "sandbox" | "allow"
3606+ | "allowfullscreen" | "referrerpolicy" | "formaction" | "formmethod" | "formtarget"
3607+ | "target" | "autofocus" => {}
1716−fn emit_class_attr(out: &mut String, gen_class: Option<&str>, user_class: Option<&str>) {
3609+ _ => {}
1717− match (gen_class, user_class) {
1718− (Some(g), Some(u)) => {
1719− out.push_str(" class=\"");
1722− out.push_str(&html_escape(u));
1725− (Some(g), None) => {
1726− out.push_str(" class=\"");
1730− (None, Some(u)) => {
1731− out.push_str(" class=\"");
1732− out.push_str(&html_escape(u));
1739−// ---------------------------------------------------------------------------
1740−// Attribute → CSS mapping
1741−// ---------------------------------------------------------------------------
1743−/// Where an element is written, which its CSS depends on.
3613+ css
1745− kind: &'a ElementKind,
1746− /// How its parent lays out its children: its `width fill`, `height
1747− /// fill` and `shrink` compile against it.
1749− /// It has `@in-front` / `@behind` children.
1750− has_overlay_children: bool,
1751− /// A row, column or grid inside text, laid out inline.
1753− /// The page's `<body>`, which the reset already makes a column.
1757−impl Site<'_> {
3616+fn push_css(css: &mut String, prop: &str, value: &str) {
1758− /// Where an element in a parent with the layout `layout` and the flow
3617+ css.push_str(prop);
1759− /// `parent` is.
3618+ css.push(':');
1760− fn new<'a>(elem: &'a Element, layout: Option<Layout>, parent: &'a Flow) -> Site<'a> {
3619+ css.push_str(value);
1761− Site {
3620+ css.push(';');
1764− has_overlay_children: has_overlay_children(elem),
1765− inline: layout == Some(Layout::Text) && elem.kind.layout().is_container(),
1771−// ---------------------------------------------------------------------------
3623+/// Known CSS units — if a value ends with one, skip appending `px`.
1772−// Direction: what a child's `fill` and `shrink` compile against
3624+const CSS_UNITS: &[&str] = &[
1773−// ---------------------------------------------------------------------------
3625+ "%", "rem", "em", "vh", "vw", "vmin", "vmax", "dvh", "svh", "lvh", "ch", "ex", "cm", "mm",
3626+ "in", "pt", "pc", "fr",
1775−/// The way a flex row or column lays out its children.
3629+/// Format a numeric value: if it already has a CSS unit, pass through as-is;
1776−#[derive(Clone, Copy, PartialEq, Eq, Debug)]
3630+/// otherwise append `px`.
1777−enum Axis {
3631+fn css_px(value: &str) -> String {
1778− Row,
3632+ let v = value.trim();
1779− Column,
3633+ if v == "0" {
3634+ return "0".to_string();
3636+ if CSS_UNITS.iter().any(|u| v.ends_with(u)) {
3637+ return v.to_string();
3639+ if v.starts_with("var(")
3640+ || v.starts_with("calc(")
3641+ || v.starts_with("clamp(")
3642+ || v.starts_with("min(")
3643+ || v.starts_with("max(")
3645+ return v.to_string();
1782−impl Axis {
3650+/// Rewrite literal values that match a declared CSS custom property (from
1783− /// The direction a `flex-direction` or `flex-flow` value sets, if it
3651+/// `@theme` or `@let --name value`) to `var(--name)` references. Matches are
1784− /// names one (not `var(--dir)`, which only the browser knows).
3652+/// anchored to CSS value boundaries so e.g. `#3b82f6` inside a longer hex or
1785− fn of_value(value: &str) -> Option<Axis> {
3653+/// inside an identifier is not replaced. The `:root` block is emitted before
1786− value.split_whitespace().find_map(|word| match word {
3654+/// this call runs, so its declarations are not affected.
1787− "row" | "row-reverse" => Some(Axis::Row),
3655+fn substitute_css_vars(css: &str, vars: &[(String, String)]) -> String {
1788− "column" | "column-reverse" => Some(Axis::Column),
3656+ if css.is_empty() || vars.is_empty() {
1789− _ => None,
3657+ return css.to_string();
3659+ // Prefer longer values first so that if two vars share a prefix, the
3660+ // longer (more specific) match wins.
3661+ let mut pairs: Vec<(&str, String)> = vars
3663+ .filter(|(name, value)| name.starts_with("--") && !value.is_empty())
3664+ .map(|(name, value)| (value.as_str(), format!("var({})", name)))
3666+ pairs.sort_by_key(|(v, _)| std::cmp::Reverse(v.len()));
3667+ if pairs.is_empty() {
3668+ return css.to_string();
1794−/// How an element lays out its children, as its CSS sets it: the
3671+ let is_boundary_before = |b: Option<u8>| match b {
1795−/// direction its children's `width`/`height` `fill` and `shrink` compile
3672+ None => true,
1796−/// against. That is the direction of `@row` or of a column, or the one its
3673+ Some(c) => matches!(
1797−/// own `flex-direction` (or `flex-flow`) sets, with or without media or
3674+ c,
1798−/// container prefixes. Like elm-ui's `.r > .wf`, the rules for a direction
3675+ b':' | b' ' | b',' | b'(' | b';' | b'{' | b'\n' | b'\t'
1799−/// set under a prefix are keyed on the element's class: `@media (...) {
3676+ ),
1800−/// :where(.a)>.b {...} }`.
3677+ };
1801−#[derive(Clone, Default)]
3678+ let is_boundary_after = |b: Option<u8>| match b {
1802−struct Flow {
3679+ None => true,
1803− /// Without a prefix; `None` when the element isn't a flex row or column
3680+ Some(c) => matches!(
1804− /// (a grid, text, HTML's own layout, the top of the page)
3681+ c,
1805− base: Option<Axis>,
3682+ b';' | b'}' | b',' | b' ' | b')' | b'\n' | b'\t'
1806− /// The direction under each chain of at-rule prefixes that sets one, in
3683+ ),
1807− /// the order their blocks are written
3684+ };
1808− changes: Vec<(Vec<usize>, Axis)>,
1809− /// The element's generated class, which the rules for the changes are
1811− class: Option<String>,
1814−impl Flow {
3686+ let bytes = css.as_bytes();
1815− fn of(elem: &Element) -> Flow {
3687+ let mut out = String::with_capacity(css.len());
1816− let mut base = match elem.kind.layout() {
3688+ let mut i = 0;
1817− Layout::Row => Axis::Row,
3689+ let mut prev: Option<u8> = None;
1818− Layout::Column => Axis::Column,
3690+ while i < bytes.len() {
1819− _ => return Flow::default(),
3691+ if is_boundary_before(prev) {
1820− };
3692+ let mut matched = false;
1821− let mut changes: Vec<(Vec<usize>, Axis)> = Vec::new();
3693+ for (val, repl) in &pairs {
1822− for attr in elem.attrs.iter().filter(|a| !a.html) {
3694+ let vb = val.as_bytes();
1823− let (condition, name) = Condition::of(&attr.key);
3695+ if i + vb.len() <= bytes.len() && &bytes[i..i + vb.len()] == vb {
1824− if !matches!(name, "flex-direction" | "flex-flow") || !condition.selector.is_empty() {
3696+ let next = bytes.get(i + vb.len()).copied();
1825− continue;
3697+ if is_boundary_after(next) {
3698+ out.push_str(repl);
3699+ prev = repl.as_bytes().last().copied();
1827− let Some(axis) = attr.value.as_deref().and_then(Axis::of_value) else {
3706+ if matched {
1828 continue;
3707 continue;
1830− if condition.at.is_empty() {
1833− // The later one wins, as in the CSS
1834− changes.retain(|(at, _)| *at != condition.at);
1835− changes.push((condition.at, axis));
1838− changes.sort_by_key(|(at, _)| at_order(at));
3710+ // Advance by one UTF-8 code point.
1839− Flow {
3711+ let start = i;
1840− base: Some(base),
3712+ i += 1;
1841− changes,
3713+ while i < bytes.len() && (bytes[i] & 0xC0) == 0x80 {
1842− class: None,
3714+ i += 1;
3716+ out.push_str(&css[start..i]);
3717+ prev = bytes.get(i - 1).copied();
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);
1856− .find(|(chain, _)| Condition::at_only(chain).holds_at(&here))
1857− .map(|&(_, axis)| axis);
1858− Some(changed.unwrap_or(base))
1862−/// `width` or `height`.
3722+/// Format a `line-height` value. CSS accepts either a unitless multiplier
1863−#[derive(Clone, Copy, PartialEq, Eq)]
3723+/// (e.g. `1.5`) or a length (e.g. `24px`). Plain integers in htmlang source
1864−enum Dim {
3724+/// are ambiguous: `[line-height 24]` was historically emitted as `24` (which
1865− Width,
3725+/// CSS interprets as 24× font-size — almost never what anyone wants). Treat
1866− Height,
3726+/// integers ≥ 2 as pixel lengths; anything with a decimal, an existing unit,
3727+/// or the value `0`/`1` passes through unchanged.
3728+fn css_line_height(value: &str) -> String {
3729+ let v = value.trim();
3730+ if v == "0" || v == "1" {
3731+ return v.to_string();
3733+ if v.contains('.') {
3734+ return v.to_string();
3736+ if CSS_UNITS.iter().any(|u| v.ends_with(u)) || v.ends_with("px") {
3737+ return v.to_string();
3739+ if v.starts_with("var(")
3740+ || v.starts_with("calc(")
3741+ || v.starts_with("clamp(")
3742+ || v.starts_with("min(")
3743+ || v.starts_with("max(")
3745+ return v.to_string();
3747+ // Plain integer — treat as pixel length.
3748+ if v.chars().all(|c| c.is_ascii_digit()) {
3749+ return format!("{}px", v);
1869−/// What a `width` or `height` says.
3754+/// Format multiple space-separated values, each getting px if needed.
1870−#[derive(Clone, Copy, PartialEq, Eq)]
3755+fn css_px_multi(value: &str) -> String {
1871−enum Size {
3756+ value
1872− Fill,
3757+ .split_whitespace()
1873− Shrink,
3758+ .map(css_px)
1874− /// A size of its own (`width 300`)
3759+ .collect::<Vec<_>>()
1875− Set,
3760+ .join(" ")
1878−impl Size {
3763+fn extract_id_class(attrs: &[Attribute]) -> (Option<String>, Option<String>) {
1879− fn of(value: &str) -> Size {
3764+ let mut id = None;
1880− match value.trim() {
3765+ let mut class = None;
1881− "fill" => Size::Fill,
3766+ for attr in attrs {
1882− "shrink" => Size::Shrink,
3767+ match attr.key.as_str() {
1883− _ => Size::Set,
3768+ "id" => id = attr.value.clone(),
3769+ "class" => class = attr.value.clone(),
1888−/// The declarations `fill` and `shrink` make in a parent laid out along
3776+/// Read image dimensions from a local file by parsing the header bytes.
1889−/// `axis` (`None`: not a flex row or column). Along the parent's direction,
3777+/// Supports PNG, JPEG, GIF, WebP, AVIF, and SVG.
1890−/// `fill` takes the remaining space and `shrink` keeps the content's size;
3778+fn read_image_dimensions(path: &str) -> Option<(u32, u32)> {
1891−/// across it (or outside flex), `fill` is the full size and `shrink` fits
3779+ // SVG: parse as text for viewBox/width/height attributes
1892−/// the content.
3780+ if path.ends_with(".svg") || path.ends_with(".SVG") {
1893−fn sizing(dim: Dim, size: Size, axis: Option<Axis>) -> &'static [(&'static str, &'static str)] {
3781+ let text = std::fs::read_to_string(path).ok()?;
1894− match (dim, size, axis) {
3782+ return read_svg_dimensions(&text);
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")],
1907−/// Every property `fill` and `shrink` of `dim` can set, with its initial
3785+ let data = std::fs::read(path).ok()?;
1908−/// value (`flex` covers `flex-shrink`).
3786+ if data.len() < 12 {
1909−fn sizing_properties(dim: Dim) -> [(&'static str, &'static str); 3] {
3787+ return None;
1912− ("flex", "0 1 auto"),
1913− ("min-width", "auto"),
1917− ("flex", "0 1 auto"),
1918− ("min-height", "auto"),
1919− ("height", "auto"),
1924−/// What an element's attributes under some prefixes say about its size.
3790+ // PNG: 8-byte signature, then IHDR chunk with width/height at bytes 16-23
1925−#[derive(Default)]
3791+ if data.len() >= 24 && data.starts_with(b"\x89PNG\r\n\x1a\n") {
1926−struct Sizes {
3792+ let w = u32::from_be_bytes([data[16], data[17], data[18], data[19]]);
1927− /// The last `width` and `height`
3793+ let h = u32::from_be_bytes([data[20], data[21], data[22], data[23]]);
1928− width: Option<Size>,
3794+ return Some((w, h));
1929− height: Option<Size>,
3795+ }
1930− /// A `fill` or `shrink` for the width / height is among them (a later
3796+
1931− /// size may replace it)
3797+ // GIF: "GIF87a" or "GIF89a", width/height at bytes 6-9 (little-endian)
1932− width_word: bool,
3798+ if data.starts_with(b"GIF87a") || data.starts_with(b"GIF89a") {
1933− height_word: bool,
3799+ let w = u16::from_le_bytes([data[6], data[7]]) as u32;
1934− /// It writes `flex`, one of its longhands (`flex-grow`, `flex-shrink`,
3800+ let h = u16::from_le_bytes([data[8], data[9]]) as u32;
1935− /// `flex-basis`), `min-width` or `min-height` itself
3801+ return Some((w, h));
1944−impl Sizes {
3804+ // JPEG: scan for SOF0/SOF2 marker (0xFF 0xC0 or 0xFF 0xC2)
1945− /// Read the attributes under the conditions that hold wherever `at`
3805+ if data.starts_with(b"\xff\xd8") {
1946− /// does, a later condition over an earlier one.
3806+ let mut i = 2;
1947− fn of(attrs: &[Attribute], at: &Condition) -> Sizes {
3807+ while i + 9 < data.len() {
1948− let mut sizes = Sizes::default();
3808+ if data[i] != 0xFF {
1949− let mut read: Vec<(Condition, &str, &str)> = Vec::new();
3809+ i += 1;
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;
3810 continue;
1955− if condition.holds_at(at) {
1956− read.push((condition, name, value));
1959− read.sort_by_cached_key(|(condition, _, _)| condition.order());
1960− for (_, name, value) in read {
1963− let size = Size::of(value);
1964− sizes.width = Some(size);
1965− sizes.width_word |= size != Size::Set;
1968− let size = Size::of(value);
1969− sizes.height = Some(size);
1970− sizes.height_word |= size != Size::Set;
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,
1980− }
3812+ let marker = data[i + 1];
1981− sizes
3813+ if marker == 0xC0 || marker == 0xC2 {
1982− }
3814+ let h = u16::from_be_bytes([data[i + 5], data[i + 6]]) as u32;
1983−
3815+ let w = u16::from_be_bytes([data[i + 7], data[i + 8]]) as u32;
1984− /// The element writes `property` itself: a layout word leaves it alone.
3816+ return Some((w, h));
1985− fn writes(&self, property: &str) -> bool {
3817+ }
1986− match property {
3818+ if i + 3 < data.len() {
1987− "flex" => self.flex,
3819+ let len = u16::from_be_bytes([data[i + 2], data[i + 3]]) as usize;
1988− "flex-grow" => self.flex || self.flex_grow,
3820+ i += 2 + len;
1989− "flex-shrink" => self.flex || self.flex_shrink,
3821+ } else {
1990− "flex-basis" => self.flex || self.flex_basis,
3822+ break;
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),
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
2003− fn push(&self, css: &mut String, property: &str, value: &str) {
2004− if property == "flex" && !self.flex {
2005− let longhands = match value {
2007− ("flex-grow", "1"),
2008− ("flex-shrink", "1"),
2009− ("flex-basis", "0%"),
2011− // The reset, `0 1 auto`
2013− ("flex-grow", "0"),
2014− ("flex-shrink", "1"),
2015− ("flex-basis", "auto"),
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);
2027− if !self.writes(property) {
2028− push_css(css, property, value);
2033−/// The rule that gives an element's `fill` and `shrink`, as its attributes
3827+ // WebP: "RIFF" ... "WEBP", VP8 header at byte 20
2034−/// under the at-rules `at` set them, their meaning in a parent laid out
3828+ if data.len() >= 30 && &data[..4] == b"RIFF" && &data[8..12] == b"WEBP" {
2035−/// along `axis`. Every other property a layout word could have set is put
3829+ if &data[12..16] == b"VP8 " && data.len() >= 30 {
2036−/// back to its initial value, so the rule is right whichever earlier rule
3830+ let w = u16::from_le_bytes([data[26], data[27]]) as u32 & 0x3FFF;
2037−/// it overrides. Properties the element writes itself are left alone.
3831+ let h = u16::from_le_bytes([data[28], data[29]]) as u32 & 0x3FFF;
2038−fn sizing_rule(attrs: &[Attribute], at: &[usize], axis: Axis) -> String {
3832+ return Some((w, h));
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),
2049− if let Some(size) = size {
2050− sets.extend_from_slice(sizing(dim, size, Some(axis)));
2052− resets.extend_from_slice(&sizing_properties(dim));
3834+ if &data[12..16] == b"VP8L" && data.len() >= 25 && data[21] == 0x2F {
2053− }
3835+ let bits = u32::from_le_bytes([data[22], data[23], data[24], data[25]]);
2054− let mut css = String::new();
3836+ let w = (bits & 0x3FFF) + 1;
2055− let mut written: Vec<&str> = Vec::new();
3837+ let h = ((bits >> 14) & 0x3FFF) + 1;
2056− for &(property, value) in &resets {
3838+ return Some((w, h));
2057− if sets.iter().any(|&(p, _)| p == property) || written.contains(&property) {
2060− written.push(property);
2061− sizes.push(&mut css, property, value);
2063− for &(property, value) in &sets {
2064− sizes.push(&mut css, property, value);
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,
2072−fn sizing_changes(attrs: &[Attribute], flow: &Flow) -> Vec<(Vec<usize>, String)> {
2075− .map(|(at, axis)| (at.clone(), sizing_rule(attrs, at, *axis)))
2076− .filter(|(_, body)| !body.is_empty())
2080−/// An element's generated class, with the rules keyed on its parent's
3842+ // AVIF: ISOBMFF container with "ftyp" box containing "avif"/"avis" brand,
2081−/// class that its `fill` and `shrink` need where the parent's direction
3843+ // then "ispe" box with width/height
2082−/// changes under a prefix (see [`Flow`]): `:where(.a)>.b`, one class of
3844+ if data.len() >= 12 && &data[4..8] == b"ftyp" {
2083−/// specificity like any class rule.
3845+ let brand = &data[8..12];
2084−fn element_class(elem: &Element, site: &Site, styles: &mut StyleCollector) -> Option<String> {
3846+ if brand == b"avif" || brand == b"avis" || brand == b"mif1" {
2085− let as_child = match site.parent.class {
3847+ return read_avif_dimensions(&data);
2086− Some(_) => sizing_changes(&elem.attrs, site.parent),
2087− None => Vec::new(),
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));
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);
2104−/// The `display` of a layout (nothing for text, native and void elements,
3851+ None
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;",
2118−/// The declarations of the attributes under `condition` (the defaults of
3854+/// Parse SVG viewBox or width/height attributes to get dimensions.
2119−/// the element's kind are [`default_css`]'s).
3855+fn read_svg_dimensions(text: &str) -> Option<(u32, u32)> {
2120−fn attrs_to_css(attrs: &[Attribute], condition: &Condition, site: &Site) -> String {
3856+ // Try viewBox first: viewBox="minX minY width height"
2121− let mut css = String::new();
3857+ if let Some(vb_start) = text.find("viewBox=\"") {
2122− // The auto margins of `center-x`, `align-left`, ..., written at the end
3858+ let rest = &text[vb_start + 9..];
2123− let mut aligned = String::new();
3859+ if let Some(end) = rest.find('"') {
2124− let kind = site.kind;
3860+ let parts: Vec<&str> = rest[..end].split_whitespace().collect();
2125− // Under `children:` the styles go on the children, whose parent is this
3861+ if parts.len() == 4
2126− // element: htmlang's words that place an element in its parent are an
3862+ && let (Ok(w), Ok(h)) = (parts[2].parse::<f64>(), parts[3].parse::<f64>())
2127− // error there (the parser reports them), and left out
3863+ && w > 0.0
2128− let on_children = condition.on_children();
3864+ && h > 0.0
2129− let inside = condition.inside().is_some();
2130− // The direction `fill` and `shrink` compile against
2131− let axis = site.parent.at(&condition.at);
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)
2143− for (index, attr) in attrs.iter().enumerate() {
2147− let Some(effective_key) = under(&attr.key, condition) else {
2150− if on_children && crate::vocab::places_in_parent(effective_key, attr.value.as_deref()) {
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()) {
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()) {
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 => {}
2172− if let Some(v) = val {
2173− push_css(&mut css, "gap", &with_px("gap", v));
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| {
2183− && under(&a.key, condition) == Some(effective_key)
2184− && a.value.as_deref().is_some_and(|v| !v.trim().is_empty())
2189− let dim = if effective_key == "width" {
2194− let size = Size::of(val.unwrap_or_default());
2195− // What the element writes itself, which a layout word
2197− let sizes = Sizes::of(attrs, condition);
2198− for &(property, value) in sizing(dim, size, axis) {
2199− sizes.push(&mut css, property, value);
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`
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",
2218− && name == effective_key
2221− && c.holds_at(condition)
2224− .is_some_and(|v| !v.trim().is_empty() && Size::of(v) != Size::Set)
2227− let dim = if effective_key == "width" {
3866+ return Some((w.round() as u32, h.round() as u32));
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);
2238− if let Some(v) = val {
2239− push_css(&mut css, effective_key, &with_px(effective_key, v));
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`)
2247− push_css(&mut aligned, "margin-left", "auto");
2248− push_css(&mut aligned, "margin-right", "auto");
2251− push_css(&mut aligned, "margin-top", "auto");
2252− push_css(&mut aligned, "margin-bottom", "auto");
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"),
2259− "wrap" if lays_out_children => push_css(&mut css, "flex-wrap", "wrap"),
2263− "grid-cols" | "grid-rows" if !lays_out_children => {}
2264− "grid-cols" | "grid-rows" => {
2265− if let Some(v) = val {
2266− let property = if effective_key == "grid-cols" {
2267− "grid-template-columns"
2269− "grid-template-rows"
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)),
2277− "col-span" | "row-span" => {
2278− if let Some(v) = val {
2279− let property = if effective_key == "col-span" {
2284− push_css(&mut css, property, &format!("span {}", v));
2288− // CSS's `line-clamp` has no support yet without its
2289− // `-webkit-` fallback, which needs a box to clamp
2291− if let Some(v) = val {
2292− push_css(&mut css, "display", "-webkit-box");
2293− push_css(&mut css, "-webkit-line-clamp", v);
2294− push_css(&mut css, "-webkit-box-orient", "vertical");
2295− push_css(&mut css, "overflow", "hidden");
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) => {
2305− if let Some(v) = val {
2306− push_css(&mut css, key, &with_px(key, v));
2313−
3870+ // Fall back to width/height attributes on <svg>
2314− css.push_str(&aligned);
3871+ let svg_tag = text.find("<svg")?;
2315− css
3872+ let tag_end = text[svg_tag..].find('>')? + svg_tag;
3873+ let tag = &text[svg_tag..tag_end];
3874+ let w = extract_svg_attr(tag, "width")?;
3875+ let h = extract_svg_attr(tag, "height")?;
2318−fn push_css(css: &mut String, prop: &str, value: &str) {
3879+fn extract_svg_attr(tag: &str, attr: &str) -> Option<u32> {
2319− css.push_str(prop);
3880+ let needle = format!("{}=\"", attr);
2320− css.push(':');
3881+ let start = tag.find(&needle)? + needle.len();
2321− css.push_str(value);
3882+ let rest = &tag[start..];
2322− css.push(';');
3883+ let end = rest.find('"')?;
3884+ let val = rest[..end].trim_end_matches("px");
3885+ val.parse::<f64>().ok().map(|v| v.round() as u32)
2325−fn extract_id_class(attrs: &[Attribute]) -> (Option<String>, Option<String>) {
3888+/// Parse AVIF (ISOBMFF) container to find ispe box with image dimensions.
2326− let mut id = None;
3889+fn read_avif_dimensions(data: &[u8]) -> Option<(u32, u32)> {
2327− let mut class = None;
3890+ // Walk ISOBMFF boxes looking for "ispe" (image spatial extents)
2328− for attr in attrs.iter().filter(|a| a.html) {
3891+ let mut i = 0;
2329− match attr.key.as_str() {
3892+ while i + 8 <= data.len() {
2330− "id" => id = attr.value.clone(),
3893+ let box_size =
2331− "class" => class = attr.value.clone(),
3894+ u32::from_be_bytes([data[i], data[i + 1], data[i + 2], data[i + 3]]) as usize;
2332− _ => {}
3895+ let box_type = &data[i + 4..i + 8];
3899+ let box_end = (i + box_size).min(data.len());
3900+ // ispe box: 4 bytes version/flags + 4 bytes width + 4 bytes height
3901+ if box_type == b"ispe" && box_end >= i + 20 {
3902+ let w = u32::from_be_bytes([data[i + 12], data[i + 13], data[i + 14], data[i + 15]]);
3903+ let h = u32::from_be_bytes([data[i + 16], data[i + 17], data[i + 18], data[i + 19]]);
3904+ return Some((w, h));
3906+ // Recurse into container boxes (meta, iprp, ipco)
3909+ b"meta" | b"iprp" | b"ipco" | b"moov" | b"trak" | b"mdia"
3911+ let header_size = if box_type == b"meta" { 12 } else { 8 };
3912+ if i + header_size < box_end
3913+ && let Some(dims) = read_avif_dimensions(&data[i + header_size..box_end])
2335− (id, class)
3920+ None
2338fn html_escape(s: &str) -> String {
3923fn html_escape(s: &str) -> String {
@@ -2373,24 +3958,10 @@ fn base64_encode(data: &[u8]) -> String {
2373/// Generate a standard v3 source map with VLQ-encoded mappings.
3958/// Generate a standard v3 source map with VLQ-encoded mappings.
2374/// Compatible with browser devtools and source map tooling.
3959/// Compatible with browser devtools and source map tooling.
2375pub fn generate_source_map(doc: &Document, source_file: &str) -> String {
3960pub fn generate_source_map(doc: &Document, source_file: &str) -> String {
2376− source_map_for_html(&generate_dev(doc), source_file)
2379−/// Build a source map for dev-mode HTML by reading the `data-hl-line`
2380−/// markers each element carries, so generated line numbers are exact.
2381−pub fn source_map_for_html(html: &str, source_file: &str) -> String {
2382 let mut mappings: Vec<(usize, usize)> = Vec::new(); // (html_line, hl_line)
3961 let mut mappings: Vec<(usize, usize)> = Vec::new(); // (html_line, hl_line)
2383− for (idx, line) in html.lines().enumerate() {
3962+ collect_source_lines(&doc.nodes, &mut mappings);
2384− if let Some(pos) = line.find("data-hl-line=\"") {
3963+ mappings.sort_by_key(|m| m.0);
2385− let digits: String = line[pos + "data-hl-line=\"".len()..]
3964+ mappings.dedup_by_key(|m| m.0);
2387− .take_while(|c| c.is_ascii_digit())
2389− if let Ok(hl_line) = digits.parse::<usize>() {
2390− mappings.push((idx + 1, hl_line));
2395 // Build VLQ-encoded mappings string.
3966 // Build VLQ-encoded mappings string.
2396 // Each generated line is separated by ';'. Each segment within a line is
3967 // Each generated line is separated by ';'. Each segment within a line is
@@ -2450,30 +4021,60 @@ fn vlq_encode(value: i64, out: &mut String) {
2453−#[cfg(test)]
4024+fn collect_source_lines(nodes: &[Node], mappings: &mut Vec<(usize, usize)>) {
2454−mod tests {
4025+ for node in nodes {
2455− use super::*;
4026+ if let Node::Element(elem) = node {
2456−
4027+ if elem.line_num > 0 {
2457− #[test]
4028+ mappings.push((mappings.len() + 1, elem.line_num));
2458− fn a_name_is_a_stable_hash_of_the_style() {
4029+ }
2459− // The same in every build and on every platform
4030+ collect_source_lines(&elem.children, mappings);
2460− assert_eq!(stable_hash(""), 0xf52a_15e9_a9b5_e89b);
4031+ }
2461− assert_eq!(hash_digits(35, 3), "z00");
4032+ }
2462− assert_eq!(hash_digits(u64::MAX, 13), "fsgs46211e5w3");
4033+}
2464−
4035+/// Check if a specific element kind exists anywhere in the node tree.
2465− #[test]
4036+fn has_element_kind(nodes: &[Node], target: &ElementKind) -> bool {
2466− fn a_name_taken_in_the_file_takes_more_digits() {
4037+ for node in nodes {
2467− // These two styles' hashes end in the same 7 digits
4038+ if let Node::Element(elem) = node {
2468− let mut styles = StyleCollector::new();
4039+ if elem.kind == *target {
2469− let first = styles.get_class("width:129555px;".into(), Vec::new(), String::new());
4040+ return true;
2470− let second = styles.get_class("width:170577px;".into(), Vec::new(), String::new());
4041+ }
2471− let (first, second) = (first.unwrap(), second.unwrap());
4042+ if has_element_kind(&elem.children, target) {
2472− assert_eq!(first.len(), 3 + CLASS_DIGITS, "{first}");
4043+ return true;
2473− assert_eq!(second.len(), 3 + CLASS_DIGITS + 1, "{second}");
4044+ }
2474− assert!(second.starts_with(&first), "{first} {second}");
4045+ }
2475− // The same style gets the name it got before
4046+ }
2476− let again = styles.get_class("width:170577px;".into(), Vec::new(), String::new());
4047+ false
2477− assert_eq!(again.as_deref(), Some(second.as_str()));
4048+}
4050+/// Collect unique external domains from generated HTML for DNS prefetch hints.
4051+fn collect_dns_prefetch(html: &str, dev: bool) -> String {
4052+ let mut domains = Vec::new();
4053+ let mut rest = html;
4054+ while let Some(pos) = rest.find("https://") {
4055+ let start = pos + 8; // skip "https://"
4056+ rest = &rest[start..];
4058+ .find(['/', '"', '\'', ' ', '>', ')'])
4059+ .unwrap_or(rest.len());
4060+ let domain = &rest[..end];
4061+ if !domain.is_empty() && domain.contains('.') && !domains.contains(&domain.to_string()) {
4062+ domains.push(domain.to_string());
4065+ let mut out = String::new();
4066+ for domain in &domains {
4068+ out.push_str(&format!(
4069+ "<link rel=\"dns-prefetch\" href=\"//{}\">\n",
4073+ out.push_str(&format!(
4074+ "<link rel=\"dns-prefetch\" href=\"//{}\">",