a97bc58 · htmlang · git.iko.soy

DESIGN.md−1

compare with master

unifiedsplit

@@ -98,7 +98,6 @@ name. Every container lays its children out in a column, except `@row`.

98| `@row` | div, flex row | Horizontal layout |

99| `@el` | div, flex column | The container: children laid out top to bottom |

100| `@grid` | div, grid | Grid container (use `grid-cols`) |

101−| `@stack` | div, position relative | Children layered on top of each other |

102| `@in-front` / `@behind` | div, absolute | Overlay layers filling the parent (see below) |

101| `@in-front` / `@behind` | div, absolute | Overlay layers filling the parent (see below) |

103| `@text` | span | Styled inline text |

102| `@text` | span | Styled inline text |

104| `@paragraph` | p | Flowing text with inline elements |

103| `@paragraph` | p | Flowing text with inline elements |

crates/htmlang-core/src/ast.rs−1

@@ -248,7 +248,6 @@ pub static TAGS: &[TagSpec] = &[

248 TagSpec { name: "audio", html: "audio", arg: TagArg::Attr("src"), ..TagSpec::DEFAULT },

249 TagSpec { name: "iframe", html: "iframe", arg: TagArg::Attr("src"), container: true, ..TagSpec::DEFAULT },

250 TagSpec { name: "grid", html: "div", css: "display:grid;", wraps_text: true, container: true, ..TagSpec::DEFAULT },

251− TagSpec { name: "stack", html: "div", css: "position:relative;", wraps_text: true, container: true, ..TagSpec::DEFAULT },

252 TagSpec { name: "in-front", html: "div", css: "display:flex;flex-direction:column;position:absolute;inset:0;", container: true, ..TagSpec::DEFAULT },

251 TagSpec { name: "in-front", html: "div", css: "display:flex;flex-direction:column;position:absolute;inset:0;", container: true, ..TagSpec::DEFAULT },

253 TagSpec { name: "behind", html: "div", css: "display:flex;flex-direction:column;position:absolute;inset:0;z-index:-1;", container: true, ..TagSpec::DEFAULT },

252 TagSpec { name: "behind", html: "div", css: "display:flex;flex-direction:column;position:absolute;inset:0;z-index:-1;", container: true, ..TagSpec::DEFAULT },

254];

253];

src/bin/htmlang_lsp/docs.rs−1

@@ -60,7 +60,6 @@ pub(crate) const ELEMENTS: &[Doc] = &[

60 "@slot header",

61 ),

62 doc("grid", "Grid container (`display: grid`).", "@grid [grid-cols 3, spacing 20]"),

63− doc("stack", "Children layered on top of each other (`position: relative`).", "@stack"),

64 doc(

63 doc(

65 "in-front",

64 "in-front",

66 "Overlay layer filling the parent, painted on top of its content.",

65 "Overlay layer filling the parent, painted on top of its content.",

tests/snapshots.rs−18

@@ -2455,16 +2455,6 @@ fn element_grid() {

2455

2456// --- Stack element ---

2457

2458−#[test]

2459−fn element_stack() {

2460− let output = compile("@page T\n@stack [width 200, height 200]\n @el\n @text Layer");

2461− assert!(

2462− output.contains("position:relative"),

2463− "stack should have position:relative: {}",

2464− output

2465− );

2466−}

2467−

2468// --- @in-front / @behind overlay layers ---

2458// --- @in-front / @behind overlay layers ---

2469

2459

2470#[test]

2460#[test]

@@ -2773,14 +2763,6 @@ fn no_warning_new_elements() {

2773 "grid should parse, got: {:?}",

2763 "grid should parse, got: {:?}",

2774 diags

2764 diags

2775 );

2765 );

2776− let diags = parse_diagnostics("@stack\n @text A");

2777− assert!(

2778− !diags

2779− .iter()

2780− .any(|d| d.severity == htmlang::parser::Severity::Error),

2781− "stack should parse, got: {:?}",

2782− diags

2783− );

2784 let diags = parse_diagnostics("@row\n @spacer");

2766 let diags = parse_diagnostics("@row\n @spacer");

2785 assert!(

2767 assert!(

2786 !diags

2768 !diags

tests/snapshots/new_elements_4.hl+2−2

@@ -9,8 +9,8 @@

9 @el [background #d0d0d0, padding 16]

10 @text Third

11

12−-- Stack element (position: relative container)

12+-- Overlays with absolute positioning

13−@stack [width 200, height 200]

13+@el [position relative, width 200, height 200]

14 @el [position absolute, inset 0, background #3b82f6]

15 @el [position absolute, bottom 10, right 10]

16 @text [color white] Overlay

tests/snapshots/new_elements_4.html+1−1

@@ -1 +1 @@

1−<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>New Elements 4</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::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}}@layer htmlang{.a{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}.b{display:flex;flex-direction:column;background:#f0f0f0;padding:16px;}.c{display:flex;flex-direction:column;background:#e0e0e0;padding:16px;}.d{display:flex;flex-direction:column;background:#d0d0d0;padding:16px;}.e{position:relative;width:200px;height:200px;}.f{display:flex;flex-direction:column;position:absolute;inset:0;background:#3b82f6;}.g{display:flex;flex-direction:column;position:absolute;bottom:10px;right:10px;}.h{color:white;}.i{display:flex;flex-direction:row;height:100px;}.j{display:flex;flex-direction:column;flex:1;}.k{display:flex;flex-direction:row;gap:8px;}.l{display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;justify-content:center;border-radius:9999px;line-height:1;background:#ef4444;color:white;}.m{display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;justify-content:center;border-radius:9999px;line-height:1;background:#22c55e;color:white;}.n{display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;justify-content:center;border-radius:9999px;line-height:1;background:#3b82f6;color:white;}.o{display:flex;flex-direction:row;gap:16px;}.p{position:relative;cursor:help;}.q{text-decoration:underline;}.r{font-weight:bold;}}</style></head><body><div class="a"><div class="b"><span>First</span></div><div class="c"><span>Second</span></div><div class="d"><span>Third</span></div></div><div class="e"><div class="f"></div><div class="g"><span class="h">Overlay</span></div></div><div class="i"><span>Left</span><div class="j"></div><span>Right</span></div><div class="k"><span class="l">3</span><span class="m">New</span><span class="n">Pro</span></div><div class="o"><span class="p" title="Hover me for info">Hover me for info<span class="q">Helpful text</span></span><span class="p" title="This is a tooltip message">This is a tooltip message<span class="r">Important</span></span></div></body></html>

1+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>New Elements 4</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::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}}@layer htmlang{.a{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}.b{display:flex;flex-direction:column;background:#f0f0f0;padding:16px;}.c{display:flex;flex-direction:column;background:#e0e0e0;padding:16px;}.d{display:flex;flex-direction:column;background:#d0d0d0;padding:16px;}.e{display:flex;flex-direction:column;position:relative;width:200px;height:200px;}.f{display:flex;flex-direction:column;position:absolute;inset:0;background:#3b82f6;}.g{display:flex;flex-direction:column;position:absolute;bottom:10px;right:10px;}.h{color:white;}.i{display:flex;flex-direction:row;height:100px;}.j{display:flex;flex-direction:column;flex:1;}.k{display:flex;flex-direction:row;gap:8px;}.l{display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;justify-content:center;border-radius:9999px;line-height:1;background:#ef4444;color:white;}.m{display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;justify-content:center;border-radius:9999px;line-height:1;background:#22c55e;color:white;}.n{display:inline-flex;align-items:center;padding:2px 8px;font-size:0.75rem;font-weight:600;justify-content:center;border-radius:9999px;line-height:1;background:#3b82f6;color:white;}.o{display:flex;flex-direction:row;gap:16px;}.p{position:relative;cursor:help;}.q{text-decoration:underline;}.r{font-weight:bold;}}</style></head><body><div class="a"><div class="b"><span>First</span></div><div class="c"><span>Second</span></div><div class="d"><span>Third</span></div></div><div class="e"><div class="f"></div><div class="g"><span class="h">Overlay</span></div></div><div class="i"><span>Left</span><div class="j"></div><span>Right</span></div><div class="k"><span class="l">3</span><span class="m">New</span><span class="n">Pro</span></div><div class="o"><span class="p" title="Hover me for info">Hover me for info<span class="q">Helpful text</span></span><span class="p" title="This is a tooltip message">This is a tooltip message<span class="r">Important</span></span></div></body></html>