Skip to content

Commit 097ecfe

Browse files
heiazuheiazu
committed
docs: 更新文档
1 parent 244b44f commit 097ecfe

File tree

1 file changed

+165
-37
lines changed

1 file changed

+165
-37
lines changed

‎README.md‎

Lines changed: 165 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,51 +12,179 @@ import { parse } from '@tarojs/parse-css-to-stylesheet'
1212
// Harmony
1313
const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
1414
platformString: 'Harmony',
15-
isEnableNesting: true // 支持生成嵌套选择器
15+
isEnableNesting: true // 支持解析嵌套选择器，默认关闭
1616
})
1717
```
1818

19-
## 支持选择器
20-
21-
#### 类选择器
22-
23-
```css
24-
.item {
25-
/* ... */
26-
}
19+
## 样式支持情况
20+
21+
| 类型 | 举例合法值 | 备注 |
22+
| ------ | ------------------------------------------------ | :-----------------: |
23+
| Length | 10px、10vw、10vh、100%、10rem、calc(100% - 20px) | 1rem = 16px |
24+
| Color | #f00、rgb(0,0,0)、rgba(0,0,0,0.2)、green | 暂不支持 hsl 等方法 |
25+
| Border | '1px solid #f00' | 符合 w3c 规范 |
26+
27+
### 通用属性
28+
29+
所有元素都支持的样式：
30+
31+
| 属性 | 可选值 / 单位 | ✔️ |
32+
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | :-: |
33+
| flex | `flexGrow flexShrink flexBasis` | ✔️ |
34+
| flexGrow | Number | ✔️ |
35+
| flexShrink | Number | ✔️ |
36+
| flexBasis | Length | ✔️ |
37+
| flexDirection | 'row','row-reverse','column','column-reverse' | ✔️ |
38+
| justifyContent | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
39+
| alignContent | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' | ✔️ |
40+
| alignItems | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
41+
| alignSelf | 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' , 'auto' | ✔️ |
42+
| flexWrap | 'nowrap', 'wrap', 'wrap-reverse' | ❌ |
43+
| position | 'relative', 'absolute' | ✔️ |
44+
| left | Length | ✔️ |
45+
| top | Length | ❌ |
46+
| right | Length | ❌ |
47+
| zIndex | Number | ✔️ |
48+
| bottom | Length | ✔️ |
49+
| margin | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
50+
| marginTop | Length | ✔️ |
51+
| marginRight | Length | ✔️ |
52+
| marginBottom | Length | ✔️ |
53+
| marginLeft | Length | ✔️ |
54+
| padding | Length \ Length Length \ Length Length Length \ Length Length Length Length | ✔️ |
55+
| paddingTop | Length | ✔️ |
56+
| paddingRight | Length | ✔️ |
57+
| paddingBottom | Length | ✔️ |
58+
| paddingLeft | Length | ✔️ |
59+
| width | Length | ✔️ |
60+
| height | Length | ✔️ |
61+
| minHeight | Length | ✔️ |
62+
| minWidth | Length | ✔️ |
63+
| maxHeight | Length | ✔️ |
64+
| maxWidth | Length | ✔️ |
65+
| background | | ✔️ |
66+
| background-color | Color | ✔️ |
67+
| background-image | "src('xxx')" | ✔️ |
68+
| background-size | 'cover', 'contain', Length(x y), Length(x) Length(y) | ✔️ |
69+
| background-position | center', 'top', 'bottom', 'left', 'right', , Length(x y), Length(x) Length(y) | ✔️ |
70+
| background-repeat | 'repeat', 'no-repeat', 'repeat-x', 'repeat-y' | ✔️ |
71+
| border | Border（可设置 4 个值，控制 4 个方向） | ✔️ |
72+
| border-top | Border | ✔️ |
73+
| border-left | Border | ✔️ |
74+
| border-right | Border | ✔️ |
75+
| border-bottom | Border | ✔️ |
76+
| border-color | Color（可设置 4 个值，控制 4 个方向） | ✔️ |
77+
| border-top-color | Color | ✔️ |
78+
| border-right-color | Color | ✔️ |
79+
| border-bottom-color | Color | ✔️ |
80+
| border-left-color | Color | ✔️ |
81+
| border-radius | Length（可设置 4 个值，控制 4 个方向） | ✔️ |
82+
| border-top-left-radius | Length | ✔️ |
83+
| border-top-right-radius | Length | ✔️ |
84+
| border-bottom-left-radius | Length | ✔️ |
85+
| border-bottom-right-radius | Length | ✔️ |
86+
| border-style | 'dotted', 'dashed', 'solid' （4 个值，控制 4 个方向） | ✔️ |
87+
| border-top-style | 'dotted', 'dashed', 'solid' | ✔️ |
88+
| border-right-style | 'dotted', 'dashed', 'solid' | ✔️ |
89+
| border-bottom-style | 'dotted', 'dashed', 'solid' | ✔️ |
90+
| border-left-style | 'dotted', 'dashed', 'solid' | ✔️ |
91+
| opacity | Number | ✔️ |
92+
| display | 'flex', 'none', 'block' | ✔️ |
93+
| display | 'inline-block', 'inline-flex', 'inline' | ❌ |
94+
| overflow | 'hidden', 'visible' | ✔️ |
95+
| transform | translate、translateX、translateY、translateZ、translate2d、translate3d、scale、scaleX、scaleY、scale3d、rotate、rotateX、rotateY、rotate3d | ✔️ |
96+
| transform-origin | Length Length | ✔️ |
97+
| content | | ✔️ |
98+
99+
⚠️ 注意：
100+
101+
- `transform` 不允许连续出现 2 个同类型如：transform: translate(20px 20px) translate3d(10px, 30px, 30px)
102+
- `display` 不支持**行内**
103+
- 定位不支持 **bottom** 和 **right**
104+
105+
### 文本样式
106+
107+
| 属性 | 可选值 / 单位 | ✔️ |
108+
| ------------------ | ------------------------------------------------------- | :-: |
109+
| font-size | Length | ✔️ |
110+
| font-family | | ✔️ |
111+
| font-style | 'normal', 'italic' | ✔️ |
112+
| font-weight | 100~900, 'bold','bolder','light','lighter','normal' | ✔️ |
113+
| line-height | 'XXpx' (需要指定具体指，不支持 Number) | ✔️ |
114+
| text-align | 'center', 'left', 'right' | ✔️ |
115+
| text-decoration | ('none', 'underline', 'line-through', 'overline') Color | ✔️ |
116+
| text-overflow | 'ellipsis', 'clip' | ✔️ |
117+
| color | Color | ✔️ |
118+
| -webkit-line-clamp | Number | ✔️ |
119+
120+
⚠️ 注意：
121+
122+
- 文本样式 **仅对`<Text></Text>`节点生效**
123+
- 文本样式 **不支持继承**
124+
- `line-height`**不支持数值**
125+
126+
**以下两种情况是正确的对文本进行样式添加的案例：**
127+
128+
1.直接将样式添加在`<Text/>`上
129+
130+
```jsx
131+
// ✅ 允许
132+
<Text className="txt">hello</Text>
27133
```
28134

29-
#### 后代组合器
135+
2.样式添加到`<View/>`下是一个文本内容
30136

31-
```css
32-
.parent .child {
33-
/* ... */
34-
}
137+
```jsx
138+
// ✅ 允许
139+
<View className="txt">hello</View>
35140
```
36141

37-
#### 直接子代选择器
142+
**错误案例：**
38143

39-
```css
40-
.parent > .child {
41-
/* ... */
42-
}
144+
```jsx
145+
// ❌ hello 父级没有添加文本样式，txt的文本属性无法继承下去
146+
<View className="txt">
147+
<Text>hello</Text>
148+
</View>
43149
```
44150

45-
#### 多类选择器
46-
47-
```css
48-
.child1.child2 {
49-
/* ... */
50-
}
51-
```
52-
53-
#### 伪类
54-
55-
```css
56-
.child1::before {
57-
/* ... */
58-
}
59-
.child1::after {
60-
/* ... */
61-
}
62-
```
151+
## CSS 选择器
152+
153+
### 通用选择器
154+
155+
注意点：
156+
157+
- 支持**类选择器**，
158+
- 不支持**ID 选择器、标签选择器、属性选择器**
159+
160+
| 选择器 | 示例 | 示例说明 | Harmony |
161+
| ------------------ | ------------------- | ------------------------------------------------------------ | :-----: |
162+
| .class | .intro | 选择所有 class="intro" 的元素 | ✔️ |
163+
| .class.class | .red.big | 选择所有 class="red big" 元素 | ✔️ |
164+
| .class, .class | .item, .text | 选择所有 class="item" 元素和 class="text" 元素 | ✔️ |
165+
| .class .class | .grandfather .child | 选择所有 class="grandfather" 内所有的 class="child" 的元素 | ✔️ |
166+
| .class > .class | .parent > .child | 选择所有 父级是 class="parent"的 class="child" 元素 | ✔️ |
167+
| .class+.class | .red+.big | 选择所有紧跟在 class="red" 元素之后的第一个 class="big" 元素 | ❌ |
168+
| .class~.class | .red~.big | 选择所有紧跟在 class="red" 之后的每一个 class="big" 元素 | ❌ |
169+
| #id | #firstname | 选择所有 id="firstname"的元素 | ❌ |
170+
| \* | \* | 选择所有元素 | ❌ |
171+
| element | p | 选择所有\<p>元素 | ❌ |
172+
| \[attribute] | \[target] | 选择所有带有 target 属性元素 | ❌ |
173+
| \[attribute=value] | \[target=blank] | 选择所有使用 target="blank"的元素 | ❌ |
174+
| ... | | 其他 | ❌ |
175+
176+
### 伪类
177+
178+
- 支持**before、after**，
179+
180+
| 选择器 | 示例 | 示例说明 | Harmony |
181+
| ----------------- | ------------------------ | ----------------------------------------------------------------- | :-----: |
182+
| :before | .intro:before | 在每个 class="intro" 元素之前插入内容 | ✔️ |
183+
| :after | .intro:after | 在每个 class="intro" 元素之后插入内容 | ✔️ |
184+
| :nth-child() | .intro:nth-child(2) | 选择 class="intro" 元素是其父级的第二个子元素 | ❌ |
185+
| :nth-last-child() | .intro:nth-last-child(2) | 选择 class="intro" 元素是其父级的第二个子元素, 从最后一个子项计数 | ❌ |
186+
| :first-child | .intro:first-child | 选择 class="intro" 元素是其父级的第一个子级 | ❌ |
187+
| :last-child | .intro:last-child | 选择 class="intro" 元素是其父级的最后一个子级 | ❌ |
188+
| :root | :root | 选择文档的根元素 | ❌ |
189+
| :checked | input:checked | 选择每个选中的输入元素 | ❌ |
190+
| ... | | 其他 | ❌ |

0 commit comments

Comments
 (0)