Emotion css minify should not trim end spaces if item is not the last

fixes #35693
vercel · Mar 29, 2022 · 1edb2f9 · 1edb2f9
1 parent a00268e
commit 1edb2f9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs
@@ -755,7 +755,7 @@ fn minify_css_string(input: &str, is_first_item: bool, is_last_item: bool) -> Co
     let pattern_trim_spaces = |c| c == ' ' || c == '\n';
     SPACE_AROUND_COLON.replace_all(
         input
-            .trim_matches(if is_first_item {
+            .trim_start_matches(if is_first_item {
                 pattern_trim_spaces
             } else {
                 pattern
@@ -768,3 +768,20 @@ fn minify_css_string(input: &str, is_first_item: bool, is_last_item: bool) -> Co
         "$s",
     )
 }
+
+mod test_emotion {
+    use super::minify_css_string;
+
+    #[test]
+    fn should_not_trim_end_space_in_first_item() {
+        assert_eq!(
+            minify_css_string(
+                r#"
+            box-shadow: inset 0px 0px 0px "#,
+                true,
+                false
+            ),
+            "box-shadow:inset 0px 0px 0px "
+        );
+    }
+}
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx b/packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
 const unitNormal = '1rem'
@@ -13,3 +14,12 @@ export const Animated = styled.div`
   }
   animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
 `
+
+const shadowBorder = ({ width = '1px', color }) =>
+  css`
+    box-shadow: inset 0px 0px 0px ${width} ${color};
+  `
+
+const StyledInput = styled.input`
+  ${shadowBorder({ color: 'red', width: '4px' })}
+`
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts
@@ -1,12 +1,22 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 const unitNormal = "1rem";
 const unitLarge = "2rem";
 const Example = /*#__PURE__*/ styled("div", {
     target: "ekie5mj0",
     label: "Example"
-})("margin:", unitNormal, " ", unitLarge, ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCB1bml0Tm9ybWFsID0gJzFyZW0nXG5jb25zdCB1bml0TGFyZ2UgPSAnMnJlbSdcblxuY29uc3QgRXhhbXBsZSA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHt1bml0Tm9ybWFsfSAke3VuaXRMYXJnZX07XG5gXG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYFxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtnQiJ9 */");
+})("margin:", unitNormal, " ", unitLarge, ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IHVuaXROb3JtYWwgPSAnMXJlbSdcbmNvbnN0IHVuaXRMYXJnZSA9ICcycmVtJ1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmBcblxuZXhwb3J0IGNvbnN0IEFuaW1hdGVkID0gc3R5bGVkLmRpdmBcbiAgJiBjb2RlIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW5lbjtcbiAgfVxuICBhbmltYXRpb246ICR7KHsgYW5pbWF0aW9uIH0pID0+IGFuaW1hdGlvbn0gMC4ycyBpbmZpbml0ZSBlYXNlLWluLW91dCBhbHRlcm5hdGU7XG5gXG5cbmNvbnN0IHNoYWRvd0JvcmRlciA9ICh7IHdpZHRoID0gJzFweCcsIGNvbG9yIH0pID0+XG4gIGNzc2BcbiAgICBib3gtc2hhZG93OiBpbnNldCAwcHggMHB4IDBweCAke3dpZHRofSAke2NvbG9yfTtcbiAgYFxuXG5jb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtzaGFkb3dCb3JkZXIoeyBjb2xvcjogJ3JlZCcsIHdpZHRoOiAnNHB4JyB9KX1cbmBcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IifQ== */");
 export const Animated = /*#__PURE__*/ styled("div", {
     target: "ekie5mj1",
     label: "Animated"
 })("& code{background-color:linen;}animation:", ({ animation  })=>animation
-, " 0.2s infinite ease-in-out alternate;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCB1bml0Tm9ybWFsID0gJzFyZW0nXG5jb25zdCB1bml0TGFyZ2UgPSAnMnJlbSdcblxuY29uc3QgRXhhbXBsZSA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHt1bml0Tm9ybWFsfSAke3VuaXRMYXJnZX07XG5gXG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYFxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVN3QiJ9 */");
+, " 0.2s infinite ease-in-out alternate;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IHVuaXROb3JtYWwgPSAnMXJlbSdcbmNvbnN0IHVuaXRMYXJnZSA9ICcycmVtJ1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmBcblxuZXhwb3J0IGNvbnN0IEFuaW1hdGVkID0gc3R5bGVkLmRpdmBcbiAgJiBjb2RlIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW5lbjtcbiAgfVxuICBhbmltYXRpb246ICR7KHsgYW5pbWF0aW9uIH0pID0+IGFuaW1hdGlvbn0gMC4ycyBpbmZpbml0ZSBlYXNlLWluLW91dCBhbHRlcm5hdGU7XG5gXG5cbmNvbnN0IHNoYWRvd0JvcmRlciA9ICh7IHdpZHRoID0gJzFweCcsIGNvbG9yIH0pID0+XG4gIGNzc2BcbiAgICBib3gtc2hhZG93OiBpbnNldCAwcHggMHB4IDBweCAke3dpZHRofSAke2NvbG9yfTtcbiAgYFxuXG5jb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtzaGFkb3dCb3JkZXIoeyBjb2xvcjogJ3JlZCcsIHdpZHRoOiAnNHB4JyB9KX1cbmBcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVd0IifQ== */");
+const shadowBorder = ({ width ="1px" , color  })=>/*#__PURE__*/ css("box-shadow:inset 0px 0px 0px ", width, " ", color, ";", "shadowBorder", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IHVuaXROb3JtYWwgPSAnMXJlbSdcbmNvbnN0IHVuaXRMYXJnZSA9ICcycmVtJ1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmBcblxuZXhwb3J0IGNvbnN0IEFuaW1hdGVkID0gc3R5bGVkLmRpdmBcbiAgJiBjb2RlIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW5lbjtcbiAgfVxuICBhbmltYXRpb246ICR7KHsgYW5pbWF0aW9uIH0pID0+IGFuaW1hdGlvbn0gMC4ycyBpbmZpbml0ZSBlYXNlLWluLW91dCBhbHRlcm5hdGU7XG5gXG5cbmNvbnN0IHNoYWRvd0JvcmRlciA9ICh7IHdpZHRoID0gJzFweCcsIGNvbG9yIH0pID0+XG4gIGNzc2BcbiAgICBib3gtc2hhZG93OiBpbnNldCAwcHggMHB4IDBweCAke3dpZHRofSAke2NvbG9yfTtcbiAgYFxuXG5jb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtzaGFkb3dCb3JkZXIoeyBjb2xvcjogJ3JlZCcsIHdpZHRoOiAnNHB4JyB9KX1cbmBcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQkUifQ== */")
+;
+const StyledInput = /*#__PURE__*/ styled("input", {
+    target: "ekie5mj2",
+    label: "StyledInput"
+})(shadowBorder({
+    color: "red",
+    width: "4px"
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IHVuaXROb3JtYWwgPSAnMXJlbSdcbmNvbnN0IHVuaXRMYXJnZSA9ICcycmVtJ1xuXG5jb25zdCBFeGFtcGxlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3VuaXROb3JtYWx9ICR7dW5pdExhcmdlfTtcbmBcblxuZXhwb3J0IGNvbnN0IEFuaW1hdGVkID0gc3R5bGVkLmRpdmBcbiAgJiBjb2RlIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaW5lbjtcbiAgfVxuICBhbmltYXRpb246ICR7KHsgYW5pbWF0aW9uIH0pID0+IGFuaW1hdGlvbn0gMC4ycyBpbmZpbml0ZSBlYXNlLWluLW91dCBhbHRlcm5hdGU7XG5gXG5cbmNvbnN0IHNoYWRvd0JvcmRlciA9ICh7IHdpZHRoID0gJzFweCcsIGNvbG9yIH0pID0+XG4gIGNzc2BcbiAgICBib3gtc2hhZG93OiBpbnNldCAwcHggMHB4IDBweCAke3dpZHRofSAke2NvbG9yfTtcbiAgYFxuXG5jb25zdCBTdHlsZWRJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgJHtzaGFkb3dCb3JkZXIoeyBjb2xvcjogJ3JlZCcsIHdpZHRoOiAnNHB4JyB9KX1cbmBcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQm9CIn0= */");