Skip to content

Feature/emotion 10 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 29, 2018
Merged

Feature/emotion 10 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
045af98
feat: support emotion 10
Brooooooklyn Nov 29, 2018
6f8722a
docs: update README
Brooooooklyn Nov 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@
</tr>
<tr>
<td><code>styled.div``</code> syntax</td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center">⛔️</td>
<td align="center"></td>
<td align="center"></td>
<td>Supporting the shortcut syntax without the Babel plugin requires a large list of valid elements to be included in the bundle.</td>
</tr>
<tr>
Expand All @@ -63,27 +63,13 @@
<td align="center">✅</td>
<td>Uglifyjs will use the injected <code>/*#__PURE__*/</code> flag comments to mark your <code>css</code> and <code>styled</code> blocks as candidates for dead code elimination.</td>
</tr>
<tr>
<td>Static Extraction (deprecated)</td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center">⛔️</td>
<td>Generated CSS that is eligible for extraction can be moved to an external css file.</td>
</tr>
<tr>
<td>Source Maps</td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center">✅</td>
<td>When enabled, navigate directly to the style declaration in your javascript file.</td>
</tr>
<tr>
<td><code>css</code> as Prop</td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center">⛔️</td>
<td>Convenient helper for calling <code>css</code> and appending the generated className during compile time.</td>
</tr>
<tr>
<td>Contextual Class Names</td>
<td align="center"></td>
Expand Down
24 changes: 13 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,37 @@
"test": "jest --no-cache --ci"
},
"devDependencies": {
"@emotion/core": "^10.0.0",
"@emotion/styled": "^10.0.0",
"@types/convert-source-map": "^1.5.1",
"@types/find-root": "^1.1.1",
"@types/jest": "^23.3.9",
"@types/jest": "^23.3.10",
"@types/lodash": "^4.14.118",
"@types/react-dom": "^16.0.9",
"@types/react-dom": "^16.0.11",
"coveralls": "^3.0.2",
"emotion": "^9.2.12",
"emotion": "^10.0.0",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.1.4",
"husky": "^1.2.0",
"jest": "^23.6.0",
"jest-specific-snapshot": "^1.0.0",
"lint-staged": "^8.0.5",
"mini-css-extract-plugin": "^0.4.4",
"lint-staged": "^8.1.0",
"mini-css-extract-plugin": "^0.4.5",
"prettier": "^1.15.2",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-emotion": "^9.2.12",
"ts-jest": "^23.10.4",
"ts-loader": "^5.3.0",
"ts-jest": "^23.10.5",
"ts-loader": "^5.3.1",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.17.0",
"tslint-eslint-rules": "^5.4.0",
"typescript": "^3.1.6",
"webpack": "^4.25.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"@emotion/hash": "^0.7.0",
"@emotion/hash": "^0.7.1",
"convert-source-map": "^1.6.0",
"find-root": "^1.1.0",
"lodash": "^4.17.11",
Expand Down
6 changes: 3 additions & 3 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export interface ImportInfos {
type: 'namedImport' | 'namespaceImport' | 'defaultImport'
}

const hasDefaultExports = ['react-emotion']
const libraries = ['react-emotion', 'emotion']
const hasDefaultExports = ['@emotion/styled']
const libraries = ['@emotion/styled', 'emotion', '@emotion/core']
const functions = ['css', 'keyframes', 'injectGlobal', 'merge']

const defaultOptions: Options = {
Expand Down Expand Up @@ -271,7 +271,7 @@ function getImportCalls(
if (namedBindings) {
if (ts.isNamedImports(namedBindings)) {
namedBindings.forEachChild((node) => {
// import { default as styled } from 'react-emotion'
// import { default as styled } from '@emotion/styled'
// push styled into importCalls
if (
hasDefaultExports.includes(moduleName) &&
Expand Down
24 changes: 12 additions & 12 deletions tests/__snapshots__/component-as-selector.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ File: component-as-selector.tsx
TypeScript before transform:
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'react-emotion'
import styled from '@emotion/styled'

interface Props {
backgroundColor: string
Expand Down Expand Up @@ -48,7 +48,7 @@ TypeScript before transform:
TypeScript after transform:
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'react-emotion';
import styled from '@emotion/styled';
interface Props {
backgroundColor: string;
}
Expand Down Expand Up @@ -86,7 +86,7 @@ File: component-as-selector.tsx
TypeScript before transform:
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'react-emotion'
import styled from '@emotion/styled'

interface Props {
backgroundColor: string
Expand Down Expand Up @@ -128,7 +128,7 @@ TypeScript before transform:
TypeScript after transform:
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'react-emotion';
import styled from '@emotion/styled';
interface Props {
backgroundColor: string;
}
Expand All @@ -138,14 +138,14 @@ TypeScript after transform:
color: 'red',
}, (props: Props) => ({
backgroundColor: props.backgroundColor,
}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCIiwiZmlsZSI6ImNvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCBzdHlsZWQgZnJvbSAncmVhY3QtZW1vdGlvbidcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYmFja2dyb3VuZENvbG9yOiBzdHJpbmdcbn1cblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZCgnZGl2JykoXG4gIHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gIH0sXG4gIChwcm9wczogUHJvcHMpID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IsXG4gIH0pLFxuKVxuXG5jb25zdCBQYXJlbnQgPSBzdHlsZWQoJ2RpdicpKHtcbiAgW2Ake1dyYXBwZXJ9YF06IHtcbiAgICBmb250U2l6ZTogJzEwMHB4JyxcbiAgfVxufSlcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxQYXJlbnQ+XG4gICAgICAgIDxXcmFwcGVyIGJhY2tncm91bmRDb2xvcj1cImJsdWVcIj5cbiAgICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgICAgPC9XcmFwcGVyPlxuICAgICAgPC9QYXJlbnQ+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCIiwiZmlsZSI6ImNvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZ1xufVxuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkKCdkaXYnKShcbiAge1xuICAgIGNvbG9yOiAncmVkJyxcbiAgfSxcbiAgKHByb3BzOiBQcm9wcykgPT4gKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmJhY2tncm91bmRDb2xvcixcbiAgfSksXG4pXG5cbmNvbnN0IFBhcmVudCA9IHN0eWxlZCgnZGl2Jykoe1xuICBbYCR7V3JhcHBlcn1gXToge1xuICAgIGZvbnRTaXplOiAnMTAwcHgnLFxuICB9XG59KVxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFBhcmVudD5cbiAgICAgICAgPFdyYXBwZXIgYmFja2dyb3VuZENvbG9yPVwiYmx1ZVwiPlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L1dyYXBwZXI+XG4gICAgICA8L1BhcmVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
const Parent = /*#__PURE__*/ styled('div', {
target: "e5i1odf1"
})({
[\`\${Wrapper}\`]: {
fontSize: '100px',
}
}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCLEFBU0QiLCJmaWxlIjoiY29tcG9uZW50LWFzLXNlbGVjdG9yLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdyZWFjdC1lbW90aW9uJ1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZ1xufVxuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkKCdkaXYnKShcbiAge1xuICAgIGNvbG9yOiAncmVkJyxcbiAgfSxcbiAgKHByb3BzOiBQcm9wcykgPT4gKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmJhY2tncm91bmRDb2xvcixcbiAgfSksXG4pXG5cbmNvbnN0IFBhcmVudCA9IHN0eWxlZCgnZGl2Jykoe1xuICBbYCR7V3JhcHBlcn1gXToge1xuICAgIGZvbnRTaXplOiAnMTAwcHgnLFxuICB9XG59KVxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFBhcmVudD5cbiAgICAgICAgPFdyYXBwZXIgYmFja2dyb3VuZENvbG9yPVwiYmx1ZVwiPlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L1dyYXBwZXI+XG4gICAgICA8L1BhcmVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCLEFBU0QiLCJmaWxlIjoiY29tcG9uZW50LWFzLXNlbGVjdG9yLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGJhY2tncm91bmRDb2xvcjogc3RyaW5nXG59XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQoJ2RpdicpKFxuICB7XG4gICAgY29sb3I6ICdyZWQnLFxuICB9LFxuICAocHJvcHM6IFByb3BzKSA9PiAoe1xuICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuYmFja2dyb3VuZENvbG9yLFxuICB9KSxcbilcblxuY29uc3QgUGFyZW50ID0gc3R5bGVkKCdkaXYnKSh7XG4gIFtgJHtXcmFwcGVyfWBdOiB7XG4gICAgZm9udFNpemU6ICcxMDBweCcsXG4gIH1cbn0pXG5cbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8UGFyZW50PlxuICAgICAgICA8V3JhcHBlciBiYWNrZ3JvdW5kQ29sb3I9XCJibHVlXCI+XG4gICAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICAgIDwvV3JhcHBlcj5cbiAgICAgIDwvUGFyZW50PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl19 */");
export class SimpleComponent extends React.PureComponent {
render() {
return (<Parent>
Expand All @@ -166,7 +166,7 @@ File: component-as-selector.tsx
TypeScript before transform:
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'react-emotion'
import styled from '@emotion/styled'

interface Props {
backgroundColor: string
Expand Down Expand Up @@ -208,7 +208,7 @@ TypeScript before transform:
TypeScript after transform:
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'react-emotion';
import styled from '@emotion/styled';
interface Props {
backgroundColor: string;
}
Expand All @@ -218,14 +218,14 @@ TypeScript after transform:
color: 'red',
}, (props: Props) => ({
backgroundColor: props.backgroundColor,
}), "label:Wrapper;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCIiwiZmlsZSI6ImNvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCBzdHlsZWQgZnJvbSAncmVhY3QtZW1vdGlvbidcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYmFja2dyb3VuZENvbG9yOiBzdHJpbmdcbn1cblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZCgnZGl2JykoXG4gIHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gIH0sXG4gIChwcm9wczogUHJvcHMpID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IsXG4gIH0pLFxuKVxuXG5jb25zdCBQYXJlbnQgPSBzdHlsZWQoJ2RpdicpKHtcbiAgW2Ake1dyYXBwZXJ9YF06IHtcbiAgICBmb250U2l6ZTogJzEwMHB4JyxcbiAgfVxufSlcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxQYXJlbnQ+XG4gICAgICAgIDxXcmFwcGVyIGJhY2tncm91bmRDb2xvcj1cImJsdWVcIj5cbiAgICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgICAgPC9XcmFwcGVyPlxuICAgICAgPC9QYXJlbnQ+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
}), "label:Wrapper;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCIiwiZmlsZSI6ImNvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZ1xufVxuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkKCdkaXYnKShcbiAge1xuICAgIGNvbG9yOiAncmVkJyxcbiAgfSxcbiAgKHByb3BzOiBQcm9wcykgPT4gKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmJhY2tncm91bmRDb2xvcixcbiAgfSksXG4pXG5cbmNvbnN0IFBhcmVudCA9IHN0eWxlZCgnZGl2Jykoe1xuICBbYCR7V3JhcHBlcn1gXToge1xuICAgIGZvbnRTaXplOiAnMTAwcHgnLFxuICB9XG59KVxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFBhcmVudD5cbiAgICAgICAgPFdyYXBwZXIgYmFja2dyb3VuZENvbG9yPVwiYmx1ZVwiPlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L1dyYXBwZXI+XG4gICAgICA8L1BhcmVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
const Parent = /*#__PURE__*/ styled('div', {
target: "e5i1odf1"
})({
[\`\${Wrapper}\`]: {
fontSize: '100px',
}
}, "label:Parent;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCLEFBU0QiLCJmaWxlIjoiY29tcG9uZW50LWFzLXNlbGVjdG9yLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdyZWFjdC1lbW90aW9uJ1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZ1xufVxuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkKCdkaXYnKShcbiAge1xuICAgIGNvbG9yOiAncmVkJyxcbiAgfSxcbiAgKHByb3BzOiBQcm9wcykgPT4gKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmJhY2tncm91bmRDb2xvcixcbiAgfSksXG4pXG5cbmNvbnN0IFBhcmVudCA9IHN0eWxlZCgnZGl2Jykoe1xuICBbYCR7V3JhcHBlcn1gXToge1xuICAgIGZvbnRTaXplOiAnMTAwcHgnLFxuICB9XG59KVxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFBhcmVudD5cbiAgICAgICAgPFdyYXBwZXIgYmFja2dyb3VuZENvbG9yPVwiYmx1ZVwiPlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L1dyYXBwZXI+XG4gICAgICA8L1BhcmVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
}, "label:Parent;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCLEFBU0QiLCJmaWxlIjoiY29tcG9uZW50LWFzLXNlbGVjdG9yLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGJhY2tncm91bmRDb2xvcjogc3RyaW5nXG59XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQoJ2RpdicpKFxuICB7XG4gICAgY29sb3I6ICdyZWQnLFxuICB9LFxuICAocHJvcHM6IFByb3BzKSA9PiAoe1xuICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuYmFja2dyb3VuZENvbG9yLFxuICB9KSxcbilcblxuY29uc3QgUGFyZW50ID0gc3R5bGVkKCdkaXYnKSh7XG4gIFtgJHtXcmFwcGVyfWBdOiB7XG4gICAgZm9udFNpemU6ICcxMDBweCcsXG4gIH1cbn0pXG5cbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8UGFyZW50PlxuICAgICAgICA8V3JhcHBlciBiYWNrZ3JvdW5kQ29sb3I9XCJibHVlXCI+XG4gICAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICAgIDwvV3JhcHBlcj5cbiAgICAgIDwvUGFyZW50PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl19 */");
export class SimpleComponent extends React.PureComponent {
render() {
return (<Parent>
Expand All @@ -246,7 +246,7 @@ File: component-as-selector.tsx
TypeScript before transform:
import React from 'react'
import ReactDOM from 'react-dom'
import styled from 'react-emotion'
import styled from '@emotion/styled'

interface Props {
backgroundColor: string
Expand Down Expand Up @@ -288,7 +288,7 @@ TypeScript before transform:
TypeScript after transform:
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'react-emotion';
import styled from '@emotion/styled';
interface Props {
backgroundColor: string;
}
Expand Down
Loading