tailwind-to-style 3.3.0 → 4.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tailwind-to-style",
-  "version": "3.3.0",
-  "description": "Runtime Tailwind CSS to inline styles converter. Zero build step, SSR support, tree-shakeable. Works with React, Vue, Svelte, vanilla JS.",
+  "version": "4.0.0",
+  "description": "Zero-build runtime Tailwind CSS engine. Convert utility classes to real CSS with variants, slots, tokens, and React bindings. SSR-ready, tree-shakeable.",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -15,26 +15,26 @@
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.esm.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.esm.js",
+      "require": "./dist/tokens/index.cjs"
+    },
+    "./animations": {
+      "types": "./dist/animations/index.d.ts",
+      "import": "./dist/animations/index.esm.js",
+      "require": "./dist/animations/index.cjs"
+    },
     "./tws": {
       "types": "./dist/core/tws.d.ts",
       "import": "./dist/core/tws.esm.js",
       "require": "./dist/core/tws.cjs"
     },
-    "./twsx": {
-      "types": "./dist/core/twsx.d.ts",
-      "import": "./dist/core/twsx.esm.js",
-      "require": "./dist/core/twsx.cjs"
-    },
-    "./twsx-variants": {
-      "types": "./dist/core/twsxVariants.d.ts",
-      "import": "./dist/core/twsxVariants.esm.js",
-      "require": "./dist/core/twsxVariants.cjs"
-    },
-    "./utils": {
-      "types": "./dist/utils/index.d.ts",
-      "import": "./dist/utils/index.esm.js",
-      "require": "./dist/utils/index.cjs"
-    },
     "./cx": {
       "types": "./dist/cx.d.ts",
       "import": "./dist/cx.esm.js",
@@ -48,7 +48,7 @@
     "./preflight.css": "./preflight.css",
     "./package.json": "./package.json"
   },
-  "sideEffects": false,
+  "sideEffects": ["*.css", "dist/*.js", "dist/**/*.js"],
   "files": [
     "dist",
     "types",
@@ -82,19 +82,20 @@
     "tailwind",
     "tailwindcss",
     "css",
-    "stylesheet",
-    "inline-styles",
-    "runtime-css",
     "css-in-js",
+    "runtime-css",
     "zero-build",
+    "variants",
+    "slots",
+    "design-tokens",
+    "styled-components",
     "ssr",
     "server-side-rendering",
     "tree-shakeable",
-    "variants",
-    "style-converter",
     "react",
     "vue",
-    "svelte"
+    "svelte",
+    "vanilla-js"
   ],
   "author": "Bigetion",
   "license": "MIT",
@@ -106,6 +107,14 @@
     "url": "https://github.com/Bigetion/tailwind-to-style/issues"
   },
   "homepage": "https://github.com/Bigetion/tailwind-to-style#readme",
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",

package/types/animations/index.d.ts

@@ -0,0 +1,58 @@
+// Type definitions for tailwind-to-style/animations
+
+export type AnimationPresetName =
+  | 'fadeIn' | 'fadeOut'
+  | 'slideInUp' | 'slideInDown' | 'slideInLeft' | 'slideInRight'
+  | 'scaleIn' | 'scaleOut'
+  | 'bounce' | 'shake' | 'pulse' | 'spin' | 'ping';
+
+export interface AnimationKeyframe {
+  [property: string]: string;
+}
+
+export interface AnimationConfig {
+  keyframes: AnimationKeyframe[];
+  duration?: string;
+  easing?: string;
+  delay?: string;
+  iterations?: string | number;
+  fillMode?: string;
+}
+
+export interface AnimateOptions {
+  duration?: string;
+  easing?: string;
+  delay?: string;
+  iterations?: string | number;
+  fillMode?: string;
+}
+
+/**
+ * Apply a named animation, returning a className with the animation injected.
+ */
+export declare function animate(name: AnimationPresetName | string, options?: AnimateOptions): string;
+
+/**
+ * Define a custom animation preset.
+ */
+export declare function defineAnimation(name: string, config: AnimationConfig): void;
+
+/**
+ * Get all available animation names (built-in + custom).
+ */
+export declare function getAnimationNames(): string[];
+
+/**
+ * Get an animation preset config by name.
+ */
+export declare function getPreset(name: string): AnimationConfig | undefined;
+
+/**
+ * Clear all injected keyframes and custom animations.
+ */
+export declare function clearAnimations(): void;
+
+/**
+ * Built-in animation presets.
+ */
+export declare const ANIMATION_PRESETS: Record<AnimationPresetName, AnimationConfig>;

package/types/index.d.ts

@@ -1,7 +1,10 @@
-// Type definitions for tailwind-to-style
+// Type definitions for tailwind-to-style v4
 // Project: https://github.com/Bigetion/tailwind-to-style
 // Definitions by: Bigetion
 
+// v4 unified API re-exports
+export { tw, tws, cx, createSSRCollector } from './v4';
+
 // ============================================================================
 // Environment Detection
 // ============================================================================

package/types/react/index.d.ts

@@ -0,0 +1,69 @@
+// Type definitions for tailwind-to-style/react
+
+import { ComponentType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+
+// ============================================================================
+// styled()
+// ============================================================================
+
+type IntrinsicElement = keyof JSX.IntrinsicElements;
+
+interface StyledConfig<V extends Record<string, Record<string, string>> = {}> {
+  name?: string;
+  base?: string;
+  variants?: V;
+  defaultVariants?: { [K in keyof V]?: keyof V[K] };
+  compoundVariants?: Array<{ class?: string; className?: string; [key: string]: any }>;
+  slots?: Record<string, string>;
+}
+
+type VariantProps<V extends Record<string, Record<string, string>>> = {
+  [K in keyof V]?: keyof V[K];
+};
+
+type StyledComponent<
+  T extends IntrinsicElement | ComponentType<any>,
+  V extends Record<string, Record<string, string>>
+> = ForwardRefExoticComponent<
+  PropsWithoutRef<
+    (T extends IntrinsicElement ? JSX.IntrinsicElements[T] : T extends ComponentType<infer P> ? P : never) &
+    VariantProps<V> & { className?: string }
+  > &
+  RefAttributes<T extends IntrinsicElement ? HTMLElement : any>
+> & {
+  variants: any;
+  raw: StyledConfig<V>;
+};
+
+export declare function styled<
+  T extends IntrinsicElement | ComponentType<any>,
+  V extends Record<string, Record<string, string>> = {}
+>(
+  element: T,
+  config?: StyledConfig<V>
+): StyledComponent<T, V>;
+
+// ============================================================================
+// ThemeProvider & useTheme
+// ============================================================================
+
+interface ThemeProviderProps {
+  theme: Record<string, any>;
+  name?: string;
+  children: React.ReactNode;
+}
+
+interface ThemeContextValue {
+  theme: Record<string, any>;
+  setTheme: (newTheme: Record<string, any>) => void;
+  tokens: Record<string, any>;
+}
+
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+
+// ============================================================================
+// useTws
+// ============================================================================
+
+export declare function useTws(classes: string): Record<string, string>;

package/types/tokens/index.d.ts

@@ -0,0 +1,33 @@
+// Type definitions for tailwind-to-style/tokens
+
+export interface TokenRegistry {
+  get(path: string): string | undefined;
+  set(path: string, value: string): void;
+  subscribe(callback: (tokens: Record<string, any>) => void): () => void;
+  toCSS(): string;
+  getAll(): Record<string, any>;
+  clear(): void;
+}
+
+export interface ThemeResult {
+  name: string;
+  tokens: Record<string, any>;
+  selector: string;
+  var(path: string): string;
+}
+
+export interface CreateThemeOptions {
+  name?: string;
+  selector?: string;
+}
+
+export declare const tokenRegistry: TokenRegistry;
+
+export declare function createTheme(
+  tokens: Record<string, any>,
+  options?: CreateThemeOptions
+): ThemeResult;
+
+export declare function activateTheme(name: string): void;
+
+export declare function token(path: string, fallback?: string): string;

package/types/v4.d.ts

@@ -0,0 +1,191 @@
+// Type definitions for tailwind-to-style v4
+// Unified API type declarations
+
+// ============================================================================
+// Core Types
+// ============================================================================
+
+type ClassValue = string | number | boolean | null | undefined | ClassObject | ClassArray;
+type ClassObject = Record<string, any>;
+type ClassArray = ClassValue[];
+
+// ============================================================================
+// tw() — The Main Function
+// ============================================================================
+
+/**
+ * Variants definition for tw()
+ */
+interface TwVariantsDefinition {
+  [variantName: string]: {
+    [optionKey: string]: string | { _?: string; [key: string]: string | undefined };
+  };
+}
+
+/**
+ * Variant props inferred from definition
+ */
+type TwVariantProps<V extends TwVariantsDefinition> = {
+  [K in keyof V]?: keyof V[K] | boolean;
+};
+
+/**
+ * Variant selector function returned by tw() in Mode 3
+ */
+interface TwVariantFunction<V extends TwVariantsDefinition> {
+  (props?: TwVariantProps<V>): string;
+  merge(props?: TwVariantProps<V>, ...additionalClasses: ClassValue[]): string;
+  merge(...additionalClasses: ClassValue[]): string;
+  raw(): TwVariantsConfig<V>;
+}
+
+/**
+ * Slots definition for tw()
+ */
+interface TwSlotsDefinition {
+  [slotName: string]: string | { _?: string; [key: string]: string | undefined };
+}
+
+/**
+ * Slots function returned by tw() in Mode 4
+ */
+interface TwSlotsFunction<S extends TwSlotsDefinition, V extends TwVariantsDefinition> {
+  (props?: TwVariantProps<V>): { [K in keyof S]: string };
+  merge(props?: TwVariantProps<V>, slotOverrides?: Partial<{ [K in keyof S]: string }>): { [K in keyof S]: string };
+  raw(): TwSlotsConfig<S, V>;
+}
+
+/**
+ * Config for tw() Mode 3 (variants)
+ */
+interface TwVariantsConfig<V extends TwVariantsDefinition = TwVariantsDefinition> {
+  name?: string;
+  base?: string | { _?: string; [key: string]: string | undefined };
+  variants: V;
+  compoundVariants?: Array<{ class?: string; className?: string; [key: string]: any }>;
+  defaultVariants?: { [K in keyof V]?: keyof V[K] | boolean };
+  responsiveVariants?: (keyof V)[];
+  prefix?: string;
+  hash?: boolean;
+  hashLength?: number;
+  inject?: boolean;
+}
+
+/**
+ * Config for tw() Mode 4 (slots)
+ */
+interface TwSlotsConfig<
+  S extends TwSlotsDefinition = TwSlotsDefinition,
+  V extends TwVariantsDefinition = TwVariantsDefinition
+> {
+  name?: string;
+  slots: S;
+  variants?: V;
+  compoundVariants?: Array<{ class?: string; className?: string; [key: string]: any }>;
+  defaultVariants?: { [K in keyof V]?: keyof V[K] | boolean };
+  prefix?: string;
+  hash?: boolean;
+  hashLength?: number;
+  inject?: boolean;
+}
+
+/**
+ * Config for tw() Mode 2 (named class — object form)
+ */
+interface TwBasicConfig {
+  name?: string;
+  _?: string;
+  prefix?: string;
+  hash?: boolean;
+  hashLength?: number;
+  inject?: boolean;
+  [key: string]: any;
+}
+
+/**
+ * The unified tw() function.
+ */
+interface TwFunction {
+  /** Mode 1: String → atomic CSS classes */
+  (classes: string): string;
+
+  /** Mode 2: Named class → scoped className */
+  (name: string, classes: string): string;
+
+  /** Mode 3: Variants config → variant selector function */
+  <V extends TwVariantsDefinition>(config: TwVariantsConfig<V>): TwVariantFunction<V>;
+
+  /** Mode 4: Slots config → slots generator function */
+  <S extends TwSlotsDefinition, V extends TwVariantsDefinition>(config: TwSlotsConfig<S, V>): TwSlotsFunction<S, V>;
+
+  /** Mode 2/3/4: Generic object config */
+  (config: TwBasicConfig): string;
+
+  /** Extract all generated CSS (for SSR) */
+  extractCSS(): string;
+
+  /** Clear internal caches */
+  clearCache(): void;
+
+  /** Configure global settings */
+  config(options: {
+    prefix?: string;
+    hash?: boolean;
+    hashLength?: number;
+    inject?: boolean;
+    deduplicate?: boolean;
+  }): void;
+}
+
+export declare const tw: TwFunction;
+
+// ============================================================================
+// tws() — Inline Style Converter
+// ============================================================================
+
+/**
+ * Convert Tailwind classes to inline CSS string or JSON object.
+ */
+export declare function tws(classNames: string, convertToJson?: false): string;
+export declare function tws(classNames: string, convertToJson: true): Record<string, string>;
+export declare function tws(classNames: string, convertToJson?: boolean): string | Record<string, string>;
+
+// ============================================================================
+// cx() — Conditional Class Names
+// ============================================================================
+
+/**
+ * Conditionally join class names.
+ */
+export declare function cx(...args: ClassValue[]): string;
+
+export declare namespace cx {
+  function with_(...baseArgs: ClassValue[]): (...args: ClassValue[]) => string;
+  export { with_ as with };
+}
+
+// ============================================================================
+// SSR
+// ============================================================================
+
+export interface SSRCollectorOptions {
+  dedupe?: boolean;
+  minify?: boolean;
+  sort?: boolean;
+}
+
+export interface SSRCollector {
+  extract(options?: { id?: string; nonce?: string; minify?: boolean }): string;
+  getCSS(): string;
+  getStyleTag(options?: { id?: string; nonce?: string }): string;
+  reset(): void;
+  stats(): { ruleCount: number; uniqueCount: number; totalSize: number };
+}
+
+export declare function createSSRCollector(options?: SSRCollectorOptions): SSRCollector;
+
+// ============================================================================
+// Default Export
+// ============================================================================
+
+export default tw;