@tarojs/parse-css-to-stylesheet 0.0.45 → 0.0.46
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/README.md +16 -41
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -17,24 +17,6 @@ const { code } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
17
17
|
// code: jsx代码 string
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
### css 变量打包
|
|
21
|
-
|
|
22
|
-
如果需要支持 css 变量的打包，需要将出参`cssVariables`进行二次编译，如下例子所示：
|
|
23
|
-
|
|
24
|
-
```typescript
|
|
25
|
-
import { parse, combineCssVariables } from '@tarojs/parse-css-to-stylesheet'
|
|
26
|
-
|
|
27
|
-
// Harmony
|
|
28
|
-
const { code: CodeA, cssVariables: cssVariablesA } = parse(jsxCodeA, [cssRootVarCode, cssCodeA, ...], {
|
|
29
|
-
platformString: 'Harmony'
|
|
30
|
-
})
|
|
31
|
-
const { code: codeB, cssVariables: cssVariablesB } = parse(jsxCodeB, [cssRootVarCode, cssCodeB, ...], {
|
|
32
|
-
platformString: 'Harmony'
|
|
33
|
-
})
|
|
34
|
-
// 获取合并后的css变量代码
|
|
35
|
-
const css_variable_code: String = cssVariables([cssVariablesA, cssVariablesB])
|
|
36
|
-
```
|
|
37
|
-
|
|
38
20
|
## 参数说明
|
|
39
21
|
|
|
40
22
|
```typescript
|
|
@@ -44,7 +26,6 @@ export interface ParseOptions {
|
|
|
44
26
|
}
|
|
45
27
|
export interface ParseResult {
|
|
46
28
|
code: string; // 输出的jsxcode
|
|
47
|
-
cssVariables?: string; // css变量字符串片段
|
|
48
29
|
}
|
|
49
30
|
|
|
50
31
|
// 样式解析
|
|
@@ -53,9 +34,6 @@ export function parse(
|
|
|
53
34
|
styles: Array<string>,
|
|
54
35
|
options: ParseOptions
|
|
55
36
|
): ParseResult;
|
|
56
|
-
|
|
57
|
-
// 合并css变量字符串片段，输出运行的代码字符
|
|
58
|
-
export function combineCssVariables(variables: Array<string>): string | null;
|
|
59
37
|
```
|
|
60
38
|
|
|
61
39
|
#### ParseOptions
|
|
@@ -67,18 +45,17 @@ export function combineCssVariables(variables: Array<string>): string | null;
|
|
|
67
45
|
|
|
68
46
|
#### ParseResult
|
|
69
47
|
|
|
70
|
-
| 配置参数
|
|
71
|
-
|
|
|
72
|
-
| code
|
|
73
|
-
| cssVariables | Boolean | CSS 变量字符串片段 |
|
|
48
|
+
| 配置参数 | 类型 | 说明 |
|
|
49
|
+
| -------- | ------ | ------------------------- |
|
|
50
|
+
| code | String | 经过样式解析后的 JSX 代码 |
|
|
74
51
|
|
|
75
|
-
|
|
52
|
+
在 Harmony 中，编译结果会依赖`@tarojs/plugin-platform-harmony-ets`中提供的几个包方法：
|
|
76
53
|
|
|
77
54
|
1. `convertNumber2VP` 用于运行时进行单位转换
|
|
78
55
|
2. `calcStaticStyle` 用于合成类，匹配类名
|
|
79
56
|
3. `__combine_nesting_style__` 嵌套样式的合成
|
|
80
57
|
|
|
81
|
-
具体位于 [Taro 主仓](https://github.com/NervJS/taro) 路径：_/taro/packages/taro-platform-harmony/src/runtime-ets_ 中
|
|
58
|
+
具体位于 [Taro 主仓](https://github.com/NervJS/taro) 路径：_/taro/packages/taro-platform-harmony/src/runtime-ets_ 中
|
|
82
59
|
|
|
83
60
|
## 样式支持情况
|
|
84
61
|
|
|
@@ -110,7 +87,7 @@ export function combineCssVariables(variables: Array<string>): string | null;
|
|
|
110
87
|
| top | Length | ✔️ |
|
|
111
88
|
| bottom | Length | ❌ |
|
|
112
89
|
| right | Length | ❌ |
|
|
113
|
-
| z-
|
|
90
|
+
| z-index | Number | ✔️ |
|
|
114
91
|
| bottom | Length | ✔️ |
|
|
115
92
|
| margin | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
|
|
116
93
|
| margin-top | Length | ✔️ |
|
|
@@ -127,7 +104,7 @@ export function combineCssVariables(variables: Array<string>): string | null;
|
|
|
127
104
|
| min-height | Length | ✔️ |
|
|
128
105
|
| min-width | Length | ✔️ |
|
|
129
106
|
| max-height | Length | ✔️ |
|
|
130
|
-
| max-
|
|
107
|
+
| max-width | Length | ✔️ |
|
|
131
108
|
| background | | ✔️ |
|
|
132
109
|
| background-color | Color | ✔️ |
|
|
133
110
|
| background-image | "src('xxx')", "linear-gradient(xxx)" 支持图片资源和线性渐变 | ✔️ |
|
|
@@ -245,17 +222,15 @@ export function combineCssVariables(variables: Array<string>): string | null;
|
|
|
245
222
|
|
|
246
223
|
- 支持**before、after**，
|
|
247
224
|
|
|
248
|
-
| 选择器
|
|
249
|
-
|
|
|
250
|
-
| :before
|
|
251
|
-
| :after
|
|
252
|
-
| :nth-child()
|
|
253
|
-
| :
|
|
254
|
-
| :
|
|
255
|
-
| :
|
|
256
|
-
|
|
|
257
|
-
| :checked | input:checked | 选择每个选中的输入元素 | ❌ | |
|
|
258
|
-
| ... | | 其他 | ❌ | |
|
|
225
|
+
| 选择器 | 示例 | 示例说明 | 支持情况 | 备注 |
|
|
226
|
+
| ------------ | ------------------- | --------------------------------------------- | :------: | :--: |
|
|
227
|
+
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ | |
|
|
228
|
+
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ | |
|
|
229
|
+
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ✔️ | |
|
|
230
|
+
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ✔️ | |
|
|
231
|
+
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ✔️ | |
|
|
232
|
+
| :checked | input:checked | 选择每个选中的输入元素 | ❌ | |
|
|
233
|
+
| ... | | 其他 | ❌ | |
|
|
259
234
|
|
|
260
235
|
## CSS 变量
|
|
261
236
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tarojs/parse-css-to-stylesheet",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.46",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"napi": {
|
|
@@ -55,18 +55,18 @@
|
|
|
55
55
|
"packageManager": "yarn@3.6.4",
|
|
56
56
|
"repository": "https://github.com/NervJS/parse-css-to-stylesheet",
|
|
57
57
|
"optionalDependencies": {
|
|
58
|
-
"@tarojs/parse-css-to-stylesheet-win32-x64-msvc": "0.0.
|
|
59
|
-
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.
|
|
60
|
-
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.
|
|
61
|
-
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.
|
|
62
|
-
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.
|
|
63
|
-
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.
|
|
64
|
-
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.
|
|
65
|
-
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.
|
|
66
|
-
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.
|
|
67
|
-
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.
|
|
68
|
-
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.
|
|
69
|
-
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.
|
|
70
|
-
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.
|
|
58
|
+
"@tarojs/parse-css-to-stylesheet-win32-x64-msvc": "0.0.46",
|
|
59
|
+
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.46",
|
|
60
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.46",
|
|
61
|
+
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.46",
|
|
62
|
+
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.46",
|
|
63
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.46",
|
|
64
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.46",
|
|
65
|
+
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.46",
|
|
66
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.46",
|
|
67
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.46",
|
|
68
|
+
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.46",
|
|
69
|
+
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.46",
|
|
70
|
+
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.46"
|
|
71
71
|
}
|
|
72
72
|
}
|