chaincss 2.1.3 → 2.1.4
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/index.d.ts +0 -1
- package/dist/index.js +11 -591
- package/package.json +1 -1
- package/src/index.ts +2 -1
package/dist/index.d.ts
CHANGED
|
@@ -38,7 +38,6 @@ export type { ChainCSSConfig, CompileResult, ChainCSSPlugin } from './core/types
|
|
|
38
38
|
export type { Chain } from './compiler/Chain.js';
|
|
39
39
|
export type { AnimationConfig, KeyframeDefinition } from './compiler/animations.js';
|
|
40
40
|
export type { BreakpointsMap, ResponsiveStyle } from './compiler/breakpoints.js';
|
|
41
|
-
export * from './runtime/index.js';
|
|
42
41
|
export declare const VERSION = "3.0.0";
|
|
43
42
|
import { chain } from './compiler/Chain.js';
|
|
44
43
|
export default chain;
|
package/dist/index.js
CHANGED
|
@@ -2046,8 +2046,8 @@ var helpers = {
|
|
|
2046
2046
|
rgba: (r, g, b, a = 1) => {
|
|
2047
2047
|
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
2048
2048
|
},
|
|
2049
|
-
hsla: (
|
|
2050
|
-
return `hsla(${
|
|
2049
|
+
hsla: (h, s, l, a = 1) => {
|
|
2050
|
+
return `hsla(${h}, ${s}%, ${l}%, ${a})`;
|
|
2051
2051
|
},
|
|
2052
2052
|
// String helpers
|
|
2053
2053
|
url: (path6) => {
|
|
@@ -2655,18 +2655,6 @@ var chain = (useTokens = true) => createChain(useTokens);
|
|
|
2655
2655
|
var debugMode2 = false;
|
|
2656
2656
|
var runtimeMacros = { ...macros };
|
|
2657
2657
|
var globalManifest = {};
|
|
2658
|
-
var setManifest = (manifest) => {
|
|
2659
|
-
if (manifest.atomicMap) {
|
|
2660
|
-
globalManifest = manifest.atomicMap;
|
|
2661
|
-
} else if (manifest.atomicClasses) {
|
|
2662
|
-
globalManifest = manifest.atomicClasses;
|
|
2663
|
-
} else {
|
|
2664
|
-
globalManifest = manifest || {};
|
|
2665
|
-
}
|
|
2666
|
-
if (debugMode2) {
|
|
2667
|
-
console.log("[ChainCSS] Manifest loaded with", Object.keys(globalManifest).length, "entries");
|
|
2668
|
-
}
|
|
2669
|
-
};
|
|
2670
2658
|
var RuntimeChain = class _RuntimeChain {
|
|
2671
2659
|
constructor(useTokens = false) {
|
|
2672
2660
|
this.useTokens = useTokens;
|
|
@@ -2808,7 +2796,6 @@ var RuntimeChain = class _RuntimeChain {
|
|
|
2808
2796
|
return { ...this.catcher };
|
|
2809
2797
|
}
|
|
2810
2798
|
};
|
|
2811
|
-
var $t = () => new RuntimeChain(true).proxy;
|
|
2812
2799
|
|
|
2813
2800
|
// src/core/auto-detector.ts
|
|
2814
2801
|
var AutoDetector = class _AutoDetector {
|
|
@@ -3364,43 +3351,7 @@ ${rules}}
|
|
|
3364
3351
|
}
|
|
3365
3352
|
};
|
|
3366
3353
|
var styleInjector = new StyleInjector();
|
|
3367
|
-
var setTokens = (t) => styleInjector.setTokens(t);
|
|
3368
3354
|
var compileRuntime = (s, moduleId) => styleInjector.injectMultiple(s, moduleId);
|
|
3369
|
-
var removeRuntimeModule = (moduleId) => styleInjector.removeModule(moduleId);
|
|
3370
|
-
function runRuntime(...styles) {
|
|
3371
|
-
let css = "";
|
|
3372
|
-
for (const style of styles) {
|
|
3373
|
-
if (style.selectors && style.selectors.length > 0) {
|
|
3374
|
-
const combinedSelector = style.selectors.join(", ");
|
|
3375
|
-
const mainBody = processStyleObject(style, styleInjector["tokenStore"], { useTokens: true, debug: false });
|
|
3376
|
-
if (mainBody && Object.keys(mainBody).length > 0) {
|
|
3377
|
-
let rules = "";
|
|
3378
|
-
for (const [prop, val] of Object.entries(mainBody)) {
|
|
3379
|
-
rules += ` ${prop}: ${val};
|
|
3380
|
-
`;
|
|
3381
|
-
}
|
|
3382
|
-
css += `${combinedSelector} {
|
|
3383
|
-
${rules}}
|
|
3384
|
-
`;
|
|
3385
|
-
}
|
|
3386
|
-
if (style.hover) {
|
|
3387
|
-
const hoverBody = processStyleObject(style.hover, styleInjector["tokenStore"], { useTokens: true, debug: false });
|
|
3388
|
-
if (hoverBody && Object.keys(hoverBody).length > 0) {
|
|
3389
|
-
let rules = "";
|
|
3390
|
-
for (const [prop, val] of Object.entries(hoverBody)) {
|
|
3391
|
-
rules += ` ${prop}: ${val};
|
|
3392
|
-
`;
|
|
3393
|
-
}
|
|
3394
|
-
css += `${combinedSelector}:hover {
|
|
3395
|
-
${rules}}
|
|
3396
|
-
`;
|
|
3397
|
-
}
|
|
3398
|
-
}
|
|
3399
|
-
}
|
|
3400
|
-
}
|
|
3401
|
-
styleInjector.writeToDOM(css);
|
|
3402
|
-
return css;
|
|
3403
|
-
}
|
|
3404
3355
|
|
|
3405
3356
|
// src/runtime/auto-hooks.tsx
|
|
3406
3357
|
function useSmartStyles(styleBuilder, deps = [], options = {}) {
|
|
@@ -3454,8 +3405,8 @@ function useSmartStyles(styleBuilder, deps = [], options = {}) {
|
|
|
3454
3405
|
}
|
|
3455
3406
|
function createSmartComponent(Component, baseStyles) {
|
|
3456
3407
|
const SmartComponent = (props) => {
|
|
3457
|
-
const styles = useSmartStyles((
|
|
3458
|
-
let instance =
|
|
3408
|
+
const styles = useSmartStyles((chain2) => {
|
|
3409
|
+
let instance = chain2();
|
|
3459
3410
|
if (baseStyles) {
|
|
3460
3411
|
instance = baseStyles(instance);
|
|
3461
3412
|
}
|
|
@@ -5002,8 +4953,8 @@ async function loadPostcss() {
|
|
|
5002
4953
|
const promise = (async () => {
|
|
5003
4954
|
if (!postcssLoaded) {
|
|
5004
4955
|
try {
|
|
5005
|
-
const
|
|
5006
|
-
postcss =
|
|
4956
|
+
const module = await import("postcss");
|
|
4957
|
+
postcss = module.default || module;
|
|
5007
4958
|
} catch (err) {
|
|
5008
4959
|
if (process.env.DEBUG) {
|
|
5009
4960
|
console.warn("postcss not installed, using lightweight prefixing");
|
|
@@ -5022,8 +4973,8 @@ async function loadAutoprefixer() {
|
|
|
5022
4973
|
const promise = (async () => {
|
|
5023
4974
|
if (!autoprefixerLoaded) {
|
|
5024
4975
|
try {
|
|
5025
|
-
const
|
|
5026
|
-
autoprefixer =
|
|
4976
|
+
const module = __import__("autoprefixer");
|
|
4977
|
+
autoprefixer = module.default || module;
|
|
5027
4978
|
} catch (err) {
|
|
5028
4979
|
if (process.env.DEBUG) {
|
|
5029
4980
|
console.warn("autoprefixer not installed");
|
|
@@ -5871,9 +5822,9 @@ var CacheManager = class {
|
|
|
5871
5822
|
if (cached !== void 0) {
|
|
5872
5823
|
return cached;
|
|
5873
5824
|
}
|
|
5874
|
-
const
|
|
5875
|
-
this.set(key,
|
|
5876
|
-
return
|
|
5825
|
+
const computed = await compute();
|
|
5826
|
+
this.set(key, computed, ttl);
|
|
5827
|
+
return computed;
|
|
5877
5828
|
}
|
|
5878
5829
|
};
|
|
5879
5830
|
|
|
@@ -6991,490 +6942,6 @@ function createTheme(contract, themeValues) {
|
|
|
6991
6942
|
return new Theme(tokens3);
|
|
6992
6943
|
}
|
|
6993
6944
|
|
|
6994
|
-
// src/runtime/react.tsx
|
|
6995
|
-
import React2, { useMemo, useRef as useRef2, useState as useState2, useEffect as useEffect2 } from "react";
|
|
6996
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
6997
|
-
function hashStyleObject(obj) {
|
|
6998
|
-
const str = JSON.stringify(obj);
|
|
6999
|
-
let hash = 0;
|
|
7000
|
-
for (let i = 0; i < str.length; i++) {
|
|
7001
|
-
const char = str.charCodeAt(i);
|
|
7002
|
-
hash = (hash << 5) - hash + char;
|
|
7003
|
-
hash = hash & hash;
|
|
7004
|
-
}
|
|
7005
|
-
return Math.abs(hash).toString(36);
|
|
7006
|
-
}
|
|
7007
|
-
function useChainStyles(styles, deps = [], options = {}) {
|
|
7008
|
-
const { namespace = "c", debug = false, ssr = false } = options;
|
|
7009
|
-
const instanceId = useRef2(Math.random().toString(36).substring(2, 7));
|
|
7010
|
-
const moduleId = useRef2(`chaincss-module-${instanceId.current}`);
|
|
7011
|
-
const [forceUpdate, setForceUpdate] = useState2(0);
|
|
7012
|
-
useEffect2(() => {
|
|
7013
|
-
return () => {
|
|
7014
|
-
if (!ssr && moduleId.current) {
|
|
7015
|
-
removeRuntimeModule(moduleId.current);
|
|
7016
|
-
if (debug) {
|
|
7017
|
-
console.log(`[ChainCSS] Cleaned up module: ${moduleId.current}`);
|
|
7018
|
-
}
|
|
7019
|
-
}
|
|
7020
|
-
};
|
|
7021
|
-
}, [ssr]);
|
|
7022
|
-
return useMemo(() => {
|
|
7023
|
-
const finalClassMap = {};
|
|
7024
|
-
const injectionBundle = {};
|
|
7025
|
-
for (const [key, styleDef] of Object.entries(styles)) {
|
|
7026
|
-
let styleObject = {};
|
|
7027
|
-
if (styleDef && typeof styleDef.$el === "function") {
|
|
7028
|
-
styleObject = styleDef.$el();
|
|
7029
|
-
if (debug) {
|
|
7030
|
-
console.log(`[ChainCSS] Processing style: ${key}`, styleObject);
|
|
7031
|
-
}
|
|
7032
|
-
} else if (styleDef && typeof styleDef === "object") {
|
|
7033
|
-
styleObject = { ...styleDef };
|
|
7034
|
-
}
|
|
7035
|
-
const staticClasses = Array.isArray(styleObject._classes) ? styleObject._classes : [];
|
|
7036
|
-
const internalKeys = ["catcher", "proxy", "useTokens", "componentName", "_isChain", "_classes", "_name"];
|
|
7037
|
-
internalKeys.forEach((k) => delete styleObject[k]);
|
|
7038
|
-
const hash = hashStyleObject(styleObject);
|
|
7039
|
-
const dynamicClassName = `${namespace}-${key}-${hash}`;
|
|
7040
|
-
const hasStyles = Object.keys(styleObject).length > 0;
|
|
7041
|
-
if (!ssr && hasStyles) {
|
|
7042
|
-
injectionBundle[dynamicClassName] = styleObject;
|
|
7043
|
-
}
|
|
7044
|
-
const classParts = [...staticClasses];
|
|
7045
|
-
if (hasStyles) {
|
|
7046
|
-
classParts.push(dynamicClassName);
|
|
7047
|
-
}
|
|
7048
|
-
finalClassMap[key] = classParts.join(" ").trim();
|
|
7049
|
-
}
|
|
7050
|
-
if (!ssr && Object.keys(injectionBundle).length > 0) {
|
|
7051
|
-
compileRuntime(injectionBundle, moduleId.current);
|
|
7052
|
-
if (debug) {
|
|
7053
|
-
console.log(`[ChainCSS] Injected ${Object.keys(injectionBundle).length} styles for module ${moduleId.current}`);
|
|
7054
|
-
}
|
|
7055
|
-
}
|
|
7056
|
-
return finalClassMap;
|
|
7057
|
-
}, [forceUpdate, ...deps]);
|
|
7058
|
-
}
|
|
7059
|
-
function useDynamicChainStyles(styleFactory, deps = [], options) {
|
|
7060
|
-
const styles = useMemo(() => styleFactory(), deps);
|
|
7061
|
-
return useChainStyles(styles, deps, options);
|
|
7062
|
-
}
|
|
7063
|
-
function useThemeChainStyles(styles, theme, options) {
|
|
7064
|
-
const themedStyles = useMemo(() => {
|
|
7065
|
-
if (typeof styles === "function") return styles(theme);
|
|
7066
|
-
return styles;
|
|
7067
|
-
}, [styles, theme]);
|
|
7068
|
-
return useChainStyles(themedStyles, [theme], options);
|
|
7069
|
-
}
|
|
7070
|
-
function ChainCSSGlobal({ styles, tokens: tokens3, children }) {
|
|
7071
|
-
if (tokens3) {
|
|
7072
|
-
setTokens(tokens3);
|
|
7073
|
-
}
|
|
7074
|
-
if (styles) {
|
|
7075
|
-
useChainStyles(styles, [], { watch: true });
|
|
7076
|
-
}
|
|
7077
|
-
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
7078
|
-
}
|
|
7079
|
-
function cx(...classes) {
|
|
7080
|
-
const result = [];
|
|
7081
|
-
for (const cls of classes) {
|
|
7082
|
-
if (!cls) continue;
|
|
7083
|
-
if (typeof cls === "string") {
|
|
7084
|
-
result.push(cls);
|
|
7085
|
-
} else if (typeof cls === "object") {
|
|
7086
|
-
for (const [key, value] of Object.entries(cls)) {
|
|
7087
|
-
if (value) result.push(key);
|
|
7088
|
-
}
|
|
7089
|
-
}
|
|
7090
|
-
}
|
|
7091
|
-
return result.join(" ");
|
|
7092
|
-
}
|
|
7093
|
-
function withChainStyles(styles, options) {
|
|
7094
|
-
return function WrappedComponent(props) {
|
|
7095
|
-
const styleProps = typeof styles === "function" ? styles(props) : styles;
|
|
7096
|
-
const classNames = useChainStyles(styleProps, [], options);
|
|
7097
|
-
const Component = props.component || props.wrappedComponent;
|
|
7098
|
-
return /* @__PURE__ */ jsx(Component, { ...props, chainStyles: classNames });
|
|
7099
|
-
};
|
|
7100
|
-
}
|
|
7101
|
-
function createStyledComponent(elementType, styles, options) {
|
|
7102
|
-
const StyledComponent = (props) => {
|
|
7103
|
-
const { className: additionalClassName, ...rest } = props;
|
|
7104
|
-
const styleDef = typeof styles === "function" ? styles() : styles;
|
|
7105
|
-
const classNames = useChainStyles({ root: styleDef }, [], options);
|
|
7106
|
-
const combinedClassName = cx(classNames.root, additionalClassName);
|
|
7107
|
-
return React2.createElement(elementType, {
|
|
7108
|
-
...rest,
|
|
7109
|
-
className: combinedClassName
|
|
7110
|
-
});
|
|
7111
|
-
};
|
|
7112
|
-
const displayName = typeof elementType === "string" ? elementType : elementType.displayName || "Component";
|
|
7113
|
-
StyledComponent.displayName = `ChainCSS.${displayName}`;
|
|
7114
|
-
return StyledComponent;
|
|
7115
|
-
}
|
|
7116
|
-
function useComputedStyles(styles, props, deps = [], options) {
|
|
7117
|
-
const computedStyles = useMemo(() => styles(props), [props, ...deps]);
|
|
7118
|
-
return useChainStyles(computedStyles, deps, options);
|
|
7119
|
-
}
|
|
7120
|
-
var debugEnabled = false;
|
|
7121
|
-
function enableChainCSSDebug() {
|
|
7122
|
-
debugEnabled = true;
|
|
7123
|
-
if (typeof window !== "undefined") {
|
|
7124
|
-
window.__CHAINCSS_DEBUG__ = true;
|
|
7125
|
-
console.log("\u{1F50D} ChainCSS Debug Mode Enabled");
|
|
7126
|
-
}
|
|
7127
|
-
}
|
|
7128
|
-
function disableChainCSSDebug() {
|
|
7129
|
-
debugEnabled = false;
|
|
7130
|
-
if (typeof window !== "undefined") {
|
|
7131
|
-
window.__CHAINCSS_DEBUG__ = false;
|
|
7132
|
-
console.log("\u{1F50D} ChainCSS Debug Mode Disabled");
|
|
7133
|
-
}
|
|
7134
|
-
}
|
|
7135
|
-
function isDebugEnabled() {
|
|
7136
|
-
return debugEnabled || typeof window !== "undefined" && window.__CHAINCSS_DEBUG__;
|
|
7137
|
-
}
|
|
7138
|
-
|
|
7139
|
-
// src/runtime/vue.ts
|
|
7140
|
-
import { ref, computed, watch, onUnmounted, inject, provide, h } from "vue";
|
|
7141
|
-
var CHAIN_CSS_KEY = /* @__PURE__ */ Symbol("chaincss");
|
|
7142
|
-
function useAtomicClasses(styles, options = {}) {
|
|
7143
|
-
const { atomic = true, global = false, debug = false } = options;
|
|
7144
|
-
const id = `chain-${Math.random().toString(36).substring(2, 11)}`;
|
|
7145
|
-
const moduleId = `chaincss-vue-module-${id}`;
|
|
7146
|
-
const classMap = ref({});
|
|
7147
|
-
onUnmounted(() => {
|
|
7148
|
-
removeRuntimeModule(moduleId);
|
|
7149
|
-
if (debug) {
|
|
7150
|
-
console.log(`[ChainCSS Vue] Cleaned up module: ${moduleId}`);
|
|
7151
|
-
}
|
|
7152
|
-
});
|
|
7153
|
-
const compileStyles = () => {
|
|
7154
|
-
const resolvedStyles = typeof styles === "function" ? styles() : styles?.value || styles;
|
|
7155
|
-
if (!resolvedStyles) return {};
|
|
7156
|
-
const compiledStyles = {};
|
|
7157
|
-
const classNames = {};
|
|
7158
|
-
for (const [key, styleDef] of Object.entries(resolvedStyles)) {
|
|
7159
|
-
const className = `${key}-${id}`;
|
|
7160
|
-
const styleObj = typeof styleDef === "function" ? styleDef() : styleDef;
|
|
7161
|
-
classNames[key] = className;
|
|
7162
|
-
compiledStyles[`${key}_${id}`] = {
|
|
7163
|
-
selectors: [`.${className}`],
|
|
7164
|
-
...styleObj
|
|
7165
|
-
};
|
|
7166
|
-
}
|
|
7167
|
-
const result = compileRuntime(compiledStyles, moduleId);
|
|
7168
|
-
if (debug) {
|
|
7169
|
-
console.log(`[ChainCSS Vue] Compiled ${Object.keys(classNames).length} styles for module ${moduleId}`);
|
|
7170
|
-
}
|
|
7171
|
-
classMap.value = classNames;
|
|
7172
|
-
return result;
|
|
7173
|
-
};
|
|
7174
|
-
if (typeof styles === "object" && styles !== null && "value" in styles) {
|
|
7175
|
-
watch(styles, () => {
|
|
7176
|
-
compileStyles();
|
|
7177
|
-
}, { deep: true });
|
|
7178
|
-
}
|
|
7179
|
-
compileStyles();
|
|
7180
|
-
return {
|
|
7181
|
-
classes: computed(() => classMap.value),
|
|
7182
|
-
cx: (name) => classMap.value[name] || "",
|
|
7183
|
-
cn: (...names) => names.map((name) => classMap.value[name]).filter(Boolean).join(" "),
|
|
7184
|
-
inject: (newStyles) => {
|
|
7185
|
-
const injectedId = `chaincss-injected-${Date.now()}`;
|
|
7186
|
-
compileRuntime(newStyles, injectedId);
|
|
7187
|
-
if (debug) {
|
|
7188
|
-
console.log(`[ChainCSS Vue] Injected additional styles: ${injectedId}`);
|
|
7189
|
-
}
|
|
7190
|
-
}
|
|
7191
|
-
};
|
|
7192
|
-
}
|
|
7193
|
-
var ChainCSSGlobal2 = {
|
|
7194
|
-
name: "ChainCSSGlobal",
|
|
7195
|
-
props: {
|
|
7196
|
-
styles: {
|
|
7197
|
-
type: Object,
|
|
7198
|
-
required: false,
|
|
7199
|
-
default: () => ({})
|
|
7200
|
-
},
|
|
7201
|
-
tokens: {
|
|
7202
|
-
type: Object,
|
|
7203
|
-
required: false,
|
|
7204
|
-
default: () => ({})
|
|
7205
|
-
},
|
|
7206
|
-
debug: {
|
|
7207
|
-
type: Boolean,
|
|
7208
|
-
default: false
|
|
7209
|
-
}
|
|
7210
|
-
},
|
|
7211
|
-
setup(props) {
|
|
7212
|
-
if (props.tokens && Object.keys(props.tokens).length > 0) {
|
|
7213
|
-
styleInjector.setTokens(props.tokens);
|
|
7214
|
-
}
|
|
7215
|
-
if (props.styles && Object.keys(props.styles).length > 0) {
|
|
7216
|
-
useAtomicClasses(props.styles, { debug: props.debug });
|
|
7217
|
-
}
|
|
7218
|
-
return () => null;
|
|
7219
|
-
}
|
|
7220
|
-
};
|
|
7221
|
-
function createStyledComponent2(styles, tag = "div", options = {}) {
|
|
7222
|
-
return {
|
|
7223
|
-
name: "ChainCSSStyledComponent",
|
|
7224
|
-
props: {
|
|
7225
|
-
className: { type: String, default: "" },
|
|
7226
|
-
as: { type: String, default: tag }
|
|
7227
|
-
},
|
|
7228
|
-
setup(props, { slots, attrs }) {
|
|
7229
|
-
const resolvedStyles = typeof styles === "function" ? styles() : styles;
|
|
7230
|
-
const { classes } = useAtomicClasses({ root: resolvedStyles }, options);
|
|
7231
|
-
const combinedClass = computed(() => {
|
|
7232
|
-
const rootClass = classes.value?.root || "";
|
|
7233
|
-
return [rootClass, props.className].filter(Boolean).join(" ");
|
|
7234
|
-
});
|
|
7235
|
-
return () => {
|
|
7236
|
-
return h(props.as || tag, {
|
|
7237
|
-
class: combinedClass.value,
|
|
7238
|
-
...attrs
|
|
7239
|
-
}, slots.default?.());
|
|
7240
|
-
};
|
|
7241
|
-
}
|
|
7242
|
-
};
|
|
7243
|
-
}
|
|
7244
|
-
function createStyledComponents(components, options) {
|
|
7245
|
-
const result = {};
|
|
7246
|
-
for (const [name, config] of Object.entries(components)) {
|
|
7247
|
-
const { element = "div", styles } = config;
|
|
7248
|
-
result[name] = createStyledComponent2(styles, element, options);
|
|
7249
|
-
}
|
|
7250
|
-
return result;
|
|
7251
|
-
}
|
|
7252
|
-
function useComputedStyles2(styles, props, options) {
|
|
7253
|
-
const computedStyles = computed(() => ({ root: styles(props) }));
|
|
7254
|
-
const { classes } = useAtomicClasses(computedStyles, options);
|
|
7255
|
-
return {
|
|
7256
|
-
classes,
|
|
7257
|
-
rootClass: computed(() => classes.value?.root || "")
|
|
7258
|
-
};
|
|
7259
|
-
}
|
|
7260
|
-
function provideStyleContext(theme) {
|
|
7261
|
-
const themeRef = ref(theme);
|
|
7262
|
-
provide(CHAIN_CSS_KEY, themeRef);
|
|
7263
|
-
return themeRef;
|
|
7264
|
-
}
|
|
7265
|
-
function injectStyleContext() {
|
|
7266
|
-
return inject(CHAIN_CSS_KEY, ref({}));
|
|
7267
|
-
}
|
|
7268
|
-
|
|
7269
|
-
// src/runtime/svelte.ts
|
|
7270
|
-
function useAtomicClasses2() {
|
|
7271
|
-
return { subscribe: () => {
|
|
7272
|
-
}, get: () => ({}) };
|
|
7273
|
-
}
|
|
7274
|
-
function cx2(...args) {
|
|
7275
|
-
return args.filter(Boolean).join(" ");
|
|
7276
|
-
}
|
|
7277
|
-
function ChainCSSGlobal3() {
|
|
7278
|
-
return null;
|
|
7279
|
-
}
|
|
7280
|
-
function createStyledComponent3() {
|
|
7281
|
-
return () => null;
|
|
7282
|
-
}
|
|
7283
|
-
function createStyledComponents2() {
|
|
7284
|
-
return {};
|
|
7285
|
-
}
|
|
7286
|
-
function useComputedStyles3() {
|
|
7287
|
-
return { subscribe: () => {
|
|
7288
|
-
}, get: () => "" };
|
|
7289
|
-
}
|
|
7290
|
-
function provideStyleContext2() {
|
|
7291
|
-
}
|
|
7292
|
-
function injectStyleContext2() {
|
|
7293
|
-
return {};
|
|
7294
|
-
}
|
|
7295
|
-
function chainStyles() {
|
|
7296
|
-
return {};
|
|
7297
|
-
}
|
|
7298
|
-
|
|
7299
|
-
// src/runtime/hmr.ts
|
|
7300
|
-
function getHMREnvironment() {
|
|
7301
|
-
if (typeof window === "undefined") return "none";
|
|
7302
|
-
if (typeof import.meta !== "undefined" && import.meta.hot) {
|
|
7303
|
-
return "vite";
|
|
7304
|
-
}
|
|
7305
|
-
if (module.hot) {
|
|
7306
|
-
return "webpack";
|
|
7307
|
-
}
|
|
7308
|
-
return "none";
|
|
7309
|
-
}
|
|
7310
|
-
function setupHMR() {
|
|
7311
|
-
const env = getHMREnvironment();
|
|
7312
|
-
if (env === "vite") {
|
|
7313
|
-
setupViteHMR();
|
|
7314
|
-
} else if (env === "webpack") {
|
|
7315
|
-
setupWebpackHMR();
|
|
7316
|
-
}
|
|
7317
|
-
}
|
|
7318
|
-
function setupViteHMR() {
|
|
7319
|
-
if (typeof window === "undefined") return;
|
|
7320
|
-
const hot = import.meta.hot;
|
|
7321
|
-
if (!hot) return;
|
|
7322
|
-
hot.on("chaincss:update", (payload) => {
|
|
7323
|
-
console.log(`[ChainCSS HMR] \u{1F504} Updating styles for ${payload.file}`);
|
|
7324
|
-
if (payload.css) {
|
|
7325
|
-
const styleId = "chaincss-hmr-styles";
|
|
7326
|
-
let styleElement = document.getElementById(styleId);
|
|
7327
|
-
if (!styleElement) {
|
|
7328
|
-
styleElement = document.createElement("style");
|
|
7329
|
-
styleElement.id = styleId;
|
|
7330
|
-
styleElement.setAttribute("data-chaincss", "hmr");
|
|
7331
|
-
document.head.appendChild(styleElement);
|
|
7332
|
-
}
|
|
7333
|
-
styleElement.textContent = payload.css;
|
|
7334
|
-
console.log(`[ChainCSS HMR] \u2705 Injected ${payload.css.length} bytes of CSS`);
|
|
7335
|
-
}
|
|
7336
|
-
if (payload.map) {
|
|
7337
|
-
if (typeof window !== "undefined") {
|
|
7338
|
-
window.__CHAINCSS_MANIFEST__ = payload.map;
|
|
7339
|
-
}
|
|
7340
|
-
console.log(`[ChainCSS HMR] \u2705 Updated manifest with ${Object.keys(payload.map).length} entries`);
|
|
7341
|
-
}
|
|
7342
|
-
if (payload.styles) {
|
|
7343
|
-
const moduleId = `hmr-${payload.file}-${payload.timestamp || Date.now()}`;
|
|
7344
|
-
const result = compileRuntime(payload.styles, moduleId);
|
|
7345
|
-
console.log(`[ChainCSS HMR] \u2705 Recompiled ${Object.keys(result).length} styles`);
|
|
7346
|
-
}
|
|
7347
|
-
});
|
|
7348
|
-
hot.on("vite:beforeUpdate", () => {
|
|
7349
|
-
console.log("[ChainCSS HMR] \u{1F9F9} Clearing runtime styles before update");
|
|
7350
|
-
styleInjector.removeAll();
|
|
7351
|
-
});
|
|
7352
|
-
console.log("[ChainCSS HMR] \u2705 Vite HMR setup complete");
|
|
7353
|
-
}
|
|
7354
|
-
function setupWebpackHMR() {
|
|
7355
|
-
if (typeof window === "undefined") return;
|
|
7356
|
-
const hot = module.hot;
|
|
7357
|
-
if (!hot) return;
|
|
7358
|
-
hot.accept((err) => {
|
|
7359
|
-
if (err) {
|
|
7360
|
-
console.error("[ChainCSS HMR] \u274C Update failed:", err);
|
|
7361
|
-
return;
|
|
7362
|
-
}
|
|
7363
|
-
console.log("[ChainCSS HMR] \u{1F504} Webpack HMR update");
|
|
7364
|
-
styleInjector.removeAll();
|
|
7365
|
-
});
|
|
7366
|
-
hot.dispose(() => {
|
|
7367
|
-
console.log("[ChainCSS HMR] \u{1F9F9} Cleaning up styles");
|
|
7368
|
-
styleInjector.removeAll();
|
|
7369
|
-
});
|
|
7370
|
-
console.log("[ChainCSS HMR] \u2705 Webpack HMR setup complete");
|
|
7371
|
-
}
|
|
7372
|
-
function registerForHMR(moduleId, styles, callback) {
|
|
7373
|
-
const env = getHMREnvironment();
|
|
7374
|
-
if (env === "vite") {
|
|
7375
|
-
registerViteHMR(moduleId, styles, callback);
|
|
7376
|
-
} else if (env === "webpack") {
|
|
7377
|
-
registerWebpackHMR(moduleId, styles, callback);
|
|
7378
|
-
}
|
|
7379
|
-
}
|
|
7380
|
-
function registerViteHMR(moduleId, styles, callback) {
|
|
7381
|
-
const hot = import.meta.hot;
|
|
7382
|
-
if (!hot) return;
|
|
7383
|
-
hot.accept(() => {
|
|
7384
|
-
console.log(`[ChainCSS HMR] \u{1F504} Accepting update for ${moduleId}`);
|
|
7385
|
-
styleInjector.removeModule(moduleId);
|
|
7386
|
-
if (callback && styles) {
|
|
7387
|
-
callback(styles);
|
|
7388
|
-
}
|
|
7389
|
-
});
|
|
7390
|
-
hot.dispose(() => {
|
|
7391
|
-
console.log(`[ChainCSS HMR] \u{1F9F9} Disposing module: ${moduleId}`);
|
|
7392
|
-
styleInjector.removeModule(moduleId);
|
|
7393
|
-
});
|
|
7394
|
-
}
|
|
7395
|
-
function registerWebpackHMR(moduleId, styles, callback) {
|
|
7396
|
-
const hot = module.hot;
|
|
7397
|
-
if (!hot) return;
|
|
7398
|
-
hot.accept(() => {
|
|
7399
|
-
console.log(`[ChainCSS HMR] \u{1F504} Webpack HMR accept for ${moduleId}`);
|
|
7400
|
-
if (callback && styles) {
|
|
7401
|
-
callback(styles);
|
|
7402
|
-
}
|
|
7403
|
-
});
|
|
7404
|
-
hot.dispose(() => {
|
|
7405
|
-
console.log(`[ChainCSS HMR] \u{1F9F9} Webpack HMR dispose for ${moduleId}`);
|
|
7406
|
-
styleInjector.removeModule(moduleId);
|
|
7407
|
-
});
|
|
7408
|
-
}
|
|
7409
|
-
if (typeof window !== "undefined") {
|
|
7410
|
-
setupHMR();
|
|
7411
|
-
}
|
|
7412
|
-
|
|
7413
|
-
// src/runtime/utils.ts
|
|
7414
|
-
function generateStyleId(prefix = "chain") {
|
|
7415
|
-
const random = Math.random().toString(36).substring(2, 10);
|
|
7416
|
-
const timestamp = Date.now().toString(36);
|
|
7417
|
-
return `${prefix}-${timestamp}-${random}`;
|
|
7418
|
-
}
|
|
7419
|
-
function hashString2(str) {
|
|
7420
|
-
let hash = 0;
|
|
7421
|
-
for (let i = 0; i < str.length; i++) {
|
|
7422
|
-
hash = (hash << 5) - hash + str.charCodeAt(i);
|
|
7423
|
-
hash |= 0;
|
|
7424
|
-
}
|
|
7425
|
-
return Math.abs(hash).toString(36);
|
|
7426
|
-
}
|
|
7427
|
-
function kebabCase2(str) {
|
|
7428
|
-
return str.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
7429
|
-
}
|
|
7430
|
-
var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
|
|
7431
|
-
var isDevelopment = process.env.NODE_ENV === "development";
|
|
7432
|
-
var isProduction = process.env.NODE_ENV === "production";
|
|
7433
|
-
function debounce(fn, delay) {
|
|
7434
|
-
let timeoutId;
|
|
7435
|
-
return (...args) => {
|
|
7436
|
-
clearTimeout(timeoutId);
|
|
7437
|
-
timeoutId = setTimeout(() => fn(...args), delay);
|
|
7438
|
-
};
|
|
7439
|
-
}
|
|
7440
|
-
function memoize(fn) {
|
|
7441
|
-
const cache = /* @__PURE__ */ new Map();
|
|
7442
|
-
const memoized = ((...args) => {
|
|
7443
|
-
const key = JSON.stringify(args);
|
|
7444
|
-
if (cache.has(key)) {
|
|
7445
|
-
return cache.get(key);
|
|
7446
|
-
}
|
|
7447
|
-
const result = fn(...args);
|
|
7448
|
-
cache.set(key, result);
|
|
7449
|
-
return result;
|
|
7450
|
-
});
|
|
7451
|
-
memoized.cache = cache;
|
|
7452
|
-
return memoized;
|
|
7453
|
-
}
|
|
7454
|
-
function cn(...classes) {
|
|
7455
|
-
return classes.filter(Boolean).join(" ");
|
|
7456
|
-
}
|
|
7457
|
-
function devWarn(message, ...args) {
|
|
7458
|
-
if (isDevelopment) {
|
|
7459
|
-
console.warn(`[ChainCSS] ${message}`, ...args);
|
|
7460
|
-
}
|
|
7461
|
-
}
|
|
7462
|
-
function devLog(message, ...args) {
|
|
7463
|
-
if (isDevelopment) {
|
|
7464
|
-
console.log(`[ChainCSS] ${message}`, ...args);
|
|
7465
|
-
}
|
|
7466
|
-
}
|
|
7467
|
-
function logError(message, error) {
|
|
7468
|
-
console.error(`[ChainCSS] ${message}`, error || "");
|
|
7469
|
-
}
|
|
7470
|
-
function createDebugger(module2) {
|
|
7471
|
-
return {
|
|
7472
|
-
log: (...args) => devLog(`[${module2}]`, ...args),
|
|
7473
|
-
warn: (...args) => devWarn(`[${module2}]`, ...args),
|
|
7474
|
-
error: (...args) => logError(`[${module2}]`, ...args)
|
|
7475
|
-
};
|
|
7476
|
-
}
|
|
7477
|
-
|
|
7478
6945
|
// src/index.ts
|
|
7479
6946
|
var VERSION2 = "3.0.0";
|
|
7480
6947
|
var index_default = chain;
|
|
@@ -7487,14 +6954,10 @@ if (typeof process !== "undefined" && process.env?.NODE_ENV !== "test") {
|
|
|
7487
6954
|
}
|
|
7488
6955
|
export {
|
|
7489
6956
|
chain as $,
|
|
7490
|
-
$t,
|
|
7491
6957
|
AtomicOptimizer,
|
|
7492
6958
|
AutoDetector,
|
|
7493
6959
|
CacheManager,
|
|
7494
6960
|
ChainCSSCompiler,
|
|
7495
|
-
ChainCSSGlobal,
|
|
7496
|
-
ChainCSSGlobal3 as ChainCSSGlobalSvelte,
|
|
7497
|
-
ChainCSSGlobal2 as ChainCSSGlobalVue,
|
|
7498
6961
|
ChainCSSPrefixer,
|
|
7499
6962
|
DesignTokens,
|
|
7500
6963
|
PersistentCache,
|
|
@@ -7504,38 +6967,21 @@ export {
|
|
|
7504
6967
|
autoDetector,
|
|
7505
6968
|
buildChain,
|
|
7506
6969
|
chain,
|
|
7507
|
-
chainStyles,
|
|
7508
6970
|
smartChain as chainV3,
|
|
7509
6971
|
clearTimeline,
|
|
7510
|
-
cn as cnUtils,
|
|
7511
|
-
compileRuntime as compile,
|
|
7512
6972
|
compileChainCSS,
|
|
7513
6973
|
configureAtomic,
|
|
7514
6974
|
createAnimation,
|
|
7515
|
-
createDebugger,
|
|
7516
6975
|
createTokens as createDesignTokens,
|
|
7517
6976
|
createSmartComponent,
|
|
7518
|
-
createStyledComponent,
|
|
7519
|
-
createStyledComponent3 as createStyledSvelteComponent,
|
|
7520
|
-
createStyledComponents2 as createStyledSvelteComponents,
|
|
7521
|
-
createStyledComponent2 as createStyledVueComponent,
|
|
7522
|
-
createStyledComponents as createStyledVueComponents,
|
|
7523
6977
|
createTheme,
|
|
7524
6978
|
createThemeContract,
|
|
7525
6979
|
createTokens2 as createTokens,
|
|
7526
|
-
cx,
|
|
7527
|
-
cx2 as cxSvelte,
|
|
7528
|
-
debounce,
|
|
7529
6980
|
index_default as default,
|
|
7530
|
-
devLog,
|
|
7531
|
-
devWarn,
|
|
7532
|
-
disableChainCSSDebug,
|
|
7533
|
-
enableChainCSSDebug,
|
|
7534
6981
|
enableDebug,
|
|
7535
6982
|
enableTimeline,
|
|
7536
6983
|
expandShorthand,
|
|
7537
6984
|
exportTimeline,
|
|
7538
|
-
generateStyleId,
|
|
7539
6985
|
getAnimationPreset,
|
|
7540
6986
|
getAnimationPresetNames,
|
|
7541
6987
|
getAvailableShorthands,
|
|
@@ -7548,42 +6994,16 @@ export {
|
|
|
7548
6994
|
getSuggestions,
|
|
7549
6995
|
handleShorthand,
|
|
7550
6996
|
hasAnimationPreset,
|
|
7551
|
-
hashString2 as hashString,
|
|
7552
6997
|
helpers,
|
|
7553
|
-
injectStyleContext,
|
|
7554
|
-
injectStyleContext2 as injectStyleContextSvelte,
|
|
7555
|
-
isBrowser,
|
|
7556
|
-
isDebugEnabled,
|
|
7557
|
-
isDevelopment,
|
|
7558
|
-
isProduction,
|
|
7559
6998
|
isShorthand,
|
|
7560
|
-
kebabCase2 as kebabCase,
|
|
7561
|
-
logError,
|
|
7562
6999
|
macros,
|
|
7563
|
-
memoize,
|
|
7564
|
-
provideStyleContext,
|
|
7565
|
-
provideStyleContext2 as provideStyleContextSvelte,
|
|
7566
7000
|
recipe,
|
|
7567
|
-
registerForHMR,
|
|
7568
|
-
runRuntime as run,
|
|
7569
7001
|
runtimeChain,
|
|
7570
7002
|
setBreakpoints,
|
|
7571
|
-
setManifest,
|
|
7572
|
-
setupHMR,
|
|
7573
7003
|
shorthandMap,
|
|
7574
7004
|
smartChain,
|
|
7575
|
-
styleInjector,
|
|
7576
7005
|
tokens2 as tokens,
|
|
7577
|
-
useAtomicClasses,
|
|
7578
|
-
useAtomicClasses2 as useAtomicClassesSvelte,
|
|
7579
|
-
useChainStyles,
|
|
7580
|
-
useComputedStyles,
|
|
7581
|
-
useComputedStyles3 as useComputedStylesSvelte,
|
|
7582
|
-
useComputedStyles2 as useComputedStylesVue,
|
|
7583
|
-
useDynamicChainStyles,
|
|
7584
7006
|
useSmartStyles,
|
|
7585
|
-
useThemeChainStyles,
|
|
7586
7007
|
validateTheme,
|
|
7587
|
-
withChainStyles,
|
|
7588
7008
|
withSmartStyles
|
|
7589
7009
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chaincss",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.4",
|
|
4
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",
|
package/src/index.ts
CHANGED
|
@@ -153,7 +153,8 @@ export type { BreakpointsMap, ResponsiveStyle } from './compiler/breakpoints.js'
|
|
|
153
153
|
// ============================================================================
|
|
154
154
|
// Runtime Exports (for runtime mode) - unchanged
|
|
155
155
|
// ============================================================================
|
|
156
|
-
|
|
156
|
+
// Runtime available via separate import: "chaincss/runtime"
|
|
157
|
+
// export * from './runtime/index.js';
|
|
157
158
|
|
|
158
159
|
// ============================================================================
|
|
159
160
|
// Version - UPDATE to 3.0.0
|