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 new file mode 100644 index 0000000..bf54332 --- /dev/null +++ b/src/__tests__/baselines/minification-only/minify-css-in-helpers.ts.baseline @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`minify-css-in-helpers.ts 1`] = ` + +File: minify-css-in-helpers.ts +Source code: + + declare const keyframes: any; + declare const css: any; + declare const createGlobalStyle: any; + + declare const theColor: any; + + 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 {}; + + +TypeScript before transform: + + declare const keyframes: any; + 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\`; + export {}; + + +TypeScript after transform: + + declare const keyframes: any; + declare const css: any; + declare const createGlobalStyle: any; + 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}\`; + 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 new file mode 100644 index 0000000..081e096 --- /dev/null +++ b/src/__tests__/baselines/minification-only/minify-css-to-use-with-transpilation.ts.baseline @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`minify-css-to-use-with-transpilation.ts 1`] = ` + +File: minify-css-to-use-with-transpilation.ts +Source code: + + declare const styled: any; + + 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 {}; + + +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\`; + export {}; + + +TypeScript after transform: + + declare const styled: any; + const Simple = styled.div \`width:100%;\`; + const Interpolation = styled.div \`content:" \${props => props.text} ";\`; + const SpecialCharacters = styled.div \`content:" \${props => props.text} ";color:red;\`; + const Comment = styled.div \`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 new file mode 100644 index 0000000..9c6652a --- /dev/null +++ b/src/__tests__/baselines/minification-only/minify-css-to-use-without-transpilation.ts.baseline @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`minify-css-to-use-without-transpilation.ts 1`] = ` + +File: minify-css-to-use-without-transpilation.ts +Source code: + + declare const styled: any; + + 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 {}; + + +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\`; + export {}; + + +TypeScript after transform: + + declare const styled: any; + 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} ";color:red;\`; + const Comment = styled.div \`width:100%;color:red;\`; + const Parens = styled.div \`&:hover{color:blue;}color:red;\`; + const UrlComments = styled.div \`color:red; background:red;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 new file mode 100644 index 0000000..89cf879 --- /dev/null +++ b/src/__tests__/baselines/minification-only/minify-single-line-comments-with-interpolations.ts.baseline @@ -0,0 +1,91 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`minify-single-line-comments-with-interpolations.ts 1`] = ` + +File: minify-single-line-comments-with-interpolations.ts +Source code: + + declare const styled: any; + + 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 {} + +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\`; + export {}; + + +TypeScript after transform: + + declare const styled: any; + const Test1 = styled.div \`width:100%;//\${'red'}\`; + const Test2 = styled.div \`width:100%;//\${'red'}\`; + const Test3 = styled.div \`width:100%;\${'red'};\`; + 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 Test8 = styled.dev \`color:/*\${'red'}*/blue;\`; + const Test9 = styled.dev \`color://\${'red'}\\nblue\`; + export {}; + + + +`; diff --git a/src/__tests__/baselines/minification-only/simple.ts.baseline b/src/__tests__/baselines/minification-only/simple.ts.baseline new file mode 100644 index 0000000..be2a568 --- /dev/null +++ b/src/__tests__/baselines/minification-only/simple.ts.baseline @@ -0,0 +1,184 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`simple.ts 1`] = ` + +File: simple.ts +Source code: + + declare const styled: any; + + declare const placeholder1: any; + declare const placeholder2: any; + + // splits a line by potential comment starts and joins until one is an actual comment + // \`abc def\` + 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\` + // \`abc def"//"\` + styled.div\`abc def"//"\` + + // ignores comment markers that are inside parantheses + // \`bla (//) bla\` + styled.div\`bla (//) bla//the end\` + + // ignores even unescaped URLs + // \`https://test.com\` + styled.div\`https://test.com// comment//\` + + // removes multi-line comments + // \`this is a test\` + styled.div\`this is a/* ignore me please */test\` + + // joins all lines of code + // \`this is a test\` + 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 { + // 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 + 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 */\` + + // returns the indices of removed placeholders (expressions) + // \`this is some input with \${placeholder1} and //\${placeholder2}\` + styled.div\`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\` + + // works with raw escape codes + // \`this\\\\nis\\\\na \\\\ntest\` + styled.div\`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\` + // \`this\\nis\\na \\ntest\` + styled.div\`this\\nis\\na/* ignore me \\n please */\\ntest\` + // \`this is a test\` + styled.div\`this + is + a/* ignore me \\n please */ + test\` + + // removes spaces around symbols + // \`;:{},;\` + styled.div\`; : { } , ; \` + + // ignores symbols inside strings + // \`;" : "\\' : \\';\` + styled.div\`; " : " \\' : \\' ;\` + + +TypeScript before transform: + + declare const styled: any; + declare const placeholder1: any; + declare const placeholder2: any; + // splits a line by potential comment starts and joins until one is an actual comment + // \`abc def\` + 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\`; + // \`abc def"//"\` + styled.div \`abc def"//"\`; + // ignores comment markers that are inside parantheses + // \`bla (//) bla\` + styled.div \`bla (//) bla//the end\`; + // ignores even unescaped URLs + // \`https://test.com\` + styled.div \`https://test.com// comment//\`; + // removes multi-line comments + // \`this is a test\` + styled.div \`this is a/* ignore me please */test\`; + // joins all lines of code + // \`this is a test\` + 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}\`; + // removes line comments at the end of lines of code + // \`valid line with out comments\` + styled.div \`valid line with // a comment\\nout 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 */\`; + // returns the indices of removed placeholders (expressions) + // \`this is some input with \${placeholder1} and //\${placeholder2}\` + styled.div \`this is some\\ninput with \${placeholder1} and // ignored \${placeholder2}\`; + // works with raw escape codes + // \`this\\\\nis\\\\na \\\\ntest\` + styled.div \`this\\\\nis\\\\na/* ignore me \\\\n please */\\\\ntest\`; + // \`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\`; + // removes spaces around symbols + // \`;:{},;\` + styled.div \`; : { } , ; \`; + // ignores symbols inside strings + // \`;" : "\\' : \\';\` + styled.div \`; " : " ' : ' ;\`; + + +TypeScript after transform: + + declare const styled: any; + declare const placeholder1: any; + declare const placeholder2: any; + // splits a line by potential comment starts and joins until one is an actual comment + // \`abc def\` + styled.div \`abc def\`; + // ignores comment markers that are inside strings + // \`abc def"//"ghi\\'//\\'jkl\` + styled.div \`abc def"//"ghi'//'jkl\`; + // \`abc def"//"\` + styled.div \`abc def"//"\`; + // ignores comment markers that are inside parantheses + // \`bla (//) bla\` + styled.div \`bla (//)bla\`; + // ignores even unescaped URLs + // \`https://test.com\` + styled.div \`https:\`; + // removes multi-line comments + // \`this is a test\` + styled.div \`this is a test\`; + // joins all lines of code + // \`this is a test\` + styled.div \`this is a test\`; + // removes line comments filling an entire line + // \`line one{line:two;}\` + styled.div \`line one{line:two;}\`; + // removes line comments at the end of lines of code + // \`valid line with out comments\` + styled.div \`valid line without comments\`; + // preserves multi-line comments starting with /*! + // \`this is a /*! dont ignore me please */ test\` + styled.div \`this is a test\`; + // returns the indices of removed placeholders (expressions) + // \`this is some input with \${placeholder1} and //\${placeholder2}\` + styled.div \`this is some input with\${placeholder1} and//\${placeholder2}\`; + // works with raw escape codes + // \`this\\\\nis\\\\na \\\\ntest\` + styled.div \`this\\\\nis\\\\na \\\\ntest\`; + // \`this\\nis\\na \\ntest\` + styled.div \`this is a test\`; + // \`this is a test\` + styled.div \`this is a test\`; + // removes spaces around symbols + // \`;:{},;\` + styled.div \`;:{},;\`; + // ignores symbols inside strings + // \`;" : "\\' : \\';\` + styled.div \`;" : "' : ';\`; + + + +`; diff --git a/src/__tests__/baselines/minification-only/simple2.ts.baseline b/src/__tests__/baselines/minification-only/simple2.ts.baseline new file mode 100644 index 0000000..3697adc --- /dev/null +++ b/src/__tests__/baselines/minification-only/simple2.ts.baseline @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`simple2.ts 1`] = ` + +File: simple2.ts +Source code: + + export {} + declare const styled: any; + + // spaces before and after ' " ( ) + styled.div\`a b" c " d\` // \`a b" c "d\` + styled.div\`a b' c ' d\` // \`a b' c 'd\` + styled.div\`a b( c ) d\` // \`a b( c )d\` + styled.div\`a b " c "d\` // \`a b " c "d\` + styled.div\`a b ' c 'd\` // \`a b ' c 'd\` + styled.div\`a b ( c )d\` // \`a b ( c )d\` + + +TypeScript before transform: + + export {}; + declare const styled: any; + // spaces before and after ' " ( ) + styled.div \`a b" c " d\`; // \`a b" c "d\` + styled.div \`a b' c ' d\`; // \`a b' c 'd\` + styled.div \`a b( c ) d\`; // \`a b( c )d\` + styled.div \`a b " c "d\`; // \`a b " c "d\` + styled.div \`a b ' c 'd\`; // \`a b ' c 'd\` + styled.div \`a b ( c )d\`; // \`a b ( c )d\` + + +TypeScript after transform: + + export {}; + declare const styled: any; + // spaces before and after ' " ( ) + styled.div \`a b" c "d\`; // \`a b" c "d\` + styled.div \`a b' c 'd\`; // \`a b' c 'd\` + styled.div \`a b( c )d\`; // \`a b( c )d\` + styled.div \`a b " c "d\`; // \`a b " c "d\` + styled.div \`a b ' c 'd\`; // \`a b ' c 'd\` + styled.div \`a b ( c )d\`; // \`a b ( c )d\` + + + +`; diff --git a/src/__tests__/minification-only.test.ts b/src/__tests__/minification-only.test.ts new file mode 100644 index 0000000..6083278 --- /dev/null +++ b/src/__tests__/minification-only.test.ts @@ -0,0 +1,6 @@ +import createTransformer from '../'; +import { expectBaselineTransforms } from './expectTransform'; + +const transformer = createTransformer({ displayName: false, ssr: false, minify: true }); + +expectBaselineTransforms(transformer, __dirname + '/fixtures/minification', 'baselines/minification-only'); diff --git a/src/createTransformer.ts b/src/createTransformer.ts index a034628..40e1c6a 100644 --- a/src/createTransformer.ts +++ b/src/createTransformer.ts @@ -197,10 +197,12 @@ export function createTransformer({ } } - return ts.createCall( - ts.createPropertyAccess(node as ts.Expression, 'withConfig'), - undefined, - [ts.createObjectLiteral(styledConfig)]); + if (styledConfig.length > 0) { + return ts.createCall( + ts.createPropertyAccess(node as ts.Expression, 'withConfig'), + undefined, + [ts.createObjectLiteral(styledConfig)]); + } } ts.forEachChild(node, n => {