From 24c0fc0169ccc009e75d7099c262e9cf075a38ca Mon Sep 17 00:00:00 2001 From: LongYinan Date: Sat, 26 Mar 2022 17:05:01 +0800 Subject: [PATCH] Prevent spaces between expressions from being removed (#35613) fixes https://github.com/vercel/next.js/issues/35609 ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: John Daly <1719443+JohnDaly@users.noreply.github.com> --- packages/next-swc/crates/core/src/emotion/mod.rs | 9 +++++++-- .../core/tests/fixture/emotion/compress/input.tsx | 15 +++++++++++++++ .../core/tests/fixture/emotion/compress/output.ts | 12 ++++++++++++ .../fixture/emotion/css-in-callback/output.ts | 2 +- 4 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx create mode 100644 packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs index 682f9e14b056..1e773b7a393a 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 000000000000..23c1567733f2 --- /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 000000000000..891239927a05 --- /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 41543223f76d..ef1b5dcee7bf 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== */");