tailwind-to-style 2.12.0 → 2.12.1

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.12.0
+ * tailwind-to-style v2.12.1
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -7992,10 +7992,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 = {};
@@ -8362,11 +8362,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+)$/);
@@ -8427,11 +8427,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");
@@ -8875,12 +8875,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] : {};
@@ -9072,7 +9072,9 @@ function autoInjectCss(cssString) {
 
 // Global CSS cache to prevent duplicate injections
 const globalCssCache = new Map();
+const globalKeyframesCache = new Map(); // Track injected keyframes: name -> css
 let globalStyleElement = null;
+let globalKeyframesElement = null;
 
 /**
  * Simple hash function for CSS content
@@ -9089,6 +9091,7 @@ function simpleHash$1(str) {
   return Math.abs(hash).toString(36);
 }
 function getOrCreateGlobalStyleElement() {
+  if (typeof document === "undefined") return null;
   if (!globalStyleElement) {
     globalStyleElement = document.createElement("style");
     globalStyleElement.setAttribute("data-twsx-global", "true");
@@ -9096,6 +9099,103 @@ function getOrCreateGlobalStyleElement() {
   }
   return globalStyleElement;
 }
+function getOrCreateGlobalKeyframesElement() {
+  if (typeof document === "undefined") return null;
+  if (!globalKeyframesElement) {
+    globalKeyframesElement = document.createElement("style");
+    globalKeyframesElement.setAttribute("data-twsx-keyframes", "true");
+    document.head.appendChild(globalKeyframesElement);
+  }
+  return globalKeyframesElement;
+}
+function extractKeyframes(cssString) {
+  const keyframesRegex = /@keyframes\s+([^\s{]+)\s*\{/g;
+  const keyframes = [];
+  let match;
+  while ((match = keyframesRegex.exec(cssString)) !== null) {
+    const keyframeName = match[1];
+    const start = match.index;
+
+    // Find matching closing brace
+    let braceCount = 0;
+    let endIndex = start;
+    let inKeyframe = false;
+    for (let i = start; i < cssString.length; i++) {
+      if (cssString[i] === "{") {
+        braceCount++;
+        inKeyframe = true;
+      } else if (cssString[i] === "}") {
+        braceCount--;
+        if (inKeyframe && braceCount === 0) {
+          endIndex = i + 1;
+          break;
+        }
+      }
+    }
+    const keyframeBlock = cssString.substring(start, endIndex);
+    keyframes.push({
+      name: keyframeName,
+      css: keyframeBlock
+    });
+  }
+  return keyframes;
+}
+function removeKeyframes(cssString) {
+  // Remove keyframes but keep the rest
+  let result = cssString;
+  const keyframesRegex = /@keyframes\s+([^\s{]+)\s*\{/g;
+  let match;
+  const toRemove = [];
+  while ((match = keyframesRegex.exec(cssString)) !== null) {
+    const start = match.index;
+    let braceCount = 0;
+    let inKeyframe = false;
+    for (let i = start; i < cssString.length; i++) {
+      if (cssString[i] === "{") {
+        braceCount++;
+        inKeyframe = true;
+      } else if (cssString[i] === "}") {
+        braceCount--;
+        if (inKeyframe && braceCount === 0) {
+          toRemove.push({
+            start,
+            end: i + 1
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  // Remove from end to start to preserve indices
+  for (let i = toRemove.length - 1; i >= 0; i--) {
+    const {
+      start,
+      end
+    } = toRemove[i];
+    result = result.substring(0, start) + result.substring(end);
+  }
+  return result.trim();
+}
+function updateGlobalKeyframes(keyframes) {
+  if (typeof document === "undefined") return;
+  const keyframesElement = getOrCreateGlobalKeyframesElement();
+  let hasNewKeyframes = false;
+  for (const {
+    name,
+    css
+  } of keyframes) {
+    if (!globalKeyframesCache.has(name)) {
+      globalKeyframesCache.set(name, css);
+      hasNewKeyframes = true;
+    }
+  }
+  if (hasNewKeyframes) {
+    // Rebuild all keyframes CSS from cache
+    const allKeyframesCSS = Array.from(globalKeyframesCache.values()).join("\n");
+    keyframesElement.textContent = allKeyframesCSS;
+  }
+}
 function updateGlobalCSS() {
   if (typeof document === "undefined") return;
   const styleElement = getOrCreateGlobalStyleElement();
@@ -9143,9 +9243,18 @@ function useTwsx(styles) {
   useEffect(() => {
     if (!css || !cssKey || options.inject === false) return;
 
-    // Only add to cache if not already present
+    // Extract keyframes from CSS
+    const keyframes = extractKeyframes(css);
+    const cssWithoutKeyframes = removeKeyframes(css);
+
+    // Inject keyframes separately (once per keyframe name)
+    if (keyframes.length > 0) {
+      updateGlobalKeyframes(keyframes);
+    }
+
+    // Only add component CSS to cache if not already present
     if (!globalCssCache.has(cssKey)) {
-      globalCssCache.set(cssKey, css);
+      globalCssCache.set(cssKey, cssWithoutKeyframes);
       updateGlobalCSS();
       console.log("useTwsx - Injected NEW CSS with key:", cssKey);
     } else {
@@ -9263,31 +9372,31 @@ function useUpdateTwsxConfig() {
   return updateConfig;
 }
 
-/**
- * styled() - Component factory for tailwind-to-style
- * Create styled components with Tailwind classes and variants
- *
- * @example
- * const Button = styled('button', {
- *   base: 'px-4 py-2 rounded-lg',
- *   hover: 'bg-blue-600',
- *   variants: {
- *     color: {
- *       primary: 'bg-blue-500 text-white',
- *       secondary: 'bg-gray-500 text-white'
- *     }
- *   },
- *   nested: {
- *     '.icon': 'w-4 h-4'
- *   }
- * })
+/**
+ * styled() - Component factory for tailwind-to-style
+ * Create styled components with Tailwind classes and variants
+ *
+ * @example
+ * const Button = styled('button', {
+ *   base: 'px-4 py-2 rounded-lg',
+ *   hover: 'bg-blue-600',
+ *   variants: {
+ *     color: {
+ *       primary: 'bg-blue-500 text-white',
+ *       secondary: 'bg-gray-500 text-white'
+ *     }
+ *   },
+ *   nested: {
+ *     '.icon': 'w-4 h-4'
+ *   }
+ * })
  */
 
 
-/**
- * Simple hash function for deterministic class names
- * @param {string} str - String to hash
- * @returns {string} Hash string
+/**
+ * Simple hash function for deterministic class names
+ * @param {string} str - String to hash
+ * @returns {string} Hash string
  */
 function simpleHash(str) {
   let hash = 0;
@@ -9299,12 +9408,12 @@ function simpleHash(str) {
   return Math.abs(hash).toString(36).substr(0, 6);
 }
 
-/**
- * Generate deterministic class name based on config and component instance
- * @param {Object|Function} config - Style configuration
- * @param {string} componentType - Component type (e.g., 'button', 'div')
- * @param {string} instanceId - Unique instance identifier (optional)
- * @returns {string} Deterministic class name
+/**
+ * Generate deterministic class name based on config and component instance
+ * @param {Object|Function} config - Style configuration
+ * @param {string} componentType - Component type (e.g., 'button', 'div')
+ * @param {string} instanceId - Unique instance identifier (optional)
+ * @returns {string} Deterministic class name
  */
 function generateClassName(config) {
   let componentType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "component";
@@ -9321,14 +9430,14 @@ function generateClassName(config) {
   return `twsx-${componentType}-${hash}${suffix}`;
 }
 
-/**
- * Create a styled component with Tailwind classes
- * @param {string|React.Component} component - HTML tag or React component
- * @param {Object} config - Style configuration
- * @param {Object} options - Additional options
- * @param {string} options.scope - Component scope for isolation (optional)
- * @param {boolean} options.isolate - Whether to isolate from other components (default: false)
- * @returns {React.Component} Styled component
+/**
+ * Create a styled component with Tailwind classes
+ * @param {string|React.Component} component - HTML tag or React component
+ * @param {Object} config - Style configuration
+ * @param {Object} options - Additional options
+ * @param {string} options.scope - Component scope for isolation (optional)
+ * @param {boolean} options.isolate - Whether to isolate from other components (default: false)
+ * @returns {React.Component} Styled component
  */
 function styled(component) {
   let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -9618,21 +9727,21 @@ function styled(component) {
   return StyledComponent;
 }
 
-/**
- * Create a styled component factory for a specific tag
- * @param {string} tag - HTML tag name
- * @returns {Function} Styled component factory
+/**
+ * Create a styled component factory for a specific tag
+ * @param {string} tag - HTML tag name
+ * @returns {Function} Styled component factory
  */
 function createStyledTag(tag) {
   return (config, options) => styled(tag, config, options);
 }
 
-/**
- * Create an isolated styled component (automatically scoped)
- * @param {string|React.Component} component - HTML tag or React component
- * @param {Object} config - Style configuration
- * @param {string} scope - Optional scope name
- * @returns {React.Component} Isolated styled component
+/**
+ * Create an isolated styled component (automatically scoped)
+ * @param {string|React.Component} component - HTML tag or React component
+ * @param {Object} config - Style configuration
+ * @param {string} scope - Optional scope name
+ * @returns {React.Component} Isolated styled component
  */
 function isolatedStyled(component) {
   let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -9643,10 +9752,10 @@ function isolatedStyled(component) {
   });
 }
 
-/**
- * Create a scoped styled component
- * @param {string} scope - Scope name for component isolation
- * @returns {Function} Scoped styled function
+/**
+ * Create a scoped styled component
+ * @param {string} scope - Scope name for component isolation
+ * @returns {Function} Scoped styled function
  */
 function createScopedStyled(scope) {
   return function (component) {