@webto-id/variant-check 0.1.1 → 0.1.2

package/dist/cli.js

@@ -176,12 +176,19 @@ var Parser = class {
     const lower = tag.toLowerCase();
     if (RAW_TEXT_TAGS.has(lower)) {
       if (selfClose) this.fail(`<${tag}> cannot be self-closing`);
-      const close = new RegExp(`</${lower}\\s*>`, "i");
+      const boundary = new RegExp(`</${lower}(?=[\\s/>])`, "i");
       const rest = this.src.slice(this.pos);
-      const mm = close.exec(rest);
+      const mm = boundary.exec(rest);
       if (!mm) this.fail(`missing </${lower}>`);
+      const after = rest.slice(mm.index + mm[0].length);
+      const clean = /^\s*>/.exec(after);
+      if (!clean) {
+        this.fail(
+          `malformed </${lower}> \u2014 a raw text block must close with exactly </${lower}>; the browser ends it at '</${lower}' followed by whitespace or '/', so anything else here would execute unchecked`
+        );
+      }
       const text = rest.slice(0, mm.index);
-      this.pos += mm.index + mm[0].length;
+      this.pos += mm.index + mm[0].length + clean[0].length;
       const raw = {};
       for (const [k, v] of Object.entries(attrs)) raw[k] = typeof v === "string" || v === true ? v : "{expr}";
       const block = { tag: lower, attrs: raw, text, line: startLine };
@@ -1216,6 +1223,7 @@ function lintCss(css, sectionType2, attrs = {}) {
   if ("is:global" in attrs) err("style-global", "<style is:global> is not allowed \u2014 variant CSS is always scoped");
   if ("define:vars" in attrs) err("style-define-vars", "<style define:vars> is not supported \u2014 use var(--color-*) / var(--radius) tokens");
   if (css.length > 64 * 1024) err("style-size", "style block exceeds 64 KB");
+  if (/<\//.test(css)) err("css-raw-close", "'</' is not allowed inside a <style> block (it can close the block early and inject markup)");
   const stripped = css.replace(/\/\*[\s\S]*?\*\//g, " ");
   if (/@import\b/i.test(stripped)) err("css-import", "@import is not allowed");
   if (/@font-face\b/i.test(stripped)) err("css-font-face", "@font-face is not allowed \u2014 fonts come from the site theme (var(--font-heading|--font-body))");
@@ -1316,7 +1324,49 @@ var FORBIDDEN_MEMBERS = /* @__PURE__ */ new Set([
   "defineProperty",
   "getOwnPropertyDescriptor",
   "setPrototypeOf",
-  "getPrototypeOf"
+  "getPrototypeOf",
+  // Routes back to a window/document object, from which a forbidden name could
+  // be reached as a property (see the FORBIDDEN_IDENTS-as-member rule below).
+  "defaultView",
+  "ownerDocument",
+  "getRootNode"
+]);
+var URL_BEARING_STYLE_PROPS = /* @__PURE__ */ new Set([
+  "background",
+  "backgroundImage",
+  "listStyle",
+  "listStyleImage",
+  "borderImage",
+  "borderImageSource",
+  "content",
+  "cursor",
+  "mask",
+  "maskImage",
+  "webkitMaskImage",
+  "webkitMask",
+  "filter",
+  "backdropFilter",
+  "src",
+  "offsetPath",
+  "clipPath",
+  "shapeOutside",
+  "cssText"
+]);
+var URL_BEARING_PROPS = /* @__PURE__ */ new Set([
+  "src",
+  "href",
+  "action",
+  "srcset",
+  "poster",
+  "data",
+  "formAction",
+  "formaction",
+  "background",
+  "ping",
+  "cite",
+  "codeBase",
+  "lowsrc",
+  "xlinkHref"
 ]);
 var DYNAMIC_HTML = /* @__PURE__ */ new Set(["innerHTML", "outerHTML"]);
 var FORBIDDEN_CALLS = /* @__PURE__ */ new Set(["atob", "btoa", "unescape", "decodeURIComponent", "setTimeout", "setInterval"]);
@@ -1335,6 +1385,7 @@ function lintScript(src, attrs = {}) {
   if (/\bwith\s*\(/.test(src)) err("script-with", "`with` is not allowed");
   if (/\bimport\s*\(/.test(src) || /\bimport\s+[\w{*]/.test(src) || /\bexport\s+/.test(src)) err("script-import", "import/export are not allowed in inline scripts");
   if (/\bdebugger\b/.test(src)) err("script-debugger", "`debugger` is not allowed");
+  if (/<\//.test(src)) err("script-raw-close", "'</' is not allowed inside a <script> block (it can close the block early and inject markup)");
   let ast;
   try {
     ast = acorn.parse(src, { ecmaVersion: 2022, sourceType: "script", allowReturnOutsideFunction: true, locations: true });
@@ -1367,6 +1418,7 @@ function lintScript(src, attrs = {}) {
           if (obj.type === "Identifier" && /^(window|document|globalThis|self|Object|Array)$/.test(obj.name)) err("script-forbidden", `computed member access on ${obj.name} is not allowed`, lineOf2(n));
         }
         if (p && FORBIDDEN_MEMBERS.has(p)) err("script-forbidden", `'.${p}' is not allowed`, lineOf2(n));
+        if (p && FORBIDDEN_IDENTS.has(p)) err("script-forbidden", `'.${p}' is not allowed`, lineOf2(n));
         break;
       }
       case "AssignmentExpression": {
@@ -1374,8 +1426,15 @@ function lintScript(src, attrs = {}) {
         if (left.type === "MemberExpression") {
           const p = propName(left);
           if (p && DYNAMIC_HTML.has(p) && n.right.type !== "Literal") err("script-html", `assigning a non-literal to .${p} is not allowed`, lineOf2(n));
-          if (p === "src" || p === "href" || p === "action") err("script-forbidden", `assigning .${p} is not allowed`, lineOf2(n));
+          if (p && URL_BEARING_PROPS.has(p)) err("script-forbidden", `assigning .${p} is not allowed (it loads a URL \u2014 an outbound channel for page data)`, lineOf2(n));
           if (p && /^on[a-z]+$/.test(p)) err("script-forbidden", `assigning .${p} handlers is not allowed \u2014 use addEventListener`, lineOf2(n));
+          if (p && URL_BEARING_STYLE_PROPS.has(p)) {
+            const obj = left.object;
+            if (obj.type === "MemberExpression" && propName(obj) === "style") {
+              err("script-forbidden", `assigning .style.${p} is not allowed (it can load a URL)`, lineOf2(n));
+            }
+          }
+          if (p === "style") err("script-forbidden", "assigning .style wholesale is not allowed \u2014 set individual layout properties", lineOf2(n));
         }
         break;
       }
@@ -1621,7 +1680,11 @@ function getCompiler() {
   return compilerPromise;
 }
 __name(getCompiler, "getCompiler");
-var CANDIDATE_RE = /^[!@]?[A-Za-z0-9_][\w:/\[\].%#(),-]*$/;
+var CANDIDATE_RE = /^[!@]?-?[A-Za-z0-9_][\w:/\[\].%#(),-]*$/;
+function isCandidate(t) {
+  return !!t && t.length <= 96 && CANDIDATE_RE.test(t) && !/url\(/i.test(t);
+}
+__name(isCandidate, "isCandidate");
 var MACRO_CLASSES = [
   "mx-auto w-full px-6",
   "inline-flex items-center justify-center font-medium transition-all duration-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -1695,7 +1758,7 @@ function deriveSchema(fields, props, base2) {
 __name(deriveSchema, "deriveSchema");
 
 // ../variant-compiler/src/index.ts
-var COMPILER_VERSION = "0.1.0";
+var COMPILER_VERSION = "0.1.2";
 var IR_MAX_BYTES = 256 * 1024;
 var CSS_MAX_BYTES = 64 * 1024;
 var STRICT_CODES = /* @__PURE__ */ new Set(["dead-text", "hardcoded-color", "hardcoded-radius", "hardcoded-font", "hardcoded-image", "img-alt", "props-optional"]);
@@ -1768,12 +1831,22 @@ async function compile2(source2, opts) {
   if (tpl.scripts[0]) lint.push(...lintScript(script, tpl.scripts[0].attrs).map((m) => ({ ...m, line: m.line != null ? m.line + tpl.scripts[0].line : tpl.scripts[0].line })));
   lint.push(...lintHtml(tpl.root, opts.sectionType));
   const strings = [];
+  const classTokens = /* @__PURE__ */ new Set();
   walkNodes(tpl.root, (e) => collectStrings(e, strings), (attrs) => {
-    for (const v of Object.values(attrs)) if (typeof v === "string") strings.push(v);
+    for (const [k, v] of Object.entries(attrs)) {
+      if (typeof v !== "string") continue;
+      strings.push(v);
+      if (k === "class" || k === "class:list") {
+        for (const t of v.split(/\s+/)) if (t) classTokens.add(t);
+      }
+    }
   });
   for (const c of front.consts) collectStrings(c.e, strings);
   for (const p of front.props) if (p.def) collectStrings(p.def, strings);
   const classCandidates = pickCandidates(strings);
+  for (const t of classTokens) {
+    if (!isCandidate(t)) lint.push({ level: "warning", code: "tailwind-skipped", message: `class token '${t}' is not a shape the compiler accepts, so no CSS is generated for it \u2014 rewrite it (e.g. an arbitrary value like mt-[-4rem]) or drop it` });
+  }
   let twCss = "";
   if (!opts.skipTailwind) {
     try {
@@ -2012,8 +2085,15 @@ function collectStrings(e, out) {
 __name(collectStrings, "collectStrings");
 
 // ../variant-compiler/src/runtime/eval.ts
+var JSX_VALUES = /* @__PURE__ */ new WeakSet();
+function makeJsxValue(nodes, scope) {
+  const v = { __wvJsx: true, nodes, scope };
+  JSX_VALUES.add(v);
+  return v;
+}
+__name(makeJsxValue, "makeJsxValue");
 function isJsxValue(v) {
-  return typeof v === "object" && v !== null && v.__wvJsx === true;
+  return typeof v === "object" && v !== null && JSX_VALUES.has(v);
 }
 __name(isJsxValue, "isJsxValue");
 var FORBIDDEN_PROPS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
@@ -2152,7 +2232,7 @@ function evalExpr(e, scope, budget) {
         return evalExpr(e.body, s, budget);
       };
     case "jsx":
-      return { __wvJsx: true, nodes: e.n, scope };
+      return makeJsxValue(e.n, scope);
   }
 }
 __name(evalExpr, "evalExpr");
@@ -2335,11 +2415,24 @@ function renderVariant(ir, content, ctx, opts = {}) {
   }
   for (const c of ir.consts) scope[c.name] = evalExpr(c.e, scope, budget);
   const html = renderNodes(ir.root, scope, ctx, budget);
-  const css = ir.css ? ir.css.replace(/__WV_ROOT__/g, `[data-wv-inst="${uid}"]`) : "";
+  const css = ir.css ? layerize(ir.css.replace(/__WV_ROOT__/g, `[data-wv-inst="${uid}"]`)) : "";
   const script = ir.script ? wrapScript(ir.script, uid) : "";
   return { html, css, script, uid };
 }
 __name(renderVariant, "renderVariant");
+var STATEMENT_AT = /^\s*@[a-zA-Z-]+[^;{}]*;/;
+function layerize(css) {
+  let rest = css;
+  let head = "";
+  for (; ; ) {
+    const m = rest.match(STATEMENT_AT);
+    if (!m) break;
+    head += m[0].trim();
+    rest = rest.slice(m[0].length);
+  }
+  return rest.trim() ? `${head}@layer wvf{${rest}}` : head;
+}
+__name(layerize, "layerize");
 function wrapScript(body, uid) {
   return `(function(${SHADOWED_GLOBALS.join(",")}){"use strict";var root=document.querySelector('[data-wv-inst="${uid}"]');if(!root)return;
 ${body}
@@ -2360,10 +2453,13 @@ __name(isPreviewThemeKey, "isPreviewThemeKey");
 function buildPreviewDoc(ir, content, themeKey, opts = {}) {
   const th = PREVIEW_THEMES[themeKey];
   const out = renderVariant(ir, content, { t: /* @__PURE__ */ __name((k) => k, "t"), editChrome: opts.editChrome ?? false }, { uid: "wv-preview" });
-  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:#fff;--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:#000;--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${th.primary};--gradient-to:${th.secondary};--spacing:.25rem;--site-max-width:72rem;`;
+  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:#fff;--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:#000;--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${th.primary};--gradient-to:${th.secondary};--spacing:.25rem;--site-max-width:72rem;--font-heading-size:48px;--font-body-size:16px;`;
   const tokens = `--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);`;
   return `<!doctype html><html data-theme="${themeKey === "dark" ? "dark" : "light"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">
-<style>*,::before,::after{box-sizing:border-box;border:0 solid var(--color-border)}html{font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);color:var(--foreground);background:var(--background);line-height:1.5}h1,h2,h3,h4,p{margin:0}h1{font-size:48px}h2{font-size:36px}h3{font-size:28px}img,video,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:inherit}button{font:inherit;color:inherit;background:none}ul,ol{margin:0;padding:0;list-style:none}:root{${vars}${tokens}}.edit-url-pill{display:none!important}</style>
+<style>@layer wvfbase{*,::before,::after{box-sizing:border-box;border:0 solid var(--color-border)}html{font-size:var(--font-body-size,16px);-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);color:var(--foreground);background:var(--background);line-height:1.5}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}h1,h2,h3,h4,p{margin:0}img,video,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:inherit}button{font:inherit;color:inherit;background:none}ul,ol{margin:0;padding:0;list-style:none}}
+:root{${vars}${tokens}}
+h1{font-size:var(--font-heading-size,48px)}h2{font-size:calc(var(--font-heading-size,48px) * 0.75)}h3{font-size:calc(var(--font-heading-size,48px) * 0.6)}h4{font-size:calc(var(--font-heading-size,48px) * 0.5)}
+.edit-url-pill{display:none!important}</style>
 <style>${out.css}</style></head><body><div data-wv-root data-wv-inst="${out.uid}">${out.html}</div>${out.script ? `<script>${out.script}</script>` : ""}</body></html>`;
 }
 __name(buildPreviewDoc, "buildPreviewDoc");

package/dist/index.js

@@ -173,12 +173,19 @@ var Parser = class {
     const lower = tag.toLowerCase();
     if (RAW_TEXT_TAGS.has(lower)) {
       if (selfClose) this.fail(`<${tag}> cannot be self-closing`);
-      const close = new RegExp(`</${lower}\\s*>`, "i");
+      const boundary = new RegExp(`</${lower}(?=[\\s/>])`, "i");
       const rest = this.src.slice(this.pos);
-      const mm = close.exec(rest);
+      const mm = boundary.exec(rest);
       if (!mm) this.fail(`missing </${lower}>`);
+      const after = rest.slice(mm.index + mm[0].length);
+      const clean = /^\s*>/.exec(after);
+      if (!clean) {
+        this.fail(
+          `malformed </${lower}> \u2014 a raw text block must close with exactly </${lower}>; the browser ends it at '</${lower}' followed by whitespace or '/', so anything else here would execute unchecked`
+        );
+      }
       const text = rest.slice(0, mm.index);
-      this.pos += mm.index + mm[0].length;
+      this.pos += mm.index + mm[0].length + clean[0].length;
       const raw = {};
       for (const [k, v] of Object.entries(attrs)) raw[k] = typeof v === "string" || v === true ? v : "{expr}";
       const block = { tag: lower, attrs: raw, text, line: startLine };
@@ -1213,6 +1220,7 @@ function lintCss(css, sectionType, attrs = {}) {
   if ("is:global" in attrs) err("style-global", "<style is:global> is not allowed \u2014 variant CSS is always scoped");
   if ("define:vars" in attrs) err("style-define-vars", "<style define:vars> is not supported \u2014 use var(--color-*) / var(--radius) tokens");
   if (css.length > 64 * 1024) err("style-size", "style block exceeds 64 KB");
+  if (/<\//.test(css)) err("css-raw-close", "'</' is not allowed inside a <style> block (it can close the block early and inject markup)");
   const stripped = css.replace(/\/\*[\s\S]*?\*\//g, " ");
   if (/@import\b/i.test(stripped)) err("css-import", "@import is not allowed");
   if (/@font-face\b/i.test(stripped)) err("css-font-face", "@font-face is not allowed \u2014 fonts come from the site theme (var(--font-heading|--font-body))");
@@ -1313,7 +1321,49 @@ var FORBIDDEN_MEMBERS = /* @__PURE__ */ new Set([
   "defineProperty",
   "getOwnPropertyDescriptor",
   "setPrototypeOf",
-  "getPrototypeOf"
+  "getPrototypeOf",
+  // Routes back to a window/document object, from which a forbidden name could
+  // be reached as a property (see the FORBIDDEN_IDENTS-as-member rule below).
+  "defaultView",
+  "ownerDocument",
+  "getRootNode"
+]);
+var URL_BEARING_STYLE_PROPS = /* @__PURE__ */ new Set([
+  "background",
+  "backgroundImage",
+  "listStyle",
+  "listStyleImage",
+  "borderImage",
+  "borderImageSource",
+  "content",
+  "cursor",
+  "mask",
+  "maskImage",
+  "webkitMaskImage",
+  "webkitMask",
+  "filter",
+  "backdropFilter",
+  "src",
+  "offsetPath",
+  "clipPath",
+  "shapeOutside",
+  "cssText"
+]);
+var URL_BEARING_PROPS = /* @__PURE__ */ new Set([
+  "src",
+  "href",
+  "action",
+  "srcset",
+  "poster",
+  "data",
+  "formAction",
+  "formaction",
+  "background",
+  "ping",
+  "cite",
+  "codeBase",
+  "lowsrc",
+  "xlinkHref"
 ]);
 var DYNAMIC_HTML = /* @__PURE__ */ new Set(["innerHTML", "outerHTML"]);
 var FORBIDDEN_CALLS = /* @__PURE__ */ new Set(["atob", "btoa", "unescape", "decodeURIComponent", "setTimeout", "setInterval"]);
@@ -1332,6 +1382,7 @@ function lintScript(src, attrs = {}) {
   if (/\bwith\s*\(/.test(src)) err("script-with", "`with` is not allowed");
   if (/\bimport\s*\(/.test(src) || /\bimport\s+[\w{*]/.test(src) || /\bexport\s+/.test(src)) err("script-import", "import/export are not allowed in inline scripts");
   if (/\bdebugger\b/.test(src)) err("script-debugger", "`debugger` is not allowed");
+  if (/<\//.test(src)) err("script-raw-close", "'</' is not allowed inside a <script> block (it can close the block early and inject markup)");
   let ast;
   try {
     ast = acorn.parse(src, { ecmaVersion: 2022, sourceType: "script", allowReturnOutsideFunction: true, locations: true });
@@ -1364,6 +1415,7 @@ function lintScript(src, attrs = {}) {
           if (obj.type === "Identifier" && /^(window|document|globalThis|self|Object|Array)$/.test(obj.name)) err("script-forbidden", `computed member access on ${obj.name} is not allowed`, lineOf2(n));
         }
         if (p && FORBIDDEN_MEMBERS.has(p)) err("script-forbidden", `'.${p}' is not allowed`, lineOf2(n));
+        if (p && FORBIDDEN_IDENTS.has(p)) err("script-forbidden", `'.${p}' is not allowed`, lineOf2(n));
         break;
       }
       case "AssignmentExpression": {
@@ -1371,8 +1423,15 @@ function lintScript(src, attrs = {}) {
         if (left.type === "MemberExpression") {
           const p = propName(left);
           if (p && DYNAMIC_HTML.has(p) && n.right.type !== "Literal") err("script-html", `assigning a non-literal to .${p} is not allowed`, lineOf2(n));
-          if (p === "src" || p === "href" || p === "action") err("script-forbidden", `assigning .${p} is not allowed`, lineOf2(n));
+          if (p && URL_BEARING_PROPS.has(p)) err("script-forbidden", `assigning .${p} is not allowed (it loads a URL \u2014 an outbound channel for page data)`, lineOf2(n));
           if (p && /^on[a-z]+$/.test(p)) err("script-forbidden", `assigning .${p} handlers is not allowed \u2014 use addEventListener`, lineOf2(n));
+          if (p && URL_BEARING_STYLE_PROPS.has(p)) {
+            const obj = left.object;
+            if (obj.type === "MemberExpression" && propName(obj) === "style") {
+              err("script-forbidden", `assigning .style.${p} is not allowed (it can load a URL)`, lineOf2(n));
+            }
+          }
+          if (p === "style") err("script-forbidden", "assigning .style wholesale is not allowed \u2014 set individual layout properties", lineOf2(n));
         }
         break;
       }
@@ -1618,7 +1677,11 @@ function getCompiler() {
   return compilerPromise;
 }
 __name(getCompiler, "getCompiler");
-var CANDIDATE_RE = /^[!@]?[A-Za-z0-9_][\w:/\[\].%#(),-]*$/;
+var CANDIDATE_RE = /^[!@]?-?[A-Za-z0-9_][\w:/\[\].%#(),-]*$/;
+function isCandidate(t) {
+  return !!t && t.length <= 96 && CANDIDATE_RE.test(t) && !/url\(/i.test(t);
+}
+__name(isCandidate, "isCandidate");
 var MACRO_CLASSES = [
   "mx-auto w-full px-6",
   "inline-flex items-center justify-center font-medium transition-all duration-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -1692,7 +1755,7 @@ function deriveSchema(fields, props, base) {
 __name(deriveSchema, "deriveSchema");
 
 // ../variant-compiler/src/index.ts
-var COMPILER_VERSION = "0.1.0";
+var COMPILER_VERSION = "0.1.2";
 var IR_MAX_BYTES = 256 * 1024;
 var CSS_MAX_BYTES = 64 * 1024;
 var STRICT_CODES = /* @__PURE__ */ new Set(["dead-text", "hardcoded-color", "hardcoded-radius", "hardcoded-font", "hardcoded-image", "img-alt", "props-optional"]);
@@ -1765,12 +1828,22 @@ async function compile2(source, opts) {
   if (tpl.scripts[0]) lint.push(...lintScript(script, tpl.scripts[0].attrs).map((m) => ({ ...m, line: m.line != null ? m.line + tpl.scripts[0].line : tpl.scripts[0].line })));
   lint.push(...lintHtml(tpl.root, opts.sectionType));
   const strings = [];
+  const classTokens = /* @__PURE__ */ new Set();
   walkNodes(tpl.root, (e) => collectStrings(e, strings), (attrs) => {
-    for (const v of Object.values(attrs)) if (typeof v === "string") strings.push(v);
+    for (const [k, v] of Object.entries(attrs)) {
+      if (typeof v !== "string") continue;
+      strings.push(v);
+      if (k === "class" || k === "class:list") {
+        for (const t of v.split(/\s+/)) if (t) classTokens.add(t);
+      }
+    }
   });
   for (const c of front.consts) collectStrings(c.e, strings);
   for (const p of front.props) if (p.def) collectStrings(p.def, strings);
   const classCandidates = pickCandidates(strings);
+  for (const t of classTokens) {
+    if (!isCandidate(t)) lint.push({ level: "warning", code: "tailwind-skipped", message: `class token '${t}' is not a shape the compiler accepts, so no CSS is generated for it \u2014 rewrite it (e.g. an arbitrary value like mt-[-4rem]) or drop it` });
+  }
   let twCss = "";
   if (!opts.skipTailwind) {
     try {
@@ -2009,8 +2082,15 @@ function collectStrings(e, out) {
 __name(collectStrings, "collectStrings");
 
 // ../variant-compiler/src/runtime/eval.ts
+var JSX_VALUES = /* @__PURE__ */ new WeakSet();
+function makeJsxValue(nodes, scope) {
+  const v = { __wvJsx: true, nodes, scope };
+  JSX_VALUES.add(v);
+  return v;
+}
+__name(makeJsxValue, "makeJsxValue");
 function isJsxValue(v) {
-  return typeof v === "object" && v !== null && v.__wvJsx === true;
+  return typeof v === "object" && v !== null && JSX_VALUES.has(v);
 }
 __name(isJsxValue, "isJsxValue");
 var FORBIDDEN_PROPS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
@@ -2149,7 +2229,7 @@ function evalExpr(e, scope, budget) {
         return evalExpr(e.body, s, budget);
       };
     case "jsx":
-      return { __wvJsx: true, nodes: e.n, scope };
+      return makeJsxValue(e.n, scope);
   }
 }
 __name(evalExpr, "evalExpr");
@@ -2332,11 +2412,24 @@ function renderVariant(ir, content, ctx, opts = {}) {
   }
   for (const c of ir.consts) scope[c.name] = evalExpr(c.e, scope, budget);
   const html = renderNodes(ir.root, scope, ctx, budget);
-  const css = ir.css ? ir.css.replace(/__WV_ROOT__/g, `[data-wv-inst="${uid}"]`) : "";
+  const css = ir.css ? layerize(ir.css.replace(/__WV_ROOT__/g, `[data-wv-inst="${uid}"]`)) : "";
   const script = ir.script ? wrapScript(ir.script, uid) : "";
   return { html, css, script, uid };
 }
 __name(renderVariant, "renderVariant");
+var STATEMENT_AT = /^\s*@[a-zA-Z-]+[^;{}]*;/;
+function layerize(css) {
+  let rest = css;
+  let head = "";
+  for (; ; ) {
+    const m = rest.match(STATEMENT_AT);
+    if (!m) break;
+    head += m[0].trim();
+    rest = rest.slice(m[0].length);
+  }
+  return rest.trim() ? `${head}@layer wvf{${rest}}` : head;
+}
+__name(layerize, "layerize");
 function wrapScript(body, uid) {
   return `(function(${SHADOWED_GLOBALS.join(",")}){"use strict";var root=document.querySelector('[data-wv-inst="${uid}"]');if(!root)return;
 ${body}
@@ -2357,10 +2450,13 @@ __name(isPreviewThemeKey, "isPreviewThemeKey");
 function buildPreviewDoc(ir, content, themeKey, opts = {}) {
   const th = PREVIEW_THEMES[themeKey];
   const out = renderVariant(ir, content, { t: /* @__PURE__ */ __name((k) => k, "t"), editChrome: opts.editChrome ?? false }, { uid: "wv-preview" });
-  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:#fff;--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:#000;--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${th.primary};--gradient-to:${th.secondary};--spacing:.25rem;--site-max-width:72rem;`;
+  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:#fff;--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:#000;--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${th.primary};--gradient-to:${th.secondary};--spacing:.25rem;--site-max-width:72rem;--font-heading-size:48px;--font-body-size:16px;`;
   const tokens = `--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);`;
   return `<!doctype html><html data-theme="${themeKey === "dark" ? "dark" : "light"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">
-<style>*,::before,::after{box-sizing:border-box;border:0 solid var(--color-border)}html{font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);color:var(--foreground);background:var(--background);line-height:1.5}h1,h2,h3,h4,p{margin:0}h1{font-size:48px}h2{font-size:36px}h3{font-size:28px}img,video,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:inherit}button{font:inherit;color:inherit;background:none}ul,ol{margin:0;padding:0;list-style:none}:root{${vars}${tokens}}.edit-url-pill{display:none!important}</style>
+<style>@layer wvfbase{*,::before,::after{box-sizing:border-box;border:0 solid var(--color-border)}html{font-size:var(--font-body-size,16px);-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);color:var(--foreground);background:var(--background);line-height:1.5}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}h1,h2,h3,h4,p{margin:0}img,video,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:inherit}button{font:inherit;color:inherit;background:none}ul,ol{margin:0;padding:0;list-style:none}}
+:root{${vars}${tokens}}
+h1{font-size:var(--font-heading-size,48px)}h2{font-size:calc(var(--font-heading-size,48px) * 0.75)}h3{font-size:calc(var(--font-heading-size,48px) * 0.6)}h4{font-size:calc(var(--font-heading-size,48px) * 0.5)}
+.edit-url-pill{display:none!important}</style>
 <style>${out.css}</style></head><body><div data-wv-root data-wv-inst="${out.uid}">${out.html}</div>${out.script ? `<script>${out.script}</script>` : ""}</body></html>`;
 }
 __name(buildPreviewDoc, "buildPreviewDoc");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webto-id/variant-check",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Lint, compile and preview a Webto Variant Format (.astro subset) section variant with the exact compiler the webto.id marketplace uses.",
   "license": "MIT",
   "type": "module",