Skip to content

Commit f6e14e1

Browse files
owjs3901owjs3901
committed
Fix media query issue
1 parent 6f2117d commit f6e14e1

23 files changed

+48
-36
lines changed

‎.changeset/modern-sites-worry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
---
4+
5+
Fix media query issue

‎libs/extractor/src/css_utils.rs‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ pub fn css_to_style<'a>(
6060
let sel = input[..start].trim().to_string();
6161
if sel.starts_with("@media") {
6262
Some(StyleSelector::Media {
63-
query: sel.replace(" ", "")["@media".len()..].to_string(),
63+
query: sel.replace(" ", "").replace("and(", "and (")["@media".len()..]
64+
.to_string(),
6465
selector: None,
6566
})
6667
} else {
@@ -268,11 +269,11 @@ mod tests {
268269
}",
269270
vec![
270271
("border", "1px solid #000", Some(StyleSelector::Media {
271-
query: "(min-width:768px)and(max-width:1024px)".to_string(),
272+
query: "(min-width:768px)and (max-width:1024px)".to_string(),
272273
selector: None,
273274
})),
274275
("color", "#FFF", Some(StyleSelector::Media {
275-
query: "(min-width:768px)and(max-width:1024px)".to_string(),
276+
query: "(min-width:768px)and (max-width:1024px)".to_string(),
276277
selector: None,
277278
})),
278279
("border", "1px solid #000", Some(StyleSelector::Media {
@@ -338,19 +339,19 @@ mod tests {
338339
}",
339340
vec![
340341
("border", "1px solid #FFF", Some(StyleSelector::Media {
341-
query: "(max-width:768px)and(min-width:480px)".to_string(),
342+
query: "(max-width:768px)and (min-width:480px)".to_string(),
342343
selector: None,
343344
})),
344345
("color", "#FFF", Some(StyleSelector::Media {
345-
query: "(max-width:768px)and(min-width:480px)".to_string(),
346+
query: "(max-width:768px)and (min-width:480px)".to_string(),
346347
selector: None,
347348
})),
348349
("border", "1px solid #000", Some(StyleSelector::Media {
349-
query: "(max-width:768px)and(min-width:480px)".to_string(),
350+
query: "(max-width:768px)and (min-width:480px)".to_string(),
350351
selector: Some("&:hover".to_string()),
351352
})),
352353
("color", "#000", Some(StyleSelector::Media {
353-
query: "(max-width:768px)and(min-width:480px)".to_string(),
354+
query: "(max-width:768px)and (min-width:480px)".to_string(),
354355
selector: Some("&:hover".to_string()),
355356
})),
356357
("border", "1px solid #FFF", Some(StyleSelector::Media {
@@ -392,11 +393,11 @@ mod tests {
392393
selector: None,
393394
})),
394395
("border", "1px solid #000", Some(StyleSelector::Media {
395-
query: "(max-width:768px)and(min-width:480px)".to_string(),
396+
query: "(max-width:768px)and (min-width:480px)".to_string(),
396397
selector: None,
397398
})),
398399
("color", "#000", Some(StyleSelector::Media {
399-
query: "(max-width:768px)and(min-width:480px)".to_string(),
400+
query: "(max-width:768px)and (min-width:480px)".to_string(),
400401
selector: None,
401402
})),
402403
]

‎libs/sheet/src/lib.rs‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ impl ExtractStyle for StyleSheetProperty {
7171
merge_selector(&self.class_name, self.selector.as_ref()),
7272
multi
7373
.into_iter()
74-
.map(|prop| format!("{}:{};", prop, convert_theme_variable_value(&self.value)))
74+
.map(|prop| format!("{}:{}", prop, convert_theme_variable_value(&self.value)))
7575
.collect::<Vec<String>>()
76-
.join("")
76+
.join(";")
7777
),
7878
}
7979
}
@@ -368,7 +368,7 @@ impl StyleSheet {
368368
.join("");
369369
css.push_str(
370370
if let Some(break_point) = break_point {
371-
format!("\n@media (min-width:{break_point}px){{{inner_css}}}")
371+
format!("@media(min-width:{break_point}px){{{inner_css}}}")
372372
} else {
373373
inner_css
374374
}
@@ -384,7 +384,7 @@ impl StyleSheet {
384384
.join("");
385385
css.push_str(
386386
if let Some(break_point) = break_point {
387-
format!("\n@media (min-width:{break_point}px){{{inner_css}}}")
387+
format!("@media(min-width:{break_point}px){{{inner_css}}}")
388388
} else {
389389
inner_css
390390
}
@@ -399,11 +399,17 @@ impl StyleSheet {
399399
.join("");
400400
css.push_str(
401401
if let Some(break_point) = break_point {
402+
format!("@media(min-width:{break_point}px)and {media}{{{inner_css}}}")
403+
} else {
402404
format!(
403-
"\n@media (min-width:{break_point}px) and {media}{{{inner_css}}}"
405+
"@media{}{{{}}}",
406+
if media.starts_with("(") {
407+
media.clone()
408+
} else {
409+
format!(" {media}")
410+
},
411+
inner_css.as_str()
404412
)
405-
} else {
406-
format!("\n@media {}{{{}}}", media, inner_css.as_str())
407413
}
408414
.as_str(),
409415
);

‎libs/sheet/src/snapshots/sheet__tests__create_css-3.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:768px){.test{margin-left:40px;margin-right:40px;}.test{margin-top:40px;margin-bottom:40px;}}"
5+
"@media(min-width:768px){.test{margin-left:40px;margin-right:40px}.test{margin-top:40px;margin-bottom:40px}}"

‎libs/sheet/src/snapshots/sheet__tests__create_css.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:480px){.test{margin-left:40px;margin-right:40px;}}"
5+
"@media(min-width:480px){.test{margin-left:40px;margin-right:40px}}"

‎libs/sheet/src/snapshots/sheet__tests__create_css_sort_test.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:480px){.test{background:some}.test{background-color:red}}"
5+
"@media(min-width:480px){.test{background:some}.test{background-color:red}}"

‎libs/sheet/src/snapshots/sheet__tests__create_css_with_basic_sort_test.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:480px){.test{background-color:red}}\n@media (min-width:480px){.test{background:some}}"
5+
"@media(min-width:480px){.test{background-color:red}}@media(min-width:480px){.test{background:some}}"

‎libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-2.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:480px){div{background-color:red}}"
5+
"@media(min-width:480px){div{background-color:red}}"

‎libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-3.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:480px){div{background-color:red}}\n@media (min-width:768px){div{background-color:blue}}"
5+
"@media(min-width:480px){div{background-color:red}}@media(min-width:768px){div{background-color:blue}}"

‎libs/sheet/src/snapshots/sheet__tests__create_css_with_global_selector-4.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
source: libs/sheet/src/lib.rs
33
expression: sheet.create_css()
44
---
5-
"\n@media (min-width:480px){div{background-color:blue}}div{background-color:red}"
5+
"@media(min-width:480px){div{background-color:blue}}div{background-color:red}"

0 commit comments

Comments
 (0)