Skip to content

Commit af28f66

Browse files
committed
docs: 更新文档
1 parent 1d69193 commit af28f66

File tree

1 file changed

+58
-4
lines changed

1 file changed

+58
-4
lines changed

README.md

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,75 @@
1010
import { parse } from '@tarojs/parse-css-to-stylesheet'
1111

1212
// Harmony
13-
const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], {
13+
const { code } = parse(jsxCode, [cssCode1, cssCode2, ...], {
1414
platformString: 'Harmony',
1515
isEnableNesting: true // 支持解析嵌套选择器,默认关闭
1616
})
1717
// code: jsx代码 string
18-
// cssVariables: css变量 string
1918
```
2019

21-
在 Harmony 中,编译结果会依赖`@tarojs/plugin-platform-harmony-ets`中提供的几个包方法:
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`中提供的几个包方法:
2276
2377
1. `convertNumber2VP` 用于运行时进行单位转换
2478
2. `calcStaticStyle` 用于合成类,匹配类名
2579
3. `__combine_nesting_style__` 嵌套样式的合成
2680
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_ 中 -->
2882

2983
## 样式支持情况
3084

0 commit comments

Comments
 (0)