Skip to content

Commit 0f3111b

Browse files
luckyadamluckyadam
committed
feat: 不拆分 Background
1 parent ae806cc commit 0f3111b

File tree

2 files changed

+187
-172
lines changed

2 files changed

+187
-172
lines changed

‎src/style_parser.rs

Lines changed: 154 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -767,6 +767,12 @@ impl ToExpr for BackgroundColor {
767767
}
768768
}
769769

770+
impl Display for BackgroundColor {
771+
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
772+
write!(f, "{}", self.0.to_string())
773+
}
774+
}
775+
770776
pub struct BackgroundImageStr {
771777
pub src: String,
772778
pub repeat: Option<String>,
@@ -864,6 +870,30 @@ impl From<&BackgroundImageStr> for BackgroundImage {
864870
}
865871
}
866872

873+
impl Display for BackgroundImage {
874+
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
875+
let mut background_image = "".to_string();
876+
for (index, item) in self.0.iter().enumerate() {
877+
if let BackgroundImageKind::String(src) = &item.image {
878+
background_image.push_str(src);
879+
if let Some(repeat) = &item.repeat {
880+
background_image.push_str(" ");
881+
background_image.push_str(match repeat {
882+
ImageRepeat::XY => "repeat",
883+
ImageRepeat::X => "repeat-x",
884+
ImageRepeat::Y => "repeat-y",
885+
ImageRepeat::NoRepeat => "no-repeat",
886+
});
887+
}
888+
if index != self.0.len() - 1 {
889+
background_image.push_str(", ");
890+
}
891+
}
892+
}
893+
write!(f, "{}", background_image)
894+
}
895+
}
896+
867897
#[derive(Debug, Clone)]
868898
pub enum BackgroundImageKind {
869899
String(String),
@@ -960,6 +990,27 @@ impl From<&str> for BackgroundImageSize {
960990
}
961991
}
962992

993+
impl Display for BackgroundImageSize {
994+
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
995+
let mut background_image_size = "".to_string();
996+
for (index, item) in self.0.iter().enumerate() {
997+
background_image_size.push_str(
998+
match item {
999+
ImageSize::Cover => "cover".to_string(),
1000+
ImageSize::Contain => "contain".to_string(),
1001+
ImageSize::Auto => "auto".to_string(),
1002+
ImageSize::ImageSizeWH(width, height) => format!("{} {}", width, height),
1003+
}
1004+
.as_str(),
1005+
);
1006+
if index != self.0.len() - 1 {
1007+
background_image_size.push_str(", ");
1008+
}
1009+
}
1010+
write!(f, "{}", background_image_size)
1011+
}
1012+
}
1013+
9631014
#[derive(Debug, Clone)]
9641015
pub enum ImageRepeat {
9651016
XY,
@@ -1159,6 +1210,33 @@ impl From<&str> for BackgroundImagePosition {
11591210
}
11601211
}
11611212

1213+
impl Display for BackgroundImagePosition {
1214+
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
1215+
let mut background_image_position = "".to_string();
1216+
for (index, item) in self.0.iter().enumerate() {
1217+
background_image_position.push_str(
1218+
match item {
1219+
ImagePosition::ImagePositionXY(x, y) => format!("{} {}", x, y),
1220+
ImagePosition::TopStart => "top left".to_string(),
1221+
ImagePosition::Top => "top center".to_string(),
1222+
ImagePosition::TopEnd => "top right".to_string(),
1223+
ImagePosition::Start => "center left".to_string(),
1224+
ImagePosition::Center => "center center".to_string(),
1225+
ImagePosition::End => "center right".to_string(),
1226+
ImagePosition::BottomStart => "bottom left".to_string(),
1227+
ImagePosition::Bottom => "bottom center".to_string(),
1228+
ImagePosition::BottomEnd => "bottom right".to_string(),
1229+
}
1230+
.as_str(),
1231+
);
1232+
if index != self.0.len() - 1 {
1233+
background_image_position.push_str(", ");
1234+
}
1235+
}
1236+
write!(f, "{}", background_image_position)
1237+
}
1238+
}
1239+
11621240
#[derive(Debug, Clone)]
11631241
pub struct Background {
11641242
pub image: BackgroundImage,
@@ -1167,6 +1245,44 @@ pub struct Background {
11671245
pub position: BackgroundImagePosition,
11681246
}
11691247

1248+
impl Background {
1249+
pub fn new() -> Self {
1250+
Background {
1251+
image: BackgroundImage(vec![]),
1252+
color: BackgroundColor("".to_string()),
1253+
size: BackgroundImageSize(vec![]),
1254+
position: BackgroundImagePosition(vec![]),
1255+
}
1256+
}
1257+
}
1258+
1259+
impl ToExpr for Background {
1260+
fn to_expr(&self) -> Expr {
1261+
Expr::Object(ObjectLit {
1262+
span: DUMMY_SP,
1263+
props: vec![
1264+
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1265+
key: PropName::Ident(Ident::new("image".into(), DUMMY_SP)),
1266+
value: self.image.to_expr().into(),
1267+
}))),
1268+
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1269+
key: PropName::Ident(Ident::new("color".into(), DUMMY_SP)),
1270+
value: self.color.to_expr().into(),
1271+
}))),
1272+
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1273+
key: PropName::Ident(Ident::new("size".into(), DUMMY_SP)),
1274+
value: self.size.to_expr().into(),
1275+
}))),
1276+
PropOrSpread::Prop(Box::new(Prop::KeyValue(KeyValueProp {
1277+
key: PropName::Ident(Ident::new("position".into(), DUMMY_SP)),
1278+
value: self.position.to_expr().into(),
1279+
}))),
1280+
]
1281+
.into(),
1282+
})
1283+
}
1284+
}
1285+
11701286
impl From<&str> for Background {
11711287
fn from(value: &str) -> Self {
11721288
let background_parsed = Property::parse_string(
@@ -1692,10 +1808,7 @@ pub enum StyleValueType {
16921808
TextDecoration(TextDecoration),
16931809
BorderRadius(BorderRadius),
16941810
MarginPadding(MarginPadding),
1695-
BackgroundImage(BackgroundImage),
1696-
BackgroundColor(BackgroundColor),
1697-
BackgroundImageSize(BackgroundImageSize),
1698-
BackgroundImagePosition(BackgroundImagePosition),
1811+
Background(Background),
16991812
LinearGradient(LinearGradient),
17001813
FlexOptions(FlexOptions),
17011814
AlignSelf(ItemAlign),
@@ -1725,97 +1838,12 @@ impl Display for StyleValueType {
17251838
value.top, value.right, value.bottom, value.left
17261839
)
17271840
}
1728-
StyleValueType::BackgroundImage(value) => {
1729-
let mut image = "".to_string();
1730-
for item in value.0.iter() {
1731-
if let BackgroundImageKind::String(src) = &item.image {
1732-
image.push_str(src.as_str());
1733-
image.push_str(" ");
1734-
if let Some(repeat) = &item.repeat {
1735-
match repeat {
1736-
ImageRepeat::XY => {
1737-
image.push_str("repeat");
1738-
}
1739-
ImageRepeat::X => {
1740-
image.push_str("repeat-x");
1741-
}
1742-
ImageRepeat::Y => {
1743-
image.push_str("repeat-y");
1744-
}
1745-
ImageRepeat::NoRepeat => {
1746-
image.push_str("no-repeat");
1747-
}
1748-
}
1749-
image.push_str(" ");
1750-
}
1751-
}
1752-
}
1753-
write!(f, "{}", image)
1754-
}
1755-
StyleValueType::BackgroundColor(value) => write!(f, "{}", value.0),
1756-
StyleValueType::BackgroundImageSize(value) => {
1757-
let mut size = "".to_string();
1758-
for item in value.0.iter() {
1759-
match item {
1760-
ImageSize::Cover => {
1761-
size.push_str("cover");
1762-
}
1763-
ImageSize::Contain => {
1764-
size.push_str("contain");
1765-
}
1766-
ImageSize::Auto => {
1767-
size.push_str("auto");
1768-
}
1769-
ImageSize::ImageSizeWH(width, height) => {
1770-
size.push_str(width.as_str());
1771-
size.push_str(" ");
1772-
size.push_str(height.as_str());
1773-
}
1774-
}
1775-
size.push_str(" ");
1776-
}
1777-
write!(f, "{}", size)
1778-
}
1779-
StyleValueType::BackgroundImagePosition(value) => {
1780-
let mut position = "".to_string();
1781-
for item in value.0.iter() {
1782-
match item {
1783-
ImagePosition::ImagePositionXY(x, y) => {
1784-
position.push_str(x.as_str());
1785-
position.push_str(" ");
1786-
position.push_str(y.as_str());
1787-
}
1788-
ImagePosition::TopStart => {
1789-
position.push_str("top left");
1790-
}
1791-
ImagePosition::Top => {
1792-
position.push_str("top center");
1793-
}
1794-
ImagePosition::TopEnd => {
1795-
position.push_str("top right");
1796-
}
1797-
ImagePosition::Start => {
1798-
position.push_str("center left");
1799-
}
1800-
ImagePosition::Center => {
1801-
position.push_str("center center");
1802-
}
1803-
ImagePosition::End => {
1804-
position.push_str("center right");
1805-
}
1806-
ImagePosition::BottomStart => {
1807-
position.push_str("bottom left");
1808-
}
1809-
ImagePosition::Bottom => {
1810-
position.push_str("bottom center");
1811-
}
1812-
ImagePosition::BottomEnd => {
1813-
position.push_str("bottom right");
1814-
}
1815-
}
1816-
position.push_str(" ");
1817-
}
1818-
write!(f, "{}", position)
1841+
StyleValueType::Background(value) => {
1842+
write!(
1843+
f,
1844+
"{} {} {} {}",
1845+
value.image, value.color, value.size, value.position
1846+
)
18191847
}
18201848
StyleValueType::LinearGradient(linear_gradient) => {
18211849
let mut linear_gradient_str = "".to_string();
@@ -1927,12 +1955,7 @@ impl ToExpr for StyleValueType {
19271955
StyleValueType::TextDecoration(text_decoration) => text_decoration.to_expr().into(),
19281956
StyleValueType::BorderRadius(border_radius) => border_radius.to_expr().into(),
19291957
StyleValueType::MarginPadding(margin_padding) => margin_padding.to_expr().into(),
1930-
StyleValueType::BackgroundImage(background_image) => background_image.to_expr().into(),
1931-
StyleValueType::BackgroundImageSize(background_size) => background_size.to_expr().into(),
1932-
StyleValueType::BackgroundImagePosition(background_position) => {
1933-
background_position.to_expr().into()
1934-
}
1935-
StyleValueType::BackgroundColor(background_color) => background_color.to_expr().into(),
1958+
StyleValueType::Background(background) => background.to_expr().into(),
19361959
StyleValueType::LinearGradient(linear_gradient) => linear_gradient.to_expr().into(),
19371960
StyleValueType::FlexOptions(flex_options) => flex_options.to_expr().into(),
19381961
StyleValueType::AlignSelf(align_self) => align_self.to_expr().into(),
@@ -2396,7 +2419,7 @@ impl<'i> StyleParser<'i> {
23962419
}
23972420
"background" => match value {
23982421
Property::Background(value) => {
2399-
let background = parse_background(value);
2422+
let mut background = parse_background(value);
24002423
let mut images = vec![];
24012424
let mut linear_gradient = vec![];
24022425
for item in background.image.0.iter() {
@@ -2406,38 +2429,28 @@ impl<'i> StyleParser<'i> {
24062429
linear_gradient.push(gradient.clone());
24072430
}
24082431
}
2432+
final_properties.remove("background");
2433+
final_properties.remove("linearGradient");
24092434
if images.len() > 0 {
2410-
final_properties.insert(
2411-
"backgroundImage".to_string(),
2412-
StyleValueType::BackgroundImage(BackgroundImage(images)),
2413-
);
2435+
background.image = BackgroundImage(images);
2436+
final_properties.insert(id.to_string(), StyleValueType::Background(background));
24142437
}
24152438
if linear_gradient.len() > 0 {
24162439
final_properties.insert(
24172440
"linearGradient".to_string(),
24182441
StyleValueType::LinearGradient(LinearGradient(linear_gradient)),
24192442
);
24202443
}
2421-
final_properties.insert(
2422-
"backgroundImagePosition".to_string(),
2423-
StyleValueType::BackgroundImagePosition(background.position),
2424-
);
2425-
final_properties.insert(
2426-
"backgroundImageSize".to_string(),
2427-
StyleValueType::BackgroundImageSize(background.size),
2428-
);
2429-
final_properties.insert(
2430-
"backgroundColor".to_string(),
2431-
StyleValueType::BackgroundColor(background.color),
2432-
);
24332444
}
24342445
_ => {}
24352446
},
24362447
"backgroundColor" => match value {
24372448
Property::BackgroundColor(value) => {
2438-
final_properties.insert(
2439-
id.to_string(),
2440-
StyleValueType::BackgroundColor(BackgroundColor(
2449+
let background = final_properties
2450+
.entry("background".to_string())
2451+
.or_insert(StyleValueType::Background(Background::new()));
2452+
if let StyleValueType::Background(background) = background {
2453+
background.color = BackgroundColor(
24412454
value
24422455
.to_css_string(PrinterOptions {
24432456
minify: false,
@@ -2448,8 +2461,8 @@ impl<'i> StyleParser<'i> {
24482461
..PrinterOptions::default()
24492462
})
24502463
.unwrap(),
2451-
)),
2452-
);
2464+
);
2465+
}
24532466
}
24542467
_ => {}
24552468
},
@@ -2472,10 +2485,12 @@ impl<'i> StyleParser<'i> {
24722485
}
24732486
}
24742487
if images.len() > 0 {
2475-
final_properties.insert(
2476-
id.to_string(),
2477-
StyleValueType::BackgroundImage(BackgroundImage(images)),
2478-
);
2488+
let background = final_properties
2489+
.entry("background".to_string())
2490+
.or_insert(StyleValueType::Background(Background::new()));
2491+
if let StyleValueType::Background(background) = background {
2492+
background.image = BackgroundImage(images);
2493+
}
24792494
}
24802495
if linear_gradient.len() > 0 {
24812496
final_properties.insert(
@@ -2490,10 +2505,12 @@ impl<'i> StyleParser<'i> {
24902505
Property::BackgroundPosition(value) => {
24912506
let background_position = parse_background_position(value);
24922507
if background_position.0.len() > 0 {
2493-
final_properties.insert(
2494-
"backgroundImagePosition".to_string(),
2495-
StyleValueType::BackgroundImagePosition(background_position),
2496-
);
2508+
let background = final_properties
2509+
.entry("background".to_string())
2510+
.or_insert(StyleValueType::Background(Background::new()));
2511+
if let StyleValueType::Background(background) = background {
2512+
background.position = background_position;
2513+
}
24972514
}
24982515
}
24992516
_ => {}
@@ -2502,10 +2519,12 @@ impl<'i> StyleParser<'i> {
25022519
Property::BackgroundSize(value) => {
25032520
let background_size = parse_background_size(value);
25042521
if background_size.0.len() > 0 {
2505-
final_properties.insert(
2506-
"backgroundImageSize".to_string(),
2507-
StyleValueType::BackgroundImageSize(background_size),
2508-
);
2522+
let background = final_properties
2523+
.entry("background".to_string())
2524+
.or_insert(StyleValueType::Background(Background::new()));
2525+
if let StyleValueType::Background(background) = background {
2526+
background.size = background_size;
2527+
}
25092528
}
25102529
}
25112530
_ => {}

0 commit comments

Comments
 (0)