mirror of
https://github.com/swc-project/swc.git
synced 2024-11-23 17:54:15 +03:00
feat(css/minifier): Compress more properties (#4155)
This commit is contained in:
Alexander Akait
GitHub
parent
e23066487e
commit
364ebd951a
@ -8,7 +8,7 @@ pub fn compress_declaration() -> impl VisitMut {
|
||||
struct CompressDeclaration {}
|
||||
|
||||
impl CompressDeclaration {
|
||||
fn is_same_dimension_length_nodes(
|
||||
fn is_same_length_nodes(
|
||||
&self,
|
||||
node_1: Option<&ComponentValue>,
|
||||
node_2: Option<&ComponentValue>,
|
||||
@ -34,6 +34,60 @@ impl CompressDeclaration {
|
||||
Some(ComponentValue::Integer(Integer { value: 0, .. })),
|
||||
Some(ComponentValue::Integer(Integer { value: 0, .. })),
|
||||
) => true,
|
||||
(
|
||||
Some(ComponentValue::Number(Number {
|
||||
value: first_number,
|
||||
..
|
||||
})),
|
||||
Some(ComponentValue::Number(Number {
|
||||
value: second_number,
|
||||
..
|
||||
})),
|
||||
) if first_number == second_number => true,
|
||||
_ => false,
|
||||
}
|
||||
}
|
||||
|
||||
fn is_same_length_percentage_nodes(
|
||||
&self,
|
||||
node_1: Option<&ComponentValue>,
|
||||
node_2: Option<&ComponentValue>,
|
||||
) -> bool {
|
||||
match (node_1, node_2) {
|
||||
(
|
||||
Some(ComponentValue::Dimension(Dimension::Length(Length {
|
||||
value: value_1,
|
||||
unit: unit_1,
|
||||
..
|
||||
}))),
|
||||
Some(ComponentValue::Dimension(Dimension::Length(Length {
|
||||
value: value_2,
|
||||
unit: unit_2,
|
||||
..
|
||||
}))),
|
||||
) if value_1.value == value_2.value
|
||||
&& unit_1.value.to_lowercase() == unit_2.value.to_lowercase() =>
|
||||
{
|
||||
true
|
||||
}
|
||||
(
|
||||
Some(ComponentValue::Percentage(Percentage { value: value_1, .. })),
|
||||
Some(ComponentValue::Percentage(Percentage { value: value_2, .. })),
|
||||
) if value_1.value == value_2.value => true,
|
||||
(
|
||||
Some(ComponentValue::Integer(Integer { value: 0, .. })),
|
||||
Some(ComponentValue::Integer(Integer { value: 0, .. })),
|
||||
) => true,
|
||||
(
|
||||
Some(ComponentValue::Number(Number {
|
||||
value: first_number,
|
||||
..
|
||||
})),
|
||||
Some(ComponentValue::Number(Number {
|
||||
value: second_number,
|
||||
..
|
||||
})),
|
||||
) if first_number == second_number => true,
|
||||
_ => false,
|
||||
}
|
||||
}
|
||||
@ -247,8 +301,18 @@ impl VisitMut for CompressDeclaration {
|
||||
_ => {}
|
||||
}
|
||||
}
|
||||
"padding" | "margin" | "border-width" | "inset" | "scroll-margin"
|
||||
// TODO handle `auto`
|
||||
// TODO compress numbers too
|
||||
"padding"
|
||||
| "margin"
|
||||
| "border-width"
|
||||
| "inset"
|
||||
| "scroll-margin"
|
||||
| "scroll-padding"
|
||||
| "mask-border-outset"
|
||||
| "border-image-width"
|
||||
| "border-image-outset"
|
||||
| "border-image-slice"
|
||||
if declaration.value.len() > 1 =>
|
||||
{
|
||||
let top = declaration.value.get(0);
|
||||
@ -266,9 +330,9 @@ impl VisitMut for CompressDeclaration {
|
||||
.or_else(|| declaration.value.get(1))
|
||||
.or_else(|| declaration.value.get(0));
|
||||
|
||||
if self.is_same_dimension_length_nodes(left, right) {
|
||||
if self.is_same_dimension_length_nodes(bottom, top) {
|
||||
if self.is_same_dimension_length_nodes(right, top) {
|
||||
if self.is_same_length_percentage_nodes(left, right) {
|
||||
if self.is_same_length_percentage_nodes(bottom, top) {
|
||||
if self.is_same_length_percentage_nodes(right, top) {
|
||||
declaration.value = vec![top.unwrap().clone()];
|
||||
} else {
|
||||
declaration.value =
|
||||
@ -296,17 +360,66 @@ impl VisitMut for CompressDeclaration {
|
||||
| "scroll-padding-block"
|
||||
| "scroll-margin-inline"
|
||||
| "scroll-margin-block"
|
||||
| "border-top-left-radius"
|
||||
| "border-top-right-radius"
|
||||
| "border-bottom-right-radius"
|
||||
| "border-bottom-left-radius"
|
||||
| "border-start-start-radius"
|
||||
| "border-start-end-radius"
|
||||
| "border-end-start-radius"
|
||||
| "border-end-end-radius"
|
||||
if declaration.value.len() == 2 =>
|
||||
{
|
||||
let first = declaration.value.get(0);
|
||||
let second = declaration.value.get(1);
|
||||
|
||||
if self.is_same_dimension_length_nodes(first, second)
|
||||
if self.is_same_length_percentage_nodes(first, second)
|
||||
|| self.is_same_ident(first, second)
|
||||
{
|
||||
declaration.value.remove(1);
|
||||
}
|
||||
}
|
||||
"border-style" if declaration.value.len() > 1 => {
|
||||
let top = declaration.value.get(0);
|
||||
let right = declaration
|
||||
.value
|
||||
.get(1)
|
||||
.or_else(|| declaration.value.get(0));
|
||||
let bottom = declaration
|
||||
.value
|
||||
.get(2)
|
||||
.or_else(|| declaration.value.get(0));
|
||||
let left = declaration
|
||||
.value
|
||||
.get(3)
|
||||
.or_else(|| declaration.value.get(1))
|
||||
.or_else(|| declaration.value.get(0));
|
||||
|
||||
if self.is_same_ident(left, right) {
|
||||
if self.is_same_ident(bottom, top) {
|
||||
if self.is_same_ident(right, top) {
|
||||
declaration.value = vec![top.unwrap().clone()];
|
||||
} else {
|
||||
declaration.value =
|
||||
vec![top.unwrap().clone(), right.unwrap().clone()];
|
||||
}
|
||||
} else {
|
||||
declaration.value = vec![
|
||||
top.unwrap().clone(),
|
||||
right.unwrap().clone(),
|
||||
bottom.unwrap().clone(),
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
"border-spacing" | "border-image-repeat" if declaration.value.len() == 2 => {
|
||||
let first = declaration.value.get(0);
|
||||
let second = declaration.value.get(1);
|
||||
|
||||
if self.is_same_length_nodes(first, second) {
|
||||
declaration.value.remove(1);
|
||||
}
|
||||
}
|
||||
"font-weight" => {
|
||||
declaration.value = declaration
|
||||
.value
|
||||
@ -384,6 +497,9 @@ impl VisitMut for CompressDeclaration {
|
||||
| "overscroll-behavior"
|
||||
| "scroll-snap-align"
|
||||
| "overflow"
|
||||
| "place-self"
|
||||
| "place-items"
|
||||
| "place-content"
|
||||
if declaration.value.len() == 2 =>
|
||||
{
|
||||
let first = declaration.value.get(0);
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
border-bottom-left-radius: 40px;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-bottom-left-radius: 40px 40px;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
border-bottom-left-radius: 50% 50%;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-bottom-left-radius:40px}.class-2{border-bottom-left-radius:40px}.class-3{border-bottom-left-radius:50%}
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
border-bottom-right-radius: 40px;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-bottom-right-radius: 40px 40px;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
border-bottom-right-radius: 50% 50%;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-bottom-right-radius:40px}.class-2{border-bottom-right-radius:40px}.class-3{border-bottom-right-radius:50%}
|
||||
@ -0,0 +1,3 @@
|
||||
.class-1 {
|
||||
border-end-end-radius: 20px 20px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-end-end-radius:20px}
|
||||
@ -0,0 +1,3 @@
|
||||
.class-1 {
|
||||
border-end-start-radius: 20px 20px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-end-start-radius:20px}
|
||||
@ -1 +1 @@
|
||||
.class-1{border-image-repeat:round stretch}.class-2{border-image-repeat:round}.class-3{border-image-repeat:space}
|
||||
.class-1{border-image-repeat:round stretch}.class-2{border-image-repeat:round round}.class-3{border-image-repeat:space space}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
.class-1 {
|
||||
border-image-slice: 30 30% 45;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-image-slice: 30% 30% 30% 30%;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-slice/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-slice/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{border-image-slice:30 30%45}.class-2{border-image-slice:30%}
|
||||
@ -0,0 +1,11 @@
|
||||
.class {
|
||||
border-image-width: 5% 2em 10% auto;
|
||||
}
|
||||
|
||||
.class-1 {
|
||||
border-image-width: 5% 5%;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-image-width: 20px 20px 20px 20px;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-width/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-width/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class{border-image-width:5%2em 10%auto}.class-1{border-image-width:5%}.class-2{border-image-width:20px}
|
||||
@ -0,0 +1,27 @@
|
||||
.class-1 {
|
||||
border-spacing: 2px;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-spacing: 1cm 2em;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
border-spacing: 1cm 1cm;
|
||||
}
|
||||
|
||||
.class-4 {
|
||||
border-spacing: 1cm 1cm;
|
||||
}
|
||||
|
||||
.class-5 {
|
||||
border-spacing: 0 1cm;
|
||||
}
|
||||
|
||||
.class-6 {
|
||||
border-spacing: 0 0;
|
||||
}
|
||||
|
||||
.class-7 {
|
||||
border-spacing: 0px 0px;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-spacing/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-spacing/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{border-spacing:2px}.class-2{border-spacing:1cm 2em}.class-3{border-spacing:1cm}.class-4{border-spacing:1cm}.class-5{border-spacing:0 1cm}.class-6{border-spacing:0}.class-7{border-spacing:0}
|
||||
@ -0,0 +1,3 @@
|
||||
.class-1 {
|
||||
border-start-end-radius: 20px 20px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-start-end-radius:20px}
|
||||
@ -0,0 +1,3 @@
|
||||
.class-1 {
|
||||
border-start-start-radius: 20px 20px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-start-start-radius:20px}
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
border-style: none solid dotted dashed;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-style: solid solid solid solid;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
border-style: double solid solid solid;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-style/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/border-style/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{border-style:none solid dotted dashed}.class-2{border-style:solid}.class-3{border-style:double solid solid}
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
border-top-left-radius: 40px;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-top-left-radius: 40px 40px;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
border-top-left-radius: 50% 50%;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-top-left-radius:40px}.class-2{border-top-left-radius:40px}.class-3{border-top-left-radius:50%}
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
border-top-right-radius: 40px;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
border-top-right-radius: 40px 40px;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
border-top-right-radius: 50% 50%;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.class-1{border-top-right-radius:40px}.class-2{border-top-right-radius:40px}.class-3{border-top-right-radius:50%}
|
||||
@ -75,3 +75,7 @@
|
||||
.class20 {
|
||||
inset: 20px 3em 20px 3em;
|
||||
}
|
||||
|
||||
.class-21 {
|
||||
inset: 10% 5% 5% 5%;
|
||||
}
|
||||
@ -1 +1 @@
|
||||
.class1{inset:20px}.class2{inset:20px 21px 22px 23px}.class4{inset:20px 21px 22px}.class5{inset:20px 21px}.class6{inset:20px}.class7{inset:20px 21px}.class8{inset:20px}.class10{inset:20px}.class11{inset:20px 20px 21px}.class12{inset:var(--inset)}.class13{inset:20px var(--inset)}.class14{inset:20px 20px var(--inset)}.class15{inset:20px 20px 20px var(--inset)}.class16{inset:var(--inset)}.class17{inset:var(--inset)var(--inset)}.class18{inset:var(--inset)var(--inset)var(--inset)var(--inset)}.class19{INSET:20PX}.class20{inset:20px 3em}
|
||||
.class1{inset:20px}.class2{inset:20px 21px 22px 23px}.class4{inset:20px 21px 22px}.class5{inset:20px 21px}.class6{inset:20px}.class7{inset:20px 21px}.class8{inset:20px}.class10{inset:20px}.class11{inset:20px 20px 21px}.class12{inset:var(--inset)}.class13{inset:20px var(--inset)}.class14{inset:20px 20px var(--inset)}.class15{inset:20px 20px 20px var(--inset)}.class16{inset:var(--inset)}.class17{inset:var(--inset)var(--inset)}.class18{inset:var(--inset)var(--inset)var(--inset)var(--inset)}.class19{INSET:20PX}.class20{inset:20px 3em}.class-21{inset:10%5%5%}
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
mask-border-outset: 7px 12px 14px 5px;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
mask-border-outset: 1.2 1.2;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
mask-border-outset: 45px 2 45px 2;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/mask-border-outset/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/mask-border-outset/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{mask-border-outset:7px 12px 14px 5px}.class-2{mask-border-outset:1.2}.class-3{mask-border-outset:45px 2 45px 2}
|
||||
@ -0,0 +1,11 @@
|
||||
.class-1 {
|
||||
place-content: center center;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
place-content: first baseline space-evenly;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
place-content: flex-start;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/place-content/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/place-content/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{place-content:center}.class-2{place-content:first baseline space-evenly}.class-3{place-content:flex-start}
|
||||
@ -0,0 +1,4 @@
|
||||
.class-1 {
|
||||
place-items: center center;
|
||||
}
|
||||
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/place-items/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/place-items/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{place-items:center}
|
||||
@ -0,0 +1,15 @@
|
||||
.class-1 {
|
||||
place-self: baseline normal;
|
||||
}
|
||||
|
||||
.class-2 {
|
||||
place-self: normal start;
|
||||
}
|
||||
|
||||
.class-3 {
|
||||
place-self: first baseline auto;
|
||||
}
|
||||
|
||||
.class-4 {
|
||||
place-self: self-start self-start;
|
||||
}
|
||||
1
crates/swc_css_minifier/tests/fixture/compress-declaration/place-self/output.min.css
vendored
Normal file
1
crates/swc_css_minifier/tests/fixture/compress-declaration/place-self/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.class-1{place-self:baseline normal}.class-2{place-self:normal start}.class-3{place-self:first baseline auto}.class-4{place-self:self-start}
|
||||
@ -75,3 +75,15 @@
|
||||
.class20 {
|
||||
scroll-padding: 20px 3em 20px 3em;
|
||||
}
|
||||
|
||||
.class21 {
|
||||
scroll-padding: 10%;
|
||||
}
|
||||
|
||||
.class22 {
|
||||
scroll-padding: 10% 20% 10% 20%;
|
||||
}
|
||||
|
||||
.class23 {
|
||||
scroll-padding: 10% 10% 10% 10%;
|
||||
}
|
||||
|
||||
@ -1 +1 @@
|
||||
.class1{scroll-padding:20px}.class2{scroll-padding:20px 21px 22px 23px}.class4{scroll-padding:20px 21px 22px}.class5{scroll-padding:20px 21px}.class6{scroll-padding:20px}.class7{scroll-padding:20px 21px}.class8{scroll-padding:20px}.class10{scroll-padding:20px}.class11{scroll-padding:20px 20px 21px}.class12{scroll-padding:var(--scroll-padding)}.class13{scroll-padding:20px var(--scroll-padding)}.class14{scroll-padding:20px 20px var(--scroll-padding)}.class15{scroll-padding:20px 20px 20px var(--scroll-padding)}.class16{scroll-padding:var(--scroll-padding)}.class17{scroll-padding:var(--scroll-padding)var(--scroll-padding)}.class18{scroll-padding:var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)}.class19{scroll-padding:20PX}.class20{scroll-padding:20px 3em}
|
||||
.class1{scroll-padding:20px}.class2{scroll-padding:20px 21px 22px 23px}.class4{scroll-padding:20px 21px 22px}.class5{scroll-padding:20px 21px}.class6{scroll-padding:20px}.class7{scroll-padding:20px 21px}.class8{scroll-padding:20px}.class10{scroll-padding:20px}.class11{scroll-padding:20px 20px 21px}.class12{scroll-padding:var(--scroll-padding)}.class13{scroll-padding:20px var(--scroll-padding)}.class14{scroll-padding:20px 20px var(--scroll-padding)}.class15{scroll-padding:20px 20px 20px var(--scroll-padding)}.class16{scroll-padding:var(--scroll-padding)}.class17{scroll-padding:var(--scroll-padding)var(--scroll-padding)}.class18{scroll-padding:var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)}.class19{scroll-padding:20PX}.class20{scroll-padding:20px 3em}.class21{scroll-padding:10%}.class22{scroll-padding:10%20%}.class23{scroll-padding:10%}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user