diff --git a/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline b/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline index 952a023..499e33e 100644 --- a/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline +++ b/src/__tests__/baselines/minification-only/issue36-extended.ts.baseline @@ -21,7 +21,7 @@ TypeScript before transform: TypeScript after transform: declare const styled: any; - export const A = styled.div \`border:\${'solid'}10px;\`; + export const A = styled.div \`border:\${'solid'} 10px;\`; diff --git a/src/__tests__/baselines/minification-only/issue36.tsx.baseline b/src/__tests__/baselines/minification-only/issue36.tsx.baseline index 254466f..4464da1 100644 --- a/src/__tests__/baselines/minification-only/issue36.tsx.baseline +++ b/src/__tests__/baselines/minification-only/issue36.tsx.baseline @@ -38,7 +38,7 @@ TypeScript after transform: declare const keyframes: any; declare const styled: any; 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;\`; + export const StyledDiv = styled.div \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360} 2s linear infinite;\`; diff --git a/src/__tests__/baselines/minification/issue36-extended.ts.baseline b/src/__tests__/baselines/minification/issue36-extended.ts.baseline index 5488cd5..3c100c8 100644 --- a/src/__tests__/baselines/minification/issue36-extended.ts.baseline +++ b/src/__tests__/baselines/minification/issue36-extended.ts.baseline @@ -21,7 +21,7 @@ TypeScript before transform: TypeScript after transform: declare const styled: any; - export const A = styled.div.withConfig({ displayName: "A" }) \`border:\${'solid'}10px;\`; + export const A = styled.div.withConfig({ displayName: "A" }) \`border:\${'solid'} 10px;\`; diff --git a/src/__tests__/baselines/minification/issue36.tsx.baseline b/src/__tests__/baselines/minification/issue36.tsx.baseline index 64feaa9..2f1e92a 100644 --- a/src/__tests__/baselines/minification/issue36.tsx.baseline +++ b/src/__tests__/baselines/minification/issue36.tsx.baseline @@ -38,7 +38,7 @@ TypeScript after transform: declare const keyframes: any; declare const styled: any; const rotate360 = keyframes \`from{transform:rotate(0deg);}to{transform:rotate(360deg);}\`; - export const StyledDiv = styled.div.withConfig({ displayName: "StyledDiv" }) \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360}2s linear infinite;\`; + export const StyledDiv = styled.div.withConfig({ displayName: "StyledDiv" }) \`width:100px;height:100px;background-color:greenyellow;animation:\${rotate360} 2s linear infinite;\`; diff --git a/src/minify.ts b/src/minify.ts index 8ec5708..2797fb3 100644 --- a/src/minify.ts +++ b/src/minify.ts @@ -1,12 +1,13 @@ import * as ts from 'typescript'; import { isNoSubstitutionTemplateLiteral, isTemplateExpression } from './ts-is-kind'; -type State = ';' | 'x' | ' ' | '\n' | '"' | '(' | '\'' | '/' | '//' | '/$' | '//$' | '/*' | '/**' | '/*$' | '/*$*'; +type State = ';' | ';$' | 'x' | ' ' | '\n' | '"' | '(' | '\'' | '/' | '//' | '/$' | '//$' | '/*' | '/**' | '/*$' | '/*$*'; type ReducerResult = { emit?: string; skipEmit?: boolean; state?: State } | void; type StateMachine = { [K in State]: { next?(ch: string): ReducerResult; flush?(last: boolean): ReducerResult; + placeholder?(): ReducerResult; } }; @@ -22,6 +23,18 @@ const stateMachine: StateMachine = { if (ch == '/') return { state: '/', skipEmit: true } if (isSymbol(ch)) return; return { state: 'x' } + }, + flush() { + return { state: ';$' } + } + }, + ';$': { // after placeholder + next(ch) { + if (ch == '\'' || ch == '"' || ch == '(') return { state: ch } + if (ch == ' ' || ch == '\n' || ch == '\r') return { skipEmit: true, state: ' ' } // we may need a space + if (ch == '/') return { state: '/', skipEmit: true } + if (isSymbol(ch)) return; + return { state: 'x' } } }, 'x': { @@ -141,16 +154,19 @@ function createMinifier(): (next: string, last?: boolean) => string { minified += ch; } } + + let reducer = stateMachine[state]; + apply(reducer.placeholder && reducer.placeholder()); let pos = 0; let len = next.length; while (pos < len) { const ch = next[pos++]; - const reducer = stateMachine[state]; + reducer = stateMachine[state]; apply(reducer.next && reducer.next(ch), ch) } - const reducer = stateMachine[state]; + reducer = stateMachine[state]; apply(reducer.flush && reducer.flush(last)); return minified;