tailwind-to-style 3.0.0 → 3.1.0

package/README.md

@@ -156,6 +156,80 @@ const formatted = twsx(styles, { format: 'pretty' })
 - `'.nested'` - Descendants
 - `'@media ...'` - Media queries (root level only)
 
+### `twsxVariants(className, config)`
+
+Create variant-based component styles with automatic CSS generation. Similar to `tailwind-variants` but with auto-injection.
+
+```javascript
+import { twsxVariants } from 'tailwind-to-style'
+
+const btn = twsxVariants('.btn', {
+  base: 'px-4 py-2 rounded-lg font-medium transition-all',
+  variants: {
+    variant: {
+      solid: 'border-transparent',
+      outline: 'bg-transparent border-2',
+      ghost: 'bg-transparent',
+    },
+    color: {
+      primary: 'bg-blue-500 text-white hover:bg-blue-600',
+      danger: 'bg-red-500 text-white hover:bg-red-600',
+    },
+    size: {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-4 py-2 text-base',
+      lg: 'px-6 py-3 text-lg',
+    },
+  },
+  compoundVariants: [
+    { variant: 'outline', color: 'primary', class: 'border-blue-500 text-blue-600' },
+    { variant: 'outline', color: 'danger', class: 'border-red-500 text-red-600' },
+  ],
+  defaultVariants: { variant: 'solid', color: 'primary', size: 'md' }
+})
+
+// Usage - returns class name string
+btn()                                    // "btn"
+btn({ color: 'danger' })                 // "btn btn-danger"
+btn({ variant: 'outline', size: 'lg' })  // "btn btn-outline-lg"
+
+// In React
+const Button = ({ variant, color, size, children, ...props }) => (
+  <button className={btn({ variant, color, size })} {...props}>
+    {children}
+  </button>
+)
+```
+
+**Nested Selectors** - Style child elements:
+
+```javascript
+const alert = twsxVariants('.alert', {
+  base: 'p-4 rounded-lg border flex gap-3',
+  variants: {
+    status: {
+      info: 'bg-blue-50 text-blue-800',
+      error: 'bg-red-50 text-red-800',
+    },
+  },
+  defaultVariants: { status: 'info' },
+  nested: {
+    '.alert-icon': 'flex-shrink-0 mt-0.5',
+    '.alert-content': 'flex-1',
+    '.alert-dismiss': 'p-1 rounded hover:bg-black/10',
+  }
+})
+
+// Generates CSS:
+// .alert .alert-icon { ... }
+// .alert .alert-content { ... }
+```
+
+**Class Naming Convention:**
+- `.btn` = all defaults
+- `.btn-outline` = outline variant (non-default)
+- `.btn-outline-danger-lg` = multiple non-defaults
+
 ### `configure(config)`
 
 Customize theme with your colors, spacing, fonts, and more.

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v3.0.0
+ * tailwind-to-style v3.1.0
  * Runtime Tailwind CSS to inline styles converter
  * Core only: tws, twsx, configure
  * 
@@ -8586,10 +8586,10 @@ function parseCustomClassWithPatterns(className) {
   return null;
 }
 
-/**
- * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
- * @param {string} cssString
- * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
+/**
+ * Resolve all CSS custom properties (var) in a CSS string and output only clear CSS (no custom property)
+ * @param {string} cssString
+ * @returns {string} e.g. 'color: rgba(255,255,255,1); background: #fff;'
  */
 function resolveCssToClearCss(cssString) {
   const customVars = {};
@@ -8623,9 +8623,9 @@ function resolveCssToClearCss(cssString) {
 // Cache for getConfigOptions - use LRU cache
 const configOptionsCache = new LRUCache(500);
 
-/**
- * Clear config options cache (internal use)
- * Called when user configuration changes
+/**
+ * Clear config options cache (internal use)
+ * Called when user configuration changes
  */
 function clearConfigCache() {
   configOptionsCache.clear();
@@ -8997,11 +8997,11 @@ function separateAndResolveCSS(arr) {
   }
 }
 
-/**
- * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
- * @param {string} className - Class name with potential opacity modifier
- * @param {string} cssDeclaration - CSS declaration to modify
- * @returns {string} Modified CSS declaration with opacity applied
+/**
+ * Process opacity modifier from class name (e.g., text-red-500/50 -> 50% opacity)
+ * @param {string} className - Class name with potential opacity modifier
+ * @param {string} cssDeclaration - CSS declaration to modify
+ * @returns {string} Modified CSS declaration with opacity applied
  */
 function processOpacityModifier(className, cssDeclaration) {
   const opacityMatch = className.match(/\/(\d+)$/);
@@ -9062,11 +9062,11 @@ function processOpacityModifier(className, cssDeclaration) {
   return modifiedDeclaration;
 }
 
-/**
- * Convert Tailwind class string to inline CSS styles or JSON object
- * @param {string} classNames - String containing Tailwind classes to convert
- * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
- * @returns {string|Object} Inline CSS string or style JSON object
+/**
+ * Convert Tailwind class string to inline CSS styles or JSON object
+ * @param {string} classNames - String containing Tailwind classes to convert
+ * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+ * @returns {string|Object} Inline CSS string or style JSON object
  */
 function tws(classNames, convertToJson) {
   const totalMarker = performanceMonitor.start("tws:total");
@@ -9565,12 +9565,12 @@ function generateCssString(styles) {
   return cssString.trim();
 }
 
-/**
- * Generate CSS string from style object with SCSS-like syntax
- * Supports nested selectors, state variants, responsive variants, and @css directives
- * @param {Object} obj - Object with SCSS-like style format
- * @param {Object} [options] - Additional options, e.g. { inject: true/false }
- * @returns {string} Generated CSS string
+/**
+ * Generate CSS string from style object with SCSS-like syntax
+ * Supports nested selectors, state variants, responsive variants, and @css directives
+ * @param {Object} obj - Object with SCSS-like style format
+ * @param {Object} [options] - Additional options, e.g. { inject: true/false }
+ * @returns {string} Generated CSS string
  */
 function twsx(obj) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -9766,6 +9766,481 @@ function twsx(obj) {
   }
 }
 
+/**
+ * Create a variant-based style generator (similar to tailwind-variants)
+ * Supports base styles, variants, compound variants, and default variants
+ *
+ * @param {Object} config - Configuration object
+ * @param {string} config.base - Base Tailwind classes applied to all variants
+ * @param {Object} config.variants - Variant definitions with their options
+ * @param {Array} config.compoundVariants - Compound variant rules for multi-variant combinations
+ * @param {Object} config.defaultVariants - Default variant values
+ * @returns {Function} A function that accepts variant props and returns merged classes
+ *
+ * @example
+ * const button = twsxVariants({
+ *   base: 'px-4 py-2 rounded font-medium',
+ *   variants: {
+ *     color: {
+ *       primary: 'bg-blue-500 text-white',
+ *       secondary: 'bg-gray-500 text-white'
+ *     },
+ *     size: {
+ *       sm: 'text-sm',
+ *       lg: 'text-lg'
+ *     }
+ *   },
+ *   compoundVariants: [
+ *     { color: 'primary', size: 'lg', class: 'font-bold shadow-lg' }
+ *   ],
+ *   defaultVariants: {
+ *     color: 'primary',
+ *     size: 'sm'
+ *   }
+ * });
+ *
+ * // Usage:
+ * button({ color: 'primary', size: 'lg' }) // Returns merged classes
+ */
+function twsxVariants(className) {
+  let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    base = "",
+    variants = {},
+    compoundVariants = [],
+    defaultVariants = {},
+    nested = {}
+  } = config;
+
+  /**
+   * Check if a compound variant matches the current props
+   * @param {Object} compound - Compound variant definition
+   * @param {Object} props - Current variant props
+   * @returns {boolean}
+   */
+  function matchesCompoundVariant(compound, props) {
+    for (const key in compound) {
+      if (key === "class" || key === "className") continue;
+      const compoundValue = compound[key];
+      const propValue = props[key];
+
+      // Handle array values in compound (match any)
+      if (Array.isArray(compoundValue)) {
+        if (!compoundValue.includes(propValue)) return false;
+      } else {
+        // Handle boolean variants - convert string 'true'/'false' to boolean
+        const normalizedCompound = compoundValue === "true" ? true : compoundValue === "false" ? false : compoundValue;
+        const normalizedProp = propValue === "true" ? true : propValue === "false" ? false : propValue;
+        if (normalizedCompound !== normalizedProp) return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Merge multiple class strings with conflict resolution
+   * Later classes override earlier ones for the same CSS property
+   * @param  {...string} classStrings - Class strings to merge
+   * @returns {string}
+   */
+  function mergeClasses() {
+    const result = [];
+    const propertyMap = new Map(); // Track index by conflict key
+
+    /**
+     * Extract conflict key from Tailwind class
+     * Classes that affect the same CSS property should have the same key
+     */
+    function getConflictKey(cls) {
+      // Extract variant prefix (hover:, focus:, etc.)
+      const variantMatch = cls.match(/^((?:[a-z-]+:)*)/);
+      const variant = variantMatch ? variantMatch[1] : "";
+      const baseClass = cls.slice(variant.length);
+
+      // Check if it's a prefixed standalone (e.g., bg-transparent, text-transparent)
+      const prefixedStandalone = baseClass.match(/^([a-z]+)-(transparent|current|inherit|auto)$/);
+      if (prefixedStandalone) {
+        const prefix = prefixedStandalone[1];
+        return variant + prefix;
+      }
+
+      // Handle standalone utilities (no prefix)
+      const standaloneGroups = {
+        "inline-flex": "display",
+        "inline-block": "display",
+        inline: "display",
+        block: "display",
+        flex: "display",
+        grid: "display",
+        hidden: "display",
+        static: "position",
+        fixed: "position",
+        absolute: "position",
+        relative: "position",
+        sticky: "position",
+        visible: "visibility",
+        invisible: "visibility",
+        underline: "text-decoration",
+        "line-through": "text-decoration",
+        "no-underline": "text-decoration",
+        uppercase: "text-transform",
+        lowercase: "text-transform",
+        capitalize: "text-transform",
+        "normal-case": "text-transform",
+        truncate: "text-overflow",
+        italic: "font-style",
+        "not-italic": "font-style",
+        antialiased: "font-smoothing",
+        "subpixel-antialiased": "font-smoothing"
+      };
+      if (standaloneGroups[baseClass]) {
+        return variant + standaloneGroups[baseClass];
+      }
+
+      // Match pattern: prefix-value or prefix-modifier-value
+      // bg-blue-500, text-xl, px-4, rounded-lg, shadow-md, border-2, etc.
+      const match = baseClass.match(/^([a-z]+)-(.+)$/);
+      if (match) {
+        const prefix = match[1];
+        const value = match[2];
+
+        // Group related prefixes
+        const prefixGroups = {
+          // Background
+          bg: "bg",
+          // Text color vs text size
+          text: /^(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/.test(value) ? "text-size" : "text-color",
+          // Padding
+          p: "p",
+          px: "px",
+          py: "py",
+          pt: "pt",
+          pb: "pb",
+          pl: "pl",
+          pr: "pr",
+          // Margin
+          m: "m",
+          mx: "mx",
+          my: "my",
+          mt: "mt",
+          mb: "mb",
+          ml: "ml",
+          mr: "mr",
+          // Sizing
+          w: "w",
+          h: "h",
+          min: baseClass.startsWith("min-w") ? "min-w" : "min-h",
+          max: baseClass.startsWith("max-w") ? "max-w" : "max-h",
+          // Border width vs color
+          border: /^(\d|t-|b-|l-|r-|x-|y-)/.test(value) ? "border-width" : /^(solid|dashed|dotted|double|none|hidden)$/.test(value) ? "border-style" : "border-color",
+          rounded: "rounded",
+          // Effects
+          shadow: "shadow",
+          opacity: "opacity",
+          // Typography
+          font: /^(sans|serif|mono)$/.test(value) ? "font-family" : "font-weight",
+          leading: "leading",
+          tracking: "tracking",
+          // Layout
+          flex: "flex",
+          grid: "grid",
+          gap: "gap",
+          justify: "justify",
+          items: "items",
+          self: "self",
+          place: "place",
+          // Position
+          top: "top",
+          bottom: "bottom",
+          left: "left",
+          right: "right",
+          inset: "inset",
+          z: "z",
+          // Cursor
+          cursor: "cursor",
+          // Pointer events
+          pointer: "pointer-events",
+          // Transform
+          scale: "scale",
+          rotate: "rotate",
+          translate: "translate",
+          skew: "skew",
+          // Transition
+          transition: "transition",
+          duration: "duration",
+          ease: "ease",
+          delay: "delay",
+          // Ring
+          ring: /^(\d|inset)/.test(value) ? "ring-width" : /^offset/.test(value) ? "ring-offset" : "ring-color",
+          // Outline
+          outline: /^(\d|none)/.test(value) ? "outline-width" : /^(dashed|dotted|double|solid)$/.test(value) ? "outline-style" : /^offset/.test(value) ? "outline-offset" : "outline-color",
+          // Overflow
+          overflow: "overflow",
+          // Object
+          object: "object",
+          // Aspect
+          aspect: "aspect",
+          // Underline
+          underline: "underline-offset",
+          // Decoration
+          decoration: "decoration",
+          // Accent
+          accent: "accent",
+          // Caret
+          caret: "caret",
+          // Fill & Stroke
+          fill: "fill",
+          stroke: /^\d/.test(value) ? "stroke-width" : "stroke-color",
+          // Backdrop
+          backdrop: "backdrop",
+          // Columns
+          columns: "columns",
+          col: "col",
+          row: "row",
+          // Order
+          order: "order",
+          // Grow/Shrink
+          grow: "grow",
+          shrink: "shrink",
+          basis: "basis",
+          // Content
+          content: "content",
+          // List
+          list: "list",
+          // Scroll
+          scroll: "scroll",
+          // Snap
+          snap: "snap",
+          // Touch
+          touch: "touch",
+          // Select
+          select: "select",
+          // Will change
+          will: "will-change",
+          // Appearance
+          appearance: "appearance",
+          // Break
+          break: "break",
+          // Hyphens
+          hyphens: "hyphens",
+          // Whitespace
+          whitespace: "whitespace",
+          // Word break
+          word: "word-break",
+          // Overscroll
+          overscroll: "overscroll",
+          // Resize
+          resize: "resize",
+          // Float
+          float: "float",
+          // Clear
+          clear: "clear",
+          // Isolation
+          isolation: "isolation",
+          // Mix blend
+          mix: "mix-blend",
+          // Background blend
+          bg: "bg",
+          // Filter
+          filter: "filter",
+          blur: "blur",
+          brightness: "brightness",
+          contrast: "contrast",
+          grayscale: "grayscale",
+          hue: "hue-rotate",
+          invert: "invert",
+          saturate: "saturate",
+          sepia: "sepia",
+          drop: "drop-shadow"
+        };
+        const group = prefixGroups[prefix] || prefix;
+        return variant + group;
+      }
+      return null; // No conflict tracking
+    }
+    for (var _len2 = arguments.length, classStrings = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      classStrings[_key2] = arguments[_key2];
+    }
+    for (const str of classStrings) {
+      if (!str) continue;
+      const classes = str.trim().split(/\s+/);
+      for (const cls of classes) {
+        if (!cls) continue;
+        const conflictKey = getConflictKey(cls);
+        if (conflictKey) {
+          // Remove previous class with same conflict key
+          const prevIndex = propertyMap.get(conflictKey);
+          if (prevIndex !== undefined) {
+            result[prevIndex] = null; // Mark for removal
+          }
+          propertyMap.set(conflictKey, result.length);
+        }
+        result.push(cls);
+      }
+    }
+    return result.filter(Boolean).join(" ");
+  }
+
+  /**
+   * Generate classes for a specific variant combination
+   * @param {Object} props - Variant props
+   * @returns {string} Merged Tailwind classes
+   */
+  function generateClasses() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // Merge props with defaults
+    const mergedProps = {
+      ...defaultVariants,
+      ...props
+    };
+
+    // Start with base classes
+    const classes = [base];
+
+    // Add variant classes
+    for (const variantKey in variants) {
+      const variantValue = mergedProps[variantKey];
+      const variantOptions = variants[variantKey];
+      if (variantValue !== undefined && variantOptions[variantValue]) {
+        classes.push(variantOptions[variantValue]);
+      }
+    }
+
+    // Add compound variant classes
+    for (const compound of compoundVariants) {
+      if (matchesCompoundVariant(compound, mergedProps)) {
+        classes.push(compound.class || compound.className || "");
+      }
+    }
+
+    // Merge all classes
+    return mergeClasses(...classes);
+  }
+
+  // If className is provided, auto-generate and inject CSS
+  if (className) {
+    const baseClassName = className.startsWith(".") ? className.slice(1) : className;
+    const baseCss = {};
+    const variantCss = {};
+
+    // Get all variant keys and their options
+    const variantKeys = Object.keys(variants);
+
+    // Helper to generate all combinations
+    function generateCombinations(keys) {
+      let current = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (keys.length === 0) {
+        // Generate class name from current combination
+        const parts = [baseClassName];
+        let isBaseOnly = true;
+        for (const key of variantKeys) {
+          if (current[key] !== undefined && current[key] !== defaultVariants[key]) {
+            isBaseOnly = false;
+            // Skip boolean 'false' values
+            if (current[key] === false || current[key] === "false") continue;
+            // For boolean 'true', just add the key name
+            if (current[key] === true || current[key] === "true") {
+              parts.push(key);
+            } else {
+              parts.push(current[key]);
+            }
+          }
+        }
+        const selector = "." + parts.join("-");
+        const classes = generateClasses(current);
+
+        // Separate base class from variant classes
+        if (isBaseOnly) {
+          baseCss[selector] = classes;
+        } else {
+          variantCss[selector] = classes;
+        }
+        return;
+      }
+      const [firstKey, ...restKeys] = keys;
+      const options = variants[firstKey];
+
+      // If this variant has no default, also generate without it (undefined)
+      const hasDefault = defaultVariants[firstKey] !== undefined;
+      if (!hasDefault) {
+        // Generate combinations without this variant
+        generateCombinations(restKeys, current);
+      }
+      for (const optionValue of Object.keys(options)) {
+        generateCombinations(restKeys, {
+          ...current,
+          [firstKey]: optionValue
+        });
+      }
+    }
+
+    // Generate all combinations
+    generateCombinations(variantKeys);
+
+    // Inject base CSS first, then variant CSS (order matters for specificity)
+    twsx(baseCss);
+    twsx(variantCss);
+
+    // Handle nested selectors - generate CSS for child elements
+    if (Object.keys(nested).length > 0) {
+      const nestedCss = {};
+      for (const [nestedSelector, nestedClasses] of Object.entries(nested)) {
+        // Build full selector: .alert .icon or .alert.icon (if starts with &)
+        let fullSelector;
+        if (nestedSelector.startsWith("&")) {
+          // &.active -> .alert.active (attached to parent)
+          fullSelector = className + nestedSelector.slice(1);
+        } else {
+          // .icon -> .alert .icon (descendant)
+          fullSelector = className + " " + nestedSelector;
+        }
+        nestedCss[fullSelector] = nestedClasses;
+      }
+      twsx(nestedCss);
+    }
+  }
+
+  /**
+   * Build class name string from props (for component usage)
+   * @param {Object} props - Variant props
+   * @returns {string} Class name string like "alert alert-warning" or "btn btn-outline-danger"
+   */
+  function buildClassName() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!className) {
+      // No className defined, return generated classes directly
+      return generateClasses(props);
+    }
+    const baseClass = className.startsWith(".") ? className.slice(1) : className;
+    const variantParts = [baseClass];
+    for (const key of Object.keys(variants)) {
+      const value = props[key];
+      if (value === undefined || value === null) continue;
+
+      // Skip if it's the default value
+      if (value === defaultVariants[key]) continue;
+
+      // Handle boolean variants
+      if (value === true || value === "true") {
+        variantParts.push(key);
+      } else if (value !== false && value !== "false") {
+        variantParts.push(value);
+      }
+    }
+    const variantClass = variantParts.join("-");
+
+    // Always include base class for consistency and nested selector support
+    // e.g., "btn btn-outline-danger" instead of just "btn-outline-danger"
+    if (variantClass !== baseClass) {
+      return baseClass + " " + variantClass;
+    }
+    return variantClass;
+  }
+
+  // Always return the buildClassName function
+  return buildClassName;
+}
+
 // Simple hashCode function for CSS deduplication
 function getCssHash(str) {
   let hash = 0,
@@ -9813,19 +10288,19 @@ function autoInjectCss(cssString) {
 }
 
 // Enhanced debounced functions with performance monitoring configuration
-/**
- * Debounced version of tws function with performance monitoring
- * @param {string} classNames - String containing Tailwind classes to convert
- * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
- * @returns {string|Object} Inline CSS string or style JSON object
+/**
+ * Debounced version of tws function with performance monitoring
+ * @param {string} classNames - String containing Tailwind classes to convert
+ * @param {boolean} convertToJson - If true, result will be JSON object, if false becomes CSS string
+ * @returns {string|Object} Inline CSS string or style JSON object
  */
 const debouncedTws = debounce(tws, 50); // Faster debounce for tws
 
-/**
- * Debounced version of twsx function with performance monitoring
- * @param {Object} obj - Object with SCSS-like style format
- * @param {Object} [options] - Additional options
- * @returns {string} Generated CSS string
+/**
+ * Debounced version of twsx function with performance monitoring
+ * @param {Object} obj - Object with SCSS-like style format
+ * @param {Object} [options] - Additional options
+ * @returns {string} Generated CSS string
  */
 const debouncedTwsx = debounce(twsx, 100); // Standard debounce for twsx
 
@@ -9861,7 +10336,7 @@ const performanceUtils = {
   }
 };
 
-// End of exports - v3.0.0 core only (tws, twsx, configure)
+// End of exports - v3.0.0 core only (tws, twsx, twsxVariants, configure)
 
 exports.DYNAMIC_TEMPLATES = DYNAMIC_TEMPLATES;
 exports.INLINE_ANIMATIONS = INLINE_ANIMATIONS;
@@ -9894,3 +10369,4 @@ exports.resetTailwindCache = resetTailwindCache;
 exports.staggerAnimations = staggerAnimations;
 exports.tws = tws;
 exports.twsx = twsx;
+exports.twsxVariants = twsxVariants;