windrunner 1.0.0 → 1.0.1

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

@@ -1414,12 +1414,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 +1638,64 @@ 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;",
+  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 +1852,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 +1908,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 +1998,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 || {} },
@@ -2196,6 +2269,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 +2346,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 +2379,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 +2529,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);",
@@ -2612,7 +2767,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 +2891,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 +2920,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 +2949,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 +2965,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 +2986,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 +3036,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 +3073,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;
   }
@@ -3191,8 +3384,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 = {}) {
@@ -3245,24 +3438,16 @@ function compileRuntimeClassNameWithContext(className, context) {
   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 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} }`;
-  }
-  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 `@starting-style { ${result} }`;
   }
-  return rule;
+  return result;
 }
 function compileClass(className, options = {}) {
   return compileRuntimeClassNameWithContext(className, resolveRuntimeContext(options));
@@ -3388,18 +3573,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}
 `));
     }
   };