@stacksjs/stx 0.2.95 → 0.2.96

package/dist/vue-template.js

@@ -1,2 +1,475 @@
-// @bun
-import{Xs as a,Ys as b}from"./chunk-m8448qby.js";import"./chunk-xv34zbp4.js";export{b as processVueTemplate,a as hasVueTemplateSyntax};
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]), NATIVE_ELEMENTS = new Set([
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "search",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+]);
+function findNextOpenTag(html, startFrom) {
+  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)?)(\s*\/?)>/g;
+  tagRegex.lastIndex = startFrom;
+  const match = tagRegex.exec(html);
+  if (!match)
+    return null;
+  return {
+    full: match[0],
+    tag: match[1],
+    attrs: match[2],
+    selfClosing: match[3].includes("/") || VOID_ELEMENTS.has(match[1].toLowerCase()),
+    start: match.index,
+    end: match.index + match[0].length
+  };
+}
+function findClosingTag(html, tagName, afterOpenTag) {
+  let depth = 1, pos = afterOpenTag;
+  const openPattern = new RegExp(`<${tagName}(?:\\s(?:[^>"']|"[^"]*"|'[^']*')*)?>`, "gi"), closePattern = new RegExp(`</${tagName}\\s*>`, "gi");
+  while (depth > 0 && pos < html.length) {
+    openPattern.lastIndex = pos;
+    closePattern.lastIndex = pos;
+    const nextOpen = openPattern.exec(html), nextClose = closePattern.exec(html);
+    if (!nextClose)
+      return -1;
+    if (nextOpen && nextOpen.index < nextClose.index) {
+      depth++;
+      pos = nextOpen.index + nextOpen[0].length;
+    } else {
+      depth--;
+      if (depth === 0)
+        return nextClose.index + nextClose[0].length;
+      pos = nextClose.index + nextClose[0].length;
+    }
+  }
+  return -1;
+}
+function getElementRange(html, parsed) {
+  if (parsed.selfClosing)
+    return {
+      outerStart: parsed.start,
+      outerEnd: parsed.end,
+      innerHTML: ""
+    };
+  const closeEnd = findClosingTag(html, parsed.tag, parsed.end);
+  if (closeEnd === -1)
+    return {
+      outerStart: parsed.start,
+      outerEnd: parsed.end,
+      innerHTML: ""
+    };
+  return {
+    outerStart: parsed.start,
+    outerEnd: closeEnd,
+    innerHTML: html.slice(parsed.end, closeEnd - `</${parsed.tag}>`.length)
+  };
+}
+function hasVueDirective(attrs, directive) {
+  return new RegExp(`(?:^|\\s)${directive.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?:=|\\s|$|>|/)`).test(attrs) || attrs.includes(` ${directive}=`) || attrs.includes(` ${directive} `) || attrs.trimEnd().endsWith(` ${directive}`);
+}
+function extractDirectiveValue(attrs, directive) {
+  const escapedDirective = directive.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), match = attrs.match(new RegExp(`${escapedDirective}="([^"]*)"`, "s")) || attrs.match(new RegExp(`${escapedDirective}='([^']*)'`, "s"));
+  return match ? match[1] : null;
+}
+function removeDirective(attrs, directive) {
+  const escapedDirective = directive.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return attrs.replace(new RegExp(`\\s*${escapedDirective}="[^"]*"`, "g"), "").replace(new RegExp(`\\s*${escapedDirective}='[^']*'`, "g"), "").replace(new RegExp(`\\s*${escapedDirective}(?=\\s|$|>|/)`, "g"), "");
+}
+function replaceTagAttrs(html, parsed, newAttrs) {
+  const selfClose = parsed.selfClosing ? " /" : "", newTag = `<${parsed.tag}${newAttrs}${selfClose}>`;
+  return html.slice(0, parsed.start) + newTag + html.slice(parsed.end);
+}
+export function hasVueTemplateSyntax(template) {
+  return /\bv-(?:if|else-if|else|for|show|model|html|text|pre|once|cloak|memo|bind|on|slot)\b/.test(template);
+}
+function transformVFor(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vForValue = extractDirectiveValue(tag.attrs, "v-for");
+    if (vForValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const forMatch = vForValue.match(/^\s*\(?([^)]+)\)?\s+(?:in|of)\s+(.+)\s*$/);
+    if (!forMatch) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const iterVars = forMatch[1].trim(), collection = forMatch[2].trim();
+    let foreachExpr;
+    if (iterVars.includes(",")) {
+      const parts = iterVars.split(",").map((s) => s.trim()), item = parts[0], index = parts[1];
+      foreachExpr = `${collection} as ${index} => ${item}`;
+    } else
+      foreachExpr = `${collection} as ${iterVars}`;
+    const newAttrs = removeDirective(tag.attrs, "v-for"), cleanAttrs = removeDirective(newAttrs, ":key").replace(/\s*v-bind:key="[^"]*"/g, ""), range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), tagWithNewAttrs = replaceTagAttrs(element, {
+      ...tag,
+      start: 0,
+      end: tag.end - tag.start
+    }, cleanAttrs), foreachPrefix = `@foreach(${foreachExpr})
+`, replacement = `${foreachPrefix}${tagWithNewAttrs}
+@endforeach`;
+    result = result.slice(0, range.outerStart) + replacement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + foreachPrefix.length;
+  }
+  return result;
+}
+function transformVIfChain(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vIfValue = extractDirectiveValue(tag.attrs, "v-if");
+    if (vIfValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const chain = [], ifRange = getElementRange(result, tag), ifAttrs = removeDirective(tag.attrs, "v-if"), ifElement = replaceTagAttrs(result.slice(ifRange.outerStart, ifRange.outerEnd), {
+      ...tag,
+      start: 0,
+      end: tag.end - tag.start
+    }, ifAttrs);
+    chain.push({
+      type: "if",
+      expr: vIfValue,
+      outerStart: ifRange.outerStart,
+      outerEnd: ifRange.outerEnd,
+      element: ifElement,
+      parsedTag: tag
+    });
+    let nextSearchPos = ifRange.outerEnd, chainContinues = !0;
+    while (chainContinues) {
+      const afterWhitespace = result.slice(nextSearchPos).match(/^\s*/), wsLength = afterWhitespace ? afterWhitespace[0].length : 0, nextTag = findNextOpenTag(result, nextSearchPos + wsLength);
+      if (!nextTag) {
+        chainContinues = !1;
+        break;
+      }
+      const elseIfValue = extractDirectiveValue(nextTag.attrs, "v-else-if"), hasElse = hasVueDirective(nextTag.attrs, "v-else");
+      if (elseIfValue !== null) {
+        const elseIfRange = getElementRange(result, nextTag), elseIfAttrs = removeDirective(nextTag.attrs, "v-else-if"), elseIfElement = replaceTagAttrs(result.slice(elseIfRange.outerStart, elseIfRange.outerEnd), {
+          ...nextTag,
+          start: 0,
+          end: nextTag.end - nextTag.start
+        }, elseIfAttrs);
+        chain.push({
+          type: "else-if",
+          expr: elseIfValue,
+          outerStart: nextSearchPos,
+          outerEnd: elseIfRange.outerEnd,
+          element: elseIfElement,
+          parsedTag: nextTag
+        });
+        nextSearchPos = elseIfRange.outerEnd;
+      } else if (hasElse) {
+        const elseRange = getElementRange(result, nextTag), elseAttrs = removeDirective(nextTag.attrs, "v-else"), elseElement = replaceTagAttrs(result.slice(elseRange.outerStart, elseRange.outerEnd), {
+          ...nextTag,
+          start: 0,
+          end: nextTag.end - nextTag.start
+        }, elseAttrs);
+        chain.push({
+          type: "else",
+          outerStart: nextSearchPos,
+          outerEnd: elseRange.outerEnd,
+          element: elseElement,
+          parsedTag: nextTag
+        });
+        chainContinues = !1;
+      } else
+        chainContinues = !1;
+    }
+    const parts = [];
+    for (const item of chain)
+      if (item.type === "if")
+        parts.push(`@if(${item.expr})
+${item.element}`);
+      else if (item.type === "else-if")
+        parts.push(`@elseif(${item.expr})
+${item.element}`);
+      else
+        parts.push(`@else
+${item.element}`);
+    parts.push("@endif");
+    const replacement = parts.join(`
+`), chainStart = chain[0].outerStart, chainEnd = chain[chain.length - 1].outerEnd;
+    result = result.slice(0, chainStart) + replacement + result.slice(chainEnd);
+    searchFrom = chainStart + replacement.length;
+  }
+  return result;
+}
+function transformVShow(html) {
+  return html.replace(/\bv-show="([^"]*)"/g, '@show="$1"');
+}
+function transformVModel(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    let currentAttrs = tag.attrs, hadNamedVModel = !1;
+    const namedVModelRegex = /v-model:([a-zA-Z_][a-zA-Z0-9_]*)(?:\.([a-zA-Z.]+))?\s*=\s*"([^"]*)"/;
+    let namedMatch = currentAttrs.match(namedVModelRegex);
+    while (namedMatch) {
+      hadNamedVModel = !0;
+      const propName = namedMatch[1], _modifiers = namedMatch[2], expr = namedMatch[3];
+      currentAttrs = currentAttrs.replace(namedMatch[0], "");
+      currentAttrs += ` :${propName}="${expr}" @update:${propName}="${expr} = $event"`;
+      namedMatch = currentAttrs.match(namedVModelRegex);
+    }
+    if (hadNamedVModel) {
+      const range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), newElement = replaceTagAttrs(element, {
+        ...tag,
+        start: 0,
+        end: tag.end - tag.start
+      }, currentAttrs);
+      result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+      searchFrom = range.outerStart + newElement.length;
+      continue;
+    }
+    const modelValue = extractDirectiveValue(tag.attrs, "v-model");
+    if (modelValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    if (NATIVE_ELEMENTS.has(tag.tag.toLowerCase())) {
+      const newAttrs = tag.attrs.replace(/\s*v-model="[^"]*"/g, "") + ` @model="${modelValue}"`, range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), newElement = replaceTagAttrs(element, {
+        ...tag,
+        start: 0,
+        end: tag.end - tag.start
+      }, newAttrs);
+      result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+      searchFrom = range.outerStart + newElement.length;
+    } else {
+      let newAttrs = tag.attrs.replace(/\s*v-model="[^"]*"/g, "");
+      newAttrs += ` :modelValue="${modelValue}" @update:modelValue="${modelValue} = $event"`;
+      const range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), newElement = replaceTagAttrs(element, {
+        ...tag,
+        start: 0,
+        end: tag.end - tag.start
+      }, newAttrs);
+      result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+      searchFrom = range.outerStart + newElement.length;
+    }
+  }
+  return result;
+}
+function transformVBind(html) {
+  return html.replace(/\bv-bind:([a-zA-Z_][a-zA-Z0-9_-]*)\s*=\s*"([^"]*)"/g, '@bind:$1="$2"');
+}
+function transformVOn(html) {
+  return html.replace(/\bv-on:([a-zA-Z_][a-zA-Z0-9_.-]*)\s*=\s*"([^"]*)"/g, '@$1="$2"');
+}
+function transformVHtml(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vHtmlValue = extractDirectiveValue(tag.attrs, "v-html");
+    if (vHtmlValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    if (tag.selfClosing) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const range = getElementRange(result, tag), newAttrs = removeDirective(tag.attrs, "v-html"), selfClose = tag.selfClosing ? " /" : "", newElement = `<${tag.tag}${newAttrs}${selfClose}>{!! ${vHtmlValue} !!}</${tag.tag}>`;
+    result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + newElement.length;
+  }
+  return result;
+}
+function transformVText(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    const vTextValue = extractDirectiveValue(tag.attrs, "v-text");
+    if (vTextValue === null) {
+      searchFrom = tag.end;
+      continue;
+    }
+    if (tag.selfClosing) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const range = getElementRange(result, tag), newAttrs = removeDirective(tag.attrs, "v-text"), selfClose = tag.selfClosing ? " /" : "", newElement = `<${tag.tag}${newAttrs}${selfClose}>{{ ${vTextValue} }}</${tag.tag}>`;
+    result = result.slice(0, range.outerStart) + newElement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + newElement.length;
+  }
+  return result;
+}
+function transformVPre(html) {
+  return html.replace(/(<[a-zA-Z][a-zA-Z0-9-]*)(\s[^>]*?)\s+v-pre([^>]*>)/g, "$1$2 data-stx-skip$3").replace(/(<[a-zA-Z][a-zA-Z0-9-]*)\s+v-pre(\s[^>]*>|>)/g, "$1 data-stx-skip$2");
+}
+function transformVOnce(html) {
+  let result = html, searchFrom = 0;
+  while (searchFrom < result.length) {
+    const tag = findNextOpenTag(result, searchFrom);
+    if (!tag)
+      break;
+    if (!hasVueDirective(tag.attrs, "v-once")) {
+      searchFrom = tag.end;
+      continue;
+    }
+    const newAttrs = removeDirective(tag.attrs, "v-once"), range = getElementRange(result, tag), element = result.slice(range.outerStart, range.outerEnd), replacement = `@once
+${replaceTagAttrs(element, {
+      ...tag,
+      start: 0,
+      end: tag.end - tag.start
+    }, newAttrs)}
+@endonce`;
+    result = result.slice(0, range.outerStart) + replacement + result.slice(range.outerEnd);
+    searchFrom = range.outerStart + replacement.length;
+  }
+  return result;
+}
+function transformVMemo(html) {
+  return html.replace(/\bv-memo="([^"]*)"/g, 'data-stx-memo="$1"');
+}
+function transformVSlot(html) {
+  return html.replace(/\bv-slot:([a-zA-Z_][a-zA-Z0-9_-]*)\s*=\s*"([^"]*)"/g, '#$1="$2"').replace(/\bv-slot:([a-zA-Z_][a-zA-Z0-9_-]*)(?=[\s>])/g, "#$1").replace(/\bv-slot\s*=\s*"([^"]*)"/g, '#default="$1"');
+}
+export function processVueTemplate(template) {
+  if (!hasVueTemplateSyntax(template))
+    return template;
+  let result = template;
+  result = transformVFor(result);
+  result = transformVIfChain(result);
+  result = transformVOnce(result);
+  result = transformVBind(result);
+  result = transformVOn(result);
+  result = transformVModel(result);
+  result = transformVShow(result);
+  result = transformVSlot(result);
+  result = transformVHtml(result);
+  result = transformVText(result);
+  result = transformVPre(result);
+  result = transformVMemo(result);
+  return result;
+}

package/dist/web-components/css-scoping.js

@@ -1,2 +1,177 @@
-// @bun
-import{mt as a,nt as b,ot as c,pt as d,qt as e}from"../chunk-6djzdes9.js";import"../chunk-xv34zbp4.js";export{b as scopeCss,d as injectScopedCss,e as generateShadowDomCss,a as generateComponentId,c as extractStyleFromTemplate};
+export function generateComponentId(componentName, salt = "") {
+  const input = `${componentName}${salt}`;
+  let hash = 0;
+  for (let i = 0;i < input.length; i++) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return `stx-${Math.abs(hash).toString(36)}`;
+}
+export function scopeCss(css, componentId, options = {}) {
+  const {
+    prefix = "",
+    preserveHost = !0,
+    scopeKeyframes = !0,
+    scopeCustomProperties = !1
+  } = options;
+  if (!css.trim())
+    return "";
+  const rules = parseCssRules(css), scopedRules = [], keyframeMap = new Map;
+  if (scopeKeyframes)
+    for (const rule of rules) {
+      const keyframeMatch = rule.selector.match(/@keyframes\s+([a-z_-][a-z0-9_-]*)/i);
+      if (keyframeMatch) {
+        const originalName = keyframeMatch[1], scopedName = `${componentId}_${originalName}`;
+        keyframeMap.set(originalName, scopedName);
+      }
+    }
+  for (const rule of rules) {
+    const scopedRule = scopeRule(rule, componentId, prefix, preserveHost, keyframeMap, scopeCustomProperties);
+    scopedRules.push(scopedRule);
+  }
+  return scopedRules.join(`
+
+`);
+}
+function parseCssRules(css) {
+  const rules = [], cleanCss = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  let depth = 0, currentRule = "", inAtRule = !1, atRuleContent = "";
+  for (let i = 0;i < cleanCss.length; i++) {
+    const char = cleanCss[i];
+    if (char === "@" && depth === 0)
+      inAtRule = !0;
+    if (char === "{")
+      depth++;
+    else if (char === "}") {
+      depth--;
+      if (depth === 0) {
+        if (inAtRule) {
+          atRuleContent += char;
+          const atRuleMatch = atRuleContent.match(/@([a-z-]+)\s*([^{]*)\{([\s\S]*)\}/i);
+          if (atRuleMatch) {
+            const [, atName, atParams, innerContent] = atRuleMatch;
+            if (atName === "keyframes")
+              rules.push({
+                selector: `@keyframes ${atParams.trim()}`,
+                declarations: innerContent.trim()
+              });
+            else if (atName === "media" || atName === "supports" || atName === "container") {
+              const nestedRules = parseCssRules(innerContent);
+              rules.push({
+                selector: `@${atName} ${atParams.trim()}`,
+                declarations: nestedRules.map((r) => `${r.selector} { ${r.declarations} }`).join(`
+`)
+              });
+            } else
+              rules.push({
+                selector: `@${atName} ${atParams.trim()}`,
+                declarations: innerContent.trim()
+              });
+          }
+          atRuleContent = "";
+          inAtRule = !1;
+        } else if (currentRule.trim()) {
+          currentRule += char;
+          const ruleMatch = currentRule.match(/([^{]+)\{([^}]*)\}/);
+          if (ruleMatch)
+            rules.push({
+              selector: ruleMatch[1].trim(),
+              declarations: ruleMatch[2].trim()
+            });
+          currentRule = "";
+        }
+        continue;
+      }
+    }
+    if (inAtRule)
+      atRuleContent += char;
+    else
+      currentRule += char;
+  }
+  return rules;
+}
+function scopeRule(rule, componentId, prefix, preserveHost, keyframeMap, scopeCustomProperties) {
+  const { selector, declarations } = rule;
+  if (selector.startsWith("@")) {
+    if (selector.startsWith("@keyframes")) {
+      const keyframeName = selector.replace("@keyframes ", "").trim();
+      return `@keyframes ${keyframeMap.get(keyframeName) || keyframeName} { ${declarations} }`;
+    }
+    if (selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@container")) {
+      const scopedNested = parseCssRules(`x { ${declarations} }`.replace(/x \{ /, "").replace(/ \}$/, "")).map((r) => scopeRule(r, componentId, prefix, preserveHost, keyframeMap, scopeCustomProperties)).join(`
+  `);
+      return `${selector} {
+  ${scopedNested}
+}`;
+    }
+    return `${selector} { ${declarations} }`;
+  }
+  const scopedSelector = scopeSelector(selector, componentId, prefix, preserveHost);
+  let processedDeclarations = declarations;
+  for (const [original, scoped] of keyframeMap)
+    processedDeclarations = processedDeclarations.replace(new RegExp(`\\b${original}\\b`, "g"), scoped);
+  if (scopeCustomProperties)
+    processedDeclarations = processedDeclarations.replace(/--([a-z-]+)/gi, `--${componentId}-$1`);
+  return `${scopedSelector} { ${processedDeclarations} }`;
+}
+function scopeSelector(selector, componentId, prefix, preserveHost) {
+  const selectors = selector.split(",").map((s) => s.trim()), scopedSelectors = [];
+  for (const sel of selectors) {
+    if (sel.startsWith(":host")) {
+      if (preserveHost)
+        scopedSelectors.push(sel);
+      else {
+        const hostReplacement = sel.replace(/:host(\([^)]*\))?/, `.${componentId}$1`);
+        scopedSelectors.push(hostReplacement);
+      }
+      continue;
+    }
+    if (sel.includes("::slotted")) {
+      scopedSelectors.push(sel);
+      continue;
+    }
+    if (sel === ":root") {
+      scopedSelectors.push(`:root .${componentId}`);
+      continue;
+    }
+    const fullPrefix = prefix ? `${prefix} .${componentId}` : `.${componentId}`;
+    scopedSelectors.push(`${fullPrefix} ${sel}`);
+  }
+  return scopedSelectors.join(", ");
+}
+export function extractStyleFromTemplate(template) {
+  const styleMatch = template.match(/<style\b[^>]*>([\s\S]*?)<\/style>/i), css = styleMatch ? styleMatch[1] : "", templateWithoutStyle = styleMatch ? template.replace(/<style\b[^>]*>[\s\S]*?<\/style>/i, "") : template;
+  return { css, templateWithoutStyle };
+}
+export function injectScopedCss(template, scopedCss, position = "head") {
+  if (!scopedCss.trim())
+    return template;
+  const styleTag = `<style data-stx-scoped>
+${scopedCss}
+</style>`;
+  switch (position) {
+    case "head":
+      if (template.includes("</head>"))
+        return template.replace("</head>", `${styleTag}
+</head>`);
+      return styleTag + template;
+    case "body-start":
+      if (template.includes("<body"))
+        return template.replace(/(<body[^>]*>)/, `$1
+${styleTag}`);
+      return styleTag + template;
+    case "body-end": {
+      const csBodyIdx = template.lastIndexOf("</body>");
+      if (csBodyIdx !== -1)
+        return template.slice(0, csBodyIdx) + styleTag + `
+` + template.slice(csBodyIdx);
+      return template + styleTag;
+    }
+    default:
+      return template;
+  }
+}
+export function generateShadowDomCss(css) {
+  return css.trim();
+}

package/dist/web-components/index.js

@@ -1,2 +1,13 @@
-// @bun
-import"../chunk-xv34zbp4.js";export{r as scopeCss,s as injectScopedCss,i as generateShadowDomCss,g as generateReactiveRuntime,m as generateReactiveMixin,c as generateReactiveComponentTS,a as generateReactiveComponentJS,n as generateComponentId,o as extractStyleFromTemplate};
+export {
+  extractStyleFromTemplate,
+  generateComponentId,
+  generateShadowDomCss,
+  injectScopedCss,
+  scopeCss
+} from "./css-scoping.js";
+export {
+  generateReactiveComponentJS,
+  generateReactiveComponentTS,
+  generateReactiveMixin,
+  generateReactiveRuntime
+} from "./reactive-generator.js";