@tarojs/parse-css-to-stylesheet 0.0.42 → 0.0.44
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 +64 -8
- package/index.d.ts +0 -2
- package/index.js +1 -2
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -10,21 +10,75 @@
|
|
|
10
10
|
import { parse } from '@tarojs/parse-css-to-stylesheet'
|
|
11
11
|
|
|
12
12
|
// Harmony
|
|
13
|
-
const { code
|
|
13
|
+
const { code } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
14
14
|
platformString: 'Harmony',
|
|
15
15
|
isEnableNesting: true // 支持解析嵌套选择器，默认关闭
|
|
16
16
|
})
|
|
17
17
|
// code: jsx代码 string
|
|
18
|
-
// cssVariables: css变量 string
|
|
19
18
|
```
|
|
20
19
|
|
|
21
|
-
|
|
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
|
+
## 参数说明
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
export interface ParseOptions {
|
|
42
|
+
platformString: string; // 平台：'Harmony'
|
|
43
|
+
isEnableNesting?: boolean; // 是否支持嵌套解析
|
|
44
|
+
}
|
|
45
|
+
export interface ParseResult {
|
|
46
|
+
code: string; // 输出的jsxcode
|
|
47
|
+
cssVariables?: string; // css变量字符串片段
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// 样式解析
|
|
51
|
+
export function parse(
|
|
52
|
+
component: string,
|
|
53
|
+
styles: Array<string>,
|
|
54
|
+
options: ParseOptions
|
|
55
|
+
): ParseResult;
|
|
56
|
+
|
|
57
|
+
// 合并css变量字符串片段，输出运行的代码字符
|
|
58
|
+
export function combineCssVariables(variables: Array<string>): string | null;
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
#### ParseOptions
|
|
62
|
+
|
|
63
|
+
| 配置参数 | 类型 | 可选值 | 说明 |
|
|
64
|
+
| --------------- | ------- | ------------------------ | ---------------- |
|
|
65
|
+
| platformString | String | 'Harmony'、'ReactNative' | 平台 |
|
|
66
|
+
| isEnableNesting | Boolean | | 样式嵌套解析开关 |
|
|
67
|
+
|
|
68
|
+
#### ParseResult
|
|
69
|
+
|
|
70
|
+
| 配置参数 | 类型 | 说明 |
|
|
71
|
+
| ------------ | ------- | ------------------------- |
|
|
72
|
+
| code | String | 经过样式解析后的 JSX 代码 |
|
|
73
|
+
| cssVariables | Boolean | CSS 变量字符串片段 |
|
|
74
|
+
|
|
75
|
+
<!-- 在 Harmony 中，编译结果会依赖`@tarojs/plugin-platform-harmony-ets`中提供的几个包方法：
|
|
22
76
|
|
|
23
77
|
1. `convertNumber2VP` 用于运行时进行单位转换
|
|
24
78
|
2. `calcStaticStyle` 用于合成类，匹配类名
|
|
25
79
|
3. `__combine_nesting_style__` 嵌套样式的合成
|
|
26
80
|
|
|
27
|
-
具体位于 [Taro 主仓](https://github.com/NervJS/taro) 路径：_/taro/packages/taro-platform-harmony/src/runtime-ets_ 中
|
|
81
|
+
具体位于 [Taro 主仓](https://github.com/NervJS/taro) 路径：_/taro/packages/taro-platform-harmony/src/runtime-ets_ 中 -->
|
|
28
82
|
|
|
29
83
|
## 样式支持情况
|
|
30
84
|
|
|
@@ -47,13 +101,14 @@ const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
47
101
|
| flex-direction | 'row','row-reverse','column','column-reverse' | ✔️ |
|
|
48
102
|
| justify-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
49
103
|
| align-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
50
|
-
|
|
|
104
|
+
| align-items | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' | ✔️ |
|
|
51
105
|
| align-self | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
52
106
|
| flex-wrap | 'nowrap', 'wrap', 'wrap-reverse' | ❌ |
|
|
53
107
|
| position | 'relative', 'absolute' | ✔️ |
|
|
54
108
|
| position | 'flex' | ❌ |
|
|
55
109
|
| left | Length | ✔️ |
|
|
56
|
-
| top | Length |
|
|
110
|
+
| top | Length | ✔️ |
|
|
111
|
+
| bottom | Length | ❌ |
|
|
57
112
|
| right | Length | ❌ |
|
|
58
113
|
| z-zndex | Number | ✔️ |
|
|
59
114
|
| bottom | Length | ✔️ |
|
|
@@ -104,7 +159,7 @@ const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
104
159
|
| display | 'inline-block', 'inline-flex', 'inline' | ❌ |
|
|
105
160
|
| overflow | 'hidden', 'visible' | ✔️ |
|
|
106
161
|
| transform | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d | ✔️ |
|
|
107
|
-
| transform-origin | Length Length
|
|
162
|
+
| transform-origin | Length(top/center/bottom) Length(left/center/right) | ✔️ |
|
|
108
163
|
| animation | | 后续支持 |
|
|
109
164
|
| content | | ✔️ |
|
|
110
165
|
|
|
@@ -121,11 +176,12 @@ const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
121
176
|
| font-size | Length | ✔️ |
|
|
122
177
|
| font-family | | ✔️ |
|
|
123
178
|
| font-style | 'normal', 'italic' | ✔️ |
|
|
124
|
-
| font-weight | 100~900, 'bold','bolder','
|
|
179
|
+
| font-weight | 100~900, 'bold','bolder','lighter','normal' | ✔️ |
|
|
125
180
|
| line-height | 'XXpx' (需要指定具体指，不支持 Number) | ✔️ |
|
|
126
181
|
| text-align | 'center', 'left', 'right' | ✔️ |
|
|
127
182
|
| text-decoration | ('none', 'underline', 'line-through', 'overline') Color | ✔️ |
|
|
128
183
|
| text-overflow | 'ellipsis', 'clip' | ✔️ |
|
|
184
|
+
| vertical-align | 'middle', 'top', 'bottom' | ✔️ |
|
|
129
185
|
| color | Color | ✔️ |
|
|
130
186
|
| -webkit-line-clamp | Number | ✔️ |
|
|
131
187
|
|
package/index.d.ts
CHANGED
|
@@ -9,7 +9,5 @@ export interface ParseOptions {
|
|
|
9
9
|
}
|
|
10
10
|
export interface ParseResult {
|
|
11
11
|
code: string
|
|
12
|
-
cssVariables?: string
|
|
13
12
|
}
|
|
14
13
|
export function parse(component: string, styles: Array<string>, options: ParseOptions): ParseResult
|
|
15
|
-
export function combineCssVariables(variables: Array<string>): string | null
|
package/index.js
CHANGED
|
@@ -252,7 +252,6 @@ if (!nativeBinding) {
|
|
|
252
252
|
throw new Error(`Failed to load native binding`)
|
|
253
253
|
}
|
|
254
254
|
|
|
255
|
-
const { parse
|
|
255
|
+
const { parse } = nativeBinding
|
|
256
256
|
|
|
257
257
|
module.exports.parse = parse
|
|
258
|
-
module.exports.combineCssVariables = combineCssVariables
|
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.44",
|
|
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.44",
|
|
59
|
+
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.44",
|
|
60
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.44",
|
|
61
|
+
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.44",
|
|
62
|
+
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.44",
|
|
63
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.44",
|
|
64
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.44",
|
|
65
|
+
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.44",
|
|
66
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.44",
|
|
67
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.44",
|
|
68
|
+
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.44",
|
|
69
|
+
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.44",
|
|
70
|
+
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.44"
|
|
71
71
|
}
|
|
72
72
|
}
|