chaincss 2.0.6 → 2.1.0

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 +454 -231
  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 +3649 -301
  59. package/dist/runtime/injector.d.ts +39 -71
  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 +724 -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 -270
  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 -232
@@ -1,270 +0,0 @@
1
- // src/runtime/react.tsx
2
- import React, { useMemo, useEffect, useRef, useState } from "react";
3
-
4
- // src/runtime/injector.ts
5
- var StyleInjector = class {
6
- styleElement = null;
7
- stylesCache = /* @__PURE__ */ new Map();
8
- injectedStyles = /* @__PURE__ */ new Set();
9
- constructor() {
10
- this.initStyleElement();
11
- }
12
- initStyleElement() {
13
- if (typeof document === "undefined")
14
- return;
15
- const existing = document.getElementById("chaincss-runtime-styles");
16
- if (existing) {
17
- this.styleElement = existing;
18
- return;
19
- }
20
- const style = document.createElement("style");
21
- style.id = "chaincss-runtime-styles";
22
- style.setAttribute("data-chaincss", "runtime");
23
- document.head.appendChild(style);
24
- this.styleElement = style;
25
- }
26
- generateClassName(styleId) {
27
- let hash = 0;
28
- for (let i = 0; i < styleId.length; i++) {
29
- hash = (hash << 5) - hash + styleId.charCodeAt(i);
30
- hash |= 0;
31
- }
32
- return `c_${Math.abs(hash).toString(36)}`;
33
- }
34
- generateCSS(style, className) {
35
- let css = "";
36
- const selector = `.${className}`;
37
- let normalStyles = "";
38
- for (const [key, value] of Object.entries(style)) {
39
- if (key === "selectors" || key === "hover")
40
- continue;
41
- const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
42
- normalStyles += ` ${kebabKey}: ${value};
43
- `;
44
- }
45
- if (normalStyles) {
46
- css += `${selector} {
47
- ${normalStyles}}
48
- `;
49
- }
50
- if (style.hover && typeof style.hover === "object") {
51
- let hoverStyles = "";
52
- for (const [key, value] of Object.entries(style.hover)) {
53
- const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
54
- hoverStyles += ` ${kebabKey}: ${value};
55
- `;
56
- }
57
- if (hoverStyles) {
58
- css += `${selector}:hover {
59
- ${hoverStyles}}
60
- `;
61
- }
62
- }
63
- return css;
64
- }
65
- inject(styleId, style) {
66
- if (this.stylesCache.has(styleId)) {
67
- return this.stylesCache.get(styleId);
68
- }
69
- const className = this.generateClassName(styleId);
70
- const css = this.generateCSS(style, className);
71
- this.stylesCache.set(styleId, className);
72
- if (!this.injectedStyles.has(styleId) && this.styleElement && css) {
73
- this.styleElement.textContent += css;
74
- this.injectedStyles.add(styleId);
75
- }
76
- return className;
77
- }
78
- injectMultiple(styles) {
79
- const result = {};
80
- let allCSS = "";
81
- for (const [styleId, style] of Object.entries(styles)) {
82
- if (this.stylesCache.has(styleId)) {
83
- result[styleId] = this.stylesCache.get(styleId);
84
- continue;
85
- }
86
- const className = this.generateClassName(styleId);
87
- const css = this.generateCSS(style, className);
88
- this.stylesCache.set(styleId, className);
89
- result[styleId] = className;
90
- allCSS += css;
91
- }
92
- if (allCSS && this.styleElement) {
93
- this.styleElement.textContent += allCSS;
94
- }
95
- return result;
96
- }
97
- update(styleId, style) {
98
- this.injectedStyles.delete(styleId);
99
- const className = this.generateClassName(styleId);
100
- const css = this.generateCSS(style, className);
101
- this.stylesCache.set(styleId, className);
102
- if (this.styleElement) {
103
- let allCSS = "";
104
- for (const [id, className2] of this.stylesCache) {
105
- }
106
- this.styleElement.textContent = allCSS;
107
- this.injectedStyles.add(styleId);
108
- }
109
- return className;
110
- }
111
- remove(styleId) {
112
- this.injectedStyles.delete(styleId);
113
- this.stylesCache.delete(styleId);
114
- if (this.styleElement) {
115
- let allCSS = "";
116
- for (const [id, className] of this.stylesCache) {
117
- }
118
- this.styleElement.textContent = allCSS;
119
- }
120
- }
121
- getStyleElement() {
122
- return this.styleElement;
123
- }
124
- clear() {
125
- this.stylesCache.clear();
126
- this.injectedStyles.clear();
127
- if (this.styleElement) {
128
- this.styleElement.textContent = "";
129
- }
130
- }
131
- };
132
- var styleInjector = new StyleInjector();
133
- function compileRuntime(styles) {
134
- return styleInjector.injectMultiple(styles);
135
- }
136
-
137
- // src/runtime/react.tsx
138
- import { jsx } from "react/jsx-runtime";
139
- var styleCache = /* @__PURE__ */ new Map();
140
- function useChainStyles(styles, deps = [], options = {}) {
141
- const { cache = true, namespace = "chain", watch = false } = options;
142
- const id = useRef(`chain-${Math.random().toString(36).substr(2, 9)}`);
143
- const [classNames, setClassNames] = useState({});
144
- const processed = useMemo(() => {
145
- const resolvedStyles = typeof styles === "function" ? styles() : styles;
146
- if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) {
147
- return { classNames: {}, css: "" };
148
- }
149
- const cacheKey = JSON.stringify(resolvedStyles);
150
- if (cache && styleCache.has(cacheKey)) {
151
- return { classNames: styleCache.get(cacheKey), css: "" };
152
- }
153
- const compiledStyles = {};
154
- const newClassNames = {};
155
- for (const [key, styleDef] of Object.entries(resolvedStyles)) {
156
- const className = `${namespace}-${key}-${id.current}`;
157
- const styleObj = typeof styleDef === "function" ? styleDef() : styleDef;
158
- newClassNames[key] = className;
159
- compiledStyles[`${key}_${id.current}`] = {
160
- selectors: [`.${className}`],
161
- ...styleObj
162
- };
163
- }
164
- const result = compileRuntime(compiledStyles);
165
- if (cache) {
166
- styleCache.set(cacheKey, result);
167
- }
168
- return { classNames: result, css: "" };
169
- }, [styles, namespace, id.current, ...deps]);
170
- useEffect(() => {
171
- setClassNames(processed.classNames);
172
- return () => {
173
- if (!watch) {
174
- for (const key of Object.keys(processed.classNames)) {
175
- styleInjector.remove(`${namespace}-${key}-${id.current}`);
176
- }
177
- }
178
- };
179
- }, [processed.classNames, watch]);
180
- return classNames;
181
- }
182
- function useDynamicChainStyles(styleFactory, deps = [], options) {
183
- const styles = useMemo(() => styleFactory(), deps);
184
- return useChainStyles(styles, deps, options);
185
- }
186
- function useThemeChainStyles(styles, theme, options) {
187
- const themedStyles = useMemo(() => {
188
- if (typeof styles === "function")
189
- return styles(theme);
190
- return styles;
191
- }, [styles, theme]);
192
- return useChainStyles(themedStyles, [], options);
193
- }
194
- function ChainCSSGlobal({ styles }) {
195
- useChainStyles(styles, [], { watch: true });
196
- return null;
197
- }
198
- function cx(...classes) {
199
- return classes.filter(Boolean).join(" ");
200
- }
201
- var debugEnabled = false;
202
- function enableChainCSSDebug() {
203
- if (typeof window !== "undefined") {
204
- debugEnabled = true;
205
- window.__CHAINCSS_DEBUG__ = true;
206
- console.log("\u{1F50D} ChainCSS Debug Mode Enabled");
207
- }
208
- }
209
- function disableChainCSSDebug() {
210
- if (typeof window !== "undefined") {
211
- debugEnabled = false;
212
- window.__CHAINCSS_DEBUG__ = false;
213
- console.log("\u{1F50D} ChainCSS Debug Mode Disabled");
214
- }
215
- }
216
- function isDebugEnabled() {
217
- return debugEnabled || typeof window !== "undefined" && window.__CHAINCSS_DEBUG__;
218
- }
219
- function withChainStyles(styles, options) {
220
- return function WrappedComponent(props) {
221
- const classNames = useChainStyles(
222
- typeof styles === "function" ? styles(props) : styles,
223
- [],
224
- // ← Add empty deps array
225
- options
226
- );
227
- const Component = props.component || props.wrappedComponent;
228
- return /* @__PURE__ */ jsx(Component, { ...props, chainStyles: classNames });
229
- };
230
- }
231
- function createStyledComponent(elementType, styles, options) {
232
- const StyledComponent = (props) => {
233
- const { className: additionalClassName, ...rest } = props;
234
- const classNames = useChainStyles(styles, [], options);
235
- const combinedClassName = [classNames.root, additionalClassName].filter(Boolean).join(" ");
236
- return React.createElement(elementType, {
237
- ...rest,
238
- className: combinedClassName
239
- });
240
- };
241
- const displayName = typeof elementType === "string" ? elementType : elementType.displayName || "Component";
242
- StyledComponent.displayName = `ChainCSS.${displayName}`;
243
- return StyledComponent;
244
- }
245
- function createStyledComponents(components) {
246
- const result = {};
247
- for (const [name, config] of Object.entries(components)) {
248
- const { element = "div", styles, options } = config;
249
- result[name] = createStyledComponent(element, styles, options);
250
- }
251
- return result;
252
- }
253
- function useComputedStyles(styles, props, deps = [], options) {
254
- const computedStyles = useMemo(() => styles(props), [props, ...deps]);
255
- return useChainStyles(computedStyles, deps, options);
256
- }
257
- export {
258
- ChainCSSGlobal,
259
- createStyledComponent,
260
- createStyledComponents,
261
- cx,
262
- disableChainCSSDebug,
263
- enableChainCSSDebug,
264
- isDebugEnabled,
265
- useChainStyles,
266
- useComputedStyles,
267
- useDynamicChainStyles,
268
- useThemeChainStyles,
269
- withChainStyles
270
- };
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/runtime/types.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACxC,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,sBAAsB,GAAG,MAAM,CAAC;IAC/D,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvF,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,sBAAsB,GAAG,MAAM,CAAC;IAC/D,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,IAAI,IAAI,CAAC;IACd,eAAe,IAAI,gBAAgB,GAAG,IAAI,CAAC;CAC5C;AAGD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;CACpC;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC9B,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACjC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/runtime/utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,GAAE,MAAgB,GAAG,MAAM,CAIhE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,SAAmE,CAAC;AAE1F;;GAEG;AACH,eAAO,MAAM,aAAa,SAAyC,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,YAAY,SAAwC,CAAC;AAElE;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAOlC;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACvD,EAAE,EAAE,CAAC,GACJ,CAAC,GAAG;IAAE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,CAe3C;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAI7D;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAI5D;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAE7D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM;mBAE1B,GAAG,EAAE;oBACJ,GAAG,EAAE;qBACJ,GAAG,EAAE;EAEzB"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/runtime/vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAA8E,GAAG,EAAE,MAAM,KAAK,CAAC;AAKtG,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,GAAG,EACX,OAAO,GAAE,uBAA4B;;eA+BxB,MAAM;mBACF,MAAM,EAAE;EAE1B;AAGD,eAAO,MAAM,cAAc;;;;;;;;iBAQZ,GAAG;CAIjB,CAAC;AAEF;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EACzD,GAAG,SAAQ;;;;;;;;iBAOI,GAAG,oBAAoB,GAAG;;;EAiB1C;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAS3F;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,CAAC;;;EAST;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,iBAI7C;AAED,wBAAgB,kBAAkB,kBAEjC"}
@@ -1,232 +0,0 @@
1
- // src/runtime/vue.ts
2
- import { ref, computed, inject, provide, h } from "vue";
3
-
4
- // src/runtime/injector.ts
5
- var StyleInjector = class {
6
- styleElement = null;
7
- stylesCache = /* @__PURE__ */ new Map();
8
- injectedStyles = /* @__PURE__ */ new Set();
9
- constructor() {
10
- this.initStyleElement();
11
- }
12
- initStyleElement() {
13
- if (typeof document === "undefined")
14
- return;
15
- const existing = document.getElementById("chaincss-runtime-styles");
16
- if (existing) {
17
- this.styleElement = existing;
18
- return;
19
- }
20
- const style = document.createElement("style");
21
- style.id = "chaincss-runtime-styles";
22
- style.setAttribute("data-chaincss", "runtime");
23
- document.head.appendChild(style);
24
- this.styleElement = style;
25
- }
26
- generateClassName(styleId) {
27
- let hash = 0;
28
- for (let i = 0; i < styleId.length; i++) {
29
- hash = (hash << 5) - hash + styleId.charCodeAt(i);
30
- hash |= 0;
31
- }
32
- return `c_${Math.abs(hash).toString(36)}`;
33
- }
34
- generateCSS(style, className) {
35
- let css = "";
36
- const selector = `.${className}`;
37
- let normalStyles = "";
38
- for (const [key, value] of Object.entries(style)) {
39
- if (key === "selectors" || key === "hover")
40
- continue;
41
- const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
42
- normalStyles += ` ${kebabKey}: ${value};
43
- `;
44
- }
45
- if (normalStyles) {
46
- css += `${selector} {
47
- ${normalStyles}}
48
- `;
49
- }
50
- if (style.hover && typeof style.hover === "object") {
51
- let hoverStyles = "";
52
- for (const [key, value] of Object.entries(style.hover)) {
53
- const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
54
- hoverStyles += ` ${kebabKey}: ${value};
55
- `;
56
- }
57
- if (hoverStyles) {
58
- css += `${selector}:hover {
59
- ${hoverStyles}}
60
- `;
61
- }
62
- }
63
- return css;
64
- }
65
- inject(styleId, style) {
66
- if (this.stylesCache.has(styleId)) {
67
- return this.stylesCache.get(styleId);
68
- }
69
- const className = this.generateClassName(styleId);
70
- const css = this.generateCSS(style, className);
71
- this.stylesCache.set(styleId, className);
72
- if (!this.injectedStyles.has(styleId) && this.styleElement && css) {
73
- this.styleElement.textContent += css;
74
- this.injectedStyles.add(styleId);
75
- }
76
- return className;
77
- }
78
- injectMultiple(styles) {
79
- const result = {};
80
- let allCSS = "";
81
- for (const [styleId, style] of Object.entries(styles)) {
82
- if (this.stylesCache.has(styleId)) {
83
- result[styleId] = this.stylesCache.get(styleId);
84
- continue;
85
- }
86
- const className = this.generateClassName(styleId);
87
- const css = this.generateCSS(style, className);
88
- this.stylesCache.set(styleId, className);
89
- result[styleId] = className;
90
- allCSS += css;
91
- }
92
- if (allCSS && this.styleElement) {
93
- this.styleElement.textContent += allCSS;
94
- }
95
- return result;
96
- }
97
- update(styleId, style) {
98
- this.injectedStyles.delete(styleId);
99
- const className = this.generateClassName(styleId);
100
- const css = this.generateCSS(style, className);
101
- this.stylesCache.set(styleId, className);
102
- if (this.styleElement) {
103
- let allCSS = "";
104
- for (const [id, className2] of this.stylesCache) {
105
- }
106
- this.styleElement.textContent = allCSS;
107
- this.injectedStyles.add(styleId);
108
- }
109
- return className;
110
- }
111
- remove(styleId) {
112
- this.injectedStyles.delete(styleId);
113
- this.stylesCache.delete(styleId);
114
- if (this.styleElement) {
115
- let allCSS = "";
116
- for (const [id, className] of this.stylesCache) {
117
- }
118
- this.styleElement.textContent = allCSS;
119
- }
120
- }
121
- getStyleElement() {
122
- return this.styleElement;
123
- }
124
- clear() {
125
- this.stylesCache.clear();
126
- this.injectedStyles.clear();
127
- if (this.styleElement) {
128
- this.styleElement.textContent = "";
129
- }
130
- }
131
- };
132
- var styleInjector = new StyleInjector();
133
- function compileRuntime(styles) {
134
- return styleInjector.injectMultiple(styles);
135
- }
136
-
137
- // src/runtime/vue.ts
138
- var CHAIN_CSS_KEY = Symbol("chaincss");
139
- function useAtomicClasses(styles, options = {}) {
140
- const { atomic = true, global = false } = options;
141
- const id = `chain-${Math.random().toString(36).substr(2, 9)}`;
142
- const classes = computed(() => {
143
- const resolvedStyles = typeof styles === "function" ? styles() : styles?.value || styles;
144
- if (!resolvedStyles)
145
- return {};
146
- const compiledStyles = {};
147
- const classNames = {};
148
- for (const [key, styleDef] of Object.entries(resolvedStyles)) {
149
- const className = `${key}-${id}`;
150
- const styleObj = typeof styleDef === "function" ? styleDef() : styleDef;
151
- classNames[key] = className;
152
- compiledStyles[`${key}_${id}`] = {
153
- selectors: [`.${className}`],
154
- ...styleObj
155
- };
156
- }
157
- return compileRuntime(compiledStyles);
158
- });
159
- return {
160
- classes,
161
- cx: (name) => classes.value[name],
162
- cn: (...names) => names.map((name) => classes.value[name]).filter(Boolean).join(" ")
163
- };
164
- }
165
- var ChainCSSGlobal = {
166
- name: "ChainCSSGlobal",
167
- props: {
168
- styles: {
169
- type: Object,
170
- required: true
171
- }
172
- },
173
- setup(props) {
174
- useAtomicClasses(props.styles);
175
- return () => null;
176
- }
177
- };
178
- function createStyledComponent(styles, tag = "div") {
179
- return {
180
- name: "ChainCSSStyledComponent",
181
- props: {
182
- className: { type: String, default: "" }
183
- },
184
- setup(props, { slots, attrs }) {
185
- const resolvedStyles = typeof styles === "function" ? styles() : styles;
186
- const { classes } = useAtomicClasses({ root: resolvedStyles });
187
- const combinedClass = computed(() => {
188
- const rootClass = classes.value?.root || "";
189
- return [rootClass, props.className].filter(Boolean).join(" ");
190
- });
191
- return () => {
192
- return h(tag, {
193
- class: combinedClass.value,
194
- ...attrs
195
- }, slots.default?.());
196
- };
197
- }
198
- };
199
- }
200
- function createStyledComponents(components) {
201
- const result = {};
202
- for (const [name, config] of Object.entries(components)) {
203
- const { element = "div", styles } = config;
204
- result[name] = createStyledComponent(styles, element);
205
- }
206
- return result;
207
- }
208
- function useComputedStyles(styles, props) {
209
- const computedStyles = computed(() => ({ root: styles(props) }));
210
- const { classes } = useAtomicClasses(computedStyles);
211
- return {
212
- classes,
213
- rootClass: computed(() => classes.value?.root || "")
214
- };
215
- }
216
- function provideStyleContext(theme) {
217
- const themeRef = ref(theme);
218
- provide(CHAIN_CSS_KEY, themeRef);
219
- return themeRef;
220
- }
221
- function injectStyleContext() {
222
- return inject(CHAIN_CSS_KEY, ref({}));
223
- }
224
- export {
225
- ChainCSSGlobal,
226
- createStyledComponent,
227
- createStyledComponents,
228
- injectStyleContext,
229
- provideStyleContext,
230
- useAtomicClasses,
231
- useComputedStyles
232
- };