tailwind-to-style 2.12.3 → 2.12.5

package/README.md

@@ -15,7 +15,28 @@ The library exposes two main functions and a CLI tool:
 2. **`twsx`**: A more advanced function that allows you to define nested and complex styles similar to SCSS, including support for responsive design, state variants, grouping, and enhanced CSS capabilities.
 3. **`twsx-cli`**: A command-line tool for generating CSS files from `twsx.*.js` files with watch mode support.
 
-## ✨ What's New in v2.12.0
+## ✨ What's New in v2.12.4
+
+- **🏷️ Custom Classname Prefix**: Full control over styled component classnames
+  - **Configurable Prefix**: Change from `twsx-` to any prefix (e.g., `myapp-`)
+  - **Custom Separator**: Use `-`, `_`, `__` or any separator
+  - **Flexible Hash Length**: Adjust uniqueness vs size (4-8 characters)
+  - **Component Name Toggle**: Include/exclude component type in classname
+  - **Per-Component Override**: Different naming for specific components
+  - **Design System Ready**: Perfect for branded design systems
+
+**Example:**
+```javascript
+// Global config
+configure({ styled: { prefix: 'myapp', separator: '_' }})
+
+const Button = styled('button', { base: 'px-4 py-2' })
+// Generates: myapp_button_a3k9x (instead of twsx-button-a3k9x2)
+```
+
+**[📖 See Custom Prefix Guide →](#custom-classname-prefix-configuration)** | **[💻 Examples →](examples/custom-prefix.js)**
+
+### Previous Updates (v2.12.0)
 
 - **🚀 Complete Optimization Suite**: Production-ready performance tools
   - **Bundle Analysis**: Analyze size, get recommendations, export reports
@@ -764,6 +785,124 @@ document.querySelector('.my-button').className = className
 </template>
 ```
 
+### Custom Classname Prefix Configuration
+
+**New in v2.12.4** - Customize how styled components generate classnames with configurable prefix, separator, and naming options.
+
+#### Global Configuration
+
+Set global defaults for all styled components:
+
+```javascript
+import { configure } from 'tailwind-to-style'
+
+configure({
+  styled: {
+    prefix: 'myapp',           // Default: 'twsx'
+    separator: '_',            // Default: '-'
+    hashLength: 5,             // Default: 6
+    includeComponentName: true // Default: true
+  }
+})
+
+const Button = styled('button', {
+  base: 'px-4 py-2 rounded-lg'
+})
+// Generates: myapp_button_a3k9x (instead of twsx-button-a3k9x2)
+// Variants: myapp_color_primary (instead of twsx-color-primary)
+```
+
+#### Per-Component Override
+
+Override naming for specific components:
+
+```javascript
+const CustomButton = styled('button', 
+  {
+    base: 'px-4 py-2 rounded-lg',
+    variants: {
+      variant: {
+        solid: 'bg-blue-500',
+        outline: 'border border-blue-500'
+      }
+    }
+  },
+  {
+    // Component-specific naming options
+    prefix: 'btn',
+    separator: '-',
+    hashLength: 8,
+    includeComponentName: false
+  }
+)
+// Generates: btn-a3k9x2f1 (no component type)
+// Variants: btn-variant-solid
+```
+
+#### Use Cases
+
+**1. Brand-specific Prefix:**
+```javascript
+configure({ styled: { prefix: 'shopify' }})
+// shopify-button-a3k9x2
+```
+
+**2. Minimal Classnames:**
+```javascript
+configure({ 
+  styled: { 
+    prefix: 'c',
+    separator: '',
+    hashLength: 4,
+    includeComponentName: false
+  }
+})
+// c1a2b (super compact!)
+```
+
+**3. Monorepo Isolation:**
+```javascript
+// Admin app
+configure({ styled: { prefix: 'admin' }})
+// admin-button-xxx
+
+// Customer portal
+configure({ styled: { prefix: 'portal' }})
+// portal-button-yyy
+```
+
+**4. BEM-like Convention:**
+```javascript
+configure({ styled: { separator: '__' }})
+// twsx__button__a3k9x2
+```
+
+**5. Design System:**
+```javascript
+configure({ styled: { prefix: 'ds' }})
+const Button = styled('button', config)
+const Card = styled('div', config)
+// ds-button-a3k9x2, ds-card-f8d2k1
+```
+
+#### HTML Output Examples
+
+```html
+<!-- Default (prefix: 'twsx', separator: '-') -->
+<button class="twsx-button-a3k9x2 twsx-color-primary">Click</button>
+
+<!-- Custom (prefix: 'myapp', separator: '_') -->
+<button class="myapp_button_a3k9 myapp_color_primary">Click</button>
+
+<!-- Minimal (prefix: 'c', no component name) -->
+<button class="c-1a2b c-color-primary">Click</button>
+
+<!-- BEM-like (separator: '__') -->
+<button class="twsx__button__a3k9x2 twsx__color__primary">Click</button>
+```
+
+**[📖 Full Example →](examples/custom-prefix.js)**
+
 ### Batch Variant Creation
 
 Create multiple variant functions at once:
@@ -1265,6 +1404,13 @@ export default {
       },
     },
   },
+  // Styled components configuration
+  styled: {
+    prefix: 'myapp',           // Customize classname prefix
+    separator: '-',            // Customize separator
+    hashLength: 6,             // Hash length (4-8 recommended)
+    includeComponentName: true // Include component type in classname
+  }
 };
 ```
 
@@ -1277,6 +1423,65 @@ import config from "./tailwind-to-style.config.js";
 configure(config);
 ```
 
+### Configuration Options
+
+```javascript
+configure({
+  // Theme customization
+  theme: {
+    extend: {
+      colors: { /* custom colors */ },
+      spacing: { /* custom spacing */ },
+      borderRadius: { /* custom border radius */ },
+      fontSize: { /* custom font sizes */ },
+      // ... any Tailwind theme property
+    },
+  },
+  
+  // Optional: Add prefix to utility classes
+  prefix: 'tw-',
+  
+  // Optional: Disable specific core plugins
+  corePlugins: {
+    float: false,
+    clear: false,
+  },
+  
+  // NEW: Styled components naming configuration
+  styled: {
+    prefix: 'twsx',            // Global prefix (default: 'twsx')
+    separator: '-',            // Separator between parts (default: '-')
+    hashLength: 6,             // Hash length 4-8 (default: 6)
+    includeComponentName: true // Include component type (default: true)
+  }
+});
+```
+
+**Examples:**
+
+```javascript
+// Brand-specific prefix
+configure({ styled: { prefix: 'myapp' }})
+// Generated: myapp-button-a3k9x2
+
+// Minimal classnames
+configure({ 
+  styled: { 
+    prefix: 'c',
+    separator: '',
+    hashLength: 4,
+    includeComponentName: false
+  }
+})
+// Generated: c1a2b
+
+// BEM-like style
+configure({ styled: { separator: '__' }})
+// Generated: twsx__button__a3k9x2
+```
+
+See [Custom Classname Prefix Configuration](#custom-classname-prefix-configuration) for more details.
+
 ## Custom Plugins (v2.10.0+)
 
 Create custom utility classes with the plugin API:

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.12.3
+ * tailwind-to-style v2.12.5
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1933,7 +1933,16 @@ let userConfig = {
   },
   plugins: [],
   corePlugins: {},
-  prefix: ""
+  prefix: "",
+  styled: {
+    prefix: "twsx",
+    // Global prefix for styled components
+    separator: "-",
+    // Separator between prefix and component
+    hashLength: 6,
+    // Length of generated hash
+    includeComponentName: true // Include component type in classname
+  }
 };
 
 // Cache for extended theme to avoid redundant lookups
@@ -9488,16 +9497,18 @@ function useUpdateTwsxConfig() {
 /**
  * Simple hash function for deterministic class names
  * @param {string} str - String to hash
+ * @param {number} length - Length of hash (default: 6)
  * @returns {string} Hash string
  */
 function simpleHash(str) {
+  let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
     hash = (hash << 5) - hash + char;
     hash = hash & hash; // Convert to 32bit integer
   }
-  return Math.abs(hash).toString(36).substr(0, 6);
+  return Math.abs(hash).toString(36).substr(0, length);
 }
 
 /**
@@ -9505,21 +9516,56 @@ function simpleHash(str) {
  * @param {Object|Function} config - Style configuration
  * @param {string} componentType - Component type (e.g., 'button', 'div')
  * @param {string} instanceId - Unique instance identifier (optional)
+ * @param {Object} options - Naming options (prefix, separator, etc)
  * @returns {string} Deterministic class name
  */
 function generateClassName(config) {
   let componentType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "component";
   let instanceId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  // Get global config
+  const globalConfig = getConfig();
+  const styledConfig = globalConfig.styled || {};
+
+  // Merge options with global config (options override global)
+  const {
+    prefix = styledConfig.prefix || "twsx",
+    separator = styledConfig.separator || "-",
+    hashLength = styledConfig.hashLength || 6,
+    includeComponentName = styledConfig.includeComponentName !== false
+  } = options;
+
   // If config is a function (from tv()), use its string representation
   const configStr = typeof config === "function" ? config.toString() : JSON.stringify(config);
 
   // Include instanceId in hash to ensure uniqueness per component
   const hashInput = configStr + componentType + (instanceId || "");
-  const hash = simpleHash(hashInput);
+  const hash = simpleHash(hashInput, hashLength);
 
-  // Generate unique class name with instance ID if provided
-  const suffix = instanceId ? `-${instanceId}` : "";
-  return `twsx-${componentType}-${hash}${suffix}`;
+  // Build class name parts
+  const parts = [prefix];
+  if (includeComponentName) {
+    parts.push(componentType);
+  }
+  parts.push(hash);
+  if (instanceId) {
+    parts.push(instanceId);
+  }
+  return parts.join(separator);
+}
+
+/**
+ * Get variant prefix from config or options
+ * @param {Object} namingOptions - Naming options
+ * @returns {string} Variant prefix
+ */
+function getVariantPrefix() {
+  let namingOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const globalConfig = getConfig();
+  const styledConfig = globalConfig.styled || {};
+  const prefix = namingOptions.prefix || styledConfig.prefix || "twsx";
+  const separator = namingOptions.separator || styledConfig.separator || "-";
+  return `${prefix}${separator}`;
 }
 
 /**
@@ -9529,6 +9575,11 @@ function generateClassName(config) {
  * @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)
+ * @param {string} options.prefix - Custom prefix for classnames (default: from global config)
+ * @param {string} options.separator - Custom separator (default: from global config)
+ * @param {number} options.hashLength - Custom hash length (default: from global config)
+ * @param {boolean} options.includeComponentName - Include component name in classname (default: from global config)
+ * @param {string} options.displayName - Custom display name for component (optional)
  * @returns {React.Component} Styled component
  */
 function styled(component) {
@@ -9536,9 +9587,30 @@ function styled(component) {
   let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     scope = null,
-    isolate = false
+    isolate = false,
+    prefix,
+    separator,
+    hashLength,
+    includeComponentName,
+    displayName
   } = options;
 
+  // Extract naming options
+  const namingOptions = {
+    ...(prefix !== undefined && {
+      prefix
+    }),
+    ...(separator !== undefined && {
+      separator
+    }),
+    ...(hashLength !== undefined && {
+      hashLength
+    }),
+    ...(includeComponentName !== undefined && {
+      includeComponentName
+    })
+  };
+
   // Generate unique instance ID for isolation - FIXED: Always use scope when provided
   const instanceId = scope || (isolate ? `${Date.now()}-${Math.random().toString(36).substr(2, 9)}` : null);
 
@@ -9548,7 +9620,7 @@ function styled(component) {
 
     // Generate deterministic class name based on component and config
     const componentType = typeof component === "string" ? component : "component";
-    const componentId = generateClassName(config, componentType, instanceId);
+    const componentId = generateClassName(config, componentType, instanceId, namingOptions);
     const baseClassName = `.${componentId}`;
 
     // Create styled component
@@ -9581,12 +9653,16 @@ function styled(component) {
         ...variantProps
       };
 
-      // Generate variant class names with twsx- prefix
+      // Generate variant class names with configurable prefix
+      const globalConfig = getConfig();
+      const styledConfig = globalConfig.styled || {};
+      const variantPrefix = getVariantPrefix(namingOptions);
+      const sep = namingOptions.separator || styledConfig.separator || "-";
       const variantClassNames = [];
       Object.entries(finalVariantProps).forEach(_ref => {
         let [key, value] = _ref;
         if (value) {
-          variantClassNames.push(`twsx-${key}-${value}`);
+          variantClassNames.push(`${variantPrefix}${key}${sep}${value}`);
         }
       });
 
@@ -9609,9 +9685,14 @@ function styled(component) {
           let [variantKey, variantValues] = _ref2;
           Object.entries(variantValues).forEach(_ref3 => {
             let [variantValue, variantClasses] = _ref3;
-            const variantSelector = `&.twsx-${variantKey}-${variantValue}`;
-            if (variantClasses && variantClasses.trim()) {
-              nestedVariants[variantSelector] = variantClasses;
+            const variantPrefix = getVariantPrefix(namingOptions);
+            const sep = namingOptions.separator || styledConfig.separator || "-";
+            const variantSelector = `&.${variantPrefix}${variantKey}${sep}${variantValue}`;
+
+            // Handle both string and array of classes
+            const normalizedClasses = Array.isArray(variantClasses) ? variantClasses.join(" ") : variantClasses;
+            if (normalizedClasses && normalizedClasses.trim()) {
+              nestedVariants[variantSelector] = normalizedClasses;
             }
           });
         });
@@ -9624,21 +9705,29 @@ function styled(component) {
           } = compound;
 
           // Build selector with all condition classes
+          const variantPrefix = getVariantPrefix(namingOptions);
+          const sep = namingOptions.separator || styledConfig.separator || "-";
           const conditionClasses = Object.entries(conditions).map(_ref4 => {
             let [key, value] = _ref4;
-            return `twsx-${key}-${value}`;
+            return `${variantPrefix}${key}${sep}${value}`;
           }).join(".");
           const compoundSelector = `&.${conditionClasses}`;
-          if (compoundClass && compoundClass.trim()) {
-            nestedVariants[compoundSelector] = compoundClass;
+
+          // Handle both string and array of classes
+          const normalizedClass = Array.isArray(compoundClass) ? compoundClass.join(" ") : compoundClass;
+          if (normalizedClass && normalizedClass.trim()) {
+            nestedVariants[compoundSelector] = normalizedClass;
           }
         });
 
         // 3. Build final structure: [base, { nested variants }]
         // This matches the twsx() format exactly
         const styleArray = [];
-        if (base.trim()) {
-          styleArray.push(base);
+
+        // Handle both string and array of classes for base
+        const normalizedBase = Array.isArray(base) ? base.join(" ") : base;
+        if (normalizedBase && normalizedBase.trim()) {
+          styleArray.push(normalizedBase);
         }
         if (Object.keys(nestedVariants).length > 0) {
           styleArray.push(nestedVariants);
@@ -9663,7 +9752,7 @@ function styled(component) {
         ...componentProps
       }, children);
     });
-    StyledComponent.displayName = `Styled(${typeof component === "string" ? component : component.displayName || component.name || "Component"})`;
+    StyledComponent.displayName = displayName || `Styled(${typeof component === "string" ? component : component.displayName || component.name || "Component"})`;
     return StyledComponent;
   }
 
@@ -9682,7 +9771,7 @@ function styled(component) {
 
   // Generate deterministic class name based on component and config
   const componentType = typeof component === "string" ? component : "component";
-  const componentId = generateClassName(config, componentType, instanceId);
+  const componentId = generateClassName(config, componentType, instanceId, namingOptions);
   const className = `.${componentId}`;
 
   // Create styled component
@@ -9711,18 +9800,24 @@ function styled(component) {
       ...variantProps
     };
 
-    // Generate variant class names with twsx- prefix
+    // Generate variant class names with configurable prefix
+    const globalConfig = getConfig();
+    const styledConfig = globalConfig.styled || {};
+    const variantPrefix = getVariantPrefix(namingOptions);
+    const sep = namingOptions.separator || styledConfig.separator || "-";
     const variantClassNames = [];
     Object.entries(appliedVariantProps).forEach(_ref5 => {
       let [key, value] = _ref5;
       if (value) {
-        variantClassNames.push(`twsx-${key}-${value}`);
+        variantClassNames.push(`${variantPrefix}${key}${sep}${value}`);
       }
     });
 
     // Build twsx styles object with nested structure
     const styles = useMemo(() => {
       const styleObj = {};
+      const globalConfig = getConfig();
+      const styledConfig = globalConfig.styled || {};
 
       // Build nested variants structure
       const nestedVariants = {};
@@ -9732,9 +9827,14 @@ function styled(component) {
         let [variantKey, variantValues] = _ref6;
         Object.entries(variantValues).forEach(_ref7 => {
           let [variantValue, variantClasses] = _ref7;
-          const variantSelector = `&.twsx-${variantKey}-${variantValue}`;
-          if (variantClasses && variantClasses.trim()) {
-            nestedVariants[variantSelector] = variantClasses;
+          const variantPrefix = getVariantPrefix(namingOptions);
+          const sep = namingOptions.separator || styledConfig.separator || "-";
+          const variantSelector = `&.${variantPrefix}${variantKey}${sep}${variantValue}`;
+
+          // Handle both string and array of classes
+          const normalizedClasses = Array.isArray(variantClasses) ? variantClasses.join(" ") : variantClasses;
+          if (normalizedClasses && normalizedClasses.trim()) {
+            nestedVariants[variantSelector] = normalizedClasses;
           }
         });
       });
@@ -9742,19 +9842,21 @@ function styled(component) {
       // Generate compound variant selectors
       compoundVariants.forEach(compound => {
         const {
-          className: compoundClass,
+          class: compoundClass,
           ...conditions
         } = compound;
 
         // Build selector with :not() for false values
         const positiveConditions = [];
         const negativeConditions = [];
+        const variantPrefix = getVariantPrefix(namingOptions);
+        const sep = namingOptions.separator || styledConfig.separator || "-";
         Object.entries(conditions).forEach(_ref8 => {
           let [key, value] = _ref8;
           if (value === false) {
-            negativeConditions.push(`twsx-${key}-true`);
+            negativeConditions.push(`${variantPrefix}${key}${sep}true`);
           } else {
-            positiveConditions.push(`twsx-${key}-${value}`);
+            positiveConditions.push(`${variantPrefix}${key}${sep}${value}`);
           }
         });
 
@@ -9768,15 +9870,21 @@ function styled(component) {
             compoundSelector += `:not(.${negClass})`;
           });
         }
-        if (compoundClass && compoundClass.trim()) {
-          nestedVariants[compoundSelector] = compoundClass;
+
+        // Handle both string and array of classes
+        const normalizedClass = Array.isArray(compoundClass) ? compoundClass.join(" ") : compoundClass;
+        if (normalizedClass && normalizedClass.trim()) {
+          nestedVariants[compoundSelector] = normalizedClass;
         }
       });
 
       // Build final nested structure: [base, { nested variants }]
       const styleArray = [];
-      if (base.trim()) {
-        styleArray.push(base);
+
+      // Handle both string and array of classes for base
+      const normalizedBase = Array.isArray(base) ? base.join(" ") : base;
+      if (normalizedBase && normalizedBase.trim()) {
+        styleArray.push(normalizedBase);
       }
 
       // Add pseudo-state classes to nested

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.12.3
+ * tailwind-to-style v2.12.5
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1845,7 +1845,16 @@ let userConfig = {
   },
   plugins: [],
   corePlugins: {},
-  prefix: ""
+  prefix: "",
+  styled: {
+    prefix: "twsx",
+    // Global prefix for styled components
+    separator: "-",
+    // Separator between prefix and component
+    hashLength: 6,
+    // Length of generated hash
+    includeComponentName: true // Include component type in classname
+  }
 };
 
 // Cache for extended theme to avoid redundant lookups

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.12.3
+ * tailwind-to-style v2.12.5
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion
@@ -1843,7 +1843,16 @@ let userConfig = {
   },
   plugins: [],
   corePlugins: {},
-  prefix: ""
+  prefix: "",
+  styled: {
+    prefix: "twsx",
+    // Global prefix for styled components
+    separator: "-",
+    // Separator between prefix and component
+    hashLength: 6,
+    // Length of generated hash
+    includeComponentName: true // Include component type in classname
+  }
 };
 
 // Cache for extended theme to avoid redundant lookups