chaincss 2.0.7 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (159) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/CODE_OF_CONDUCT.md +21 -0
  3. package/CONTRIBUTING.md +28 -0
  4. package/README.md +455 -226
  5. package/demo/demo/node_modules/caniuse-db/fulldata-json/data-2.0.json +1 -0
  6. package/demo/index.html +16 -0
  7. package/demo/package.json +20 -0
  8. package/demo/src/App.tsx +117 -0
  9. package/demo/src/chaincss-barrel.ts +9 -0
  10. package/demo/src/main.tsx +8 -0
  11. package/demo/src/styles.chain.ts +300 -0
  12. package/demo/vite.config.ts +46 -0
  13. package/dist/cli/commands/build.d.ts +0 -1
  14. package/dist/cli/commands/cache.d.ts +1 -0
  15. package/dist/cli/commands/init.d.ts +6 -3
  16. package/dist/cli/commands/timeline.d.ts +0 -1
  17. package/dist/cli/commands/watch.d.ts +0 -1
  18. package/dist/cli/index.d.ts +0 -1
  19. package/dist/cli/index.js +3213 -5296
  20. package/dist/cli/types.d.ts +51 -20
  21. package/dist/cli/utils/config-loader.d.ts +0 -1
  22. package/dist/cli/utils/file-utils.d.ts +27 -3
  23. package/dist/cli/utils/logger.d.ts +0 -1
  24. package/dist/compiler/Chain.d.ts +215 -0
  25. package/dist/compiler/animations.d.ts +76 -0
  26. package/dist/compiler/atomic-optimizer.d.ts +47 -12
  27. package/dist/compiler/breakpoints.d.ts +46 -0
  28. package/dist/compiler/btt.d.ts +36 -60
  29. package/dist/compiler/cache-manager.d.ts +58 -4
  30. package/dist/compiler/commonProps.d.ts +0 -1
  31. package/dist/compiler/content-addressable-cache.d.ts +78 -0
  32. package/dist/compiler/helpers.d.ts +54 -0
  33. package/dist/compiler/index.d.ts +16 -9
  34. package/dist/compiler/index.js +4450 -4316
  35. package/dist/compiler/prefixer.d.ts +17 -1
  36. package/dist/compiler/shorthands.d.ts +28 -0
  37. package/dist/compiler/suggestions.d.ts +43 -0
  38. package/dist/compiler/theme-contract.d.ts +16 -27
  39. package/dist/compiler/token-resolver.d.ts +69 -0
  40. package/dist/compiler/tokens.d.ts +33 -8
  41. package/dist/core/auto-detector.d.ts +34 -0
  42. package/dist/core/common-utils.d.ts +97 -0
  43. package/dist/core/compiler.d.ts +63 -23
  44. package/dist/core/constants.d.ts +137 -36
  45. package/dist/core/smart-chain.d.ts +3 -0
  46. package/dist/core/types.d.ts +122 -15
  47. package/dist/core/utils.d.ts +134 -17
  48. package/dist/index.d.ts +52 -8
  49. package/dist/index.js +7090 -5578
  50. package/dist/plugins/vite.d.ts +7 -5
  51. package/dist/plugins/vite.js +2964 -25641
  52. package/dist/plugins/webpack.d.ts +24 -1
  53. package/dist/plugins/webpack.js +209 -72
  54. package/dist/runtime/Chain.d.ts +32 -0
  55. package/dist/runtime/auto-hooks.d.ts +11 -0
  56. package/dist/runtime/hmr.d.ts +22 -2
  57. package/dist/runtime/index.d.ts +3 -2
  58. package/dist/runtime/index.js +3648 -301
  59. package/dist/runtime/injector.d.ts +39 -72
  60. package/dist/runtime/react.d.ts +17 -12
  61. package/dist/runtime/svelte.d.ts +15 -0
  62. package/dist/runtime/types.d.ts +126 -4
  63. package/dist/runtime/utils.d.ts +0 -1
  64. package/dist/runtime/vue.d.ts +34 -14
  65. package/package.json +59 -66
  66. package/src/cli/commands/build.ts +133 -0
  67. package/src/cli/commands/cache.ts +371 -0
  68. package/src/cli/commands/init.ts +230 -0
  69. package/src/cli/commands/timeline.ts +435 -0
  70. package/src/cli/commands/watch.ts +211 -0
  71. package/src/cli/index.ts +226 -0
  72. package/src/cli/types.ts +100 -0
  73. package/src/cli/utils/config-loader.ts +174 -0
  74. package/src/cli/utils/file-utils.ts +139 -0
  75. package/src/cli/utils/logger.ts +74 -0
  76. package/src/compiler/Chain.ts +831 -0
  77. package/src/compiler/animations.ts +517 -0
  78. package/src/compiler/atomic-optimizer.ts +786 -0
  79. package/src/compiler/breakpoints.ts +347 -0
  80. package/src/compiler/btt.ts +1147 -0
  81. package/src/compiler/cache-manager.ts +446 -0
  82. package/src/compiler/commonProps.ts +18 -0
  83. package/src/compiler/content-addressable-cache.ts +478 -0
  84. package/src/compiler/helpers.ts +407 -0
  85. package/src/compiler/index.ts +72 -0
  86. package/src/compiler/prefixer.ts +720 -0
  87. package/src/compiler/shorthands.ts +558 -0
  88. package/src/compiler/suggestions.ts +436 -0
  89. package/src/compiler/theme-contract.ts +197 -0
  90. package/src/compiler/token-resolver.ts +241 -0
  91. package/src/compiler/tokens.ts +612 -0
  92. package/src/core/auto-detector.ts +187 -0
  93. package/src/core/common-utils.ts +423 -0
  94. package/src/core/compiler.ts +835 -0
  95. package/src/core/constants.ts +424 -0
  96. package/src/core/index.ts +107 -0
  97. package/src/core/smart-chain.ts +163 -0
  98. package/src/core/types.ts +257 -0
  99. package/src/core/utils.ts +598 -0
  100. package/src/index.ts +208 -0
  101. package/src/plugins/vite.d.ts +316 -0
  102. package/src/plugins/vite.ts +424 -0
  103. package/src/plugins/webpack.d.ts +289 -0
  104. package/src/plugins/webpack.ts +416 -0
  105. package/src/runtime/Chain.ts +242 -0
  106. package/src/runtime/auto-hooks.tsx +127 -0
  107. package/src/runtime/auto-vue.ts +72 -0
  108. package/src/runtime/hmr.ts +212 -0
  109. package/src/runtime/index.ts +82 -0
  110. package/src/runtime/injector.ts +273 -0
  111. package/src/runtime/react.tsx +269 -0
  112. package/src/runtime/svelte.ts +15 -0
  113. package/src/runtime/types.ts +256 -0
  114. package/src/runtime/utils.ts +128 -0
  115. package/src/runtime/vite-env.d.ts +120 -0
  116. package/src/runtime/vue.ts +231 -0
  117. package/tsconfig.build.json +41 -0
  118. package/tsconfig.json +25 -0
  119. package/tsconfig.runtimes.json +18 -0
  120. package/dist/cli/cli.cjs +0 -7
  121. package/dist/cli/commands/build.d.ts.map +0 -1
  122. package/dist/cli/commands/compile.d.ts +0 -3
  123. package/dist/cli/commands/compile.d.ts.map +0 -1
  124. package/dist/cli/commands/init.d.ts.map +0 -1
  125. package/dist/cli/commands/timeline.d.ts.map +0 -1
  126. package/dist/cli/commands/watch.d.ts.map +0 -1
  127. package/dist/cli/index.d.ts.map +0 -1
  128. package/dist/cli/types.d.ts.map +0 -1
  129. package/dist/cli/utils/config-loader.d.ts.map +0 -1
  130. package/dist/cli/utils/file-utils.d.ts.map +0 -1
  131. package/dist/cli/utils/logger.d.ts.map +0 -1
  132. package/dist/compiler/atomic-optimizer.d.ts.map +0 -1
  133. package/dist/compiler/btt.d.ts.map +0 -1
  134. package/dist/compiler/cache-manager.d.ts.map +0 -1
  135. package/dist/compiler/commonProps.d.ts.map +0 -1
  136. package/dist/compiler/index.d.ts.map +0 -1
  137. package/dist/compiler/prefixer.d.ts.map +0 -1
  138. package/dist/compiler/theme-contract.d.ts.map +0 -1
  139. package/dist/compiler/tokens.d.ts.map +0 -1
  140. package/dist/compiler/types.d.ts +0 -57
  141. package/dist/compiler/types.d.ts.map +0 -1
  142. package/dist/core/compiler.d.ts.map +0 -1
  143. package/dist/core/constants.d.ts.map +0 -1
  144. package/dist/core/index.d.ts +0 -4
  145. package/dist/core/index.d.ts.map +0 -1
  146. package/dist/core/types.d.ts.map +0 -1
  147. package/dist/core/utils.d.ts.map +0 -1
  148. package/dist/index.d.ts.map +0 -1
  149. package/dist/plugins/vite.d.ts.map +0 -1
  150. package/dist/plugins/webpack.d.ts.map +0 -1
  151. package/dist/runtime/hmr.d.ts.map +0 -1
  152. package/dist/runtime/index.d.ts.map +0 -1
  153. package/dist/runtime/injector.d.ts.map +0 -1
  154. package/dist/runtime/react.d.ts.map +0 -1
  155. package/dist/runtime/react.js +0 -324
  156. package/dist/runtime/types.d.ts.map +0 -1
  157. package/dist/runtime/utils.d.ts.map +0 -1
  158. package/dist/runtime/vue.d.ts.map +0 -1
  159. package/dist/runtime/vue.js +0 -286
@@ -1,86 +1,53 @@
1
- /**
2
- * ChainCSS Runtime Style Injector
3
- * This is the core 3.2KB runtime that users opt into
4
- */
5
1
  export interface StyleDefinition {
6
- selectors: string[];
2
+ selectors?: string[];
7
3
  hover?: Record<string, string | number>;
8
4
  [key: string]: any;
9
5
  }
10
- export interface CompiledStyle {
11
- className: string;
12
- css: string;
6
+ export interface TokenStore {
7
+ colors?: Record<string, string>;
8
+ spacing?: Record<string, string>;
9
+ typography?: Record<string, any>;
10
+ [key: string]: any;
13
11
  }
14
12
  declare class StyleInjector {
15
13
  private styleElement;
16
- private stylesCache;
17
- private injectedStyles;
14
+ private injectedHashes;
15
+ private moduleMap;
16
+ private debugMode;
17
+ private get tokenStore();
18
18
  constructor();
19
- private initStyleElement;
20
- private generateClassName;
19
+ /**
20
+ * Enable debug logging
21
+ */
22
+ enableDebug(enable?: boolean): void;
23
+ /**
24
+ * Set global tokens (e.g., brand colors, spacing scales)
25
+ */
26
+ setTokens(tokens: TokenStore): void;
27
+ /**
28
+ * Get a token value by path
29
+ */
30
+ getToken(path: string): any;
31
+ /**
32
+ * Resolves $variables within a string using the tokenStore
33
+ */
34
+ resolveToken(value: any): any;
21
35
  private generateCSS;
22
- inject(styleId: string, style: StyleDefinition): string;
23
- injectMultiple(styles: Record<string, StyleDefinition>): Record<string, string>;
24
- update(styleId: string, style: StyleDefinition): string;
25
- remove(styleId: string): void;
36
+ injectMultiple(styles: Record<string, StyleDefinition>, moduleId?: string): Record<string, string>;
37
+ writeToDOM(css: string): void;
38
+ removeModule(moduleId: string): void;
39
+ removeAll(): void;
26
40
  getStyleElement(): HTMLStyleElement | null;
27
- clear(): void;
41
+ getStats(): {
42
+ injectedStyles: number;
43
+ modules: number;
44
+ };
28
45
  }
29
46
  export declare const styleInjector: StyleInjector;
30
- export declare function chainRuntime(useTokens?: boolean): {};
31
- export declare const $: {};
32
- export declare function compileRuntime(styles: Record<string, StyleDefinition>): Record<string, string>;
47
+ export declare const setTokens: (t: TokenStore) => void;
48
+ export declare const compileRuntime: (s: Record<string, StyleDefinition>, moduleId?: string) => Record<string, string>;
49
+ export declare const removeRuntimeModule: (moduleId: string) => void;
50
+ export declare const clearRuntimeStyles: () => void;
51
+ export declare const enableRuntimeDebug: (enabled: boolean) => void;
33
52
  export declare function runRuntime(...styles: StyleDefinition[]): string;
34
- /**
35
- * Add animation presets to runtime
36
- */
37
- export declare const runtimeAnimations: {
38
- fadeIn: {
39
- '0%': {
40
- opacity: number;
41
- };
42
- '100%': {
43
- opacity: number;
44
- };
45
- };
46
- fadeOut: {
47
- '0%': {
48
- opacity: number;
49
- };
50
- '100%': {
51
- opacity: number;
52
- };
53
- };
54
- slideInUp: {
55
- '0%': {
56
- transform: string;
57
- opacity: number;
58
- };
59
- '100%': {
60
- transform: string;
61
- opacity: number;
62
- };
63
- };
64
- pulse: {
65
- '0%, 100%': {
66
- transform: string;
67
- };
68
- '50%': {
69
- transform: string;
70
- };
71
- };
72
- spin: {
73
- '0%': {
74
- transform: string;
75
- };
76
- '100%': {
77
- transform: string;
78
- };
79
- };
80
- };
81
- /**
82
- * Add animation to runtime style
83
- */
84
- export declare function withAnimation(style: Record<string, any>, animationName: keyof typeof runtimeAnimations, duration?: string, timing?: string): Record<string, any>;
85
53
  export {};
86
- //# sourceMappingURL=injector.d.ts.map
@@ -3,12 +3,13 @@ export interface UseChainStylesOptions {
3
3
  cache?: boolean;
4
4
  namespace?: string;
5
5
  watch?: boolean;
6
+ debug?: boolean;
7
+ ssr?: boolean;
6
8
  }
7
9
  /**
8
10
  * React hook for ChainCSS runtime styles
9
- * WARNING: This adds ~3.2KB to your bundle. For production, use build-time compilation.
10
11
  */
11
- export declare function useChainStyles(styles: Record<string, any> | (() => Record<string, any>), deps?: any[], options?: UseChainStylesOptions): Record<string, string>;
12
+ export declare function useChainStyles(styles: Record<string, any>, deps?: any[], options?: UseChainStylesOptions): Record<string, string>;
12
13
  /**
13
14
  * Dynamic styles hook - re-runs when deps change
14
15
  */
@@ -20,16 +21,15 @@ export declare function useThemeChainStyles(styles: Record<string, any> | ((them
20
21
  /**
21
22
  * Global style injection component
22
23
  */
23
- export declare function ChainCSSGlobal({ styles }: {
24
- styles: Record<string, any>;
25
- }): null;
24
+ export declare function ChainCSSGlobal({ styles, tokens, children }: {
25
+ styles?: Record<string, any>;
26
+ tokens?: any;
27
+ children?: React.ReactNode;
28
+ }): import("react/jsx-runtime").JSX.Element;
26
29
  /**
27
30
  * Class name utility (like clsx)
28
31
  */
29
- export declare function cx(...classes: (string | undefined | null | false)[]): string;
30
- export declare function enableChainCSSDebug(): void;
31
- export declare function disableChainCSSDebug(): void;
32
- export declare function isDebugEnabled(): boolean;
32
+ export declare function cx(...classes: (string | undefined | null | false | Record<string, boolean>)[]): string;
33
33
  /**
34
34
  * HOC for class components
35
35
  */
@@ -38,9 +38,8 @@ export declare function withChainStyles<P extends object>(styles: Record<string,
38
38
  }) => import("react/jsx-runtime").JSX.Element;
39
39
  /**
40
40
  * Create a styled component (React)
41
- * Similar to .component() in build-time, but for runtime
42
41
  */
43
- export declare function createStyledComponent<T extends keyof JSX.IntrinsicElements = 'div'>(elementType: T, styles: Record<string, any> | (() => Record<string, any>), options?: UseChainStylesOptions): React.FC<React.ComponentProps<T> & {
42
+ export declare function createStyledComponent<T extends keyof React.JSX.IntrinsicElements = "div">(elementType: T, styles: Record<string, any> | (() => Record<string, any>), options?: UseChainStylesOptions): React.FC<React.ComponentProps<T> & {
44
43
  className?: string;
45
44
  }>;
46
45
  /**
@@ -51,4 +50,10 @@ export declare function createStyledComponents(components: Record<string, any>):
51
50
  * CSS-in-JS hook with computed styles
52
51
  */
53
52
  export declare function useComputedStyles<T extends Record<string, any>>(styles: (props: T) => Record<string, any>, props: T, deps?: any[], options?: UseChainStylesOptions): Record<string, string>;
54
- //# sourceMappingURL=react.d.ts.map
53
+ /**
54
+ * Set global tokens from React
55
+ */
56
+ export declare function setTokens(tokens: any): void;
57
+ export declare function enableChainCSSDebug(): void;
58
+ export declare function disableChainCSSDebug(): void;
59
+ export declare function isDebugEnabled(): boolean;
@@ -0,0 +1,15 @@
1
+ export declare function useAtomicClasses(): {
2
+ subscribe: () => void;
3
+ get: () => {};
4
+ };
5
+ export declare function cx(...args: any[]): string;
6
+ export declare function ChainCSSGlobal(): null;
7
+ export declare function createStyledComponent(): () => null;
8
+ export declare function createStyledComponents(): {};
9
+ export declare function useComputedStyles(): {
10
+ subscribe: () => void;
11
+ get: () => string;
12
+ };
13
+ export declare function provideStyleContext(): void;
14
+ export declare function injectStyleContext(): {};
15
+ export declare function chainStyles(): {};
@@ -3,8 +3,10 @@
3
3
  * Only needed if using runtime mode
4
4
  */
5
5
  export interface RuntimeStyleDefinition {
6
- selectors: string[];
6
+ selectors?: string[];
7
7
  hover?: Record<string, string | number>;
8
+ _classes?: string[];
9
+ _name?: string;
8
10
  [cssProperty: string]: any;
9
11
  }
10
12
  export interface UseChainStylesOptions {
@@ -14,32 +16,152 @@ export interface UseChainStylesOptions {
14
16
  namespace?: string;
15
17
  /** Watch for changes (development only) */
16
18
  watch?: boolean;
19
+ /** Debug mode */
20
+ debug?: boolean;
21
+ /** Server-side rendering mode */
22
+ ssr?: boolean;
17
23
  }
18
24
  export interface RuntimeCompiledResult {
19
25
  [key: string]: string;
20
26
  }
21
27
  export interface StyleInjector {
22
28
  inject(styleId: string, style: RuntimeStyleDefinition): string;
23
- injectMultiple(styles: Record<string, RuntimeStyleDefinition>): Record<string, string>;
29
+ injectMultiple(styles: Record<string, RuntimeStyleDefinition>, moduleId?: string): Record<string, string>;
24
30
  update(styleId: string, style: RuntimeStyleDefinition): string;
25
31
  remove(styleId: string): void;
32
+ removeModule(moduleId: string): void;
26
33
  clear(): void;
34
+ setTokens(tokens: TokenStore): void;
27
35
  getStyleElement(): HTMLStyleElement | null;
36
+ getStats(): {
37
+ injectedStyles: number;
38
+ modules: number;
39
+ };
40
+ }
41
+ export interface TokenStore {
42
+ colors?: Record<string, string>;
43
+ spacing?: Record<string, string>;
44
+ typography?: {
45
+ fontFamily?: Record<string, string>;
46
+ fontSize?: Record<string, string>;
47
+ fontWeight?: Record<string, string>;
48
+ lineHeight?: Record<string, string>;
49
+ letterSpacing?: Record<string, string>;
50
+ };
51
+ breakpoints?: Record<string, string>;
52
+ zIndex?: Record<string, string>;
53
+ shadows?: Record<string, string>;
54
+ borderRadius?: Record<string, string>;
55
+ animations?: Record<string, any>;
56
+ [key: string]: any;
57
+ }
58
+ export interface ChainCSSManifest {
59
+ atomicMap: Record<string, string>;
60
+ version: string;
61
+ timestamp?: number;
62
+ stats?: {
63
+ totalStyles: number;
64
+ atomicStyles: number;
65
+ uniqueProperties: number;
66
+ savings: string;
67
+ };
28
68
  }
29
69
  export interface UseAtomicClassesReturn {
30
70
  classes: Record<string, string>;
31
71
  cx: (name: string) => string;
32
72
  cn: (...names: string[]) => string;
73
+ inject?: (styles: Record<string, any>) => void;
74
+ }
75
+ export interface UseDynamicChainStylesReturn extends UseAtomicClassesReturn {
76
+ updateStyles: (newStyles: Record<string, any>) => void;
77
+ }
78
+ export interface UseThemeChainStylesReturn extends UseAtomicClassesReturn {
79
+ theme: any;
80
+ setTheme: (theme: any) => void;
81
+ }
82
+ export interface UseAtomicClassesReturnVue {
83
+ classes: import('vue').Ref<Record<string, string>>;
84
+ cx: (name: string) => string;
85
+ cn: (...names: string[]) => string;
86
+ inject: (styles: Record<string, any>) => void;
87
+ }
88
+ export interface UseComputedStylesReturnVue {
89
+ classes: import('vue').Ref<Record<string, string>>;
90
+ rootClass: import('vue').ComputedRef<string>;
91
+ }
92
+ export interface UseAtomicClassesReturnSvelte {
93
+ subscribe: (callback: (value: Record<string, string>) => void) => () => void;
94
+ get: () => Record<string, string>;
95
+ cx: (name: string) => string;
96
+ cn: (...names: string[]) => string;
97
+ }
98
+ export interface UseComputedStylesReturnSvelte {
99
+ classes: UseAtomicClassesReturnSvelte;
100
+ rootClass: import('svelte/store').Readable<string>;
101
+ }
102
+ type SolidAccessor<T> = T extends any ? (() => T) : never;
103
+ export interface UseAtomicClassesReturnSolid {
104
+ classes: SolidAccessor<Record<string, string>>;
105
+ cx: (...names: string[]) => string;
106
+ inject: (styles: Record<string, any>) => void;
107
+ }
108
+ export interface UseComputedStylesReturnSolid {
109
+ classes: SolidAccessor<Record<string, string>>;
110
+ rootClass: SolidAccessor<string>;
33
111
  }
34
112
  export interface HMRPayload {
35
113
  file: string;
36
- classes: Record<string, string>;
114
+ css?: string;
115
+ map?: Record<string, string>;
116
+ styles?: Record<string, any>;
37
117
  timestamp: number;
118
+ moduleId?: string;
119
+ }
120
+ export interface HMRUpdateEvent {
121
+ type: 'chaincss:update';
122
+ data: HMRPayload;
38
123
  }
39
124
  export interface ChainCSSDebugger {
40
125
  enabled: boolean;
41
126
  log: (...args: any[]) => void;
42
127
  warn: (...args: any[]) => void;
43
128
  error: (...args: any[]) => void;
129
+ group: (label: string) => void;
130
+ groupEnd: () => void;
131
+ time: (label: string) => void;
132
+ timeEnd: (label: string) => void;
133
+ }
134
+ export interface DebugOptions {
135
+ enabled?: boolean;
136
+ verbose?: boolean;
137
+ prefix?: string;
138
+ }
139
+ export type CSSValue = string | number | undefined;
140
+ export type CSSProperties = Record<string, CSSValue>;
141
+ export type ResponsiveValue<T> = T | {
142
+ base?: T;
143
+ sm?: T;
144
+ md?: T;
145
+ lg?: T;
146
+ xl?: T;
147
+ '2xl'?: T;
148
+ [key: string]: T | undefined;
149
+ };
150
+ export type TokenValue<T = string> = T | `$${string}`;
151
+ declare global {
152
+ interface Window {
153
+ __CHAINCSS_V2_TOKENS__?: TokenStore;
154
+ __CHAINCSS_MANIFEST__?: ChainCSSManifest;
155
+ __CHAINCSS_DEBUG__?: boolean;
156
+ __CHAINCSS_VUE_DEBUG__?: boolean;
157
+ __CHAINCSS_SVELTE_DEBUG__?: boolean;
158
+ __CHAINCSS_SOLID_DEBUG__?: boolean;
159
+ __CHAINCSS_REACT_DEBUG__?: boolean;
160
+ }
44
161
  }
45
- //# sourceMappingURL=types.d.ts.map
162
+ export declare function isRuntimeStyleDefinition(obj: any): obj is RuntimeStyleDefinition;
163
+ export declare function isStyleInjector(obj: any): obj is StyleInjector;
164
+ export declare function isChainCSSManifest(obj: any): obj is ChainCSSManifest;
165
+ export declare function isTokenStore(obj: any): obj is TokenStore;
166
+ export declare function isHMRPayload(obj: any): obj is HMRPayload;
167
+ export {};
@@ -59,4 +59,3 @@ export declare function createDebugger(module: string): {
59
59
  warn: (...args: any[]) => void;
60
60
  error: (...args: any[]) => void;
61
61
  };
62
- //# sourceMappingURL=utils.d.ts.map
@@ -2,18 +2,31 @@ import { Ref } from 'vue';
2
2
  export interface UseAtomicClassesOptions {
3
3
  atomic?: boolean;
4
4
  global?: boolean;
5
+ debug?: boolean;
5
6
  }
6
- export declare function useAtomicClasses(styles: any, options?: UseAtomicClassesOptions): {
7
- classes: import("vue").ComputedRef<Record<string, string>>;
7
+ export interface AtomicClassesReturn {
8
+ classes: Ref<Record<string, string>>;
8
9
  cx: (name: string) => string;
9
10
  cn: (...names: string[]) => string;
10
- };
11
+ inject: (styles: Record<string, any>) => void;
12
+ }
13
+ export declare function useAtomicClasses(styles: any, options?: UseAtomicClassesOptions): AtomicClassesReturn;
11
14
  export declare const ChainCSSGlobal: {
12
15
  name: string;
13
16
  props: {
14
17
  styles: {
15
18
  type: ObjectConstructor;
16
19
  required: boolean;
20
+ default: () => {};
21
+ };
22
+ tokens: {
23
+ type: ObjectConstructor;
24
+ required: boolean;
25
+ default: () => {};
26
+ };
27
+ debug: {
28
+ type: BooleanConstructor;
29
+ default: boolean;
17
30
  };
18
31
  };
19
32
  setup(props: any): () => null;
@@ -21,32 +34,39 @@ export declare const ChainCSSGlobal: {
21
34
  /**
22
35
  * Create a styled Vue component
23
36
  */
24
- export declare function createStyledComponent(styles: Record<string, any> | (() => Record<string, any>), tag?: string): {
37
+ export declare function createStyledComponent(styles: Record<string, any> | (() => Record<string, any>), tag?: string, options?: UseAtomicClassesOptions): {
25
38
  name: string;
26
39
  props: {
27
40
  className: {
28
41
  type: StringConstructor;
29
42
  default: string;
30
43
  };
44
+ as: {
45
+ type: StringConstructor;
46
+ default: string;
47
+ };
31
48
  };
32
- setup(props: any, { slots, attrs }: any): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
33
- [key: string]: any;
34
- }>;
49
+ setup(props: any, { slots, attrs }: any): () => any;
35
50
  };
36
51
  /**
37
52
  * Create multiple styled Vue components at once
38
53
  */
39
- export declare function createStyledComponents(components: Record<string, any>): Record<string, any>;
54
+ export declare function createStyledComponents(components: Record<string, any>, options?: UseAtomicClassesOptions): Record<string, any>;
40
55
  /**
41
56
  * CSS-in-JS with computed props (Vue)
42
57
  */
43
- export declare function useComputedStyles<T extends Record<string, any>>(styles: (props: T) => Record<string, any>, props: T): {
44
- classes: import("vue").ComputedRef<Record<string, string>>;
45
- rootClass: import("vue").ComputedRef<string>;
58
+ export declare function useComputedStyles<T extends Record<string, any>>(styles: (props: T) => Record<string, any>, props: T, options?: UseAtomicClassesOptions): {
59
+ classes: Ref<Record<string, string>>;
60
+ rootClass: Ref<string>;
46
61
  };
47
62
  /**
48
63
  * Style provider for theme/context (Vue)
49
64
  */
50
- export declare function provideStyleContext(theme: any): Ref<any, any>;
51
- export declare function injectStyleContext(): Ref<any, any>;
52
- //# sourceMappingURL=vue.d.ts.map
65
+ export declare function provideStyleContext(theme: any): Ref<any>;
66
+ export declare function injectStyleContext(): Ref<any>;
67
+ /**
68
+ * Debug utilities for Vue
69
+ */
70
+ export declare function enableVueDebug(): void;
71
+ export declare function disableVueDebug(): void;
72
+ export declare function isVueDebugEnabled(): boolean;
package/package.json CHANGED
@@ -1,80 +1,59 @@
1
1
  {
2
2
  "name": "chaincss",
3
- "version": "2.0.7",
4
- "description": "The JavaScript-native styling engine for the modern web",
3
+ "version": "2.1.1",
4
+ "description": "ChainCSS v3.0 - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
8
- "files": [
9
- "dist/**/*",
10
- "README.md",
11
- "LICENSE",
12
- "CHANGELOG.md"
13
- ],
14
- "bin": {
15
- "chaincss": "dist/cli/cli.cjs"
16
- },
17
8
  "exports": {
18
9
  ".": {
10
+ "types": "./dist/index.d.ts",
19
11
  "import": "./dist/index.js",
20
- "types": "./dist/index.d.ts"
21
- },
22
- "./compiler": {
23
- "import": "./dist/compiler/index.js",
24
- "types": "./dist/compiler/index.d.ts"
12
+ "default": "./dist/index.js"
25
13
  },
26
14
  "./runtime": {
27
- "import": "./dist/runtime/index.js",
28
15
  "types": "./dist/runtime/index.d.ts",
29
- "development": "./dist/runtime/index.js"
16
+ "import": "./dist/runtime/index.js",
17
+ "default": "./dist/runtime/index.js"
18
+ },
19
+ "./compiler": {
20
+ "types": "./dist/compiler/index.d.ts",
21
+ "import": "./dist/compiler/index.js",
22
+ "default": "./dist/compiler/index.js"
30
23
  },
31
24
  "./plugin/vite": {
25
+ "types": "./dist/plugins/vite.d.ts",
32
26
  "import": "./dist/plugins/vite.js",
33
- "types": "./dist/plugins/vite.d.ts"
27
+ "default": "./dist/plugins/vite.js"
34
28
  },
35
29
  "./plugin/webpack": {
30
+ "types": "./dist/plugins/webpack.d.ts",
36
31
  "import": "./dist/plugins/webpack.js",
37
- "types": "./dist/plugins/webpack.d.ts"
32
+ "default": "./dist/plugins/webpack.js"
38
33
  }
39
34
  },
40
35
  "scripts": {
41
36
  "build": "npm run build:clean && npm run build:types && npm run build:core && npm run build:cli && npm run build:plugins && npm run build:runtime && npm run build:compiler",
42
37
  "build:clean": "rm -rf dist",
43
- "build:types": "tsc --emitDeclarationOnly --outDir dist",
44
- "build:core": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --external:chokidar --external:glob --external:commander --external:chalk --external:autoprefixer --external:postcss --external:clean-css",
45
- "build:cli": "esbuild src/cli/index.ts --bundle --platform=node --format=esm --outfile=dist/cli/index.js --external:chokidar --external:glob --external:commander --external:chalk --external:autoprefixer --external:postcss --external:clean-css && chmod +x dist/cli/index.js && echo '#!/usr/bin/env node\nconst { spawn } = require(\"child_process\");\nconst path = require(\"path\");\nconst cliPath = path.join(__dirname, \"index.js\");\nconst args = process.argv.slice(2);\nconst child = spawn(\"node\", [cliPath, ...args], { stdio: \"inherit\", shell: false });\nchild.on(\"close\", (code) => process.exit(code));' > dist/cli/cli.cjs && chmod +x dist/cli/cli.cjs",
46
- "build:plugins": "esbuild src/plugins/vite.ts --bundle --platform=node --format=esm --outfile=dist/plugins/vite.js --external:vite && esbuild src/plugins/webpack.ts --bundle --platform=node --format=esm --outfile=dist/plugins/webpack.js --external:webpack",
47
- "build:runtime": "esbuild src/runtime/index.ts --bundle --platform=browser --format=esm --outfile=dist/runtime/index.js --external:react --external:vue && esbuild src/runtime/react.tsx --bundle --platform=browser --format=esm --outfile=dist/runtime/react.js --external:react --external:vue && esbuild src/runtime/vue.ts --bundle --platform=browser --format=esm --outfile=dist/runtime/vue.js --external:vue --external:react",
48
- "build:compiler": "esbuild src/compiler/index.ts --bundle --platform=node --format=esm --outfile=dist/compiler/index.js --external:chokidar --external:glob --external:commander --external:chalk --external:autoprefixer --external:postcss --external:clean-css",
49
- "dev": "npm run build:clean && npm run build:types && npm run build:core -- --watch",
38
+ "build:types": "tsc -p tsconfig.build.json",
39
+ "build:core": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --packages=external",
40
+ "build:cli": "esbuild src/cli/index.ts --bundle --platform=node --format=esm --outfile=dist/cli/index.js --packages=external && chmod +x dist/cli/index.js",
41
+ "build:plugins": "esbuild src/plugins/vite.ts --bundle --platform=node --format=esm --outfile=dist/plugins/vite.js --packages=external && esbuild src/plugins/webpack.ts --bundle --platform=node --format=esm --outfile=dist/plugins/webpack.js --packages=external",
42
+ "build:runtime": "esbuild src/runtime/index.ts --bundle --platform=browser --format=esm --outfile=dist/runtime/index.js --external:react --external:react-dom --external:vue --external:svelte",
43
+ "build:compiler": "esbuild src/compiler/index.ts --bundle --platform=node --format=esm --outfile=dist/compiler/index.js --packages=external",
44
+ "dev": "tsc -w",
50
45
  "prepublishOnly": "npm run build",
51
- "version": "git add -A",
52
- "postversion": "git push && git push --tags"
53
- },
54
- "dependencies": {
55
- "chalk": "^5.3.0",
56
- "chokidar": "^3.5.3",
57
- "clean-css": "^5.3.2",
58
- "commander": "^11.1.0"
59
- },
60
- "devDependencies": {
61
- "@types/clean-css": "^4.2.10",
62
- "@types/node": "^20.8.10",
63
- "@types/react": "^18.2.0",
64
- "esbuild": "^0.19.12",
65
- "glob": "^10.3.10",
66
- "react": "^18.2.0",
67
- "typescript": "^5.2.2",
68
- "vite": "^5.0.0",
69
- "vue": "^3.3.4"
46
+ "test": "vitest run",
47
+ "test:watch": "vitest",
48
+ "test:coverage": "vitest run --coverage",
49
+ "test:verbose": "CHAINCSS_TEST_VERBOSE=1 vitest run",
50
+ "test:unit": "vitest run __tests__/unit",
51
+ "test:integration": "vitest run __tests__/integration"
70
52
  },
71
53
  "peerDependencies": {
72
- "react": "^18.0.0",
73
- "vue": "^3.0.0",
74
- "autoprefixer": "^10.4.16",
75
- "postcss": "^8.4.31",
76
- "browserslist": "^4.22.1",
77
- "caniuse-db": "^1.0.30001785"
54
+ "react": ">=16.8.0",
55
+ "svelte": ">=4.0.0",
56
+ "vue": ">=3.0.0"
78
57
  },
79
58
  "peerDependenciesMeta": {
80
59
  "react": {
@@ -83,30 +62,37 @@
83
62
  "vue": {
84
63
  "optional": true
85
64
  },
86
- "autoprefixer": {
87
- "optional": true
88
- },
89
- "postcss": {
90
- "optional": true
91
- },
92
- "browserslist": {
93
- "optional": true
94
- },
95
- "caniuse-db": {
65
+ "svelte": {
96
66
  "optional": true
97
67
  }
98
68
  },
69
+ "devDependencies": {
70
+ "@types/node": "^25.6.0",
71
+ "@types/react": "^19.2.14",
72
+ "@vitejs/plugin-react": "^6.0.1",
73
+ "@vitest/coverage-v8": "^1.6.0",
74
+ "csstype": "^3.2.3",
75
+ "esbuild": "^0.28.0",
76
+ "typescript": "^6.0.3",
77
+ "vite": "^5.0.0",
78
+ "vitest": "^1.6.0"
79
+ },
80
+ "vitest": {
81
+ "setupFiles": [
82
+ "./vitest.setup.ts"
83
+ ]
84
+ },
99
85
  "keywords": [
100
86
  "css-in-js",
101
87
  "zero-runtime",
102
88
  "atomic-css",
103
- "css-compiler",
104
- "design-tokens",
89
+ "mixed-mode",
90
+ "auto-detection",
105
91
  "react",
106
92
  "vue",
93
+ "svelte",
107
94
  "vite",
108
- "webpack",
109
- "nextjs"
95
+ "webpack"
110
96
  ],
111
97
  "author": "Rommel Caneos",
112
98
  "license": "MIT",
@@ -121,5 +107,12 @@
121
107
  "sideEffects": false,
122
108
  "engines": {
123
109
  "node": ">=18.0.0"
110
+ },
111
+ "dependencies": {
112
+ "browserslist": "^4.28.2",
113
+ "chalk": "^5.6.2",
114
+ "chokidar": "^5.0.0",
115
+ "commander": "^14.0.3",
116
+ "glob": "^13.0.6"
124
117
  }
125
118
  }