diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs index 682f9e14b0565..1e773b7a393a0 100644 --- a/packages/next-swc/crates/core/src/emotion/mod.rs +++ b/packages/next-swc/crates/core/src/emotion/mod.rs @@ -309,8 +309,13 @@ impl EmotionTransformer { let q = q.take(); let minified = minify_css_string(&q.raw.value, index == 0, index == args_len - 1); - if !minified.replace(' ', "").is_empty() { - args.push(minified.as_arg()); + // Compress one more spaces into one space + if minified.replace(' ', "").is_empty() { + if index != 0 && index != args_len - 1 { + args.push(" ".as_arg()); + } + } else { + args.push(minified.as_arg()) } } } else if let Some(e) = tagged_tpl.exprs.get_mut(i) { 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 new file mode 100644 index 0000000000000..23c1567733f27 --- /dev/null +++ b/packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx @@ -0,0 +1,15 @@ +import styled from '@emotion/styled' + +const unitNormal = '1rem' +const unitLarge = '2rem' + +const Example = styled.div` + margin: ${unitNormal} ${unitLarge}; +` + +export const Animated = styled.div` + & code { + background-color: linen; + } + animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate; +` 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 new file mode 100644 index 0000000000000..891239927a055 --- /dev/null +++ b/packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts @@ -0,0 +1,12 @@ +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 */"); +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 */"); diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts index 41543223f76df..ef1b5dcee7bf2 100644 --- a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts +++ b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts @@ -41,7 +41,7 @@ export const DivContainerExtended2 = /*#__PURE__*/ styled(DivContainer, { const Container = /*#__PURE__*/ styled("button", { target: "ekie5mj5", label: "Container" -})("background:red;", stylesInCallback, ()=>/*#__PURE__*/ css({ +})("background:red;", stylesInCallback, " ", ()=>/*#__PURE__*/ css({ background: "red" }, "label:Container", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDSSJ9 */") , " color:yellow;font-size:12px;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDa0IifQ== */");