@tarojs/parse-css-to-stylesheet 0.0.37 → 0.0.39
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 +173 -37
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -12,51 +12,187 @@ 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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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>
|
|
27
141
|
```
|
|
28
142
|
|
|
29
|
-
|
|
143
|
+
2.样式添加到`<View/>`下是一个文本内容
|
|
30
144
|
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
145
|
+
```jsx
|
|
146
|
+
// ✅ 允许
|
|
147
|
+
<View className="txt">hello</View>
|
|
35
148
|
```
|
|
36
149
|
|
|
37
|
-
|
|
150
|
+
**错误案例：**
|
|
38
151
|
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
152
|
+
```jsx
|
|
153
|
+
// ❌ hello 父级没有添加文本样式，txt的文本属性无法继承下去
|
|
154
|
+
<View className="txt">
|
|
155
|
+
<Text>hello</Text>
|
|
156
|
+
</View>
|
|
43
157
|
```
|
|
44
158
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
159
|
+
## CSS 选择器
|
|
160
|
+
|
|
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
|
+
| ... | | 其他 | ❌ |
|
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.39",
|
|
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.39",
|
|
59
|
+
"@tarojs/parse-css-to-stylesheet-darwin-x64": "0.0.39",
|
|
60
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-gnu": "0.0.39",
|
|
61
|
+
"@tarojs/parse-css-to-stylesheet-darwin-arm64": "0.0.39",
|
|
62
|
+
"@tarojs/parse-css-to-stylesheet-android-arm64": "0.0.39",
|
|
63
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-gnu": "0.0.39",
|
|
64
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm64-musl": "0.0.39",
|
|
65
|
+
"@tarojs/parse-css-to-stylesheet-win32-arm64-msvc": "0.0.39",
|
|
66
|
+
"@tarojs/parse-css-to-stylesheet-linux-arm-gnueabihf": "0.0.39",
|
|
67
|
+
"@tarojs/parse-css-to-stylesheet-linux-x64-musl": "0.0.39",
|
|
68
|
+
"@tarojs/parse-css-to-stylesheet-win32-ia32-msvc": "0.0.39",
|
|
69
|
+
"@tarojs/parse-css-to-stylesheet-android-arm-eabi": "0.0.39",
|
|
70
|
+
"@tarojs/parse-css-to-stylesheet-darwin-universal": "0.0.39"
|
|
71
71
|
}
|
|
72
72
|
}
|