chaincss 2.1.3 → 2.1.5
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/dist/runtime/index.d.ts +9 -1
- package/dist/runtime/index.js +99 -39
- package/package.json +1 -1
- package/src/index.ts +2 -1
- package/src/runtime/index.ts +21 -12
- package/dist/runtime/svelte.d.ts +0 -15
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/dist/runtime/index.d.ts
CHANGED
|
@@ -10,7 +10,15 @@ export { useChainStyles, useDynamicChainStyles, useThemeChainStyles, ChainCSSGlo
|
|
|
10
10
|
export { useAtomicClasses, ChainCSSGlobal as ChainCSSGlobalVue, createStyledComponent as createStyledVueComponent, // This is fine - it renames
|
|
11
11
|
createStyledComponents as createStyledVueComponents, useComputedStyles as useComputedStylesVue, // This renames useComputedStyles
|
|
12
12
|
provideStyleContext, injectStyleContext } from './vue.js';
|
|
13
|
-
export
|
|
13
|
+
export declare const useAtomicClassesSvelte: (...args: any[]) => any;
|
|
14
|
+
export declare const cxSvelte: (...args: any[]) => any;
|
|
15
|
+
export declare const ChainCSSGlobalSvelte: (props: any) => any;
|
|
16
|
+
export declare const createStyledSvelteComponent: (...args: any[]) => any;
|
|
17
|
+
export declare const createStyledSvelteComponents: (...args: any[]) => any;
|
|
18
|
+
export declare const useComputedStylesSvelte: (...args: any[]) => any;
|
|
19
|
+
export declare const provideStyleContextSvelte: (...args: any[]) => any;
|
|
20
|
+
export declare const injectStyleContextSvelte: (...args: any[]) => any;
|
|
21
|
+
export declare const chainStyles: (...args: any[]) => any;
|
|
14
22
|
export { setupHMR, registerForHMR } from './hmr.js';
|
|
15
23
|
export { generateStyleId, hashString, kebabCase, isBrowser, isDevelopment, isProduction, debounce, memoize, cn as cnUtils, devWarn, devLog, logError, createDebugger } from './utils.js';
|
|
16
24
|
export type { RuntimeStyleDefinition, UseChainStylesOptions, RuntimeCompiledResult, StyleInjector, UseAtomicClassesReturn, HMRPayload, ChainCSSDebugger } from './types.js';
|
package/dist/runtime/index.js
CHANGED
|
@@ -1,3 +1,71 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __esm = (fn, res) => function __init() {
|
|
6
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
7
|
+
};
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
|
+
|
|
22
|
+
// src/runtime/svelte.ts
|
|
23
|
+
var svelte_exports = {};
|
|
24
|
+
__export(svelte_exports, {
|
|
25
|
+
ChainCSSGlobal: () => ChainCSSGlobal3,
|
|
26
|
+
chainStyles: () => chainStyles,
|
|
27
|
+
createStyledComponent: () => createStyledComponent3,
|
|
28
|
+
createStyledComponents: () => createStyledComponents2,
|
|
29
|
+
cx: () => cx2,
|
|
30
|
+
injectStyleContext: () => injectStyleContext2,
|
|
31
|
+
provideStyleContext: () => provideStyleContext2,
|
|
32
|
+
useAtomicClasses: () => useAtomicClasses2,
|
|
33
|
+
useComputedStyles: () => useComputedStyles3
|
|
34
|
+
});
|
|
35
|
+
function useAtomicClasses2() {
|
|
36
|
+
return { subscribe: () => {
|
|
37
|
+
}, get: () => ({}) };
|
|
38
|
+
}
|
|
39
|
+
function cx2(...args) {
|
|
40
|
+
return args.filter(Boolean).join(" ");
|
|
41
|
+
}
|
|
42
|
+
function ChainCSSGlobal3() {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
function createStyledComponent3() {
|
|
46
|
+
return () => null;
|
|
47
|
+
}
|
|
48
|
+
function createStyledComponents2() {
|
|
49
|
+
return {};
|
|
50
|
+
}
|
|
51
|
+
function useComputedStyles3() {
|
|
52
|
+
return { subscribe: () => {
|
|
53
|
+
}, get: () => "" };
|
|
54
|
+
}
|
|
55
|
+
function provideStyleContext2() {
|
|
56
|
+
}
|
|
57
|
+
function injectStyleContext2() {
|
|
58
|
+
return {};
|
|
59
|
+
}
|
|
60
|
+
function chainStyles() {
|
|
61
|
+
return {};
|
|
62
|
+
}
|
|
63
|
+
var init_svelte = __esm({
|
|
64
|
+
"src/runtime/svelte.ts"() {
|
|
65
|
+
"use strict";
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
|
|
1
69
|
// src/compiler/suggestions.ts
|
|
2
70
|
var KNOWN_SHORTHANDS = [
|
|
3
71
|
// Spacing
|
|
@@ -3639,36 +3707,6 @@ function injectStyleContext() {
|
|
|
3639
3707
|
return inject(CHAIN_CSS_KEY, ref({}));
|
|
3640
3708
|
}
|
|
3641
3709
|
|
|
3642
|
-
// src/runtime/svelte.ts
|
|
3643
|
-
function useAtomicClasses2() {
|
|
3644
|
-
return { subscribe: () => {
|
|
3645
|
-
}, get: () => ({}) };
|
|
3646
|
-
}
|
|
3647
|
-
function cx2(...args) {
|
|
3648
|
-
return args.filter(Boolean).join(" ");
|
|
3649
|
-
}
|
|
3650
|
-
function ChainCSSGlobal3() {
|
|
3651
|
-
return null;
|
|
3652
|
-
}
|
|
3653
|
-
function createStyledComponent3() {
|
|
3654
|
-
return () => null;
|
|
3655
|
-
}
|
|
3656
|
-
function createStyledComponents2() {
|
|
3657
|
-
return {};
|
|
3658
|
-
}
|
|
3659
|
-
function useComputedStyles3() {
|
|
3660
|
-
return { subscribe: () => {
|
|
3661
|
-
}, get: () => "" };
|
|
3662
|
-
}
|
|
3663
|
-
function provideStyleContext2() {
|
|
3664
|
-
}
|
|
3665
|
-
function injectStyleContext2() {
|
|
3666
|
-
return {};
|
|
3667
|
-
}
|
|
3668
|
-
function chainStyles() {
|
|
3669
|
-
return {};
|
|
3670
|
-
}
|
|
3671
|
-
|
|
3672
3710
|
// src/runtime/hmr.ts
|
|
3673
3711
|
function getHMREnvironment() {
|
|
3674
3712
|
if (typeof window === "undefined") return "none";
|
|
@@ -3847,24 +3885,46 @@ function createDebugger(module2) {
|
|
|
3847
3885
|
error: (...args) => logError(`[${module2}]`, ...args)
|
|
3848
3886
|
};
|
|
3849
3887
|
}
|
|
3888
|
+
|
|
3889
|
+
// src/runtime/index.ts
|
|
3890
|
+
var _svelteExports = null;
|
|
3891
|
+
function getSvelteExports() {
|
|
3892
|
+
if (!_svelteExports) {
|
|
3893
|
+
try {
|
|
3894
|
+
_svelteExports = (init_svelte(), __toCommonJS(svelte_exports));
|
|
3895
|
+
} catch (e) {
|
|
3896
|
+
_svelteExports = {};
|
|
3897
|
+
}
|
|
3898
|
+
}
|
|
3899
|
+
return _svelteExports;
|
|
3900
|
+
}
|
|
3901
|
+
var useAtomicClassesSvelte = (...args) => getSvelteExports().useAtomicClasses?.(...args);
|
|
3902
|
+
var cxSvelte = (...args) => getSvelteExports().cx?.(...args);
|
|
3903
|
+
var ChainCSSGlobalSvelte = (props) => getSvelteExports().ChainCSSGlobal?.(props);
|
|
3904
|
+
var createStyledSvelteComponent = (...args) => getSvelteExports().createStyledComponent?.(...args);
|
|
3905
|
+
var createStyledSvelteComponents = (...args) => getSvelteExports().createStyledComponents?.(...args);
|
|
3906
|
+
var useComputedStylesSvelte = (...args) => getSvelteExports().useComputedStyles?.(...args);
|
|
3907
|
+
var provideStyleContextSvelte = (...args) => getSvelteExports().provideStyleContext?.(...args);
|
|
3908
|
+
var injectStyleContextSvelte = (...args) => getSvelteExports().injectStyleContext?.(...args);
|
|
3909
|
+
var chainStyles2 = (...args) => getSvelteExports().chainStyles?.(...args);
|
|
3850
3910
|
export {
|
|
3851
3911
|
$,
|
|
3852
3912
|
$t,
|
|
3853
3913
|
ChainCSSGlobal,
|
|
3854
|
-
|
|
3914
|
+
ChainCSSGlobalSvelte,
|
|
3855
3915
|
ChainCSSGlobal2 as ChainCSSGlobalVue,
|
|
3856
3916
|
chain,
|
|
3857
|
-
chainStyles,
|
|
3917
|
+
chainStyles2 as chainStyles,
|
|
3858
3918
|
cn as cnUtils,
|
|
3859
3919
|
compileRuntime as compile,
|
|
3860
3920
|
createDebugger,
|
|
3861
3921
|
createStyledComponent,
|
|
3862
|
-
|
|
3863
|
-
|
|
3922
|
+
createStyledSvelteComponent,
|
|
3923
|
+
createStyledSvelteComponents,
|
|
3864
3924
|
createStyledComponent2 as createStyledVueComponent,
|
|
3865
3925
|
createStyledComponents as createStyledVueComponents,
|
|
3866
3926
|
cx,
|
|
3867
|
-
|
|
3927
|
+
cxSvelte,
|
|
3868
3928
|
debounce,
|
|
3869
3929
|
devLog,
|
|
3870
3930
|
devWarn,
|
|
@@ -3873,7 +3933,7 @@ export {
|
|
|
3873
3933
|
generateStyleId,
|
|
3874
3934
|
hashString,
|
|
3875
3935
|
injectStyleContext,
|
|
3876
|
-
|
|
3936
|
+
injectStyleContextSvelte,
|
|
3877
3937
|
isBrowser,
|
|
3878
3938
|
isDebugEnabled,
|
|
3879
3939
|
isDevelopment,
|
|
@@ -3882,17 +3942,17 @@ export {
|
|
|
3882
3942
|
logError,
|
|
3883
3943
|
memoize,
|
|
3884
3944
|
provideStyleContext,
|
|
3885
|
-
|
|
3945
|
+
provideStyleContextSvelte,
|
|
3886
3946
|
registerForHMR,
|
|
3887
3947
|
runRuntime as run,
|
|
3888
3948
|
setManifest,
|
|
3889
3949
|
setupHMR,
|
|
3890
3950
|
styleInjector,
|
|
3891
3951
|
useAtomicClasses,
|
|
3892
|
-
|
|
3952
|
+
useAtomicClassesSvelte,
|
|
3893
3953
|
useChainStyles,
|
|
3894
3954
|
useComputedStyles,
|
|
3895
|
-
|
|
3955
|
+
useComputedStylesSvelte,
|
|
3896
3956
|
useComputedStyles2 as useComputedStylesVue,
|
|
3897
3957
|
useDynamicChainStyles,
|
|
3898
3958
|
useThemeChainStyles,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chaincss",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
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
|
package/src/runtime/index.ts
CHANGED
|
@@ -37,18 +37,27 @@ export {
|
|
|
37
37
|
injectStyleContext
|
|
38
38
|
} from './vue.js';
|
|
39
39
|
|
|
40
|
-
// Svelte
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
40
|
+
// Svelte — loaded lazily
|
|
41
|
+
let _svelteExports: any = null;
|
|
42
|
+
function getSvelteExports() {
|
|
43
|
+
if (!_svelteExports) {
|
|
44
|
+
try {
|
|
45
|
+
_svelteExports = require('./svelte.js');
|
|
46
|
+
} catch(e) {
|
|
47
|
+
_svelteExports = {};
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return _svelteExports;
|
|
51
|
+
}
|
|
52
|
+
export const useAtomicClassesSvelte = (...args: any[]) => getSvelteExports().useAtomicClasses?.(...args);
|
|
53
|
+
export const cxSvelte = (...args: any[]) => getSvelteExports().cx?.(...args);
|
|
54
|
+
export const ChainCSSGlobalSvelte = (props: any) => getSvelteExports().ChainCSSGlobal?.(props);
|
|
55
|
+
export const createStyledSvelteComponent = (...args: any[]) => getSvelteExports().createStyledComponent?.(...args);
|
|
56
|
+
export const createStyledSvelteComponents = (...args: any[]) => getSvelteExports().createStyledComponents?.(...args);
|
|
57
|
+
export const useComputedStylesSvelte = (...args: any[]) => getSvelteExports().useComputedStyles?.(...args);
|
|
58
|
+
export const provideStyleContextSvelte = (...args: any[]) => getSvelteExports().provideStyleContext?.(...args);
|
|
59
|
+
export const injectStyleContextSvelte = (...args: any[]) => getSvelteExports().injectStyleContext?.(...args);
|
|
60
|
+
export const chainStyles = (...args: any[]) => getSvelteExports().chainStyles?.(...args);
|
|
52
61
|
|
|
53
62
|
// HMR
|
|
54
63
|
export { setupHMR, registerForHMR } from './hmr.js';
|
package/dist/runtime/svelte.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
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(): {};
|