chaincss 2.1.32 → 2.1.33
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.
- package/dist/cli/index.js +2 -2
- package/dist/compiler/btt.d.ts +2 -8
- package/dist/compiler/recipe.d.ts +1 -6
- package/dist/core/types.d.ts +3 -1
- package/dist/index.js +2 -2
- package/dist/plugins/vite.js +2 -2
- package/dist/runtime/injector.d.ts +4 -4
- package/package.json +3 -3
- package/src/compiler/btt.ts +3 -8
- package/src/compiler/recipe.ts +1 -6
- package/src/core/compiler.ts +2 -2
- package/src/core/types.ts +3 -1
- package/src/runtime/injector.ts +6 -5
package/dist/cli/index.js
CHANGED
|
@@ -2639,13 +2639,13 @@ var init_compiler = __esm({
|
|
|
2639
2639
|
init_cache_manager();
|
|
2640
2640
|
init_content_addressable_cache();
|
|
2641
2641
|
init_shorthands();
|
|
2642
|
-
__filename = (() => {
|
|
2642
|
+
__filename = typeof import.meta !== "undefined" ? (() => {
|
|
2643
2643
|
try {
|
|
2644
2644
|
return fileURLToPath(import.meta.url);
|
|
2645
2645
|
} catch {
|
|
2646
2646
|
return "";
|
|
2647
2647
|
}
|
|
2648
|
-
})();
|
|
2648
|
+
})() : "";
|
|
2649
2649
|
__dirname = __filename ? path6.dirname(__filename) : "";
|
|
2650
2650
|
ChainCSSCompiler = class {
|
|
2651
2651
|
config;
|
package/dist/compiler/btt.d.ts
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import { DesignTokens } from './tokens.js';
|
|
6
6
|
import type { AtomicOptimizer } from './atomic-optimizer.js';
|
|
7
|
+
import type { StyleDefinition } from '../core/types.js';
|
|
8
|
+
export type { StyleDefinition };
|
|
7
9
|
export { setBreakpoints } from './breakpoints.js';
|
|
8
10
|
export { chain, enableDebug } from './Chain.js';
|
|
9
11
|
export { enableTimeline, getStyleHistory, getStyleChanges, getStyleDiff, exportTimeline, clearTimeline, takeSnapshot, isTimelineEnabled } from './timeline.js';
|
|
@@ -48,14 +50,6 @@ export interface ThemeBlock {
|
|
|
48
50
|
tokens: any;
|
|
49
51
|
fallback: any;
|
|
50
52
|
}
|
|
51
|
-
export interface StyleDefinition {
|
|
52
|
-
selectors: string[];
|
|
53
|
-
hover?: Record<string, string | number>;
|
|
54
|
-
atRules?: AtRule[];
|
|
55
|
-
nestedRules?: NestedRule[];
|
|
56
|
-
themes?: ThemeBlock[];
|
|
57
|
-
[cssProperty: string]: any;
|
|
58
|
-
}
|
|
59
53
|
export declare const run: (...args: any[]) => string;
|
|
60
54
|
export declare const compile: (obj: Record<string, StyleDefinition>) => string;
|
|
61
55
|
export { atomicOptimizer, chains as chainObject };
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
selectors: string[];
|
|
3
|
-
hover?: Record<string, string | number>;
|
|
4
|
-
[key: string]: any;
|
|
5
|
-
}
|
|
1
|
+
import type { StyleDefinition } from '../core/types.js';
|
|
6
2
|
export interface RecipeOptions<TVariants extends Record<string, Record<string, any>>> {
|
|
7
3
|
base?: StyleDefinition | (() => StyleDefinition);
|
|
8
4
|
variants?: TVariants;
|
|
@@ -32,4 +28,3 @@ export type Recipe<TVariants extends Record<string, Record<string, any>>> = {
|
|
|
32
28
|
getVariantClassNames: () => Record<string, string>;
|
|
33
29
|
};
|
|
34
30
|
export declare function recipe<TVariants extends Record<string, Record<string, any>>>(options: RecipeOptions<TVariants>): Recipe<TVariants>;
|
|
35
|
-
export {};
|
package/dist/core/types.d.ts
CHANGED
|
@@ -12,8 +12,10 @@ export interface StyleDefinition {
|
|
|
12
12
|
_generateComponent?: boolean;
|
|
13
13
|
_framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
|
|
14
14
|
_propsDefinition?: Record<string, any>;
|
|
15
|
-
/** Explicit bucket for custom CSS properties
|
|
15
|
+
/** Explicit bucket for custom CSS properties */
|
|
16
16
|
customProperties?: Record<string, string | number>;
|
|
17
|
+
/** Allow arbitrary CSS properties */
|
|
18
|
+
[cssProperty: string]: any;
|
|
17
19
|
}
|
|
18
20
|
export interface AtRule {
|
|
19
21
|
type: 'media' | 'keyframes' | 'font-face' | 'supports' | 'container' | 'layer' | 'counter-style' | 'property';
|
package/dist/index.js
CHANGED
|
@@ -6077,13 +6077,13 @@ var PersistentCache = class {
|
|
|
6077
6077
|
};
|
|
6078
6078
|
|
|
6079
6079
|
// src/core/compiler.ts
|
|
6080
|
-
var __filename = (() => {
|
|
6080
|
+
var __filename = typeof import.meta !== "undefined" ? (() => {
|
|
6081
6081
|
try {
|
|
6082
6082
|
return fileURLToPath(import.meta.url);
|
|
6083
6083
|
} catch {
|
|
6084
6084
|
return "";
|
|
6085
6085
|
}
|
|
6086
|
-
})();
|
|
6086
|
+
})() : "";
|
|
6087
6087
|
var __dirname = __filename ? path5.dirname(__filename) : "";
|
|
6088
6088
|
var ChainCSSCompiler = class {
|
|
6089
6089
|
config;
|
package/dist/plugins/vite.js
CHANGED
|
@@ -2531,13 +2531,13 @@ var PersistentCache = class {
|
|
|
2531
2531
|
};
|
|
2532
2532
|
|
|
2533
2533
|
// src/core/compiler.ts
|
|
2534
|
-
var __filename = (() => {
|
|
2534
|
+
var __filename = typeof import.meta !== "undefined" ? (() => {
|
|
2535
2535
|
try {
|
|
2536
2536
|
return fileURLToPath(import.meta.url);
|
|
2537
2537
|
} catch {
|
|
2538
2538
|
return "";
|
|
2539
2539
|
}
|
|
2540
|
-
})();
|
|
2540
|
+
})() : "";
|
|
2541
2541
|
var __dirname = __filename ? path5.dirname(__filename) : "";
|
|
2542
2542
|
var ChainCSSCompiler = class {
|
|
2543
2543
|
config;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export interface
|
|
1
|
+
export interface RuntimeStyleDefinition {
|
|
2
2
|
selectors?: string[];
|
|
3
3
|
hover?: Record<string, string | number>;
|
|
4
4
|
[key: string]: any;
|
|
@@ -33,7 +33,7 @@ declare class StyleInjector {
|
|
|
33
33
|
*/
|
|
34
34
|
resolveToken(value: any): any;
|
|
35
35
|
private generateCSS;
|
|
36
|
-
injectMultiple(styles: Record<string,
|
|
36
|
+
injectMultiple(styles: Record<string, RuntimeStyleDefinition>, moduleId?: string): Record<string, string>;
|
|
37
37
|
writeToDOM(css: string): void;
|
|
38
38
|
removeModule(moduleId: string): void;
|
|
39
39
|
removeAll(): void;
|
|
@@ -45,9 +45,9 @@ declare class StyleInjector {
|
|
|
45
45
|
}
|
|
46
46
|
export declare const styleInjector: StyleInjector;
|
|
47
47
|
export declare const setTokens: (t: TokenStore) => void;
|
|
48
|
-
export declare const compileRuntime: (s: Record<string,
|
|
48
|
+
export declare const compileRuntime: (s: Record<string, RuntimeStyleDefinition>, moduleId?: string) => Record<string, string>;
|
|
49
49
|
export declare const removeRuntimeModule: (moduleId: string) => void;
|
|
50
50
|
export declare const clearRuntimeStyles: () => void;
|
|
51
51
|
export declare const enableRuntimeDebug: (enabled: boolean) => void;
|
|
52
|
-
export declare function runRuntime(...styles:
|
|
52
|
+
export declare function runRuntime(...styles: RuntimeStyleDefinition[]): string;
|
|
53
53
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chaincss",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.33",
|
|
4
4
|
"description": "ChainCSS - 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",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"build:core": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --packages=external",
|
|
40
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
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:browser": "esbuild src/browser.ts --bundle --platform=browser --format=esm --outfile=dist/browser.js --external:react --external:react-dom --external:vue --external:svelte",
|
|
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 --external:url",
|
|
43
|
+
"build:browser": "esbuild src/browser.ts --bundle --platform=browser --format=esm --outfile=dist/browser.js --external:react --external:react-dom --external:vue --external:svelte --external:url",
|
|
44
44
|
"build:compiler": "esbuild src/compiler/index.ts --bundle --platform=node --format=esm --outfile=dist/compiler/index.js --packages=external",
|
|
45
45
|
"dev": "tsc -w",
|
|
46
46
|
"prepublishOnly": "npm run build",
|
package/src/compiler/btt.ts
CHANGED
|
@@ -19,6 +19,8 @@ import { animationPresets, createAnimation } from './animations.js';
|
|
|
19
19
|
import { helpers } from './helpers.js';
|
|
20
20
|
import type { AnimationConfig } from './animations.js';
|
|
21
21
|
import { chain, setTokenContext } from './Chain.js';
|
|
22
|
+
import type { StyleDefinition } from '../core/types.js';
|
|
23
|
+
export type { StyleDefinition };
|
|
22
24
|
import { takeSnapshot as ts, isTimelineEnabled as timelineActive } from './timeline.js';
|
|
23
25
|
|
|
24
26
|
// ============================================================================
|
|
@@ -170,14 +172,7 @@ export interface AtRule {
|
|
|
170
172
|
export interface NestedRule { selector: string; styles: Record<string, string | number>; }
|
|
171
173
|
export interface ThemeBlock { name: string; styles: StyleDefinition; tokens: any; fallback: any; }
|
|
172
174
|
|
|
173
|
-
|
|
174
|
-
selectors: string[];
|
|
175
|
-
hover?: Record<string, string | number>;
|
|
176
|
-
atRules?: AtRule[];
|
|
177
|
-
nestedRules?: NestedRule[];
|
|
178
|
-
themes?: ThemeBlock[];
|
|
179
|
-
[cssProperty: string]: any;
|
|
180
|
-
}
|
|
175
|
+
// StyleDefinition imported from core/types.ts
|
|
181
176
|
|
|
182
177
|
// ============================================================================
|
|
183
178
|
// AT-Rule Processing
|
package/src/compiler/recipe.ts
CHANGED
|
@@ -3,12 +3,7 @@
|
|
|
3
3
|
* Recipe System - Type-safe component variants
|
|
4
4
|
*/
|
|
5
5
|
import { chain } from './Chain.js';
|
|
6
|
-
|
|
7
|
-
interface StyleDefinition {
|
|
8
|
-
selectors: string[];
|
|
9
|
-
hover?: Record<string, string | number>;
|
|
10
|
-
[key: string]: any;
|
|
11
|
-
}
|
|
6
|
+
import type { StyleDefinition } from '../core/types.js';
|
|
12
7
|
import { run } from './btt.js';
|
|
13
8
|
|
|
14
9
|
export interface RecipeOptions<TVariants extends Record<string, Record<string, any>>> {
|
package/src/core/compiler.ts
CHANGED
|
@@ -25,8 +25,8 @@ import { PersistentCache } from '../compiler/content-addressable-cache.js';
|
|
|
25
25
|
import { shorthandMap, macros } from '../compiler/shorthands.js';
|
|
26
26
|
import type { AtomicClass } from '../compiler/atomic-optimizer.js';
|
|
27
27
|
|
|
28
|
-
const __filename = (() => { try { return fileURLToPath(import.meta.url); } catch { return
|
|
29
|
-
const __dirname = __filename ? path.dirname(__filename) :
|
|
28
|
+
const __filename = typeof import.meta !== 'undefined' ? (() => { try { return fileURLToPath(import.meta.url); } catch { return ''; } })() : '';
|
|
29
|
+
const __dirname = __filename ? path.dirname(__filename) : '';
|
|
30
30
|
|
|
31
31
|
interface CachedStyleEntry {
|
|
32
32
|
result: {
|
package/src/core/types.ts
CHANGED
|
@@ -14,8 +14,10 @@ export interface StyleDefinition {
|
|
|
14
14
|
_generateComponent?: boolean;
|
|
15
15
|
_framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
|
|
16
16
|
_propsDefinition?: Record<string, any>;
|
|
17
|
-
/** Explicit bucket for custom CSS properties
|
|
17
|
+
/** Explicit bucket for custom CSS properties */
|
|
18
18
|
customProperties?: Record<string, string | number>;
|
|
19
|
+
/** Allow arbitrary CSS properties */
|
|
20
|
+
[cssProperty: string]: any;
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
export interface AtRule {
|
package/src/runtime/injector.ts
CHANGED
|
@@ -5,7 +5,8 @@ import { processStyleObject } from '../core/common-utils.js';
|
|
|
5
5
|
|
|
6
6
|
const TOKEN_V2_KEY = '__CHAINCSS_V2_TOKENS__';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
// Runtime-specific style def — selectors optional
|
|
9
|
+
export interface RuntimeStyleDefinition {
|
|
9
10
|
selectors?: string[];
|
|
10
11
|
hover?: Record<string, string | number>;
|
|
11
12
|
[key: string]: any;
|
|
@@ -110,7 +111,7 @@ class StyleInjector {
|
|
|
110
111
|
});
|
|
111
112
|
}
|
|
112
113
|
|
|
113
|
-
private generateCSS(style:
|
|
114
|
+
private generateCSS(style: RuntimeStyleDefinition, className: string): string {
|
|
114
115
|
let css = '';
|
|
115
116
|
const selector = `.${className}`;
|
|
116
117
|
|
|
@@ -139,7 +140,7 @@ class StyleInjector {
|
|
|
139
140
|
return css;
|
|
140
141
|
}
|
|
141
142
|
|
|
142
|
-
injectMultiple(styles: Record<string,
|
|
143
|
+
injectMultiple(styles: Record<string, RuntimeStyleDefinition>, moduleId?: string): Record<string, string> {
|
|
143
144
|
const result: Record<string, string> = {};
|
|
144
145
|
let newCSS = '';
|
|
145
146
|
const moduleClasses = new Set<string>();
|
|
@@ -233,13 +234,13 @@ export const styleInjector = new StyleInjector();
|
|
|
233
234
|
|
|
234
235
|
// --- PUBLIC API ---
|
|
235
236
|
export const setTokens = (t: TokenStore) => styleInjector.setTokens(t);
|
|
236
|
-
export const compileRuntime = (s: Record<string,
|
|
237
|
+
export const compileRuntime = (s: Record<string, RuntimeStyleDefinition>, moduleId?: string) =>
|
|
237
238
|
styleInjector.injectMultiple(s, moduleId);
|
|
238
239
|
export const removeRuntimeModule = (moduleId: string) => styleInjector.removeModule(moduleId);
|
|
239
240
|
export const clearRuntimeStyles = () => styleInjector.removeAll();
|
|
240
241
|
export const enableRuntimeDebug = (enabled: boolean) => styleInjector.enableDebug(enabled);
|
|
241
242
|
|
|
242
|
-
export function runRuntime(...styles:
|
|
243
|
+
export function runRuntime(...styles: RuntimeStyleDefinition[]): string {
|
|
243
244
|
let css = '';
|
|
244
245
|
for (const style of styles) {
|
|
245
246
|
if (style.selectors && style.selectors.length > 0) {
|