Skip to content

Commit 212cb63

Browse files
authored
Merge pull request #22 from NervJS/feat/support-vw
支持rgba、支持font-style解析、border解析、补充部分遗漏属性
2 parents 53a411e + 1f54d12 commit 212cb63

19 files changed

+502
-209
lines changed

__test__/index.spec.mjs.md

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Generated by [AVA](https://avajs.dev).
3838
repeat: ImageRepeat.NoRepeat␊
3939
}␊
4040
],␊
41-
color: "rgba(0, 0, 0, .7)",␊
41+
color: "rgba(0, 0, 0, 0.7)",␊
4242
position: [␊
4343
Alignment.BottomEnd,␊
4444
Alignment.Start,␊
@@ -51,10 +51,7 @@ Generated by [AVA](https://avajs.dev).
5151
bottomLeft: convertNumber2VP(100),␊
5252
bottomRight: convertNumber2VP(100)␊
5353
},␊
54-
_decoration: {␊
55-
type: TextDecorationType["LineThrough"],␊
56-
color: "black"␊
57-
},␊
54+
_decoration: TextDecorationType.LineThrough,␊
5855
_flexOptions: {␊
5956
justifyContent: FlexAlign.Center,␊
6057
alignItems: ItemAlign.Center␊
@@ -69,7 +66,7 @@ Generated by [AVA](https://avajs.dev).
6966
"0"␊
7067
],␊
7168
[␊
72-
"#fff0",␊
69+
"rgba(255, 255, 255, 0)",␊
7370
"0"␊
7471
]␊
7572
],␊
@@ -168,10 +165,7 @@ Generated by [AVA](https://avajs.dev).
168165
bottomLeft: convertNumber2VP(4),␊
169166
bottomRight: convertNumber2VP(2)␊
170167
},␊
171-
_decoration: {␊
172-
type: TextDecorationType["LineThrough"],␊
173-
color: "black"␊
174-
},␊
168+
_decoration: TextDecorationType.LineThrough,␊
175169
_height: convertNumber2VP(18),␊
176170
_rotate: [␊
177171
{␊
@@ -194,11 +188,11 @@ Generated by [AVA](https://avajs.dev).
194188
angle: 217,␊
195189
colors: [␊
196190
[␊
197-
"#f00c",␊
191+
"rgba(255, 0, 0, 0.8)",␊
198192
"0"␊
199193
],␊
200194
[␊
201-
"#f000",␊
195+
"rgba(255, 0, 0, 0)",␊
202196
"0.7071"␊
203197
]␊
204198
],␊
@@ -208,11 +202,11 @@ Generated by [AVA](https://avajs.dev).
208202
angle: 127,␊
209203
colors: [␊
210204
[␊
211-
"#0f0c",␊
205+
"rgba(0, 255, 0, 0.8)",␊
212206
"0"␊
213207
],␊
214208
[␊
215-
"#0f00",␊
209+
"rgba(0, 255, 0, 0)",␊
216210
"0.7071"␊
217211
]␊
218212
],␊
@@ -222,11 +216,11 @@ Generated by [AVA](https://avajs.dev).
222216
angle: 336,␊
223217
colors: [␊
224218
[␊
225-
"#00fc",␊
219+
"rgba(0, 0, 255, 0.8)",␊
226220
"0"␊
227221
],␊
228222
[␊
229-
"#00f0",␊
223+
"rgba(0, 0, 255, 0)",␊
230224
"0.7071"␊
231225
]␊
232226
],␊
@@ -376,10 +370,7 @@ Generated by [AVA](https://avajs.dev).
376370
minWidth: convertNumber2VP(100),␊
377371
maxWidth: convertNumber2VP(200)␊
378372
},␊
379-
_decoration: {␊
380-
type: TextDecorationType["LineThrough"],␊
381-
color: "#0ff00f"␊
382-
},␊
373+
_decoration: TextDecorationType.LineThrough,␊
383374
_flexBasis: convertNumber2VP(100),␊
384375
_flexGrow: 2,␊
385376
_flexOptions: {␊
@@ -488,11 +479,11 @@ Generated by [AVA](https://avajs.dev).
488479
angle: 217,␊
489480
colors: [␊
490481
[␊
491-
"#f00c",␊
482+
"rgba(255, 0, 0, 0.8)",␊
492483
"0"␊
493484
],␊
494485
[␊
495-
"#f000",␊
486+
"rgba(255, 0, 0, 0)",␊
496487
"0.7071"␊
497488
]␊
498489
],␊
@@ -502,11 +493,11 @@ Generated by [AVA](https://avajs.dev).
502493
angle: 127,␊
503494
colors: [␊
504495
[␊
505-
"#0f0c",␊
496+
"rgba(0, 255, 0, 0.8)",␊
506497
"0"␊
507498
],␊
508499
[␊
509-
"#0f00",␊
500+
"rgba(0, 255, 0, 0)",␊
510501
"0.7071"␊
511502
]␊
512503
],␊
@@ -516,11 +507,11 @@ Generated by [AVA](https://avajs.dev).
516507
angle: 336,␊
517508
colors: [␊
518509
[␊
519-
"#00fc",␊
510+
"rgba(0, 0, 255, 0.8)",␊
520511
"0"␊
521512
],␊
522513
[␊
523-
"#00f0",␊
514+
"rgba(0, 0, 255, 0)",␊
524515
"0.7071"␊
525516
]␊
526517
],␊
@@ -898,10 +889,7 @@ Generated by [AVA](https://avajs.dev).
898889
bottomRight: convertNumber2VP(2)␊
899890
},␊
900891
_color: "red",␊
901-
_decoration: {␊
902-
type: TextDecorationType["LineThrough"],␊
903-
color: "red"␊
904-
},␊
892+
_decoration: TextDecorationType.LineThrough,␊
905893
_height: convertNumber2VP(18),␊
906894
_rotate: [␊
907895
{␊
@@ -1002,11 +990,11 @@ Generated by [AVA](https://avajs.dev).
1002990
angle: 217,␊
1003991
colors: [␊
1004992
[␊
1005-
"#f00c",␊
993+
"rgba(255, 0, 0, 0.8)",␊
1006994
"0"␊
1007995
],␊
1008996
[␊
1009-
"#f000",␊
997+
"rgba(255, 0, 0, 0)",␊
1010998
"0.7071"␊
1011999
]␊
10121000
],␊
@@ -1016,11 +1004,11 @@ Generated by [AVA](https://avajs.dev).
10161004
angle: 127,␊
10171005
colors: [␊
10181006
[␊
1019-
"#0f0c",␊
1007+
"rgba(0, 255, 0, 0.8)",␊
10201008
"0"␊
10211009
],␊
10221010
[␊
1023-
"#0f00",␊
1011+
"rgba(0, 255, 0, 0)",␊
10241012
"0.7071"␊
10251013
]␊
10261014
],␊
@@ -1030,11 +1018,11 @@ Generated by [AVA](https://avajs.dev).
10301018
angle: 336,␊
10311019
colors: [␊
10321020
[␊
1033-
"#00fc",␊
1021+
"rgba(0, 0, 255, 0.8)",␊
10341022
"0"␊
10351023
],␊
10361024
[␊
1037-
"#00f0",␊
1025+
"rgba(0, 0, 255, 0)",␊
10381026
"0.7071"␊
10391027
]␊
10401028
],␊
@@ -1285,10 +1273,7 @@ Generated by [AVA](https://avajs.dev).
12851273
minWidth: convertNumber2VP(100),␊
12861274
maxWidth: convertNumber2VP(200)␊
12871275
},␊
1288-
_decoration: {␊
1289-
type: TextDecorationType["LineThrough"],␊
1290-
color: "#0ff00f"␊
1291-
},␊
1276+
_decoration: TextDecorationType.LineThrough,␊
12921277
_flexBasis: convertNumber2VP(100),␊
12931278
_flexGrow: 2,␊
12941279
_flexOptions: {␊

__test__/index.spec.mjs.snap

13 Bytes
Binary file not shown.

src/style_parser.rs

Lines changed: 126 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ use std::{cell::RefCell, collections::HashMap, convert::Infallible, hash::Hash,
22

33
use lightningcss::{
44
declaration::DeclarationBlock,
5-
properties::Property,
5+
properties::{Property, border::{LineStyle, BorderSideWidth}},
66
rules::CssRule,
77
stylesheet::{ParserOptions, PrinterOptions, StyleSheet},
88
targets::{Features, Targets},
99
traits::ToCss,
1010
visit_types,
11-
visitor::{Visit, VisitTypes, Visitor},
11+
visitor::{Visit, VisitTypes, Visitor}, values::color::CssColor,
1212
};
1313

1414
use crate::{
@@ -31,8 +31,7 @@ use crate::{
3131
},
3232
margin_padding::MarginPadding,
3333
style_value_type::StyleValueType,
34-
text_decoration::TextDecoration,
35-
transform::transform::Transform, constraint_size::ConstraintSize, border::{border_width::BorderWidth, border_color::BorderColor, border_radius::BorderRadius, border_style::BorderStyle}, text::{line_height::LineHeight, letter_spacing::LetterSpacing, text_align::TextAlign, text_overflow::TextOverflow, font_weight::FontWeight},
34+
transform::transform::Transform, constraint_size::ConstraintSize, border::{border_width::{BorderWidth, parse_border_width_item}, border_color::{BorderColor, parse_border_color_item}, border_radius::BorderRadius, border_style::{BorderStyle, parse_border_style_item}, border::Border}, text::{line_height::LineHeight, letter_spacing::LetterSpacing, text_align::TextAlign, text_overflow::TextOverflow, font_weight::FontWeight, font_style::FontStyle, text_decoration::{TextDecoration}},
3635
},
3736
utils::{
3837
to_camel_case,
@@ -106,8 +105,6 @@ impl<'i> Visitor<'i> for StyleVisitor<'i> {
106105
pub fn parse_style_properties(properties: &Vec<(String, Property<'_>)>) -> StyleValue {
107106
let mut final_properties = HashMap::new();
108107

109-
let mut text_decoration = None;
110-
let mut color = None;
111108
let mut flex_options = FlexOptions::new();
112109
let mut constrant_size = ConstraintSize::new();
113110

@@ -159,7 +156,116 @@ pub fn parse_style_properties(properties: &Vec<(String, Property<'_>)>) -> Style
159156
_ => {}
160157
}
161158
}
162-
}
159+
},
160+
"border" => {
161+
let border = Border::from(value);
162+
let border_width = final_properties
163+
.entry(prefix_style_key("borderWidth"))
164+
.or_insert(StyleValueType::BorderWidth(BorderWidth::new()));
165+
if let StyleValueType::BorderWidth(border_width) = border_width {
166+
if let Some(width) = border.width.top {
167+
border_width.set_all(width.as_str());
168+
}
169+
}
170+
let border_color = final_properties
171+
.entry(prefix_style_key("borderColor"))
172+
.or_insert(StyleValueType::BorderColor(BorderColor::new()));
173+
if let StyleValueType::BorderColor(border_color) = border_color {
174+
if let Some(color) = border.color.top {
175+
border_color.set_all(color.as_str());
176+
}
177+
}
178+
let border_style = final_properties
179+
.entry(prefix_style_key("borderStyle"))
180+
.or_insert(StyleValueType::BorderStyle(BorderStyle::new()));
181+
if let StyleValueType::BorderStyle(border_style) = border_style {
182+
if let Some(style) = border.style.top {
183+
border_style.set_all(style.as_str());
184+
}
185+
}
186+
},
187+
"borderLeft" | "borderRight" | "borderTop" | "borderBottom" => {
188+
let mut width: Option<BorderSideWidth> = None;
189+
let mut style: Option<LineStyle> = None;
190+
let mut color: Option<CssColor> = None;
191+
match &value {
192+
Property::BorderLeft(value) => {
193+
width = Some(value.width.to_owned());
194+
style = Some(value.style);
195+
color = Some(value.color.to_owned());
196+
},
197+
Property::BorderRight(value) => {
198+
width = Some(value.width.to_owned());
199+
style = Some(value.style);
200+
color = Some(value.color.to_owned());
201+
},
202+
Property::BorderTop(value) => {
203+
width = Some(value.width.to_owned());
204+
style = Some(value.style);
205+
color = Some(value.color.to_owned());
206+
},
207+
Property::BorderBottom(value) => {
208+
width = Some(value.width.to_owned());
209+
style = Some(value.style);
210+
color = Some(value.color.to_owned());
211+
},
212+
_ => {}
213+
};
214+
215+
if let Some(width) = width {
216+
let width_item = parse_border_width_item(&width);
217+
if let Some(width_item) = width_item {
218+
let border_width = final_properties
219+
.entry(prefix_style_key("borderWidth"))
220+
.or_insert(StyleValueType::BorderWidth(BorderWidth::new()));
221+
if let StyleValueType::BorderWidth(border_width) = border_width {
222+
match property_name {
223+
"borderLeft" => border_width.set_left(width_item.left.unwrap().as_str()),
224+
"borderRight" => border_width.set_right(width_item.right.unwrap().as_str()),
225+
"borderTop" => border_width.set_top(width_item.top.unwrap().as_str()),
226+
"borderBottom" => border_width.set_bottom(width_item.bottom.unwrap().as_str()),
227+
_ => {}
228+
}
229+
}
230+
}
231+
232+
}
233+
if let Some(color) = color {
234+
let color_item = parse_border_color_item(&color);
235+
if let Some(color_item) = color_item {
236+
let border_color = final_properties
237+
.entry(prefix_style_key("borderColor"))
238+
.or_insert(StyleValueType::BorderColor(BorderColor::new()));
239+
if let StyleValueType::BorderColor(border_color) = border_color {
240+
match property_name {
241+
"borderLeft" => border_color.set_left(color_item.left.unwrap().as_str()),
242+
"borderRight" => border_color.set_right(color_item.right.unwrap().as_str()),
243+
"borderTop" => border_color.set_top(color_item.top.unwrap().as_str()),
244+
"borderBottom" => border_color.set_bottom(color_item.bottom.unwrap().as_str()),
245+
_ => {}
246+
}
247+
}
248+
}
249+
250+
}
251+
if let Some(style) = style {
252+
let style_item = parse_border_style_item(&style);
253+
if let Some(style_item) = style_item {
254+
let border_style = final_properties
255+
.entry(prefix_style_key("borderStyle"))
256+
.or_insert(StyleValueType::BorderStyle(BorderStyle::new()));
257+
if let StyleValueType::BorderStyle(border_style) = border_style {
258+
match property_name {
259+
"borderLeft" => border_style.set_left(style_item.left.unwrap().as_str()),
260+
"borderRight" => border_style.set_right(style_item.right.unwrap().as_str()),
261+
"borderTop" => border_style.set_top(style_item.top.unwrap().as_str()),
262+
"borderBottom" => border_style.set_bottom(style_item.bottom.unwrap().as_str()),
263+
_ => {}
264+
}
265+
}
266+
}
267+
}
268+
},
163269
"borderWidth" => {
164270
let border_width = BorderWidth::from(value);
165271
if border_width.is_zero() {
@@ -324,14 +430,24 @@ pub fn parse_style_properties(properties: &Vec<(String, Property<'_>)>) -> Style
324430
StyleValueType::FontWeight(font_weight),
325431
);
326432
}
433+
"fontStyle" => {
434+
let font_style = FontStyle::from(value);
435+
final_properties.insert(
436+
prefix_style_key("fontStyle"),
437+
StyleValueType::FontStyle(font_style),
438+
);
439+
}
327440
"textDecoration" => {
328-
text_decoration = Some(value);
441+
let text_decoration = TextDecoration::from(value);
442+
final_properties.insert(
443+
prefix_style_key("decoration"),
444+
StyleValueType::TextDecoration(text_decoration),
445+
);
329446
}
330447
"color" => {
331-
color = Some(value);
332448
final_properties.insert(
333449
prefix_style_key(id),
334-
StyleValueType::Normal(
450+
StyleValueType::Color(
335451
value
336452
.value_to_css_string(PrinterOptions {
337453
minify: false,
@@ -577,13 +693,6 @@ pub fn parse_style_properties(properties: &Vec<(String, Property<'_>)>) -> Style
577693
}
578694
}
579695
}
580-
if let Some(text_decoration) = text_decoration {
581-
let text_decoration = TextDecoration::from((text_decoration, color));
582-
final_properties.insert(
583-
prefix_style_key("decoration"),
584-
StyleValueType::TextDecoration(text_decoration),
585-
);
586-
}
587696

588697
if constrant_size.max_height.is_some()
589698
|| constrant_size.max_width.is_some()

0 commit comments

Comments
 (0)