windrunner 1.0.0 → 1.0.2

package/README.md

@@ -42,11 +42,18 @@ npm install windrunner
 
 ```html
 <script type="module">
-  import { windrunner } from "https://cdn.jsdelivr.net/npm/windrunner@1.0.0/dist/index.min.js";
+  import { windrunner } from "https://cdn.jsdelivr.net/npm/windrunner@1.0.1/dist/index.min.js";
   windrunner({ autoStart: true });
 </script>
 ```
 
+### Live demo / Example landing page
+
+Try the example landing page:
+
+- CodeSandbox (example landing): https://xj6q66.csb.app
+
+
 ### React / Vue
 
 ```js

package/dist/index.esm.js

@@ -728,6 +728,7 @@ var theme = {
   },
   grayscale: {
     0: "0",
+    50: "0.5",
     DEFAULT: "100%"
   },
   gridAutoColumns: {
@@ -918,6 +919,7 @@ var theme = {
   }),
   invert: {
     0: "0",
+    50: "0.5",
     DEFAULT: "100%"
   },
   letterSpacing: {
@@ -1142,6 +1144,7 @@ var theme = {
   scrollPadding: ({ theme: theme2 }) => theme2("spacing"),
   sepia: {
     0: "0",
+    50: "0.5",
     DEFAULT: "100%"
   },
   skew: {
@@ -1414,12 +1417,7 @@ function getConfigOptions(options = {}, pluginKeys = []) {
   const newTheme = {};
   const themeKeys = Object.keys(config_default.theme);
   themeKeys.forEach((key) => {
-    newTheme[key] = theme2[key] || config_default.theme[key];
-    if (isFunction(newTheme[key])) {
-      newTheme[key] = newTheme[key]({
-        theme: (keyRef) => config_default.theme[keyRef]
-      });
-    }
+    newTheme[key] = Object.prototype.hasOwnProperty.call(theme2, key) ? theme2[key] : config_default.theme[key];
   });
   themeKeys.forEach((key) => {
     if (isFunction(newTheme[key])) {
@@ -1643,6 +1641,65 @@ var BOX_SIZING_MAP = {
   border: "box-sizing: border-box;",
   content: "box-sizing: content-box;"
 };
+var BREAK_AFTER_MAP = {
+  auto: "break-after: auto;",
+  avoid: "break-after: avoid;",
+  "avoid-page": "break-after: avoid-page;",
+  "avoid-column": "break-after: avoid-column;",
+  page: "break-after: page;",
+  all: "break-after: all;",
+  left: "break-after: left;",
+  right: "break-after: right;",
+  recto: "break-after: recto;",
+  verso: "break-after: verso;"
+};
+var BREAK_BEFORE_MAP = {
+  auto: "break-before: auto;",
+  avoid: "break-before: avoid;",
+  "avoid-page": "break-before: avoid-page;",
+  "avoid-column": "break-before: avoid-column;",
+  page: "break-before: page;",
+  left: "break-before: left;",
+  right: "break-before: right;",
+  recto: "break-before: recto;",
+  verso: "break-before: verso;"
+};
+var BREAK_INSIDE_MAP = {
+  auto: "break-inside: auto;",
+  avoid: "break-inside: avoid;",
+  "avoid-page": "break-inside: avoid-page;",
+  "avoid-column": "break-inside: avoid-column;"
+};
+var BOX_DECORATION_BREAK_MAP = {
+  slice: "box-decoration-break: slice;",
+  clone: "box-decoration-break: clone;"
+};
+var HYPHENS_MAP = {
+  none: "hyphens: none;",
+  manual: "hyphens: manual;",
+  auto: "hyphens: auto;"
+};
+var COLOR_SCHEME_MAP = {
+  light: "color-scheme: light;",
+  dark: "color-scheme: dark;",
+  normal: "color-scheme: normal;"
+};
+var SCROLLBAR_COLOR_MAP = {
+  auto: "scrollbar-color: auto;",
+  transparent: "scrollbar-color: transparent;",
+  current: "scrollbar-color: currentColor;"
+};
+var SCROLLBAR_WIDTH_MAP = {
+  auto: "scrollbar-width: auto;",
+  thin: "scrollbar-width: thin;",
+  none: "scrollbar-width: none;"
+};
+var SCROLLBAR_GUTTER_MAP = {
+  auto: "scrollbar-gutter: auto;",
+  stable: "scrollbar-gutter: stable;",
+  "stable-both-edges": "scrollbar-gutter: stable both-edges;",
+  "both-edges": "scrollbar-gutter: both-edges;"
+};
 var TABLE_LAYOUT_MAP = {
   auto: "table-layout: auto;",
   fixed: "table-layout: fixed;"
@@ -1799,6 +1856,16 @@ function buildLayoutDeclaration(baseToken, theme2) {
     const val = resolveThemeValue(theme2.order || {}, baseToken.slice(6));
     if (val !== void 0) return `order: ${val};`;
   }
+  if (baseToken.startsWith("break-after-")) return BREAK_AFTER_MAP[baseToken.slice(12)] ?? void 0;
+  if (baseToken.startsWith("break-before-")) return BREAK_BEFORE_MAP[baseToken.slice(13)] ?? void 0;
+  if (baseToken.startsWith("break-inside-")) return BREAK_INSIDE_MAP[baseToken.slice(13)] ?? void 0;
+  if (baseToken.startsWith("box-decoration-break-")) return BOX_DECORATION_BREAK_MAP[baseToken.slice(21)] ?? void 0;
+  if (baseToken.startsWith("hyphens-")) return HYPHENS_MAP[baseToken.slice(8)] ?? void 0;
+  if (baseToken.startsWith("color-scheme-")) return COLOR_SCHEME_MAP[baseToken.slice(13)] ?? void 0;
+  if (baseToken.startsWith("scrollbar-color-")) return SCROLLBAR_COLOR_MAP[baseToken.slice(16)] ?? void 0;
+  if (baseToken.startsWith("scrollbar-width-")) return SCROLLBAR_WIDTH_MAP[baseToken.slice(16)] ?? void 0;
+  if (baseToken.startsWith("scrollbar-gutter-")) return SCROLLBAR_GUTTER_MAP[baseToken.slice(17)] ?? void 0;
+  if (baseToken.startsWith("scroll-behavior-")) return SCROLL_BEHAVIOR_MAP[baseToken.slice(16)] ?? void 0;
   if (baseToken.startsWith("aspect-")) {
     const val = resolveThemeValue(theme2.aspectRatio || {}, baseToken.slice(7));
     if (val !== void 0) return `aspect-ratio: ${val};`;
@@ -1845,10 +1912,14 @@ function buildLayoutDeclaration(baseToken, theme2) {
     if (val !== void 0) return `will-change: ${val};`;
   }
   if (baseToken.startsWith("content-")) {
-    const val = resolveThemeValue(theme2.content || {}, baseToken.slice(8));
-    if (val !== void 0) return `content: "${val}";`;
-    const arb = resolveArbitraryValue(baseToken.slice(8));
-    if (arb !== void 0) return `content: ${arb};`;
+    const valueKey = baseToken.slice(8);
+    if (valueKey.startsWith("[") && valueKey.endsWith("]")) {
+      const arb = resolveArbitraryValue(valueKey);
+      if (arb !== void 0) return `content: ${arb};`;
+    } else {
+      const val = resolveThemeValue(theme2.content || {}, valueKey);
+      if (val !== void 0) return `content: "${val}";`;
+    }
   }
   if (baseToken.startsWith("size-")) {
     const val = resolveThemeValue(theme2.size || theme2.spacing || {}, baseToken.slice(5));
@@ -1931,6 +2002,12 @@ function buildGapDeclaration(baseToken, theme2) {
 }
 function buildDimensionDeclaration(baseToken, theme2) {
   const patterns = [
+    { prefix: "min-inline-size-", prop: "min-inline-size", scale: theme2.minWidth || theme2.width || theme2.spacing || {} },
+    { prefix: "max-inline-size-", prop: "max-inline-size", scale: theme2.maxWidth || theme2.width || theme2.spacing || {} },
+    { prefix: "inline-size-", prop: "inline-size", scale: theme2.width || theme2.spacing || {} },
+    { prefix: "min-block-size-", prop: "min-block-size", scale: theme2.minHeight || theme2.height || theme2.spacing || {} },
+    { prefix: "max-block-size-", prop: "max-block-size", scale: theme2.maxHeight || theme2.height || theme2.spacing || {} },
+    { prefix: "block-size-", prop: "block-size", scale: theme2.height || theme2.spacing || {} },
     { prefix: "min-w-", prop: "min-width", scale: theme2.minWidth || theme2.width || {} },
     { prefix: "max-w-", prop: "max-width", scale: theme2.maxWidth || theme2.width || {} },
     { prefix: "min-h-", prop: "min-height", scale: theme2.minHeight || theme2.height || {} },
@@ -2002,6 +2079,7 @@ var JUSTIFY_CONTENT_MAP = {
   stretch: "justify-content: stretch;"
 };
 var JUSTIFY_ITEMS_MAP = {
+  normal: "justify-items: normal;",
   start: "justify-items: start;",
   end: "justify-items: end;",
   center: "justify-items: center;",
@@ -2175,6 +2253,7 @@ var TEXT_TRANSFORM_MAP = {
 };
 var TEXT_OVERFLOW_MAP = {
   truncate: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",
+  "overflow-ellipsis": "text-overflow: ellipsis;",
   "text-ellipsis": "text-overflow: ellipsis;",
   "text-clip": "text-overflow: clip;"
 };
@@ -2196,6 +2275,35 @@ var FONT_STYLE_MAP = {
   italic: "font-style: italic;",
   "not-italic": "font-style: normal;"
 };
+var FONT_STRETCH_MAP = {
+  "ultra-condensed": "font-stretch: ultra-condensed;",
+  "extra-condensed": "font-stretch: extra-condensed;",
+  condensed: "font-stretch: condensed;",
+  "semi-condensed": "font-stretch: semi-condensed;",
+  normal: "font-stretch: normal;",
+  "semi-expanded": "font-stretch: semi-expanded;",
+  expanded: "font-stretch: expanded;",
+  "extra-expanded": "font-stretch: extra-expanded;",
+  "ultra-expanded": "font-stretch: ultra-expanded;"
+};
+var FONT_VARIANT_NUMERIC_MAP = {
+  ordinal: "font-variant-numeric: ordinal;",
+  "slashed-zero": "font-variant-numeric: slashed-zero;",
+  "lining-nums": "font-variant-numeric: lining-nums;",
+  "oldstyle-nums": "font-variant-numeric: oldstyle-nums;",
+  "proportional-nums": "font-variant-numeric: proportional-nums;",
+  "tabular-nums": "font-variant-numeric: tabular-nums;",
+  "diagonal-fractions": "font-variant-numeric: diagonal-fractions;",
+  "stacked-fractions": "font-variant-numeric: stacked-fractions;"
+};
+var LIST_STYLE_IMAGE_MAP = {
+  none: "list-style-image: none;"
+};
+var HYPHENS_MAP2 = {
+  none: "hyphens: none;",
+  manual: "hyphens: manual;",
+  auto: "hyphens: auto;"
+};
 var FONT_SMOOTHING_MAP = {
   antialiased: "-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;",
   "subpixel-antialiased": "-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;"
@@ -2244,6 +2352,12 @@ function buildTypographyDeclaration(baseToken, theme2) {
       return `font-family: ${fontFamily};`;
     }
   }
+  if (baseToken.startsWith("font-stretch-")) {
+    return FONT_STRETCH_MAP[baseToken.slice(13)] ?? void 0;
+  }
+  if (baseToken.startsWith("font-variant-numeric-")) {
+    return FONT_VARIANT_NUMERIC_MAP[baseToken.slice(21)] ?? void 0;
+  }
   if (baseToken.startsWith("leading-")) {
     const val = resolveThemeValue(theme2.lineHeight || {}, baseToken.slice(8));
     if (val !== void 0) return `line-height: ${val};`;
@@ -2271,13 +2385,18 @@ function buildTypographyDeclaration(baseToken, theme2) {
   if (baseToken.startsWith("list-")) {
     const key = baseToken.slice(5);
     if (LIST_STYLE_POSITION_MAP[key]) return LIST_STYLE_POSITION_MAP[key];
+    if (LIST_STYLE_IMAGE_MAP[baseToken]) return LIST_STYLE_IMAGE_MAP[baseToken.slice(17)] ?? void 0;
     const val = resolveThemeValue(theme2.listStyleType || {}, key);
     if (val !== void 0) return `list-style-type: ${val};`;
   }
+  if (baseToken.startsWith("list-style-image-")) {
+    return LIST_STYLE_IMAGE_MAP[baseToken.slice(17)] ?? void 0;
+  }
   if (baseToken.startsWith("whitespace-")) {
     const key = baseToken.slice(11);
     if (WHITESPACE_MAP[key]) return WHITESPACE_MAP[key];
   }
+  if (baseToken.startsWith("hyphens-")) return HYPHENS_MAP2[baseToken.slice(8)] ?? void 0;
   if (baseToken === "text-wrap") return "text-wrap: wrap;";
   if (baseToken === "text-nowrap") return "text-wrap: nowrap;";
   if (baseToken === "text-balance") return "text-wrap: balance;";
@@ -2416,6 +2535,48 @@ var PERSPECTIVE_MAP = {
   midrange: "perspective: 800px;",
   distant: "perspective: 1200px;"
 };
+var PERSPECTIVE_ORIGIN_MAP = {
+  center: "perspective-origin: center;",
+  top: "perspective-origin: top;",
+  bottom: "perspective-origin: bottom;",
+  left: "perspective-origin: left;",
+  right: "perspective-origin: right;",
+  "top-left": "perspective-origin: top left;",
+  "top-right": "perspective-origin: top right;",
+  "bottom-left": "perspective-origin: bottom left;",
+  "bottom-right": "perspective-origin: bottom right;"
+};
+var MASK_CLIP_MAP = {
+  "mask-clip-border": "mask-clip: border; -webkit-mask-clip: border;",
+  "mask-clip-padding": "mask-clip: padding; -webkit-mask-clip: padding;",
+  "mask-clip-content": "mask-clip: content; -webkit-mask-clip: content;",
+  "mask-clip-text": "mask-clip: text; -webkit-mask-clip: text;"
+};
+var MASK_COMPOSITE_MAP = {
+  "mask-composite-add": "mask-composite: add; -webkit-mask-composite: add;",
+  "mask-composite-subtract": "mask-composite: subtract; -webkit-mask-composite: subtract;",
+  "mask-composite-intersect": "mask-composite: intersect; -webkit-mask-composite: intersect;",
+  "mask-composite-exclude": "mask-composite: exclude; -webkit-mask-composite: exclude;",
+  "mask-composite-replace": "mask-composite: replace; -webkit-mask-composite: replace;",
+  "mask-composite-xor": "mask-composite: xor; -webkit-mask-composite: xor;"
+};
+var MASK_MODE_MAP = {
+  "mask-mode-alpha": "mask-mode: alpha; -webkit-mask-mode: alpha;",
+  "mask-mode-luminance": "mask-mode: luminance; -webkit-mask-mode: luminance;",
+  "mask-mode-match-source": "mask-mode: match-source; -webkit-mask-mode: match-source;"
+};
+var MASK_ORIGIN_MAP = {
+  "mask-origin-border": "mask-origin: border-box; -webkit-mask-origin: border-box;",
+  "mask-origin-padding": "mask-origin: padding-box; -webkit-mask-origin: padding-box;",
+  "mask-origin-content": "mask-origin: content-box; -webkit-mask-origin: content-box;",
+  "mask-origin-fill": "mask-origin: fill-box; -webkit-mask-origin: fill-box;",
+  "mask-origin-stroke": "mask-origin: stroke-box; -webkit-mask-origin: stroke-box;",
+  "mask-origin-view": "mask-origin: view-box; -webkit-mask-origin: view-box;"
+};
+var MASK_TYPE_MAP = {
+  "mask-type-luminance": "mask-type: luminance; -webkit-mask-type: luminance;",
+  "mask-type-alpha": "mask-type: alpha; -webkit-mask-type: alpha;"
+};
 var MASK_LINEAR_MAP = {
   "mask-linear-to-t": "mask-image: linear-gradient(to top, black, transparent); -webkit-mask-image: linear-gradient(to top, black, transparent);",
   "mask-linear-to-tr": "mask-image: linear-gradient(to top right, black, transparent); -webkit-mask-image: linear-gradient(to top right, black, transparent);",
@@ -2540,11 +2701,14 @@ function buildShadowDeclaration(baseToken, theme2) {
   }
   if (!baseToken.startsWith("shadow-")) return void 0;
   const valueKey = baseToken.slice(7);
-  const color = resolveColorWithOpacity(theme2.colors || {}, valueKey);
-  if (color !== void 0) return `--tw-shadow-color: ${color};`;
+  const arb = resolveArbitraryValue(valueKey);
+  if (arb !== void 0) return `box-shadow: ${arb};`;
   const value = resolveThemeValue(theme2.boxShadow || {}, valueKey);
-  if (value === void 0) return void 0;
-  return `box-shadow: ${value};`;
+  if (value !== void 0) return `box-shadow: ${value};`;
+  const colorScale = theme2.boxShadowColor || theme2.colors || {};
+  const color = resolveColorWithOpacity(colorScale, valueKey);
+  if (color !== void 0) return `--tw-shadow-color: ${color};`;
+  return void 0;
 }
 function buildInsetShadowDeclaration(baseToken, theme2) {
   if (baseToken === "inset-shadow") return INSET_SHADOW_SIZES.DEFAULT;
@@ -2612,7 +2776,10 @@ function buildRingOffsetDeclaration(baseToken, theme2) {
   if (widthVal !== void 0) {
     return `--tw-ring-offset-width: ${widthVal}; box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color, #fff), var(--tw-ring-shadow, 0 0 #0000);`;
   }
-  const color = resolveColorWithOpacity(theme2.ringOffsetColor || theme2.colors || {}, key);
+  let color = resolveColorWithOpacity(theme2.ringOffsetColor || {}, key);
+  if (color === void 0) {
+    color = resolveColorWithOpacity(theme2.colors || {}, key);
+  }
   if (color !== void 0) return `--tw-ring-offset-color: ${color};`;
   return void 0;
 }
@@ -2733,6 +2900,12 @@ function buildTransformDeclaration(baseToken, theme2) {
     const val = resolveThemeValue(theme2.transformOrigin || {}, normalized.slice(7));
     if (val !== void 0) return `transform-origin: ${val};`;
   }
+  if (normalized.startsWith("perspective-origin-")) {
+    const key = normalized.slice(19);
+    if (PERSPECTIVE_ORIGIN_MAP[key]) return PERSPECTIVE_ORIGIN_MAP[key];
+    const arb = resolveArbitraryValue(key);
+    if (arb !== void 0) return `perspective-origin: ${arb};`;
+  }
   if (normalized.startsWith("perspective-")) {
     const key = normalized.slice(12);
     if (PERSPECTIVE_MAP[key]) return PERSPECTIVE_MAP[key];
@@ -2756,15 +2929,26 @@ function buildFilterDeclaration(baseToken, theme2) {
     }
     return theme2[key] || {};
   };
+  if (rest === "filter") {
+    return `${prefix}: none;`;
+  }
   if (rest === "blur" || rest.startsWith("blur-")) {
     const key = rest === "blur" ? "DEFAULT" : rest.slice(5);
     const val = resolveThemeValue(getScale("blur"), key);
     if (val !== void 0) return `${prefix}: blur(${val});`;
   }
+  if (rest === "brightness") {
+    const val = resolveThemeValue(getScale("brightness"), "100") || resolveThemeValue(getScale("brightness"), "DEFAULT") || "1";
+    return `${prefix}: brightness(${val});`;
+  }
   if (rest.startsWith("brightness-")) {
     const val = resolveThemeValue(getScale("brightness"), rest.slice(11));
     if (val !== void 0) return `${prefix}: brightness(${val});`;
   }
+  if (rest === "contrast") {
+    const val = resolveThemeValue(getScale("contrast"), "100") || resolveThemeValue(getScale("contrast"), "DEFAULT") || "1";
+    return `${prefix}: contrast(${val});`;
+  }
   if (rest.startsWith("contrast-")) {
     const val = resolveThemeValue(getScale("contrast"), rest.slice(9));
     if (val !== void 0) return `${prefix}: contrast(${val});`;
@@ -2774,6 +2958,10 @@ function buildFilterDeclaration(baseToken, theme2) {
     const val = resolveThemeValue(getScale("grayscale"), key);
     if (val !== void 0) return `${prefix}: grayscale(${val});`;
   }
+  if (rest === "hue-rotate") {
+    const val = resolveThemeValue(getScale("hueRotate"), "0") || resolveThemeValue(getScale("hueRotate"), "DEFAULT") || "0deg";
+    return `${prefix}: hue-rotate(${val});`;
+  }
   if (rest.startsWith("hue-rotate-")) {
     const val = resolveThemeValue(getScale("hueRotate"), rest.slice(11));
     if (val !== void 0) {
@@ -2786,6 +2974,10 @@ function buildFilterDeclaration(baseToken, theme2) {
     const val = resolveThemeValue(getScale("invert"), key);
     if (val !== void 0) return `${prefix}: invert(${val});`;
   }
+  if (rest === "saturate") {
+    const val = resolveThemeValue(getScale("saturate"), "100") || resolveThemeValue(getScale("saturate"), "DEFAULT") || "1";
+    return `${prefix}: saturate(${val});`;
+  }
   if (rest.startsWith("saturate-")) {
     const val = resolveThemeValue(getScale("saturate"), rest.slice(9));
     if (val !== void 0) return `${prefix}: saturate(${val});`;
@@ -2803,6 +2995,10 @@ function buildFilterDeclaration(baseToken, theme2) {
     const val = resolveThemeValue(theme2.dropShadow || {}, rest.slice(12) || "DEFAULT");
     if (val !== void 0) return `filter: drop-shadow(${val});`;
   }
+  if (isBackdrop && rest === "opacity") {
+    const val = resolveThemeValue(theme2.backdropOpacity || theme2.opacity || {}, "DEFAULT") || "1";
+    return `backdrop-filter: opacity(${val});`;
+  }
   if (isBackdrop && rest.startsWith("opacity-")) {
     const val = resolveThemeValue(theme2.backdropOpacity || theme2.opacity || {}, rest.slice(8));
     if (val !== void 0) return `backdrop-filter: opacity(${val});`;
@@ -2849,6 +3045,11 @@ function buildAnimationDeclaration(baseToken) {
   return void 0;
 }
 function buildMaskDeclaration(baseToken) {
+  if (MASK_CLIP_MAP[baseToken]) return MASK_CLIP_MAP[baseToken];
+  if (MASK_COMPOSITE_MAP[baseToken]) return MASK_COMPOSITE_MAP[baseToken];
+  if (MASK_MODE_MAP[baseToken]) return MASK_MODE_MAP[baseToken];
+  if (MASK_ORIGIN_MAP[baseToken]) return MASK_ORIGIN_MAP[baseToken];
+  if (MASK_TYPE_MAP[baseToken]) return MASK_TYPE_MAP[baseToken];
   if (MASK_LINEAR_MAP[baseToken]) return MASK_LINEAR_MAP[baseToken];
   if (MASK_REPEAT_MAP[baseToken]) return MASK_REPEAT_MAP[baseToken];
   if (MASK_SIZE_MAP[baseToken]) return MASK_SIZE_MAP[baseToken];
@@ -2881,6 +3082,7 @@ function buildInteractivityDeclaration(baseToken, theme2) {
   if (baseToken.startsWith("cursor-")) return CURSOR_MAP[baseToken.slice(7)] ?? void 0;
   if (baseToken.startsWith("pointer-events-")) return POINTER_EVENTS_MAP[baseToken.slice(15)] ?? void 0;
   if (baseToken.startsWith("select-")) return USER_SELECT_MAP[baseToken.slice(7)] ?? void 0;
+  if (baseToken.startsWith("user-select-")) return USER_SELECT_MAP[baseToken.slice(12)] ?? void 0;
   if (baseToken.startsWith("appearance-")) {
     return APPEARANCE_MAP[baseToken.slice(11)] ? `appearance: ${baseToken.slice(11)};` : void 0;
   }
@@ -2984,6 +3186,12 @@ function buildBlendingDeclaration(baseToken) {
 }
 
 // src/builders/space-divide.js
+function childScoped(declaration) {
+  return { __childScoped: true, declaration };
+}
+function isChildScoped(result) {
+  return result !== null && typeof result === "object" && result.__childScoped === true;
+}
 function buildSpaceBetweenDeclaration(baseToken, theme2) {
   const negative = baseToken.startsWith("-");
   const normalized = negative ? baseToken.slice(1) : baseToken;
@@ -2994,22 +3202,22 @@ function buildSpaceBetweenDeclaration(baseToken, theme2) {
     let val = resolveThemeValue(theme2.spacing || {}, matchX[1]);
     if (val === void 0) return void 0;
     if (negative && val !== "0") val = `-${val}`;
-    return [
+    return childScoped([
       `--tw-space-x-reverse: 0;`,
       `margin-inline-end: calc(${val} * var(--tw-space-x-reverse));`,
       `margin-inline-start: calc(${val} * calc(1 - var(--tw-space-x-reverse)));`
-    ].join(" ");
+    ].join(" "));
   }
   const matchY = normalized.match(/^space-y-(.+)$/);
   if (matchY) {
     let val = resolveThemeValue(theme2.spacing || {}, matchY[1]);
     if (val === void 0) return void 0;
     if (negative && val !== "0") val = `-${val}`;
-    return [
+    return childScoped([
       `--tw-space-y-reverse: 0;`,
       `margin-bottom: calc(${val} * var(--tw-space-y-reverse));`,
       `margin-top: calc(${val} * calc(1 - var(--tw-space-y-reverse)));`
-    ].join(" ");
+    ].join(" "));
   }
   return void 0;
 }
@@ -3019,22 +3227,22 @@ function buildDivideDeclaration(baseToken, theme2) {
   if (key === "x" || key === "x-reverse") {
     if (key === "x-reverse") return "--tw-divide-x-reverse: 1;";
     const val = resolveThemeValue(theme2.borderWidth || {}, "DEFAULT") || "1px";
-    return `--tw-divide-x-reverse: 0; border-inline-end-width: calc(${val} * var(--tw-divide-x-reverse)); border-inline-start-width: calc(${val} * calc(1 - var(--tw-divide-x-reverse)));`;
+    return childScoped(`--tw-divide-x-reverse: 0; border-inline-end-width: calc(${val} * var(--tw-divide-x-reverse)); border-inline-start-width: calc(${val} * calc(1 - var(--tw-divide-x-reverse)));`);
   }
   const matchX = key.match(/^x-(\d+)$/);
   if (matchX) {
     const val = resolveThemeValue(theme2.borderWidth || {}, matchX[1]);
-    if (val !== void 0) return `--tw-divide-x-reverse: 0; border-inline-end-width: calc(${val} * var(--tw-divide-x-reverse)); border-inline-start-width: calc(${val} * calc(1 - var(--tw-divide-x-reverse)));`;
+    if (val !== void 0) return childScoped(`--tw-divide-x-reverse: 0; border-inline-end-width: calc(${val} * var(--tw-divide-x-reverse)); border-inline-start-width: calc(${val} * calc(1 - var(--tw-divide-x-reverse)));`);
   }
   if (key === "y" || key === "y-reverse") {
     if (key === "y-reverse") return "--tw-divide-y-reverse: 1;";
     const val = resolveThemeValue(theme2.borderWidth || {}, "DEFAULT") || "1px";
-    return `--tw-divide-y-reverse: 0; border-bottom-width: calc(${val} * var(--tw-divide-y-reverse)); border-top-width: calc(${val} * calc(1 - var(--tw-divide-y-reverse)));`;
+    return childScoped(`--tw-divide-y-reverse: 0; border-bottom-width: calc(${val} * var(--tw-divide-y-reverse)); border-top-width: calc(${val} * calc(1 - var(--tw-divide-y-reverse)));`);
   }
   const matchY = key.match(/^y-(\d+)$/);
   if (matchY) {
     const val = resolveThemeValue(theme2.borderWidth || {}, matchY[1]);
-    if (val !== void 0) return `--tw-divide-y-reverse: 0; border-bottom-width: calc(${val} * var(--tw-divide-y-reverse)); border-top-width: calc(${val} * calc(1 - var(--tw-divide-y-reverse)));`;
+    if (val !== void 0) return childScoped(`--tw-divide-y-reverse: 0; border-bottom-width: calc(${val} * var(--tw-divide-y-reverse)); border-top-width: calc(${val} * calc(1 - var(--tw-divide-y-reverse)));`);
   }
   if (BORDER_STYLE_MAP[key]) return `border-style: ${BORDER_STYLE_MAP[key].replace("border-style: ", "").replace(";", "")};`;
   if (key === "none") return "border-style: none;";
@@ -3044,10 +3252,10 @@ function buildDivideDeclaration(baseToken, theme2) {
   if (key === "double") return "border-style: double;";
   const colors = theme2.colors || {};
   const color = resolveColorWithOpacity(theme2.divideColor || colors, key);
-  if (color !== void 0) return `border-color: ${color};`;
+  if (color !== void 0) return childScoped(`border-color: ${color};`);
   if (key.startsWith("opacity-")) {
     const val = resolveThemeValue(theme2.opacity || {}, key.slice(8));
-    if (val !== void 0) return `--tw-divide-opacity: ${val};`;
+    if (val !== void 0) return childScoped(`--tw-divide-opacity: ${val};`);
   }
   return void 0;
 }
@@ -3191,8 +3399,8 @@ function resolveRuntimeContext(options = {}) {
   return {
     config,
     theme: config.theme || {},
-    screens: config.theme && config.theme.screens || {},
-    containers: config.theme && config.theme.containers || {}
+    screens: config.theme && config.theme.screens || config.screens || {},
+    containers: config.theme && config.theme.containers || config.containers || {}
   };
 }
 function getBaseTailwindOptions(options = {}) {
@@ -3241,28 +3449,22 @@ function compileRuntimeClassNameWithContext(className, context) {
   const selector = `.${escapeCssIdentifier(parsed.original)}`;
   const variantSelector = applyVariants(selector, parsed.variants);
   if (!variantSelector) return "";
-  const finalDeclaration = appendImportant(declaration, parsed.important);
-  const needsSpaceChildSelector = parsed.baseToken.startsWith("space-x-") && parsed.baseToken !== "space-x-reverse" || parsed.baseToken.startsWith("space-y-") && parsed.baseToken !== "space-y-reverse";
-  const scopedSelector = needsSpaceChildSelector ? `${variantSelector} > :not(:first-child)` : variantSelector;
+  const finalDeclaration = appendImportant(
+    isChildScoped(declaration) ? declaration.declaration : declaration,
+    parsed.important
+  );
+  const scopedSelector = isChildScoped(declaration) ? `${variantSelector} > :not(:first-child)` : variantSelector;
   const ruleBody = `${scopedSelector} { ${finalDeclaration} }`;
+  let result = ruleBody;
   if (parsed.breakpoint) {
-    return `@media (min-width: ${context.screens[parsed.breakpoint]}) { ${ruleBody} }`;
-  }
-  if (parsed.containerBreakpoint) {
-    return `@container (min-width: ${context.containers[parsed.containerBreakpoint]}) { ${ruleBody} }`;
+    result = `@media (min-width: ${context.screens[parsed.breakpoint]}) { ${ruleBody} }`;
+  } else if (parsed.containerBreakpoint) {
+    result = `@container (min-width: ${context.containers[parsed.containerBreakpoint]}) { ${ruleBody} }`;
   }
-  return ruleBody;
   if (parsed.starting) {
-    const wrapped = parsed.breakpoint ? `@media (min-width: ${context.screens[parsed.breakpoint]}) { ${rule} }` : parsed.containerBreakpoint ? `@container (min-width: ${context.containers[parsed.containerBreakpoint]}) { ${rule} }` : rule;
-    return `@starting-style { ${wrapped} }`;
+    return `@starting-style { ${result} }`;
   }
-  if (parsed.breakpoint) {
-    return `@media (min-width: ${context.screens[parsed.breakpoint]}) { ${rule} }`;
-  }
-  if (parsed.containerBreakpoint) {
-    return `@container (min-width: ${context.containers[parsed.containerBreakpoint]}) { ${rule} }`;
-  }
-  return rule;
+  return result;
 }
 function compileClass(className, options = {}) {
   return compileRuntimeClassNameWithContext(className, resolveRuntimeContext(options));
@@ -3388,18 +3590,18 @@ function createWindrunner(options = {}) {
     cache.set(className, cssRule);
     return cssRule;
   };
-  const insertRule = (rule2) => {
-    if (!rule2 || insertedRules.has(rule2)) return;
+  const insertRule = (rule) => {
+    if (!rule || insertedRules.has(rule)) return;
     if (typeof document !== "object") return;
     if (!styleElement) styleElement = findOrCreateRuntimeStyle(styleId);
     if (styleElement) loadExistingRules(styleElement);
-    if (insertedRules.has(rule2)) return;
-    insertedRules.add(rule2);
+    if (insertedRules.has(rule)) return;
+    insertedRules.add(rule);
     if (!styleElement || !styleElement.sheet) return;
     try {
-      styleElement.sheet.insertRule(rule2, styleElement.sheet.cssRules.length);
+      styleElement.sheet.insertRule(rule, styleElement.sheet.cssRules.length);
     } catch {
-      styleElement.appendChild(document.createTextNode(`${rule2}
+      styleElement.appendChild(document.createTextNode(`${rule}
 `));
     }
   };
@@ -3416,6 +3618,12 @@ function createWindrunner(options = {}) {
     if (!element || !element.classList) return;
     element.classList.forEach((className) => processClassName(className));
   };
+  const processElementTree = (element) => {
+    if (!element || element.nodeType !== 1) return;
+    processElement(element);
+    const children = element.querySelectorAll ? element.querySelectorAll("[class]") : [];
+    children.forEach((child) => processElement(child));
+  };
   const processClassList = (classList) => {
     if (!classList) return [];
     const values = typeof classList === "string" ? classList.split(/\s+/) : Array.isArray(classList) ? classList : typeof classList === "object" && typeof classList.forEach === "function" ? Array.from(classList) : [];
@@ -3423,13 +3631,13 @@ function createWindrunner(options = {}) {
   };
   const scan = (root = document) => {
     if (typeof document !== "object" || !root) return;
-    if (root.nodeType === 1 && root.classList) processElement(root);
+    if (root.nodeType === 1) processElementTree(root);
     const elements = root.querySelectorAll ? root.querySelectorAll("[class]") : [];
     elements.forEach((element) => processElement(element));
   };
   const flushQueue = () => {
     scheduled = false;
-    pendingElements.forEach((element) => processElement(element));
+    pendingElements.forEach((element) => processElementTree(element));
     pendingElements.clear();
   };
   const flush = () => {