|
10 | 10 | import { parse } from '@tarojs/parse-css-to-stylesheet'
|
11 | 11 |
|
12 | 12 | // Harmony
|
13 |
| -const { code, cssVariables } = parse(jsxCode, [cssCode1, cssCode2, ...], { |
| 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 |
| -在 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`中提供的几个包方法: |
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 |
|
|
0 commit comments