@stacksjs/stx 0.2.110 → 0.2.112

package/dist/style-scoping.d.ts

@@ -14,9 +14,6 @@
  * @returns Processed template with scoped styles
  */
 export declare function processScopedStyles(template: string, filePath: string): ScopedStyleResult;
-/**
- * Result of processing scoped styles in a template
- */
 export declare interface ScopedStyleResult {
   html: string
   hasScoped: boolean

package/dist/style-scoping.js

@@ -1,14 +1,15 @@
 import { generateComponentId, scopeCss } from "./web-components/css-scoping.js";
+const SCOPED_STYLE_ATTR = String.raw`(?<![\w-])scoped(?![\w-])`, SCOPED_STYLE_PROBE = new RegExp(`<style\\s+[^>]*${SCOPED_STYLE_ATTR}`, "i");
 export function processScopedStyles(template, filePath) {
-  if (!/<style\s+[^>]*\bscoped\b/i.test(template))
+  if (!SCOPED_STYLE_PROBE.test(template))
     return { html: template, hasScoped: !1 };
   const componentId = generateComponentId(filePath), scopeAttr = `data-v-${componentId}`;
   let output = template;
-  const scopedStyleRegex = /<style\s+([^>]*\bscoped\b[^>]*)>([\s\S]*?)<\/style>/gi;
+  const scopedStyleRegex = new RegExp(`<style\\s+([^>]*${SCOPED_STYLE_ATTR}[^>]*)>([\\s\\S]*?)</style>`, "gi");
   let hasScoped = !1;
   output = output.replace(scopedStyleRegex, (_match, attrs, cssContent) => {
     hasScoped = !0;
-    const scopedCss = scopeCssWithAttribute(cssContent, scopeAttr), cleanAttrs = attrs.replace(/\bscoped\b/gi, "").trim(), attrStr = cleanAttrs ? ` ${cleanAttrs}` : "";
+    const scopedCss = scopeCssWithAttribute(cssContent, scopeAttr), cleanAttrs = attrs.replace(new RegExp(SCOPED_STYLE_ATTR, "gi"), "").trim(), attrStr = cleanAttrs ? ` ${cleanAttrs}` : "";
     return `<style data-stx-scoped="${componentId}"${attrStr}>${scopedCss}</style>`;
   });
   if (!hasScoped)

package/dist/variable-extractor.js

@@ -396,7 +396,7 @@ export async function extractVariables(scriptContent, context, filePath, options
     removeEventListener: () => {}
   }, mockConsole = console;
   try {
-    const convertedScript = convertToCommonJS(jsContent, filePath), propsKeys = new Set(Object.keys(propsObj)), filteredContextKeys = Object.keys(context).filter((key) => !propsKeys.has(key) && key !== "props"), filteredContextValues = filteredContextKeys.map((key) => context[key]), jsReserved = new Set([
+    const convertedScript = convertToCommonJS(jsContent, filePath), propsKeys = new Set(Object.keys(propsObj)), isIdentifier = (key) => /^[a-z_$][\w$]*$/i.test(key), filteredContextKeys = Object.keys(context).filter((key) => !propsKeys.has(key) && key !== "props" && isIdentifier(key)), filteredContextValues = filteredContextKeys.map((key) => context[key]), jsReserved = new Set([
       "break",
       "case",
       "catch",

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

@@ -137,9 +137,42 @@ function scopeSelector(selector, componentId, prefix, preserveHost) {
     }
     const fullPrefix = prefix ? `${prefix} .${componentId}` : `.${componentId}`;
     scopedSelectors.push(`${fullPrefix} ${sel}`);
+    const rootScoped = scopeFirstCompound(sel, componentId);
+    if (rootScoped)
+      scopedSelectors.push(prefix ? `${prefix} ${rootScoped}` : rootScoped);
   }
   return scopedSelectors.join(", ");
 }
+function scopeFirstCompound(selector, componentId) {
+  let depth = 0, end = selector.length;
+  for (let i = 0;i < selector.length; i++) {
+    const ch = selector[i];
+    if (ch === "[" || ch === "(")
+      depth++;
+    else if (ch === "]" || ch === ")")
+      depth--;
+    else if (depth === 0 && (ch === " " || ch === ">" || ch === "+" || ch === "~")) {
+      end = i;
+      break;
+    }
+  }
+  const compound = selector.slice(0, end), rest = selector.slice(end);
+  if (!compound)
+    return "";
+  let insertAt = compound.length, pdepth = 0;
+  for (let i = 0;i < compound.length; i++) {
+    const ch = compound[i];
+    if (ch === "[" || ch === "(")
+      pdepth++;
+    else if (ch === "]" || ch === ")")
+      pdepth--;
+    else if (depth === 0 && pdepth === 0 && ch === ":") {
+      insertAt = i;
+      break;
+    }
+  }
+  return `${compound.slice(0, insertAt)}.${componentId}${compound.slice(insertAt)}${rest}`;
+}
 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.110",
+  "version": "0.2.112",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -117,16 +117,16 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.6",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/sanitizer": "0.2.110",
+    "@stacksjs/sanitizer": "0.2.112",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.110",
+    "bun-plugin-stx": "0.2.112",
     "bunfig": "^0.15.15",
-    "stx-router": "0.2.110",
+    "stx-router": "0.2.112",
     "ts-broadcasting": "^0.0.9",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "optionalDependencies": {
-    "@stacksjs/desktop": "0.2.110"
+    "@stacksjs/desktop": "0.2.112"
   }
 }