From 4f38b28b609d485f7c32672a2c8b3a0f6d49f3f2 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2019 22:28:33 +0000 Subject: [PATCH 1/2] Bump typescript from 3.3.1 to 3.6.2 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.3.1 to 3.6.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v3.3.1...v3.6.2) Signed-off-by: dependabot-preview[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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" From 07d81307945de9692bf04ae20435b6e722df8aa7 Mon Sep 17 00:00:00 2001 From: Igor Oleinikov Date: Tue, 3 Sep 2019 16:29:57 -0700 Subject: [PATCH 2/2] Update snapshots - they changed due to changed way of source formatting by TypeScript --- .../baselines/base/sample1.ts.baseline | 28 +++++++--- .../baselines/base/sample3.tsx.baseline | 4 +- .../issue36-extended.ts.baseline | 18 +++++-- .../minification-only/issue36.tsx.baseline | 16 +++++- .../minify-css-in-helpers.ts.baseline | 21 ++++++-- ...-css-to-use-with-transpilation.ts.baseline | 23 ++++++-- ...s-to-use-without-transpilation.ts.baseline | 35 +++++++++--- ...e-comments-with-interpolations.ts.baseline | 54 +++++++++++++++---- .../minification-only/simple.ts.baseline | 17 ++++-- .../minification/issue36-extended.ts.baseline | 18 +++++-- .../minification/issue36.tsx.baseline | 16 +++++- .../minify-css-in-helpers.ts.baseline | 21 ++++++-- ...-css-to-use-with-transpilation.ts.baseline | 23 ++++++-- ...s-to-use-without-transpilation.ts.baseline | 35 +++++++++--- ...e-comments-with-interpolations.ts.baseline | 54 +++++++++++++++---- .../baselines/minification/simple.ts.baseline | 17 ++++-- .../baselines/ssr/sample1.ts.baseline | 28 +++++++--- .../baselines/ssr/sample3.tsx.baseline | 4 +- 18 files changed, 344 insertions(+), 88 deletions(-) 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;