@tarojs/parse-css-to-stylesheet 0.0.41 → 0.0.43
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 +114 -35
- package/index.d.ts +3 -1
- package/index.js +2 -1
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -10,19 +10,75 @@
|
|
|
10
10
|
import { parse } from '@tarojs/parse-css-to-stylesheet'
|
|
11
11
|
|
|
12
12
|
// Harmony
|
|
13
|
-
const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
13
|
+
const { code } = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
14
14
|
platformString: 'Harmony',
|
|
15
15
|
isEnableNesting: true // 支持解析嵌套选择器，默认关闭
|
|
16
16
|
})
|
|
17
|
+
// code: jsx代码 string
|
|
17
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
|
+
## 参数说明
|
|
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`中提供的几个包方法：
|
|
20
76
|
|
|
21
77
|
1. `convertNumber2VP` 用于运行时进行单位转换
|
|
22
78
|
2. `calcStaticStyle` 用于合成类，匹配类名
|
|
23
79
|
3. `__combine_nesting_style__` 嵌套样式的合成
|
|
24
80
|
|
|
25
|
-
具体位于 [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_ 中 -->
|
|
26
82
|
|
|
27
83
|
## 样式支持情况
|
|
28
84
|
|
|
@@ -45,12 +101,14 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
45
101
|
| flex-direction | 'row','row-reverse','column','column-reverse' | ✔️ |
|
|
46
102
|
| justify-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
47
103
|
| align-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
48
|
-
|
|
|
104
|
+
| align-items | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' | ✔️ |
|
|
49
105
|
| align-self | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
50
106
|
| flex-wrap | 'nowrap', 'wrap', 'wrap-reverse' | ❌ |
|
|
51
107
|
| position | 'relative', 'absolute' | ✔️ |
|
|
108
|
+
| position | 'flex' | ❌ |
|
|
52
109
|
| left | Length | ✔️ |
|
|
53
|
-
| top | Length |
|
|
110
|
+
| top | Length | ✔️ |
|
|
111
|
+
| bottom | Length | ❌ |
|
|
54
112
|
| right | Length | ❌ |
|
|
55
113
|
| z-zndex | Number | ✔️ |
|
|
56
114
|
| bottom | Length | ✔️ |
|
|
@@ -101,7 +159,8 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
101
159
|
| display | 'inline-block', 'inline-flex', 'inline' | ❌ |
|
|
102
160
|
| overflow | 'hidden', 'visible' | ✔️ |
|
|
103
161
|
| transform | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d | ✔️ |
|
|
104
|
-
| transform-origin | Length Length
|
|
162
|
+
| transform-origin | Length(top/center/bottom) Length(left/center/right) | ✔️ |
|
|
163
|
+
| animation | | 后续支持 |
|
|
105
164
|
| content | | ✔️ |
|
|
106
165
|
|
|
107
166
|
⚠️ 注意：
|
|
@@ -117,11 +176,12 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
117
176
|
| font-size | Length | ✔️ |
|
|
118
177
|
| font-family | | ✔️ |
|
|
119
178
|
| font-style | 'normal', 'italic' | ✔️ |
|
|
120
|
-
| font-weight | 100~900, 'bold','bolder','
|
|
179
|
+
| font-weight | 100~900, 'bold','bolder','lighter','normal' | ✔️ |
|
|
121
180
|
| line-height | 'XXpx' (需要指定具体指，不支持 Number) | ✔️ |
|
|
122
181
|
| text-align | 'center', 'left', 'right' | ✔️ |
|
|
123
182
|
| text-decoration | ('none', 'underline', 'line-through', 'overline') Color | ✔️ |
|
|
124
183
|
| text-overflow | 'ellipsis', 'clip' | ✔️ |
|
|
184
|
+
| vertical-align | 'middle', 'top', 'bottom' | ✔️ |
|
|
125
185
|
| color | Color | ✔️ |
|
|
126
186
|
| -webkit-line-clamp | Number | ✔️ |
|
|
127
187
|
|
|
@@ -165,37 +225,56 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
|
165
225
|
- 支持**类选择器**，
|
|
166
226
|
- 不支持**ID 选择器、标签选择器、属性选择器**
|
|
167
227
|
|
|
168
|
-
| 选择器 | 示例 | 示例说明 | Harmony |
|
|
169
|
-
| ------------------ | ------------------- | ------------------------------------------------------------ | :-----: |
|
|
170
|
-
| .class | .intro | 选择所有 class="intro" 的元素 | ✔️ |
|
|
171
|
-
| .class.class | .red.big | 选择所有 class="red big" 元素 | ✔️ |
|
|
172
|
-
| .class, .class | .item, .text | 选择所有 class="item" 元素和 class="text" 元素 | ✔️ |
|
|
173
|
-
| .class .class | .grandfather .child | 选择所有 class="grandfather" 内所有的 class="child" 的元素 | ✔️ |
|
|
174
|
-
| .class > .class | .parent > .child | 选择所有 父级是 class="parent"的 class="child" 元素 | ✔️ |
|
|
175
|
-
| .class+.class | .red+.big | 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 | ❌ |
|
|
176
|
-
| .class~.class | .red~.big | 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 | ❌ |
|
|
177
|
-
| #id | #firstname | 选择所有 id="firstname"的元素 | ❌ |
|
|
178
|
-
| \* | \* | 选择所有元素 | ❌ |
|
|
179
|
-
| element | p | 选择所有\<p>元素 | ❌ |
|
|
180
|
-
| \[attribute] | \[target] | 选择所有带有 target 属性元素 | ❌ |
|
|
181
|
-
| \[attribute=value] | \[target=blank] | 选择所有使用 target="blank"的元素 | ❌ |
|
|
182
|
-
| ... | | 其他 | ❌ |
|
|
183
|
-
|
|
184
|
-
### 伪元素
|
|
228
|
+
| 选择器 | 示例 | 示例说明 | Harmony | 备注 |
|
|
229
|
+
| ------------------ | ------------------- | ------------------------------------------------------------ | :-----: | :------: |
|
|
230
|
+
| .class | .intro | 选择所有 class="intro" 的元素 | ✔️ | |
|
|
231
|
+
| .class.class | .red.big | 选择所有 class="red big" 元素 | ✔️ | |
|
|
232
|
+
| .class, .class | .item, .text | 选择所有 class="item" 元素和 class="text" 元素 | ✔️ | |
|
|
233
|
+
| .class .class | .grandfather .child | 选择所有 class="grandfather" 内所有的 class="child" 的元素 | ✔️ | |
|
|
234
|
+
| .class > .class | .parent > .child | 选择所有 父级是 class="parent"的 class="child" 元素 | ✔️ | |
|
|
235
|
+
| .class+.class | .red+.big | 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 | ❌ | 后续支持 |
|
|
236
|
+
| .class~.class | .red~.big | 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 | ❌ | 后续支持 |
|
|
237
|
+
| #id | #firstname | 选择所有 id="firstname"的元素 | ❌ | |
|
|
238
|
+
| \* | \* | 选择所有元素 | ❌ | 不支持 |
|
|
239
|
+
| element | p | 选择所有\<p>元素 | ❌ | |
|
|
240
|
+
| \[attribute] | \[target] | 选择所有带有 target 属性元素 | ❌ | 不支持 |
|
|
241
|
+
| \[attribute=value] | \[target=blank] | 选择所有使用 target="blank"的元素 | ❌ | 不支持 |
|
|
242
|
+
| ... | | 其他 | ❌ | |
|
|
243
|
+
|
|
244
|
+
### 伪元素 / 伪类
|
|
185
245
|
|
|
186
246
|
- 支持**before、after**，
|
|
187
247
|
|
|
188
|
-
| 选择器 | 示例 | 示例说明 | 支持情况 |
|
|
189
|
-
| ----------------- | ------------------------ | ----------------------------------------------------------------- | :------: |
|
|
190
|
-
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ |
|
|
191
|
-
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ |
|
|
192
|
-
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ❌ |
|
|
193
|
-
| :nth-last-child() | .intro:nth-last-child(2) | 选择 class="intro" 元素是其父级的第二个子元素, 从最后一个子项计数 | ❌ |
|
|
194
|
-
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ❌ |
|
|
195
|
-
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ❌ |
|
|
196
|
-
| :root | :root | 选择文档的根元素 | ❌ |
|
|
197
|
-
| :checked | input:checked | 选择每个选中的输入元素 | ❌ |
|
|
198
|
-
| ... | | 其他 | ❌ |
|
|
248
|
+
| 选择器 | 示例 | 示例说明 | 支持情况 | 备注 |
|
|
249
|
+
| ----------------- | ------------------------ | ----------------------------------------------------------------- | :------: | :------: |
|
|
250
|
+
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ | |
|
|
251
|
+
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ | |
|
|
252
|
+
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ❌ | 后续支持 |
|
|
253
|
+
| :nth-last-child() | .intro:nth-last-child(2) | 选择 class="intro" 元素是其父级的第二个子元素, 从最后一个子项计数 | ❌ | 后续支持 |
|
|
254
|
+
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ❌ | 后续支持 |
|
|
255
|
+
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ❌ | 后续支持 |
|
|
256
|
+
| :root | :root | 选择文档的根元素 | ❌ | 后续支持 |
|
|
257
|
+
| :checked | input:checked | 选择每个选中的输入元素 | ❌ | |
|
|
258
|
+
| ... | | 其他 | ❌ | |
|
|
259
|
+
|
|
260
|
+
## CSS 变量
|
|
261
|
+
|
|
262
|
+
若使用 CSS 变量，挂载的属性应当挂载`:root`选择器上
|
|
263
|
+
|
|
264
|
+
⚠️：暂不支持`var传递3个及以上参数`, 如`height: var(--h, --he, 30px);`、`margin: var(--m, 30px 30px);`
|
|
265
|
+
|
|
266
|
+
```css
|
|
267
|
+
:root {
|
|
268
|
+
--color: #403635;
|
|
269
|
+
--angle: 30deg;
|
|
270
|
+
--var: var(--color, 30px);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.hello {
|
|
274
|
+
height: 30px;
|
|
275
|
+
color: var(--color);
|
|
276
|
+
}
|
|
277
|
+
```
|
|
199
278
|
|
|
200
279
|
## 常见问题
|
|
201
280
|
|
package/index.d.ts
CHANGED
|
@@ -9,5 +9,7 @@ export interface ParseOptions {
|
|
|
9
9
|
}
|
|
10
10
|
export interface ParseResult {
|
|
11
11
|
code: string
|
|
12
|
+
cssVariables?: string
|
|
12
13
|
}
|
|
13
|
-
export function parse(component: string, styles: Array<string>, options: ParseOptions):
|
|
14
|
+
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,6 +252,7 @@ if (!nativeBinding) {
|
|
|
252
252
|
throw new Error(`Failed to load native binding`)
|
|
253
253
|
}
|
|
254
254
|
|
|
255
|
-
const { parse } = nativeBinding
|
|
255
|
+
const { parse, combineCssVariables } = 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.43",
|
|
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.43",
|
|
59
|
+
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.43",
|
|
60
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.43",
|
|
61
|
+
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.43",
|
|
62
|
+
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.43",
|
|
63
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.43",
|
|
64
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.43",
|
|
65
|
+
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.43",
|
|
66
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.43",
|
|
67
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.43",
|
|
68
|
+
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.43",
|
|
69
|
+
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.43",
|
|
70
|
+
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.43"
|
|
71
71
|
}
|
|
72
72
|
}
|