@antdv-next/cssinjs 0.0.3 → 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.
- package/LICENSE +21 -0
- package/README.md +0 -141
- package/dist/Cache.d.ts +22 -0
- package/dist/Cache.js +45 -0
- package/dist/Keyframes.d.ts +12 -0
- package/dist/Keyframes.js +17 -0
- package/dist/StyleContext.d.ts +118 -0
- package/dist/StyleContext.js +64 -0
- package/dist/cssinjs-utils/_util/hooks/useUniqueMemo.js +62 -0
- package/dist/cssinjs-utils/hooks/useCSP.d.ts +8 -0
- package/dist/cssinjs-utils/hooks/useCSP.js +8 -0
- package/dist/cssinjs-utils/hooks/usePrefix.d.ts +9 -0
- package/dist/cssinjs-utils/hooks/useToken.d.ts +25 -0
- package/dist/cssinjs-utils/index.d.ts +4 -0
- package/dist/cssinjs-utils/index.js +4 -0
- package/dist/cssinjs-utils/interface/components.d.ts +12 -0
- package/dist/cssinjs-utils/util/genStyleUtils.d.ts +127 -0
- package/dist/cssinjs-utils/util/genStyleUtils.js +188 -0
- package/dist/cssinjs-utils/util/getCompVarPrefix.js +8 -0
- package/dist/cssinjs-utils/util/getComponentToken.js +22 -0
- package/dist/cssinjs-utils/util/getDefaultComponentToken.js +11 -0
- package/dist/cssinjs-utils/util/maxmin.js +17 -0
- package/dist/cssinjs-utils/util/statistic.d.ts +15 -0
- package/dist/cssinjs-utils/util/statistic.js +52 -0
- package/dist/extractStyle.d.ts +18 -0
- package/dist/extractStyle.js +54 -0
- package/dist/hooks/useCSSVarRegister.d.ts +19 -0
- package/dist/hooks/useCSSVarRegister.js +74 -0
- package/dist/hooks/useCacheToken.d.ts +60 -0
- package/dist/hooks/useCacheToken.js +120 -0
- package/dist/hooks/useGlobalCache.d.ts +9 -0
- package/dist/hooks/useGlobalCache.js +70 -0
- package/dist/hooks/useStyleRegister.d.ts +47 -0
- package/dist/hooks/useStyleRegister.js +237 -0
- package/dist/index.d.ts +34 -0
- package/dist/index.js +29 -0
- package/dist/linters/NaNLinter.d.ts +6 -0
- package/dist/linters/NaNLinter.js +10 -0
- package/dist/linters/contentQuotesLinter.js +18 -0
- package/dist/linters/hashedAnimationLinter.js +12 -0
- package/dist/linters/index.d.ts +5 -0
- package/dist/linters/index.js +8 -0
- package/dist/linters/interface.d.ts +11 -0
- package/dist/linters/legacyNotSelectorLinter.d.ts +6 -0
- package/dist/linters/legacyNotSelectorLinter.js +20 -0
- package/dist/linters/logicalPropertiesLinter.d.ts +6 -0
- package/dist/linters/logicalPropertiesLinter.js +57 -0
- package/dist/linters/parentSelectorLinter.d.ts +7 -0
- package/dist/linters/parentSelectorLinter.js +12 -0
- package/dist/linters/utils.js +10 -0
- package/dist/theme/Theme.d.ts +16 -0
- package/dist/theme/Theme.js +24 -0
- package/dist/theme/ThemeCache.js +79 -0
- package/dist/theme/calc/CSSCalculator.d.ts +19 -0
- package/dist/theme/calc/CSSCalculator.js +63 -0
- package/dist/theme/calc/NumCalculator.d.ts +14 -0
- package/dist/theme/calc/NumCalculator.js +37 -0
- package/dist/theme/calc/calculator.d.ts +32 -0
- package/dist/theme/calc/calculator.js +6 -0
- package/dist/theme/calc/index.d.ts +8 -0
- package/dist/theme/calc/index.js +12 -0
- package/dist/theme/createTheme.d.ts +11 -0
- package/dist/theme/createTheme.js +16 -0
- package/dist/theme/index.js +6 -0
- package/dist/theme/interface.d.ts +5 -0
- package/dist/transformers/autoPrefix.d.ts +6 -0
- package/dist/transformers/autoPrefix.js +7 -0
- package/dist/transformers/interface.d.ts +9 -0
- package/{es → dist}/transformers/legacyLogicalProperties.d.ts +6 -2
- package/dist/transformers/legacyLogicalProperties.js +123 -0
- package/dist/transformers/px2rem.d.ts +23 -0
- package/dist/transformers/px2rem.js +37 -0
- package/dist/util/cacheMapUtil.js +60 -0
- package/dist/util/css-variables.d.ts +7 -0
- package/dist/util/css-variables.js +35 -0
- package/dist/util/index.d.ts +8 -0
- package/dist/util/index.js +108 -0
- package/package.json +33 -64
- package/dist/cssinjs.umd.js +0 -3
- package/es/Cache.d.ts +0 -20
- package/es/Cache.js +0 -33
- package/es/Keyframes.d.ts +0 -9
- package/es/Keyframes.js +0 -14
- package/es/StyleContext.d.ts +0 -40
- package/es/StyleContext.js +0 -100
- package/es/extractStyle.d.ts +0 -12
- package/es/extractStyle.js +0 -43
- package/es/hooks/useCSSVarRegister.d.ts +0 -21
- package/es/hooks/useCSSVarRegister.js +0 -59
- package/es/hooks/useCacheToken.d.ts +0 -69
- package/es/hooks/useCacheToken.js +0 -106
- package/es/hooks/useEffectCleanupRegister.d.ts +0 -2
- package/es/hooks/useEffectCleanupRegister.js +0 -8
- package/es/hooks/useGlobalCache.d.ts +0 -7
- package/es/hooks/useGlobalCache.js +0 -41
- package/es/hooks/useHMR.d.ts +0 -3
- package/es/hooks/useHMR.js +0 -20
- package/es/hooks/useStyleRegister.d.ts +0 -81
- package/es/hooks/useStyleRegister.js +0 -216
- package/es/index.d.ts +0 -18
- package/es/index.js +0 -44
- package/es/interface.d.ts +0 -2
- package/es/linters/NaNLinter.d.ts +0 -3
- package/es/linters/NaNLinter.js +0 -7
- package/es/linters/contentQuotesLinter.d.ts +0 -3
- package/es/linters/contentQuotesLinter.js +0 -13
- package/es/linters/hashedAnimationLinter.d.ts +0 -3
- package/es/linters/hashedAnimationLinter.js +0 -10
- package/es/linters/index.d.ts +0 -7
- package/es/linters/interface.d.ts +0 -8
- package/es/linters/legacyNotSelectorLinter.d.ts +0 -3
- package/es/linters/legacyNotSelectorLinter.js +0 -14
- package/es/linters/logicalPropertiesLinter.d.ts +0 -3
- package/es/linters/logicalPropertiesLinter.js +0 -61
- package/es/linters/parentSelectorLinter.d.ts +0 -3
- package/es/linters/parentSelectorLinter.js +0 -7
- package/es/linters/utils.d.ts +0 -2
- package/es/linters/utils.js +0 -11
- package/es/theme/Theme.d.ts +0 -11
- package/es/theme/Theme.js +0 -21
- package/es/theme/ThemeCache.d.ts +0 -20
- package/es/theme/ThemeCache.js +0 -74
- package/es/theme/calc/CSSCalculator.d.ts +0 -15
- package/es/theme/calc/CSSCalculator.js +0 -40
- package/es/theme/calc/NumCalculator.d.ts +0 -10
- package/es/theme/calc/NumCalculator.js +0 -25
- package/es/theme/calc/calculator.d.ts +0 -30
- package/es/theme/calc/calculator.js +0 -5
- package/es/theme/calc/index.d.ts +0 -5
- package/es/theme/calc/index.js +0 -9
- package/es/theme/createTheme.d.ts +0 -6
- package/es/theme/createTheme.js +0 -10
- package/es/theme/index.d.ts +0 -6
- package/es/theme/interface.d.ts +0 -2
- package/es/transformers/interface.d.ts +0 -4
- package/es/transformers/legacyLogicalProperties.js +0 -108
- package/es/transformers/px2rem.d.ts +0 -20
- package/es/transformers/px2rem.js +0 -32
- package/es/util/cacheMapUtil.d.ts +0 -14
- package/es/util/cacheMapUtil.js +0 -48
- package/es/util/css-variables.d.ts +0 -20
- package/es/util/css-variables.js +0 -22
- package/es/util/index.d.ts +0 -15
- package/es/util/index.js +0 -85
- package/lib/Cache.d.ts +0 -20
- package/lib/Cache.js +0 -1
- package/lib/Keyframes.d.ts +0 -9
- package/lib/Keyframes.js +0 -1
- package/lib/StyleContext.d.ts +0 -40
- package/lib/StyleContext.js +0 -1
- package/lib/extractStyle.d.ts +0 -12
- package/lib/extractStyle.js +0 -1
- package/lib/hooks/useCSSVarRegister.d.ts +0 -21
- package/lib/hooks/useCSSVarRegister.js +0 -1
- package/lib/hooks/useCacheToken.d.ts +0 -69
- package/lib/hooks/useCacheToken.js +0 -1
- package/lib/hooks/useEffectCleanupRegister.d.ts +0 -2
- package/lib/hooks/useEffectCleanupRegister.js +0 -1
- package/lib/hooks/useGlobalCache.d.ts +0 -7
- package/lib/hooks/useGlobalCache.js +0 -1
- package/lib/hooks/useHMR.d.ts +0 -3
- package/lib/hooks/useHMR.js +0 -1
- package/lib/hooks/useStyleRegister.d.ts +0 -81
- package/lib/hooks/useStyleRegister.js +0 -3
- package/lib/index.d.ts +0 -18
- package/lib/index.js +0 -1
- package/lib/interface.d.ts +0 -2
- package/lib/linters/NaNLinter.d.ts +0 -3
- package/lib/linters/NaNLinter.js +0 -1
- package/lib/linters/contentQuotesLinter.d.ts +0 -3
- package/lib/linters/contentQuotesLinter.js +0 -1
- package/lib/linters/hashedAnimationLinter.d.ts +0 -3
- package/lib/linters/hashedAnimationLinter.js +0 -1
- package/lib/linters/index.d.ts +0 -7
- package/lib/linters/interface.d.ts +0 -8
- package/lib/linters/legacyNotSelectorLinter.d.ts +0 -3
- package/lib/linters/legacyNotSelectorLinter.js +0 -1
- package/lib/linters/logicalPropertiesLinter.d.ts +0 -3
- package/lib/linters/logicalPropertiesLinter.js +0 -1
- package/lib/linters/parentSelectorLinter.d.ts +0 -3
- package/lib/linters/parentSelectorLinter.js +0 -1
- package/lib/linters/utils.d.ts +0 -2
- package/lib/linters/utils.js +0 -1
- package/lib/theme/Theme.d.ts +0 -11
- package/lib/theme/Theme.js +0 -1
- package/lib/theme/ThemeCache.d.ts +0 -20
- package/lib/theme/ThemeCache.js +0 -1
- package/lib/theme/calc/CSSCalculator.d.ts +0 -15
- package/lib/theme/calc/CSSCalculator.js +0 -1
- package/lib/theme/calc/NumCalculator.d.ts +0 -10
- package/lib/theme/calc/NumCalculator.js +0 -1
- package/lib/theme/calc/calculator.d.ts +0 -30
- package/lib/theme/calc/calculator.js +0 -1
- package/lib/theme/calc/index.d.ts +0 -5
- package/lib/theme/calc/index.js +0 -1
- package/lib/theme/createTheme.d.ts +0 -6
- package/lib/theme/createTheme.js +0 -1
- package/lib/theme/index.d.ts +0 -6
- package/lib/theme/interface.d.ts +0 -2
- package/lib/transformers/interface.d.ts +0 -4
- package/lib/transformers/legacyLogicalProperties.d.ts +0 -12
- package/lib/transformers/legacyLogicalProperties.js +0 -1
- package/lib/transformers/px2rem.d.ts +0 -20
- package/lib/transformers/px2rem.js +0 -1
- package/lib/util/cacheMapUtil.d.ts +0 -14
- package/lib/util/cacheMapUtil.js +0 -1
- package/lib/util/css-variables.d.ts +0 -20
- package/lib/util/css-variables.js +0 -1
- package/lib/util/index.d.ts +0 -15
- 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 };
|
package/dist/index.d.ts
ADDED
|
@@ -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,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,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 };
|