@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.
- 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/dist/transformers/legacyLogicalProperties.d.ts +16 -0
- 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 -63
- package/dist/cssinjs.umd.js +0 -3
- package/es/Cache.js +0 -33
- package/es/Keyframes.js +0 -14
- package/es/StyleContext.js +0 -100
- package/es/extractStyle.js +0 -43
- package/es/hooks/useCSSVarRegister.js +0 -59
- package/es/hooks/useCacheToken.js +0 -106
- package/es/hooks/useEffectCleanupRegister.js +0 -8
- package/es/hooks/useGlobalCache.js +0 -41
- package/es/hooks/useHMR.js +0 -20
- package/es/hooks/useStyleRegister.js +0 -216
- package/es/index.js +0 -44
- package/es/linters/NaNLinter.js +0 -7
- package/es/linters/contentQuotesLinter.js +0 -13
- package/es/linters/hashedAnimationLinter.js +0 -10
- package/es/linters/legacyNotSelectorLinter.js +0 -14
- package/es/linters/logicalPropertiesLinter.js +0 -61
- package/es/linters/parentSelectorLinter.js +0 -7
- package/es/linters/utils.js +0 -11
- package/es/theme/Theme.js +0 -21
- package/es/theme/ThemeCache.js +0 -74
- package/es/theme/calc/CSSCalculator.js +0 -40
- package/es/theme/calc/NumCalculator.js +0 -25
- package/es/theme/calc/calculator.js +0 -5
- package/es/theme/calc/index.js +0 -9
- package/es/theme/createTheme.js +0 -10
- package/es/transformers/legacyLogicalProperties.js +0 -108
- package/es/transformers/px2rem.js +0 -32
- package/es/util/cacheMapUtil.js +0 -48
- package/es/util/css-variables.js +0 -22
- package/es/util/index.js +0 -85
- package/lib/Cache.js +0 -1
- package/lib/Keyframes.js +0 -1
- package/lib/StyleContext.js +0 -1
- package/lib/extractStyle.js +0 -1
- package/lib/hooks/useCSSVarRegister.js +0 -1
- package/lib/hooks/useCacheToken.js +0 -1
- package/lib/hooks/useEffectCleanupRegister.js +0 -1
- package/lib/hooks/useGlobalCache.js +0 -1
- package/lib/hooks/useHMR.js +0 -1
- package/lib/hooks/useStyleRegister.js +0 -3
- package/lib/index.js +0 -1
- package/lib/linters/NaNLinter.js +0 -1
- package/lib/linters/contentQuotesLinter.js +0 -1
- package/lib/linters/hashedAnimationLinter.js +0 -1
- package/lib/linters/legacyNotSelectorLinter.js +0 -1
- package/lib/linters/logicalPropertiesLinter.js +0 -1
- package/lib/linters/parentSelectorLinter.js +0 -1
- package/lib/linters/utils.js +0 -1
- package/lib/theme/Theme.js +0 -1
- package/lib/theme/ThemeCache.js +0 -1
- package/lib/theme/calc/CSSCalculator.js +0 -1
- package/lib/theme/calc/NumCalculator.js +0 -1
- package/lib/theme/calc/calculator.js +0 -1
- package/lib/theme/calc/index.js +0 -1
- package/lib/theme/createTheme.js +0 -1
- package/lib/transformers/legacyLogicalProperties.js +0 -1
- package/lib/transformers/px2rem.js +0 -1
- package/lib/util/cacheMapUtil.js +0 -1
- package/lib/util/css-variables.js +0 -1
- package/lib/util/index.js +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Antdv Next
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
# @antdv-next/cssinjs
|
|
2
|
-
|
|
3
|
-
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
|
|
4
|
-
|
|
5
|
-
[npm-image]: http://img.shields.io/npm/v/@antdv-next/cssinjs.svg?style=flat-square
|
|
6
|
-
[npm-url]: http://npmjs.org/package/@antdv-next/cssinjs
|
|
7
|
-
[github-actions-image]: https://github.com/ant-design/cssinjs/workflows/CI/badge.svg
|
|
8
|
-
[github-actions-url]: https://github.com/ant-design/cssinjs/actions
|
|
9
|
-
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/cssinjs/master.svg?style=flat-square
|
|
10
|
-
[codecov-url]: https://codecov.io/gh/ant-design/cssinjs/branch/master
|
|
11
|
-
[download-image]: https://img.shields.io/npm/dm/@antdv-next/cssinjs.svg?style=flat-square
|
|
12
|
-
[download-url]: https://npmjs.org/package/@antdv-next/cssinjs
|
|
13
|
-
[bundlephobia-url]: https://bundlephobia.com/result?p=@antdv-next/cssinjs
|
|
14
|
-
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@antdv-next/cssinjs
|
|
15
|
-
|
|
16
|
-
Component level cssinjs solution used in [ant.design](https://ant.design). It's a subset of [Emotion](https://emotion.sh/) with design token logic wrapper. Please feel free to use emotion directly if you want to find a web cssinjs solution. cssinjs related dep packages:
|
|
17
|
-
|
|
18
|
-
- stylis
|
|
19
|
-
- @emotion/hash
|
|
20
|
-
- @emotion/unitless
|
|
21
|
-
|
|
22
|
-
## Live Demo
|
|
23
|
-
|
|
24
|
-
https://ant-design.github.io/cssinjs/
|
|
25
|
-
|
|
26
|
-
## Install
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
npm install @antdv-next/cssinjs
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
or
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
yarn add @antdv-next/cssinjs
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
pnpm add @antdv-next/cssinjs
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## Development
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
npm install
|
|
46
|
-
npm start
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## License
|
|
50
|
-
|
|
51
|
-
@antdv-next/cssinjs is released under the MIT license.
|
|
52
|
-
|
|
53
|
-
## API
|
|
54
|
-
|
|
55
|
-
### StyleProvider
|
|
56
|
-
|
|
57
|
-
| Prop | Desc | Type | Default |
|
|
58
|
-
| --- | --- | --- | --- |
|
|
59
|
-
| autoClear | Clear inject style element when component remove. | boolean | false |
|
|
60
|
-
| cache | Config cssinjs cache entity. Only set when you need ssr to extract style on you own. | CacheEntity | - |
|
|
61
|
-
| hashPriority | Use `:where` selector to reduce hashId css selector priority | `'low' \| 'high'` | `'low'` |
|
|
62
|
-
| container | Tell cssinjs where to inject style in. | Element \| ShadowRoot | `document.head` |
|
|
63
|
-
| ssrInline | Component wil render inline `<style />` for fallback in SSR. Not recommend. | boolean | false |
|
|
64
|
-
| transformers | Transform css before inject in document. Please note that `transformers` do not support dynamic update | Transformer[] | - |
|
|
65
|
-
|
|
66
|
-
### createCache
|
|
67
|
-
|
|
68
|
-
return CacheEntity for StyleProvider.
|
|
69
|
-
|
|
70
|
-
### createTheme
|
|
71
|
-
|
|
72
|
-
Create theme object. When same algorithm provided, it will return same object.
|
|
73
|
-
|
|
74
|
-
### Design Token related API
|
|
75
|
-
|
|
76
|
-
Since `/cssinjs` use strong constraints for cache hit performance, we recommend to view demo `basic.tsx` for usage and `animation.tsx` for animation usage.
|
|
77
|
-
|
|
78
|
-
### extractStyle
|
|
79
|
-
|
|
80
|
-
Extracts the styles from the cache and returns them as a string.
|
|
81
|
-
|
|
82
|
-
#### Parameters
|
|
83
|
-
|
|
84
|
-
- `cache` (Cache): The cache instance containing the styles.
|
|
85
|
-
- `options` (object | boolean, optional): Options for extracting the styles.
|
|
86
|
-
- `plain` (boolean, optional): If true, the styles will be returned in plain format. Default is false.
|
|
87
|
-
- `types` (string | string[], optional): The types of styles to extract. Default is ['style', 'token', 'cssVar'].
|
|
88
|
-
|
|
89
|
-
#### Returns
|
|
90
|
-
|
|
91
|
-
- (string): The extracted styles as a string.
|
|
92
|
-
|
|
93
|
-
#### Example
|
|
94
|
-
|
|
95
|
-
```typescript
|
|
96
|
-
import { extractStyle, createCache } from '@antdv-next/cssinjs';
|
|
97
|
-
|
|
98
|
-
// 创建并填充缓存
|
|
99
|
-
const cache = createCache();
|
|
100
|
-
// 注意:在实际使用中,缓存通常会在渲染组件时自动填充
|
|
101
|
-
|
|
102
|
-
// 提取样式
|
|
103
|
-
const styles = extractStyle(cache, { plain: true, types: ['style', 'token'] });
|
|
104
|
-
|
|
105
|
-
// 使用提取的样式
|
|
106
|
-
const styleElement = document.createElement('style');
|
|
107
|
-
styleElement.innerHTML = styles;
|
|
108
|
-
document.head.appendChild(styleElement);
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## Transform
|
|
112
|
-
|
|
113
|
-
When you need transform CSSObject before inject style. You can use `transformers` to handle this:
|
|
114
|
-
|
|
115
|
-
```tsx | pure
|
|
116
|
-
import {
|
|
117
|
-
legacyLogicalPropertiesTransformer,
|
|
118
|
-
StyleProvider,
|
|
119
|
-
} from '@antdv-next/cssinjs';
|
|
120
|
-
|
|
121
|
-
export default () => (
|
|
122
|
-
<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
|
|
123
|
-
<MyApp />
|
|
124
|
-
</StyleProvider>
|
|
125
|
-
);
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
Follow are the transform we provide:
|
|
129
|
-
|
|
130
|
-
#### legacyLogicalPropertiesTransformer
|
|
131
|
-
|
|
132
|
-
Convert logical properties to legacy properties. e.g. `marginBlockStart` to `marginTop`:
|
|
133
|
-
|
|
134
|
-
- inset
|
|
135
|
-
- margin
|
|
136
|
-
- padding
|
|
137
|
-
- border
|
|
138
|
-
|
|
139
|
-
#### px2remTransformer
|
|
140
|
-
|
|
141
|
-
Convert pixel units to rem units. [px2remTransformer.options](./src/transformers/px2rem.ts)
|
package/dist/Cache.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
//#region src/Cache.d.ts
|
|
2
|
+
type KeyType = string | number;
|
|
3
|
+
type ValueType = [number, any];
|
|
4
|
+
/** Connect key with `SPLIT` */
|
|
5
|
+
|
|
6
|
+
declare class Entity {
|
|
7
|
+
instanceId: string;
|
|
8
|
+
constructor(instanceId: string);
|
|
9
|
+
/** @private Internal cache map. Do not access this directly */
|
|
10
|
+
cache: Map<string, ValueType>;
|
|
11
|
+
/** @private Record update times for each key */
|
|
12
|
+
updateTimes: Map<string, number>;
|
|
13
|
+
extracted: Set<string>;
|
|
14
|
+
get(keys: KeyType[]): ValueType | null;
|
|
15
|
+
/** A fast get cache with `get` concat. */
|
|
16
|
+
opGet(keyPathStr: string): ValueType | null;
|
|
17
|
+
update(keys: KeyType[], valueFn: (origin: ValueType | null) => ValueType | null): void;
|
|
18
|
+
/** A fast get cache with `get` concat. */
|
|
19
|
+
opUpdate(keyPathStr: string, valueFn: (origin: ValueType | null) => ValueType | null): void;
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
export { Entity, KeyType };
|
package/dist/Cache.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
//#region src/Cache.ts
|
|
2
|
+
const SPLIT = "%";
|
|
3
|
+
/** Connect key with `SPLIT` */
|
|
4
|
+
function pathKey(keys) {
|
|
5
|
+
return keys.join(SPLIT);
|
|
6
|
+
}
|
|
7
|
+
/** Record update id for extract static style order. */
|
|
8
|
+
let updateId = 0;
|
|
9
|
+
var Entity = class {
|
|
10
|
+
instanceId;
|
|
11
|
+
constructor(instanceId) {
|
|
12
|
+
this.instanceId = instanceId;
|
|
13
|
+
}
|
|
14
|
+
/** @private Internal cache map. Do not access this directly */
|
|
15
|
+
cache = /* @__PURE__ */ new Map();
|
|
16
|
+
/** @private Record update times for each key */
|
|
17
|
+
updateTimes = /* @__PURE__ */ new Map();
|
|
18
|
+
extracted = /* @__PURE__ */ new Set();
|
|
19
|
+
get(keys) {
|
|
20
|
+
return this.opGet(pathKey(keys));
|
|
21
|
+
}
|
|
22
|
+
/** A fast get cache with `get` concat. */
|
|
23
|
+
opGet(keyPathStr) {
|
|
24
|
+
return this.cache.get(keyPathStr) || null;
|
|
25
|
+
}
|
|
26
|
+
update(keys, valueFn) {
|
|
27
|
+
return this.opUpdate(pathKey(keys), valueFn);
|
|
28
|
+
}
|
|
29
|
+
/** A fast get cache with `get` concat. */
|
|
30
|
+
opUpdate(keyPathStr, valueFn) {
|
|
31
|
+
const nextValue = valueFn(this.cache.get(keyPathStr));
|
|
32
|
+
if (nextValue === null) {
|
|
33
|
+
this.cache.delete(keyPathStr);
|
|
34
|
+
this.updateTimes.delete(keyPathStr);
|
|
35
|
+
} else {
|
|
36
|
+
this.cache.set(keyPathStr, nextValue);
|
|
37
|
+
this.updateTimes.set(keyPathStr, updateId);
|
|
38
|
+
updateId += 1;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
var Cache_default = Entity;
|
|
43
|
+
|
|
44
|
+
//#endregion
|
|
45
|
+
export { Cache_default as default, pathKey };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CSSInterpolation } from "./hooks/useStyleRegister.js";
|
|
2
|
+
|
|
3
|
+
//#region src/Keyframes.d.ts
|
|
4
|
+
declare class Keyframe {
|
|
5
|
+
private readonly name;
|
|
6
|
+
style: CSSInterpolation;
|
|
7
|
+
constructor(name: string, style: CSSInterpolation);
|
|
8
|
+
getName(hashId?: string): string;
|
|
9
|
+
_keyframe: boolean;
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Keyframe };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
//#region src/Keyframes.ts
|
|
2
|
+
var Keyframe = class {
|
|
3
|
+
name;
|
|
4
|
+
style;
|
|
5
|
+
constructor(name, style) {
|
|
6
|
+
this.name = name;
|
|
7
|
+
this.style = style;
|
|
8
|
+
}
|
|
9
|
+
getName(hashId = "") {
|
|
10
|
+
return hashId ? `${hashId}-${this.name}` : this.name;
|
|
11
|
+
}
|
|
12
|
+
_keyframe = true;
|
|
13
|
+
};
|
|
14
|
+
var Keyframes_default = Keyframe;
|
|
15
|
+
|
|
16
|
+
//#endregion
|
|
17
|
+
export { Keyframes_default as default };
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { Linter } from "./linters/interface.js";
|
|
2
|
+
import "./linters/index.js";
|
|
3
|
+
import { Entity, KeyType } from "./Cache.js";
|
|
4
|
+
import * as vue7 from "vue";
|
|
5
|
+
import { Ref } from "vue";
|
|
6
|
+
|
|
7
|
+
//#region src/StyleContext.d.ts
|
|
8
|
+
|
|
9
|
+
declare function createCache(): vue7.Raw<Entity>;
|
|
10
|
+
declare function useStyleContextProvide(props: Ref<StyleContextProps>): void;
|
|
11
|
+
declare function useStyleContext(): Ref<{
|
|
12
|
+
autoClear?: boolean
|
|
13
|
+
/** @private Test only. Not work in production. */ | undefined;
|
|
14
|
+
mock?: "server" | "client"
|
|
15
|
+
/**
|
|
16
|
+
* Only set when you need ssr to extract style on you own.
|
|
17
|
+
* If not provided, it will auto create <style /> on the end of Provider in server side.
|
|
18
|
+
*/ | undefined;
|
|
19
|
+
cache: {
|
|
20
|
+
instanceId: string;
|
|
21
|
+
cache: Map<string, [number, any]> & Omit<Map<string, [number, any]>, keyof Map<any, any>>;
|
|
22
|
+
updateTimes: Map<string, number> & Omit<Map<string, number>, keyof Map<any, any>>;
|
|
23
|
+
extracted: Set<string> & Omit<Set<string>, keyof Set<any>>;
|
|
24
|
+
get: (keys: KeyType[]) => [number, any] | null;
|
|
25
|
+
opGet: (keyPathStr: string) => [number, any] | null;
|
|
26
|
+
update: (keys: KeyType[], valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
|
|
27
|
+
opUpdate: (keyPathStr: string, valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
|
|
28
|
+
};
|
|
29
|
+
defaultCache: boolean;
|
|
30
|
+
hashPriority?: HashPriority
|
|
31
|
+
/** Tell cssinjs where to inject style in */ | undefined;
|
|
32
|
+
container?: (Element | ShadowRoot) | undefined;
|
|
33
|
+
ssrInline?: boolean
|
|
34
|
+
/** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
|
|
35
|
+
transformers?: {
|
|
36
|
+
flush?: TransformerFlushCallback<any> | undefined;
|
|
37
|
+
readableType?: undefined | undefined;
|
|
38
|
+
start?: TransformerStartCallback<any> | undefined;
|
|
39
|
+
transform?: TransformerTransformCallback<any, any> | undefined;
|
|
40
|
+
writableType?: undefined | undefined;
|
|
41
|
+
}[] | undefined;
|
|
42
|
+
linters?: Linter[]
|
|
43
|
+
/** Wrap css in a layer to avoid global style conflict */ | undefined;
|
|
44
|
+
layer?: boolean
|
|
45
|
+
/** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
|
|
46
|
+
autoPrefix?: boolean | undefined;
|
|
47
|
+
}, StyleContextProps | {
|
|
48
|
+
autoClear?: boolean
|
|
49
|
+
/** @private Test only. Not work in production. */ | undefined;
|
|
50
|
+
mock?: "server" | "client"
|
|
51
|
+
/**
|
|
52
|
+
* Only set when you need ssr to extract style on you own.
|
|
53
|
+
* If not provided, it will auto create <style /> on the end of Provider in server side.
|
|
54
|
+
*/ | undefined;
|
|
55
|
+
cache: {
|
|
56
|
+
instanceId: string;
|
|
57
|
+
cache: Map<string, [number, any]> & Omit<Map<string, [number, any]>, keyof Map<any, any>>;
|
|
58
|
+
updateTimes: Map<string, number> & Omit<Map<string, number>, keyof Map<any, any>>;
|
|
59
|
+
extracted: Set<string> & Omit<Set<string>, keyof Set<any>>;
|
|
60
|
+
get: (keys: KeyType[]) => [number, any] | null;
|
|
61
|
+
opGet: (keyPathStr: string) => [number, any] | null;
|
|
62
|
+
update: (keys: KeyType[], valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
|
|
63
|
+
opUpdate: (keyPathStr: string, valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
|
|
64
|
+
};
|
|
65
|
+
defaultCache: boolean;
|
|
66
|
+
hashPriority?: HashPriority
|
|
67
|
+
/** Tell cssinjs where to inject style in */ | undefined;
|
|
68
|
+
container?: (Element | ShadowRoot) | undefined;
|
|
69
|
+
ssrInline?: boolean
|
|
70
|
+
/** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
|
|
71
|
+
transformers?: {
|
|
72
|
+
flush?: TransformerFlushCallback<any> | undefined;
|
|
73
|
+
readableType?: undefined | undefined;
|
|
74
|
+
start?: TransformerStartCallback<any> | undefined;
|
|
75
|
+
transform?: TransformerTransformCallback<any, any> | undefined;
|
|
76
|
+
writableType?: undefined | undefined;
|
|
77
|
+
}[] | undefined;
|
|
78
|
+
linters?: Linter[]
|
|
79
|
+
/** Wrap css in a layer to avoid global style conflict */ | undefined;
|
|
80
|
+
layer?: boolean
|
|
81
|
+
/** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
|
|
82
|
+
autoPrefix?: boolean | undefined;
|
|
83
|
+
}>;
|
|
84
|
+
type HashPriority = 'low' | 'high';
|
|
85
|
+
interface StyleContextProps {
|
|
86
|
+
autoClear?: boolean;
|
|
87
|
+
/** @private Test only. Not work in production. */
|
|
88
|
+
mock?: 'server' | 'client';
|
|
89
|
+
/**
|
|
90
|
+
* Only set when you need ssr to extract style on you own.
|
|
91
|
+
* If not provided, it will auto create <style /> on the end of Provider in server side.
|
|
92
|
+
*/
|
|
93
|
+
cache: Entity;
|
|
94
|
+
/** Tell children that this context is default generated context */
|
|
95
|
+
defaultCache: boolean;
|
|
96
|
+
/** Use `:where` selector to reduce hashId css selector priority */
|
|
97
|
+
hashPriority?: HashPriority;
|
|
98
|
+
/** Tell cssinjs where to inject style in */
|
|
99
|
+
container?: Element | ShadowRoot;
|
|
100
|
+
/** Component wil render inline `<style />` for fallback in SSR. Not recommend. */
|
|
101
|
+
ssrInline?: boolean;
|
|
102
|
+
/** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
|
|
103
|
+
transformers?: Transformer[];
|
|
104
|
+
/**
|
|
105
|
+
* Linters to lint css before inject in document.
|
|
106
|
+
* Styles will be linted after transforming.
|
|
107
|
+
* Please note that `linters` do not support dynamic update.
|
|
108
|
+
*/
|
|
109
|
+
linters?: Linter[];
|
|
110
|
+
/** Wrap css in a layer to avoid global style conflict */
|
|
111
|
+
layer?: boolean;
|
|
112
|
+
/** Hardcode here since transformer not support take effect on serialize currently */
|
|
113
|
+
autoPrefix?: boolean;
|
|
114
|
+
}
|
|
115
|
+
type StyleProviderProps = StyleContextProps;
|
|
116
|
+
declare const StyleProvider: vue7.DefineSetupFnComponent<Partial<StyleContextProps>, {}, {}, Partial<StyleContextProps> & {}, vue7.PublicProps>;
|
|
117
|
+
//#endregion
|
|
118
|
+
export { StyleProvider, StyleProviderProps, createCache, useStyleContext, useStyleContextProvide };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import Cache_default from "./Cache.js";
|
|
2
|
+
import { computed, defineComponent, inject, markRaw, provide, ref } from "vue";
|
|
3
|
+
import defu from "defu";
|
|
4
|
+
|
|
5
|
+
//#region src/StyleContext.ts
|
|
6
|
+
const ATTR_TOKEN = "data-token-hash";
|
|
7
|
+
const ATTR_MARK = "data-css-hash";
|
|
8
|
+
const ATTR_CACHE_PATH = "data-cache-path";
|
|
9
|
+
const CSS_IN_JS_INSTANCE = "__cssinjs_instance__";
|
|
10
|
+
function createCache() {
|
|
11
|
+
const cssinjsInstanceId = Math.random().toString(12).slice(2);
|
|
12
|
+
if (typeof document !== "undefined" && document.head && document.body) {
|
|
13
|
+
const styles = document.body.querySelectorAll(`style[${ATTR_MARK}]`) || [];
|
|
14
|
+
const { firstChild } = document.head;
|
|
15
|
+
Array.from(styles).forEach((style) => {
|
|
16
|
+
style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
|
|
17
|
+
if (style[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) document.head.insertBefore(style, firstChild);
|
|
18
|
+
});
|
|
19
|
+
const styleHash = {};
|
|
20
|
+
Array.from(document.querySelectorAll(`style[${ATTR_MARK}]`)).forEach((style) => {
|
|
21
|
+
const hash = style.getAttribute(ATTR_MARK);
|
|
22
|
+
if (styleHash[hash]) {
|
|
23
|
+
if (style[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) style.parentNode?.removeChild(style);
|
|
24
|
+
} else styleHash[hash] = true;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
return markRaw(new Cache_default(cssinjsInstanceId));
|
|
28
|
+
}
|
|
29
|
+
const defaultStyleContext = {
|
|
30
|
+
defaultCache: true,
|
|
31
|
+
cache: createCache(),
|
|
32
|
+
hashPriority: "low",
|
|
33
|
+
autoPrefix: false
|
|
34
|
+
};
|
|
35
|
+
const StyleContextKey = Symbol("StyleContext");
|
|
36
|
+
function useStyleContextProvide(props) {
|
|
37
|
+
provide(StyleContextKey, props);
|
|
38
|
+
}
|
|
39
|
+
function useStyleContext() {
|
|
40
|
+
return inject(StyleContextKey, ref(defaultStyleContext));
|
|
41
|
+
}
|
|
42
|
+
const StyleProvider = defineComponent((props, { slots }) => {
|
|
43
|
+
const parentContext = useStyleContext();
|
|
44
|
+
useStyleContextProvide(computed(() => {
|
|
45
|
+
return defu(props, parentContext.value || defaultStyleContext);
|
|
46
|
+
}));
|
|
47
|
+
return () => {
|
|
48
|
+
return slots?.default?.();
|
|
49
|
+
};
|
|
50
|
+
}, { props: [
|
|
51
|
+
"cache",
|
|
52
|
+
"hashPriority",
|
|
53
|
+
"defaultCache",
|
|
54
|
+
"autoClear",
|
|
55
|
+
"layer",
|
|
56
|
+
"linters",
|
|
57
|
+
"container",
|
|
58
|
+
"mock",
|
|
59
|
+
"ssrInline",
|
|
60
|
+
"transformers"
|
|
61
|
+
] });
|
|
62
|
+
|
|
63
|
+
//#endregion
|
|
64
|
+
export { ATTR_CACHE_PATH, ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, StyleProvider, createCache, useStyleContext, useStyleContextProvide };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
//#region src/cssinjs-utils/_util/hooks/useUniqueMemo.ts
|
|
2
|
+
const BEAT_LIMIT = 1e3 * 60 * 10;
|
|
3
|
+
var ArrayKeyMap = class {
|
|
4
|
+
map = /* @__PURE__ */ new Map();
|
|
5
|
+
objectIDMap = /* @__PURE__ */ new WeakMap();
|
|
6
|
+
lastAccessBeat = /* @__PURE__ */ new Map();
|
|
7
|
+
nextID = 0;
|
|
8
|
+
accessBeat = 0;
|
|
9
|
+
set(keys, value) {
|
|
10
|
+
this.clear();
|
|
11
|
+
const compositeKey = this.getCompositeKey(keys);
|
|
12
|
+
this.map.set(compositeKey, value);
|
|
13
|
+
this.lastAccessBeat.set(compositeKey, Date.now());
|
|
14
|
+
}
|
|
15
|
+
get(keys) {
|
|
16
|
+
const compositeKey = this.getCompositeKey(keys);
|
|
17
|
+
const cache = this.map.get(compositeKey);
|
|
18
|
+
if (cache !== void 0) this.lastAccessBeat.set(compositeKey, Date.now());
|
|
19
|
+
this.accessBeat += 1;
|
|
20
|
+
return cache;
|
|
21
|
+
}
|
|
22
|
+
getCompositeKey(keys) {
|
|
23
|
+
return keys.map((key) => {
|
|
24
|
+
if (key && typeof key === "object") return `obj_${this.getObjectID(key)}`;
|
|
25
|
+
return `${typeof key}_${String(key)}`;
|
|
26
|
+
}).join("|");
|
|
27
|
+
}
|
|
28
|
+
getObjectID(obj) {
|
|
29
|
+
if (this.objectIDMap.has(obj)) return this.objectIDMap.get(obj);
|
|
30
|
+
const id = this.nextID;
|
|
31
|
+
this.objectIDMap.set(obj, id);
|
|
32
|
+
this.nextID += 1;
|
|
33
|
+
return id;
|
|
34
|
+
}
|
|
35
|
+
clear() {
|
|
36
|
+
if (this.accessBeat > 1e4) {
|
|
37
|
+
const now = Date.now();
|
|
38
|
+
this.lastAccessBeat.forEach((beat, key) => {
|
|
39
|
+
if (now - beat > BEAT_LIMIT) {
|
|
40
|
+
this.map.delete(key);
|
|
41
|
+
this.lastAccessBeat.delete(key);
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
this.accessBeat = 0;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const uniqueMap = new ArrayKeyMap();
|
|
49
|
+
/**
|
|
50
|
+
* Shared memoization helper across component instances.
|
|
51
|
+
*/
|
|
52
|
+
function useUniqueMemo(memoFn, deps) {
|
|
53
|
+
const cachedValue = uniqueMap.get(deps);
|
|
54
|
+
if (cachedValue !== void 0) return cachedValue;
|
|
55
|
+
const newValue = memoFn();
|
|
56
|
+
uniqueMap.set(deps, newValue);
|
|
57
|
+
return newValue;
|
|
58
|
+
}
|
|
59
|
+
var useUniqueMemo_default = useUniqueMemo;
|
|
60
|
+
|
|
61
|
+
//#endregion
|
|
62
|
+
export { useUniqueMemo_default as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { TokenType } from "../../theme/interface.js";
|
|
2
|
+
import { Theme } from "../../theme/Theme.js";
|
|
3
|
+
import { GlobalToken, OverrideTokenMap, TokenMap } from "../interface/components.js";
|
|
4
|
+
import { Ref } from "vue";
|
|
5
|
+
|
|
6
|
+
//#region src/cssinjs-utils/hooks/useToken.d.ts
|
|
7
|
+
type TokenMapWithTheme<CompTokenMap extends TokenMap, AliasToken extends TokenType, DesignToken extends TokenType> = { [key in keyof OverrideTokenMap<CompTokenMap, AliasToken>]?: OverrideTokenMap<CompTokenMap, AliasToken>[key] & {
|
|
8
|
+
theme?: Theme<DesignToken, AliasToken>;
|
|
9
|
+
} };
|
|
10
|
+
interface UseTokenReturn<CompTokenMap extends TokenMap, AliasToken extends TokenType, DesignToken extends TokenType> {
|
|
11
|
+
token: Ref<GlobalToken<CompTokenMap, AliasToken>>;
|
|
12
|
+
realToken?: Ref<GlobalToken<CompTokenMap, AliasToken>>;
|
|
13
|
+
theme?: Ref<Theme<DesignToken, AliasToken>>;
|
|
14
|
+
components?: Ref<TokenMapWithTheme<CompTokenMap, DesignToken, AliasToken>>;
|
|
15
|
+
hashId?: Ref<string>;
|
|
16
|
+
hashed?: Ref<string | boolean>;
|
|
17
|
+
cssVar?: Ref<{
|
|
18
|
+
prefix?: string;
|
|
19
|
+
key?: string;
|
|
20
|
+
}>;
|
|
21
|
+
zeroRuntime?: Ref<boolean>;
|
|
22
|
+
}
|
|
23
|
+
type UseToken<CompTokenMap extends TokenMap, AliasToken extends TokenType, DesignToken extends TokenType> = () => UseTokenReturn<CompTokenMap, AliasToken, DesignToken>;
|
|
24
|
+
//#endregion
|
|
25
|
+
export { UseToken };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ComponentToken, ComponentTokenKey, GlobalToken, GlobalTokenWithComponent, OverrideTokenMap, TokenMap, TokenMapKey } from "./interface/components.js";
|
|
2
|
+
import { CSSUtil, CSSVarRegisterProps, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, StyleInfo, SubStyleComponentProps, TokenWithCommonCls, genStyleUtils } from "./util/genStyleUtils.js";
|
|
3
|
+
import { merge, statistic, statisticToken } from "./util/statistic.js";
|
|
4
|
+
export { type CSSUtil, type CSSVarRegisterProps, type ComponentToken, type ComponentTokenKey, type FullToken, type GenStyleFn, type GetCompUnitless, type GetDefaultToken, type GetDefaultTokenFn, type GetResetStyles, type GlobalToken, type GlobalTokenWithComponent, type OverrideTokenMap, type StyleInfo, type SubStyleComponentProps, type TokenMap, type TokenMapKey, type TokenWithCommonCls, genStyleUtils, merge as mergeToken, statistic, statisticToken };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { TokenType } from "../../theme/interface.js";
|
|
2
|
+
|
|
3
|
+
//#region src/cssinjs-utils/interface/components.d.ts
|
|
4
|
+
type TokenMap = Record<PropertyKey, any>;
|
|
5
|
+
type TokenMapKey<CompTokenMap extends TokenMap> = Extract<keyof CompTokenMap, string>;
|
|
6
|
+
type GlobalToken<CompTokenMap extends TokenMap, AliasToken extends TokenType> = AliasToken & CompTokenMap;
|
|
7
|
+
type OverrideTokenMap<CompTokenMap extends TokenMap, AliasToken extends TokenType> = { [key in keyof CompTokenMap]: Partial<CompTokenMap[key]> & Partial<AliasToken> };
|
|
8
|
+
type GlobalTokenWithComponent<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = GlobalToken<CompTokenMap, AliasToken> & CompTokenMap[C];
|
|
9
|
+
type ComponentToken<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = Exclude<OverrideTokenMap<CompTokenMap, AliasToken>[C], undefined>;
|
|
10
|
+
type ComponentTokenKey<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = keyof ComponentToken<CompTokenMap, AliasToken, C>;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { ComponentToken, ComponentTokenKey, GlobalToken, GlobalTokenWithComponent, OverrideTokenMap, TokenMap, TokenMapKey };
|