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 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: (h2, s, l, a = 1) => {
2050
- return `hsla(${h2}, ${s}%, ${l}%, ${a})`;
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((chain3) => {
3458
- let instance = chain3();
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 module2 = await import("postcss");
5006
- postcss = module2.default || module2;
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 module2 = __import__("autoprefixer");
5026
- autoprefixer = module2.default || module2;
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 computed2 = await compute();
5875
- this.set(key, computed2, ttl);
5876
- return computed2;
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
  };
@@ -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 { useAtomicClasses as useAtomicClassesSvelte, cx as cxSvelte, ChainCSSGlobal as ChainCSSGlobalSvelte, createStyledComponent as createStyledSvelteComponent, createStyledComponents as createStyledSvelteComponents, useComputedStyles as useComputedStylesSvelte, provideStyleContext as provideStyleContextSvelte, injectStyleContext as injectStyleContextSvelte, chainStyles } from './svelte.js';
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';
@@ -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
- ChainCSSGlobal3 as ChainCSSGlobalSvelte,
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
- createStyledComponent3 as createStyledSvelteComponent,
3863
- createStyledComponents2 as createStyledSvelteComponents,
3922
+ createStyledSvelteComponent,
3923
+ createStyledSvelteComponents,
3864
3924
  createStyledComponent2 as createStyledVueComponent,
3865
3925
  createStyledComponents as createStyledVueComponents,
3866
3926
  cx,
3867
- cx2 as cxSvelte,
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
- injectStyleContext2 as injectStyleContextSvelte,
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
- provideStyleContext2 as provideStyleContextSvelte,
3945
+ provideStyleContextSvelte,
3886
3946
  registerForHMR,
3887
3947
  runRuntime as run,
3888
3948
  setManifest,
3889
3949
  setupHMR,
3890
3950
  styleInjector,
3891
3951
  useAtomicClasses,
3892
- useAtomicClasses2 as useAtomicClassesSvelte,
3952
+ useAtomicClassesSvelte,
3893
3953
  useChainStyles,
3894
3954
  useComputedStyles,
3895
- useComputedStyles3 as useComputedStylesSvelte,
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",
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
- export * from './runtime/index.js';
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
@@ -37,18 +37,27 @@ export {
37
37
  injectStyleContext
38
38
  } from './vue.js';
39
39
 
40
- // Svelte
41
- export {
42
- useAtomicClasses as useAtomicClassesSvelte,
43
- cx as cxSvelte,
44
- ChainCSSGlobal as ChainCSSGlobalSvelte,
45
- createStyledComponent as createStyledSvelteComponent,
46
- createStyledComponents as createStyledSvelteComponents,
47
- useComputedStyles as useComputedStylesSvelte,
48
- provideStyleContext as provideStyleContextSvelte,
49
- injectStyleContext as injectStyleContextSvelte,
50
- chainStyles
51
- } from './svelte.js';
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';
@@ -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(): {};