@tarojs/parse-css-to-stylesheet 0.0.38 → 0.0.40
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 +219 -28
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -12,51 +12,242 @@ import { parse } from '@tarojs/parse-css-to-stylesheet'
|
|
|
12
12
|
// Harmony
|
|
13
13
|
const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
|
|
14
14
|
platformString: 'Harmony',
|
|
15
|
-
isEnableNesting: true //
|
|
15
|
+
isEnableNesting: true // 支持解析嵌套选择器，默认关闭
|
|
16
16
|
})
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
在 Harmony 中，编译结果会依赖`@tarojs/plugin-platform-harmony-ets`中提供的几个包方法：
|
|
20
|
+
|
|
21
|
+
1. `convertNumber2VP` 用于运行时进行单位转换
|
|
22
|
+
2. `calcStaticStyle` 用于合成类，匹配类名
|
|
23
|
+
3. `__combine_nesting_style__` 嵌套样式的合成
|
|
24
|
+
|
|
25
|
+
具体位于 [Taro 主仓](https://github.com/NervJS/taro) 路径：_/taro/packages/taro-platform-harmony/src/runtime-ets_ 中
|
|
26
|
+
|
|
27
|
+
## 样式支持情况
|
|
28
|
+
|
|
29
|
+
| 类型 | 举例合法值 | 备注 |
|
|
30
|
+
| ------ | ------------------------------------------------ | :-----------------: |
|
|
31
|
+
| Length | 10px、10vw、10vh、100%、10rem、calc(100% - 20px) | 1rem = 16px |
|
|
32
|
+
| Color | #f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green | 暂不支持 hsl 等方法 |
|
|
33
|
+
| Border | '1px solid #f00' | 符合 w3c 规范 |
|
|
34
|
+
|
|
35
|
+
### 通用属性
|
|
36
|
+
|
|
37
|
+
所有元素都支持的样式：
|
|
38
|
+
|
|
39
|
+
| 属性 | 可选值 / 单位 | 支持情况 |
|
|
40
|
+
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | :------: |
|
|
41
|
+
| flex | `flexGrow flexShrink flexBasis` | ✔️ |
|
|
42
|
+
| flex-grow | Number | ✔️ |
|
|
43
|
+
| flex-shrink | Number | ✔️ |
|
|
44
|
+
| flex-basis | Length | ✔️ |
|
|
45
|
+
| flex-direction | 'row','row-reverse','column','column-reverse' | ✔️ |
|
|
46
|
+
| justify-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
47
|
+
| align-content | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
|
|
48
|
+
| alignitems | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
49
|
+
| align-self | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
|
|
50
|
+
| flex-wrap | 'nowrap', 'wrap', 'wrap-reverse' | ❌ |
|
|
51
|
+
| position | 'relative', 'absolute' | ✔️ |
|
|
52
|
+
| left | Length | ✔️ |
|
|
53
|
+
| top | Length | ❌ |
|
|
54
|
+
| right | Length | ❌ |
|
|
55
|
+
| z-zndex | Number | ✔️ |
|
|
56
|
+
| bottom | Length | ✔️ |
|
|
57
|
+
| margin | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
|
|
58
|
+
| margin-top | Length | ✔️ |
|
|
59
|
+
| margin-right | Length | ✔️ |
|
|
60
|
+
| margin-bottom | Length | ✔️ |
|
|
61
|
+
| margin-left | Length | ✔️ |
|
|
62
|
+
| padding | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
|
|
63
|
+
| padding-top | Length | ✔️ |
|
|
64
|
+
| padding-right | Length | ✔️ |
|
|
65
|
+
| padding-bottom | Length | ✔️ |
|
|
66
|
+
| padding-left | Length | ✔️ |
|
|
67
|
+
| width | Length | ✔️ |
|
|
68
|
+
| height | Length | ✔️ |
|
|
69
|
+
| min-height | Length | ✔️ |
|
|
70
|
+
| min-width | Length | ✔️ |
|
|
71
|
+
| max-height | Length | ✔️ |
|
|
72
|
+
| max-eidth | Length | ✔️ |
|
|
73
|
+
| background | | ✔️ |
|
|
74
|
+
| background-color | Color | ✔️ |
|
|
75
|
+
| background-image | "src('xxx')", "linear-gradient(xxx)" 支持图片资源和线性渐变 | ✔️ |
|
|
76
|
+
| background-size | 'cover', 'contain', Length(x y), Length(x) Length(y) | ✔️ |
|
|
77
|
+
| background-position | center', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y) | ✔️ |
|
|
78
|
+
| background-repeat | 'repeat', 'no-repeat', 'repeat-x', 'repeat-y' | ✔️ |
|
|
79
|
+
| border | Border（可设置 4 个值，控制 4 个方向） | ✔️ |
|
|
80
|
+
| border-top | Border | ✔️ |
|
|
81
|
+
| border-left | Border | ✔️ |
|
|
82
|
+
| border-right | Border | ✔️ |
|
|
83
|
+
| border-bottom | Border | ✔️ |
|
|
84
|
+
| border-color | Color（可设置 4 个值，控制 4 个方向） | ✔️ |
|
|
85
|
+
| border-top-color | Color | ✔️ |
|
|
86
|
+
| border-right-color | Color | ✔️ |
|
|
87
|
+
| border-bottom-color | Color | ✔️ |
|
|
88
|
+
| border-left-color | Color | ✔️ |
|
|
89
|
+
| border-radius | Length（可设置 4 个值，控制 4 个方向） | ✔️ |
|
|
90
|
+
| border-top-left-radius | Length | ✔️ |
|
|
91
|
+
| border-top-right-radius | Length | ✔️ |
|
|
92
|
+
| border-bottom-left-radius | Length | ✔️ |
|
|
93
|
+
| border-bottom-right-radius | Length | ✔️ |
|
|
94
|
+
| border-style | 'dotted', 'dashed', 'solid' （4 个值，控制 4 个方向） | ✔️ |
|
|
95
|
+
| border-top-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
96
|
+
| border-right-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
97
|
+
| border-bottom-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
98
|
+
| border-left-style | 'dotted', 'dashed', 'solid' | ✔️ |
|
|
99
|
+
| opacity | Number | ✔️ |
|
|
100
|
+
| display | 'flex', 'none', 'block' | ✔️ |
|
|
101
|
+
| display | 'inline-block', 'inline-flex', 'inline' | ❌ |
|
|
102
|
+
| overflow | 'hidden', 'visible' | ✔️ |
|
|
103
|
+
| transform | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d | ✔️ |
|
|
104
|
+
| transform-origin | Length Length | ✔️ |
|
|
105
|
+
| content | | ✔️ |
|
|
106
|
+
|
|
107
|
+
⚠️ 注意：
|
|
108
|
+
|
|
109
|
+
- `transform` 不允许连续出现 2 个同类型如：transform: translate(20px 20px) translate3d(10px, 30px, 30px)
|
|
110
|
+
- `display` 不支持**行内**
|
|
111
|
+
- 定位不支持 **bottom** 和 **right**
|
|
112
|
+
|
|
113
|
+
### 文本样式
|
|
114
|
+
|
|
115
|
+
| 属性 | 可选值 / 单位 | 支持情况 |
|
|
116
|
+
| ------------------ | ------------------------------------------------------- | :------: |
|
|
117
|
+
| font-size | Length | ✔️ |
|
|
118
|
+
| font-family | | ✔️ |
|
|
119
|
+
| font-style | 'normal', 'italic' | ✔️ |
|
|
120
|
+
| font-weight | 100~900, 'bold','bolder','light','lighter','normal' | ✔️ |
|
|
121
|
+
| line-height | 'XXpx' (需要指定具体指，不支持 Number) | ✔️ |
|
|
122
|
+
| text-align | 'center', 'left', 'right' | ✔️ |
|
|
123
|
+
| text-decoration | ('none', 'underline', 'line-through', 'overline') Color | ✔️ |
|
|
124
|
+
| text-overflow | 'ellipsis', 'clip' | ✔️ |
|
|
125
|
+
| color | Color | ✔️ |
|
|
126
|
+
| -webkit-line-clamp | Number | ✔️ |
|
|
127
|
+
|
|
128
|
+
⚠️ 注意：
|
|
129
|
+
|
|
130
|
+
- 文本样式 **仅对`<Text></Text>`节点生效**
|
|
131
|
+
- 文本样式 **不支持继承**
|
|
132
|
+
- `line-height`**不支持数值**
|
|
133
|
+
|
|
134
|
+
**以下两种情况是正确的对文本进行样式添加的案例：**
|
|
135
|
+
|
|
136
|
+
1.直接将样式添加在`<Text/>`上
|
|
137
|
+
|
|
138
|
+
```jsx
|
|
139
|
+
// ✅ 允许
|
|
140
|
+
<Text className="txt">hello</Text>
|
|
141
|
+
```
|
|
20
142
|
|
|
21
|
-
|
|
143
|
+
2.样式添加到`<View/>`下是一个文本内容
|
|
22
144
|
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
145
|
+
```jsx
|
|
146
|
+
// ✅ 允许
|
|
147
|
+
<View className="txt">hello</View>
|
|
27
148
|
```
|
|
28
149
|
|
|
29
|
-
|
|
150
|
+
**错误案例：**
|
|
30
151
|
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
152
|
+
```jsx
|
|
153
|
+
// ❌ hello 父级没有添加文本样式，txt的文本属性无法继承下去
|
|
154
|
+
<View className="txt">
|
|
155
|
+
<Text>hello</Text>
|
|
156
|
+
</View>
|
|
35
157
|
```
|
|
36
158
|
|
|
37
|
-
|
|
159
|
+
## CSS 选择器
|
|
38
160
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
161
|
+
### 通用选择器
|
|
162
|
+
|
|
163
|
+
注意点：
|
|
164
|
+
|
|
165
|
+
- 支持**类选择器**，
|
|
166
|
+
- 不支持**ID 选择器、标签选择器、属性选择器**
|
|
167
|
+
|
|
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
|
+
### 伪类
|
|
185
|
+
|
|
186
|
+
- 支持**before、after**，
|
|
187
|
+
|
|
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
|
+
| ... | | 其他 | ❌ |
|
|
199
|
+
|
|
200
|
+
## 常见问题
|
|
201
|
+
|
|
202
|
+
### 1. 跨组件传递 className、style
|
|
203
|
+
|
|
204
|
+
#### ❌ 错误做法
|
|
205
|
+
|
|
206
|
+
比如业务上针对`@tarojs/components`的组件进行重导出，如引入了`Image`，对其进行了**二次封装**，然后通过一个入口统一导出如：
|
|
207
|
+
|
|
208
|
+
```js
|
|
209
|
+
// ./components.js
|
|
210
|
+
import { View, Text } from "@tarojs/components";
|
|
211
|
+
|
|
212
|
+
// 这里的Image实际上是对TaroImage的二次封装，一样的暴露出style和classname使用
|
|
213
|
+
export { default as Image } from "./xxxx";
|
|
43
214
|
```
|
|
44
215
|
|
|
45
|
-
|
|
216
|
+
- 在 Taro 编译的视角来看`<Image/>`已经是一个**自定义组件**，并且它接收了`className`，也就说明了它的类名其实是往下传递了，我们会在运行时进行**样式合成**
|
|
217
|
+
- `<View/>`和`<Text/>`其实是原封不动的直接导出的，本质上它并不是一个自定义组件，所以 Taro 在编译时，会在**编译阶段将样式赋予上去**
|
|
218
|
+
|
|
219
|
+
```js
|
|
220
|
+
// 注意：这里的组件从统一入口进行导入
|
|
221
|
+
import { View, Image } from "./components";
|
|
46
222
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
223
|
+
function Index() {
|
|
224
|
+
return (
|
|
225
|
+
<View className="xxx">
|
|
226
|
+
<Image className="xxxxxx" />
|
|
227
|
+
</View>
|
|
228
|
+
);
|
|
50
229
|
}
|
|
51
230
|
```
|
|
52
231
|
|
|
53
|
-
|
|
232
|
+
但是问题来了，这里在实际使用时，`<View/>`和`<Image/>`都是通过`'./components'`导入，编译阶段无法知道他们是**Taro 组件**还是**自定义组件**，顾在实际运行时，都会视为**自定义组件**对待
|
|
54
233
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
234
|
+
因为**自定义组件**是在**运行时动态合成样式**，顾性能远不及**Taro 组件**
|
|
235
|
+
|
|
236
|
+
#### ✅ 正确做法
|
|
237
|
+
|
|
238
|
+
如果 Taro 组件没有二次封装，我们建议从`@tarojs/components`导入，提供编译的优化效果
|
|
239
|
+
|
|
240
|
+
```js
|
|
241
|
+
// 自定义组件引入
|
|
242
|
+
import { Image } from "./components";
|
|
243
|
+
// Taro组件引入
|
|
244
|
+
import { View } from "@tarojs/components";
|
|
245
|
+
|
|
246
|
+
function Index() {
|
|
247
|
+
return (
|
|
248
|
+
<View className="xxx">
|
|
249
|
+
<Image className="xxxxxx" />
|
|
250
|
+
</View>
|
|
251
|
+
);
|
|
61
252
|
}
|
|
62
253
|
```
|
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.40",
|
|
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.40",
|
|
59
|
+
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.40",
|
|
60
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.40",
|
|
61
|
+
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.40",
|
|
62
|
+
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.40",
|
|
63
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.40",
|
|
64
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.40",
|
|
65
|
+
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.40",
|
|
66
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.40",
|
|
67
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.40",
|
|
68
|
+
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.40",
|
|
69
|
+
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.40",
|
|
70
|
+
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.40"
|
|
71
71
|
}
|
|
72
72
|
}
|