Skip to content

Commit c4a4367

Browse files
committed
fix: 优化 Background 处理
1 parent 84dcb1a commit c4a4367

File tree

4 files changed

+140
-79
lines changed

4 files changed

+140
-79
lines changed

__test__/index.spec.mjs.md

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,15 @@ Generated by [AVA](https://avajs.dev).
2626
background: {␊
2727
image: [␊
2828
{␊
29-
src: 'url("firefox.png")',␊
29+
src: "firefox.png",␊
3030
repeat: ImageRepeat.NoRepeat␊
3131
},␊
3232
{␊
33-
src: 'url("bubbles.png")',␊
33+
src: "bubbles.png",␊
3434
repeat: ImageRepeat.NoRepeat␊
3535
}␊
3636
],␊
3737
color: "rgba(0, 0, 0, .7)",␊
38-
size: [],␊
3938
position: [␊
4039
ImagePosition.BottomEnd,␊
4140
ImagePosition.Start,␊
@@ -255,7 +254,7 @@ Generated by [AVA](https://avajs.dev).
255254
background: {␊
256255
image: [␊
257256
{␊
258-
src: 'url("https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png")',␊
257+
src: "https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png",␊
259258
repeat: ImageRepeat.NoRepeat␊
260259
}␊
261260
],␊
@@ -277,10 +276,7 @@ Generated by [AVA](https://avajs.dev).
277276
},␊
278277
"mod": {␊
279278
background: {␊
280-
image: [],␊
281-
color: "#fff6f0",␊
282-
size: [],␊
283-
position: []␊
279+
color: "#fff6f0"␊
284280
},␊
285281
borderRadius: {␊
286282
topLeft: "8px",␊
@@ -335,7 +331,7 @@ Generated by [AVA](https://avajs.dev).
335331
background: {␊
336332
image: [␊
337333
{␊
338-
src: 'url("https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png")',␊
334+
src: "https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png",␊
339335
repeat: ImageRepeat.NoRepeat␊
340336
}␊
341337
],␊
@@ -380,7 +376,7 @@ Generated by [AVA](https://avajs.dev).
380376
background: {␊
381377
image: [␊
382378
{␊
383-
src: 'url("https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png")',␊
379+
src: "https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png",␊
384380
repeat: ImageRepeat.NoRepeat␊
385381
}␊
386382
],␊
@@ -420,10 +416,7 @@ Generated by [AVA](https://avajs.dev).
420416
render() {␊
421417
return <div className='mod' style={{␊
422418
background: {␊
423-
image: [],␊
424-
color: "#fff6f0",␊
425-
size: [],␊
426-
position: []␊
419+
color: "#fff6f0"␊
427420
},␊
428421
borderRadius: {␊
429422
topLeft: "8px",␊
@@ -490,7 +483,7 @@ Generated by [AVA](https://avajs.dev).
490483
background: {␊
491484
image: [␊
492485
{␊
493-
src: 'url("https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png")',␊
486+
src: "https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png",␊
494487
repeat: ImageRepeat.NoRepeat␊
495488
}␊
496489
],␊
@@ -531,11 +524,10 @@ Generated by [AVA](https://avajs.dev).
531524
background: {␊
532525
image: [␊
533526
{␊
534-
src: 'url("//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png")',␊
527+
src: "//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png",␊
535528
repeat: ImageRepeat.XY␊
536529
}␊
537530
],␊
538-
color: "#0000",␊
539531
size: [␊
540532
ImageSize.Auto␊
541533
],␊
@@ -622,7 +614,7 @@ Generated by [AVA](https://avajs.dev).
622614
background: {␊
623615
image: [␊
624616
{␊
625-
src: 'url("https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png")',␊
617+
src: "https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png",␊
626618
repeat: ImageRepeat.NoRepeat␊
627619
}␊
628620
],␊
@@ -652,7 +644,7 @@ Generated by [AVA](https://avajs.dev).
652644
background: {␊
653645
image: [␊
654646
{␊
655-
src: 'url("https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png")',␊
647+
src: "https://img.alicdn.com/imgextra/i1/O1CN01QYQY2e1Q1QYQY2e1Q_!!6000000000000-2-tps-18-18.png",␊
656648
repeat: ImageRepeat.NoRepeat␊
657649
}␊
658650
],␊

__test__/index.spec.mjs.snap

-40 Bytes
Binary file not shown.

src/style_parser.rs

Lines changed: 85 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ use lightningcss::{
2323
targets::{Features, Targets},
2424
traits::ToCss,
2525
values::{
26+
color::CssColor,
2627
gradient::{Gradient, GradientItem, LineDirection},
2728
image::Image,
2829
length::{Length, LengthPercentageOrAuto, LengthValue},
@@ -170,7 +171,7 @@ fn parse_background_image_item(
170171
) -> Option<BackgroundImageItem> {
171172
match image {
172173
Image::Url(url) => Some(BackgroundImageItem {
173-
image: BackgroundImageKind::String(url.to_css_string(PrinterOptions::default()).unwrap()),
174+
image: BackgroundImageKind::String(url.url.to_string()),
174175
repeat: Some(ImageRepeat::from(repeat.clone())),
175176
}),
176177
Image::Gradient(gradient) => {
@@ -305,7 +306,21 @@ fn parse_background(background: &SmallVec<[LNBackground<'_>; 1]>) -> Background
305306
if let Some(size) = parse_background_size_item(&item.size) {
306307
background_size.push(size);
307308
}
308-
background_color = Some(item.color.to_css_string(PrinterOptions::default()).unwrap());
309+
if item.color != CssColor::default() {
310+
background_color = Some(
311+
item
312+
.color
313+
.to_css_string(PrinterOptions {
314+
minify: false,
315+
targets: Targets {
316+
include: Features::HexAlphaColors,
317+
..Targets::default()
318+
},
319+
..PrinterOptions::default()
320+
})
321+
.unwrap(),
322+
);
323+
}
309324
}
310325
Background {
311326
image: BackgroundImage(background_image),
@@ -1273,27 +1288,34 @@ impl Background {
12731288

12741289
impl ToExpr for Background {
12751290
fn to_expr(&self) -> Expr {
1291+
let mut arr = vec![];
1292+
if self.image.0.len() > 0 {
1293+
arr.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1294+
key: PropName::Ident(Ident::new("image".into(), DUMMY_SP)),
1295+
value: self.image.to_expr().into(),
1296+
}))))
1297+
}
1298+
if self.color.to_string() != "" {
1299+
arr.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1300+
key: PropName::Ident(Ident::new("color".into(), DUMMY_SP)),
1301+
value: self.color.to_expr().into(),
1302+
}))))
1303+
}
1304+
if self.size.0.len() > 0 {
1305+
arr.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1306+
key: PropName::Ident(Ident::new("size".into(), DUMMY_SP)),
1307+
value: self.size.to_expr().into(),
1308+
}))))
1309+
}
1310+
if self.position.0.len() > 0 {
1311+
arr.push(PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1312+
key: PropName::Ident(Ident::new("position".into(), DUMMY_SP)),
1313+
value: self.position.to_expr().into(),
1314+
}))))
1315+
}
12761316
Expr::Object(ObjectLit {
12771317
span: DUMMY_SP,
1278-
props: vec![
1279-
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1280-
key: PropName::Ident(Ident::new("image".into(), DUMMY_SP)),
1281-
value: self.image.to_expr().into(),
1282-
}))),
1283-
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1284-
key: PropName::Ident(Ident::new("color".into(), DUMMY_SP)),
1285-
value: self.color.to_expr().into(),
1286-
}))),
1287-
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1288-
key: PropName::Ident(Ident::new("size".into(), DUMMY_SP)),
1289-
value: self.size.to_expr().into(),
1290-
}))),
1291-
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1292-
key: PropName::Ident(Ident::new("position".into(), DUMMY_SP)),
1293-
value: self.position.to_expr().into(),
1294-
}))),
1295-
]
1296-
.into(),
1318+
props: arr.into(),
12971319
})
12981320
}
12991321
}
@@ -2411,7 +2433,7 @@ impl<'i> Visitor<'i> for StyleVisitor<'i> {
24112433
}
24122434
}
24132435

2414-
pub fn parse_style_properties(properties: &HashMap<String, Property<'_>>) -> StyleValue {
2436+
pub fn parse_style_properties(properties: &Vec<(String, Property<'_>)>) -> StyleValue {
24152437
let mut final_properties = HashMap::new();
24162438

24172439
let mut text_decoration = None;
@@ -2710,7 +2732,7 @@ pub fn parse_style_properties(properties: &HashMap<String, Property<'_>>) -> Sty
27102732
}
27112733
"textDecoration" => {
27122734
text_decoration = Some((*value).clone());
2713-
},
2735+
}
27142736
"color" => {
27152737
color = Some((*value).clone());
27162738
final_properties.insert(
@@ -2762,27 +2784,29 @@ pub fn parse_style_properties(properties: &HashMap<String, Property<'_>>) -> Sty
27622784
.entry("background".to_string())
27632785
.or_insert(StyleValueType::Background(Background::new()));
27642786
if let StyleValueType::Background(background) = background {
2765-
background.color = BackgroundColor(
2766-
value
2767-
.to_css_string(PrinterOptions {
2768-
minify: false,
2769-
targets: Targets {
2770-
include: Features::HexAlphaColors,
2771-
..Targets::default()
2772-
},
2773-
..PrinterOptions::default()
2774-
})
2775-
.unwrap(),
2776-
);
2787+
if *value != CssColor::default() {
2788+
background.color = BackgroundColor(
2789+
value
2790+
.to_css_string(PrinterOptions {
2791+
minify: false,
2792+
targets: Targets {
2793+
include: Features::HexAlphaColors,
2794+
..Targets::default()
2795+
},
2796+
..PrinterOptions::default()
2797+
})
2798+
.unwrap(),
2799+
);
2800+
}
27772801
}
27782802
}
27792803
_ => {}
27802804
},
27812805
"backgroundImage" => match value {
27822806
Property::BackgroundImage(value) => {
27832807
let mut repeat = None;
2784-
if let Some(value) = properties.get("backgroundRepeat") {
2785-
if let Property::BackgroundRepeat(repeat_value) = value {
2808+
if let Some(value) = properties.iter().find(|(id, _)| id == "backgroundRepeat") {
2809+
if let Property::BackgroundRepeat(repeat_value) = &value.1 {
27862810
repeat = Some(repeat_value);
27872811
}
27882812
}
@@ -2956,13 +2980,16 @@ pub fn parse_style_properties(properties: &HashMap<String, Property<'_>>) -> Sty
29562980
let mut matrixs = vec![];
29572981
if let Property::Transform(value, _) = value {
29582982
for item in value.0.iter() {
2959-
let transform_origin = properties.get("transformOrigin").map(|p| {
2960-
if let Property::TransformOrigin(value, _) = p {
2961-
Some(value)
2962-
} else {
2963-
None
2964-
}
2965-
});
2983+
let transform_origin = properties
2984+
.iter()
2985+
.find(|(id, _)| id == "transformOrigin")
2986+
.map(|p| {
2987+
if let Property::TransformOrigin(value, _) = &p.1 {
2988+
Some(value)
2989+
} else {
2990+
None
2991+
}
2992+
});
29662993
let mut center_x = None;
29672994
let mut center_y = None;
29682995
match transform_origin {
@@ -3255,7 +3282,14 @@ pub fn parse_style_properties(properties: &HashMap<String, Property<'_>>) -> Sty
32553282
color: match color {
32563283
Some(color) => to_camel_case(
32573284
color
3258-
.value_to_css_string(PrinterOptions::default())
3285+
.value_to_css_string(PrinterOptions {
3286+
minify: false,
3287+
targets: Targets {
3288+
include: Features::HexAlphaColors,
3289+
..Targets::default()
3290+
},
3291+
..PrinterOptions::default()
3292+
})
32593293
.unwrap()
32603294
.as_str(),
32613295
true,
@@ -3405,7 +3439,12 @@ impl<'i> StyleParser<'i> {
34053439
.map(|(selector, properties)| {
34063440
(
34073441
selector.to_owned(),
3408-
parse_style_properties(&properties),
3442+
parse_style_properties(
3443+
&properties
3444+
.iter()
3445+
.map(|(k, v)| (k.to_owned(), v.clone()))
3446+
.collect::<Vec<_>>(),
3447+
),
34093448
)
34103449
})
34113450
.collect::<HashMap<_, _>>();

0 commit comments

Comments
 (0)