@antdv-next/cssinjs 1.0.0-beta.2 → 1.0.0-rc.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/dist/Cache.d.mts +0 -1
- package/dist/StyleContext.d.mts +14 -23
- package/dist/cssinjs-utils/util/genStyleUtils.d.mts +3 -7
- package/dist/cssinjs-utils/util/genStyleUtils.mjs +5 -5
- package/dist/extractStyle.mjs +1 -1
- package/dist/hooks/useCacheToken.d.mts +5 -10
- package/dist/hooks/useStyleRegister.mjs +4 -4
- package/dist/theme/Theme.d.mts +0 -1
- package/dist/theme/createTheme.d.mts +0 -1
- package/dist/transformers/legacyLogicalProperties.d.mts +0 -1
- package/dist/util/cacheMapUtil.mjs +3 -3
- package/dist/util/index.d.mts +0 -1
- package/dist/util/resolveUnitless.mjs +7 -0
- package/package.json +3 -3
package/dist/Cache.d.mts
CHANGED
package/dist/StyleContext.d.mts
CHANGED
|
@@ -5,18 +5,17 @@ import * as vue0 from "vue";
|
|
|
5
5
|
import { App, Ref } from "vue";
|
|
6
6
|
|
|
7
7
|
//#region src/StyleContext.d.ts
|
|
8
|
-
|
|
9
8
|
declare function createCache(): vue0.Raw<Entity>;
|
|
10
9
|
declare function useStyleContextProvide(props: Ref<StyleContextProps>): void;
|
|
11
10
|
declare function provideStyleContext(app: App, props: Ref<StyleContextProps>): void;
|
|
12
11
|
declare function useStyleContext(): Ref<{
|
|
13
|
-
autoClear?: boolean
|
|
14
|
-
/** @private Test only. Not work in production. */ | undefined;
|
|
12
|
+
autoClear?: boolean /** @private Test only. Not work in production. */ | undefined;
|
|
15
13
|
mock?: "server" | "client"
|
|
16
14
|
/**
|
|
17
15
|
* Only set when you need ssr to extract style on you own.
|
|
18
16
|
* If not provided, it will auto create <style /> on the end of Provider in server side.
|
|
19
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
| undefined;
|
|
20
19
|
cache: {
|
|
21
20
|
instanceId: string;
|
|
22
21
|
cache: Map<string, [number, any]> & Omit<Map<string, [number, any]>, keyof Map<any, any>>;
|
|
@@ -28,11 +27,9 @@ declare function useStyleContext(): Ref<{
|
|
|
28
27
|
opUpdate: (keyPathStr: string, valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
|
|
29
28
|
};
|
|
30
29
|
defaultCache: boolean;
|
|
31
|
-
hashPriority?: HashPriority
|
|
32
|
-
/** Tell cssinjs where to inject style in */ | undefined;
|
|
30
|
+
hashPriority?: HashPriority /** Tell cssinjs where to inject style in */ | undefined;
|
|
33
31
|
container?: (Element | ShadowRoot) | undefined;
|
|
34
|
-
ssrInline?: boolean
|
|
35
|
-
/** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
|
|
32
|
+
ssrInline?: boolean /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
|
|
36
33
|
transformers?: {
|
|
37
34
|
flush?: TransformerFlushCallback<any> | undefined;
|
|
38
35
|
readableType?: undefined | undefined;
|
|
@@ -40,19 +37,17 @@ declare function useStyleContext(): Ref<{
|
|
|
40
37
|
transform?: TransformerTransformCallback<any, any> | undefined;
|
|
41
38
|
writableType?: undefined | undefined;
|
|
42
39
|
}[] | undefined;
|
|
43
|
-
linters?: Linter[]
|
|
44
|
-
/**
|
|
45
|
-
layer?: boolean
|
|
46
|
-
/** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
|
|
40
|
+
linters?: Linter[] /** Wrap css in a layer to avoid global style conflict */ | undefined;
|
|
41
|
+
layer?: boolean /** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
|
|
47
42
|
autoPrefix?: boolean | undefined;
|
|
48
43
|
}, StyleContextProps | {
|
|
49
|
-
autoClear?: boolean
|
|
50
|
-
/** @private Test only. Not work in production. */ | undefined;
|
|
44
|
+
autoClear?: boolean /** @private Test only. Not work in production. */ | undefined;
|
|
51
45
|
mock?: "server" | "client"
|
|
52
46
|
/**
|
|
53
47
|
* Only set when you need ssr to extract style on you own.
|
|
54
48
|
* If not provided, it will auto create <style /> on the end of Provider in server side.
|
|
55
|
-
*/
|
|
49
|
+
*/
|
|
50
|
+
| undefined;
|
|
56
51
|
cache: {
|
|
57
52
|
instanceId: string;
|
|
58
53
|
cache: Map<string, [number, any]> & Omit<Map<string, [number, any]>, keyof Map<any, any>>;
|
|
@@ -64,11 +59,9 @@ declare function useStyleContext(): Ref<{
|
|
|
64
59
|
opUpdate: (keyPathStr: string, valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
|
|
65
60
|
};
|
|
66
61
|
defaultCache: boolean;
|
|
67
|
-
hashPriority?: HashPriority
|
|
68
|
-
/** Tell cssinjs where to inject style in */ | undefined;
|
|
62
|
+
hashPriority?: HashPriority /** Tell cssinjs where to inject style in */ | undefined;
|
|
69
63
|
container?: (Element | ShadowRoot) | undefined;
|
|
70
|
-
ssrInline?: boolean
|
|
71
|
-
/** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
|
|
64
|
+
ssrInline?: boolean /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
|
|
72
65
|
transformers?: {
|
|
73
66
|
flush?: TransformerFlushCallback<any> | undefined;
|
|
74
67
|
readableType?: undefined | undefined;
|
|
@@ -76,10 +69,8 @@ declare function useStyleContext(): Ref<{
|
|
|
76
69
|
transform?: TransformerTransformCallback<any, any> | undefined;
|
|
77
70
|
writableType?: undefined | undefined;
|
|
78
71
|
}[] | undefined;
|
|
79
|
-
linters?: Linter[]
|
|
80
|
-
/**
|
|
81
|
-
layer?: boolean
|
|
82
|
-
/** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
|
|
72
|
+
linters?: Linter[] /** Wrap css in a layer to avoid global style conflict */ | undefined;
|
|
73
|
+
layer?: boolean /** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
|
|
83
74
|
autoPrefix?: boolean | undefined;
|
|
84
75
|
}>;
|
|
85
76
|
type HashPriority = 'low' | 'high';
|
|
@@ -23,13 +23,9 @@ interface CSSUtil {
|
|
|
23
23
|
min: (...values: (number | string)[]) => number | string;
|
|
24
24
|
}
|
|
25
25
|
type TokenWithCommonCls<T> = T & {
|
|
26
|
-
/** Wrap component class with `.` prefix */
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
prefixCls: string;
|
|
30
|
-
/** Wrap icon class with `.` prefix */
|
|
31
|
-
iconCls: string;
|
|
32
|
-
/** Wrap ant prefixCls class with `.` prefix */
|
|
26
|
+
/** Wrap component class with `.` prefix */componentCls: string; /** Origin prefix which do not have `.` prefix */
|
|
27
|
+
prefixCls: string; /** Wrap icon class with `.` prefix */
|
|
28
|
+
iconCls: string; /** Wrap ant prefixCls class with `.` prefix */
|
|
33
29
|
antCls: string;
|
|
34
30
|
} & CSSUtil;
|
|
35
31
|
type FullToken<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = TokenWithCommonCls<GlobalTokenWithComponent<CompTokenMap, AliasToken, C>>;
|
|
@@ -72,7 +72,7 @@ function genStyleUtils(config) {
|
|
|
72
72
|
const concatComponent = cells.join("-");
|
|
73
73
|
const mergedLayer = config.layer || { name: "antd" };
|
|
74
74
|
return (prefixCls, rootCls) => {
|
|
75
|
-
const { theme,
|
|
75
|
+
const { theme, hashId, token, cssVar, zeroRuntime } = useToken();
|
|
76
76
|
if (computed(() => {
|
|
77
77
|
return zeroRuntime?.value;
|
|
78
78
|
}).value) return hashId;
|
|
@@ -127,14 +127,14 @@ function genStyleUtils(config) {
|
|
|
127
127
|
};
|
|
128
128
|
}), () => {
|
|
129
129
|
if (options.injectStyle === false) return [];
|
|
130
|
-
const { token: proxyToken, flush } = statistic_default(token);
|
|
131
|
-
const defaultComponentToken = getDefaultComponentToken_default(component,
|
|
130
|
+
const { token: proxyToken, flush } = statistic_default(token.value);
|
|
131
|
+
const defaultComponentToken = getDefaultComponentToken_default(component, proxyToken, getDefaultToken);
|
|
132
132
|
const componentCls = `.${prefixCls.value}`;
|
|
133
|
-
const componentToken = getComponentToken_default(component,
|
|
133
|
+
const componentToken = getComponentToken_default(component, proxyToken, defaultComponentToken, { deprecatedTokens: options.deprecatedTokens });
|
|
134
134
|
if (defaultComponentToken && typeof defaultComponentToken === "object") Object.keys(defaultComponentToken).forEach((key) => {
|
|
135
135
|
defaultComponentToken[key] = `var(${token2CSSVar(key, getCompVarPrefix_default(component, cssVar?.value?.prefix))})`;
|
|
136
136
|
});
|
|
137
|
-
const mergedToken = merge(proxyToken
|
|
137
|
+
const mergedToken = merge(proxyToken, {
|
|
138
138
|
componentCls,
|
|
139
139
|
prefixCls: prefixCls.value,
|
|
140
140
|
iconCls: `.${prefix.value.iconPrefixCls}`,
|
package/dist/extractStyle.mjs
CHANGED
|
@@ -19,7 +19,7 @@ function extractStyle(cache, options) {
|
|
|
19
19
|
"token",
|
|
20
20
|
"cssVar"
|
|
21
21
|
], once = false } = typeof options === "boolean" ? { plain: options } : options || {};
|
|
22
|
-
const matchPrefixRegexp =
|
|
22
|
+
const matchPrefixRegexp = new RegExp(`^(${(typeof types === "string" ? [types] : types).join("|")})%`);
|
|
23
23
|
const styleKeys = Array.from(cache.cache.keys()).filter((key) => matchPrefixRegexp.test(key));
|
|
24
24
|
const effectStyles = {};
|
|
25
25
|
const cachePathMap = {};
|
|
@@ -33,16 +33,11 @@ interface Option<DerivativeToken, DesignToken> {
|
|
|
33
33
|
* Transform token to css variables.
|
|
34
34
|
*/
|
|
35
35
|
cssVar: {
|
|
36
|
-
hashed?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
|
|
39
|
-
/** Tokens that
|
|
40
|
-
|
|
41
|
-
/** Tokens that should not be transformed to css variables */
|
|
42
|
-
ignore?: Record<string, boolean>;
|
|
43
|
-
/** Tokens that preserves origin value */
|
|
44
|
-
preserve?: Record<string, boolean>;
|
|
45
|
-
/** Key for current theme. Useful for customizing and should be unique */
|
|
36
|
+
hashed?: boolean; /** Prefix for css variables */
|
|
37
|
+
prefix?: string; /** Tokens that should not be appended with unit */
|
|
38
|
+
unitless?: Record<string, boolean>; /** Tokens that should not be transformed to css variables */
|
|
39
|
+
ignore?: Record<string, boolean>; /** Tokens that preserves origin value */
|
|
40
|
+
preserve?: Record<string, boolean>; /** Key for current theme. Useful for customizing and should be unique */
|
|
46
41
|
key: string;
|
|
47
42
|
};
|
|
48
43
|
}
|
|
@@ -6,9 +6,9 @@ import contentQuotesLinter_default from "../linters/contentQuotesLinter.mjs";
|
|
|
6
6
|
import hashedAnimationLinter_default from "../linters/hashedAnimationLinter.mjs";
|
|
7
7
|
import "../linters/index.mjs";
|
|
8
8
|
import { CSS_FILE_STYLE, existPath, getStyleAndHash } from "../util/cacheMapUtil.mjs";
|
|
9
|
+
import resolveUnitless_default from "../util/resolveUnitless.mjs";
|
|
9
10
|
import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
|
|
10
11
|
import { computed } from "vue";
|
|
11
|
-
import unitless from "@emotion/unitless";
|
|
12
12
|
import { compile, middleware, prefixer, serialize, stringify } from "stylis";
|
|
13
13
|
|
|
14
14
|
//#region src/hooks/useStyleRegister.ts
|
|
@@ -101,7 +101,7 @@ function parseStyle(interpolation, config = {}, { root, injectHash, parentSelect
|
|
|
101
101
|
}));
|
|
102
102
|
const styleName = cssKey.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
103
103
|
let formatValue = cssValue;
|
|
104
|
-
if (!
|
|
104
|
+
if (!resolveUnitless_default[cssKey] && typeof formatValue === "number" && formatValue !== 0) formatValue = `${formatValue}px`;
|
|
105
105
|
if (cssKey === "animationName" && cssValue?._keyframe) {
|
|
106
106
|
parseKeyframes(cssValue);
|
|
107
107
|
formatValue = cssValue.getName(hashId);
|
|
@@ -180,11 +180,11 @@ function useStyleRegister(info, styleFn) {
|
|
|
180
180
|
}, (cacheValue) => {
|
|
181
181
|
const [styleStr, styleId, effectStyle, , priority] = cacheValue;
|
|
182
182
|
if (!isMergedClientSide.value || styleStr === CSS_FILE_STYLE) return;
|
|
183
|
-
const { layer: enableLayer
|
|
183
|
+
const { layer: enableLayer, container, autoPrefix, cache } = styleContext.value;
|
|
184
184
|
const { nonce } = info.value;
|
|
185
185
|
const mergedCSSConfig = {
|
|
186
186
|
mark: ATTR_MARK,
|
|
187
|
-
prepend: enableLayer
|
|
187
|
+
prepend: enableLayer ? false : "queue",
|
|
188
188
|
attachTo: container,
|
|
189
189
|
priority
|
|
190
190
|
};
|
package/dist/theme/Theme.d.mts
CHANGED
|
@@ -8,9 +8,9 @@ const ATTR_CACHE_MAP = "data-ant-cssinjs-cache-path";
|
|
|
8
8
|
* Which means not exist in `<style />` tag.
|
|
9
9
|
*/
|
|
10
10
|
const CSS_FILE_STYLE = "_FILE_STYLE__";
|
|
11
|
-
function serialize(cachePathMap
|
|
12
|
-
return Object.keys(cachePathMap
|
|
13
|
-
return `${path}:${cachePathMap
|
|
11
|
+
function serialize(cachePathMap) {
|
|
12
|
+
return Object.keys(cachePathMap).map((path) => {
|
|
13
|
+
return `${path}:${cachePathMap[path]}`;
|
|
14
14
|
}).join(";");
|
|
15
15
|
}
|
|
16
16
|
let cachePathMap;
|
package/dist/util/index.d.mts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antdv-next/cssinjs",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.0-
|
|
4
|
+
"version": "1.0.0-rc.1",
|
|
5
5
|
"description": "cssinjs solution for ant-design-vue",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@emotion/hash": "^0.8.0",
|
|
32
32
|
"@emotion/unitless": "^0.7.5",
|
|
33
|
-
"@v-c/util": "^1.0.
|
|
33
|
+
"@v-c/util": "^1.0.9",
|
|
34
34
|
"csstype": "^3.2.3",
|
|
35
35
|
"defu": "^6.1.4",
|
|
36
36
|
"stylis": "^4.3.6"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@testing-library/jest-dom": "^
|
|
39
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
40
40
|
"@types/node": "^25.0.10",
|
|
41
41
|
"@types/stylis": "^4.2.7",
|
|
42
42
|
"@types/testing-library__jest-dom": "^6.0.0",
|