diff --git a/src/__tests__/baselines/base/sample1.ts.baseline b/src/__tests__/baselines/base/sample1.ts.baseline
index b000ce7..44a62f8 100644
--- a/src/__tests__/baselines/base/sample1.ts.baseline
+++ b/src/__tests__/baselines/base/sample1.ts.baseline
@@ -41,14 +41,28 @@ Source code:
TypeScript before transform:
import styled from "styled-components";
- const Button = styled.button \`\\n color: red;\\n\`;
+ const Button = styled.button \`
+ color: red;
+ \`;
declare const nonStyled: any;
- const NonButton = nonStyled.button \`\\n yo\\n\`;
- const OtherButton = styled(Button) \`\\n color: blue;\\n\`;
- const SuperButton = Button.extend \`\\n color: super;\\n\`;
- export default styled.link \`\\n color: black;\\n\`;
- export const SmallButton = Button.extend \`\\n font-size: .7em;\\n\`;
- const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`\\n font-size: .1em;\\n\`;
+ const NonButton = nonStyled.button \`
+ yo
+ \`;
+ const OtherButton = styled(Button) \`
+ color: blue;
+ \`;
+ const SuperButton = Button.extend \`
+ color: super;
+ \`;
+ export default styled.link \`
+ color: black;
+ \`;
+ export const SmallButton = Button.extend \`
+ font-size: .7em;
+ \`;
+ const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
+ font-size: .1em;
+ \`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/base/sample3.tsx.baseline b/src/__tests__/baselines/base/sample3.tsx.baseline
index 1c4f01f..3cbcdf4 100644
--- a/src/__tests__/baselines/base/sample3.tsx.baseline
+++ b/src/__tests__/baselines/base/sample3.tsx.baseline
@@ -30,7 +30,9 @@ TypeScript before transform:
interface LabelProps {
size: number;
}
- const CustomLabel = styled.label \`\\n font-size: \${(props: LabelProps) => props.size + "px"}\\n\`;
+ const CustomLabel = styled.label \`
+ font-size: \${(props: LabelProps) => props.size + "px"}
+ \`;
const LabeledLink = () => ;
export default CustomLabel;
diff --git a/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline b/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline
index ceab77a..b29b244 100644
--- a/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline
+++ b/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline
@@ -29,9 +29,21 @@ Source code:
TypeScript before transform:
declare const styled: any;
- export const A = styled.div \`\\n border: \${"solid"} 10px;\\n\`;
- styled.div \`\\n border: \${"solid"}// comment here\\n10px;\\n border: solid// comment here\\n10px;\\n\`;
- styled.div \`\\n border: \${"solid"}/* comment here\\n*/10px;\\n border: \${"solid"}/* comment here\\n*/ 10px;\\n\`;
+ export const A = styled.div \`
+ border: \${"solid"} 10px;
+ \`;
+ styled.div \`
+ border: \${"solid"}// comment here
+ 10px;
+ border: solid// comment here
+ 10px;
+ \`;
+ styled.div \`
+ border: \${"solid"}/* comment here
+ */10px;
+ border: \${"solid"}/* comment here
+ */ 10px;
+ \`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/minification-only/issue36.tsx.baseline b/src/__tests__/baselines/minification-only/issue36.tsx.baseline
index 4464da1..87777aa 100644
--- a/src/__tests__/baselines/minification-only/issue36.tsx.baseline
+++ b/src/__tests__/baselines/minification-only/issue36.tsx.baseline
@@ -29,8 +29,20 @@ TypeScript before transform:
declare const keyframes: any;
declare const styled: any;
- const rotate360 = keyframes \`\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
- export const StyledDiv = styled.div \`\\n width: 100px;\\n height: 100px;\\n background-color: greenyellow;\\n animation: \${rotate360} 2s linear infinite;\\n\`;
+ const rotate360 = keyframes \`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ \`;
+ export const StyledDiv = styled.div \`
+ width: 100px;
+ height: 100px;
+ background-color: greenyellow;
+ animation: \${rotate360} 2s linear infinite;
+ \`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline b/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline
index bf54332..c92c8aa 100644
--- a/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline
+++ b/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline
@@ -38,9 +38,21 @@ TypeScript before transform:
declare const css: any;
declare const createGlobalStyle: any;
declare const theColor: any;
- const key = keyframes \`\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
- const color = css \`\\n color: \${theColor};\\n\`;
- const MyRedBody = createGlobalStyle \`\\n body {\\n background-color: red; // comments\\n \${color} // comments\\n // it will be ignored, but still emitted \${color}\\n }\\n\`;
+ const key = keyframes \`
+ to {
+ transform: rotate(360deg);
+ }
+ \`;
+ const color = css \`
+ color: \${theColor};
+ \`;
+ const MyRedBody = createGlobalStyle \`
+ body {
+ background-color: red; // comments
+ \${color} // comments
+ // it will be ignored, but still emitted \${color}
+ }
+ \`;
export {};
@@ -52,7 +64,8 @@ TypeScript after transform:
declare const theColor: any;
const key = keyframes \`to{transform:rotate(360deg);}\`;
const color = css \`color:\${theColor};\`;
- const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
+ const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
+ }\`;
export {};
diff --git a/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline b/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline
index 081e096..9bb1b51 100644
--- a/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline
+++ b/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline
@@ -36,11 +36,24 @@ Source code:
TypeScript before transform:
declare const styled: any;
- const Simple = styled.div \`\\n width: 100%;\\n\`;
- const Interpolation = styled.div \`\\n content: " \${props => props.text} ";\\n\`;
- const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
- const Comment = styled.div \`\\n // comment\\n color: red;\\n\`;
- const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n\`;
+ const Simple = styled.div \`
+ width: 100%;
+ \`;
+ const Interpolation = styled.div \`
+ content: " \${props => props.text} ";
+ \`;
+ const SpecialCharacters = styled.div \`
+ content: " \${props => props.text} ";\\n color: red;
+ \`;
+ const Comment = styled.div \`
+ // comment
+ color: red;
+ \`;
+ const Parens = styled.div \`
+ &:hover {
+ color: blue;
+ }
+ \`;
export {};
diff --git a/src/__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline b/src/__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline
index 0d35718..213dac2 100644
--- a/src/__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline
+++ b/src/__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline
@@ -48,12 +48,35 @@ Source code:
TypeScript before transform:
declare const styled: any;
- const Simple = styled.div \`\\n width: 100%;\\n\`;
- const Interpolation = styled.div \`\\n content: "https://test.com/\${props => props.endpoint}";\\n\`;
- const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
- const Comment = styled.div \`\\n width: 100%;\\n // comment\\n color: red;\\n\`;
- const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n color: red;\\n\`;
- const UrlComments = styled.div \`\\n color: red;\\n /* // */\\n background: red;\\n /* comment 1 */\\n /* comment 2 */\\n // comment 3\\n border: 1px solid green;\\n\`;
+ const Simple = styled.div \`
+ width: 100%;
+ \`;
+ const Interpolation = styled.div \`
+ content: "https://test.com/\${props => props.endpoint}";
+ \`;
+ const SpecialCharacters = styled.div \`
+ content: " \${props => props.text} ";\\n color: red;
+ \`;
+ const Comment = styled.div \`
+ width: 100%;
+ // comment
+ color: red;
+ \`;
+ const Parens = styled.div \`
+ &:hover {
+ color: blue;
+ }
+ color: red;
+ \`;
+ const UrlComments = styled.div \`
+ color: red;
+ /* // */
+ background: red;
+ /* comment 1 */
+ /* comment 2 */
+ // comment 3
+ border: 1px solid green;
+ \`;
export {};
diff --git a/src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline b/src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline
index 89cf879..f4e8c67 100644
--- a/src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline
+++ b/src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline
@@ -60,15 +60,45 @@ Source code:
TypeScript before transform:
declare const styled: any;
- const Test1 = styled.div \`\\n width: 100%;\\n // color: \${"red"};\\n\`;
- const Test2 = styled.div \`\\n width: 100%;\\n // color: pale\${"red"};\\n\`;
- const Test3 = styled.div \`\\n width: 100%;\\n // color\\n \${"red"};\\n\`;
- const Test4 = styled.div \`\\n width: 100%;\\n // color: \${"red"}-blue;\\n\`;
- const Test5 = styled.div \`\\n width: 100%;\\n // color: \${"red"}\${"blue"};\\n\`;
- const Test6 = styled.div \`\\n background: url("https://google.com");\\n width: 100%;\\n \${"green"} // color: \${"red"}\${"blue"};\\n\`;
- const Test7 = styled.div \`\\n background: url("https://google.com");\\n width: \${p => p.props.width};\\n \${"green"} // color: \${"red"}\${"blue"};\\n height: \${p => p.props.height};\\n\`;
- const Test8 = styled.dev \`\\n color: /* \${"red"} ... disabled */ blue;\\n\`;
- const Test9 = styled.dev \`\\n color: // \${"red"} ... disabled\\n blue\\n\`;
+ const Test1 = styled.div \`
+ width: 100%;
+ // color: \${"red"};
+ \`;
+ const Test2 = styled.div \`
+ width: 100%;
+ // color: pale\${"red"};
+ \`;
+ const Test3 = styled.div \`
+ width: 100%;
+ // color
+ \${"red"};
+ \`;
+ const Test4 = styled.div \`
+ width: 100%;
+ // color: \${"red"}-blue;
+ \`;
+ const Test5 = styled.div \`
+ width: 100%;
+ // color: \${"red"}\${"blue"};
+ \`;
+ const Test6 = styled.div \`
+ background: url("https://google.com");
+ width: 100%;
+ \${"green"} // color: \${"red"}\${"blue"};
+ \`;
+ const Test7 = styled.div \`
+ background: url("https://google.com");
+ width: \${p => p.props.width};
+ \${"green"} // color: \${"red"}\${"blue"};
+ height: \${p => p.props.height};
+ \`;
+ const Test8 = styled.dev \`
+ color: /* \${"red"} ... disabled */ blue;
+ \`;
+ const Test9 = styled.dev \`
+ color: // \${"red"} ... disabled
+ blue
+ \`;
export {};
@@ -81,9 +111,11 @@ TypeScript after transform:
const Test4 = styled.div \`width:100%;//\${'red'}\`;
const Test5 = styled.div \`width:100%;//\${'red'}\${'blue'}\`;
const Test6 = styled.div \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
- const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
+ const Test7 = styled.div \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
+ height:\${p => p.props.height};\`;
const Test8 = styled.dev \`color:/*\${'red'}*/blue;\`;
- const Test9 = styled.dev \`color://\${'red'}\\nblue\`;
+ const Test9 = styled.dev \`color://\${'red'}
+ blue\`;
export {};
diff --git a/src/__tests__/baselines/minification-only/simple.ts.baseline b/src/__tests__/baselines/minification-only/simple.ts.baseline
index 697b38a..78f6ee9 100644
--- a/src/__tests__/baselines/minification-only/simple.ts.baseline
+++ b/src/__tests__/baselines/minification-only/simple.ts.baseline
@@ -86,7 +86,7 @@ TypeScript before transform:
styled.div \`abc def//ghi//jkl\`;
// ignores comment markers that are inside strings
// \`abc def"//"ghi\\'//\\'jkl\`
- styled.div \`abc def"//"ghi'//'jkl//the end\`;
+ styled.div \`abc def"//"ghi\\'//\\'jkl//the end\`;
// \`abc def"//"\`
styled.div \`abc def"//"\`;
// ignores comment markers that are inside parantheses
@@ -103,10 +103,14 @@ TypeScript before transform:
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
// removes line comments filling an entire line
// \`line one{line:two;}\`
- styled.div \`line one {\\n // remove this comment\\n line: two;\\n}\`;
+ styled.div \`line one {
+ // remove this comment
+ line: two;
+ }\`;
// removes line comments at the end of lines of code
// \`valid line with out comments\`
- styled.div \`valid line with // a comment\\nout comments\`;
+ styled.div \`valid line with // a comment
+ out comments\`;
// preserves multi-line comments starting with /*!
// \`this is a /*! dont ignore me please */ test\`
styled.div \`this is a /*! dont ignore me please */ test/* but you can ignore me */\`;
@@ -119,13 +123,16 @@ TypeScript before transform:
// \`this\\nis\\na \\ntest\`
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
// \`this is a test\`
- styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
+ styled.div \`this
+ is
+ a/* ignore me \\n please */
+ test\`;
// removes spaces around symbols
// \`;:{},;\`
styled.div \`; : { } , ; \`;
// ignores symbols inside strings
// \`;" : "\\' : \\';\`
- styled.div \`; " : " ' : ' ;\`;
+ styled.div \`; " : " \\' : \\' ;\`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/minification/issue36-extended.ts.baseline b/src/__tests__/baselines/minification/issue36-extended.ts.baseline
index 37ce843..8cdb3d1 100644
--- a/src/__tests__/baselines/minification/issue36-extended.ts.baseline
+++ b/src/__tests__/baselines/minification/issue36-extended.ts.baseline
@@ -29,9 +29,21 @@ Source code:
TypeScript before transform:
declare const styled: any;
- export const A = styled.div \`\\n border: \${"solid"} 10px;\\n\`;
- styled.div \`\\n border: \${"solid"}// comment here\\n10px;\\n border: solid// comment here\\n10px;\\n\`;
- styled.div \`\\n border: \${"solid"}/* comment here\\n*/10px;\\n border: \${"solid"}/* comment here\\n*/ 10px;\\n\`;
+ export const A = styled.div \`
+ border: \${"solid"} 10px;
+ \`;
+ styled.div \`
+ border: \${"solid"}// comment here
+ 10px;
+ border: solid// comment here
+ 10px;
+ \`;
+ styled.div \`
+ border: \${"solid"}/* comment here
+ */10px;
+ border: \${"solid"}/* comment here
+ */ 10px;
+ \`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/minification/issue36.tsx.baseline b/src/__tests__/baselines/minification/issue36.tsx.baseline
index 2f1e92a..2f16c02 100644
--- a/src/__tests__/baselines/minification/issue36.tsx.baseline
+++ b/src/__tests__/baselines/minification/issue36.tsx.baseline
@@ -29,8 +29,20 @@ TypeScript before transform:
declare const keyframes: any;
declare const styled: any;
- const rotate360 = keyframes \`\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
- export const StyledDiv = styled.div \`\\n width: 100px;\\n height: 100px;\\n background-color: greenyellow;\\n animation: \${rotate360} 2s linear infinite;\\n\`;
+ const rotate360 = keyframes \`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ \`;
+ export const StyledDiv = styled.div \`
+ width: 100px;
+ height: 100px;
+ background-color: greenyellow;
+ animation: \${rotate360} 2s linear infinite;
+ \`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/minification/minify-css-in-helpers.ts.baseline b/src/__tests__/baselines/minification/minify-css-in-helpers.ts.baseline
index bf54332..c92c8aa 100644
--- a/src/__tests__/baselines/minification/minify-css-in-helpers.ts.baseline
+++ b/src/__tests__/baselines/minification/minify-css-in-helpers.ts.baseline
@@ -38,9 +38,21 @@ TypeScript before transform:
declare const css: any;
declare const createGlobalStyle: any;
declare const theColor: any;
- const key = keyframes \`\\n to {\\n transform: rotate(360deg);\\n }\\n\`;
- const color = css \`\\n color: \${theColor};\\n\`;
- const MyRedBody = createGlobalStyle \`\\n body {\\n background-color: red; // comments\\n \${color} // comments\\n // it will be ignored, but still emitted \${color}\\n }\\n\`;
+ const key = keyframes \`
+ to {
+ transform: rotate(360deg);
+ }
+ \`;
+ const color = css \`
+ color: \${theColor};
+ \`;
+ const MyRedBody = createGlobalStyle \`
+ body {
+ background-color: red; // comments
+ \${color} // comments
+ // it will be ignored, but still emitted \${color}
+ }
+ \`;
export {};
@@ -52,7 +64,8 @@ TypeScript after transform:
declare const theColor: any;
const key = keyframes \`to{transform:rotate(360deg);}\`;
const color = css \`color:\${theColor};\`;
- const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}\\n}\`;
+ const MyRedBody = createGlobalStyle \`body{background-color:red;\${color}//\${color}
+ }\`;
export {};
diff --git a/src/__tests__/baselines/minification/minify-css-to-use-with-transpilation.ts.baseline b/src/__tests__/baselines/minification/minify-css-to-use-with-transpilation.ts.baseline
index 1bd307a..18e1925 100644
--- a/src/__tests__/baselines/minification/minify-css-to-use-with-transpilation.ts.baseline
+++ b/src/__tests__/baselines/minification/minify-css-to-use-with-transpilation.ts.baseline
@@ -36,11 +36,24 @@ Source code:
TypeScript before transform:
declare const styled: any;
- const Simple = styled.div \`\\n width: 100%;\\n\`;
- const Interpolation = styled.div \`\\n content: " \${props => props.text} ";\\n\`;
- const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
- const Comment = styled.div \`\\n // comment\\n color: red;\\n\`;
- const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n\`;
+ const Simple = styled.div \`
+ width: 100%;
+ \`;
+ const Interpolation = styled.div \`
+ content: " \${props => props.text} ";
+ \`;
+ const SpecialCharacters = styled.div \`
+ content: " \${props => props.text} ";\\n color: red;
+ \`;
+ const Comment = styled.div \`
+ // comment
+ color: red;
+ \`;
+ const Parens = styled.div \`
+ &:hover {
+ color: blue;
+ }
+ \`;
export {};
diff --git a/src/__tests__/baselines/minification/minify-css-to-use-without-transpilation.ts.baseline b/src/__tests__/baselines/minification/minify-css-to-use-without-transpilation.ts.baseline
index 6ea4700..e0a8cbe 100644
--- a/src/__tests__/baselines/minification/minify-css-to-use-without-transpilation.ts.baseline
+++ b/src/__tests__/baselines/minification/minify-css-to-use-without-transpilation.ts.baseline
@@ -48,12 +48,35 @@ Source code:
TypeScript before transform:
declare const styled: any;
- const Simple = styled.div \`\\n width: 100%;\\n\`;
- const Interpolation = styled.div \`\\n content: "https://test.com/\${props => props.endpoint}";\\n\`;
- const SpecialCharacters = styled.div \`\\n content: " \${props => props.text} ";\\n color: red;\\n\`;
- const Comment = styled.div \`\\n width: 100%;\\n // comment\\n color: red;\\n\`;
- const Parens = styled.div \`\\n &:hover {\\n color: blue;\\n }\\n color: red;\\n\`;
- const UrlComments = styled.div \`\\n color: red;\\n /* // */\\n background: red;\\n /* comment 1 */\\n /* comment 2 */\\n // comment 3\\n border: 1px solid green;\\n\`;
+ const Simple = styled.div \`
+ width: 100%;
+ \`;
+ const Interpolation = styled.div \`
+ content: "https://test.com/\${props => props.endpoint}";
+ \`;
+ const SpecialCharacters = styled.div \`
+ content: " \${props => props.text} ";\\n color: red;
+ \`;
+ const Comment = styled.div \`
+ width: 100%;
+ // comment
+ color: red;
+ \`;
+ const Parens = styled.div \`
+ &:hover {
+ color: blue;
+ }
+ color: red;
+ \`;
+ const UrlComments = styled.div \`
+ color: red;
+ /* // */
+ background: red;
+ /* comment 1 */
+ /* comment 2 */
+ // comment 3
+ border: 1px solid green;
+ \`;
export {};
diff --git a/src/__tests__/baselines/minification/minify-single-line-comments-with-interpolations.ts.baseline b/src/__tests__/baselines/minification/minify-single-line-comments-with-interpolations.ts.baseline
index d6c30cb..58db74e 100644
--- a/src/__tests__/baselines/minification/minify-single-line-comments-with-interpolations.ts.baseline
+++ b/src/__tests__/baselines/minification/minify-single-line-comments-with-interpolations.ts.baseline
@@ -60,15 +60,45 @@ Source code:
TypeScript before transform:
declare const styled: any;
- const Test1 = styled.div \`\\n width: 100%;\\n // color: \${"red"};\\n\`;
- const Test2 = styled.div \`\\n width: 100%;\\n // color: pale\${"red"};\\n\`;
- const Test3 = styled.div \`\\n width: 100%;\\n // color\\n \${"red"};\\n\`;
- const Test4 = styled.div \`\\n width: 100%;\\n // color: \${"red"}-blue;\\n\`;
- const Test5 = styled.div \`\\n width: 100%;\\n // color: \${"red"}\${"blue"};\\n\`;
- const Test6 = styled.div \`\\n background: url("https://google.com");\\n width: 100%;\\n \${"green"} // color: \${"red"}\${"blue"};\\n\`;
- const Test7 = styled.div \`\\n background: url("https://google.com");\\n width: \${p => p.props.width};\\n \${"green"} // color: \${"red"}\${"blue"};\\n height: \${p => p.props.height};\\n\`;
- const Test8 = styled.dev \`\\n color: /* \${"red"} ... disabled */ blue;\\n\`;
- const Test9 = styled.dev \`\\n color: // \${"red"} ... disabled\\n blue\\n\`;
+ const Test1 = styled.div \`
+ width: 100%;
+ // color: \${"red"};
+ \`;
+ const Test2 = styled.div \`
+ width: 100%;
+ // color: pale\${"red"};
+ \`;
+ const Test3 = styled.div \`
+ width: 100%;
+ // color
+ \${"red"};
+ \`;
+ const Test4 = styled.div \`
+ width: 100%;
+ // color: \${"red"}-blue;
+ \`;
+ const Test5 = styled.div \`
+ width: 100%;
+ // color: \${"red"}\${"blue"};
+ \`;
+ const Test6 = styled.div \`
+ background: url("https://google.com");
+ width: 100%;
+ \${"green"} // color: \${"red"}\${"blue"};
+ \`;
+ const Test7 = styled.div \`
+ background: url("https://google.com");
+ width: \${p => p.props.width};
+ \${"green"} // color: \${"red"}\${"blue"};
+ height: \${p => p.props.height};
+ \`;
+ const Test8 = styled.dev \`
+ color: /* \${"red"} ... disabled */ blue;
+ \`;
+ const Test9 = styled.dev \`
+ color: // \${"red"} ... disabled
+ blue
+ \`;
export {};
@@ -81,9 +111,11 @@ TypeScript after transform:
const Test4 = styled.div.withConfig({ displayName: "Test4" }) \`width:100%;//\${'red'}\`;
const Test5 = styled.div.withConfig({ displayName: "Test5" }) \`width:100%;//\${'red'}\${'blue'}\`;
const Test6 = styled.div.withConfig({ displayName: "Test6" }) \`background:url("https://google.com");width:100%;\${'green'}//\${'red'}\${'blue'}\`;
- const Test7 = styled.div.withConfig({ displayName: "Test7" }) \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}\\nheight:\${p => p.props.height};\`;
+ const Test7 = styled.div.withConfig({ displayName: "Test7" }) \`background:url("https://google.com");width:\${p => p.props.width};\${'green'}//\${'red'}\${'blue'}
+ height:\${p => p.props.height};\`;
const Test8 = styled.dev.withConfig({ displayName: "Test8" }) \`color:/*\${'red'}*/blue;\`;
- const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}\\nblue\`;
+ const Test9 = styled.dev.withConfig({ displayName: "Test9" }) \`color://\${'red'}
+ blue\`;
export {};
diff --git a/src/__tests__/baselines/minification/simple.ts.baseline b/src/__tests__/baselines/minification/simple.ts.baseline
index 697b38a..78f6ee9 100644
--- a/src/__tests__/baselines/minification/simple.ts.baseline
+++ b/src/__tests__/baselines/minification/simple.ts.baseline
@@ -86,7 +86,7 @@ TypeScript before transform:
styled.div \`abc def//ghi//jkl\`;
// ignores comment markers that are inside strings
// \`abc def"//"ghi\\'//\\'jkl\`
- styled.div \`abc def"//"ghi'//'jkl//the end\`;
+ styled.div \`abc def"//"ghi\\'//\\'jkl//the end\`;
// \`abc def"//"\`
styled.div \`abc def"//"\`;
// ignores comment markers that are inside parantheses
@@ -103,10 +103,14 @@ TypeScript before transform:
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
// removes line comments filling an entire line
// \`line one{line:two;}\`
- styled.div \`line one {\\n // remove this comment\\n line: two;\\n}\`;
+ styled.div \`line one {
+ // remove this comment
+ line: two;
+ }\`;
// removes line comments at the end of lines of code
// \`valid line with out comments\`
- styled.div \`valid line with // a comment\\nout comments\`;
+ styled.div \`valid line with // a comment
+ out comments\`;
// preserves multi-line comments starting with /*!
// \`this is a /*! dont ignore me please */ test\`
styled.div \`this is a /*! dont ignore me please */ test/* but you can ignore me */\`;
@@ -119,13 +123,16 @@ TypeScript before transform:
// \`this\\nis\\na \\ntest\`
styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
// \`this is a test\`
- styled.div \`this\\nis\\na/* ignore me \\n please */\\ntest\`;
+ styled.div \`this
+ is
+ a/* ignore me \\n please */
+ test\`;
// removes spaces around symbols
// \`;:{},;\`
styled.div \`; : { } , ; \`;
// ignores symbols inside strings
// \`;" : "\\' : \\';\`
- styled.div \`; " : " ' : ' ;\`;
+ styled.div \`; " : " \\' : \\' ;\`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/ssr/sample1.ts.baseline b/src/__tests__/baselines/ssr/sample1.ts.baseline
index e35dbe1..fef7e0b 100644
--- a/src/__tests__/baselines/ssr/sample1.ts.baseline
+++ b/src/__tests__/baselines/ssr/sample1.ts.baseline
@@ -41,14 +41,28 @@ Source code:
TypeScript before transform:
import styled from "styled-components";
- const Button = styled.button \`\\n color: red;\\n\`;
+ const Button = styled.button \`
+ color: red;
+ \`;
declare const nonStyled: any;
- const NonButton = nonStyled.button \`\\n yo\\n\`;
- const OtherButton = styled(Button) \`\\n color: blue;\\n\`;
- const SuperButton = Button.extend \`\\n color: super;\\n\`;
- export default styled.link \`\\n color: black;\\n\`;
- export const SmallButton = Button.extend \`\\n font-size: .7em;\\n\`;
- const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`\\n font-size: .1em;\\n\`;
+ const NonButton = nonStyled.button \`
+ yo
+ \`;
+ const OtherButton = styled(Button) \`
+ color: blue;
+ \`;
+ const SuperButton = Button.extend \`
+ color: super;
+ \`;
+ export default styled.link \`
+ color: black;
+ \`;
+ export const SmallButton = Button.extend \`
+ font-size: .7em;
+ \`;
+ const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
+ font-size: .1em;
+ \`;
TypeScript after transform:
diff --git a/src/__tests__/baselines/ssr/sample3.tsx.baseline b/src/__tests__/baselines/ssr/sample3.tsx.baseline
index 9adf853..1292317 100644
--- a/src/__tests__/baselines/ssr/sample3.tsx.baseline
+++ b/src/__tests__/baselines/ssr/sample3.tsx.baseline
@@ -30,7 +30,9 @@ TypeScript before transform:
interface LabelProps {
size: number;
}
- const CustomLabel = styled.label \`\\n font-size: \${(props: LabelProps) => props.size + "px"}\\n\`;
+ const CustomLabel = styled.label \`
+ font-size: \${(props: LabelProps) => props.size + "px"}
+ \`;
const LabeledLink = () => ;
export default CustomLabel;
diff --git a/yarn.lock b/yarn.lock
index 9e8526d..e5fdd18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3581,9 +3581,9 @@ type-check@~0.3.2:
prelude-ls "~1.1.2"
typescript@^3.3.1:
- version "3.3.1"
- resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.1.tgz#6de14e1db4b8a006ac535e482c8ba018c55f750b"
- integrity sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA==
+ version "3.6.2"
+ resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.2.tgz#105b0f1934119dde543ac8eb71af3a91009efe54"
+ integrity sha512-lmQ4L+J6mnu3xweP8+rOrUwzmN+MRAj7TgtJtDaXE5PMyX2kCrklhg3rvOsOIfNeAWMQWO2F1GPc1kMD2vLAfw==
uglify-js@^3.1.4:
version "3.4.9"