@@ -1,8 +1,7 @@
11use std::collections::HashMap;
2−use std::hash::Hash;
2+use std::hash::{Hash, Hasher};
33
44use crate::ast::*;
5−use crate::vocab::with_px;
65
76// ---------------------------------------------------------------------------
87// Style collector: deduplicates CSS and assigns class names
@@ -17,315 +16,56 @@ const BREAKPOINTS: &[(&str, &str)] = &[
1716 ("2xl", "1536px"),
1817];
1918
20−/// The prefix of every generated class (`hl-2k9xq0m`), which keeps them
21−/// out of the author's own class names.
22−pub const CLASS_PREFIX: &str = "hl-";
23−
24−/// How many base-36 digits a class's name has after `hl-`: 7, about 36
25−/// bits of its style's hash, so a site with 10,000 different styles has
26−/// odds of about 6 in 10,000 that two of them share a name, which
27−/// `htmlang build` reports (`class-collision`). Within one file, a style
28−/// whose name is taken takes more digits.
29−pub const CLASS_DIGITS: usize = 7;
30−
31−/// A stable hash of `text`: FNV-1a, then SplitMix64's finalizer, so every
32−/// digit of a name depends on all of the text. It is the same on every
33−/// platform and in every build, unlike `std`'s hasher.
34−pub fn stable_hash(text: &str) -> u64 {
35− let mut hash: u64 = 0xcbf2_9ce4_8422_2325;
36− for byte in text.bytes() {
37− hash ^= u64::from(byte);
38− hash = hash.wrapping_mul(0x0000_0100_0000_01b3);
39− }
40− hash = (hash ^ (hash >> 30)).wrapping_mul(0xbf58_476d_1ce4_e5b9);
41− hash = (hash ^ (hash >> 27)).wrapping_mul(0x94d0_49bb_1331_11eb);
42− hash ^ (hash >> 31)
43−}
44−
45−/// `digits` base-36 digits of `hash`: `2k9xq0m`. With 13, all of it.
46−pub fn hash_digits(hash: u64, digits: usize) -> String {
47− const DIGITS: &[u8] = b"0123456789abcdefghijklmnopqrstuvwxyz";
48− let mut n = hash;
49− (0..digits)
50− .map(|_| {
51− let digit = DIGITS[(n % 36) as usize] as char;
52− n /= 36;
53− digit
54− })
55− .collect()
56−}
57−
58−/// A class htmlang generated: its name, and the hash of the style it
59−/// stands for. One style has one name in every file, so a fragment's
60−/// classes mean the same in any page it goes into.
61−#[derive(Clone, Debug, PartialEq, Eq)]
62−pub struct Class {
63− pub name: String,
64− pub style: u64,
65−}
66−
67−/// When a style applies: the at-rule prefixes it is under (their ranks,
68−/// see [`crate::vocab::at_rule_rank`], sorted, so `dark:md:` and `md:dark:`
69−/// are one condition) and its selector prefixes, left to right as the
70−/// selector reads (`hover:children:` is `.a:hover > *`).
71−#[derive(Clone, Default, PartialEq, Eq, Hash, Debug)]
72−struct Condition {
73− at: Vec<usize>,
74− selector: Vec<String>,
75−}
76−
77−impl Condition {
78− /// The condition of an attribute's key, and the name after its
79− /// prefixes.
80− fn of(key: &str) -> (Condition, &str) {
81− let (prefixes, name) = crate::vocab::split_prefixes(key);
82− let mut condition = Condition::default();
83− for prefix in prefixes {
84− match crate::vocab::at_rule_rank(prefix) {
85− Some(rank) => condition.at.push(rank),
86− None => condition.selector.push(prefix.to_string()),
87− }
88− }
89− condition.at.sort_unstable();
90− condition.at.dedup();
91− (condition, name)
92− }
93−
94− /// Only the at-rule part: a direction under `hover:` is the one without
95− /// it.
96− fn at_only(at: &[usize]) -> Condition {
97− Condition {
98− at: at.to_vec(),
99− selector: Vec::new(),
100− }
101− }
102−
103− /// The styles go on the element's children (`children:`).
104− fn on_children(&self) -> bool {
105− self.selector.iter().any(|p| p == crate::vocab::CHILDREN)
106− }
107−
108− /// The styles go on the elements of one kind inside the element
109− /// (`@td:`): where the element prefix is in the selector chain.
110− fn inside(&self) -> Option<usize> {
111− self.selector
112− .iter()
113− .position(|p| crate::vocab::element_prefix(p).is_some())
114− }
115−
116− /// Whether this condition holds wherever `other` does: its at-rules
117− /// are implied by `other`'s, and it has no selector or `other`'s.
118− fn holds_at(&self, other: &Condition) -> bool {
119− (self.selector.is_empty() || self.selector == other.selector)
120− && self.at.iter().all(|&a| {
121− other
122− .at
123− .iter()
124− .any(|&b| crate::vocab::at_rule_implied(a, b))
125− })
126− }
127−
128− /// The order the rules of each condition are written in, which the
129− /// cascade follows: no prefix, then selectors, then each at-rule
130− /// block (see [`at_order`]), with its selectors inside it.
131− fn order(&self) -> (AtOrder, SelectorOrder) {
132− (at_order(&self.at), selector_order(&self.selector))
133− }
134−}
135−
136−/// Where a block of at-rules is written: after the rules without one; by
137−/// its last (innermost) prefix in the order of
138−/// [`crate::vocab::at_rule_prefixes`] (widths, media, container widths), so
139−/// `md:dark:` comes with `dark:`, after it; then by length.
140−type AtOrder = (bool, usize, usize, Vec<usize>);
141−
142−fn at_order(at: &[usize]) -> AtOrder {
143− (
144− !at.is_empty(),
145− at.last().copied().unwrap_or(0),
146− at.len(),
147− at.to_vec(),
148− )
149−}
150−
151−/// Selector chains in the order of [`crate::vocab::PSEUDOS`] (position,
152−/// then form state, then `hover:`, `focus:`, `active:`, `disabled:`), and
153−/// by their argument's text for the same pseudo-class; a chain before the
154−/// longer ones it starts. A chain through `children:` comes after the
155−/// others, ordered by what follows its last `children:` and then by what
156−/// comes before it: only that tail counts toward its specificity (see
157−/// [`selector`]), so `hover:children:` follows `children:` and wins over it
158−/// on hover.
159−type SelectorOrder = (bool, Vec<(usize, String)>, Vec<(usize, String)>);
160−
161−fn selector_order(selector: &[String]) -> SelectorOrder {
162− let table = crate::vocab::PSEUDOS;
163− let ranked = |chain: &[String]| -> Vec<(usize, String)> {
164− chain
165− .iter()
166− .map(|p| {
167− let name = crate::vocab::pseudo_name(p);
168− let rank = table
169− .iter()
170− .position(|(q, _)| *q == name)
171− .unwrap_or(table.len());
172− (rank, p.clone())
173− })
174− .collect()
175− };
176− match selector.iter().rposition(|p| p == crate::vocab::CHILDREN) {
177− None => (false, ranked(selector), Vec::new()),
178− Some(i) => (true, ranked(&selector[i + 1..]), ranked(&selector[..i])),
179− }
180−}
181−
182−/// The order of the chains through an element prefix (`@td:`, see
183−/// [`scoped_selector`]): by the prefixes before it, which select the root
184−/// of the scope and add nothing to the specificity, so `hover:@td:` comes
185−/// after `@td:` and wins on hover; then by the element; then by the
186−/// prefixes after it.
187−fn inside_order(chain: &[String]) -> (SelectorOrder, String, SelectorOrder) {
188− let at = chain
189− .iter()
190− .position(|p| crate::vocab::element_prefix(p).is_some())
191− .unwrap_or(chain.len());
192− (
193− selector_order(&chain[..at]),
194− chain.get(at).cloned().unwrap_or_default(),
195− selector_order(chain.get(at + 1..).unwrap_or_default()),
196− )
197−}
198−
199−/// The selector for `class` under a chain of selector prefixes, read left
200−/// to right. Everything before the last `children:` goes in `:where()`, so
201−/// a parent's `children:` styles have no specificity, and a child's own
202−/// attributes win over them: `children:hover:` is `:where(.a)>*:hover`,
203−/// `hover:children:` is `:where(.a:hover)>*`.
204−fn selector(class: &str, chain: &[String]) -> String {
205− let last_children = chain.iter().rposition(|p| p == crate::vocab::CHILDREN);
206− let mut out = format!(".{}", class);
207− for (i, prefix) in chain.iter().enumerate() {
208− if prefix == crate::vocab::CHILDREN {
209− if Some(i) == last_children {
210− out = format!(":where({})>*", out);
211− } else {
212− out.push_str(">*");
213− }
214− } else if let Some(pseudo) = crate::vocab::pseudo_selector(prefix) {
215− out.push_str(&pseudo);
216− }
19+/// Generate short CSS class names: a..z, then aa..a9, ba..b9, ..., z9, then
20+/// aaa, ... The first character is always a letter; later ones are drawn from
21+/// [a-z0-9]. The mapping is a bijection, so distinct indices never collide.
22+pub(crate) fn short_class_name(idx: usize) -> String {
23+ const REST: &[u8] = b"abcdefghijklmnopqrstuvwxyz0123456789";
24+ // Find the name length: 26 names of length 1, 26*36 of length 2, ...
25+ let mut n = idx;
26+ let mut len = 1;
27+ let mut count = 26usize;
28+ while n >= count {
29+ n -= count;
30+ len += 1;
31+ count = count.saturating_mul(36);
21732 }
218− out
219−}
220−
221−/// The rule for the elements an element prefix picks out inside the
222−/// element with the class `class` (see [`Condition::inside`]): the scope's
223−/// root, from the selector prefixes before it (`hover:@td:` is inside a
224−/// hovered element), and the selector for the elements, from those after
225−/// it (`@td:hover:` is a hovered cell). `:scope td` leaves out the root
226−/// itself, so `@ul [@ul:...]` styles the lists inside, not its own. `None`
227−/// when the name has no tag of its own (the parser reports it).
228−fn scoped_selector(class: &str, chain: &[String], at: usize) -> Option<(String, String)> {
229− let name = crate::vocab::element_prefix(&chain[at])?;
230− let tag = ElementKind::from_name(name)?.own_tag()?;
231− let root = selector(class, &chain[..at]);
232− let mut target = format!(":scope {}", tag);
233− for prefix in &chain[at + 1..] {
234− if let Some(pseudo) = crate::vocab::pseudo_selector(prefix) {
235− target.push_str(&pseudo);
236− }
237− }
238− Some((root, target))
239−}
240−
241−/// The `@media` or `@container` rule an at-rule prefix stands for, as
242−/// written in readable and in compact output.
243−fn at_rule(rank: usize, dev: bool) -> String {
244− let prefix = crate::vocab::at_rule_prefixes()
245− .nth(rank)
246− .unwrap_or_default();
247− let name = prefix.trim_end_matches(':');
248− let width = |name: &str| {
249− BREAKPOINTS
250− .iter()
251− .find(|(n, _)| *n == name)
252− .map_or("0", |(_, w)| *w)
253− };
254− let (kind, feature, value) = if let Some(size) = name.strip_prefix("cq-") {
255− ("@container", "min-width", width(size))
256− } else {
257− match name {
258− "print" => {
259− return "@media print".to_string();
260− }
261− "dark" => ("@media", "prefers-color-scheme", "dark"),
262− "motion-safe" => ("@media", "prefers-reduced-motion", "no-preference"),
263− "motion-reduce" => ("@media", "prefers-reduced-motion", "reduce"),
264− "landscape" | "portrait" => ("@media", "orientation", name),
265− _ => ("@media", "min-width", width(name)),
266− }
267− };
268− if dev {
269− format!("{} ({}: {})", kind, feature, value)
270− } else {
271− format!("{}({}:{})", kind, feature, value)
33+ let mut tail = Vec::with_capacity(len - 1);
34+ for _ in 1..len {
35+ tail.push(REST[n % 36]);
36+ n /= 36;
27237 }
273−}
274−
275−/// A style as text, for its hash: the defaults of its element's kind, its
276−/// rules (the at-rules' ranks, the selector prefixes and the declarations
277−/// of each) and the rules keyed on it, each part ended by a character CSS
278−/// doesn't have.
279−fn style_text(defaults: &str, rules: &[(Condition, String)], distinct: &str) -> String {
280− let mut text = format!("{defaults}\u{1}");
281− for (condition, body) in rules {
282− for rank in &condition.at {
283− text.push_str(&format!("{rank}\u{2}"));
284− }
285− text.push('\u{3}');
286− for prefix in &condition.selector {
287− text.push_str(prefix);
288− text.push('\u{2}');
289− }
290− text.push('\u{3}');
291− text.push_str(body);
292− text.push('\u{1}');
293− }
294− text.push_str(distinct);
295− text
38+ let mut name = String::with_capacity(len);
39+ name.push((b'a' + n as u8) as char);
40+ name.extend(tail.iter().rev().map(|&b| b as char));
41+ name
29642}
29743
29844struct StyleEntry {
29945 class_name: String,
300− /// The hash of the style, which names the class
301− style: u64,
302− /// The defaults of the element's kind (its layout, a heading's
303− /// `margin:0`, ...), less what its own attributes set. They are written
304− /// as `:where(.hl-a)` in the layer `hl-kind`, so an element prefix
305− /// around it (`@h2:`), its parent's `children:` styles and its own
306− /// attributes, all in later layers, win over them.
307− defaults: String,
308− /// The element's rules: under each condition, its declarations, in the
309− /// order they are written
310− rules: Vec<(Condition, String)>,
311− /// What else tells two elements with the same CSS apart: the rules
312− /// keyed on this class (see [`StyleCollector::keyed`]). Not written.
313− distinct: String,
46+ base: String,
47+ /// (CSS selector suffix, css_rules) — e.g. (":hover", "color:red;")
48+ pseudo: Vec<(String, String)>,
49+ /// Responsive overrides: (breakpoint_prefix, css)
50+ responsive: Vec<(String, String)>,
51+ /// Dark mode overrides
52+ dark: String,
53+ /// Print overrides
54+ print: String,
55+ motion_safe: String,
56+ motion_reduce: String,
57+ landscape: String,
58+ portrait: String,
59+ /// Container query overrides: (breakpoint_prefix, css)
60+ container: Vec<(String, String)>,
31461}
31562
31663struct StyleCollector {
31764 entries: Vec<StyleEntry>,
318− /// Maps a style's hash to its entries (more than one only when two
319− /// styles hash alike, which the full comparison tells apart).
65+ /// Maps a pre-hashed style signature to an index into `entries`.
66+ /// Using u64 as the key keeps lookups allocation-free; on the rare case of
67+ /// a hash collision we fall back to a full equality check against the entry.
32068 index: HashMap<u64, Vec<usize>>,
321− /// The names given, which a style whose name is taken doesn't get
322− names: std::collections::HashSet<String>,
323− /// Rules for an element's children, keyed on its class and written in
324− /// the block of an at-rule condition: `(at-rules, selector, body)`, e.g.
325− /// `([md], ":where(.a)>.b", "flex:1;")` (see [`Flow`]).
326− keyed: Vec<(Vec<usize>, String, String)>,
327− /// The keyed rules already added
328− keyed_seen: std::collections::HashSet<(Vec<usize>, String, String)>,
32969}
33070
33171impl StyleCollector {
@@ -333,282 +73,328 @@ impl StyleCollector {
33373 StyleCollector {
33474 entries: Vec::new(),
33575 index: HashMap::new(),
336− names: std::collections::HashSet::new(),
337− keyed: Vec::new(),
338− keyed_seen: std::collections::HashSet::new(),
339− }
340− }
341−
342− /// Add a rule for `selector` under the at-rules `at`, once.
343− fn add_keyed(&mut self, at: Vec<usize>, selector: String, body: String) {
344− let rule = (at, selector, body);
345− if self.keyed_seen.insert(rule.clone()) {
346− self.keyed.push(rule);
34776 }
34877 }
34978
35079 /// Returns a class name for this style combination, or None if all empty.
80+ #[allow(clippy::too_many_arguments)]
35181 fn get_class(
35282 &mut self,
353− defaults: String,
354− mut rules: Vec<(Condition, String)>,
355− distinct: String,
83+ base: String,
84+ pseudo: Vec<(String, String)>,
85+ responsive: Vec<(String, String)>,
86+ dark: String,
87+ print: String,
88+ motion_safe: String,
89+ motion_reduce: String,
90+ landscape: String,
91+ portrait: String,
92+ container: Vec<(String, String)>,
35693 ) -> Option<String> {
357− rules.retain(|(_, body)| !body.is_empty());
358− if defaults.is_empty() && rules.is_empty() {
94+ if base.is_empty()
95+ && pseudo.is_empty()
96+ && responsive.is_empty()
97+ && dark.is_empty()
98+ && print.is_empty()
99+ && motion_safe.is_empty()
100+ && motion_reduce.is_empty()
101+ && landscape.is_empty()
102+ && portrait.is_empty()
103+ && container.is_empty()
104+ {
359105 return None;
360106 }
361− rules.sort_by_cached_key(|(condition, _)| condition.order());
362− let style = stable_hash(&style_text(&defaults, &rules, &distinct));
363−
364− if let Some(indices) = self.index.get(&style) {
107+ use std::collections::hash_map::DefaultHasher;
108+ let mut h = DefaultHasher::new();
109+ base.hash(&mut h);
110+ pseudo.hash(&mut h);
111+ responsive.hash(&mut h);
112+ dark.hash(&mut h);
113+ print.hash(&mut h);
114+ motion_safe.hash(&mut h);
115+ motion_reduce.hash(&mut h);
116+ landscape.hash(&mut h);
117+ portrait.hash(&mut h);
118+ container.hash(&mut h);
119+ let sig = h.finish();
120+
121+ if let Some(indices) = self.index.get(&sig) {
365122 for &idx in indices {
366123 let e = &self.entries[idx];
367− if e.defaults == defaults && e.rules == rules && e.distinct == distinct {
124+ if e.base == base
125+ && e.pseudo == pseudo
126+ && e.responsive == responsive
127+ && e.dark == dark
128+ && e.print == print
129+ && e.motion_safe == motion_safe
130+ && e.motion_reduce == motion_reduce
131+ && e.landscape == landscape
132+ && e.portrait == portrait
133+ && e.container == container
134+ {
368135 return Some(e.class_name.clone());
369136 }
370137 }
371138 }
372− // The name is the hash's first digits, and more of them when
373− // another style of this file has those; after all 13, the entry's
374− // number tells the two apart
375139 let idx = self.entries.len();
376− let name = (CLASS_DIGITS..=13)
377− .map(|digits| format!("{}{}", CLASS_PREFIX, hash_digits(style, digits)))
378− .find(|name| !self.names.contains(name))
379− .unwrap_or_else(|| format!("{}{}{}", CLASS_PREFIX, hash_digits(style, 13), idx));
380− self.names.insert(name.clone());
140+ let name = short_class_name(idx);
381141 self.entries.push(StyleEntry {
382142 class_name: name.clone(),
383− style,
384− defaults,
385− rules,
386− distinct,
143+ base,
144+ pseudo,
145+ responsive,
146+ dark,
147+ print,
148+ motion_safe,
149+ motion_reduce,
150+ landscape,
151+ portrait,
152+ container,
387153 });
388− self.index.entry(style).or_default().push(idx);
154+ self.index.entry(sig).or_default().push(idx);
389155 Some(name)
390156 }
391157
392− /// The classes given, in the order they were
393− fn classes(&self) -> impl Iterator<Item = Class> + '_ {
394− self.entries.iter().map(|e| Class {
395− name: e.class_name.clone(),
396− style: e.style,
397− })
398− }
158+ fn to_css_formatted(&self, dev: bool, use_layer: bool) -> String {
159+ let mut css = String::new();
160+ let inner_indent = if use_layer && dev { " " } else { "" };
399161
400− /// All generated rules, in three layers (see [`LAYERS`]): the element
401− /// kinds' defaults in `hl-kind` (`:where(.hl-a)`), the rules for the
402− /// elements an element prefix picks out inside an element (`@td:`), and
403− /// a function's scoped `@style`, in `hl-inside`, and the elements' own
404− /// rules in `htmlang`. They are written in a fixed order, so which rule
405− /// wins never depends on where in the page an element is: the rules
406− /// without a prefix, then those under selector prefixes, then each block
407− /// of at-rules (see [`at_order`]), in which the rules keyed on a parent
408− /// come first, then the element's own, then its selectors (see
409− /// [`selector_order`]).
410− fn to_css_formatted(&self, dev: bool, scoped: &[String]) -> String {
411− // The defaults: `:where(.hl-a,.hl-b){...}`
412− let mut kind = String::new();
413− let mut defaults: Vec<(&str, Vec<&str>)> = Vec::new();
414− for e in self.entries.iter().filter(|e| !e.defaults.is_empty()) {
415− match defaults.iter_mut().find(|(body, _)| *body == e.defaults) {
416− Some((_, classes)) => classes.push(&e.class_name),
417− None => defaults.push((&e.defaults, vec![&e.class_name])),
418− }
419− }
420− for (body, classes) in defaults {
421− let classes: Vec<String> = classes.iter().map(|c| format!(".{}", c)).collect();
422− let selector = format!(":where({})", classes.join(","));
162+ // Wrap in @layer for specificity management
163+ if use_layer {
423164 if dev {
424− kind.push_str(&format!(" {} {{{}}}\n", selector, body));
165+ css.push_str("@layer htmlang {\n");
425166 } else {
426− kind.push_str(&format!("{}{{{}}}", selector, body));
167+ css.push_str("@layer htmlang{");
427168 }
428169 }
429170
430− let mut inside = self.blocks(true, dev);
431− // A function's scoped `@style`, nested under its class
432− for block in scoped {
433− if dev {
434− inside.push_str(block);
435− inside.push('\n');
436− } else {
437− inside.push_str(&compact_css(block));
171+ // Non-responsive rules. Base and pseudo rules are merged separately by
172+ // identical body so that e.g. `.a,.b{display:flex;flex-direction:column;}`
173+ // replaces two identical rules. Pseudo variants are grouped per selector
174+ // suffix (`:hover` with `:hover`, etc.) to keep each pseudo's cascade
175+ // position independent of others.
176+ let mut base_pairs: Vec<(&str, &str)> = Vec::with_capacity(self.entries.len());
177+ for e in &self.entries {
178+ if !e.base.is_empty() {
179+ base_pairs.push((e.class_name.as_str(), e.base.as_str()));
438180 }
439181 }
440−
441− let mut css = String::new();
442− for (name, rules) in [
443− ("hl-kind", kind),
444− ("hl-inside", inside),
445− ("htmlang", self.blocks(false, dev)),
446− ] {
447− if rules.is_empty() {
448− continue;
182+ emit_grouped_rules(&mut css, &base_pairs, "", inner_indent, dev);
183+
184+ // Collect pseudo rules grouped by selector suffix, preserving the order
185+ // in which suffixes first appear across entries.
186+ let mut pseudo_order: Vec<&str> = Vec::new();
187+ let mut pseudo_buckets: HashMap<&str, Vec<(&str, &str)>> = HashMap::new();
188+ for e in &self.entries {
189+ for (selector, body) in &e.pseudo {
190+ if body.is_empty() {
191+ continue;
192+ }
193+ let key = selector.as_str();
194+ if !pseudo_buckets.contains_key(key) {
195+ pseudo_order.push(key);
196+ }
197+ pseudo_buckets
198+ .entry(key)
199+ .or_default()
200+ .push((e.class_name.as_str(), body.as_str()));
449201 }
450− if dev {
451− css.push_str(&format!("@layer {} {{\n{}}}\n", name, rules));
452− } else {
453− css.push_str(&format!("@layer {}{{{}}}", name, rules));
202+ }
203+ for selector in &pseudo_order {
204+ if let Some(pairs) = pseudo_buckets.get(selector) {
205+ emit_grouped_rules(&mut css, pairs, selector, inner_indent, dev);
454206 }
455207 }
456− css
457− }
458208
459− /// The rules of every block of at-rules, in order: those for the
460− /// elements inside (`inside`: rules under an element prefix, each in
461− /// an `@scope` on its element's class), or the elements' own.
462− fn blocks(&self, inside: bool, dev: bool) -> String {
463− let mut css = String::new();
464− let rules = || {
465− self.entries.iter().flat_map(move |e| {
466− e.rules
467− .iter()
468− .filter(move |(c, _)| c.inside().is_some() == inside)
469− .map(move |(c, body)| (e, c, body))
470− })
471− };
472− let mut blocks: Vec<&[usize]> = vec![&[]];
473− let keyed = self.keyed.iter().filter(|_| !inside);
474− let every = rules()
475− .map(|(_, c, _)| c.at.as_slice())
476− .chain(keyed.map(|(at, _, _)| at.as_slice()));
477− for at in every {
478− if !blocks.contains(&at) {
479− blocks.push(at);
480− }
481− }
482− blocks.sort_by_key(|at| at_order(at));
483−
484− for at in blocks {
485− let depth = at.len();
486− // Readable output indents a rule inside `@layer` and inside
487− // each at-rule but the first
488− let indent = if dev {
489− " ".repeat(depth.max(1))
490− } else {
491− String::new()
492− };
493− let mut inner = String::new();
494− // Rules keyed on a parent's class come first: they have the
495− // specificity of one class, like a class rule, so the child's
496− // own rules in the block still win
497− if !inside {
498− let keyed: Vec<(&str, &str)> = self
499− .keyed
500− .iter()
501− .filter(|(a, _, _)| a.as_slice() == at)
502− .map(|(_, selector, body)| (selector.as_str(), body.as_str()))
503− .collect();
504− emit_selector_rules(&mut inner, &keyed, &indent, dev);
505− }
506− // The selector chains of this block, in order
507− let mut chains: Vec<&[String]> = Vec::new();
508− for (_, condition, _) in rules() {
509− if condition.at == at && !chains.contains(&condition.selector.as_slice()) {
510− chains.push(&condition.selector);
511− }
512− }
513− if inside {
514− chains.sort_by_cached_key(|chain| inside_order(chain));
515− // One `@scope` for each root, its rules in the order of
516− // the chains: rules for one element under two roots (`.a`
517− // and `.a:hover`) tie on specificity and proximity, so the
518− // later one wins
519− let mut scopes: Vec<(String, Vec<(String, &str)>)> = Vec::new();
520− for chain in chains {
521− let Some(element) = chain
522− .iter()
523− .position(|p| crate::vocab::element_prefix(p).is_some())
524− else {
525− continue;
526− };
527− for (e, _, body) in
528− rules().filter(|(_, c, _)| c.at == at && c.selector == chain)
529− {
530− let Some((root, target)) = scoped_selector(&e.class_name, chain, element)
531− else {
532− continue;
533− };
534− match scopes.iter_mut().find(|(r, _)| *r == root) {
535− Some((_, targets)) => targets.push((target, body)),
536− None => scopes.push((root, vec![(target, body)])),
537− }
209+ // Responsive rules grouped by breakpoint
210+ for &(bp_name, bp_width) in BREAKPOINTS {
211+ let mut bp_pairs: Vec<(&str, &str)> = Vec::new();
212+ for e in &self.entries {
213+ for (bp, rule_css) in &e.responsive {
214+ if bp == bp_name && !rule_css.is_empty() {
215+ bp_pairs.push((e.class_name.as_str(), rule_css.as_str()));
538216 }
539217 }
540− let inner_indent = if dev {
541− format!("{} ", indent)
542− } else {
543− String::new()
544− };
545− for (root, targets) in scopes {
546− let targets: Vec<(&str, &str)> =
547− targets.iter().map(|(t, b)| (t.as_str(), *b)).collect();
548− inner.push_str(&indent);
549− inner.push_str(&format!("@scope ({})", root));
550− inner.push_str(if dev { " {\n" } else { "{" });
551− emit_selector_rules(&mut inner, &targets, &inner_indent, dev);
552− inner.push_str(&indent);
553− inner.push_str(if dev { "}\n" } else { "}" });
554− }
555− } else {
556− chains.sort_by_cached_key(|chain| selector_order(chain));
557− for chain in chains {
558− let pairs: Vec<(String, &str)> = rules()
559− .filter(|(_, c, _)| c.at == at && c.selector == chain)
560− .map(|(e, _, body)| (selector(&e.class_name, chain), body.as_str()))
561− .collect();
562− emit_grouped_rules(&mut inner, &pairs, &indent, dev);
563− }
564218 }
565− if inner.is_empty() {
566− continue;
219+ emit_media_block(
220+ &mut css,
221+ &format!("@media (min-width: {})", bp_width),
222+ &format!("@media(min-width:{})", bp_width),
223+ &bp_pairs,
224+ "",
225+ dev,
226+ );
227+ }
228+
229+ // Dark mode rules
230+ let dark_pairs: Vec<(&str, &str)> = self
231+ .entries
232+ .iter()
233+ .filter(|e| !e.dark.is_empty())
234+ .map(|e| (e.class_name.as_str(), e.dark.as_str()))
235+ .collect();
236+ emit_media_block(
237+ &mut css,
238+ "@media (prefers-color-scheme: dark)",
239+ "@media(prefers-color-scheme:dark)",
240+ &dark_pairs,
241+ "",
242+ dev,
243+ );
244+
245+ // Print rules
246+ let print_pairs: Vec<(&str, &str)> = self
247+ .entries
248+ .iter()
249+ .filter(|e| !e.print.is_empty())
250+ .map(|e| (e.class_name.as_str(), e.print.as_str()))
251+ .collect();
252+ emit_media_block(
253+ &mut css,
254+ "@media print",
255+ "@media print",
256+ &print_pairs,
257+ "",
258+ dev,
259+ );
260+
261+ // Motion safe rules
262+ let motion_safe_pairs: Vec<(&str, &str)> = self
263+ .entries
264+ .iter()
265+ .filter(|e| !e.motion_safe.is_empty())
266+ .map(|e| (e.class_name.as_str(), e.motion_safe.as_str()))
267+ .collect();
268+ emit_media_block(
269+ &mut css,
270+ "@media (prefers-reduced-motion: no-preference)",
271+ "@media(prefers-reduced-motion:no-preference)",
272+ &motion_safe_pairs,
273+ "",
274+ dev,
275+ );
276+
277+ // Motion reduce rules
278+ let motion_reduce_pairs: Vec<(&str, &str)> = self
279+ .entries
280+ .iter()
281+ .filter(|e| !e.motion_reduce.is_empty())
282+ .map(|e| (e.class_name.as_str(), e.motion_reduce.as_str()))
283+ .collect();
284+ emit_media_block(
285+ &mut css,
286+ "@media (prefers-reduced-motion: reduce)",
287+ "@media(prefers-reduced-motion:reduce)",
288+ &motion_reduce_pairs,
289+ "",
290+ dev,
291+ );
292+
293+ // Landscape rules
294+ let landscape_pairs: Vec<(&str, &str)> = self
295+ .entries
296+ .iter()
297+ .filter(|e| !e.landscape.is_empty())
298+ .map(|e| (e.class_name.as_str(), e.landscape.as_str()))
299+ .collect();
300+ emit_media_block(
301+ &mut css,
302+ "@media (orientation: landscape)",
303+ "@media(orientation:landscape)",
304+ &landscape_pairs,
305+ "",
306+ dev,
307+ );
308+
309+ // Portrait rules
310+ let portrait_pairs: Vec<(&str, &str)> = self
311+ .entries
312+ .iter()
313+ .filter(|e| !e.portrait.is_empty())
314+ .map(|e| (e.class_name.as_str(), e.portrait.as_str()))
315+ .collect();
316+ emit_media_block(
317+ &mut css,
318+ "@media (orientation: portrait)",
319+ "@media(orientation:portrait)",
320+ &portrait_pairs,
321+ "",
322+ dev,
323+ );
324+
325+ // Container query rules grouped by breakpoint
326+ for &(bp_name, bp_width) in BREAKPOINTS {
327+ let mut cq_pairs: Vec<(&str, &str)> = Vec::new();
328+ for e in &self.entries {
329+ for (bp, rule_css) in &e.container {
330+ if bp == bp_name && !rule_css.is_empty() {
331+ cq_pairs.push((e.class_name.as_str(), rule_css.as_str()));
332+ }
333+ }
567334 }
568− // Each at-rule wraps the next, outermost first
569− for (level, &rank) in at.iter().enumerate().rev() {
570− let pad = if dev {
571− " ".repeat(level)
572− } else {
573− String::new()
574− };
575− inner = if dev {
576− format!("{pad}{} {{\n{inner}{pad}}}\n", at_rule(rank, true))
577− } else {
578− format!("{}{{{inner}}}", at_rule(rank, false))
579− };
335+ emit_media_block(
336+ &mut css,
337+ &format!("@container (min-width: {})", bp_width),
338+ &format!("@container(min-width:{})", bp_width),
339+ &cq_pairs,
340+ "",
341+ dev,
342+ );
343+ }
344+
345+ // Close @layer
346+ if use_layer {
347+ if dev {
348+ css.push_str("}\n");
349+ } else {
350+ css.push('}');
580351 }
581− css.push_str(&inner);
582352 }
353+
583354 css
584355 }
585356}
586357
587−/// Emit CSS rules from `(selector, body)` pairs, merging identical bodies
358+/// Emit CSS rules from `(class_name, body)` pairs, merging identical bodies
588359/// into a single selector-list rule (e.g. `.a,.b{body}`). The first occurrence
589360/// of each distinct body determines ordering, so output stays deterministic
590−/// across runs. `indent` is prepended to each rule line.
591−fn emit_grouped_rules(out: &mut String, pairs: &[(String, &str)], indent: &str, dev: bool) {
361+/// across runs. `selector_suffix` is appended to each class (e.g. `":hover"`,
362+/// or `""` for plain class rules). `indent` is prepended to each rule line.
363+fn emit_grouped_rules(
364+ out: &mut String,
365+ pairs: &[(&str, &str)],
366+ selector_suffix: &str,
367+ indent: &str,
368+ dev: bool,
369+) {
592370 if pairs.is_empty() {
593371 return;
594372 }
595373 // Group in first-occurrence order.
596374 let mut order: Vec<&str> = Vec::new();
597375 let mut groups: HashMap<&str, Vec<&str>> = HashMap::new();
598− for (selector, body) in pairs {
376+ for &(name, body) in pairs {
599377 if body.is_empty() {
600378 continue;
601379 }
602380 if !groups.contains_key(body) {
603381 order.push(body);
604382 }
605− groups.entry(body).or_default().push(selector);
383+ groups.entry(body).or_default().push(name);
606384 }
607385 let sp = if dev { " " } else { "" };
608386 let nl = if dev { "\n" } else { "" };
609387 for body in &order {
388+ let names = &groups[body];
610389 out.push_str(indent);
611− out.push_str(&groups[body].join(","));
390+ for (i, n) in names.iter().enumerate() {
391+ if i > 0 {
392+ out.push(',');
393+ }
394+ out.push('.');
395+ out.push_str(n);
396+ out.push_str(selector_suffix);
397+ }
612398 out.push_str(sp);
613399 out.push('{');
614400 out.push_str(body);
@@ -617,44 +403,38 @@ fn emit_grouped_rules(out: &mut String, pairs: &[(String, &str)], indent: &str,
617403 }
618404}
619405
620−/// Emit `(selector, body)` rules in their order, merging a run of rules
621−/// with the same body into one rule with a selector list (the order
622−/// matters: two rules may apply to one element).
623−fn emit_selector_rules(out: &mut String, rules: &[(&str, &str)], indent: &str, dev: bool) {
624− let mut i = 0;
625− while i < rules.len() {
626− let body = rules[i].1;
627− let run = rules[i..].iter().take_while(|(_, b)| *b == body).count();
628− if !body.is_empty() {
629− let selectors: Vec<&str> = rules[i..i + run].iter().map(|(s, _)| *s).collect();
630− out.push_str(indent);
631− out.push_str(&selectors.join(","));
632− if dev {
633− out.push(' ');
634− }
635− out.push('{');
636− out.push_str(body);
637− out.push('}');
638− if dev {
639− out.push('\n');
640− }
641− }
642− i += run;
406+/// Emit an `@media` / `@container` block containing grouped class rules.
407+/// Skips the block entirely if no non-empty bodies are present.
408+fn emit_media_block(
409+ out: &mut String,
410+ header_dev: &str,
411+ header_min: &str,
412+ pairs: &[(&str, &str)],
413+ selector_suffix: &str,
414+ dev: bool,
415+) {
416+ if pairs.iter().all(|(_, body)| body.is_empty()) {
417+ return;
418+ }
419+ let mut inner = String::new();
420+ let inner_indent = if dev { " " } else { "" };
421+ emit_grouped_rules(&mut inner, pairs, selector_suffix, inner_indent, dev);
422+ if inner.is_empty() {
423+ return;
424+ }
425+ if dev {
426+ out.push_str(&format!("{} {{\n{}}}\n", header_dev, inner));
427+ } else {
428+ out.push_str(&format!("{}{{{}}}", header_min, inner));
643429 }
644430}
645431
646432struct GenContext {
647433 dev: bool,
648434 depth: usize,
435+ image_count: usize,
649436 has_interactive: bool,
650− /// Writing inside a text element, at any depth: htmlang's own `<div>`s
651− /// are `<span>`s there, which text can hold.
652− in_text: bool,
653− /// How the element whose children are being written lays them out
654− flow: Flow,
655− /// Writing the children of a `@picture`, where `@source`'s leading
656− /// argument is its `srcset`
657− in_picture: bool,
437+ has_defer: bool,
658438}
659439
660440impl GenContext {
@@ -680,26 +460,23 @@ pub struct CodegenOptions {
680460 pub dev: bool,
681461 pub partial: bool,
682462 pub minify: bool,
463+ pub compat: bool,
683464}
684465
685466/// Generate HTML from a parsed document using the given options.
686467pub fn generate_with(doc: &Document, opts: &CodegenOptions) -> String {
687− generate_with_classes(doc, opts).0
688−}
689−
690−/// [`generate_with`], and the classes the document's styles were given,
691−/// for a check across files that no name stands for two styles.
692−pub fn generate_with_classes(doc: &Document, opts: &CodegenOptions) -> (String, Vec<Class>) {
693− let mut classes = Vec::new();
694468 let mut html = if opts.partial {
695− generate_partial_inner(doc, opts.dev, &mut classes)
469+ generate_partial_inner(doc, opts.dev)
696470 } else {
697− generate_full_inner(doc, opts.dev, &mut classes)
471+ generate_full_inner(doc, opts.dev)
698472 };
699473 if opts.minify {
700474 html = minify_html(&html);
701475 }
702− (html, classes)
476+ if opts.compat {
477+ html = add_vendor_prefixes(&html);
478+ }
479+ html
703480}
704481
705482pub fn generate(doc: &Document) -> String {
@@ -747,6 +524,38 @@ pub fn generate_minified(doc: &Document) -> String {
747524 )
748525}
749526
527+pub fn generate_compat(doc: &Document) -> String {
528+ generate_with(
529+ doc,
530+ &CodegenOptions {
531+ compat: true,
532+ ..Default::default()
533+ },
534+ )
535+}
536+
537+pub fn generate_dev_compat(doc: &Document) -> String {
538+ generate_with(
539+ doc,
540+ &CodegenOptions {
541+ dev: true,
542+ compat: true,
543+ ..Default::default()
544+ },
545+ )
546+}
547+
548+pub fn generate_minified_compat(doc: &Document) -> String {
549+ generate_with(
550+ doc,
551+ &CodegenOptions {
552+ minify: true,
553+ compat: true,
554+ ..Default::default()
555+ },
556+ )
557+}
558+
750559fn minify_html(html: &str) -> String {
751560 let mut result = String::with_capacity(html.len());
752561 let mut in_pre = false;
@@ -825,151 +634,578 @@ fn minify_html(html: &str) -> String {
825634 result
826635}
827636
828−fn generate_full_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -> String {
829− // Without `@page` the output is a fragment
830− let Some(page) = &doc.page else {
831− return generate_partial_inner(doc, dev, classes);
832− };
637+/// Add vendor prefixes to CSS within <style> tags for broader browser compatibility.
638+fn add_vendor_prefixes(html: &str) -> String {
639+ // Find CSS within <style>...</style> and add vendor prefixes
640+ let mut result = String::with_capacity(html.len() + 512);
641+ let mut rest = html;
642+ while let Some(start) = rest.find("<style>") {
643+ let after_tag = start + 7;
644+ result.push_str(&rest[..after_tag]);
645+ rest = &rest[after_tag..];
646+ if let Some(end) = rest.find("</style>") {
647+ let css = &rest[..end];
648+ result.push_str(&prefix_css(css));
649+ result.push_str("</style>");
650+ rest = &rest[end + 8..];
651+ } else {
652+ break;
653+ }
654+ }
655+ result.push_str(rest);
656+ result
657+}
658+
659+fn prefix_css(css: &str) -> String {
660+ let mut out = String::with_capacity(css.len() + 256);
661+ let mut i = 0;
662+ let bytes = css.as_bytes();
663+ while i < bytes.len() {
664+ // Find property declarations
665+ if let Some(pos) = css[i..].find('{') {
666+ let brace = i + pos;
667+ out.push_str(&css[i..=brace]);
668+ i = brace + 1;
669+ // Process declarations within this block
670+ if let Some(close) = css[i..].find('}') {
671+ let block = &css[i..i + close];
672+ out.push_str(&prefix_declarations(block));
673+ out.push('}');
674+ i = i + close + 1;
675+ }
676+ } else {
677+ out.push_str(&css[i..]);
678+ break;
679+ }
680+ }
681+ out
682+}
683+
684+fn prefix_declarations(block: &str) -> String {
685+ let mut out = String::with_capacity(block.len() + 128);
686+ for decl in block.split(';') {
687+ let decl = decl.trim();
688+ if decl.is_empty() {
689+ continue;
690+ }
691+ if let Some((prop, val)) = decl.split_once(':') {
692+ let prop = prop.trim();
693+ let val = val.trim();
694+ match prop {
695+ "backdrop-filter" => {
696+ out.push_str(&format!("-webkit-backdrop-filter:{};", val));
697+ out.push_str(&format!("backdrop-filter:{};", val));
698+ }
699+ "user-select" => {
700+ out.push_str(&format!("-webkit-user-select:{};", val));
701+ out.push_str(&format!("-moz-user-select:{};", val));
702+ out.push_str(&format!("user-select:{};", val));
703+ }
704+ "appearance" => {
705+ out.push_str(&format!("-webkit-appearance:{};", val));
706+ out.push_str(&format!("-moz-appearance:{};", val));
707+ out.push_str(&format!("appearance:{};", val));
708+ }
709+ "background-clip" if val.contains("text") => {
710+ out.push_str(&format!("-webkit-background-clip:{};", val));
711+ out.push_str(&format!("background-clip:{};", val));
712+ }
713+ "hyphens" => {
714+ out.push_str(&format!("-webkit-hyphens:{};", val));
715+ out.push_str(&format!("-ms-hyphens:{};", val));
716+ out.push_str(&format!("hyphens:{};", val));
717+ }
718+ "text-size-adjust" => {
719+ out.push_str(&format!("-webkit-text-size-adjust:{};", val));
720+ out.push_str(&format!("-ms-text-size-adjust:{};", val));
721+ out.push_str(&format!("text-size-adjust:{};", val));
722+ }
723+ "mask-image" | "mask-size" | "mask-repeat" | "mask-position" => {
724+ out.push_str(&format!("-webkit-{}:{};", prop, val));
725+ out.push_str(&format!("{}:{};", prop, val));
726+ }
727+ _ => {
728+ out.push_str(decl);
729+ out.push(';');
730+ }
731+ }
732+ } else {
733+ out.push_str(decl);
734+ out.push(';');
735+ }
736+ }
737+ out
738+}
739+
740+fn generate_full_inner(doc: &Document, dev: bool) -> String {
833741 let mut styles = StyleCollector::new();
834742 let mut ctx = GenContext {
835743 dev,
836744 depth: 0,
745+ image_count: 0,
837746 has_interactive: false,
838− in_text: false,
839− flow: Flow::default(),
840− in_picture: false,
747+ has_defer: false,
841748 };
842749
843− // The page is the root element: `<body>` is a column (the reset makes
844− // it one, filling the viewport), `@page`'s styles are its class, and
845− // the page's top-level elements are its children
846− let root = Element {
847− kind: ElementKind::El,
848− attrs: page.styles.clone(),
849− argument: None,
850− children: Vec::new(),
851− line_num: 0,
852− function: None,
853− };
854− let mut own = Flow::of(&root);
855− let top = Flow::default();
856− let site = Site {
857− kind: &root.kind,
858− parent: &top,
859− has_overlay_children: holds_overlays(&doc.nodes),
860− inline: false,
861− root: true,
862− };
863− let body_class = element_class(&root, &site, &mut styles);
864− own.class = body_class.clone();
865− ctx.flow = own;
750+ // Check if document has @main for skip-to-content link
751+ let has_main = has_element_kind(&doc.nodes, &ElementKind::Main);
866752
867753 let mut body = String::new();
868− generate_children(
869− &doc.nodes,
870− Some(Layout::Column),
871− &mut body,
872− &mut styles,
873− &mut ctx,
874− );
875754
876− let element_css = build_element_css(doc, &styles, dev);
877− let nl = if dev { "\n" } else { "" };
878−
879− let mut meta_html = String::new();
880− // A `@meta viewport` of the page's own replaces the usual one
881− if !doc.meta_tags.iter().any(|(name, _)| name == "viewport") {
882− meta_html.push_str(&format!(
883− "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">{}",
884− nl
885− ));
886− }
887− meta_html.push_str(&format!(
888− "<title>{}</title>{}",
889− html_escape(&page.title),
890− nl
891− ));
892− for (name, content) in &doc.meta_tags {
893− meta_html.push_str(&format!(
894− "<meta name=\"{}\" content=\"{}\">{}",
895− html_escape(name),
896− html_escape(content),
897− nl
898− ));
899− }
900− for (property, content) in &doc.og_tags {
901− meta_html.push_str(&format!(
902− "<meta property=\"og:{}\" content=\"{}\">{}",
903− html_escape(property),
904− html_escape(content),
905− nl
906− ));
907− }
908− if let Some(path) = &page.favicon {
909− meta_html.push_str(&format!(
910− "<link rel=\"icon\" href=\"{}\">{}",
911− html_escape(path),
912− nl
913− ));
914− }
915− for block in &doc.head_blocks {
916− meta_html.push_str(block);
917− meta_html.push_str(nl);
755+ // Skip-to-content link for accessibility (only when @main exists)
756+ if has_main {
757+ if dev {
758+ body.push_str("<a href=\"#hl-main\" class=\"hl-skip\">Skip to content</a>\n");
759+ } else {
760+ body.push_str("<a href=\"#hl-main\" class=\"hl-skip\">Skip to content</a>");
761+ }
918762 }
919763
920− // `@page`'s HTML attributes go on `<html>`
921− let mut root_attrs = String::new();
922− for attr in html_attrs(&page.html_attrs) {
923− push_html_attr(&mut root_attrs, attr);
764+ for node in &doc.nodes {
765+ generate_node(node, None, &mut body, &mut styles, &mut ctx);
924766 }
925− let mut body_attrs = String::new();
926− emit_class_attr(&mut body_attrs, body_class.as_deref(), None);
927767
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";
931− if dev {
932− format!(
933− "{}{} {{ outline: 2px solid currentColor; outline-offset: 2px; }}\n",
934− OWN_ELEMENTS, focusable
935− )
936− } else {
937− format!(
938− "{}{}{{outline:2px solid currentColor;outline-offset:2px}}",
939− OWN_ELEMENTS, focusable
940− )
941− }
942− } else {
768+ // Collect external domains for DNS prefetch
769+ let dns_prefetch_html = collect_dns_prefetch(&body, dev);
770+
771+ let element_css = build_element_css(doc, &styles, dev);
772+
773+ // Build meta tags string
774+ let meta_html = if doc.meta_tags.is_empty() {
943775 String::new()
776+ } else {
777+ let mut m = String::new();
778+ for (name, content) in &doc.meta_tags {
779+ if dev {
780+ m.push_str(&format!(
781+ "<meta name=\"{}\" content=\"{}\">\n",
782+ html_escape(name),
783+ html_escape(content)
784+ ));
785+ } else {
786+ m.push_str(&format!(
787+ "<meta name=\"{}\" content=\"{}\">",
788+ html_escape(name),
789+ html_escape(content)
790+ ));
791+ }
792+ }
793+ m
944794 };
945− let reset_css = reset_css(dev, true, &focus_visible_css);
946− classes.extend(styles.classes());
947−
948− format!(
949− "<!DOCTYPE html>{nl}<html{root_attrs}>{nl}<head>{nl}<meta charset=\"utf-8\">{nl}\
950− {meta_html}<style>{nl}{reset_css}{element_css}</style>{nl}</head>{nl}\
951− <body{body_attrs}>{nl}{body}</body>{nl}</html>{nl}",
952− )
953−}
954795
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();
796+ // Build OG meta tags
797+ let og_html = if doc.og_tags.is_empty() {
798+ String::new()
799+ } else {
800+ let mut o = String::new();
801+ for (property, content) in &doc.og_tags {
802+ if dev {
803+ o.push_str(&format!(
804+ "<meta property=\"og:{}\" content=\"{}\">\n",
805+ html_escape(property),
806+ html_escape(content)
807+ ));
808+ } else {
809+ o.push_str(&format!(
810+ "<meta property=\"og:{}\" content=\"{}\">",
811+ html_escape(property),
812+ html_escape(content)
813+ ));
814+ }
815+ }
816+ o
817+ };
960818
961− // Collect the CSS custom properties declared with `@let --name` so they
962− // can be emitted in a single `:root` block below.
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()));
966− }
819+ // Build head blocks string
820+ let head_html = if doc.head_blocks.is_empty() {
821+ String::new()
822+ } else {
823+ let mut h = String::new();
824+ for block in &doc.head_blocks {
825+ h.push_str(block);
826+ if dev {
827+ h.push('\n');
828+ }
829+ }
830+ h
831+ };
967832
968− // Generated rules always go in htmlang's layers, so unlayered user CSS
969− // (`@style`, `@raw`) overrides them regardless of specificity.
970− let styles_css = styles.to_css_formatted(dev, &doc.scoped_css);
833+ let lang_attr = match &doc.lang {
834+ Some(lang) => format!(" lang=\"{}\"", html_escape(lang)),
835+ None => String::new(),
836+ };
971837
972− // Emit the :root block first so the cascade picks up the custom
838+ let favicon_html = match &doc.favicon {
839+ Some(path) => {
840+ // Try to read and inline the favicon
841+ if let Ok(data) = std::fs::read(path) {
842+ let mime = if path.ends_with(".ico") {
843+ "image/x-icon"
844+ } else if path.ends_with(".png") {
845+ "image/png"
846+ } else if path.ends_with(".svg") {
847+ "image/svg+xml"
848+ } else {
849+ "image/x-icon"
850+ };
851+ let b64 = base64_encode(&data);
852+ if dev {
853+ format!(
854+ "<link rel=\"icon\" href=\"data:{};base64,{}\">\n",
855+ mime, b64
856+ )
857+ } else {
858+ format!("<link rel=\"icon\" href=\"data:{};base64,{}\">", mime, b64)
859+ }
860+ } else {
861+ // Fall back to href
862+ if dev {
863+ format!("<link rel=\"icon\" href=\"{}\">\n", html_escape(path))
864+ } else {
865+ format!("<link rel=\"icon\" href=\"{}\">", html_escape(path))
866+ }
867+ }
868+ }
869+ None => String::new(),
870+ };
871+
872+ // Canonical URL
873+ let canonical_html = match &doc.canonical {
874+ Some(url) => {
875+ if dev {
876+ format!("<link rel=\"canonical\" href=\"{}\">\n", html_escape(url))
877+ } else {
878+ format!("<link rel=\"canonical\" href=\"{}\">", html_escape(url))
879+ }
880+ }
881+ None => String::new(),
882+ };
883+
884+ // Base URL
885+ let base_html = match &doc.base_url {
886+ Some(url) => {
887+ if dev {
888+ format!("<base href=\"{}\">\n", html_escape(url))
889+ } else {
890+ format!("<base href=\"{}\">", html_escape(url))
891+ }
892+ }
893+ None => String::new(),
894+ };
895+
896+ // JSON-LD blocks
897+ let json_ld_html: String = doc
898+ .json_ld_blocks
899+ .iter()
900+ .map(|block| {
901+ if dev {
902+ format!(
903+ "<script type=\"application/ld+json\">\n{}\n</script>\n",
904+ block
905+ )
906+ } else {
907+ format!("<script type=\"application/ld+json\">{}</script>", block)
908+ }
909+ })
910+ .collect();
911+
912+ // Manifest link
913+ let manifest_html = if let Some(ref manifest) = doc.manifest {
914+ let mut json = String::from("{");
915+ json.push_str(&format!("\"name\":{},", json_str(&manifest.name)));
916+ if let Some(ref short) = manifest.short_name {
917+ json.push_str(&format!("\"short_name\":{},", json_str(short)));
918+ }
919+ json.push_str(&format!("\"start_url\":{},", json_str(&manifest.start_url)));
920+ json.push_str(&format!("\"display\":{}", json_str(&manifest.display)));
921+ if let Some(ref bg) = manifest.background_color {
922+ json.push_str(&format!(",\"background_color\":{}", json_str(bg)));
923+ }
924+ if let Some(ref tc) = manifest.theme_color {
925+ json.push_str(&format!(",\"theme_color\":{}", json_str(tc)));
926+ }
927+ if let Some(ref desc) = manifest.description {
928+ json.push_str(&format!(",\"description\":{}", json_str(desc)));
929+ }
930+ if !manifest.icons.is_empty() {
931+ json.push_str(",\"icons\":[");
932+ for (i, (src, sizes)) in manifest.icons.iter().enumerate() {
933+ if i > 0 {
934+ json.push(',');
935+ }
936+ json.push_str(&format!(
937+ "{{\"src\":{},\"sizes\":{},\"type\":\"image/png\"}}",
938+ json_str(src),
939+ json_str(sizes)
940+ ));
941+ }
942+ json.push(']');
943+ }
944+ json.push('}');
945+
946+ // Inline the manifest as a data URI
947+ let encoded = base64_encode(json.as_bytes());
948+ if dev {
949+ format!(
950+ "<link rel=\"manifest\" href=\"data:application/manifest+json;base64,{}\">\n",
951+ encoded
952+ )
953+ } else {
954+ format!(
955+ "<link rel=\"manifest\" href=\"data:application/manifest+json;base64,{}\">",
956+ encoded
957+ )
958+ }
959+ } else {
960+ String::new()
961+ };
962+
963+ // Preload hints (auto-detect fonts from @font-face)
964+ let mut preload_html = String::new();
965+ for (_, url) in &doc.font_faces {
966+ if dev {
967+ preload_html.push_str(&format!(
968+ "<link rel=\"preload\" href=\"{}\" as=\"font\" type=\"font/woff2\" crossorigin>\n",
969+ url
970+ ));
971+ } else {
972+ preload_html.push_str(&format!(
973+ "<link rel=\"preload\" href=\"{}\" as=\"font\" type=\"font/woff2\" crossorigin>",
974+ url
975+ ));
976+ }
977+ }
978+ // Explicit preload hints from the document
979+ for hint in &doc.preload_hints {
980+ if dev {
981+ preload_html.push_str(&format!(
982+ "<link rel=\"preload\" href=\"{}\" as=\"{}\"{}>\n",
983+ html_escape(&hint.href),
984+ hint.as_type,
985+ if hint.crossorigin { " crossorigin" } else { "" }
986+ ));
987+ } else {
988+ preload_html.push_str(&format!(
989+ "<link rel=\"preload\" href=\"{}\" as=\"{}\"{}>",
990+ html_escape(&hint.href),
991+ hint.as_type,
992+ if hint.crossorigin { " crossorigin" } else { "" }
993+ ));
994+ }
995+ }
996+
997+ // Auto theme-color meta from @theme primary token
998+ let theme_color_html = doc
999+ .theme_tokens
1000+ .iter()
1001+ .find(|(name, _)| name == "primary" || name == "theme-color")
1002+ .map(|(_, value)| {
1003+ if dev {
1004+ format!(
1005+ "<meta name=\"theme-color\" content=\"{}\">\n",
1006+ html_escape(value)
1007+ )
1008+ } else {
1009+ format!(
1010+ "<meta name=\"theme-color\" content=\"{}\">",
1011+ html_escape(value)
1012+ )
1013+ }
1014+ })
1015+ .unwrap_or_default();
1016+
1017+ // Focus-visible CSS for interactive elements (accessibility)
1018+ let focus_visible_css = if ctx.has_interactive {
1019+ if dev {
1020+ "a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n"
1021+ } else {
1022+ "a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}"
1023+ }
1024+ } else {
1025+ ""
1026+ };
1027+
1028+ // Skip-to-content CSS (visually hidden but accessible)
1029+ let skip_link_css = if has_main {
1030+ if dev {
1031+ ".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"
1032+ } else {
1033+ ".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}"
1034+ }
1035+ } else {
1036+ ""
1037+ };
1038+
1039+ // Noscript fallback: show deferred content if JS is disabled
1040+ let noscript_html = if ctx.has_defer {
1041+ if dev {
1042+ "<noscript><style>.hl-defer-placeholder { display: none; }</style></noscript>\n"
1043+ } else {
1044+ "<noscript><style>.hl-defer-placeholder{display:none}</style></noscript>"
1045+ }
1046+ } else {
1047+ ""
1048+ };
1049+
1050+ let reset_css = reset_css(doc, dev, focus_visible_css, skip_link_css);
1051+
1052+ match &doc.page_title {
1053+ Some(title) => {
1054+ if dev {
1055+ format!(
1056+ "\
1057+<!DOCTYPE html>
1058+<html{lang_attr}>
1059+<head>
1060+<meta charset=\"utf-8\">
1061+<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
1062+<title>{title}</title>
1063+{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}\
1064+<style>
1065+{reset_css}{element_css}\
1066+</style>
1067+{noscript_html}\
1068+</head>
1069+<body>
1070+{body}\
1071+</body>
1072+</html>
1073+",
1074+ title = html_escape(title),
1075+ lang_attr = lang_attr,
1076+ theme_color_html = theme_color_html,
1077+ base_html = base_html,
1078+ canonical_html = canonical_html,
1079+ manifest_html = manifest_html,
1080+ preload_html = preload_html,
1081+ dns_prefetch_html = dns_prefetch_html,
1082+ meta_html = meta_html,
1083+ favicon_html = favicon_html,
1084+ json_ld_html = json_ld_html,
1085+ head_html = head_html,
1086+ og_html = og_html,
1087+ reset_css = reset_css,
1088+ noscript_html = noscript_html,
1089+ element_css = element_css,
1090+ body = body,
1091+ )
1092+ } else {
1093+ format!(
1094+ "<!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>{reset_css}{element_css}</style>{noscript_html}</head><body>{body}</body></html>",
1095+ title = html_escape(title),
1096+ lang_attr = lang_attr,
1097+ theme_color_html = theme_color_html,
1098+ base_html = base_html,
1099+ canonical_html = canonical_html,
1100+ manifest_html = manifest_html,
1101+ preload_html = preload_html,
1102+ dns_prefetch_html = dns_prefetch_html,
1103+ meta_html = meta_html,
1104+ og_html = og_html,
1105+ favicon_html = favicon_html,
1106+ json_ld_html = json_ld_html,
1107+ head_html = head_html,
1108+ reset_css = reset_css,
1109+ noscript_html = noscript_html,
1110+ element_css = element_css,
1111+ body = body,
1112+ )
1113+ }
1114+ }
1115+ None => {
1116+ if element_css.is_empty() {
1117+ body
1118+ } else if dev {
1119+ format!("<style>\n{}</style>\n{}", element_css, body)
1120+ } else {
1121+ format!("<style>{}</style>{}", element_css, body)
1122+ }
1123+ }
1124+ }
1125+}
1126+
1127+/// Encode `s` as a JSON string literal (with surrounding quotes).
1128+pub(crate) fn json_str(s: &str) -> String {
1129+ let mut out = String::with_capacity(s.len() + 2);
1130+ out.push('"');
1131+ for c in s.chars() {
1132+ match c {
1133+ '"' => out.push_str("\\\""),
1134+ '\\' => out.push_str("\\\\"),
1135+ '\n' => out.push_str("\\n"),
1136+ '\r' => out.push_str("\\r"),
1137+ '\t' => out.push_str("\\t"),
1138+ c if (c as u32) < 0x20 => out.push_str(&format!("\\u{:04x}", c as u32)),
1139+ c => out.push(c),
1140+ }
1141+ }
1142+ out.push('"');
1143+ out
1144+}
1145+
1146+/// Assemble every CSS block the document needs (font faces, custom
1147+/// properties, generated class rules, keyframes, and user CSS). Shared by
1148+/// full-page and partial output so both emit the same styles.
1149+fn build_element_css(doc: &Document, styles: &StyleCollector, dev: bool) -> String {
1150+ let mut element_css = String::new();
1151+
1152+ // @font-face rules, in declaration order
1153+ for (name, url) in &doc.font_faces {
1154+ let format_hint = if url.ends_with(".woff2") {
1155+ " format('woff2')"
1156+ } else if url.ends_with(".woff") {
1157+ " format('woff')"
1158+ } else if url.ends_with(".ttf") {
1159+ " format('truetype')"
1160+ } else if url.ends_with(".otf") {
1161+ " format('opentype')"
1162+ } else {
1163+ ""
1164+ };
1165+ if dev {
1166+ element_css.push_str(&format!(
1167+ "@font-face {{\n font-family: '{}';\n src: url('{}'){};\n font-display: swap;\n}}\n",
1168+ name, url, format_hint
1169+ ));
1170+ } else {
1171+ element_css.push_str(&format!(
1172+ "@font-face{{font-family:'{}';src:url('{}'){};font-display:swap}}",
1173+ name, url, format_hint
1174+ ));
1175+ }
1176+ }
1177+
1178+ // Collect all CSS custom properties (explicit `@let --name` / `@theme`
1179+ // tokens, plus any auto-extracted repeats) so they can be emitted in a
1180+ // single `:root` block below.
1181+ let mut root_vars: Vec<(String, String)> = Vec::new();
1182+ for (name, value) in &doc.css_vars {
1183+ root_vars.push((name.clone(), value.clone()));
1184+ }
1185+ for (name, value) in &doc.theme_tokens {
1186+ let css_name = format!("--{}", name);
1187+ if !root_vars.iter().any(|(n, _)| *n == css_name) {
1188+ root_vars.push((css_name, value.clone()));
1189+ }
1190+ }
1191+
1192+ let styles_css = styles.to_css_formatted(dev, uses_layer(doc));
1193+ // Fold literal values declared via `@theme` / `@let --name` back into
1194+ // `var(--name)` references so the generated CSS actually uses the
1195+ // custom properties emitted in `:root`.
1196+ let styles_css = substitute_css_vars(&styles_css, &root_vars);
1197+ // Further compress the CSS by auto-extracting any remaining literal
1198+ // values that appear often enough for `var(--hN)` references to come out
1199+ // shorter overall. Disabled in dev mode to keep the CSS readable.
1200+ let styles_css = if dev {
1201+ styles_css
1202+ } else {
1203+ let (new_css, auto_vars) = auto_extract_repeats(&styles_css, &root_vars);
1204+ root_vars.extend(auto_vars);
1205+ new_css
1206+ };
1207+
1208+ // Emit the :root block first so the cascade picks up the custom
9731209 // properties before the class rules consume them.
9741210 if !root_vars.is_empty() {
9751211 if dev {
@@ -992,121 +1228,93 @@ fn build_element_css(doc: &Document, styles: &StyleCollector, dev: bool) -> Stri
9921228
9931229 element_css.push_str(&styles_css);
9941230
995− // @style blocks (custom CSS)
996− for block in &doc.custom_css {
1231+ // @keyframes
1232+ for (name, kf_body) in &doc.keyframes {
1233+ if dev {
1234+ element_css.push_str(&format!("@keyframes {} {{\n{}\n}}\n", name, kf_body));
1235+ } else {
1236+ element_css.push_str(&format!("@keyframes {}{{{}}}", name, kf_body));
1237+ }
1238+ }
1239+
1240+ // Auto-inject skeleton keyframe if skeleton attribute is used
1241+ if element_css.contains("hl-skeleton") {
1242+ if dev {
1243+ element_css.push_str("@keyframes hl-skeleton {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n");
1244+ } else {
1245+ element_css.push_str("@keyframes hl-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}");
1246+ }
1247+ }
1248+
1249+ let push_block = |css: &mut String, block: &str| {
9971250 if dev {
998− element_css.push_str(block);
999− element_css.push('\n');
1251+ css.push_str(block);
1252+ css.push('\n');
10001253 } else {
1001− element_css.push_str(&compact_css(block));
1254+ let minified: String = block.lines().map(|l| l.trim()).collect::<Vec<_>>().join("");
1255+ css.push_str(&minified);
1256+ }
1257+ };
1258+
1259+ // @style and @scope blocks (custom CSS)
1260+ for block in doc.custom_css.iter().chain(&doc.scope_blocks) {
1261+ push_block(&mut element_css, block);
1262+ }
1263+
1264+ // @starting-style blocks
1265+ if !doc.starting_style_blocks.is_empty() {
1266+ element_css.push_str(if dev { "@starting-style {\n" } else { "@starting-style{" });
1267+ for block in &doc.starting_style_blocks {
1268+ push_block(&mut element_css, block);
10021269 }
1270+ element_css.push_str(if dev { "}\n" } else { "}" });
10031271 }
10041272
10051273 element_css
10061274}
10071275
1008−/// An `@style` body on one line: each line trimmed, and the lines joined with
1009−/// a space, so a value that goes on over two lines (`margin: 0` then `auto;`)
1010−/// keeps its words apart.
1011−fn compact_css(block: &str) -> String {
1012− block
1013− .lines()
1014− .map(str::trim)
1015− .filter(|l| !l.is_empty())
1016− .collect::<Vec<_>>()
1017− .join(" ")
1276+/// Generated class rules go in `@layer htmlang` unless the page has custom
1277+/// `@style` CSS (which is unlayered and would then always win).
1278+fn uses_layer(doc: &Document) -> bool {
1279+ doc.custom_css.is_empty()
10181280}
10191281
1020−/// htmlang's own elements: those with a generated class, or the class of a
1021−/// function's scoped `@style`. The reset's rules for elements are kept to
1022−/// them, so `@raw` and `@markdown` content, and the page a fragment is put
1023−/// into, keep their own.
1024−const OWN_ELEMENTS: &str = ":where([class^=\"hl-\"],[class*=\" hl-\"])";
1025−
1026−/// htmlang's cascade layers, from the one that loses to the one that wins:
1027−/// the reset; the defaults of each element's kind (a heading's `margin:0`,
1028−/// a column's `display:flex`); the styles an element gets from an
1029−/// element prefix on an element around it (`@td:padding 8`) and from a
1030−/// function's scoped `@style`; and the element's own styles. So a
1031−/// scope's styles win over the defaults, and what an element says about
1032−/// itself wins over both. CSS outside any layer (`@style`, `@raw`) wins
1033−/// over all of them.
1034−const LAYERS: [&str; 4] = ["hl-reset", "hl-kind", "hl-inside", "htmlang"];
1035−
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();
1047− if page {
1048− rules.push(if dev {
1049− "*, *::before, *::after { box-sizing: border-box; }".to_string()
1050− } else {
1051− "*,*::before,*::after{box-sizing:border-box}".to_string()
1052− });
1053− rules.push(if dev {
1054− "body { margin: 0; font-family: system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; min-height: 100dvh; }".to_string()
1055− } else {
1056− "body{margin:0;font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;min-height:100dvh}".to_string()
1057− });
1058− } else {
1059− rules.push(if dev {
1060− format!("{own}, {own}::before, {own}::after {{ box-sizing: border-box; }}")
1061− } else {
1062− format!("{own},{own}::before,{own}::after{{box-sizing:border-box}}")
1063− });
1064− }
1065− let hidden = "[hidden]:not([hidden=\"until-found\"]),dialog:not([open]):not(:popover-open),\
1066− [popover]:not(:popover-open):not(dialog[open])";
1067− rules.push(if dev {
1068− format!("{own}:where({hidden}) {{ display: none !important; }}")
1282+/// Built-in reset rules. When generated rules are layered, the reset must be
1283+/// layered too (in an earlier layer): unlayered CSS beats every layer, so an
1284+/// unlayered `a{color:inherit}` would override `@link [color red]`.
1285+fn reset_css(doc: &Document, dev: bool, focus_visible_css: &str, skip_link_css: &str) -> String {
1286+ let base = if dev {
1287+ "*, *::before, *::after { box-sizing: border-box; }\nbody { margin: 0; font-family: system-ui, -apple-system, sans-serif; }\nimg { display: block; }\na { text-decoration: none; color: inherit; }\n"
10691288 } else {
1070− format!("{own}:where({hidden}){{display:none!important}}")
1071− });
1072− let mut rules = rules.join(if dev { "\n" } else { "" });
1073− if dev {
1074− rules.push('\n');
1075− }
1076− rules.push_str(focus_visible_css);
1077− if dev {
1078− format!(
1079− "@layer {};\n@layer hl-reset {{\n{}}}\n",
1080− LAYERS.join(", "),
1081− rules
1082− )
1289+ "*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}"
1290+ };
1291+ let rules = format!("{}{}{}", base, focus_visible_css, skip_link_css);
1292+ if !uses_layer(doc) {
1293+ rules
1294+ } else if dev {
1295+ format!("@layer hl-reset, htmlang;\n@layer hl-reset {{\n{}}}\n", rules)
10831296 } else {
1084− format!("@layer {};@layer hl-reset{{{}}}", LAYERS.join(","), rules)
1297+ format!("@layer hl-reset,htmlang;@layer hl-reset{{{}}}", rules)
10851298 }
10861299}
10871300
10881301/// 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 {
1302+fn generate_partial_inner(doc: &Document, dev: bool) -> String {
10901303 let mut styles = StyleCollector::new();
10911304 let mut ctx = GenContext {
10921305 dev,
10931306 depth: 0,
1307+ image_count: 0,
10941308 has_interactive: false,
1095− in_text: false,
1096− flow: Flow::default(),
1097− in_picture: false,
1309+ has_defer: false,
10981310 };
10991311 let mut body = String::new();
11001312
1101− generate_children(&doc.nodes, None, &mut body, &mut styles, &mut ctx);
1102−
1103− let mut element_css = build_element_css(doc, &styles, dev);
1104− // htmlang's own elements get the reset's rules for elements (which
1105− // also puts htmlang's layers in order)
1106− if !styles.entries.is_empty() || !doc.scoped_css.is_empty() {
1107− element_css.insert_str(0, &reset_css(dev, false, ""));
1313+ for node in &doc.nodes {
1314+ generate_node(node, None, &mut body, &mut styles, &mut ctx);
11081315 }
1109− classes.extend(styles.classes());
1316+
1317+ let element_css = build_element_css(doc, &styles, dev);
11101318
11111319 if element_css.is_empty() {
11121320 body
@@ -1121,20 +1329,44 @@ fn generate_partial_inner(doc: &Document, dev: bool, classes: &mut Vec<Class>) -
11211329// Node generation
11221330// ---------------------------------------------------------------------------
11231331
1124−/// Write `node`, which is inside an element with the layout `parent`
1125−/// (`None` at the top of the page).
11261332fn generate_node(
11271333 node: &Node,
1128− parent: Option<Layout>,
1334+ parent_kind: Option<&ElementKind>,
11291335 out: &mut String,
11301336 styles: &mut StyleCollector,
11311337 ctx: &mut GenContext,
11321338) {
11331339 match node {
1134− Node::Element(elem) => generate_element(elem, parent, out, styles, ctx),
1340+ Node::Element(elem) => generate_element(elem, parent_kind, out, styles, ctx),
11351341 Node::Text(segments) => {
1136− // In a row, column or grid each line of text is a child
1137− let needs_wrap = parent.is_some_and(Layout::is_container);
1342+ let needs_wrap = matches!(
1343+ parent_kind,
1344+ Some(ElementKind::Row)
1345+ | Some(ElementKind::Column)
1346+ | Some(ElementKind::El)
1347+ | Some(ElementKind::Nav)
1348+ | Some(ElementKind::Header)
1349+ | Some(ElementKind::Footer)
1350+ | Some(ElementKind::Main)
1351+ | Some(ElementKind::Section)
1352+ | Some(ElementKind::Article)
1353+ | Some(ElementKind::Aside)
1354+ | Some(ElementKind::ListItem)
1355+ | Some(ElementKind::Form)
1356+ | Some(ElementKind::Details)
1357+ | Some(ElementKind::Figure)
1358+ | Some(ElementKind::Blockquote)
1359+ | Some(ElementKind::Dialog)
1360+ | Some(ElementKind::DefinitionList)
1361+ | Some(ElementKind::DefinitionDescription)
1362+ | Some(ElementKind::Fieldset)
1363+ | Some(ElementKind::Datalist)
1364+ | Some(ElementKind::Grid)
1365+ | Some(ElementKind::Stack)
1366+ | Some(ElementKind::Noscript)
1367+ | Some(ElementKind::Address)
1368+ | Some(ElementKind::Search)
1369+ );
11381370 if needs_wrap {
11391371 out.push_str(&ctx.indent());
11401372 out.push_str("<span>");
@@ -1153,191 +1385,209 @@ fn generate_node(
11531385 }
11541386}
11551387
1156−/// What goes between two things written one after the other in an element
1157−/// with this layout (`None`: the top of the page): text flows, so its lines
1158−/// and children are joined with a space; in HTML's own layout, and at the
1159−/// top of the page, two lines of text are separated by a line break (a
1160−/// space, except where whitespace is kept, as in `@pre`).
1161−fn separator(layout: Option<Layout>, previous_is_text: bool, next: &Node) -> Option<char> {
1162− match layout {
1163− Some(Layout::Text) => Some(' '),
1164− Some(Layout::Native) | None if previous_is_text && matches!(next, Node::Text(_)) => {
1165− Some('\n')
1166− }
1167− _ => None,
1168− }
1169−}
1388+/// HTML attributes that are passed through to the HTML tag rather than converted to CSS.
1389+const HTML_PASSTHROUGH_ATTRS: &[&str] = &[
1390+ "type",
1391+ "placeholder",
1392+ "name",
1393+ "value",
1394+ "disabled",
1395+ "required",
1396+ "checked",
1397+ "for",
1398+ "action",
1399+ "method",
1400+ "autocomplete",
1401+ "min",
1402+ "max",
1403+ "step",
1404+ "pattern",
1405+ "maxlength",
1406+ "rows",
1407+ "cols",
1408+ "multiple",
1409+ "alt",
1410+ "role",
1411+ "tabindex",
1412+ "title",
1413+ "autofocus",
1414+ // Media
1415+ "controls",
1416+ "autoplay",
1417+ "loop",
1418+ "muted",
1419+ "playsinline",
1420+ "poster",
1421+ "preload",
1422+ // Image optimization
1423+ "loading",
1424+ "decoding",
1425+ // Media src (explicit attribute form)
1426+ "src",
1427+ // New element attributes
1428+ "datetime",
1429+ "media",
1430+ "sizes",
1431+ "srcset",
1432+ "list",
1433+ // Details
1434+ "open",
1435+ // Form
1436+ "novalidate",
1437+ // Progress/Meter
1438+ "low",
1439+ "high",
1440+ "optimum",
1441+ // Table
1442+ "colspan",
1443+ "rowspan",
1444+ "scope",
1445+ // Popover API
1446+ "popover",
1447+ "popovertarget",
1448+ "popovertargetaction",
1449+ // Modern form/input hints
1450+ "inputmode",
1451+ "enterkeyhint",
1452+ // Performance hints
1453+ "fetchpriority",
1454+ "blocking",
1455+ // Global attrs
1456+ "translate",
1457+ "spellcheck",
1458+ // ARIA live regions
1459+ "aria-live",
1460+ "aria-atomic",
1461+ "aria-relevant",
1462+];
11701463
1171−/// Write the children of an element (or of a `@fragment`, which has no
1172−/// element of its own) laid out as `layout` (`None`: the top of the page).
1173−/// The first line of an element's text is its first child.
1174−fn generate_children(
1175− children: &[Node],
1176− layout: Option<Layout>,
1177− out: &mut String,
1178− styles: &mut StyleCollector,
1179− ctx: &mut GenContext,
1180−) {
1181− generate_run(children, layout, &mut None, out, styles, ctx);
1182−}
1464+/// Boolean HTML attributes (rendered without a value, e.g., `<input disabled>`).
1465+const BOOLEAN_HTML_ATTRS: &[&str] = &[
1466+ "disabled",
1467+ "required",
1468+ "checked",
1469+ "multiple",
1470+ "controls",
1471+ "autoplay",
1472+ "loop",
1473+ "muted",
1474+ "playsinline",
1475+ "open",
1476+ "novalidate",
1477+ "autofocus",
1478+ "defer",
1479+ "async",
1480+ "nomodule",
1481+ // Popover
1482+ "popover",
1483+];
11831484
1184−/// [`generate_children`], with `previous` saying whether what was written
1185−/// last was a line of text (`None`: nothing yet). A `@fragment`'s children
1186−/// are written as if they stood in its place, so its lines are separated
1187−/// from the lines around it like any other lines.
1188−fn generate_run(
1189− children: &[Node],
1190− layout: Option<Layout>,
1191− previous: &mut Option<bool>,
1192− out: &mut String,
1193− styles: &mut StyleCollector,
1194− ctx: &mut GenContext,
1195−) {
1196− for child in children {
1197− if let Node::Element(elem) = child
1198− && elem.kind == ElementKind::Fragment
1199− {
1200− generate_run(&elem.children, layout, previous, out, styles, ctx);
1485+fn emit_html_passthrough_attrs(out: &mut String, attrs: &[Attribute]) {
1486+ for attr in attrs {
1487+ let key = attr.key.as_str();
1488+ let is_passthrough = HTML_PASSTHROUGH_ATTRS.contains(&key)
1489+ || key.starts_with("aria-")
1490+ || key.starts_with("data-");
1491+ if !is_passthrough {
12011492 continue;
12021493 }
1203− let start = out.len();
1204− if let Some(previous_is_text) = *previous
1205− && let Some(sep) = separator(layout, previous_is_text, child)
1206− {
1207− out.push(sep);
1208− }
1209− let body = out.len();
1210− generate_node(child, layout, out, styles, ctx);
1211− // A child that writes nothing (an empty `@fragment`) takes no
1212− // separator either, so text never gets two spaces in a row
1213− if out.len() == body {
1214− out.truncate(start);
1215− continue;
1494+ if BOOLEAN_HTML_ATTRS.contains(&key) && attr.value.is_none() {
1495+ out.push(' ');
1496+ out.push_str(key);
1497+ } else if let Some(val) = &attr.value {
1498+ out.push(' ');
1499+ out.push_str(key);
1500+ out.push_str("=\"");
1501+ out.push_str(&html_escape(strip_string_quotes(val)));
1502+ out.push('"');
12161503 }
1217− *previous = Some(matches!(child, Node::Text(_)));
12181504 }
12191505}
12201506
1221−/// Emit the element's leading argument as its attribute (`@iframe URL` →
1222−/// `src="URL"`, `@form /submit` → `action="/submit"`, `@link /a` →
1223−/// `href="/a"`), first, before the class. `@image [inline] photo.png` puts
1224−/// the file itself into the page.
1225−fn emit_argument_attr(out: &mut String, elem: &Element, in_picture: bool) {
1226− let (Some(attr), Some(value)) = (elem.kind.leading_attribute(in_picture), &elem.argument)
1227− else {
1228− return;
1229− };
1230− // `@image [inline]`'s file is already a `data:` URI (see the parser)
1231− let value = html_escape(value);
1232− out.push(' ');
1233− out.push_str(attr);
1234− out.push_str("=\"");
1235− out.push_str(&value);
1236− out.push('"');
1237−}
1238−
1239−/// A file's bytes as a `data:` URI, its type from its extension.
1240−pub(crate) fn data_uri(path: &str, data: &[u8]) -> String {
1241− let mime = match path
1242− .rsplit('.')
1243− .next()
1244− .map(str::to_ascii_lowercase)
1245− .as_deref()
1246− {
1247− Some("png") => "image/png",
1248− Some("jpg" | "jpeg") => "image/jpeg",
1249− Some("gif") => "image/gif",
1250− Some("webp") => "image/webp",
1251− Some("avif") => "image/avif",
1252− Some("svg") => "image/svg+xml",
1253− Some("ico") => "image/x-icon",
1254− _ => "application/octet-stream",
1255− };
1256− format!("data:{};base64,{}", mime, base64_encode(data))
1257−}
1258−
1259−/// Emit HTML attributes: `key=value` ones (except `id` / `class`, which
1260−/// are emitted with the generated class) and flags like `required`.
1261−fn emit_html_attrs(out: &mut String, attrs: &[Attribute]) {
1262− for attr in html_attrs(attrs) {
1263− let key = attr.key.as_str();
1264− if key != "id" && key != "class" {
1265− push_html_attr(out, attr);
1266− }
1507+/// If the value is wrapped in a single pair of matching quotes (e.g.
1508+/// `"Avatar"`), return the inner content. Quotes act as source-level
1509+/// delimiters in the `.hl` syntax and shouldn't leak into HTML attribute
1510+/// values. Multi-quoted values like `"h h" "s m"` are left unchanged —
1511+/// those are real string tokens (used e.g. by CSS `grid-template-areas`).
1512+fn strip_string_quotes(val: &str) -> &str {
1513+ let bytes = val.as_bytes();
1514+ if bytes.len() < 2 {
1515+ return val;
12671516 }
1268−}
1269−
1270−/// The HTML attributes of `attrs`, `key=value` ones and flags, each name
1271−/// once: the later one wins, as a style does. (Of two attributes with one
1272−/// name, the browser keeps the first, so a bundle's attribute or a
1273−/// function's own would win over one written after it.)
1274−fn html_attrs(attrs: &[Attribute]) -> impl Iterator<Item = &Attribute> {
1275− let is_html =
1276− |a: &Attribute| a.html || (a.value.is_none() && crate::vocab::is_html_flag(&a.key));
1277− attrs.iter().enumerate().filter_map(move |(i, attr)| {
1278− let later = attrs[i + 1..]
1279− .iter()
1280− .any(|other| is_html(other) && other.key == attr.key);
1281− (is_html(attr) && !later).then_some(attr)
1282− })
1283−}
1284−
1285−/// ` key="value"`, or ` key` for a flag.
1286−fn push_html_attr(out: &mut String, attr: &Attribute) {
1287− out.push(' ');
1288− out.push_str(&attr.key);
1289− if attr.html {
1290− out.push_str("=\"");
1291− // Quoted text has already lost its quotes (see parser.rs)
1292− out.push_str(&html_escape(attr.value.as_deref().unwrap_or("")));
1293− out.push('"');
1517+ let first = bytes[0];
1518+ let last = bytes[bytes.len() - 1];
1519+ if (first == b'"' && last == b'"') || (first == b'\'' && last == b'\'') {
1520+ let inner = &val[1..val.len() - 1];
1521+ if !inner.as_bytes().contains(&first) {
1522+ return inner;
1523+ }
12941524 }
1525+ val
12951526}
12961527
12971528// True if any direct child is `@in-front` or `@behind`. Such children render
12981529// as absolutely positioned overlays, so the parent automatically becomes a
12991530// positioning context (position:relative + isolation:isolate).
13001531fn has_overlay_children(elem: &Element) -> bool {
1301− holds_overlays(&elem.children)
1302−}
1303−
1304−fn holds_overlays(children: &[Node]) -> bool {
1305− children.iter().any(|child| {
1532+ elem.children.iter().any(|child| {
13061533 matches!(
13071534 child,
1308− Node::Element(e) if e.kind.is_tag("in-front") || e.kind.is_tag("behind")
1535+ Node::Element(e) if matches!(e.kind, ElementKind::InFront | ElementKind::Behind)
13091536 )
13101537 })
13111538}
13121539
13131540fn generate_element(
13141541 elem: &Element,
1315− parent: Option<Layout>,
1542+ parent_kind: Option<&ElementKind>,
13161543 out: &mut String,
13171544 styles: &mut StyleCollector,
13181545 ctx: &mut GenContext,
13191546) {
13201547 // Self-closing elements
1321− if elem.kind.layout() == Layout::Void {
1322− generate_self_closing(elem, parent, out, styles, ctx);
1548+ if matches!(
1549+ elem.kind,
1550+ ElementKind::Image
1551+ | ElementKind::Input
1552+ | ElementKind::HorizontalRule
1553+ | ElementKind::Source
1554+ | ElementKind::Spacer
1555+ ) {
1556+ generate_self_closing(elem, parent_kind, out, styles, ctx);
13231557 return;
13241558 }
1325− // A verbatim element (@script) writes its body as it is, with no HTML
1326− // escaping; it isn't shown, so it has no class (its styles are an error)
1327− if elem.kind.is_verbatim() {
1328− let tag = elem.kind.spec().map_or("script", |spec| spec.html);
1559+ // @script renders as <script> with raw body content (no HTML escaping)
1560+ if elem.kind == ElementKind::Script {
13291561 out.push_str(&ctx.indent());
1330− out.push('<');
1331− out.push_str(tag);
1332− emit_argument_attr(out, elem, false);
1333− let (id, class) = extract_id_class(&elem.attrs);
1334− for (key, value) in [("id", id), ("class", class)] {
1335− if let Some(value) = value {
1336− out.push_str(&format!(" {}=\"{}\"", key, html_escape(&value)));
1562+ out.push_str("<script");
1563+ // Pass through src, type, defer, async, etc.
1564+ for attr in &elem.attrs {
1565+ let key = attr.key.as_str();
1566+ if matches!(
1567+ key,
1568+ "src"
1569+ | "type"
1570+ | "defer"
1571+ | "async"
1572+ | "crossorigin"
1573+ | "integrity"
1574+ | "nomodule"
1575+ | "id"
1576+ ) {
1577+ if let Some(val) = &attr.value {
1578+ out.push(' ');
1579+ out.push_str(key);
1580+ out.push_str("=\"");
1581+ out.push_str(&html_escape(val));
1582+ out.push('"');
1583+ } else {
1584+ out.push(' ');
1585+ out.push_str(key);
1586+ }
13371587 }
13381588 }
1339− emit_html_attrs(out, &elem.attrs);
13401589 out.push('>');
1590+ // Children are raw JS code, not HTML
13411591 for child in &elem.children {
13421592 match child {
13431593 Node::Text(segments) => {
@@ -1351,10 +1601,46 @@ fn generate_element(
13511601 _ => {}
13521602 }
13531603 }
1354− out.push_str("</");
1355− out.push_str(tag);
1604+ out.push_str("</script>");
1605+ out.push_str(ctx.nl());
1606+ return;
1607+ }
1608+ // @breadcrumb generates semantic <nav aria-label="breadcrumb"><ol>...</ol></nav>
1609+ if elem.kind == ElementKind::Breadcrumb {
1610+ let gen_class = compute_class(&elem.attrs, &elem.kind, parent_kind, styles, false);
1611+ let (id, user_class) = extract_id_class(&elem.attrs);
1612+ out.push_str(&ctx.indent());
1613+ out.push_str("<nav aria-label=\"breadcrumb\"");
1614+ emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1615+ if let Some(id) = id {
1616+ out.push_str(" id=\"");
1617+ out.push_str(&html_escape(&id));
1618+ out.push('"');
1619+ }
13561620 out.push('>');
13571621 out.push_str(ctx.nl());
1622+ ctx.depth += 1;
1623+ out.push_str(&ctx.indent());
1624+ out.push_str("<ol>");
1625+ out.push_str(ctx.nl());
1626+ ctx.depth += 1;
1627+ for child in &elem.children {
1628+ out.push_str(&ctx.indent());
1629+ out.push_str("<li>");
1630+ let mut buf = String::new();
1631+ generate_node(child, Some(&elem.kind), &mut buf, styles, ctx);
1632+ out.push_str(buf.trim());
1633+ out.push_str("</li>");
1634+ out.push_str(ctx.nl());
1635+ }
1636+ ctx.depth -= 1;
1637+ out.push_str(&ctx.indent());
1638+ out.push_str("</ol>");
1639+ out.push_str(ctx.nl());
1640+ ctx.depth -= 1;
1641+ out.push_str(&ctx.indent());
1642+ out.push_str("</nav>");
1643+ out.push_str(ctx.nl());
13581644 return;
13591645 }
13601646 if elem.kind == ElementKind::Children {
@@ -1364,38 +1650,209 @@ fn generate_element(
13641650 return;
13651651 }
13661652 if elem.kind == ElementKind::Fragment {
1367− // Render children without a wrapper element, as if they were
1368− // written where the fragment is
1369− generate_children(&elem.children, parent, out, styles, ctx);
1653+ // Render children without a wrapper element
1654+ for child in &elem.children {
1655+ generate_node(child, parent_kind, out, styles, ctx);
1656+ }
13701657 return;
13711658 }
13721659
1373− let mut own = Flow::of(elem);
13741660 let tag = match &elem.kind {
1375− ElementKind::Row | ElementKind::El => "div",
1661+ ElementKind::Row
1662+ | ElementKind::Column
1663+ | ElementKind::El
1664+ | ElementKind::Grid
1665+ | ElementKind::Stack
1666+ | ElementKind::InFront
1667+ | ElementKind::Behind => "div",
13761668 ElementKind::Text => "span",
13771669 ElementKind::Paragraph => "p",
13781670 ElementKind::Link => "a",
1379− ElementKind::Tag(spec) => spec.html,
1671+ ElementKind::Button => "button",
1672+ ElementKind::Select => "select",
1673+ ElementKind::Textarea => "textarea",
1674+ ElementKind::Option => "option",
1675+ ElementKind::Label => "label",
1676+ // Semantic elements
1677+ ElementKind::Nav => "nav",
1678+ ElementKind::Header => "header",
1679+ ElementKind::Footer => "footer",
1680+ ElementKind::Main => "main",
1681+ ElementKind::Section => "section",
1682+ ElementKind::Article => "article",
1683+ ElementKind::Aside => "aside",
1684+ // List
1685+ ElementKind::List => {
1686+ if elem.attrs.iter().any(|a| a.key == "ordered") {
1687+ "ol"
1688+ } else {
1689+ "ul"
1690+ }
1691+ }
1692+ ElementKind::ListItem => "li",
1693+ // Table
1694+ ElementKind::Table => "table",
1695+ ElementKind::TableHead => "thead",
1696+ ElementKind::TableBody => "tbody",
1697+ ElementKind::TableRow => "tr",
1698+ ElementKind::TableCell => "td",
1699+ ElementKind::TableHeaderCell => "th",
1700+ // Media
1701+ ElementKind::Video => "video",
1702+ ElementKind::Audio => "audio",
1703+ // Additional semantic elements
1704+ ElementKind::Form => "form",
1705+ ElementKind::Details => "details",
1706+ ElementKind::Summary => "summary",
1707+ ElementKind::Blockquote => "blockquote",
1708+ ElementKind::Cite => "cite",
1709+ ElementKind::Code => "code",
1710+ ElementKind::Pre => "pre",
1711+ ElementKind::Figure => "figure",
1712+ ElementKind::FigCaption => "figcaption",
1713+ ElementKind::Progress => "progress",
1714+ ElementKind::Meter => "meter",
1715+ // New elements
1716+ ElementKind::Dialog => "dialog",
1717+ ElementKind::DefinitionList => "dl",
1718+ ElementKind::DefinitionTerm => "dt",
1719+ ElementKind::DefinitionDescription => "dd",
1720+ ElementKind::Fieldset => "fieldset",
1721+ ElementKind::Legend => "legend",
1722+ ElementKind::Picture => "picture",
1723+ ElementKind::Time => "time",
1724+ ElementKind::Mark => "mark",
1725+ ElementKind::Kbd => "kbd",
1726+ ElementKind::Abbr => "abbr",
1727+ ElementKind::Datalist => "datalist",
1728+ ElementKind::Iframe => "iframe",
1729+ ElementKind::Output => "output",
1730+ ElementKind::Canvas => "canvas",
1731+ ElementKind::Badge => "span",
1732+ ElementKind::Tooltip => "span",
1733+ ElementKind::Avatar => "div",
1734+ ElementKind::Carousel => "div",
1735+ ElementKind::Chip => "span",
1736+ ElementKind::Tag => "span",
1737+ ElementKind::Noscript => "noscript",
1738+ ElementKind::Address => "address",
1739+ ElementKind::Search => "search",
1740+ // Heading elements
1741+ ElementKind::H1 => "h1",
1742+ ElementKind::H2 => "h2",
1743+ ElementKind::H3 => "h3",
1744+ ElementKind::H4 => "h4",
1745+ ElementKind::H5 => "h5",
1746+ ElementKind::H6 => "h6",
1747+ ElementKind::Image
1748+ | ElementKind::Input
1749+ | ElementKind::HorizontalRule
1750+ | ElementKind::Children
1751+ | ElementKind::Slot(_)
1752+ | ElementKind::Fragment
1753+ | ElementKind::Source
1754+ | ElementKind::Spacer
1755+ | ElementKind::Script
1756+ | ElementKind::Breadcrumb => unreachable!(),
1757+ };
1758+
1759+ let kind_label = match elem.kind {
1760+ ElementKind::Row => "row",
1761+ ElementKind::Column => "column",
1762+ ElementKind::El => "el",
1763+ ElementKind::Text => "text",
1764+ ElementKind::Paragraph => "paragraph",
1765+ ElementKind::Link => "link",
1766+ ElementKind::Button => "button",
1767+ ElementKind::Select => "select",
1768+ ElementKind::Textarea => "textarea",
1769+ ElementKind::Option => "option",
1770+ ElementKind::Label => "label",
1771+ ElementKind::Nav => "nav",
1772+ ElementKind::Header => "header",
1773+ ElementKind::Footer => "footer",
1774+ ElementKind::Main => "main",
1775+ ElementKind::Section => "section",
1776+ ElementKind::Article => "article",
1777+ ElementKind::Aside => "aside",
1778+ ElementKind::List => "list",
1779+ ElementKind::ListItem => "item",
1780+ ElementKind::Table => "table",
1781+ ElementKind::TableHead => "thead",
1782+ ElementKind::TableBody => "tbody",
1783+ ElementKind::TableRow => "tr",
1784+ ElementKind::TableCell => "td",
1785+ ElementKind::TableHeaderCell => "th",
1786+ ElementKind::Video => "video",
1787+ ElementKind::Audio => "audio",
1788+ ElementKind::Form => "form",
1789+ ElementKind::Details => "details",
1790+ ElementKind::Summary => "summary",
1791+ ElementKind::Blockquote => "blockquote",
1792+ ElementKind::Cite => "cite",
1793+ ElementKind::Code => "code",
1794+ ElementKind::Pre => "pre",
1795+ ElementKind::Figure => "figure",
1796+ ElementKind::FigCaption => "figcaption",
1797+ ElementKind::Fragment => "fragment",
1798+ ElementKind::Dialog => "dialog",
1799+ ElementKind::DefinitionList => "dl",
1800+ ElementKind::DefinitionTerm => "dt",
1801+ ElementKind::DefinitionDescription => "dd",
1802+ ElementKind::Fieldset => "fieldset",
1803+ ElementKind::Legend => "legend",
1804+ ElementKind::Picture => "picture",
1805+ ElementKind::Time => "time",
1806+ ElementKind::Mark => "mark",
1807+ ElementKind::Kbd => "kbd",
1808+ ElementKind::Abbr => "abbr",
1809+ ElementKind::Datalist => "datalist",
1810+ ElementKind::Iframe => "iframe",
1811+ ElementKind::Output => "output",
1812+ ElementKind::Canvas => "canvas",
1813+ ElementKind::Grid => "grid",
1814+ ElementKind::Stack => "stack",
1815+ ElementKind::Badge => "badge",
1816+ ElementKind::Tooltip => "tooltip",
1817+ ElementKind::Avatar => "avatar",
1818+ ElementKind::Carousel => "carousel",
1819+ ElementKind::Chip => "chip",
1820+ ElementKind::Tag => "tag",
1821+ ElementKind::Noscript => "noscript",
1822+ ElementKind::Address => "address",
1823+ ElementKind::Search => "search",
1824+ ElementKind::InFront => "in-front",
1825+ ElementKind::Behind => "behind",
1826+ ElementKind::H1 => "h1",
1827+ ElementKind::H2 => "h2",
1828+ ElementKind::H3 => "h3",
1829+ ElementKind::H4 => "h4",
1830+ ElementKind::H5 => "h5",
1831+ ElementKind::H6 => "h6",
13801832 _ => "",
13811833 };
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();
13881834
13891835 // Track interactive elements for focus-visible CSS
1390− if elem.kind == ElementKind::Link
1391− || matches!(kind_label, "button" | "input" | "select" | "textarea")
1392− {
1836+ if matches!(
1837+ elem.kind,
1838+ ElementKind::Link
1839+ | ElementKind::Button
1840+ | ElementKind::Input
1841+ | ElementKind::Select
1842+ | ElementKind::Textarea
1843+ ) {
13931844 ctx.has_interactive = true;
13941845 }
13951846
13961847 // Compute CSS for each state and get a class name
1397− let gen_class = element_class(elem, &Site::new(elem, parent, &ctx.flow), styles);
1398− own.class = gen_class.clone();
1848+ let overlay_children = has_overlay_children(elem);
1849+ let gen_class = compute_class(
1850+ &elem.attrs,
1851+ &elem.kind,
1852+ parent_kind,
1853+ styles,
1854+ overlay_children,
1855+ );
13991856 let (id, user_class) = extract_id_class(&elem.attrs);
14001857
14011858 if ctx.dev && elem.line_num > 0 {
@@ -1409,48 +1866,163 @@ fn generate_element(
14091866 out.push('<');
14101867 out.push_str(tag);
14111868
1412− emit_argument_attr(out, elem, ctx.in_picture);
1869+ // @main gets id="hl-main" for skip-to-content link (unless user set an id)
1870+ if elem.kind == ElementKind::Main && id.is_none() {
1871+ out.push_str(" id=\"hl-main\"");
1872+ }
14131873
1414− emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1874+ if elem.kind == ElementKind::Link
1875+ && let Some(url) = &elem.argument
1876+ {
1877+ out.push_str(" href=\"");
1878+ out.push_str(&html_escape(url));
1879+ out.push('"');
1880+ // Auto rel="noopener noreferrer" and target="_blank" for external links
1881+ let is_external = url.starts_with("http://") || url.starts_with("https://");
1882+ if is_external {
1883+ let has_rel = elem.attrs.iter().any(|a| a.key == "rel");
1884+ let has_target = elem.attrs.iter().any(|a| a.key == "target");
1885+ if !has_rel {
1886+ out.push_str(" rel=\"noopener noreferrer\"");
1887+ }
1888+ if !has_target {
1889+ out.push_str(" target=\"_blank\"");
1890+ }
1891+ }
1892+ }
14151893
1416− if let Some(id) = id {
1417− out.push_str(" id=\"");
1418− out.push_str(&html_escape(&id));
1894+ // Video/Audio src
1895+ if matches!(elem.kind, ElementKind::Video | ElementKind::Audio)
1896+ && let Some(src) = &elem.argument
1897+ {
1898+ out.push_str(" src=\"");
1899+ out.push_str(&html_escape(src));
14191900 out.push('"');
14201901 }
14211902
1422− emit_html_attrs(out, &elem.attrs);
1903+ // Form action
1904+ if elem.kind == ElementKind::Form
1905+ && let Some(action) = &elem.argument
1906+ {
1907+ out.push_str(" action=\"");
1908+ out.push_str(&html_escape(action));
1909+ out.push('"');
1910+ }
14231911
1424− // Source map attributes in dev mode
1425− if ctx.dev && elem.line_num > 0 {
1426− out.push_str(&format!(
1427− " data-hl-line=\"{}\" data-hl-el=\"{}\"",
1428− elem.line_num, kind_label
1429− ));
1912+ // Iframe src
1913+ if elem.kind == ElementKind::Iframe
1914+ && let Some(src) = &elem.argument
1915+ {
1916+ out.push_str(" src=\"");
1917+ out.push_str(&html_escape(src));
1918+ out.push('"');
14301919 }
14311920
1432− 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");
1921+ // Tooltip title
1922+ if elem.kind == ElementKind::Tooltip
1923+ && let Some(text) = &elem.argument
1924+ {
1925+ out.push_str(" title=\"");
1926+ out.push_str(&html_escape(text));
1927+ out.push('"');
1928+ }
1929+
1930+ // Critical CSS: inline styles directly instead of using a class
1931+ let is_critical = elem.attrs.iter().any(|a| a.key == "critical");
1932+ if is_critical {
1933+ let inline_css = attrs_to_css(&elem.attrs, "", &elem.kind, parent_kind, overlay_children);
1934+ if !inline_css.is_empty() {
1935+ out.push_str(" style=\"");
1936+ out.push_str(&html_escape(&inline_css));
1937+ out.push('"');
1938+ }
1939+ // Still use class for non-base styles (pseudo, responsive, etc.)
1940+ if gen_class.as_deref().is_some_and(|c| !c.is_empty()) {
1941+ emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1942+ } else if let Some(ref uc) = user_class {
1943+ emit_class_attr(out, None, Some(uc));
1944+ }
1945+ } else {
1946+ emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
1947+ }
1948+
1949+ if let Some(id) = id {
1950+ out.push_str(" id=\"");
1951+ out.push_str(&html_escape(&id));
1952+ out.push('"');
1953+ }
1954+
1955+ emit_html_passthrough_attrs(out, &elem.attrs);
1956+
1957+ // Source map attributes in dev mode
1958+ if ctx.dev && elem.line_num > 0 {
1959+ out.push_str(&format!(
1960+ " data-hl-line=\"{}\" data-hl-el=\"{}\"",
1961+ elem.line_num, kind_label
1962+ ));
1963+ }
1964+
1965+ out.push('>');
14381966 out.push_str(ctx.nl());
14391967
1440− let layout = elem.kind.layout();
1968+ // Inline text argument
1969+ if matches!(
1970+ elem.kind,
1971+ ElementKind::Text
1972+ | ElementKind::Button
1973+ | ElementKind::Label
1974+ | ElementKind::Option
1975+ | ElementKind::Textarea
1976+ | ElementKind::ListItem
1977+ | ElementKind::TableCell
1978+ | ElementKind::TableHeaderCell
1979+ | ElementKind::Summary
1980+ | ElementKind::Cite
1981+ | ElementKind::Code
1982+ | ElementKind::FigCaption
1983+ | ElementKind::Legend
1984+ | ElementKind::DefinitionTerm
1985+ | ElementKind::Mark
1986+ | ElementKind::Kbd
1987+ | ElementKind::Abbr
1988+ | ElementKind::Time
1989+ | ElementKind::DefinitionDescription
1990+ | ElementKind::Badge
1991+ | ElementKind::Tooltip
1992+ | ElementKind::Chip
1993+ | ElementKind::Tag
1994+ | ElementKind::H1
1995+ | ElementKind::H2
1996+ | ElementKind::H3
1997+ | ElementKind::H4
1998+ | ElementKind::H5
1999+ | ElementKind::H6
2000+ ) && let Some(text) = &elem.argument
2001+ {
2002+ out.push_str(&html_escape(text));
2003+ }
2004+
2005+ // Children
14412006 ctx.depth += 1;
1442− let outer_in_text = ctx.in_text;
1443− ctx.in_text = in_text || layout == Layout::Text;
1444− let outer_flow = std::mem::replace(&mut ctx.flow, own);
1445− let outer_picture = std::mem::replace(&mut ctx.in_picture, elem.kind.is_tag("picture"));
1446− generate_children(&elem.children, Some(layout), out, styles, ctx);
1447− ctx.in_picture = outer_picture;
1448− ctx.flow = outer_flow;
1449− ctx.in_text = outer_in_text;
2007+ let is_paragraph = matches!(
2008+ elem.kind,
2009+ ElementKind::Paragraph
2010+ | ElementKind::H1
2011+ | ElementKind::H2
2012+ | ElementKind::H3
2013+ | ElementKind::H4
2014+ | ElementKind::H5
2015+ | ElementKind::H6
2016+ );
2017+ for (i, child) in elem.children.iter().enumerate() {
2018+ generate_node(child, Some(&elem.kind), out, styles, ctx);
2019+ if is_paragraph && i < elem.children.len() - 1 {
2020+ out.push(' ');
2021+ }
2022+ }
14502023 ctx.depth -= 1;
14512024
14522025 out.push_str(&ctx.indent());
1453− ctx.dev = outer_dev;
14542026 out.push_str("</");
14552027 out.push_str(tag);
14562028 out.push('>');
@@ -1459,18 +2031,21 @@ fn generate_element(
14592031
14602032fn generate_self_closing(
14612033 elem: &Element,
1462− parent: Option<Layout>,
2034+ parent_kind: Option<&ElementKind>,
14632035 out: &mut String,
14642036 styles: &mut StyleCollector,
14652037 ctx: &mut GenContext,
14662038) {
1467− let gen_class = element_class(elem, &Site::new(elem, parent, &ctx.flow), styles);
2039+ let gen_class = compute_class(&elem.attrs, &elem.kind, parent_kind, styles, false);
14682040 let (id, user_class) = extract_id_class(&elem.attrs);
14692041
1470− let (tag, kind_label) = match &elem.kind {
2042+ let (tag, kind_label) = match elem.kind {
14712043 ElementKind::Image => ("img", "image"),
1472− ElementKind::Tag(spec) => (spec.html, spec.name),
1473− _ => unreachable!("not a void element: {:?}", elem.kind),
2044+ ElementKind::Input => ("input", "input"),
2045+ ElementKind::HorizontalRule => ("hr", "hr"),
2046+ ElementKind::Source => ("source", "source"),
2047+ ElementKind::Spacer => ("div", "spacer"),
2048+ _ => unreachable!(),
14742049 };
14752050
14762051 if ctx.dev && elem.line_num > 0 {
@@ -1483,7 +2058,43 @@ fn generate_self_closing(
14832058 out.push_str(&ctx.indent());
14842059 out.push('<');
14852060 out.push_str(tag);
1486− emit_argument_attr(out, elem, ctx.in_picture);
2061+
2062+ // Image src (with optional non-SVG base64 inlining)
2063+ if elem.kind == ElementKind::Image {
2064+ let src = elem.argument.as_deref().unwrap_or("");
2065+ let is_inline = elem.attrs.iter().any(|a| a.key == "inline");
2066+ if is_inline && !src.is_empty() && !src.ends_with(".svg") {
2067+ let mime = if src.ends_with(".png") {
2068+ "image/png"
2069+ } else if src.ends_with(".jpg") || src.ends_with(".jpeg") {
2070+ "image/jpeg"
2071+ } else if src.ends_with(".gif") {
2072+ "image/gif"
2073+ } else if src.ends_with(".webp") {
2074+ "image/webp"
2075+ } else if src.ends_with(".avif") {
2076+ "image/avif"
2077+ } else {
2078+ "application/octet-stream"
2079+ };
2080+ if let Ok(data) = std::fs::read(src) {
2081+ let b64 = base64_encode(&data);
2082+ out.push_str(" src=\"data:");
2083+ out.push_str(mime);
2084+ out.push_str(";base64,");
2085+ out.push_str(&b64);
2086+ out.push('"');
2087+ } else {
2088+ out.push_str(" src=\"");
2089+ out.push_str(&html_escape(src));
2090+ out.push('"');
2091+ }
2092+ } else {
2093+ out.push_str(" src=\"");
2094+ out.push_str(&html_escape(src));
2095+ out.push('"');
2096+ }
2097+ }
14872098
14882099 emit_class_attr(out, gen_class.as_deref(), user_class.as_deref());
14892100
@@ -1493,7 +2104,7 @@ fn generate_self_closing(
14932104 out.push('"');
14942105 }
14952106
1496− emit_html_attrs(out, &elem.attrs);
2107+ emit_html_passthrough_attrs(out, &elem.attrs);
14972108
14982109 // Source map attributes in dev mode (self-closing)
14992110 if ctx.dev && elem.line_num > 0 {
@@ -1503,6 +2114,93 @@ fn generate_self_closing(
15032114 ));
15042115 }
15052116
2117+ // Image optimization: auto-add loading="lazy" and decoding="async"
2118+ if elem.kind == ElementKind::Image {
2119+ // SVG inlining: @image [inline] logo.svg
2120+ if elem.attrs.iter().any(|a| a.key == "inline")
2121+ && let Some(src) = &elem.argument
2122+ && src.ends_with(".svg")
2123+ && let Ok(svg_content) = std::fs::read_to_string(src)
2124+ {
2125+ // Close the tag we opened, then emit inline SVG instead
2126+ out.truncate(out.rfind('<').unwrap_or(0));
2127+ out.push_str(&ctx.indent());
2128+ out.push_str(svg_content.trim());
2129+ out.push_str(ctx.nl());
2130+ return;
2131+ }
2132+ // Responsive srcset: @image photo.jpg [responsive 400 800 1200]
2133+ let responsive_attr = elem.attrs.iter().find(|a| a.key == "responsive");
2134+ if let Some(resp) = responsive_attr
2135+ && let Some(ref sizes_str) = resp.value
2136+ {
2137+ let widths: Vec<&str> = sizes_str.split_whitespace().collect();
2138+ if !widths.is_empty() {
2139+ let src = elem.argument.as_deref().unwrap_or("");
2140+ if !src.is_empty() {
2141+ // Generate srcset with width descriptors
2142+ // Convention: file-{width}.ext (e.g., photo-400.jpg)
2143+ let dot_pos = src.rfind('.').unwrap_or(src.len());
2144+ let base = &src[..dot_pos];
2145+ let ext = &src[dot_pos..];
2146+ let mut srcset_parts = Vec::new();
2147+ for w in &widths {
2148+ srcset_parts.push(format!("{}-{}{} {}w", base, w, ext, w));
2149+ }
2150+ out.push_str(" srcset=\"");
2151+ out.push_str(&srcset_parts.join(", "));
2152+ out.push('"');
2153+ // Generate sizes attribute
2154+ let max_width = widths.last().unwrap_or(&"100vw");
2155+ out.push_str(&format!(
2156+ " sizes=\"(max-width: {}px) 100vw, {}px\"",
2157+ max_width, max_width
2158+ ));
2159+ }
2160+ }
2161+ }
2162+
2163+ // Auto image dimensions: read local image file to inject width/height + aspect-ratio
2164+ let has_width = elem.attrs.iter().any(|a| a.key == "width");
2165+ let has_height = elem.attrs.iter().any(|a| a.key == "height");
2166+ if (!has_width || !has_height)
2167+ && let Some(ref src) = elem.argument
2168+ && !src.starts_with("http://")
2169+ && !src.starts_with("https://")
2170+ && !src.starts_with("data:")
2171+ && let Some((w, h)) = read_image_dimensions(src)
2172+ {
2173+ // Intrinsic size attributes only when neither dimension is set in
2174+ // CSS; with one CSS dimension, a leftover intrinsic attribute for
2175+ // the other would distort the image (200 wide but 1000 tall).
2176+ if !has_width && !has_height {
2177+ out.push_str(&format!(" width=\"{}\" height=\"{}\"", w, h));
2178+ }
2179+ // Auto aspect-ratio to prevent CLS
2180+ if !elem.attrs.iter().any(|a| a.key == "aspect-ratio") {
2181+ out.push_str(&format!(" style=\"aspect-ratio:{}/{}\"", w, h));
2182+ }
2183+ }
2184+
2185+ // Smart image loading: first 3 images get fetchpriority="high" (above the fold),
2186+ // subsequent images get loading="lazy" + decoding="async"
2187+ ctx.image_count += 1;
2188+ if ctx.image_count <= 3 {
2189+ // Above-the-fold: eager loading with high priority
2190+ if !elem.attrs.iter().any(|a| a.key == "fetchpriority") {
2191+ out.push_str(" fetchpriority=\"high\"");
2192+ }
2193+ } else {
2194+ // Below-the-fold: lazy loading
2195+ if !elem.attrs.iter().any(|a| a.key == "loading") {
2196+ out.push_str(" loading=\"lazy\"");
2197+ }
2198+ if !elem.attrs.iter().any(|a| a.key == "decoding") {
2199+ out.push_str(" decoding=\"async\"");
2200+ }
2201+ }
2202+ }
2203+
15062204 out.push('>');
15072205 out.push_str(ctx.nl());
15082206}
@@ -1518,10 +2216,7 @@ fn generate_text_segments(
15182216 TextSegment::Plain(text) => out.push_str(&html_escape(text)),
15192217 TextSegment::Inline(elem) => {
15202218 let mut buf = String::new();
1521− // An element inside a line of text is in text
1522− let outer_flow = std::mem::take(&mut ctx.flow);
1523− generate_element(elem, Some(Layout::Text), &mut buf, styles, ctx);
1524− ctx.flow = outer_flow;
2219+ generate_element(elem, None, &mut buf, styles, ctx);
15252220 out.push_str(buf.trim_end());
15262221 }
15272222 }
@@ -1534,97 +2229,143 @@ fn generate_text_segments(
15342229
15352230fn compute_class(
15362231 attrs: &[Attribute],
1537− site: &Site,
2232+ kind: &ElementKind,
2233+ parent_kind: Option<&ElementKind>,
15382234 styles: &mut StyleCollector,
1539− distinct: String,
2235+ has_overlay_children: bool,
15402236) -> Option<String> {
1541− // Every condition an attribute is under, and none
1542− let mut conditions = vec![Condition::default()];
1543− for attr in attrs.iter().filter(|a| !a.html) {
1544− let (condition, _) = Condition::of(&attr.key);
1545− if !conditions.contains(&condition) {
1546− conditions.push(condition);
2237+ let base = attrs_to_css(attrs, "", kind, parent_kind, has_overlay_children);
2238+
2239+ // Collect pseudo-state overrides
2240+ let mut pseudo = Vec::new();
2241+ for &(prefix, selector) in PSEUDO_PREFIXES {
2242+ let css = attrs_to_css(attrs, prefix, kind, parent_kind, has_overlay_children);
2243+ if !css.is_empty() {
2244+ pseudo.push((selector.to_string(), css));
15472245 }
15482246 }
1549− // Dedupe: if a property is declared twice within a single rule, keep only
1550− // the last occurrence.
1551− let rules: Vec<(Condition, String)> = conditions
1552− .into_iter()
1553− .map(|condition| {
1554− let css = dedupe_declarations(&attrs_to_css(attrs, &condition, site));
1555− (condition, css)
1556− })
1557− .collect();
1558− // The kind's defaults, less what the element sets itself (a user
1559− // `[list-style disc]` wins over the default `list-style:none` anyway,
1560− // so there is no need to ship both)
1561− let own = rules
1562− .iter()
1563− .find(|(condition, _)| *condition == Condition::default())
1564− .map_or("", |(_, css)| css.as_str());
1565− let own: Vec<&str> = declarations(own).map(|(name, _)| name).collect();
1566− let defaults: String = declarations(&dedupe_declarations(&default_css(site)))
1567− .filter(|(name, _)| !own.contains(name))
1568− .map(|(_, declaration)| declaration)
1569− .collect();
1570− styles.get_class(defaults, rules, distinct)
1571−}
15722247
1573−/// The defaults of an element's kind where it is: an overlay's positioning
1574−/// context, its layout, and its kind's own CSS (a heading's `margin:0`).
1575−fn default_css(site: &Site) -> String {
1576− let mut css = String::new();
1577− // Elements with @in-front / @behind children become positioning
1578− // contexts
1579− if site.has_overlay_children {
1580− css.push_str("position:relative;isolation:isolate;");
1581− }
1582− if !site.root {
1583− css.push_str(layout_css(site.kind.layout(), site.inline));
2248+ // Auto-add ::-webkit-scrollbar pseudo for no-scrollbar attribute
2249+ if attrs.iter().any(|a| a.key == "no-scrollbar") {
2250+ pseudo.push((
2251+ "::-webkit-scrollbar".to_string(),
2252+ "display:none;".to_string(),
2253+ ));
15842254 }
1585− css.push_str(site.kind.css());
1586− css
1587−}
15882255
1589−/// The declarations of a rule body, as (property, `property:value;`), for
1590−/// bodies htmlang wrote: every declaration ends in `;`, and a `;` inside
1591−/// quotes or parentheses doesn't end one.
1592−fn declarations(css: &str) -> impl Iterator<Item = (&str, &str)> {
1593− let mut rest = css;
1594− std::iter::from_fn(move || {
1595− if rest.is_empty() {
1596− return None;
1597− }
1598− let (mut depth, mut quote, mut escaped) = (0i32, None, false);
1599− let mut end = rest.len();
1600− for (i, c) in rest.char_indices() {
1601− match c {
1602− _ if escaped => escaped = false,
1603− '\\' => escaped = true,
1604− c if Some(c) == quote => quote = None,
1605− _ if quote.is_some() => {}
1606− '"' | '\'' => quote = Some(c),
1607− '(' => depth += 1,
1608− ')' => depth -= 1,
1609− ';' if depth == 0 => {
1610− end = i + 1;
1611− break;
2256+ // Collect nth:EXPR: dynamic pseudo selectors
2257+ let mut nth_prefixes: Vec<String> = Vec::new();
2258+ for attr in attrs {
2259+ if attr.key.starts_with("nth:") {
2260+ let rest = &attr.key[4..];
2261+ if let Some(colon_pos) = rest.find(':') {
2262+ let prefix = format!("nth:{}:", &rest[..colon_pos]);
2263+ if !nth_prefixes.contains(&prefix) {
2264+ nth_prefixes.push(prefix);
16122265 }
1613− _ => {}
16142266 }
16152267 }
1616− let (declaration, after) = rest.split_at(end);
1617− rest = after;
1618− let name = declaration.split(':').next().unwrap_or("").trim();
1619− Some((name, declaration))
1620− })
2268+ }
2269+ for prefix in &nth_prefixes {
2270+ let expr = &prefix[4..prefix.len() - 1];
2271+ let selector = format!(":nth-child({})", expr);
2272+ let css = attrs_to_css(attrs, prefix, kind, parent_kind, has_overlay_children);
2273+ if !css.is_empty() {
2274+ pseudo.push((selector, css));
2275+ }
2276+ }
2277+
2278+ // Collect has(...): dynamic pseudo selectors
2279+ let mut has_prefixes: Vec<String> = Vec::new();
2280+ for attr in attrs {
2281+ if attr.key.starts_with("has(")
2282+ && let Some(close) = attr.key.find("):")
2283+ {
2284+ let prefix = format!("{}:", &attr.key[..close + 1]);
2285+ if !has_prefixes.contains(&prefix) {
2286+ has_prefixes.push(prefix);
2287+ }
2288+ }
2289+ }
2290+ for prefix in &has_prefixes {
2291+ let inner = &prefix[4..prefix.len() - 2]; // extract selector from has(selector):
2292+ let selector = format!(":has({})", inner);
2293+ let css = attrs_to_css(attrs, prefix, kind, parent_kind, has_overlay_children);
2294+ if !css.is_empty() {
2295+ pseudo.push((selector, css));
2296+ }
2297+ }
2298+
2299+ // Collect responsive overrides
2300+ let mut responsive = Vec::new();
2301+ for &(bp_name, _) in BREAKPOINTS {
2302+ let prefix = format!("{}:", bp_name);
2303+ let css = attrs_to_css(attrs, &prefix, kind, parent_kind, has_overlay_children);
2304+ if !css.is_empty() {
2305+ responsive.push((bp_name.to_string(), css));
2306+ }
2307+ }
2308+
2309+ // Collect container query overrides
2310+ let mut container = Vec::new();
2311+ for &(bp_name, _) in BREAKPOINTS {
2312+ let prefix = format!("cq-{}:", bp_name);
2313+ let css = attrs_to_css(attrs, &prefix, kind, parent_kind, has_overlay_children);
2314+ if !css.is_empty() {
2315+ container.push((bp_name.to_string(), css));
2316+ }
2317+ }
2318+
2319+ let dark = attrs_to_css(attrs, "dark:", kind, parent_kind, has_overlay_children);
2320+ let print = attrs_to_css(attrs, "print:", kind, parent_kind, has_overlay_children);
2321+ let motion_safe = attrs_to_css(attrs, "motion-safe:", kind, parent_kind, has_overlay_children);
2322+ let motion_reduce =
2323+ attrs_to_css(attrs, "motion-reduce:", kind, parent_kind, has_overlay_children);
2324+ let landscape = attrs_to_css(attrs, "landscape:", kind, parent_kind, has_overlay_children);
2325+ let portrait = attrs_to_css(attrs, "portrait:", kind, parent_kind, has_overlay_children);
2326+
2327+ // Dedupe: if a property is declared twice within a single rule, keep only
2328+ // the last occurrence (element-kind defaults are written before
2329+ // user attributes, so a user [list-style disc] correctly overrides the
2330+ // default list-style:none, and we don't need to ship both).
2331+ let base = dedupe_declarations(&base);
2332+ let pseudo: Vec<(String, String)> = pseudo
2333+ .into_iter()
2334+ .map(|(sel, css)| (sel, dedupe_declarations(&css)))
2335+ .collect();
2336+ let responsive: Vec<(String, String)> = responsive
2337+ .into_iter()
2338+ .map(|(bp, css)| (bp, dedupe_declarations(&css)))
2339+ .collect();
2340+ let dark = dedupe_declarations(&dark);
2341+ let print = dedupe_declarations(&print);
2342+ let motion_safe = dedupe_declarations(&motion_safe);
2343+ let motion_reduce = dedupe_declarations(&motion_reduce);
2344+ let landscape = dedupe_declarations(&landscape);
2345+ let portrait = dedupe_declarations(&portrait);
2346+ let container: Vec<(String, String)> = container
2347+ .into_iter()
2348+ .map(|(bp, css)| (bp, dedupe_declarations(&css)))
2349+ .collect();
2350+
2351+ styles.get_class(
2352+ base,
2353+ pseudo,
2354+ responsive,
2355+ dark,
2356+ print,
2357+ motion_safe,
2358+ motion_reduce,
2359+ landscape,
2360+ portrait,
2361+ container,
2362+ )
16212363}
16222364
16232365/// Dedupe CSS declarations within a single rule body: for any property
16242366/// declared more than once, keep only the last occurrence. Unparseable
1625−/// segments (no `:`) are preserved as-is. Semicolons inside parentheses or
1626−/// quoted strings are treated as part of a value, not as declaration
1627−/// separators.
2367+/// segments (no `:`) are preserved as-is. Semicolons inside parentheses are
2368+/// treated as part of a value, not as declaration separators.
16282369fn dedupe_declarations(css: &str) -> String {
16292370 if css.is_empty() {
16302371 return String::new();
@@ -1639,26 +2380,8 @@ fn dedupe_declarations(css: &str) -> String {
16392380 let mut decls: Vec<(Option<String>, String)> = Vec::new();
16402381 let mut current = String::new();
16412382 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;
16462383 for ch in css.chars() {
1647− if escaped {
1648− escaped = false;
1649− current.push(ch);
1650− } else if ch == '\\' {
1651− escaped = true;
1652− current.push(ch);
1653− } else if let Some(q) = quote {
1654− if ch == q {
1655− quote = None;
1656− }
1657− current.push(ch);
1658− } else if ch == '"' || ch == '\'' {
1659− quote = Some(ch);
1660− current.push(ch);
1661− } else if ch == '(' {
2384+ if ch == '(' {
16622385 depth += 1;
16632386 current.push(ch);
16642387 } else if ch == ')' {
@@ -1687,652 +2410,1753 @@ fn dedupe_declarations(css: &str) -> String {
16872410 decls.push((prop, std::mem::take(&mut current)));
16882411 }
16892412
1690− if decls.len() < 2 {
1691− return css.to_string();
1692− }
2413+ if decls.len() < 2 {
2414+ return css.to_string();
2415+ }
2416+
2417+ // Find index of last occurrence of each property.
2418+ use std::collections::HashMap;
2419+ let mut last: HashMap<String, usize> = HashMap::new();
2420+ for (i, (prop, _)) in decls.iter().enumerate() {
2421+ if let Some(p) = prop {
2422+ last.insert(p.clone(), i);
2423+ }
2424+ }
2425+
2426+ let mut out = String::with_capacity(css.len());
2427+ for (i, (prop, raw)) in decls.iter().enumerate() {
2428+ let keep = match prop {
2429+ Some(p) => last.get(p) == Some(&i),
2430+ None => true,
2431+ };
2432+ if keep {
2433+ out.push_str(raw);
2434+ }
2435+ }
2436+ out
2437+}
2438+
2439+fn emit_class_attr(out: &mut String, gen_class: Option<&str>, user_class: Option<&str>) {
2440+ match (gen_class, user_class) {
2441+ (Some(g), Some(u)) => {
2442+ out.push_str(" class=\"");
2443+ out.push_str(g);
2444+ out.push(' ');
2445+ out.push_str(&html_escape(u));
2446+ out.push('"');
2447+ }
2448+ (Some(g), None) => {
2449+ out.push_str(" class=\"");
2450+ out.push_str(g);
2451+ out.push('"');
2452+ }
2453+ (None, Some(u)) => {
2454+ out.push_str(" class=\"");
2455+ out.push_str(&html_escape(u));
2456+ out.push('"');
2457+ }
2458+ (None, None) => {}
2459+ }
2460+}
2461+
2462+// ---------------------------------------------------------------------------
2463+// Attribute → CSS mapping
2464+// ---------------------------------------------------------------------------
2465+
2466+/// (htmlang prefix, CSS selector suffix)
2467+const PSEUDO_PREFIXES: &[(&str, &str)] = &[
2468+ ("hover:", ":hover"),
2469+ ("active:", ":active"),
2470+ ("focus:", ":focus"),
2471+ ("focus-visible:", ":focus-visible"),
2472+ ("focus-within:", ":focus-within"),
2473+ ("disabled:", ":disabled"),
2474+ ("checked:", ":checked"),
2475+ ("placeholder:", "::placeholder"),
2476+ ("first:", ":first-child"),
2477+ ("last:", ":last-child"),
2478+ ("odd:", ":nth-child(odd)"),
2479+ ("even:", ":nth-child(even)"),
2480+ ("before:", "::before"),
2481+ ("after:", "::after"),
2482+ ("selection:", "::selection"),
2483+ ("visited:", ":visited"),
2484+ ("empty:", ":empty"),
2485+ ("target:", ":target"),
2486+ ("valid:", ":valid"),
2487+ ("invalid:", ":invalid"),
2488+];
2489+const RESPONSIVE_PREFIXES: &[&str] = &["sm:", "md:", "lg:", "xl:", "2xl:"];
2490+const MEDIA_PREFIXES: &[&str] = &[
2491+ "dark:",
2492+ "print:",
2493+ "motion-safe:",
2494+ "motion-reduce:",
2495+ "landscape:",
2496+ "portrait:",
2497+];
2498+const CONTAINER_QUERY_PREFIXES: &[&str] = &["cq-sm:", "cq-md:", "cq-lg:", "cq-xl:", "cq-2xl:"];
2499+
2500+fn is_prefixed_attr(key: &str) -> bool {
2501+ PSEUDO_PREFIXES.iter().any(|&(p, _)| key.starts_with(p))
2502+ || RESPONSIVE_PREFIXES.iter().any(|p| key.starts_with(p))
2503+ || MEDIA_PREFIXES.iter().any(|p| key.starts_with(p))
2504+ || CONTAINER_QUERY_PREFIXES.iter().any(|p| key.starts_with(p))
2505+ || key.starts_with("nth:")
2506+ || key.starts_with("has(")
2507+}
2508+
2509+/// `display:flex;flex-direction:column;` — base layout for `@el` and every
2510+/// semantic wrapper that behaves like a column.
2511+const FLEX_COLUMN: &str = "display:flex;flex-direction:column;";
2512+
2513+/// Font stack shared by `@pre`, `@code`, `@kbd`.
2514+const MONOSPACE_STACK: &str = "font-family:ui-monospace,monospace;";
2515+
2516+/// Declarations common to `@badge` and `@tag`. They differ only in
2517+/// `border-radius` (and `@badge` additionally centers content / pins
2518+/// line-height:1), so keeping the shared base here avoids drift.
2519+const PILL_BASE: &str =
2520+ "display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;";
2521+
2522+fn attrs_to_css(
2523+ attrs: &[Attribute],
2524+ state_prefix: &str,
2525+ kind: &ElementKind,
2526+ parent_kind: Option<&ElementKind>,
2527+ has_overlay_children: bool,
2528+) -> String {
2529+ let mut css = String::new();
2530+
2531+ // Base element styles only for the default (non-state) pass
2532+ if state_prefix.is_empty() {
2533+ // Elements with @in-front / @behind children become positioning
2534+ // contexts. Pushed before user attrs so an explicit `position` wins
2535+ // via dedupe (only the last declaration of a property is kept).
2536+ if has_overlay_children {
2537+ css.push_str("position:relative;isolation:isolate;");
2538+ }
2539+ match kind {
2540+ ElementKind::Row => css.push_str("display:flex;flex-direction:row;"),
2541+ ElementKind::Column
2542+ | ElementKind::El
2543+ // Semantic elements get flex column layout like @el
2544+ | ElementKind::Nav
2545+ | ElementKind::Header
2546+ | ElementKind::Footer
2547+ | ElementKind::Main
2548+ | ElementKind::Section
2549+ | ElementKind::Article
2550+ | ElementKind::Aside
2551+ | ElementKind::ListItem
2552+ | ElementKind::Form
2553+ | ElementKind::Details
2554+ | ElementKind::Dialog => css.push_str(FLEX_COLUMN),
2555+ ElementKind::Paragraph
2556+ | ElementKind::H1
2557+ | ElementKind::H2
2558+ | ElementKind::H3
2559+ | ElementKind::H4
2560+ | ElementKind::H5
2561+ | ElementKind::H6 => css.push_str("margin:0;"),
2562+ // Lists: reset browser defaults
2563+ ElementKind::List => css.push_str("margin:0;padding-left:0;list-style:none;"),
2564+ // Figure / Blockquote: flex column with browser margin reset
2565+ ElementKind::Figure | ElementKind::Blockquote => {
2566+ css.push_str(FLEX_COLUMN);
2567+ css.push_str("margin:0;");
2568+ }
2569+ // Pre: preserve whitespace
2570+ ElementKind::Pre => {
2571+ css.push_str("margin:0;white-space:pre;");
2572+ css.push_str(MONOSPACE_STACK);
2573+ }
2574+ // Code / Kbd: monospace font
2575+ ElementKind::Code | ElementKind::Kbd => css.push_str(MONOSPACE_STACK),
2576+ ElementKind::DefinitionList => css.push_str("margin:0;"),
2577+ ElementKind::DefinitionDescription => {
2578+ css.push_str("margin:0;");
2579+ css.push_str(FLEX_COLUMN);
2580+ }
2581+ ElementKind::Fieldset => {
2582+ css.push_str(FLEX_COLUMN);
2583+ // Align padding to the px-based scale used by Badge/Tag/Chip
2584+ // rather than the old 0.5em (which depended on font-size).
2585+ css.push_str("border:1px solid currentColor;padding:8px;margin:0;");
2586+ }
2587+ ElementKind::Grid => css.push_str("display:grid;"),
2588+ ElementKind::Stack => css.push_str("position:relative;"),
2589+ ElementKind::Badge => {
2590+ css.push_str(PILL_BASE);
2591+ css.push_str("justify-content:center;border-radius:9999px;line-height:1;");
2592+ }
2593+ ElementKind::Tag => {
2594+ css.push_str(PILL_BASE);
2595+ css.push_str("border-radius:4px;");
2596+ }
2597+ ElementKind::Tooltip => css.push_str("position:relative;cursor:help;"),
2598+ ElementKind::Spacer => css.push_str("flex:1;"),
2599+ ElementKind::Avatar => css.push_str("display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;flex-shrink:0;"),
2600+ 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;"),
2601+ 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;"),
2602+ // Overlay layers fill the parent. Parent gets position:relative
2603+ // applied automatically (see has_overlay_children check below).
2604+ ElementKind::InFront => {
2605+ css.push_str(FLEX_COLUMN);
2606+ css.push_str("position:absolute;inset:0;");
2607+ }
2608+ ElementKind::Behind => {
2609+ css.push_str(FLEX_COLUMN);
2610+ css.push_str("position:absolute;inset:0;z-index:-1;");
2611+ }
2612+ _ => {}
2613+ }
2614+ // Children of @carousel get scroll-snap-align and flex-shrink
2615+ if matches!(parent_kind, Some(ElementKind::Carousel)) {
2616+ css.push_str("scroll-snap-align:start;flex-shrink:0;");
2617+ }
2618+ }
2619+
2620+ for attr in attrs {
2621+ // Determine the effective key for this pass
2622+ let effective_key = if state_prefix.is_empty() {
2623+ if is_prefixed_attr(&attr.key) {
2624+ continue;
2625+ }
2626+ attr.key.as_str()
2627+ } else {
2628+ match attr.key.strip_prefix(state_prefix) {
2629+ Some(k) => k,
2630+ None => continue,
2631+ }
2632+ };
2633+
2634+ let val = attr.value.as_deref();
2635+
2636+ match effective_key {
2637+ // Layout
2638+ "spacing" | "gap" => {
2639+ if let Some(v) = val {
2640+ push_css(&mut css, "gap", &css_px(v));
2641+ }
2642+ }
2643+ "padding" => {
2644+ if let Some(v) = val {
2645+ push_css(&mut css, "padding", &css_px_multi(v));
2646+ }
2647+ }
2648+ "padding-x" => {
2649+ if let Some(v) = val {
2650+ // Logical property covers both inline sides in one
2651+ // declaration; for symmetric values this is visually
2652+ // identical to padding-left/right in LTR and RTL.
2653+ push_css(&mut css, "padding-inline", &css_px(v));
2654+ }
2655+ }
2656+ "padding-y" => {
2657+ if let Some(v) = val {
2658+ push_css(&mut css, "padding-block", &css_px(v));
2659+ }
2660+ }
2661+ "padding-top" => {
2662+ if let Some(v) = val {
2663+ push_css(&mut css, "padding-top", &css_px(v));
2664+ }
2665+ }
2666+ "padding-bottom" => {
2667+ if let Some(v) = val {
2668+ push_css(&mut css, "padding-bottom", &css_px(v));
2669+ }
2670+ }
2671+ "padding-left" => {
2672+ if let Some(v) = val {
2673+ push_css(&mut css, "padding-left", &css_px(v));
2674+ }
2675+ }
2676+ "padding-right" => {
2677+ if let Some(v) = val {
2678+ push_css(&mut css, "padding-right", &css_px(v));
2679+ }
2680+ }
2681+
2682+ // Sizing
2683+ "width" => {
2684+ if let Some(v) = val {
2685+ match v {
2686+ "fill" => match parent_kind {
2687+ Some(ElementKind::Row) => {
2688+ push_css(&mut css, "flex", "1");
2689+ push_css(&mut css, "min-width", "0");
2690+ }
2691+ _ => push_css(&mut css, "width", "100%"),
2692+ },
2693+ "shrink" => push_css(&mut css, "flex-shrink", "0"),
2694+ _ => push_css(&mut css, "width", &css_px(v)),
2695+ }
2696+ }
2697+ }
2698+ "height" => {
2699+ if let Some(v) = val {
2700+ match v {
2701+ "fill" => match parent_kind {
2702+ Some(ElementKind::Column) => {
2703+ push_css(&mut css, "flex", "1");
2704+ push_css(&mut css, "min-height", "0");
2705+ }
2706+ _ => push_css(&mut css, "height", "100%"),
2707+ },
2708+ "shrink" => push_css(&mut css, "flex-shrink", "0"),
2709+ _ => push_css(&mut css, "height", &css_px(v)),
2710+ }
2711+ }
2712+ }
2713+ "min-width" => {
2714+ if let Some(v) = val {
2715+ push_css(&mut css, "min-width", &css_px(v));
2716+ }
2717+ }
2718+ "max-width" => {
2719+ if let Some(v) = val {
2720+ push_css(&mut css, "max-width", &css_px(v));
2721+ }
2722+ }
2723+ "min-height" => {
2724+ if let Some(v) = val {
2725+ push_css(&mut css, "min-height", &css_px(v));
2726+ }
2727+ }
2728+ "max-height" => {
2729+ if let Some(v) = val {
2730+ push_css(&mut css, "max-height", &css_px(v));
2731+ }
2732+ }
2733+
2734+ // Alignment
2735+ "center-x" => match parent_kind {
2736+ Some(ElementKind::Column) | Some(ElementKind::El) => {
2737+ push_css(&mut css, "align-self", "center");
2738+ }
2739+ _ => {
2740+ push_css(&mut css, "margin-left", "auto");
2741+ push_css(&mut css, "margin-right", "auto");
2742+ }
2743+ },
2744+ "center-y" => match parent_kind {
2745+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "center"),
2746+ _ => {
2747+ push_css(&mut css, "margin-top", "auto");
2748+ push_css(&mut css, "margin-bottom", "auto");
2749+ }
2750+ },
2751+ "align-left" => match parent_kind {
2752+ Some(ElementKind::Column) | Some(ElementKind::El) => {
2753+ push_css(&mut css, "align-self", "flex-start");
2754+ }
2755+ _ => push_css(&mut css, "margin-right", "auto"),
2756+ },
2757+ "align-right" => match parent_kind {
2758+ Some(ElementKind::Column) | Some(ElementKind::El) => {
2759+ push_css(&mut css, "align-self", "flex-end");
2760+ }
2761+ _ => push_css(&mut css, "margin-left", "auto"),
2762+ },
2763+ "align-top" => match parent_kind {
2764+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "flex-start"),
2765+ _ => push_css(&mut css, "margin-bottom", "auto"),
2766+ },
2767+ "align-bottom" => match parent_kind {
2768+ Some(ElementKind::Row) => push_css(&mut css, "align-self", "flex-end"),
2769+ _ => push_css(&mut css, "margin-top", "auto"),
2770+ },
2771+
2772+ // Style
2773+ "background" => {
2774+ if let Some(v) = val {
2775+ push_css(&mut css, "background", v);
2776+ }
2777+ }
2778+ "color" => {
2779+ if let Some(v) = val {
2780+ push_css(&mut css, "color", v);
2781+ }
2782+ }
2783+ "border" => {
2784+ if let Some(v) = val {
2785+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
2786+ if parts.len() == 2 {
2787+ push_css(
2788+ &mut css,
2789+ "border",
2790+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
2791+ );
2792+ } else {
2793+ push_css(
2794+ &mut css,
2795+ "border",
2796+ &format!("{} solid currentColor", css_px(parts[0])),
2797+ );
2798+ }
2799+ }
2800+ }
2801+ "border-top" | "border-bottom" | "border-left" | "border-right" => {
2802+ if let Some(v) = val {
2803+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
2804+ if parts.len() == 2 {
2805+ push_css(
2806+ &mut css,
2807+ effective_key,
2808+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
2809+ );
2810+ } else {
2811+ push_css(
2812+ &mut css,
2813+ effective_key,
2814+ &format!("{} solid currentColor", css_px(parts[0])),
2815+ );
2816+ }
2817+ }
2818+ }
2819+ "rounded" => {
2820+ if let Some(v) = val {
2821+ push_css(&mut css, "border-radius", &css_px(v));
2822+ }
2823+ }
2824+ "bold" => push_css(&mut css, "font-weight", "bold"),
2825+ "italic" => push_css(&mut css, "font-style", "italic"),
2826+ "underline" => push_css(&mut css, "text-decoration", "underline"),
2827+ "size" => {
2828+ if let Some(v) = val {
2829+ push_css(&mut css, "font-size", &css_px(v));
2830+ }
2831+ }
2832+ "font" => {
2833+ if let Some(v) = val {
2834+ // `font "Inter, sans-serif"` quotes a whole font stack so
2835+ // its commas don't split the attribute list.
2836+ let v = match v.strip_prefix('"').and_then(|v| v.strip_suffix('"')) {
2837+ Some(stack) if stack.contains(',') => stack,
2838+ _ => v,
2839+ };
2840+ push_css(&mut css, "font-family", v);
2841+ }
2842+ }
2843+ "transition" => {
2844+ if let Some(v) = val {
2845+ push_css(&mut css, "transition", v);
2846+ }
2847+ }
2848+ "cursor" => {
2849+ if let Some(v) = val {
2850+ push_css(&mut css, "cursor", v);
2851+ }
2852+ }
2853+ "opacity" => {
2854+ if let Some(v) = val {
2855+ push_css(&mut css, "opacity", v);
2856+ }
2857+ }
2858+
2859+ // Typography
2860+ "text-align" => {
2861+ if let Some(v) = val {
2862+ push_css(&mut css, "text-align", v);
2863+ }
2864+ }
2865+ "line-height" => {
2866+ if let Some(v) = val {
2867+ push_css(&mut css, "line-height", &css_line_height(v));
2868+ }
2869+ }
2870+ "letter-spacing" => {
2871+ if let Some(v) = val {
2872+ push_css(&mut css, "letter-spacing", &css_px(v));
2873+ }
2874+ }
2875+ "text-transform" => {
2876+ if let Some(v) = val {
2877+ push_css(&mut css, "text-transform", v);
2878+ }
2879+ }
2880+ "white-space" => {
2881+ if let Some(v) = val {
2882+ push_css(&mut css, "white-space", v);
2883+ }
2884+ }
2885+
2886+ // Overflow & positioning
2887+ "overflow" => {
2888+ if let Some(v) = val {
2889+ push_css(&mut css, "overflow", v);
2890+ }
2891+ }
2892+ "position" => {
2893+ if let Some(v) = val {
2894+ push_css(&mut css, "position", v);
2895+ }
2896+ }
2897+ "top" => {
2898+ if let Some(v) = val {
2899+ push_css(&mut css, "top", &css_px(v));
2900+ }
2901+ }
2902+ "right" => {
2903+ if let Some(v) = val {
2904+ push_css(&mut css, "right", &css_px(v));
2905+ }
2906+ }
2907+ "bottom" => {
2908+ if let Some(v) = val {
2909+ push_css(&mut css, "bottom", &css_px(v));
2910+ }
2911+ }
2912+ "left" => {
2913+ if let Some(v) = val {
2914+ push_css(&mut css, "left", &css_px(v));
2915+ }
2916+ }
2917+ "z-index" => {
2918+ if let Some(v) = val {
2919+ push_css(&mut css, "z-index", v);
2920+ }
2921+ }
2922+
2923+ // Display & visibility
2924+ "display" => {
2925+ if let Some(v) = val {
2926+ push_css(&mut css, "display", v);
2927+ }
2928+ }
2929+ "visibility" => {
2930+ if let Some(v) = val {
2931+ push_css(&mut css, "visibility", v);
2932+ }
2933+ }
2934+ "hidden" => push_css(&mut css, "display", "none"),
2935+
2936+ // Transform & filters
2937+ "transform" => {
2938+ if let Some(v) = val {
2939+ push_css(&mut css, "transform", v);
2940+ }
2941+ }
2942+ "backdrop-filter" => {
2943+ if let Some(v) = val {
2944+ push_css(&mut css, "backdrop-filter", v);
2945+ }
2946+ }
2947+
2948+ // Effects
2949+ "shadow" => {
2950+ if let Some(v) = val {
2951+ push_css(&mut css, "box-shadow", v);
2952+ }
2953+ }
2954+
2955+ // Flow
2956+ "wrap" => push_css(&mut css, "flex-wrap", "wrap"),
2957+ "gap-x" => {
2958+ if let Some(v) = val {
2959+ push_css(&mut css, "column-gap", &css_px(v));
2960+ }
2961+ }
2962+ "gap-y" => {
2963+ if let Some(v) = val {
2964+ push_css(&mut css, "row-gap", &css_px(v));
2965+ }
2966+ }
2967+
2968+ // Grid
2969+ "grid" => {
2970+ push_css(&mut css, "display", "grid");
2971+ }
2972+ "grid-cols" => {
2973+ if let Some(v) = val {
2974+ if let Ok(n) = v.parse::<u32>() {
2975+ push_css(
2976+ &mut css,
2977+ "grid-template-columns",
2978+ &format!("repeat({},1fr)", n),
2979+ );
2980+ } else {
2981+ push_css(&mut css, "grid-template-columns", v);
2982+ }
2983+ }
2984+ }
2985+ "grid-rows" => {
2986+ if let Some(v) = val {
2987+ if let Ok(n) = v.parse::<u32>() {
2988+ push_css(
2989+ &mut css,
2990+ "grid-template-rows",
2991+ &format!("repeat({},1fr)", n),
2992+ );
2993+ } else {
2994+ push_css(&mut css, "grid-template-rows", v);
2995+ }
2996+ }
2997+ }
2998+ "col-span" => {
2999+ if let Some(v) = val {
3000+ push_css(&mut css, "grid-column", &format!("span {}", v));
3001+ }
3002+ }
3003+ "row-span" => {
3004+ if let Some(v) = val {
3005+ push_css(&mut css, "grid-row", &format!("span {}", v));
3006+ }
3007+ }
3008+
3009+ // Animation
3010+ "animation" => {
3011+ if let Some(v) = val {
3012+ push_css(&mut css, "animation", v);
3013+ }
3014+ }
3015+
3016+ // Aspect ratio
3017+ "aspect-ratio" => {
3018+ if let Some(v) = val {
3019+ push_css(&mut css, "aspect-ratio", v);
3020+ }
3021+ }
3022+
3023+ // CSS containment for rendering performance
3024+ "contain" => {
3025+ if let Some(v) = val {
3026+ push_css(&mut css, "contain", v);
3027+ } else {
3028+ push_css(&mut css, "contain", "layout style paint");
3029+ }
3030+ }
3031+ "content-visibility" => {
3032+ if let Some(v) = val {
3033+ push_css(&mut css, "content-visibility", v);
3034+ } else {
3035+ push_css(&mut css, "content-visibility", "auto");
3036+ }
3037+ }
3038+
3039+ // Outline (like border but doesn't affect layout)
3040+ "outline" => {
3041+ if let Some(v) = val {
3042+ let parts: Vec<&str> = v.splitn(2, ' ').collect();
3043+ if parts.len() == 2 {
3044+ push_css(
3045+ &mut css,
3046+ "outline",
3047+ &format!("{} solid {}", css_px(parts[0]), parts[1]),
3048+ );
3049+ } else {
3050+ push_css(
3051+ &mut css,
3052+ "outline",
3053+ &format!("{} solid currentColor", css_px(parts[0])),
3054+ );
3055+ }
3056+ }
3057+ }
3058+
3059+ // Logical properties (i18n-aware)
3060+ "padding-inline" => {
3061+ if let Some(v) = val {
3062+ push_css(&mut css, "padding-inline", &css_px_multi(v));
3063+ }
3064+ }
3065+ "padding-block" => {
3066+ if let Some(v) = val {
3067+ push_css(&mut css, "padding-block", &css_px_multi(v));
3068+ }
3069+ }
3070+ "margin-inline" => {
3071+ if let Some(v) = val {
3072+ push_css(&mut css, "margin-inline", &css_px_multi(v));
3073+ }
3074+ }
3075+ "margin-block" => {
3076+ if let Some(v) = val {
3077+ push_css(&mut css, "margin-block", &css_px_multi(v));
3078+ }
3079+ }
3080+
3081+ // Logical property start/end variants
3082+ "padding-inline-start"
3083+ | "padding-inline-end"
3084+ | "padding-block-start"
3085+ | "padding-block-end"
3086+ | "margin-inline-start"
3087+ | "margin-inline-end"
3088+ | "margin-block-start"
3089+ | "margin-block-end" => {
3090+ if let Some(v) = val {
3091+ push_css(&mut css, effective_key, &css_px(v));
3092+ }
3093+ }
3094+
3095+ // Logical inset
3096+ "inset-inline" | "inset-block" => {
3097+ if let Some(v) = val {
3098+ push_css(&mut css, effective_key, &css_px_multi(v));
3099+ }
3100+ }
3101+ "inset-inline-start" | "inset-inline-end" | "inset-block-start" | "inset-block-end" => {
3102+ if let Some(v) = val {
3103+ push_css(&mut css, effective_key, &css_px(v));
3104+ }
3105+ }
3106+
3107+ // Logical border
3108+ "border-inline"
3109+ | "border-block"
3110+ | "border-inline-start"
3111+ | "border-inline-end"
3112+ | "border-block-start"
3113+ | "border-block-end" => {
3114+ if let Some(v) = val {
3115+ push_css(&mut css, effective_key, v);
3116+ }
3117+ }
3118+
3119+ // Logical border-radius
3120+ "border-start-start-radius"
3121+ | "border-start-end-radius"
3122+ | "border-end-start-radius"
3123+ | "border-end-end-radius" => {
3124+ if let Some(v) = val {
3125+ push_css(&mut css, effective_key, &css_px(v));
3126+ }
3127+ }
3128+
3129+ // Logical scroll margins & padding
3130+ "scroll-margin-inline"
3131+ | "scroll-margin-block"
3132+ | "scroll-padding-inline"
3133+ | "scroll-padding-block" => {
3134+ if let Some(v) = val {
3135+ push_css(&mut css, effective_key, &css_px_multi(v));
3136+ }
3137+ }
3138+
3139+ // Logical sizing
3140+ "inline-size" | "block-size" | "min-inline-size" | "max-inline-size"
3141+ | "min-block-size" | "max-block-size" => {
3142+ if let Some(v) = val {
3143+ push_css(&mut css, effective_key, &css_px(v));
3144+ }
3145+ }
3146+
3147+ // Scroll snap
3148+ "scroll-snap-type" => {
3149+ if let Some(v) = val {
3150+ push_css(&mut css, "scroll-snap-type", v);
3151+ }
3152+ }
3153+ "scroll-snap-align" => {
3154+ if let Some(v) = val {
3155+ push_css(&mut css, "scroll-snap-align", v);
3156+ }
3157+ }
3158+
3159+ // Margin
3160+ "margin" => {
3161+ if let Some(v) = val {
3162+ push_css(&mut css, "margin", &css_px_multi(v));
3163+ }
3164+ }
3165+ "margin-x" => {
3166+ if let Some(v) = val {
3167+ push_css(&mut css, "margin-inline", &css_px(v));
3168+ }
3169+ }
3170+ "margin-y" => {
3171+ if let Some(v) = val {
3172+ push_css(&mut css, "margin-block", &css_px(v));
3173+ }
3174+ }
3175+
3176+ // Filter
3177+ "filter" => {
3178+ if let Some(v) = val {
3179+ push_css(&mut css, "filter", v);
3180+ }
3181+ }
3182+
3183+ // Object fit/position (for images)
3184+ "object-fit" => {
3185+ if let Some(v) = val {
3186+ push_css(&mut css, "object-fit", v);
3187+ }
3188+ }
3189+ "object-position" => {
3190+ if let Some(v) = val {
3191+ push_css(&mut css, "object-position", v);
3192+ }
3193+ }
3194+
3195+ // Text shadow
3196+ "text-shadow" => {
3197+ if let Some(v) = val {
3198+ push_css(&mut css, "text-shadow", v);
3199+ }
3200+ }
3201+
3202+ // Text overflow
3203+ "text-overflow" => {
3204+ if let Some(v) = val {
3205+ push_css(&mut css, "text-overflow", v);
3206+ }
3207+ }
3208+
3209+ // Interaction
3210+ "pointer-events" => {
3211+ if let Some(v) = val {
3212+ push_css(&mut css, "pointer-events", v);
3213+ }
3214+ }
3215+ "user-select" => {
3216+ if let Some(v) = val {
3217+ push_css(&mut css, "user-select", v);
3218+ }
3219+ }
3220+
3221+ // Flexbox/grid alignment
3222+ "justify-content" => {
3223+ if let Some(v) = val {
3224+ push_css(&mut css, "justify-content", v);
3225+ }
3226+ }
3227+ "align-items" => {
3228+ if let Some(v) = val {
3229+ push_css(&mut css, "align-items", v);
3230+ }
3231+ }
3232+
3233+ // Flex item order
3234+ "order" => {
3235+ if let Some(v) = val {
3236+ push_css(&mut css, "order", v);
3237+ }
3238+ }
3239+
3240+ // Background extras
3241+ "background-size" => {
3242+ if let Some(v) = val {
3243+ push_css(&mut css, "background-size", v);
3244+ }
3245+ }
3246+ "background-position" => {
3247+ if let Some(v) = val {
3248+ push_css(&mut css, "background-position", v);
3249+ }
3250+ }
3251+ "background-repeat" => {
3252+ if let Some(v) = val {
3253+ push_css(&mut css, "background-repeat", v);
3254+ }
3255+ }
3256+
3257+ // Text wrapping
3258+ "word-break" => {
3259+ if let Some(v) = val {
3260+ push_css(&mut css, "word-break", v);
3261+ }
3262+ }
3263+ "overflow-wrap" => {
3264+ if let Some(v) = val {
3265+ push_css(&mut css, "overflow-wrap", v);
3266+ }
3267+ }
3268+
3269+ // Container queries
3270+ "container" => {
3271+ push_css(&mut css, "container-type", "inline-size");
3272+ }
3273+ "container-name" => {
3274+ if let Some(v) = val {
3275+ push_css(&mut css, "container-name", v);
3276+ }
3277+ }
3278+ "container-type" => {
3279+ if let Some(v) = val {
3280+ push_css(&mut css, "container-type", v);
3281+ }
3282+ }
3283+
3284+ // Overflow axis
3285+ "overflow-x" => {
3286+ if let Some(v) = val {
3287+ push_css(&mut css, "overflow-x", v);
3288+ }
3289+ }
3290+ "overflow-y" => {
3291+ if let Some(v) = val {
3292+ push_css(&mut css, "overflow-y", v);
3293+ }
3294+ }
3295+
3296+ // Inset (shorthand for top/right/bottom/left)
3297+ "inset" => {
3298+ if let Some(v) = val {
3299+ push_css(&mut css, "inset", &css_px(v));
3300+ }
3301+ }
3302+
3303+ // Accent & caret colors
3304+ "accent-color" => {
3305+ if let Some(v) = val {
3306+ push_css(&mut css, "accent-color", v);
3307+ }
3308+ }
3309+ "caret-color" => {
3310+ if let Some(v) = val {
3311+ push_css(&mut css, "caret-color", v);
3312+ }
3313+ }
3314+
3315+ // Color scheme & appearance
3316+ "color-scheme" => {
3317+ if let Some(v) = val {
3318+ push_css(&mut css, "color-scheme", v);
3319+ }
3320+ }
3321+ "appearance" => {
3322+ if let Some(v) = val {
3323+ push_css(&mut css, "appearance", v);
3324+ }
3325+ }
3326+
3327+ // List style
3328+ "list-style" => {
3329+ if let Some(v) = val {
3330+ push_css(&mut css, "list-style", v);
3331+ }
3332+ }
3333+
3334+ // Table
3335+ "border-collapse" => {
3336+ if let Some(v) = val {
3337+ push_css(&mut css, "border-collapse", v);
3338+ }
3339+ }
3340+ "border-spacing" => {
3341+ if let Some(v) = val {
3342+ push_css(&mut css, "border-spacing", &css_px(v));
3343+ }
3344+ }
3345+
3346+ // Text decoration
3347+ "text-decoration" => {
3348+ if let Some(v) = val {
3349+ push_css(&mut css, "text-decoration", v);
3350+ }
3351+ }
3352+ "text-decoration-color" => {
3353+ if let Some(v) = val {
3354+ push_css(&mut css, "text-decoration-color", v);
3355+ }
3356+ }
3357+ "text-decoration-thickness" => {
3358+ if let Some(v) = val {
3359+ push_css(&mut css, "text-decoration-thickness", &css_px(v));
3360+ }
3361+ }
3362+ "text-decoration-style" => {
3363+ if let Some(v) = val {
3364+ push_css(&mut css, "text-decoration-style", v);
3365+ }
3366+ }
3367+ "text-underline-offset" => {
3368+ if let Some(v) = val {
3369+ push_css(&mut css, "text-underline-offset", &css_px(v));
3370+ }
3371+ }
3372+
3373+ // Multi-column
3374+ "column-width" => {
3375+ if let Some(v) = val {
3376+ push_css(&mut css, "column-width", &css_px(v));
3377+ }
3378+ }
3379+ "column-rule" => {
3380+ if let Some(v) = val {
3381+ push_css(&mut css, "column-rule", v);
3382+ }
3383+ }
3384+
3385+ // Place items/self
3386+ "place-items" => {
3387+ if let Some(v) = val {
3388+ push_css(&mut css, "place-items", v);
3389+ }
3390+ }
3391+ "place-self" => {
3392+ if let Some(v) = val {
3393+ push_css(&mut css, "place-self", v);
3394+ }
3395+ }
3396+
3397+ // Scroll behavior
3398+ "scroll-behavior" => {
3399+ if let Some(v) = val {
3400+ push_css(&mut css, "scroll-behavior", v);
3401+ }
3402+ }
3403+
3404+ // Resize
3405+ "resize" => {
3406+ if let Some(v) = val {
3407+ push_css(&mut css, "resize", v);
3408+ }
3409+ }
3410+
3411+ // New CSS properties
3412+ "clip-path" => {
3413+ if let Some(v) = val {
3414+ push_css(&mut css, "clip-path", v);
3415+ }
3416+ }
3417+ "mix-blend-mode" => {
3418+ if let Some(v) = val {
3419+ push_css(&mut css, "mix-blend-mode", v);
3420+ }
3421+ }
3422+ "background-blend-mode" => {
3423+ if let Some(v) = val {
3424+ push_css(&mut css, "background-blend-mode", v);
3425+ }
3426+ }
3427+ "writing-mode" => {
3428+ if let Some(v) = val {
3429+ push_css(&mut css, "writing-mode", v);
3430+ }
3431+ }
3432+ "column-count" => {
3433+ if let Some(v) = val {
3434+ push_css(&mut css, "column-count", v);
3435+ }
3436+ }
3437+ "column-gap" => {
3438+ if let Some(v) = val {
3439+ push_css(&mut css, "column-gap", &css_px(v));
3440+ }
3441+ }
3442+ "text-indent" => {
3443+ if let Some(v) = val {
3444+ push_css(&mut css, "text-indent", &css_px(v));
3445+ }
3446+ }
3447+ "hyphens" => {
3448+ if let Some(v) = val {
3449+ push_css(&mut css, "hyphens", v);
3450+ }
3451+ }
3452+ "flex-grow" => {
3453+ if let Some(v) = val {
3454+ push_css(&mut css, "flex-grow", v);
3455+ }
3456+ }
3457+ "flex-shrink" => {
3458+ if let Some(v) = val {
3459+ push_css(&mut css, "flex-shrink", v);
3460+ }
3461+ }
3462+ "flex-basis" => {
3463+ if let Some(v) = val {
3464+ push_css(&mut css, "flex-basis", &css_px(v));
3465+ }
3466+ }
3467+ "isolation" => {
3468+ if let Some(v) = val {
3469+ push_css(&mut css, "isolation", v);
3470+ }
3471+ }
3472+ "place-content" => {
3473+ if let Some(v) = val {
3474+ push_css(&mut css, "place-content", v);
3475+ }
3476+ }
3477+ "background-image" => {
3478+ if let Some(v) = val {
3479+ push_css(&mut css, "background-image", v);
3480+ }
3481+ }
3482+ "font-weight" => {
3483+ if let Some(v) = val {
3484+ push_css(&mut css, "font-weight", v);
3485+ }
3486+ }
3487+ "font-style" => {
3488+ if let Some(v) = val {
3489+ push_css(&mut css, "font-style", v);
3490+ }
3491+ }
3492+ "text-wrap" => {
3493+ if let Some(v) = val {
3494+ push_css(&mut css, "text-wrap", v);
3495+ }
3496+ }
3497+ "will-change" => {
3498+ if let Some(v) = val {
3499+ push_css(&mut css, "will-change", v);
3500+ }
3501+ }
3502+ "touch-action" => {
3503+ if let Some(v) = val {
3504+ push_css(&mut css, "touch-action", v);
3505+ }
3506+ }
3507+ "vertical-align" => {
3508+ if let Some(v) = val {
3509+ push_css(&mut css, "vertical-align", v);
3510+ }
3511+ }
3512+ "scroll-margin" => {
3513+ if let Some(v) = val {
3514+ push_css(&mut css, "scroll-margin", &css_px(v));
3515+ }
3516+ }
3517+ "scroll-margin-top"
3518+ | "scroll-margin-bottom"
3519+ | "scroll-margin-left"
3520+ | "scroll-margin-right" => {
3521+ if let Some(v) = val {
3522+ push_css(&mut css, effective_key, &css_px(v));
3523+ }
3524+ }
3525+ "scroll-padding" => {
3526+ if let Some(v) = val {
3527+ push_css(&mut css, "scroll-padding", &css_px(v));
3528+ }
3529+ }
3530+ "scroll-padding-top"
3531+ | "scroll-padding-bottom"
3532+ | "scroll-padding-left"
3533+ | "scroll-padding-right" => {
3534+ if let Some(v) = val {
3535+ push_css(&mut css, effective_key, &css_px(v));
3536+ }
3537+ }
3538+ "direction" => {
3539+ if let Some(v) = val {
3540+ push_css(&mut css, "direction", v);
3541+ }
3542+ }
3543+
3544+ "content" => {
3545+ if let Some(v) = val {
3546+ // Wrap in quotes if not already quoted and not a CSS keyword
3547+ if v.starts_with('"')
3548+ || v.starts_with('\'')
3549+ || v == "none"
3550+ || v == "normal"
3551+ || v.starts_with("attr(")
3552+ || v.starts_with("counter(")
3553+ {
3554+ push_css(&mut css, "content", v);
3555+ } else {
3556+ push_css(&mut css, "content", &format!("\"{}\"", v));
3557+ }
3558+ }
3559+ }
3560+
3561+ // --- CSS Shorthands ---
3562+ "truncate" => {
3563+ push_css(&mut css, "overflow", "hidden");
3564+ push_css(&mut css, "text-overflow", "ellipsis");
3565+ push_css(&mut css, "white-space", "nowrap");
3566+ }
3567+ "line-clamp" => {
3568+ if let Some(v) = val {
3569+ push_css(&mut css, "display", "-webkit-box");
3570+ push_css(&mut css, "-webkit-line-clamp", v);
3571+ push_css(&mut css, "-webkit-box-orient", "vertical");
3572+ push_css(&mut css, "overflow", "hidden");
3573+ }
3574+ }
3575+ "blur" => {
3576+ if let Some(v) = val {
3577+ push_css(&mut css, "filter", &format!("blur({})", css_px(v)));
3578+ }
3579+ }
3580+ "backdrop-blur" => {
3581+ if let Some(v) = val {
3582+ push_css(&mut css, "backdrop-filter", &format!("blur({})", css_px(v)));
3583+ }
3584+ }
3585+ "no-scrollbar" => {
3586+ push_css(&mut css, "scrollbar-width", "none");
3587+ push_css(&mut css, "-ms-overflow-style", "none");
3588+ }
3589+ "skeleton" => {
3590+ push_css(
3591+ &mut css,
3592+ "background",
3593+ "linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%)",
3594+ );
3595+ push_css(&mut css, "background-size", "200% 100%");
3596+ push_css(
3597+ &mut css,
3598+ "animation",
3599+ "hl-skeleton 1.5s ease-in-out infinite",
3600+ );
3601+ }
3602+ "gradient" => {
3603+ if let Some(v) = val {
3604+ // Parse: "from to [angle]" or "color1 color2 [angle]"
3605+ let parts: Vec<&str> = v.split_whitespace().collect();
3606+ let bg = if parts.len() >= 3
3607+ && (parts[2].ends_with("deg")
3608+ || parts[2].ends_with("turn")
3609+ || parts[2].ends_with("rad"))
3610+ {
3611+ format!("linear-gradient({},{},{})", parts[2], parts[0], parts[1])
3612+ } else if parts.len() >= 2 {
3613+ format!("linear-gradient({},{})", parts[0], parts[1])
3614+ } else {
3615+ format!("linear-gradient({},transparent)", parts[0])
3616+ };
3617+ push_css(&mut css, "background", &bg);
3618+ }
3619+ }
3620+
3621+ // Grid areas
3622+ "grid-template-areas" => {
3623+ if let Some(v) = val {
3624+ push_css(&mut css, "grid-template-areas", v);
3625+ }
3626+ }
3627+ "grid-area" => {
3628+ if let Some(v) = val {
3629+ push_css(&mut css, "grid-area", v);
3630+ }
3631+ }
3632+
3633+ // View transitions
3634+ "view-transition-name" => {
3635+ if let Some(v) = val {
3636+ push_css(&mut css, "view-transition-name", v);
3637+ }
3638+ }
3639+
3640+ // Animate shorthand (alias for animation)
3641+ "animate" => {
3642+ if let Some(v) = val {
3643+ push_css(&mut css, "animation", v);
3644+ }
3645+ }
3646+
3647+ // CSS subgrid
3648+ "grid-template-columns" => {
3649+ if let Some(v) = val {
3650+ push_css(&mut css, "grid-template-columns", v);
3651+ }
3652+ }
3653+ "grid-template-rows" => {
3654+ if let Some(v) = val {
3655+ push_css(&mut css, "grid-template-rows", v);
3656+ }
3657+ }
3658+
3659+ // Scroll-driven animations
3660+ "animation-timeline" => {
3661+ if let Some(v) = val {
3662+ push_css(&mut css, "animation-timeline", v);
3663+ }
3664+ }
3665+ "animation-range" => {
3666+ if let Some(v) = val {
3667+ push_css(&mut css, "animation-range", v);
3668+ }
3669+ }
3670+ "view-timeline-name" => {
3671+ if let Some(v) = val {
3672+ push_css(&mut css, "view-timeline-name", v);
3673+ }
3674+ }
3675+ "view-timeline-axis" => {
3676+ if let Some(v) = val {
3677+ push_css(&mut css, "view-timeline-axis", v);
3678+ }
3679+ }
3680+ "scroll-timeline-name" => {
3681+ if let Some(v) = val {
3682+ push_css(&mut css, "scroll-timeline-name", v);
3683+ }
3684+ }
3685+ "scroll-timeline-axis" => {
3686+ if let Some(v) = val {
3687+ push_css(&mut css, "scroll-timeline-axis", v);
3688+ }
3689+ }
3690+
3691+ // Anchor positioning
3692+ "anchor-name" => {
3693+ if let Some(v) = val {
3694+ push_css(&mut css, "anchor-name", v);
3695+ }
3696+ }
3697+ "position-anchor" => {
3698+ if let Some(v) = val {
3699+ push_css(&mut css, "position-anchor", v);
3700+ }
3701+ }
3702+ "position-area" => {
3703+ if let Some(v) = val {
3704+ push_css(&mut css, "position-area", v);
3705+ }
3706+ }
3707+ "inset-area" => {
3708+ // Legacy alias for position-area
3709+ if let Some(v) = val {
3710+ push_css(&mut css, "position-area", v);
3711+ }
3712+ }
3713+
3714+ // initial-letter (drop caps)
3715+ "initial-letter" => {
3716+ if let Some(v) = val {
3717+ push_css(&mut css, "initial-letter", v);
3718+ }
3719+ }
16933720
1694− // Find index of last occurrence of each property.
1695− use std::collections::HashMap;
1696− let mut last: HashMap<String, usize> = HashMap::new();
1697− for (i, (prop, _)) in decls.iter().enumerate() {
1698− if let Some(p) = prop {
1699− last.insert(p.clone(), i);
1700− }
1701− }
3721+ // Critical CSS hint — not CSS, handled elsewhere
3722+ "critical" => {}
3723+
3724+ // Identity and HTML passthrough — not CSS
3725+ "id" | "class" => {}
3726+ "type" | "placeholder" | "name" | "value" | "disabled" | "required" | "checked"
3727+ | "for" | "action" | "method" | "autocomplete" | "min" | "max" | "step" | "pattern"
3728+ | "maxlength" | "rows" | "cols" | "multiple" | "alt" | "role" | "tabindex"
3729+ | "title" | "controls" | "autoplay" | "loop" | "muted" | "playsinline" | "poster"
3730+ | "preload" | "loading" | "decoding" | "ordered" | "src" | "open" | "novalidate"
3731+ | "low" | "high" | "optimum" | "colspan" | "rowspan" | "scope" | "inline"
3732+ | "responsive" | "datetime" | "media" | "sizes" | "srcset" | "cite" | "list"
3733+ | "sandbox" | "allow" | "allowfullscreen" | "referrerpolicy" | "formaction"
3734+ | "formmethod" | "formtarget" | "target" | "autofocus" => {}
17023735
1703− let mut out = String::with_capacity(css.len());
1704− for (i, (prop, raw)) in decls.iter().enumerate() {
1705− let keep = match prop {
1706− Some(p) => last.get(p) == Some(&i),
1707− None => true,
1708− };
1709− if keep {
1710− out.push_str(raw);
3736+ _ => {}
17113737 }
17123738 }
1713− out
1714−}
17153739
1716−fn emit_class_attr(out: &mut String, gen_class: Option<&str>, user_class: Option<&str>) {
1717− match (gen_class, user_class) {
1718− (Some(g), Some(u)) => {
1719− out.push_str(" class=\"");
1720− out.push_str(g);
1721− out.push(' ');
1722− out.push_str(&html_escape(u));
1723− out.push('"');
1724− }
1725− (Some(g), None) => {
1726− out.push_str(" class=\"");
1727− out.push_str(g);
1728− out.push('"');
1729− }
1730− (None, Some(u)) => {
1731− out.push_str(" class=\"");
1732− out.push_str(&html_escape(u));
1733− out.push('"');
1734− }
1735− (None, None) => {}
1736− }
3740+ css
17373741}
17383742
1739−// ---------------------------------------------------------------------------
1740−// Attribute → CSS mapping
1741−// ---------------------------------------------------------------------------
1742−
1743−/// Where an element is written, which its CSS depends on.
1744−struct Site<'a> {
1745− kind: &'a ElementKind,
1746− /// How its parent lays out its children: its `width fill`, `height
1747− /// fill` and `shrink` compile against it.
1748− parent: &'a Flow,
1749− /// It has `@in-front` / `@behind` children.
1750− has_overlay_children: bool,
1751− /// A row, column or grid inside text, laid out inline.
1752− inline: bool,
1753− /// The page's `<body>`, which the reset already makes a column.
1754− root: bool,
3743+fn push_css(css: &mut String, prop: &str, value: &str) {
3744+ css.push_str(prop);
3745+ css.push(':');
3746+ css.push_str(value);
3747+ css.push(';');
17553748}
17563749
1757−impl Site<'_> {
1758− /// Where an element in a parent with the layout `layout` and the flow
1759− /// `parent` is.
1760− fn new<'a>(elem: &'a Element, layout: Option<Layout>, parent: &'a Flow) -> Site<'a> {
1761− Site {
1762− kind: &elem.kind,
1763− parent,
1764− has_overlay_children: has_overlay_children(elem),
1765− inline: layout == Some(Layout::Text) && elem.kind.layout().is_container(),
1766− root: false,
1767− }
3750+/// Known CSS units — if a value ends with one, skip appending `px`.
3751+/// Format a length value: a bare number gets `px` appended; anything else
3752+/// (values with units, keywords like `auto`, functions like `calc(...)`) is
3753+/// passed through unchanged.
3754+fn css_px(value: &str) -> String {
3755+ let v = value.trim();
3756+ if v == "0" {
3757+ return "0".to_string();
3758+ }
3759+ let is_bare_number = !v.is_empty()
3760+ && v.bytes().all(|b| b.is_ascii_digit() || matches!(b, b'.' | b'-' | b'+'))
3761+ && v.parse::<f64>().is_ok();
3762+ if is_bare_number {
3763+ format!("{}px", v)
3764+ } else {
3765+ v.to_string()
17683766 }
17693767}
17703768
1771−// ---------------------------------------------------------------------------
1772−// Direction: what a child's `fill` and `shrink` compile against
1773−// ---------------------------------------------------------------------------
3769+/// Rewrite literal values that match a declared CSS custom property (from
3770+/// `@theme` or `@let --name value`) to `var(--name)` references. Matches are
3771+/// anchored to CSS value boundaries so e.g. `#3b82f6` inside a longer hex or
3772+/// inside an identifier is not replaced. The `:root` block is emitted before
3773+/// this call runs, so its declarations are not affected.
3774+fn substitute_css_vars(css: &str, vars: &[(String, String)]) -> String {
3775+ if css.is_empty() || vars.is_empty() {
3776+ return css.to_string();
3777+ }
3778+ // Prefer longer values first so that if two vars share a prefix, the
3779+ // longer (more specific) match wins.
3780+ let mut pairs: Vec<(&str, String)> = vars
3781+ .iter()
3782+ .filter(|(name, value)| name.starts_with("--") && !value.is_empty())
3783+ .map(|(name, value)| (value.as_str(), format!("var({})", name)))
3784+ .collect();
3785+ pairs.sort_by_key(|(v, _)| std::cmp::Reverse(v.len()));
3786+ if pairs.is_empty() {
3787+ return css.to_string();
3788+ }
17743789
1775−/// The way a flex row or column lays out its children.
1776−#[derive(Clone, Copy, PartialEq, Eq, Debug)]
1777−enum Axis {
1778− Row,
1779− Column,
1780−}
3790+ let is_boundary_before = |b: Option<u8>| match b {
3791+ None => true,
3792+ Some(c) => matches!(c, b':' | b' ' | b',' | b'(' | b';' | b'{' | b'\n' | b'\t'),
3793+ };
3794+ let is_boundary_after = |b: Option<u8>| match b {
3795+ None => true,
3796+ Some(c) => matches!(c, b';' | b'}' | b',' | b' ' | b')' | b'\n' | b'\t'),
3797+ };
17813798
1782−impl Axis {
1783− /// The direction a `flex-direction` or `flex-flow` value sets, if it
1784− /// names one (not `var(--dir)`, which only the browser knows).
1785− fn of_value(value: &str) -> Option<Axis> {
1786− value.split_whitespace().find_map(|word| match word {
1787− "row" | "row-reverse" => Some(Axis::Row),
1788− "column" | "column-reverse" => Some(Axis::Column),
1789− _ => None,
1790− })
3799+ let bytes = css.as_bytes();
3800+ let mut out = String::with_capacity(css.len());
3801+ let mut i = 0;
3802+ let mut prev: Option<u8> = None;
3803+ // Only declaration values are rewritten — never selectors or at-rule
3804+ // preludes such as `@media (min-width:768px)`. `blocks` records, for
3805+ // each open `{`, whether it holds declarations (a style rule) or nested
3806+ // rules (an at-rule like `@media` / `@layer`).
3807+ let mut blocks: Vec<bool> = Vec::new();
3808+ let mut prelude_start = 0;
3809+ let mut in_value = false;
3810+ while i < bytes.len() {
3811+ match bytes[i] {
3812+ b'{' => {
3813+ let prelude = css[prelude_start..i].trim_start();
3814+ blocks.push(!prelude.starts_with('@'));
3815+ in_value = false;
3816+ prelude_start = i + 1;
3817+ }
3818+ b'}' => {
3819+ blocks.pop();
3820+ in_value = false;
3821+ prelude_start = i + 1;
3822+ }
3823+ b';' => {
3824+ in_value = false;
3825+ prelude_start = i + 1;
3826+ }
3827+ b':' if blocks.last() == Some(&true) => in_value = true,
3828+ _ => {}
3829+ }
3830+ if in_value && is_boundary_before(prev) {
3831+ let mut matched = false;
3832+ for (val, repl) in &pairs {
3833+ let vb = val.as_bytes();
3834+ if i + vb.len() <= bytes.len() && &bytes[i..i + vb.len()] == vb {
3835+ let next = bytes.get(i + vb.len()).copied();
3836+ if is_boundary_after(next) {
3837+ out.push_str(repl);
3838+ prev = repl.as_bytes().last().copied();
3839+ i += vb.len();
3840+ matched = true;
3841+ break;
3842+ }
3843+ }
3844+ }
3845+ if matched {
3846+ continue;
3847+ }
3848+ }
3849+ // Advance by one UTF-8 code point.
3850+ let start = i;
3851+ i += 1;
3852+ while i < bytes.len() && (bytes[i] & 0xC0) == 0x80 {
3853+ i += 1;
3854+ }
3855+ out.push_str(&css[start..i]);
3856+ prev = bytes.get(i - 1).copied();
17913857 }
3858+ out
17923859}
17933860
1794−/// How an element lays out its children, as its CSS sets it: the
1795−/// direction its children's `width`/`height` `fill` and `shrink` compile
1796−/// against. That is the direction of `@row` or of a column, or the one its
1797−/// own `flex-direction` (or `flex-flow`) sets, with or without media or
1798−/// container prefixes. Like elm-ui's `.r > .wf`, the rules for a direction
1799−/// set under a prefix are keyed on the element's class: `@media (...) {
1800−/// :where(.a)>.b {...} }`.
1801−#[derive(Clone, Default)]
1802−struct Flow {
1803− /// Without a prefix; `None` when the element isn't a flex row or column
1804− /// (a grid, text, HTML's own layout, the top of the page)
1805− base: Option<Axis>,
1806− /// The direction under each chain of at-rule prefixes that sets one, in
1807− /// the order their blocks are written
1808− changes: Vec<(Vec<usize>, Axis)>,
1809− /// The element's generated class, which the rules for the changes are
1810− /// keyed on
1811− class: Option<String>,
1812−}
1813−
1814−impl Flow {
1815− fn of(elem: &Element) -> Flow {
1816− let mut base = match elem.kind.layout() {
1817− Layout::Row => Axis::Row,
1818− Layout::Column => Axis::Column,
1819− _ => return Flow::default(),
1820− };
1821− let mut changes: Vec<(Vec<usize>, Axis)> = Vec::new();
1822− for attr in elem.attrs.iter().filter(|a| !a.html) {
1823− let (condition, name) = Condition::of(&attr.key);
1824− if !matches!(name, "flex-direction" | "flex-flow") || !condition.selector.is_empty() {
3861+/// Scan generated CSS for literal property values that repeat often enough
3862+/// that substituting them with an auto-named custom property would reduce
3863+/// total byte count. Returns the rewritten CSS and any new vars that should
3864+/// be appended to `:root`.
3865+///
3866+/// The algorithm only promotes a value if it strictly saves bytes after
3867+/// accounting for the `--xN:value;` declaration overhead plus the
3868+/// `var(--xN)` reference cost at each call site. Values that are already
3869+/// `var(...)` references or contain `var(` calls are skipped so we never
3870+/// nest references. Names avoid collisions with `existing_vars`.
3871+fn auto_extract_repeats(
3872+ css: &str,
3873+ existing_vars: &[(String, String)],
3874+) -> (String, Vec<(String, String)>) {
3875+ if css.is_empty() {
3876+ return (css.to_string(), Vec::new());
3877+ }
3878+ // Count occurrences of each distinct property value (the text between
3879+ // `:` and the next `;` or `}` at the top level of a declaration block,
3880+ // ignoring balanced parentheses so that e.g. `rgba(...)` stays intact).
3881+ let bytes = css.as_bytes();
3882+ let mut counts: HashMap<String, usize> = HashMap::new();
3883+ let mut depth: i32 = 0;
3884+ let mut i = 0;
3885+ while i < bytes.len() {
3886+ match bytes[i] {
3887+ b'{' => {
3888+ depth += 1;
3889+ i += 1;
18253890 continue;
18263891 }
1827− let Some(axis) = attr.value.as_deref().and_then(Axis::of_value) else {
3892+ b'}' => {
3893+ if depth > 0 {
3894+ depth -= 1;
3895+ }
3896+ i += 1;
18283897 continue;
1829− };
1830− if condition.at.is_empty() {
1831− base = axis;
1832− } else {
1833− // The later one wins, as in the CSS
1834− changes.retain(|(at, _)| *at != condition.at);
1835− changes.push((condition.at, axis));
18363898 }
3899+ _ => {}
18373900 }
1838− changes.sort_by_key(|(at, _)| at_order(at));
1839− Flow {
1840− base: Some(base),
1841− changes,
1842− class: None,
3901+ if depth > 0 && bytes[i] == b':' {
3902+ // Skip past `:` then walk to the terminator.
3903+ let start = i + 1;
3904+ let mut end = start;
3905+ let mut pdepth = 0i32;
3906+ while end < bytes.len() {
3907+ match bytes[end] {
3908+ b'(' => pdepth += 1,
3909+ b')' if pdepth > 0 => pdepth -= 1,
3910+ b';' | b'}' if pdepth == 0 => break,
3911+ b'{' if pdepth == 0 => break,
3912+ _ => {}
3913+ }
3914+ end += 1;
3915+ }
3916+ let val = css[start..end].trim();
3917+ if !val.is_empty() && !val.starts_with("var(") && !val.contains("var(") {
3918+ *counts.entry(val.to_string()).or_default() += 1;
3919+ }
3920+ i = end;
3921+ continue;
18433922 }
3923+ i += 1;
18443924 }
18453925
1846− /// The direction under the at-rules `at`: the latest one set among
1847− /// the conditions that hold there (`md:` holds at `lg:`), else the one
1848− /// without a prefix.
1849− fn at(&self, at: &[usize]) -> Option<Axis> {
1850− let base = self.base?;
1851− let here = Condition::at_only(at);
1852− let changed = self
1853− .changes
1854− .iter()
1855− .rev()
1856− .find(|(chain, _)| Condition::at_only(chain).holds_at(&here))
1857− .map(|&(_, axis)| axis);
1858− Some(changed.unwrap_or(base))
3926+ // Decide which values are worth extracting. A value of length L appearing
3927+ // N times costs N*L bytes inline; promoting it costs (L + 6) for the
3928+ // `--hK:V;` declaration plus N * ref_len for the call sites. We estimate
3929+ // ref_len optimistically as `var(--h0)` (9 bytes) and fall back to 10 for
3930+ // two-digit indices, which only affects very large extraction counts.
3931+ let existing: std::collections::HashSet<&str> =
3932+ existing_vars.iter().map(|(n, _)| n.as_str()).collect();
3933+ let mut candidates: Vec<(String, usize)> =
3934+ counts.into_iter().filter(|(_, n)| *n >= 2).collect();
3935+ // Stable, deterministic ordering — longest values first, tiebreak by text.
3936+ candidates.sort_by(|a, b| b.0.len().cmp(&a.0.len()).then_with(|| a.0.cmp(&b.0)));
3937+
3938+ let mut extracted: Vec<(String, String)> = Vec::new();
3939+ let mut next_idx: usize = 0;
3940+ for (value, n) in candidates {
3941+ let l = value.len();
3942+ // Allocate the next unused `--hN` name.
3943+ let (name, ref_len) = loop {
3944+ let candidate = format!("--h{}", next_idx);
3945+ next_idx += 1;
3946+ let rl = candidate.len() + 6; // `var(` + name + `)`
3947+ if !existing.contains(candidate.as_str())
3948+ && !extracted.iter().any(|(n, _)| *n == candidate)
3949+ {
3950+ break (candidate, rl);
3951+ }
3952+ };
3953+ // Skip if promotion would not strictly reduce byte count.
3954+ // Before: n * l bytes. After: (l + name.len() + 2) for the :root
3955+ // declaration (`<name>:<value>;`) plus n * ref_len for the sites.
3956+ let decl_overhead = l + name.len() + 2;
3957+ let before = n * l;
3958+ let after = decl_overhead + n * ref_len;
3959+ if after < before {
3960+ extracted.push((name, value));
3961+ } else {
3962+ // Rewind the index so the next value can reuse this slot.
3963+ next_idx -= 1;
3964+ }
3965+ }
3966+
3967+ if extracted.is_empty() {
3968+ return (css.to_string(), Vec::new());
18593969 }
3970+ let new_css = substitute_css_vars(css, &extracted);
3971+ (new_css, extracted)
18603972}
18613973
1862−/// `width` or `height`.
1863−#[derive(Clone, Copy, PartialEq, Eq)]
1864−enum Dim {
1865− Width,
1866− Height,
3974+/// Format a `line-height` value. CSS accepts either a unitless multiplier
3975+/// (e.g. `1.5`) or a length (e.g. `24px`). Plain integers in htmlang source
3976+/// are ambiguous: `[line-height 24]` was historically emitted as `24` (which
3977+/// CSS interprets as 24× font-size — almost never what anyone wants). Treat
3978+/// integers ≥ 2 as pixel lengths; anything with a decimal, an existing unit,
3979+/// or the value `0`/`1` passes through unchanged.
3980+fn css_line_height(value: &str) -> String {
3981+ let v = value.trim();
3982+ if v == "0" || v == "1" {
3983+ return v.to_string();
3984+ }
3985+ // Plain integer — treat as pixel length. Decimals, units, keywords and
3986+ // functions pass through.
3987+ if !v.is_empty() && v.chars().all(|c| c.is_ascii_digit()) {
3988+ return format!("{}px", v);
3989+ }
3990+ v.to_string()
18673991}
18683992
1869−/// What a `width` or `height` says.
1870−#[derive(Clone, Copy, PartialEq, Eq)]
1871−enum Size {
1872− Fill,
1873− Shrink,
1874− /// A size of its own (`width 300`)
1875− Set,
3993+/// Format multiple space-separated values, each getting px if needed.
3994+fn css_px_multi(value: &str) -> String {
3995+ value
3996+ .split_whitespace()
3997+ .map(css_px)
3998+ .collect::<Vec<_>>()
3999+ .join(" ")
18764000}
18774001
1878−impl Size {
1879− fn of(value: &str) -> Size {
1880− match value.trim() {
1881− "fill" => Size::Fill,
1882− "shrink" => Size::Shrink,
1883− _ => Size::Set,
4002+fn extract_id_class(attrs: &[Attribute]) -> (Option<String>, Option<String>) {
4003+ let mut id = None;
4004+ let mut class = None;
4005+ for attr in attrs {
4006+ match attr.key.as_str() {
4007+ "id" => id = attr.value.clone(),
4008+ "class" => class = attr.value.clone(),
4009+ _ => {}
18844010 }
18854011 }
4012+ (id, class)
18864013}
18874014
1888−/// The declarations `fill` and `shrink` make in a parent laid out along
1889−/// `axis` (`None`: not a flex row or column). Along the parent's direction,
1890−/// `fill` takes the remaining space and `shrink` keeps the content's size;
1891−/// across it (or outside flex), `fill` is the full size and `shrink` fits
1892−/// the content.
1893−fn sizing(dim: Dim, size: Size, axis: Option<Axis>) -> &'static [(&'static str, &'static str)] {
1894− match (dim, size, axis) {
1895− (_, Size::Set, _) => &[],
1896− (Dim::Width, Size::Fill, Some(Axis::Row)) => &[("flex", "1"), ("min-width", "0")],
1897− (Dim::Width, Size::Fill, _) => &[("width", "100%")],
1898− (Dim::Width, Size::Shrink, Some(Axis::Row)) => &[("flex-shrink", "0")],
1899− (Dim::Width, Size::Shrink, _) => &[("width", "fit-content")],
1900− (Dim::Height, Size::Fill, Some(Axis::Column)) => &[("flex", "1"), ("min-height", "0")],
1901− (Dim::Height, Size::Fill, _) => &[("height", "100%")],
1902− (Dim::Height, Size::Shrink, Some(Axis::Column)) => &[("flex-shrink", "0")],
1903− (Dim::Height, Size::Shrink, _) => &[("height", "fit-content")],
4015+/// Read image dimensions from a local file by parsing the header bytes.
4016+/// Supports PNG, JPEG, GIF, WebP, AVIF, and SVG.
4017+fn read_image_dimensions(path: &str) -> Option<(u32, u32)> {
4018+ // SVG: parse as text for viewBox/width/height attributes
4019+ if path.ends_with(".svg") || path.ends_with(".SVG") {
4020+ let text = std::fs::read_to_string(path).ok()?;
4021+ return read_svg_dimensions(&text);
19044022 }
1905−}
19064023
1907−/// Every property `fill` and `shrink` of `dim` can set, with its initial
1908−/// value (`flex` covers `flex-shrink`).
1909−fn sizing_properties(dim: Dim) -> [(&'static str, &'static str); 3] {
1910− match dim {
1911− Dim::Width => [
1912− ("flex", "0 1 auto"),
1913− ("min-width", "auto"),
1914− ("width", "auto"),
1915− ],
1916− Dim::Height => [
1917− ("flex", "0 1 auto"),
1918− ("min-height", "auto"),
1919− ("height", "auto"),
1920− ],
4024+ let data = std::fs::read(path).ok()?;
4025+ if data.len() < 12 {
4026+ return None;
19214027 }
1922−}
19234028
1924−/// What an element's attributes under some prefixes say about its size.
1925−#[derive(Default)]
1926−struct Sizes {
1927− /// The last `width` and `height`
1928− width: Option<Size>,
1929− height: Option<Size>,
1930− /// A `fill` or `shrink` for the width / height is among them (a later
1931− /// size may replace it)
1932− width_word: bool,
1933− height_word: bool,
1934− /// It writes `flex`, one of its longhands (`flex-grow`, `flex-shrink`,
1935− /// `flex-basis`), `min-width` or `min-height` itself
1936− flex: bool,
1937− flex_grow: bool,
1938− flex_shrink: bool,
1939− flex_basis: bool,
1940− min_width: bool,
1941− min_height: bool,
1942−}
4029+ // PNG: 8-byte signature, then IHDR chunk with width/height at bytes 16-23
4030+ if data.len() >= 24 && data.starts_with(b"\x89PNG\r\n\x1a\n") {
4031+ let w = u32::from_be_bytes([data[16], data[17], data[18], data[19]]);
4032+ let h = u32::from_be_bytes([data[20], data[21], data[22], data[23]]);
4033+ return Some((w, h));
4034+ }
19434035
1944−impl Sizes {
1945− /// Read the attributes under the conditions that hold wherever `at`
1946− /// does, a later condition over an earlier one.
1947− fn of(attrs: &[Attribute], at: &Condition) -> Sizes {
1948− let mut sizes = Sizes::default();
1949− let mut read: Vec<(Condition, &str, &str)> = Vec::new();
1950− for attr in attrs.iter().filter(|a| !a.html) {
1951− let (condition, name) = Condition::of(&attr.key);
1952− let Some(value) = attr.value.as_deref().filter(|v| !v.trim().is_empty()) else {
4036+ // GIF: "GIF87a" or "GIF89a", width/height at bytes 6-9 (little-endian)
4037+ if data.starts_with(b"GIF87a") || data.starts_with(b"GIF89a") {
4038+ let w = u16::from_le_bytes([data[6], data[7]]) as u32;
4039+ let h = u16::from_le_bytes([data[8], data[9]]) as u32;
4040+ return Some((w, h));
4041+ }
4042+
4043+ // JPEG: scan for SOF0/SOF2 marker (0xFF 0xC0 or 0xFF 0xC2)
4044+ if data.starts_with(b"\xff\xd8") {
4045+ let mut i = 2;
4046+ while i + 9 < data.len() {
4047+ if data[i] != 0xFF {
4048+ i += 1;
19534049 continue;
1954− };
1955− if condition.holds_at(at) {
1956− read.push((condition, name, value));
1957− }
1958− }
1959− read.sort_by_cached_key(|(condition, _, _)| condition.order());
1960− for (_, name, value) in read {
1961− match name {
1962− "width" => {
1963− let size = Size::of(value);
1964− sizes.width = Some(size);
1965− sizes.width_word |= size != Size::Set;
1966− }
1967− "height" => {
1968− let size = Size::of(value);
1969− sizes.height = Some(size);
1970− sizes.height_word |= size != Size::Set;
1971− }
1972− "flex" => sizes.flex = true,
1973− "flex-grow" => sizes.flex_grow = true,
1974− "flex-shrink" => sizes.flex_shrink = true,
1975− "flex-basis" => sizes.flex_basis = true,
1976− "min-width" => sizes.min_width = true,
1977− "min-height" => sizes.min_height = true,
1978− _ => {}
19794050 }
1980− }
1981− sizes
1982− }
1983−
1984− /// The element writes `property` itself: a layout word leaves it alone.
1985− fn writes(&self, property: &str) -> bool {
1986− match property {
1987− "flex" => self.flex,
1988− "flex-grow" => self.flex || self.flex_grow,
1989− "flex-shrink" => self.flex || self.flex_shrink,
1990− "flex-basis" => self.flex || self.flex_basis,
1991− "min-width" => self.min_width,
1992− "min-height" => self.min_height,
1993− "width" => self.width == Some(Size::Set),
1994− "height" => self.height == Some(Size::Set),
1995− _ => false,
1996− }
1997− }
1998−
1999− /// Write a layout word's `property: value`, unless the element writes
2000− /// the property itself. When it writes some of `flex`'s longhands, a
2001− /// `flex` is written as the others (`flex-shrink 0, width fill` still
2002− /// grows).
2003− fn push(&self, css: &mut String, property: &str, value: &str) {
2004− if property == "flex" && !self.flex {
2005− let longhands = match value {
2006− "1" => [
2007− ("flex-grow", "1"),
2008− ("flex-shrink", "1"),
2009− ("flex-basis", "0%"),
2010− ],
2011− // The reset, `0 1 auto`
2012− _ => [
2013− ("flex-grow", "0"),
2014− ("flex-shrink", "1"),
2015− ("flex-basis", "auto"),
2016− ],
2017− };
2018− if longhands.iter().any(|&(p, _)| self.writes(p)) {
2019− for (longhand, value) in longhands {
2020− if !self.writes(longhand) {
2021− push_css(css, longhand, value);
2022− }
2023− }
2024− return;
4051+ let marker = data[i + 1];
4052+ if marker == 0xC0 || marker == 0xC2 {
4053+ let h = u16::from_be_bytes([data[i + 5], data[i + 6]]) as u32;
4054+ let w = u16::from_be_bytes([data[i + 7], data[i + 8]]) as u32;
4055+ return Some((w, h));
4056+ }
4057+ if i + 3 < data.len() {
4058+ let len = u16::from_be_bytes([data[i + 2], data[i + 3]]) as usize;
4059+ i += 2 + len;
4060+ } else {
4061+ break;
20254062 }
2026− }
2027− if !self.writes(property) {
2028− push_css(css, property, value);
20294063 }
20304064 }
2031−}
20324065
2033−/// The rule that gives an element's `fill` and `shrink`, as its attributes
2034−/// under the at-rules `at` set them, their meaning in a parent laid out
2035−/// along `axis`. Every other property a layout word could have set is put
2036−/// back to its initial value, so the rule is right whichever earlier rule
2037−/// it overrides. Properties the element writes itself are left alone.
2038−fn sizing_rule(attrs: &[Attribute], at: &[usize], axis: Axis) -> String {
2039− let sizes = Sizes::of(attrs, &Condition::at_only(at));
2040− let mut sets: Vec<(&str, &str)> = Vec::new();
2041− let mut resets: Vec<(&str, &str)> = Vec::new();
2042− for (dim, size, word) in [
2043− (Dim::Width, sizes.width, sizes.width_word),
2044− (Dim::Height, sizes.height, sizes.height_word),
2045− ] {
2046− if !word {
2047− continue;
4066+ // WebP: "RIFF" ... "WEBP", VP8 header at byte 20
4067+ if data.len() >= 30 && &data[..4] == b"RIFF" && &data[8..12] == b"WEBP" {
4068+ if &data[12..16] == b"VP8 " && data.len() >= 30 {
4069+ let w = u16::from_le_bytes([data[26], data[27]]) as u32 & 0x3FFF;
4070+ let h = u16::from_le_bytes([data[28], data[29]]) as u32 & 0x3FFF;
4071+ return Some((w, h));
20484072 }
2049− if let Some(size) = size {
2050− sets.extend_from_slice(sizing(dim, size, Some(axis)));
4073+ if &data[12..16] == b"VP8L" && data.len() >= 25 && data[21] == 0x2F {
4074+ let bits = u32::from_le_bytes([data[22], data[23], data[24], data[25]]);
4075+ let w = (bits & 0x3FFF) + 1;
4076+ let h = ((bits >> 14) & 0x3FFF) + 1;
4077+ return Some((w, h));
20514078 }
2052− resets.extend_from_slice(&sizing_properties(dim));
20534079 }
2054− let mut css = String::new();
2055− let mut written: Vec<&str> = Vec::new();
2056− for &(property, value) in &resets {
2057− if sets.iter().any(|&(p, _)| p == property) || written.contains(&property) {
2058− continue;
4080+
4081+ // AVIF: ISOBMFF container with "ftyp" box containing "avif"/"avis" brand,
4082+ // then "ispe" box with width/height
4083+ if data.len() >= 12 && &data[4..8] == b"ftyp" {
4084+ let brand = &data[8..12];
4085+ if brand == b"avif" || brand == b"avis" || brand == b"mif1" {
4086+ return read_avif_dimensions(&data);
20594087 }
2060− written.push(property);
2061− sizes.push(&mut css, property, value);
20624088 }
2063− for &(property, value) in &sets {
2064− sizes.push(&mut css, property, value);
2065− }
2066− css
2067−}
20684089
2069−/// The rules an element's `fill` and `shrink` need under each chain of
2070−/// at-rules where the direction of `flow` (its parent's) changes: `(at,
2071−/// body)`.
2072−fn sizing_changes(attrs: &[Attribute], flow: &Flow) -> Vec<(Vec<usize>, String)> {
2073− flow.changes
2074− .iter()
2075− .map(|(at, axis)| (at.clone(), sizing_rule(attrs, at, *axis)))
2076− .filter(|(_, body)| !body.is_empty())
2077− .collect()
4090+ None
20784091}
20794092
2080−/// An element's generated class, with the rules keyed on its parent's
2081−/// class that its `fill` and `shrink` need where the parent's direction
2082−/// changes under a prefix (see [`Flow`]): `:where(.a)>.b`, one class of
2083−/// specificity like any class rule.
2084−fn element_class(elem: &Element, site: &Site, styles: &mut StyleCollector) -> Option<String> {
2085− let as_child = match site.parent.class {
2086− Some(_) => sizing_changes(&elem.attrs, site.parent),
2087− None => Vec::new(),
2088− };
2089− // Two elements with the same CSS but different rules keyed on them
2090− // need two classes
2091− let mut distinct = String::new();
2092− for (at, body) in &as_child {
2093− distinct.push_str(&format!("<{:?}{}", at, body));
2094− }
2095− let class = compute_class(&elem.attrs, site, styles, distinct)?;
2096− if let Some(parent) = &site.parent.class {
2097− for (at, body) in as_child {
2098− styles.add_keyed(at, format!(":where(.{})>.{}", parent, class), body);
4093+/// Parse SVG viewBox or width/height attributes to get dimensions.
4094+fn read_svg_dimensions(text: &str) -> Option<(u32, u32)> {
4095+ // Try viewBox first: viewBox="minX minY width height"
4096+ if let Some(vb_start) = text.find("viewBox=\"") {
4097+ let rest = &text[vb_start + 9..];
4098+ if let Some(end) = rest.find('"') {
4099+ let parts: Vec<&str> = rest[..end].split_whitespace().collect();
4100+ if parts.len() == 4
4101+ && let (Ok(w), Ok(h)) = (parts[2].parse::<f64>(), parts[3].parse::<f64>())
4102+ && w > 0.0
4103+ && h > 0.0
4104+ {
4105+ return Some((w.round() as u32, h.round() as u32));
4106+ }
20994107 }
21004108 }
2101− Some(class)
4109+ // Fall back to width/height attributes on <svg>
4110+ let svg_tag = text.find("<svg")?;
4111+ let tag_end = text[svg_tag..].find('>')? + svg_tag;
4112+ let tag = &text[svg_tag..tag_end];
4113+ let w = extract_svg_attr(tag, "width")?;
4114+ let h = extract_svg_attr(tag, "height")?;
4115+ Some((w, h))
21024116}
21034117
2104−/// The `display` of a layout (nothing for text, native and void elements,
2105−/// which keep HTML's own).
2106−fn layout_css(layout: Layout, inline: bool) -> &'static str {
2107− match (layout, inline) {
2108− (Layout::Column, false) => "display:flex;flex-direction:column;",
2109− (Layout::Column, true) => "display:inline-flex;flex-direction:column;",
2110− (Layout::Row, false) => "display:flex;flex-direction:row;",
2111− (Layout::Row, true) => "display:inline-flex;flex-direction:row;",
2112− (Layout::Grid, false) => "display:grid;",
2113− (Layout::Grid, true) => "display:inline-grid;",
2114− _ => "",
2115− }
4118+fn extract_svg_attr(tag: &str, attr: &str) -> Option<u32> {
4119+ let needle = format!("{}=\"", attr);
4120+ let start = tag.find(&needle)? + needle.len();
4121+ let rest = &tag[start..];
4122+ let end = rest.find('"')?;
4123+ let val = rest[..end].trim_end_matches("px");
4124+ val.parse::<f64>().ok().map(|v| v.round() as u32)
21164125}
21174126
2118−/// The declarations of the attributes under `condition` (the defaults of
2119−/// the element's kind are [`default_css`]'s).
2120−fn attrs_to_css(attrs: &[Attribute], condition: &Condition, site: &Site) -> String {
2121− let mut css = String::new();
2122− // The auto margins of `center-x`, `align-left`, ..., written at the end
2123− let mut aligned = String::new();
2124− let kind = site.kind;
2125− // Under `children:` the styles go on the children, whose parent is this
2126− // element: htmlang's words that place an element in its parent are an
2127− // error there (the parser reports them), and left out
2128− let on_children = condition.on_children();
2129− let inside = condition.inside().is_some();
2130− // The direction `fill` and `shrink` compile against
2131− let axis = site.parent.at(&condition.at);
2132−
2133− // htmlang's words for laying out children (`spacing`, `wrap`,
2134− // `grid-cols`) mean nothing on an element that doesn't lay out its
2135− // children, which the parser reports; they are left out. Under
2136− // `children:` they go on the children, whose layout isn't known here.
2137− let lays_out_children = kind.layout().is_container() || on_children;
2138− fn under<'k>(key: &'k str, condition: &Condition) -> Option<&'k str> {
2139− let (c, name) = Condition::of(key);
2140− (c == *condition).then_some(name)
2141− }
2142−
2143− for (index, attr) in attrs.iter().enumerate() {
2144− if attr.html {
2145− continue;
2146− }
2147− let Some(effective_key) = under(&attr.key, condition) else {
2148− continue;
2149− };
2150− if on_children && crate::vocab::places_in_parent(effective_key, attr.value.as_deref()) {
2151− continue;
2152− }
2153− // Under an element prefix (`@td:`) the styles go on elements whose
2154− // layout and parent aren't known here: htmlang's own words are an
2155− // error there (the parser reports them), and left out
2156− if inside && crate::vocab::is_htmlang_word(effective_key, attr.value.as_deref()) {
2157− continue;
4127+/// Parse AVIF (ISOBMFF) container to find ispe box with image dimensions.
4128+fn read_avif_dimensions(data: &[u8]) -> Option<(u32, u32)> {
4129+ // Walk ISOBMFF boxes looking for "ispe" (image spatial extents)
4130+ let mut i = 0;
4131+ while i + 8 <= data.len() {
4132+ let box_size =
4133+ u32::from_be_bytes([data[i], data[i + 1], data[i + 2], data[i + 3]]) as usize;
4134+ let box_type = &data[i + 4..i + 8];
4135+ if box_size < 8 {
4136+ break;
21584137 }
2159−
2160− let val = attr.value.as_deref();
2161− // A style whose value came out empty (a field a record doesn't
2162− // have, `${if()}` without its other branch) is left out
2163− if val.is_some_and(|v| v.trim().is_empty()) {
2164− continue;
4138+ let box_end = (i + box_size).min(data.len());
4139+ // ispe box: 4 bytes version/flags + 4 bytes width + 4 bytes height
4140+ if box_type == b"ispe" && box_end >= i + 20 {
4141+ let w = u32::from_be_bytes([data[i + 12], data[i + 13], data[i + 14], data[i + 15]]);
4142+ let h = u32::from_be_bytes([data[i + 16], data[i + 17], data[i + 18], data[i + 19]]);
4143+ return Some((w, h));
21654144 }
2166−
2167− match effective_key {
2168− // htmlang's own words: they lay out children or place the
2169− // element in its parent, and mean more than one CSS property
2170− "spacing" if !lays_out_children => {}
2171− "spacing" => {
2172− if let Some(v) = val {
2173− push_css(&mut css, "gap", &with_px("gap", v));
2174− }
2175− }
2176−
2177− // Sizing: `fill` and `shrink` compile against the parent's
2178− // direction. Only the last `width` (`height`) counts, as for
2179− // any style written twice.
2180− "width" | "height" if val.is_some_and(|v| Size::of(v) != Size::Set) => {
2181− let later = attrs[index + 1..].iter().any(|a| {
2182− !a.html
2183− && under(&a.key, condition) == Some(effective_key)
2184− && a.value.as_deref().is_some_and(|v| !v.trim().is_empty())
2185− });
2186− if later {
2187− continue;
2188− }
2189− let dim = if effective_key == "width" {
2190− Dim::Width
2191− } else {
2192− Dim::Height
2193− };
2194− let size = Size::of(val.unwrap_or_default());
2195− // What the element writes itself, which a layout word
2196− // leaves alone
2197− let sizes = Sizes::of(attrs, condition);
2198− for &(property, value) in sizing(dim, size, axis) {
2199− sizes.push(&mut css, property, value);
2200− }
2201− }
2202−
2203− // A size of its own under a prefix, where a `fill` or
2204− // `shrink` that sets `flex` (along a flex parent's direction)
2205− // holds too: the word's `flex` and minimum are put back, so the
2206− // size is the one the element gets (`width fill, lg:width 200`
2207− // in a row)
2208− "width" | "height"
2209− if *condition != Condition::default()
2210− && attrs.iter().any(|a| {
2211− let (c, name) = Condition::of(&a.key);
2212− let along = match site.parent.at(&c.at) {
2213− Some(Axis::Row) => name == "width",
2214− Some(Axis::Column) => name == "height",
2215− None => false,
2216− };
2217− !a.html
2218− && name == effective_key
2219− && along
2220− && c != *condition
2221− && c.holds_at(condition)
2222− && a.value
2223− .as_deref()
2224− .is_some_and(|v| !v.trim().is_empty() && Size::of(v) != Size::Set)
2225− }) =>
4145+ // Recurse into container boxes (meta, iprp, ipco)
4146+ if matches!(
4147+ box_type,
4148+ b"meta" | b"iprp" | b"ipco" | b"moov" | b"trak" | b"mdia"
4149+ ) {
4150+ let header_size = if box_type == b"meta" { 12 } else { 8 };
4151+ if i + header_size < box_end
4152+ && let Some(dims) = read_avif_dimensions(&data[i + header_size..box_end])
22264153 {
2227− let dim = if effective_key == "width" {
2228− Dim::Width
2229− } else {
2230− Dim::Height
2231− };
2232− let sizes = Sizes::of(attrs, condition);
2233− for (property, value) in sizing_properties(dim) {
2234− if property != effective_key {
2235− sizes.push(&mut css, property, value);
2236− }
2237− }
2238− if let Some(v) = val {
2239− push_css(&mut css, effective_key, &with_px(effective_key, v));
2240− }
2241− }
2242−
2243− // Alignment: auto margins, which work along either direction.
2244− // They are written last, so a `margin` on the same element
2245− // keeps its other sides (`center-x, margin 20`)
2246− "center-x" => {
2247− push_css(&mut aligned, "margin-left", "auto");
2248− push_css(&mut aligned, "margin-right", "auto");
2249− }
2250− "center-y" => {
2251− push_css(&mut aligned, "margin-top", "auto");
2252− push_css(&mut aligned, "margin-bottom", "auto");
2253− }
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"),
2258−
2259− "wrap" if lays_out_children => push_css(&mut css, "flex-wrap", "wrap"),
2260− "wrap" => {}
2261−
2262− // Grid
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"
2268− } else {
2269− "grid-template-rows"
2270− };
2271− match v.parse::<u32>() {
2272− Ok(n) => push_css(&mut css, property, &format!("repeat({},1fr)", n)),
2273− Err(_) => push_css(&mut css, property, &with_px(property, v)),
2274− }
2275− }
2276− }
2277− "col-span" | "row-span" => {
2278− if let Some(v) = val {
2279− let property = if effective_key == "col-span" {
2280− "grid-column"
2281− } else {
2282− "grid-row"
2283− };
2284− push_css(&mut css, property, &format!("span {}", v));
2285− }
4154+ return Some(dims);
22864155 }
2287−
2288− // CSS's `line-clamp` has no support yet without its
2289− // `-webkit-` fallback, which needs a box to clamp
2290− "line-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");
2296− }
2297− }
2298−
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));
2307− }
2308− }
2309−
2310− _ => {}
2311− }
2312− }
2313−
2314− css.push_str(&aligned);
2315− css
2316−}
2317−
2318−fn push_css(css: &mut String, prop: &str, value: &str) {
2319− css.push_str(prop);
2320− css.push(':');
2321− css.push_str(value);
2322− css.push(';');
2323−}
2324−
2325−fn extract_id_class(attrs: &[Attribute]) -> (Option<String>, Option<String>) {
2326− let mut id = None;
2327− let mut class = None;
2328− for attr in attrs.iter().filter(|a| a.html) {
2329− match attr.key.as_str() {
2330− "id" => id = attr.value.clone(),
2331− "class" => class = attr.value.clone(),
2332− _ => {}
23334156 }
4157+ i = box_end;
23344158 }
2335− (id, class)
4159+ None
23364160}
23374161
23384162fn html_escape(s: &str) -> String {
@@ -2450,30 +4274,49 @@ fn vlq_encode(value: i64, out: &mut String) {
24504274 }
24514275}
24524276
2453−#[cfg(test)]
2454−mod tests {
2455− use super::*;
2456−
2457− #[test]
2458− fn a_name_is_a_stable_hash_of_the_style() {
2459− // The same in every build and on every platform
2460− assert_eq!(stable_hash(""), 0xf52a_15e9_a9b5_e89b);
2461− assert_eq!(hash_digits(35, 3), "z00");
2462− assert_eq!(hash_digits(u64::MAX, 13), "fsgs46211e5w3");
2463− }
2464−
2465− #[test]
2466− fn a_name_taken_in_the_file_takes_more_digits() {
2467− // These two styles' hashes end in the same 7 digits
2468− let mut styles = StyleCollector::new();
2469− let first = styles.get_class("width:129555px;".into(), Vec::new(), String::new());
2470− let second = styles.get_class("width:170577px;".into(), Vec::new(), String::new());
2471− let (first, second) = (first.unwrap(), second.unwrap());
2472− assert_eq!(first.len(), 3 + CLASS_DIGITS, "{first}");
2473− assert_eq!(second.len(), 3 + CLASS_DIGITS + 1, "{second}");
2474− assert!(second.starts_with(&first), "{first} {second}");
2475− // The same style gets the name it got before
2476− let again = styles.get_class("width:170577px;".into(), Vec::new(), String::new());
2477− assert_eq!(again.as_deref(), Some(second.as_str()));
4277+/// Check if a specific element kind exists anywhere in the node tree.
4278+fn has_element_kind(nodes: &[Node], target: &ElementKind) -> bool {
4279+ for node in nodes {
4280+ if let Node::Element(elem) = node {
4281+ if elem.kind == *target {
4282+ return true;
4283+ }
4284+ if has_element_kind(&elem.children, target) {
4285+ return true;
4286+ }
4287+ }
4288+ }
4289+ false
4290+}
4291+
4292+/// Collect unique external domains from generated HTML for DNS prefetch hints.
4293+fn collect_dns_prefetch(html: &str, dev: bool) -> String {
4294+ let mut domains = Vec::new();
4295+ let mut rest = html;
4296+ while let Some(pos) = rest.find("https://") {
4297+ let start = pos + 8; // skip "https://"
4298+ rest = &rest[start..];
4299+ let end = rest
4300+ .find(['/', '"', '\'', ' ', '>', ')'])
4301+ .unwrap_or(rest.len());
4302+ let domain = &rest[..end];
4303+ if !domain.is_empty() && domain.contains('.') && !domains.contains(&domain.to_string()) {
4304+ domains.push(domain.to_string());
4305+ }
4306+ }
4307+ let mut out = String::new();
4308+ for domain in &domains {
4309+ if dev {
4310+ out.push_str(&format!(
4311+ "<link rel=\"dns-prefetch\" href=\"//{}\">\n",
4312+ domain
4313+ ));
4314+ } else {
4315+ out.push_str(&format!(
4316+ "<link rel=\"dns-prefetch\" href=\"//{}\">",
4317+ domain
4318+ ));
4319+ }
24784320 }
4321+ out
24794322}