windrunner 1.1.1 → 1.1.2

package/README.md

@@ -42,7 +42,7 @@ npm install windrunner
 
 ```html
 <script type="module">
-  import { windrunner } from "https://cdn.jsdelivr.net/npm/windrunner@1.0.1/dist/index.min.js";
+  import { windrunner } from "https://cdn.jsdelivr.net/npm/windrunner@1.1.2/dist/index.min.js";
   windrunner({ autoStart: true });
 </script>
 ```
@@ -279,7 +279,7 @@ windrunner({ autoStart: true, preflight: false });
 | Arbitrary values | ✓ | ✓ |
 | Preflight | ✓ | ✓ |
 | FOUC prevention | ✓ (onReady) | ✗ |
-| Plugins | ✗ | ✓ |
+| Plugins | ✓ | ✓ |
 | Full utility coverage | ✓ | ✓ |
 
 ## 📚 Documentation

package/dist/index.d.ts

@@ -35,10 +35,21 @@ export interface WindrunnerOptions {
   compatGenerateCss?: (options: Record<string, any>) => string;
   theme?: Record<string, any>;
   plugins?: Plugin[];
+  maxCacheSize?: number;
   onReady?: () => void;
+  onError?: (className: string) => void;
+  onCompile?: (className: string, cssRule: string) => void;
   [key: string]: any;
 }
 
+export interface RuntimeStats {
+  cacheSize: number;
+  insertedRuleCount: number;
+  pendingElementCount: number;
+  isObserving: boolean;
+  isCompatLoaded: boolean;
+}
+
 export interface Runtime {
   processClassName(className: string): string | undefined;
   processClassList(classList: string | string[] | ArrayLike<string>): string[];
@@ -48,6 +59,8 @@ export interface Runtime {
   flush(): void;
   start(): void;
   disconnect(): void;
+  clearCache(): void;
+  getStats(): RuntimeStats;
   isCompatLoaded(): boolean;
   getCacheSize(): number;
   getInsertedRuleCount(): number;

package/dist/index.esm.js

@@ -1,59 +1,3 @@
-// src/variants.js
-var variants = {
-  accentColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  accessibility: ["hover", "focus"],
-  aspect: ["hover", "focus"],
-  backgroundColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  blur: ["hover", "focus"],
-  borderColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  boxShadow: ["hover", "focus"],
-  brightness: ["hover", "focus"],
-  caretColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  contrast: ["hover", "focus"],
-  dropShadow: ["hover", "focus"],
-  fill: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  flexBasis: ["hover", "focus"],
-  gradientColorStops: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  grayscale: ["hover", "focus"],
-  hueRotate: ["hover", "focus"],
-  insetRing: ["hover", "focus"],
-  insetShadow: ["hover", "focus"],
-  invert: ["hover", "focus"],
-  opacity: ["hover", "focus"],
-  outlineColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  outlineOffset: ["hover", "focus"],
-  outlineStyle: ["hover", "focus"],
-  outlineWidth: ["hover", "focus"],
-  placeholderColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  ringColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  ringOffsetColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  ringOffsetWidth: ["hover", "focus"],
-  ringWidth: ["hover", "focus"],
-  rotate: ["hover", "focus"],
-  saturate: ["hover", "focus"],
-  scale: ["hover", "focus"],
-  sepia: ["hover", "focus"],
-  skew: ["hover", "focus"],
-  stroke: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  strokeWidth: ["hover", "focus"],
-  textColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  textDecoration: ["focus", "hover"],
-  textDecorationColor: ["focus", "hover", "not-hover", "not-focus", "not-disabled"],
-  textDecorationStyle: ["focus", "hover"],
-  textDecorationThickness: ["focus", "hover"],
-  textShadowBlur: ["hover", "focus"],
-  textShadowColor: ["hover", "focus", "not-hover", "not-focus", "not-disabled"],
-  textShadowOpacity: ["hover", "focus"],
-  textShadowX: ["hover", "focus"],
-  textShadowY: ["hover", "focus"],
-  touchAction: ["hover", "focus"],
-  mask: ["hover", "focus"],
-  transform3d: ["hover", "focus"],
-  translate: ["hover", "focus"],
-  zIndex: ["hover", "focus"]
-};
-var variants_default = variants;
-
 // src/theme.js
 var theme = {
   accentColor: ({ theme: theme2 }) => ({
@@ -1401,7 +1345,6 @@ var vars_default = vars;
 
 // src/config.js
 var configOptions = {
-  variants: variants_default,
   theme: theme_default,
   vars: vars_default
 };
@@ -3308,8 +3251,8 @@ var PluginRegistry = class {
    * Register multiple variants at once
    * @param {Object} variants - Object mapping names to handlers
    */
-  addVariants(variants2) {
-    Object.entries(variants2).forEach(([name, handler]) => {
+  addVariants(variants) {
+    Object.entries(variants).forEach(([name, handler]) => {
       this.addVariant(name, handler);
     });
   }
@@ -3590,9 +3533,75 @@ function compileBaseToken(baseToken, theme2, pluginRegistry) {
   }
   return checkAllBuilders(baseToken, theme2);
 }
-function applyVariants(selector, variants2, pluginRegistry) {
+var VARIANT_MAP = /* @__PURE__ */ new Map([
+  // Dark mode
+  ["dark", (s) => `.dark ${s}`],
+  // Pseudo-classes – interactive
+  ["hover", (s) => `${s}:hover`],
+  ["focus", (s) => `${s}:focus`],
+  ["focus-visible", (s) => `${s}:focus-visible`],
+  ["focus-within", (s) => `${s}:focus-within`],
+  ["active", (s) => `${s}:active`],
+  ["visited", (s) => `${s}:visited`],
+  ["disabled", (s) => `${s}:disabled`],
+  ["checked", (s) => `${s}:checked`],
+  ["indeterminate", (s) => `${s}:indeterminate`],
+  ["required", (s) => `${s}:required`],
+  ["valid", (s) => `${s}:valid`],
+  ["invalid", (s) => `${s}:invalid`],
+  ["target", (s) => `${s}:target`],
+  ["enabled", (s) => `${s}:enabled`],
+  ["default", (s) => `${s}:default`],
+  ["optional", (s) => `${s}:optional`],
+  ["user-valid", (s) => `${s}:user-valid`],
+  ["user-invalid", (s) => `${s}:user-invalid`],
+  ["in-range", (s) => `${s}:in-range`],
+  ["out-of-range", (s) => `${s}:out-of-range`],
+  ["placeholder-shown", (s) => `${s}:placeholder-shown`],
+  ["autofill", (s) => `${s}:autofill`],
+  ["details-content", (s) => `${s}:details-content`],
+  ["read-only", (s) => `${s}:read-only`],
+  ["open", (s) => `${s}[open]`],
+  // Pseudo-elements
+  ["placeholder", (s) => `${s}::placeholder`],
+  ["backdrop", (s) => `${s}::backdrop`],
+  ["before", (s) => `${s}::before`],
+  ["after", (s) => `${s}::after`],
+  ["first-letter", (s) => `${s}::first-letter`],
+  ["first-line", (s) => `${s}::first-line`],
+  ["marker", (s) => `${s}::marker`],
+  ["selection", (s) => `${s}::selection`],
+  ["file", (s) => `${s}::file-selector-button`],
+  // Structural pseudo-classes
+  ["first", (s) => `${s}:first-child`],
+  ["last", (s) => `${s}:last-child`],
+  ["odd", (s) => `${s}:nth-child(odd)`],
+  ["even", (s) => `${s}:nth-child(even)`],
+  ["first-of-type", (s) => `${s}:first-of-type`],
+  ["last-of-type", (s) => `${s}:last-of-type`],
+  ["only", (s) => `${s}:only-child`],
+  ["only-of-type", (s) => `${s}:only-of-type`],
+  ["empty", (s) => `${s}:empty`],
+  // Group & peer variants
+  ["group-hover", (s) => `.group:hover ${s}`],
+  ["group-focus", (s) => `.group:focus ${s}`],
+  ["group-active", (s) => `.group:active ${s}`],
+  ["peer-hover", (s) => `.peer:hover ~ ${s}`],
+  ["peer-focus", (s) => `.peer:focus ~ ${s}`],
+  ["peer-checked", (s) => `.peer:checked ~ ${s}`],
+  ["peer-disabled", (s) => `.peer:disabled ~ ${s}`],
+  // Negation variants
+  ["not-hover", (s) => `${s}:not(:hover)`],
+  ["not-focus", (s) => `${s}:not(:focus)`],
+  ["not-disabled", (s) => `${s}:not(:disabled)`],
+  ["not-checked", (s) => `${s}:not(:checked)`],
+  // In-* variants (group-based)
+  ["in-hover", (s) => `.group:hover ${s}`],
+  ["in-focus", (s) => `.group:focus ${s}`]
+]);
+function applyVariants(selector, variants, pluginRegistry) {
   let currentSelector = selector;
-  for (const variant of variants2) {
+  for (const variant of variants) {
     if (pluginRegistry) {
       const customHandler = pluginRegistry.matchVariant(variant);
       if (customHandler) {
@@ -3607,180 +3616,11 @@ function applyVariants(selector, variants2, pluginRegistry) {
         }
       }
     }
-    switch (variant) {
-      case "dark":
-        currentSelector = `.dark ${currentSelector}`;
-        break;
-      case "hover":
-        currentSelector = `${currentSelector}:hover`;
-        break;
-      case "focus":
-        currentSelector = `${currentSelector}:focus`;
-        break;
-      case "focus-visible":
-        currentSelector = `${currentSelector}:focus-visible`;
-        break;
-      case "focus-within":
-        currentSelector = `${currentSelector}:focus-within`;
-        break;
-      case "active":
-        currentSelector = `${currentSelector}:active`;
-        break;
-      case "visited":
-        currentSelector = `${currentSelector}:visited`;
-        break;
-      case "disabled":
-        currentSelector = `${currentSelector}:disabled`;
-        break;
-      case "checked":
-        currentSelector = `${currentSelector}:checked`;
-        break;
-      case "indeterminate":
-        currentSelector = `${currentSelector}:indeterminate`;
-        break;
-      case "required":
-        currentSelector = `${currentSelector}:required`;
-        break;
-      case "valid":
-        currentSelector = `${currentSelector}:valid`;
-        break;
-      case "invalid":
-        currentSelector = `${currentSelector}:invalid`;
-        break;
-      case "target":
-        currentSelector = `${currentSelector}:target`;
-        break;
-      case "enabled":
-        currentSelector = `${currentSelector}:enabled`;
-        break;
-      case "default":
-        currentSelector = `${currentSelector}:default`;
-        break;
-      case "optional":
-        currentSelector = `${currentSelector}:optional`;
-        break;
-      case "user-valid":
-        currentSelector = `${currentSelector}:user-valid`;
-        break;
-      case "user-invalid":
-        currentSelector = `${currentSelector}:user-invalid`;
-        break;
-      case "in-range":
-        currentSelector = `${currentSelector}:in-range`;
-        break;
-      case "out-of-range":
-        currentSelector = `${currentSelector}:out-of-range`;
-        break;
-      case "placeholder-shown":
-        currentSelector = `${currentSelector}:placeholder-shown`;
-        break;
-      case "autofill":
-        currentSelector = `${currentSelector}:autofill`;
-        break;
-      case "details-content":
-        currentSelector = `${currentSelector}:details-content`;
-        break;
-      case "placeholder":
-        currentSelector = `${currentSelector}::placeholder`;
-        break;
-      case "backdrop":
-        currentSelector = `${currentSelector}::backdrop`;
-        break;
-      case "before":
-        currentSelector = `${currentSelector}::before`;
-        break;
-      case "after":
-        currentSelector = `${currentSelector}::after`;
-        break;
-      case "first-letter":
-        currentSelector = `${currentSelector}::first-letter`;
-        break;
-      case "first-line":
-        currentSelector = `${currentSelector}::first-line`;
-        break;
-      case "marker":
-        currentSelector = `${currentSelector}::marker`;
-        break;
-      case "selection":
-        currentSelector = `${currentSelector}::selection`;
-        break;
-      case "file":
-        currentSelector = `${currentSelector}::file-selector-button`;
-        break;
-      case "first":
-        currentSelector = `${currentSelector}:first-child`;
-        break;
-      case "last":
-        currentSelector = `${currentSelector}:last-child`;
-        break;
-      case "odd":
-        currentSelector = `${currentSelector}:nth-child(odd)`;
-        break;
-      case "even":
-        currentSelector = `${currentSelector}:nth-child(even)`;
-        break;
-      case "first-of-type":
-        currentSelector = `${currentSelector}:first-of-type`;
-        break;
-      case "last-of-type":
-        currentSelector = `${currentSelector}:last-of-type`;
-        break;
-      case "only":
-        currentSelector = `${currentSelector}:only-child`;
-        break;
-      case "only-of-type":
-        currentSelector = `${currentSelector}:only-of-type`;
-        break;
-      case "empty":
-        currentSelector = `${currentSelector}:empty`;
-        break;
-      case "read-only":
-        currentSelector = `${currentSelector}:read-only`;
-        break;
-      case "open":
-        currentSelector = `${currentSelector}[open]`;
-        break;
-      case "group-hover":
-        currentSelector = `.group:hover ${currentSelector}`;
-        break;
-      case "group-focus":
-        currentSelector = `.group:focus ${currentSelector}`;
-        break;
-      case "group-active":
-        currentSelector = `.group:active ${currentSelector}`;
-        break;
-      case "peer-hover":
-        currentSelector = `.peer:hover ~ ${currentSelector}`;
-        break;
-      case "peer-focus":
-        currentSelector = `.peer:focus ~ ${currentSelector}`;
-        break;
-      case "peer-checked":
-        currentSelector = `.peer:checked ~ ${currentSelector}`;
-        break;
-      case "peer-disabled":
-        currentSelector = `.peer:disabled ~ ${currentSelector}`;
-        break;
-      case "not-hover":
-        currentSelector = `${currentSelector}:not(:hover)`;
-        break;
-      case "not-focus":
-        currentSelector = `${currentSelector}:not(:focus)`;
-        break;
-      case "not-disabled":
-        currentSelector = `${currentSelector}:not(:disabled)`;
-        break;
-      case "not-checked":
-        currentSelector = `${currentSelector}:not(:checked)`;
-        break;
-      case "in-hover":
-        currentSelector = `.group:hover ${currentSelector}`;
-        break;
-      case "in-focus":
-        currentSelector = `.group:focus ${currentSelector}`;
-        break;
-      default:
-        return void 0;
+    const builtinHandler = VARIANT_MAP.get(variant);
+    if (builtinHandler) {
+      currentSelector = builtinHandler(currentSelector);
+    } else {
+      return void 0;
     }
   }
   return currentSelector;
@@ -3796,7 +3636,7 @@ function resolveRuntimeContext(options = {}) {
             addUtility: (pattern, handler) => pluginRegistry.addUtility(pattern, handler),
             addUtilities: (utilities) => pluginRegistry.addUtilities(utilities),
             addVariant: (name, handler) => pluginRegistry.addVariant(name, handler),
-            addVariants: (variants2) => pluginRegistry.addVariants(variants2),
+            addVariants: (variants) => pluginRegistry.addVariants(variants),
             theme: (key) => {
               if (!key) return config.theme || {};
               const keys = key.split(".");
@@ -3849,7 +3689,7 @@ function parseClass(className, screens = {}, containers = {}) {
   const parts = splitByVariantDelimiter(normalized);
   if (parts.length === 0) return null;
   const baseToken = parts[parts.length - 1];
-  const variants2 = [];
+  const variants = [];
   let breakpoint = null;
   let containerBreakpoint = null;
   let starting = false;
@@ -3870,9 +3710,9 @@ function parseClass(className, screens = {}, containers = {}) {
       breakpoint = part;
       continue;
     }
-    variants2.push(part);
+    variants.push(part);
   }
-  const result = { original: token, baseToken, variants: variants2, breakpoint, containerBreakpoint, important, starting };
+  const result = { original: token, baseToken, variants, breakpoint, containerBreakpoint, important, starting };
   if (parseCache.size >= PARSE_CACHE_MAX_SIZE) {
     const firstKey = parseCache.keys().next().value;
     parseCache.delete(firstKey);
@@ -3981,6 +3821,9 @@ function createWindrunner(options = {}) {
   const preflight2 = options.preflight !== false;
   const compatMode = options.compatMode || "none";
   const compatStyleId = options.compatStyleId || `${styleId}-full`;
+  const maxCacheSize = options.maxCacheSize || 1e4;
+  const onError = typeof options.onError === "function" ? options.onError : null;
+  const onCompile = typeof options.onCompile === "function" ? options.onCompile : null;
   const tailwindOptions = getBaseTailwindOptions(options);
   const context = resolveRuntimeContext(tailwindOptions);
   const cache = /* @__PURE__ */ new Map();
@@ -4026,6 +3869,10 @@ function createWindrunner(options = {}) {
   const compileWithCache = (className) => {
     if (cache.has(className)) return cache.get(className);
     const cssRule = compileRuntimeClassNameWithContext(className, context);
+    if (cache.size >= maxCacheSize) {
+      const firstKey = cache.keys().next().value;
+      cache.delete(firstKey);
+    }
     cache.set(className, cssRule);
     return cssRule;
   };
@@ -4048,8 +3895,10 @@ function createWindrunner(options = {}) {
     const cssRule = compileWithCache(className);
     if (!cssRule) {
       ensureCompatStyle();
+      if (onError) onError(className);
     } else {
       insertRule(cssRule);
+      if (onCompile) onCompile(className, cssRule);
     }
     return cssRule;
   };
@@ -4152,6 +4001,16 @@ function createWindrunner(options = {}) {
     }
     runStart();
   };
+  const clearCache = () => {
+    cache.clear();
+  };
+  const getStats = () => ({
+    cacheSize: cache.size,
+    insertedRuleCount: insertedRules.size,
+    pendingElementCount: pendingElements.size,
+    isObserving: observer !== null,
+    isCompatLoaded: compatLoaded
+  });
   return {
     processClassName,
     processClassList,
@@ -4161,6 +4020,8 @@ function createWindrunner(options = {}) {
     flush,
     start,
     disconnect,
+    clearCache,
+    getStats,
     isCompatLoaded: () => compatLoaded,
     getCacheSize: () => cache.size,
     getInsertedRuleCount: () => insertedRules.size