@antdv-next/cssinjs 0.0.2 → 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +0 -141
  3. package/dist/Cache.d.ts +22 -0
  4. package/dist/Cache.js +45 -0
  5. package/dist/Keyframes.d.ts +12 -0
  6. package/dist/Keyframes.js +17 -0
  7. package/dist/StyleContext.d.ts +118 -0
  8. package/dist/StyleContext.js +64 -0
  9. package/dist/cssinjs-utils/_util/hooks/useUniqueMemo.js +62 -0
  10. package/dist/cssinjs-utils/hooks/useCSP.d.ts +8 -0
  11. package/dist/cssinjs-utils/hooks/useCSP.js +8 -0
  12. package/dist/cssinjs-utils/hooks/usePrefix.d.ts +9 -0
  13. package/dist/cssinjs-utils/hooks/useToken.d.ts +25 -0
  14. package/dist/cssinjs-utils/index.d.ts +4 -0
  15. package/dist/cssinjs-utils/index.js +4 -0
  16. package/dist/cssinjs-utils/interface/components.d.ts +12 -0
  17. package/dist/cssinjs-utils/util/genStyleUtils.d.ts +127 -0
  18. package/dist/cssinjs-utils/util/genStyleUtils.js +188 -0
  19. package/dist/cssinjs-utils/util/getCompVarPrefix.js +8 -0
  20. package/dist/cssinjs-utils/util/getComponentToken.js +22 -0
  21. package/dist/cssinjs-utils/util/getDefaultComponentToken.js +11 -0
  22. package/dist/cssinjs-utils/util/maxmin.js +17 -0
  23. package/dist/cssinjs-utils/util/statistic.d.ts +15 -0
  24. package/dist/cssinjs-utils/util/statistic.js +52 -0
  25. package/dist/extractStyle.d.ts +18 -0
  26. package/dist/extractStyle.js +54 -0
  27. package/dist/hooks/useCSSVarRegister.d.ts +19 -0
  28. package/dist/hooks/useCSSVarRegister.js +74 -0
  29. package/dist/hooks/useCacheToken.d.ts +60 -0
  30. package/dist/hooks/useCacheToken.js +120 -0
  31. package/dist/hooks/useGlobalCache.d.ts +9 -0
  32. package/dist/hooks/useGlobalCache.js +70 -0
  33. package/dist/hooks/useStyleRegister.d.ts +47 -0
  34. package/dist/hooks/useStyleRegister.js +237 -0
  35. package/dist/index.d.ts +34 -0
  36. package/dist/index.js +29 -0
  37. package/dist/linters/NaNLinter.d.ts +6 -0
  38. package/dist/linters/NaNLinter.js +10 -0
  39. package/dist/linters/contentQuotesLinter.js +18 -0
  40. package/dist/linters/hashedAnimationLinter.js +12 -0
  41. package/dist/linters/index.d.ts +5 -0
  42. package/dist/linters/index.js +8 -0
  43. package/dist/linters/interface.d.ts +11 -0
  44. package/dist/linters/legacyNotSelectorLinter.d.ts +6 -0
  45. package/dist/linters/legacyNotSelectorLinter.js +20 -0
  46. package/dist/linters/logicalPropertiesLinter.d.ts +6 -0
  47. package/dist/linters/logicalPropertiesLinter.js +57 -0
  48. package/dist/linters/parentSelectorLinter.d.ts +7 -0
  49. package/dist/linters/parentSelectorLinter.js +12 -0
  50. package/dist/linters/utils.js +10 -0
  51. package/dist/theme/Theme.d.ts +16 -0
  52. package/dist/theme/Theme.js +24 -0
  53. package/dist/theme/ThemeCache.js +79 -0
  54. package/dist/theme/calc/CSSCalculator.d.ts +19 -0
  55. package/dist/theme/calc/CSSCalculator.js +63 -0
  56. package/dist/theme/calc/NumCalculator.d.ts +14 -0
  57. package/dist/theme/calc/NumCalculator.js +37 -0
  58. package/dist/theme/calc/calculator.d.ts +32 -0
  59. package/dist/theme/calc/calculator.js +6 -0
  60. package/dist/theme/calc/index.d.ts +8 -0
  61. package/dist/theme/calc/index.js +12 -0
  62. package/dist/theme/createTheme.d.ts +11 -0
  63. package/dist/theme/createTheme.js +16 -0
  64. package/dist/theme/index.js +6 -0
  65. package/dist/theme/interface.d.ts +5 -0
  66. package/dist/transformers/autoPrefix.d.ts +6 -0
  67. package/dist/transformers/autoPrefix.js +7 -0
  68. package/dist/transformers/interface.d.ts +9 -0
  69. package/dist/transformers/legacyLogicalProperties.d.ts +16 -0
  70. package/dist/transformers/legacyLogicalProperties.js +123 -0
  71. package/dist/transformers/px2rem.d.ts +23 -0
  72. package/dist/transformers/px2rem.js +37 -0
  73. package/dist/util/cacheMapUtil.js +60 -0
  74. package/dist/util/css-variables.d.ts +7 -0
  75. package/dist/util/css-variables.js +35 -0
  76. package/dist/util/index.d.ts +8 -0
  77. package/dist/util/index.js +108 -0
  78. package/package.json +33 -63
  79. package/dist/cssinjs.umd.js +0 -3
  80. package/es/Cache.js +0 -33
  81. package/es/Keyframes.js +0 -14
  82. package/es/StyleContext.js +0 -100
  83. package/es/extractStyle.js +0 -43
  84. package/es/hooks/useCSSVarRegister.js +0 -59
  85. package/es/hooks/useCacheToken.js +0 -106
  86. package/es/hooks/useEffectCleanupRegister.js +0 -8
  87. package/es/hooks/useGlobalCache.js +0 -41
  88. package/es/hooks/useHMR.js +0 -20
  89. package/es/hooks/useStyleRegister.js +0 -216
  90. package/es/index.js +0 -44
  91. package/es/linters/NaNLinter.js +0 -7
  92. package/es/linters/contentQuotesLinter.js +0 -13
  93. package/es/linters/hashedAnimationLinter.js +0 -10
  94. package/es/linters/legacyNotSelectorLinter.js +0 -14
  95. package/es/linters/logicalPropertiesLinter.js +0 -61
  96. package/es/linters/parentSelectorLinter.js +0 -7
  97. package/es/linters/utils.js +0 -11
  98. package/es/theme/Theme.js +0 -21
  99. package/es/theme/ThemeCache.js +0 -74
  100. package/es/theme/calc/CSSCalculator.js +0 -40
  101. package/es/theme/calc/NumCalculator.js +0 -25
  102. package/es/theme/calc/calculator.js +0 -5
  103. package/es/theme/calc/index.js +0 -9
  104. package/es/theme/createTheme.js +0 -10
  105. package/es/transformers/legacyLogicalProperties.js +0 -108
  106. package/es/transformers/px2rem.js +0 -32
  107. package/es/util/cacheMapUtil.js +0 -48
  108. package/es/util/css-variables.js +0 -22
  109. package/es/util/index.js +0 -85
  110. package/lib/Cache.js +0 -1
  111. package/lib/Keyframes.js +0 -1
  112. package/lib/StyleContext.js +0 -1
  113. package/lib/extractStyle.js +0 -1
  114. package/lib/hooks/useCSSVarRegister.js +0 -1
  115. package/lib/hooks/useCacheToken.js +0 -1
  116. package/lib/hooks/useEffectCleanupRegister.js +0 -1
  117. package/lib/hooks/useGlobalCache.js +0 -1
  118. package/lib/hooks/useHMR.js +0 -1
  119. package/lib/hooks/useStyleRegister.js +0 -3
  120. package/lib/index.js +0 -1
  121. package/lib/linters/NaNLinter.js +0 -1
  122. package/lib/linters/contentQuotesLinter.js +0 -1
  123. package/lib/linters/hashedAnimationLinter.js +0 -1
  124. package/lib/linters/legacyNotSelectorLinter.js +0 -1
  125. package/lib/linters/logicalPropertiesLinter.js +0 -1
  126. package/lib/linters/parentSelectorLinter.js +0 -1
  127. package/lib/linters/utils.js +0 -1
  128. package/lib/theme/Theme.js +0 -1
  129. package/lib/theme/ThemeCache.js +0 -1
  130. package/lib/theme/calc/CSSCalculator.js +0 -1
  131. package/lib/theme/calc/NumCalculator.js +0 -1
  132. package/lib/theme/calc/calculator.js +0 -1
  133. package/lib/theme/calc/index.js +0 -1
  134. package/lib/theme/createTheme.js +0 -1
  135. package/lib/transformers/legacyLogicalProperties.js +0 -1
  136. package/lib/transformers/px2rem.js +0 -1
  137. package/lib/util/cacheMapUtil.js +0 -1
  138. package/lib/util/css-variables.js +0 -1
  139. package/lib/util/index.js +0 -1
@@ -0,0 +1,120 @@
1
+ import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleContext } from "../StyleContext.js";
2
+ import { transformToken } from "../util/css-variables.js";
3
+ import { flattenToken, memoResult, toStyleStr, token2key } from "../util/index.js";
4
+ import { useGlobalCache } from "./useGlobalCache.js";
5
+ import hash from "@emotion/hash";
6
+ import { updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
7
+ import { computed } from "vue";
8
+
9
+ //#region src/hooks/useCacheToken.ts
10
+ const EMPTY_OVERRIDE = {};
11
+ const hashPrefix = process.env.NODE_ENV !== "production" ? "css-dev-only-do-not-override" : "css";
12
+ const tokenKeys = /* @__PURE__ */ new Map();
13
+ function recordCleanToken(tokenKey) {
14
+ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
15
+ }
16
+ function removeStyleTags(key, instanceId) {
17
+ if (typeof document !== "undefined") document.querySelectorAll(`style[${ATTR_TOKEN}="${key}"]`).forEach((style) => {
18
+ if (style[CSS_IN_JS_INSTANCE] === instanceId) style.parentNode?.removeChild(style);
19
+ });
20
+ }
21
+ const TOKEN_THRESHOLD = -1;
22
+ function cleanTokenStyle(tokenKey, instanceId) {
23
+ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
24
+ const cleanableKeyList = /* @__PURE__ */ new Set();
25
+ tokenKeys.forEach((value, key) => {
26
+ if (value <= 0) cleanableKeyList.add(key);
27
+ });
28
+ if (tokenKeys.size - cleanableKeyList.size > TOKEN_THRESHOLD) cleanableKeyList.forEach((key) => {
29
+ removeStyleTags(key, instanceId);
30
+ tokenKeys.delete(key);
31
+ });
32
+ }
33
+ function getComputedToken(originToken, overrideToken, theme, format) {
34
+ let mergedDerivativeToken = {
35
+ ...theme.getDerivativeToken(originToken),
36
+ ...overrideToken
37
+ };
38
+ if (format) mergedDerivativeToken = format(mergedDerivativeToken);
39
+ return mergedDerivativeToken;
40
+ }
41
+ const TOKEN_PREFIX = "token";
42
+ /**
43
+ * Cache theme derivative token as global shared one
44
+ * @param theme Theme entity
45
+ * @param tokens List of tokens, used for cache. Please do not dynamic generate object directly
46
+ * @param option Additional config
47
+ * @returns Call Theme.getDerivativeToken(tokenObject) to get token
48
+ */
49
+ function useCacheToken(theme, tokens, option) {
50
+ const styleContext = useStyleContext();
51
+ const salt = computed(() => option.value.salt ?? "");
52
+ const override = computed(() => option.value.override ? option.value.override : EMPTY_OVERRIDE);
53
+ const formatToken = computed(() => option.value.formatToken);
54
+ const compute = computed(() => option.value.getComputedToken);
55
+ const cssVar = computed(() => option.value.cssVar);
56
+ const resolvedTokens = computed(() => tokens.value.map((token) => typeof token === "function" ? token() : token));
57
+ const mergedToken = computed(() => memoResult(() => Object.assign({}, ...resolvedTokens.value), resolvedTokens.value));
58
+ const tokenStr = computed(() => flattenToken(mergedToken.value));
59
+ const overrideTokenStr = computed(() => flattenToken(override.value));
60
+ const cssVarStr = computed(() => cssVar.value ? flattenToken(cssVar.value) : "");
61
+ return useGlobalCache(computed(() => TOKEN_PREFIX), computed(() => [
62
+ salt.value,
63
+ theme.value.id,
64
+ tokenStr.value,
65
+ overrideTokenStr.value,
66
+ cssVarStr.value
67
+ ]), () => {
68
+ const mergedDerivativeToken = compute.value ? compute.value(mergedToken.value, override.value, theme.value) : getComputedToken(mergedToken.value, override.value, theme.value, formatToken.value);
69
+ const actualToken = { ...mergedDerivativeToken };
70
+ const mergedSalt = `${salt.value}_${cssVar.value?.prefix || ""}`;
71
+ const hashId = hash(mergedSalt);
72
+ const hashCls = `${hashPrefix}-${hash(mergedSalt)}`;
73
+ actualToken._tokenKey = token2key(actualToken, mergedSalt);
74
+ const [tokenWithCssVar, cssVarsStr] = transformToken(mergedDerivativeToken, cssVar.value.key, {
75
+ prefix: cssVar.value.prefix,
76
+ ignore: cssVar.value.ignore,
77
+ unitless: cssVar.value.unitless,
78
+ preserve: cssVar.value.preserve
79
+ });
80
+ tokenWithCssVar._hashId = hashId;
81
+ recordCleanToken(cssVar.value.key);
82
+ return [
83
+ tokenWithCssVar,
84
+ hashCls,
85
+ actualToken,
86
+ cssVarsStr,
87
+ cssVar.value.key
88
+ ];
89
+ }, ([, , , , themeKey]) => {
90
+ cleanTokenStyle(themeKey, styleContext.value.cache.instanceId);
91
+ }, ([, , , cssVarsStr, themeKey]) => {
92
+ if (!cssVarsStr) return;
93
+ const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), {
94
+ mark: ATTR_MARK,
95
+ prepend: "queue",
96
+ attachTo: styleContext.value.container,
97
+ priority: -999
98
+ });
99
+ style[CSS_IN_JS_INSTANCE] = styleContext.value.cache.instanceId;
100
+ style.setAttribute(ATTR_TOKEN, themeKey);
101
+ });
102
+ }
103
+ const extract = (cache, _effectStyles, options) => {
104
+ const [, , realToken, styleStr, cssVarKey] = cache;
105
+ const { plain } = options || {};
106
+ if (!styleStr) return null;
107
+ const styleId = realToken._tokenKey;
108
+ const order = -999;
109
+ return [
110
+ order,
111
+ styleId,
112
+ toStyleStr(styleStr, cssVarKey, styleId, {
113
+ "data-rc-order": "prependQueue",
114
+ "data-rc-priority": `${order}`
115
+ }, plain)
116
+ ];
117
+ };
118
+
119
+ //#endregion
120
+ export { TOKEN_PREFIX, useCacheToken as default, extract, getComputedToken };
@@ -0,0 +1,9 @@
1
+ import { Ref } from "vue";
2
+
3
+ //#region src/hooks/useGlobalCache.d.ts
4
+ type ExtractStyle<CacheValue> = (cache: CacheValue, effectStyles: Record<string, boolean>, options?: {
5
+ plain?: boolean;
6
+ autoPrefix?: boolean;
7
+ }) => [order: number, styleId: string, style: string] | null;
8
+ //#endregion
9
+ export { ExtractStyle };
@@ -0,0 +1,70 @@
1
+ import { pathKey } from "../Cache.js";
2
+ import { useStyleContext } from "../StyleContext.js";
3
+ import { computed, nextTick, watch, watchEffect } from "vue";
4
+
5
+ //#region src/hooks/useGlobalCache.ts
6
+ const isDev = process.env.NODE_ENV !== "production";
7
+ const effectMap = /* @__PURE__ */ new Map();
8
+ /**
9
+ * Global cache for CSS-in-JS styles
10
+ *
11
+ * This hook manages a reference-counted cache to ensure styles are properly
12
+ * created, shared, and cleaned up across component instances.
13
+ *
14
+ * Key differences from React version:
15
+ * - No useInsertionEffect needed - Vue's watchEffect handles timing naturally
16
+ * - No StrictMode double-mounting issues - Vue doesn't double-mount
17
+ * - HMR handling is simpler - can rely on Vue's reactivity system
18
+ * - No need for cleanup register pattern - onBeforeUnmount is sufficient
19
+ */
20
+ function useGlobalCache(prefix, keyPath, cacheFn, onCacheRemove, onCacheEffect) {
21
+ const styleContext = useStyleContext();
22
+ const fullPath = computed(() => [prefix.value, ...keyPath.value]);
23
+ const fullPathStr = computed(() => pathKey(fullPath.value));
24
+ const buildCache = (updater) => {
25
+ styleContext.value.cache.opUpdate(fullPathStr.value, (prevCache) => {
26
+ const [times = 0, cache] = prevCache || [void 0, void 0];
27
+ const data = [times, cache || cacheFn()];
28
+ return updater ? updater(data) : data;
29
+ });
30
+ };
31
+ const getCacheEntity = () => styleContext.value.cache.opGet(fullPathStr.value);
32
+ const cacheContent = computed(() => {
33
+ let entity = styleContext.value.cache.opGet(fullPathStr.value);
34
+ if (isDev && !entity) {
35
+ buildCache();
36
+ entity = getCacheEntity();
37
+ }
38
+ return entity[1];
39
+ });
40
+ watch(fullPathStr, async (_, _1, onCleanup) => {
41
+ await nextTick();
42
+ buildCache(([times, cache]) => [times + 1, cache]);
43
+ if (!effectMap.has(fullPathStr.value)) {
44
+ onCacheEffect?.(cacheContent.value);
45
+ effectMap.set(fullPathStr.value, true);
46
+ Promise.resolve().then(() => {
47
+ effectMap.delete(fullPathStr.value);
48
+ });
49
+ }
50
+ const globalCache = styleContext.value.cache;
51
+ onCleanup(() => {
52
+ globalCache.opUpdate(fullPathStr.value, (prevCache) => {
53
+ const [times = 0, cache] = prevCache || [];
54
+ if (times - 1 === 0) {
55
+ onCacheRemove?.(cache, false);
56
+ effectMap.delete(fullPathStr.value);
57
+ return null;
58
+ }
59
+ return [times - 1, cache];
60
+ });
61
+ });
62
+ }, { immediate: true });
63
+ if (onCacheEffect) watchEffect(() => {
64
+ onCacheEffect(cacheContent.value);
65
+ });
66
+ return cacheContent;
67
+ }
68
+
69
+ //#endregion
70
+ export { useGlobalCache };
@@ -0,0 +1,47 @@
1
+ import { Theme } from "../theme/Theme.js";
2
+ import { Keyframe } from "../Keyframes.js";
3
+ import "../linters/index.js";
4
+ import "../StyleContext.js";
5
+ import "../transformers/interface.js";
6
+ import "./useGlobalCache.js";
7
+ import { Ref } from "vue";
8
+ import * as CSS from "csstype";
9
+
10
+ //#region src/hooks/useStyleRegister.d.ts
11
+ declare const SKIP_CHECK = "_skip_check_";
12
+ declare const MULTI_VALUE = "_multi_value_";
13
+ interface LayerConfig {
14
+ name: string;
15
+ dependencies?: string[];
16
+ }
17
+ type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
18
+ animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframe;
19
+ };
20
+ type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | readonly Extract<CSSProperties[K], string>[] | {
21
+ [SKIP_CHECK]?: boolean;
22
+ [MULTI_VALUE]?: boolean;
23
+ value: CSSProperties[K] | CSSProperties[K][];
24
+ } };
25
+ type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
26
+ type ArrayCSSInterpolation = readonly CSSInterpolation[];
27
+ type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject;
28
+ type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframe;
29
+ type CSSOthersObject = Record<string, CSSInterpolation>;
30
+ interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
31
+ declare function useStyleRegister(info: Ref<{
32
+ theme: Theme<any, any>;
33
+ token: any;
34
+ path: string[];
35
+ hashId?: string;
36
+ layer?: LayerConfig;
37
+ nonce?: string | (() => string);
38
+ clientOnly?: boolean;
39
+ /**
40
+ * Tell cssinjs the insert order of style.
41
+ * It's useful when you need to insert style
42
+ * before other style to overwrite for the same selector priority.
43
+ */
44
+ order?: number;
45
+ }>, styleFn: () => CSSInterpolation): void;
46
+ //#endregion
47
+ export { CSSInterpolation, CSSObject, useStyleRegister };
@@ -0,0 +1,237 @@
1
+ import { ATTR_CACHE_PATH, ATTR_MARK, CSS_IN_JS_INSTANCE, useStyleContext } from "../StyleContext.js";
2
+ import { isClientSide, toStyleStr } from "../util/index.js";
3
+ import { useGlobalCache } from "./useGlobalCache.js";
4
+ import contentQuotesLinter_default from "../linters/contentQuotesLinter.js";
5
+ import hashedAnimationLinter_default from "../linters/hashedAnimationLinter.js";
6
+ import "../linters/index.js";
7
+ import { CSS_FILE_STYLE, existPath, getStyleAndHash } from "../util/cacheMapUtil.js";
8
+ import hash from "@emotion/hash";
9
+ import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
10
+ import { computed } from "vue";
11
+ import unitless from "@emotion/unitless";
12
+ import { compile, middleware, prefixer, serialize, stringify } from "stylis";
13
+
14
+ //#region src/hooks/useStyleRegister.ts
15
+ const isDev = process.env.NODE_ENV !== "production";
16
+ const SKIP_CHECK = "_skip_check_";
17
+ const MULTI_VALUE = "_multi_value_";
18
+ function normalizeStyle(styleStr, autoPrefix) {
19
+ return (autoPrefix ? serialize(compile(styleStr), middleware([prefixer, stringify])) : serialize(compile(styleStr), stringify)).replace(/\{%%%:[^;];\}/g, ";");
20
+ }
21
+ function isCompoundCSSProperty(value) {
22
+ return typeof value === "object" && value && (SKIP_CHECK in value || MULTI_VALUE in value);
23
+ }
24
+ function injectSelectorHash(key, hashId, hashPriority) {
25
+ if (!hashId) return key;
26
+ const hashClassName = `.${hashId}`;
27
+ const hashSelector = hashPriority === "low" ? `:where(${hashClassName})` : hashClassName;
28
+ return key.split(",").map((k) => {
29
+ const fullPath = k.trim().split(/\s+/);
30
+ let firstPath = fullPath[0] || "";
31
+ const htmlElement = firstPath.match(/^\w+/)?.[0] || "";
32
+ firstPath = `${htmlElement}${hashSelector}${firstPath.slice(htmlElement.length)}`;
33
+ return [firstPath, ...fullPath.slice(1)].join(" ");
34
+ }).join(",");
35
+ }
36
+ function parseStyle(interpolation, config = {}, { root, injectHash, parentSelectors } = {
37
+ root: true,
38
+ parentSelectors: []
39
+ }) {
40
+ const { hashId, layer, path, hashPriority, transformers = [], linters = [] } = config;
41
+ let styleStr = "";
42
+ let effectStyle = {};
43
+ function parseKeyframes(keyframes) {
44
+ const animationName = keyframes.getName(hashId);
45
+ if (!effectStyle[animationName]) {
46
+ const [parsedStr] = parseStyle(keyframes.style, config, {
47
+ root: false,
48
+ parentSelectors
49
+ });
50
+ effectStyle[animationName] = `@keyframes ${keyframes.getName(hashId)}${parsedStr}`;
51
+ }
52
+ }
53
+ function flattenList(list, fullList = []) {
54
+ list.forEach((item) => {
55
+ if (Array.isArray(item)) flattenList(item, fullList);
56
+ else if (item) fullList.push(item);
57
+ });
58
+ return fullList;
59
+ }
60
+ flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]).forEach((originStyle) => {
61
+ const style = typeof originStyle === "string" && !root ? {} : originStyle;
62
+ if (typeof style === "string") styleStr += `${style}\n`;
63
+ else if (style._keyframe) parseKeyframes(style);
64
+ else {
65
+ const mergedStyle = transformers.reduce((prev, trans) => trans?.visit?.(prev) || prev, style);
66
+ Object.keys(mergedStyle).forEach((key) => {
67
+ const value = mergedStyle[key];
68
+ if (typeof value === "object" && value && (key !== "animationName" || !value._keyframe) && !isCompoundCSSProperty(value)) {
69
+ let subInjectHash = false;
70
+ let mergedKey = key.trim();
71
+ let nextRoot = false;
72
+ if ((root || injectHash) && hashId) if (mergedKey.startsWith("@")) subInjectHash = true;
73
+ else if (mergedKey === "&") mergedKey = injectSelectorHash("", hashId, hashPriority);
74
+ else mergedKey = injectSelectorHash(key, hashId, hashPriority);
75
+ else if (root && !hashId && (mergedKey === "&" || mergedKey === "")) {
76
+ mergedKey = "";
77
+ nextRoot = true;
78
+ }
79
+ const [parsedStr, childEffectStyle] = parseStyle(value, config, {
80
+ root: nextRoot,
81
+ injectHash: subInjectHash,
82
+ parentSelectors: [...parentSelectors, mergedKey]
83
+ });
84
+ effectStyle = {
85
+ ...effectStyle,
86
+ ...childEffectStyle
87
+ };
88
+ styleStr += `${mergedKey}${parsedStr}`;
89
+ } else {
90
+ function appendStyle(cssKey, cssValue) {
91
+ if (process.env.NODE_ENV !== "production" && (typeof value !== "object" || !value?.[SKIP_CHECK])) [
92
+ contentQuotesLinter_default,
93
+ hashedAnimationLinter_default,
94
+ ...linters
95
+ ].forEach((linter) => linter(cssKey, cssValue, {
96
+ path,
97
+ hashId,
98
+ parentSelectors
99
+ }));
100
+ const styleName = cssKey.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
101
+ let formatValue = cssValue;
102
+ if (!unitless[cssKey] && typeof formatValue === "number" && formatValue !== 0) formatValue = `${formatValue}px`;
103
+ if (cssKey === "animationName" && cssValue?._keyframe) {
104
+ parseKeyframes(cssValue);
105
+ formatValue = cssValue.getName(hashId);
106
+ }
107
+ styleStr += `${styleName}:${formatValue};`;
108
+ }
109
+ const actualValue = value?.value ?? value;
110
+ if (typeof value === "object" && value?.[MULTI_VALUE] && Array.isArray(actualValue)) actualValue.forEach((item) => {
111
+ appendStyle(key, item);
112
+ });
113
+ else appendStyle(key, actualValue);
114
+ }
115
+ });
116
+ }
117
+ });
118
+ if (!root) styleStr = `{${styleStr}}`;
119
+ else if (layer) {
120
+ if (styleStr) styleStr = `@layer ${layer.name} {${styleStr}}`;
121
+ if (layer.dependencies) effectStyle[`@layer ${layer.name}`] = layer.dependencies.map((deps) => `@layer ${deps}, ${layer.name};`).join("\n");
122
+ }
123
+ return [styleStr, effectStyle];
124
+ }
125
+ function uniqueHash(path, styleStr) {
126
+ return hash(`${path.join("%")}${styleStr}`);
127
+ }
128
+ const STYLE_PREFIX = "style";
129
+ function useStyleRegister(info, styleFn) {
130
+ const styleContext = useStyleContext();
131
+ const enableLayer = computed(() => !!styleContext.value.layer);
132
+ const order = computed(() => info.value.order ?? 0);
133
+ const hashId = computed(() => info.value.hashId);
134
+ const fullPath = computed(() => {
135
+ const path = [hashId.value || ""];
136
+ if (enableLayer.value) path.push("layer");
137
+ path.push(...info.value.path);
138
+ return path;
139
+ });
140
+ const isMergedClientSide = computed(() => {
141
+ let merged = isClientSide;
142
+ if (isDev && styleContext.value.mock !== void 0) merged = styleContext.value.mock === "client";
143
+ return merged;
144
+ });
145
+ useGlobalCache(computed(() => STYLE_PREFIX), fullPath, () => {
146
+ const cachePath = fullPath.value.join("|");
147
+ const context = styleContext.value;
148
+ const infoValue = info.value;
149
+ if (existPath(cachePath)) {
150
+ const [inlineCacheStyleStr, styleHash] = getStyleAndHash(cachePath);
151
+ if (inlineCacheStyleStr) return [
152
+ inlineCacheStyleStr,
153
+ styleHash,
154
+ {},
155
+ infoValue.clientOnly,
156
+ order.value
157
+ ];
158
+ }
159
+ const [parsedStyle, effectStyle] = parseStyle(styleFn(), {
160
+ hashId: infoValue.hashId,
161
+ hashPriority: context.hashPriority,
162
+ layer: enableLayer.value ? infoValue.layer : void 0,
163
+ path: infoValue.path.join("-"),
164
+ transformers: context.transformers || [],
165
+ linters: context.linters || []
166
+ });
167
+ const styleStr = normalizeStyle(parsedStyle, styleContext.value.autoPrefix || false);
168
+ return [
169
+ styleStr,
170
+ uniqueHash(fullPath.value, styleStr),
171
+ effectStyle,
172
+ infoValue.clientOnly,
173
+ order.value
174
+ ];
175
+ }, (cacheValue, fromHMR) => {
176
+ const [, styleId] = cacheValue;
177
+ if (fromHMR && isClientSide) removeCSS(styleId, { mark: ATTR_MARK });
178
+ }, (cacheValue) => {
179
+ const [styleStr, styleId, effectStyle, , priority] = cacheValue;
180
+ if (!isMergedClientSide.value || styleStr === CSS_FILE_STYLE) return;
181
+ const { layer: enableLayer$1, container, autoPrefix, cache } = styleContext.value;
182
+ const { nonce } = info.value;
183
+ const mergedCSSConfig = {
184
+ mark: ATTR_MARK,
185
+ prepend: enableLayer$1 ? false : "queue",
186
+ attachTo: container,
187
+ priority
188
+ };
189
+ const nonceStr = typeof nonce === "function" ? nonce() : nonce;
190
+ if (nonceStr) mergedCSSConfig.csp = { nonce: nonceStr };
191
+ const effectLayerKeys = [];
192
+ const effectRestKeys = [];
193
+ Object.keys(effectStyle).forEach((key) => {
194
+ if (key.startsWith("@layer")) effectLayerKeys.push(key);
195
+ else effectRestKeys.push(key);
196
+ });
197
+ effectLayerKeys.forEach((effectKey) => {
198
+ updateCSS(normalizeStyle(effectStyle[effectKey], autoPrefix || false), `_layer-${effectKey}`, {
199
+ ...mergedCSSConfig,
200
+ prepend: true
201
+ });
202
+ });
203
+ const style = updateCSS(styleStr, styleId, mergedCSSConfig);
204
+ style[CSS_IN_JS_INSTANCE] = cache.instanceId;
205
+ if (isDev) style.setAttribute(ATTR_CACHE_PATH, fullPath.value.join("|"));
206
+ effectRestKeys.forEach((effectKey) => {
207
+ updateCSS(normalizeStyle(effectStyle[effectKey], autoPrefix || false), `_effect-${effectKey}`, mergedCSSConfig);
208
+ });
209
+ });
210
+ }
211
+ const extract = (cache, effectStyles, options) => {
212
+ const [styleStr, styleId, effectStyle, clientOnly, order] = cache;
213
+ const { plain, autoPrefix } = options || {};
214
+ if (clientOnly) return null;
215
+ let keyStyleText = styleStr;
216
+ const sharedAttrs = {
217
+ "data-rc-order": "prependQueue",
218
+ "data-rc-priority": `${order}`
219
+ };
220
+ keyStyleText = toStyleStr(styleStr, void 0, styleId, sharedAttrs, plain);
221
+ if (effectStyle) Object.keys(effectStyle).forEach((effectKey) => {
222
+ if (!effectStyles[effectKey]) {
223
+ effectStyles[effectKey] = true;
224
+ const effectStyleHTML = toStyleStr(normalizeStyle(effectStyle[effectKey], autoPrefix || false), void 0, `_effect-${effectKey}`, sharedAttrs, plain);
225
+ if (effectKey.startsWith("@layer")) keyStyleText = effectStyleHTML + keyStyleText;
226
+ else keyStyleText += effectStyleHTML;
227
+ }
228
+ });
229
+ return [
230
+ order,
231
+ styleId,
232
+ keyStyleText
233
+ ];
234
+ };
235
+
236
+ //#endregion
237
+ export { STYLE_PREFIX, useStyleRegister as default, extract, uniqueHash };
@@ -0,0 +1,34 @@
1
+ import { AbstractCalculator } from "./theme/calc/calculator.js";
2
+ import { genCalc } from "./theme/calc/index.js";
3
+ import { DerivativeFunc, TokenType } from "./theme/interface.js";
4
+ import { Theme } from "./theme/Theme.js";
5
+ import { createTheme } from "./theme/createTheme.js";
6
+ import { ComponentToken, ComponentTokenKey, GlobalToken, GlobalTokenWithComponent, OverrideTokenMap, TokenMap, TokenMapKey } from "./cssinjs-utils/interface/components.js";
7
+ import { Keyframe } from "./Keyframes.js";
8
+ import { Linter } from "./linters/interface.js";
9
+ import { linter as linter$1 } from "./linters/legacyNotSelectorLinter.js";
10
+ import { linter as linter$2 } from "./linters/logicalPropertiesLinter.js";
11
+ import { linter } from "./linters/NaNLinter.js";
12
+ import { linter as linter$3 } from "./linters/parentSelectorLinter.js";
13
+ import "./linters/index.js";
14
+ import { StyleProvider, StyleProviderProps, createCache, useStyleContext, useStyleContextProvide } from "./StyleContext.js";
15
+ import { Transformer } from "./transformers/interface.js";
16
+ import { CSSInterpolation, CSSObject, useStyleRegister } from "./hooks/useStyleRegister.js";
17
+ import { token2CSSVar } from "./util/css-variables.js";
18
+ import { useCSSVarRegister } from "./hooks/useCSSVarRegister.js";
19
+ import { extractStyle } from "./extractStyle.js";
20
+ import { getComputedToken, useCacheToken } from "./hooks/useCacheToken.js";
21
+ import { transform } from "./transformers/autoPrefix.js";
22
+ import { transform as transform$1 } from "./transformers/legacyLogicalProperties.js";
23
+ import { transform as transform$2 } from "./transformers/px2rem.js";
24
+ import { unit } from "./util/index.js";
25
+ import { CSSUtil, CSSVarRegisterProps, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, StyleInfo, SubStyleComponentProps, TokenWithCommonCls, genStyleUtils } from "./cssinjs-utils/util/genStyleUtils.js";
26
+ import { merge, statistic, statisticToken } from "./cssinjs-utils/util/statistic.js";
27
+ import "./cssinjs-utils/index.js";
28
+
29
+ //#region src/index.d.ts
30
+ declare const _experimental: {
31
+ supportModernCSS: () => boolean;
32
+ };
33
+ //#endregion
34
+ export { type AbstractCalculator, type CSSInterpolation, type CSSObject, CSSUtil, CSSVarRegisterProps, ComponentToken, ComponentTokenKey, type DerivativeFunc, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, GlobalToken, GlobalTokenWithComponent, Keyframe as Keyframes, type Linter, linter as NaNLinter, OverrideTokenMap, StyleInfo, StyleProvider, type StyleProviderProps, SubStyleComponentProps, Theme, TokenMap, TokenMapKey, type TokenType, TokenWithCommonCls, type Transformer, _experimental, transform as autoPrefixTransformer, createCache, createTheme, extractStyle, genCalc, genStyleUtils, getComputedToken, transform$1 as legacyLogicalPropertiesTransformer, linter$1 as legacyNotSelectorLinter, linter$2 as logicalPropertiesLinter, merge as mergeToken, linter$3 as parentSelectorLinter, transform$2 as px2remTransformer, statistic, statisticToken, token2CSSVar, unit, useCSSVarRegister, useCacheToken, useStyleContext, useStyleContextProvide, useStyleRegister };
package/dist/index.js ADDED
@@ -0,0 +1,29 @@
1
+ import { StyleProvider, createCache, useStyleContext, useStyleContextProvide } from "./StyleContext.js";
2
+ import calc_default from "./theme/calc/index.js";
3
+ import Theme from "./theme/Theme.js";
4
+ import createTheme from "./theme/createTheme.js";
5
+ import "./theme/index.js";
6
+ import { token2CSSVar } from "./util/css-variables.js";
7
+ import { supportLogicProps, supportWhere, unit } from "./util/index.js";
8
+ import useCacheToken, { getComputedToken } from "./hooks/useCacheToken.js";
9
+ import legacyNotSelectorLinter_default from "./linters/legacyNotSelectorLinter.js";
10
+ import logicalPropertiesLinter_default from "./linters/logicalPropertiesLinter.js";
11
+ import NaNLinter_default from "./linters/NaNLinter.js";
12
+ import parentSelectorLinter_default from "./linters/parentSelectorLinter.js";
13
+ import "./linters/index.js";
14
+ import useStyleRegister from "./hooks/useStyleRegister.js";
15
+ import useCSSVarRegister from "./hooks/useCSSVarRegister.js";
16
+ import extractStyle from "./extractStyle.js";
17
+ import Keyframes_default from "./Keyframes.js";
18
+ import autoPrefix_default from "./transformers/autoPrefix.js";
19
+ import legacyLogicalProperties_default from "./transformers/legacyLogicalProperties.js";
20
+ import px2rem_default from "./transformers/px2rem.js";
21
+ import statistic_default, { merge, statistic } from "./cssinjs-utils/util/statistic.js";
22
+ import genStyleUtils_default from "./cssinjs-utils/util/genStyleUtils.js";
23
+ import "./cssinjs-utils/index.js";
24
+
25
+ //#region src/index.ts
26
+ const _experimental = { supportModernCSS: () => supportWhere() && supportLogicProps() };
27
+
28
+ //#endregion
29
+ export { Keyframes_default as Keyframes, NaNLinter_default as NaNLinter, StyleProvider, Theme, _experimental, autoPrefix_default as autoPrefixTransformer, createCache, createTheme, extractStyle, calc_default as genCalc, genStyleUtils_default as genStyleUtils, getComputedToken, legacyLogicalProperties_default as legacyLogicalPropertiesTransformer, legacyNotSelectorLinter_default as legacyNotSelectorLinter, logicalPropertiesLinter_default as logicalPropertiesLinter, merge as mergeToken, parentSelectorLinter_default as parentSelectorLinter, px2rem_default as px2remTransformer, statistic, statistic_default as statisticToken, token2CSSVar, unit, useCSSVarRegister, useCacheToken, useStyleContext, useStyleContextProvide, useStyleRegister };
@@ -0,0 +1,6 @@
1
+ import { Linter } from "./interface.js";
2
+
3
+ //#region src/linters/NaNLinter.d.ts
4
+ declare const linter: Linter;
5
+ //#endregion
6
+ export { linter };
@@ -0,0 +1,10 @@
1
+ import { lintWarning } from "./utils.js";
2
+
3
+ //#region src/linters/NaNLinter.ts
4
+ const linter = (key, value, info) => {
5
+ if (typeof value === "string" && /NaN/.test(value) || Number.isNaN(value)) lintWarning(`Unexpected 'NaN' in property '${key}: ${value}'.`, info);
6
+ };
7
+ var NaNLinter_default = linter;
8
+
9
+ //#endregion
10
+ export { NaNLinter_default as default };
@@ -0,0 +1,18 @@
1
+ import { lintWarning } from "./utils.js";
2
+
3
+ //#region src/linters/contentQuotesLinter.ts
4
+ const linter = (key, value, info) => {
5
+ if (key === "content") {
6
+ if (typeof value !== "string" || ![
7
+ "normal",
8
+ "none",
9
+ "initial",
10
+ "inherit",
11
+ "unset"
12
+ ].includes(value) && !/(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/.test(value) && !value.startsWith("var(") && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== "\"" && value.charAt(0) !== "'")) lintWarning(`You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\`.`, info);
13
+ }
14
+ };
15
+ var contentQuotesLinter_default = linter;
16
+
17
+ //#endregion
18
+ export { contentQuotesLinter_default as default };
@@ -0,0 +1,12 @@
1
+ import { lintWarning } from "./utils.js";
2
+
3
+ //#region src/linters/hashedAnimationLinter.ts
4
+ const linter = (key, value, info) => {
5
+ if (key === "animation") {
6
+ if (info.hashId && value !== "none") lintWarning(`You seem to be using hashed animation '${value}', in which case 'animationName' with Keyframe as value is recommended.`, info);
7
+ }
8
+ };
9
+ var hashedAnimationLinter_default = linter;
10
+
11
+ //#endregion
12
+ export { hashedAnimationLinter_default as default };
@@ -0,0 +1,5 @@
1
+ import { Linter } from "./interface.js";
2
+ import { linter } from "./legacyNotSelectorLinter.js";
3
+ import { linter as linter$1 } from "./logicalPropertiesLinter.js";
4
+ import { linter as linter$2 } from "./NaNLinter.js";
5
+ import { linter as linter$3 } from "./parentSelectorLinter.js";
@@ -0,0 +1,8 @@
1
+ import contentQuotesLinter_default from "./contentQuotesLinter.js";
2
+ import hashedAnimationLinter_default from "./hashedAnimationLinter.js";
3
+ import legacyNotSelectorLinter_default from "./legacyNotSelectorLinter.js";
4
+ import logicalPropertiesLinter_default from "./logicalPropertiesLinter.js";
5
+ import NaNLinter_default from "./NaNLinter.js";
6
+ import parentSelectorLinter_default from "./parentSelectorLinter.js";
7
+
8
+ export { };
@@ -0,0 +1,11 @@
1
+ //#region src/linters/interface.d.ts
2
+ interface LinterInfo {
3
+ path?: string;
4
+ hashId?: string;
5
+ parentSelectors: string[];
6
+ }
7
+ interface Linter {
8
+ (key: string, value: string | number, info: LinterInfo): void;
9
+ }
10
+ //#endregion
11
+ export { Linter };
@@ -0,0 +1,6 @@
1
+ import { Linter } from "./interface.js";
2
+
3
+ //#region src/linters/legacyNotSelectorLinter.d.ts
4
+ declare const linter: Linter;
5
+ //#endregion
6
+ export { linter };
@@ -0,0 +1,20 @@
1
+ import { lintWarning } from "./utils.js";
2
+
3
+ //#region src/linters/legacyNotSelectorLinter.ts
4
+ function isConcatSelector(selector) {
5
+ return (selector.match(/:not\(([^)]*)\)/)?.[1] || "").split(/(\[[^[]*\])|(?=[.#])/).filter((str) => str).length > 1;
6
+ }
7
+ function parsePath(info) {
8
+ return info.parentSelectors.reduce((prev, cur) => {
9
+ if (!prev) return cur;
10
+ return cur.includes("&") ? cur.replace(/&/g, prev) : `${prev} ${cur}`;
11
+ }, "");
12
+ }
13
+ const linter = (_key, _value, info) => {
14
+ const notList = parsePath(info).match(/:not\([^)]*\)/g) || [];
15
+ if (notList.length > 0 && notList.some(isConcatSelector)) lintWarning(`Concat ':not' selector not support in legacy browsers.`, info);
16
+ };
17
+ var legacyNotSelectorLinter_default = linter;
18
+
19
+ //#endregion
20
+ export { legacyNotSelectorLinter_default as default };