Skip to content

Commit 9ce5984

Browse files
heiazuheiazu
committed
docs: 更新文档
1 parent c9ff814 commit 9ce5984

File tree

8 files changed

+312
-227
lines changed

8 files changed

+312
-227
lines changed

‎README.md

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -165,37 +165,54 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
165165
- 支持**类选择器**，
166166
- 不支持**ID 选择器、标签选择器、属性选择器**
167167

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-
### 伪元素
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+
### 伪元素 / 伪类
185185

186186
- 支持**before、after**，
187187

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-
| ... | | 其他 | ❌ |
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+
## CSS 变量
201+
202+
若使用 CSS 变量，挂载的属性应当挂载`:root`选择器上
203+
204+
```css
205+
:root {
206+
--color: #403635;
207+
--angle: 30deg;
208+
--var: var(--color, 30px);
209+
}
210+
211+
.hello {
212+
height: 30px;
213+
color: var(--color);
214+
}
215+
```
199216

200217
## 常见问题
201218

‎__test__/fixure/pesudo.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
:root {
2-
--color: #403635 + #403635;
2+
--color: #403635;
33
--angle: 30deg;
4-
--length: 200px;
5-
--res-olution: 300dpi;
6-
--url: url("https://www.google.com");
7-
--var: var(--color, '48px');
4+
--var: var(--color, 30px)
85
}
96

107
.hello {

‎src/lib.rs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ mod constants;
2121
mod style_propetries;
2222
mod style_parser;
2323
mod parse_style_properties;
24+
mod parse_css_variables;
2425

2526
// component: jsx的code string
2627
// styles: css的code string

‎src/parse_css_variables.rs

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
use std::{collections::HashMap, rc::Rc};
22

3-
use lightningcss::{properties::{custom::TokenOrValue, Property}, traits::ToCss, values::time::Time};
3+
use lightningcss::{properties::{custom::{Token, TokenOrValue}, Property}, traits::ToCss, values::time::Time};
44
use swc_common::{comments::SingleThreadedComments, sync::Lrc, SourceMap, DUMMY_SP};
5-
use swc_ecma_ast::{AssignExpr, AssignOp, CallExpr, Callee, ComputedPropName, Expr, ExprOrSpread, ExprStmt, KeyValueProp, Lit, MemberExpr, MemberProp, Module, ModuleItem, Number, ObjectLit, PatOrExpr, Program, Prop, PropName, PropOrSpread, Stmt};
5+
use swc_ecma_ast::{AssignExpr, AssignOp, BindingIdent, CallExpr, Callee, ComputedPropName, Decl, Expr, ExprOrSpread, ExprStmt, KeyValueProp, Lit, MemberExpr, MemberProp, Module, ModuleItem, Number, ObjectLit, Pat, PatOrExpr, Program, Prop, PropName, PropOrSpread, Stmt, VarDecl, VarDeclKind, VarDeclarator};
66
use swc_ecma_codegen::{text_writer::JsWriter, Emitter};
77
use swc_ecma_utils::quote_ident;
88

9-
use crate::style_propetries::unit::{convert_color_keywords_to_hex, generate_expr_by_length_value, Platform};
9+
use crate::style_propetries::unit::{convert_color_keywords_to_hex, generate_expr_by_length_value, generate_expr_with_css_input, Platform};
1010

1111

1212
pub fn parse(properties: Vec<(String, Property<'_>)>) -> HashMap<String, Expr> {
1313

14-
// properties.iter().for_each(|(key, value)| {
15-
// println!("key: {}, value: {:?}", key, value);
16-
// });
1714
let mut css_variables = HashMap::new();
1815
properties.iter().for_each(|(key, value)| {
1916
let mut expr: Option<Expr> = None;
@@ -35,9 +32,10 @@ pub fn parse(properties: Vec<(String, Property<'_>)>) -> HashMap<String, Expr> {
3532

3633

3734
pub fn write(css_variables: HashMap<String, Expr>) -> String {
38-
// css_variables.iter().for_each(|(key, value)| {
39-
// println!("key: {}, value: {:?}", key, value);
40-
// });
35+
36+
if css_variables.len() == 0 {
37+
return "".to_string();
38+
}
4139

4240
let obj = Expr::Object(ObjectLit {
4341
span: DUMMY_SP,
@@ -58,16 +56,26 @@ pub fn write(css_variables: HashMap<String, Expr>) -> String {
5856
span: DUMMY_SP,
5957
body: vec![
6058
ModuleItem::Stmt(
61-
Stmt::Expr(ExprStmt {
62-
span: DUMMY_SP,
63-
expr: Box::new(Expr::Assign(AssignExpr {
64-
span: DUMMY_SP,
65-
op: AssignOp::Assign,
66-
left: PatOrExpr::Expr(Box::new(Expr::Ident(quote_ident!("css_var_map")))),
67-
right: Box::new(obj)
68-
}))
69-
})
70-
),
59+
Stmt::Decl(
60+
Decl::Var(
61+
Box::new(
62+
VarDecl {
63+
span: DUMMY_SP,
64+
kind: VarDeclKind::Const,
65+
declare: false,
66+
decls: vec![
67+
VarDeclarator {
68+
span: DUMMY_SP,
69+
name: Pat::Ident(BindingIdent::from(quote_ident!("css_var_map"))),
70+
init: Some(Box::new(obj)),
71+
definite: false,
72+
}
73+
]
74+
}
75+
)
76+
)
77+
)
78+
)
7179
],
7280
shebang: None,
7381
});
@@ -87,8 +95,17 @@ pub fn write(css_variables: HashMap<String, Expr>) -> String {
8795

8896
pub fn get_token_or_value (token_or_value: TokenOrValue<'_>) -> Expr {
8997
match token_or_value {
90-
TokenOrValue::Token(_) => {
91-
Expr::Lit(Lit::Str("".into()))
98+
TokenOrValue::Token(token) => {
99+
match token {
100+
Token::Number { has_sign, value, int_value } => {
101+
Expr::Lit(Lit::Num(Number {
102+
span: DUMMY_SP,
103+
value: value as f64,
104+
raw: None,
105+
}))
106+
},
107+
val => {Expr::Lit(Lit::Str(val.to_css_string(Default::default()).unwrap().into()))}
108+
}
92109
},
93110
TokenOrValue::Color(color) => {
94111
let color_string = convert_color_keywords_to_hex(color.to_css_string(lightningcss::stylesheet::PrinterOptions {

0 commit comments

Comments
 (0)