Skip to content

Commit c6dc4d9

Browse files
author
liuyi
committed
feat: support importing from custom module
1 parent dce165e commit c6dc4d9

16 files changed

+1088
-197
lines changed

‎src/index.ts

Lines changed: 203 additions & 197 deletions
Large diffs are not rendered by default.

‎tests/__snapshots__/component-as-selector.tsx.shot

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,115 @@ TypeScript after transform:
216216
ReactDOM.render(<SimpleComponent />, document.querySelector('#app'));
217217

218218

219+
`;
220+
221+
exports[`should transform component-as-selector.tsx with custom module 1`] = `
222+
223+
File: component-as-selector.tsx
224+
TypeScript before transform:
225+
import React from 'react'
226+
import ReactDOM from 'react-dom'
227+
import styled from '@emotion/styled'
228+
229+
interface Props {
230+
backgroundColor: string
231+
}
232+
233+
const Wrapper = styled('div')<Props>(
234+
{
235+
color: 'red',
236+
},
237+
(props) => ({
238+
backgroundColor: props.backgroundColor,
239+
}),
240+
)
241+
242+
const WrapperPropertyAccess = styled.div<Props>(
243+
{
244+
color: 'yellow',
245+
},
246+
(props) => ({
247+
backgroundColor: props.backgroundColor,
248+
}),
249+
)
250+
251+
const Parent = styled('div')({
252+
[\`\${Wrapper}\`]: {
253+
fontSize: '100px',
254+
},
255+
[\`\${WrapperPropertyAccess}\`]: {
256+
fontSize: '80px',
257+
}
258+
})
259+
260+
export class SimpleComponent extends React.PureComponent {
261+
render() {
262+
return (
263+
<Parent>
264+
<Wrapper backgroundColor="blue">
265+
<span>hello</span>
266+
</Wrapper>
267+
<WrapperPropertyAccess backgroundColor="cyan">
268+
<span>world</span>
269+
</WrapperPropertyAccess>
270+
</Parent>
271+
)
272+
}
273+
}
274+
275+
ReactDOM.render(<SimpleComponent />, document.querySelector('#app'))
276+
277+
278+
279+
↓ ↓ ↓ ↓ ↓ ↓
280+
281+
TypeScript after transform:
282+
import { jsx } from "@emotion/core";
283+
import React from 'react';
284+
import ReactDOM from 'react-dom';
285+
import styled from '@emotion/styled';
286+
interface Props {
287+
backgroundColor: string;
288+
}
289+
const Wrapper = /*#__PURE__*/ styled('div', {
290+
target: "ersjv9n0"
291+
})<Props>({
292+
color: 'red',
293+
}, (props) => ({
294+
backgroundColor: props.backgroundColor,
295+
}), "label:Wrapper;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCIiwiZmlsZSI6ImNvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZ1xufVxuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkKCdkaXYnKTxQcm9wcz4oXG4gIHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gIH0sXG4gIChwcm9wcykgPT4gKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmJhY2tncm91bmRDb2xvcixcbiAgfSksXG4pXG5cbmNvbnN0IFdyYXBwZXJQcm9wZXJ0eUFjY2VzcyA9IHN0eWxlZC5kaXY8UHJvcHM+KFxuICB7XG4gICAgY29sb3I6ICd5ZWxsb3cnLFxuICB9LFxuICAocHJvcHMpID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IsXG4gIH0pLFxuKVxuXG5jb25zdCBQYXJlbnQgPSBzdHlsZWQoJ2RpdicpKHtcbiAgW2Ake1dyYXBwZXJ9YF06IHtcbiAgICBmb250U2l6ZTogJzEwMHB4JyxcbiAgfSxcbiAgW2Ake1dyYXBwZXJQcm9wZXJ0eUFjY2Vzc31gXToge1xuICAgIGZvbnRTaXplOiAnODBweCcsXG4gIH1cbn0pXG5cbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8UGFyZW50PlxuICAgICAgICA8V3JhcHBlciBiYWNrZ3JvdW5kQ29sb3I9XCJibHVlXCI+XG4gICAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICAgIDwvV3JhcHBlcj5cbiAgICAgICAgPFdyYXBwZXJQcm9wZXJ0eUFjY2VzcyBiYWNrZ3JvdW5kQ29sb3I9XCJjeWFuXCI+XG4gICAgICAgICAgPHNwYW4+d29ybGQ8L3NwYW4+XG4gICAgICAgIDwvV3JhcHBlclByb3BlcnR5QWNjZXNzPlxuICAgICAgPC9QYXJlbnQ+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
296+
const WrapperPropertyAccess = /*#__PURE__*/ styled("div", {
297+
target: "ersjv9n1"
298+
})<Props>({
299+
color: 'yellow',
300+
}, (props) => ({
301+
backgroundColor: props.backgroundColor,
302+
}), "label:WrapperPropertyAccess;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCLEFBU2MiLCJmaWxlIjoiY29tcG9uZW50LWFzLXNlbGVjdG9yLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGJhY2tncm91bmRDb2xvcjogc3RyaW5nXG59XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQoJ2RpdicpPFByb3BzPihcbiAge1xuICAgIGNvbG9yOiAncmVkJyxcbiAgfSxcbiAgKHByb3BzKSA9PiAoe1xuICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuYmFja2dyb3VuZENvbG9yLFxuICB9KSxcbilcblxuY29uc3QgV3JhcHBlclByb3BlcnR5QWNjZXNzID0gc3R5bGVkLmRpdjxQcm9wcz4oXG4gIHtcbiAgICBjb2xvcjogJ3llbGxvdycsXG4gIH0sXG4gIChwcm9wcykgPT4gKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmJhY2tncm91bmRDb2xvcixcbiAgfSksXG4pXG5cbmNvbnN0IFBhcmVudCA9IHN0eWxlZCgnZGl2Jykoe1xuICBbYCR7V3JhcHBlcn1gXToge1xuICAgIGZvbnRTaXplOiAnMTAwcHgnLFxuICB9LFxuICBbYCR7V3JhcHBlclByb3BlcnR5QWNjZXNzfWBdOiB7XG4gICAgZm9udFNpemU6ICc4MHB4JyxcbiAgfVxufSlcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxQYXJlbnQ+XG4gICAgICAgIDxXcmFwcGVyIGJhY2tncm91bmRDb2xvcj1cImJsdWVcIj5cbiAgICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgICAgPC9XcmFwcGVyPlxuICAgICAgICA8V3JhcHBlclByb3BlcnR5QWNjZXNzIGJhY2tncm91bmRDb2xvcj1cImN5YW5cIj5cbiAgICAgICAgICA8c3Bhbj53b3JsZDwvc3Bhbj5cbiAgICAgICAgPC9XcmFwcGVyUHJvcGVydHlBY2Nlc3M+XG4gICAgICA8L1BhcmVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
303+
const Parent = /*#__PURE__*/ styled('div', {
304+
target: "ersjv9n2"
305+
})({
306+
[\`\${Wrapper}\`]: {
307+
fontSize: '100px',
308+
},
309+
[\`\${WrapperPropertyAccess}\`]: {
310+
fontSize: '80px',
311+
}
312+
}, "label:Parent;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2NvbXBvbmVudC1hcy1zZWxlY3Rvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWdCLEFBU2MsQUFTZiIsImZpbGUiOiJjb21wb25lbnQtYXMtc2VsZWN0b3IudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYmFja2dyb3VuZENvbG9yOiBzdHJpbmdcbn1cblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZCgnZGl2Jyk8UHJvcHM+KFxuICB7XG4gICAgY29sb3I6ICdyZWQnLFxuICB9LFxuICAocHJvcHMpID0+ICh7XG4gICAgYmFja2dyb3VuZENvbG9yOiBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IsXG4gIH0pLFxuKVxuXG5jb25zdCBXcmFwcGVyUHJvcGVydHlBY2Nlc3MgPSBzdHlsZWQuZGl2PFByb3BzPihcbiAge1xuICAgIGNvbG9yOiAneWVsbG93JyxcbiAgfSxcbiAgKHByb3BzKSA9PiAoe1xuICAgIGJhY2tncm91bmRDb2xvcjogcHJvcHMuYmFja2dyb3VuZENvbG9yLFxuICB9KSxcbilcblxuY29uc3QgUGFyZW50ID0gc3R5bGVkKCdkaXYnKSh7XG4gIFtgJHtXcmFwcGVyfWBdOiB7XG4gICAgZm9udFNpemU6ICcxMDBweCcsXG4gIH0sXG4gIFtgJHtXcmFwcGVyUHJvcGVydHlBY2Nlc3N9YF06IHtcbiAgICBmb250U2l6ZTogJzgwcHgnLFxuICB9XG59KVxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFBhcmVudD5cbiAgICAgICAgPFdyYXBwZXIgYmFja2dyb3VuZENvbG9yPVwiYmx1ZVwiPlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L1dyYXBwZXI+XG4gICAgICAgIDxXcmFwcGVyUHJvcGVydHlBY2Nlc3MgYmFja2dyb3VuZENvbG9yPVwiY3lhblwiPlxuICAgICAgICAgIDxzcGFuPndvcmxkPC9zcGFuPlxuICAgICAgICA8L1dyYXBwZXJQcm9wZXJ0eUFjY2Vzcz5cbiAgICAgIDwvUGFyZW50PlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl19 */");
313+
export class SimpleComponent extends React.PureComponent {
314+
render() {
315+
return (<Parent>
316+
<Wrapper backgroundColor="blue">
317+
<span>hello</span>
318+
</Wrapper>
319+
<WrapperPropertyAccess backgroundColor="cyan">
320+
<span>world</span>
321+
</WrapperPropertyAccess>
322+
</Parent>);
323+
}
324+
}
325+
ReactDOM.render(<SimpleComponent />, document.querySelector('#app'));
326+
327+
219328
`;
220329

221330
exports[`should transform component-as-selector.tsx with default configs 1`] = `

‎tests/__snapshots__/css-in-callback.tsx.shot

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,73 @@ TypeScript before transform:
103103

104104

105105

106+
↓ ↓ ↓ ↓ ↓ ↓
107+
108+
TypeScript after transform:
109+
import { jsx } from "@emotion/core";
110+
import React from 'react';
111+
import ReactDOM from 'react-dom';
112+
import { css } from 'emotion';
113+
import styled from '@emotion/styled';
114+
const styles = (props: any) => /*#__PURE__*/ css({
115+
color: 'red',
116+
background: 'yellow',
117+
width: \`\${props.scale * 100}px\`,
118+
}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Nzcy1pbi1jYWxsYmFjay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSytCIiwiZmlsZSI6ImNzcy1pbi1jYWxsYmFjay50c3giLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3Qgc3R5bGVzID0gKHByb3BzOiBhbnkpID0+XG4gIGNzcyh7XG4gICAgY29sb3I6ICdyZWQnLFxuICAgIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxuICAgIHdpZHRoOiBgJHtwcm9wcy5zY2FsZSAqIDEwMH1weGAsXG4gIH0pXG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZCgnYnV0dG9uJylgXG4gICR7c3R5bGVzfVxuICAkeygpID0+IGNzcyh7XG4gICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gIH0pfVxuYFxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXI+XG4gICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgPC9Db250YWluZXI+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
119+
const Container = /*#__PURE__*/ styled('button', "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Nzcy1pbi1jYWxsYmFjay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSytCLEFBT2IiLCJmaWxlIjoiY3NzLWluLWNhbGxiYWNrLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBzdHlsZXMgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgJHtzdHlsZXN9XG4gICR7KCkgPT4gY3NzKHtcbiAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgfSl9XG5gXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */") \`
120+
\${styles}
121+
\${() => /*#__PURE__*/ css({
122+
background: 'red',
123+
}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Nzcy1pbi1jYWxsYmFjay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSytCLEFBT2IsQUFFUiIsImZpbGUiOiJjc3MtaW4tY2FsbGJhY2sudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IHN0eWxlcyA9IChwcm9wczogYW55KSA9PlxuICBjc3Moe1xuICAgIGNvbG9yOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kOiAneWVsbG93JyxcbiAgICB3aWR0aDogYCR7cHJvcHMuc2NhbGUgKiAxMDB9cHhgLFxuICB9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICAke3N0eWxlc31cbiAgJHsoKSA9PiBjc3Moe1xuICAgIGJhY2tncm91bmQ6ICdyZWQnLFxuICB9KX1cbmBcbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8Q29udGFpbmVyPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl19 */")}
124+
\`;
125+
export class SimpleComponent extends React.PureComponent {
126+
render() {
127+
return (<Container>
128+
<span>hello</span>
129+
</Container>);
130+
}
131+
}
132+
ReactDOM.render(<SimpleComponent />, document.querySelector('#app'));
133+
134+
135+
`;
136+
137+
exports[`should transform css-in-callback.tsx with custom module 1`] = `
138+
139+
File: css-in-callback.tsx
140+
TypeScript before transform:
141+
import React from 'react'
142+
import ReactDOM from 'react-dom'
143+
import { css } from 'emotion'
144+
import styled from '@emotion/styled'
145+
146+
const styles = (props: any) =>
147+
css({
148+
color: 'red',
149+
background: 'yellow',
150+
width: \`\${props.scale * 100}px\`,
151+
})
152+
153+
const Container = styled('button')\`
154+
\${styles}
155+
\${() => css({
156+
background: 'red',
157+
})}
158+
\`
159+
export class SimpleComponent extends React.PureComponent {
160+
render() {
161+
return (
162+
<Container>
163+
<span>hello</span>
164+
</Container>
165+
)
166+
}
167+
}
168+
169+
ReactDOM.render(<SimpleComponent />, document.querySelector('#app'))
170+
171+
172+
106173
↓ ↓ ↓ ↓ ↓ ↓
107174

108175
TypeScript after transform:

‎tests/__snapshots__/custom-module.tsx.shot

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should not add sourcemap to custom-module.tsx if NODE_ENV === 'production' 1`] = `
4+
5+
File: custom-module.tsx
6+
TypeScript before transform:
7+
import { myStyled, myCss } from 'my-emotion'
8+
9+
export const className = myCss({
10+
color: 'red',
11+
background: 'yellow',
12+
})
13+
14+
export const StyledComponent = myStyled.div({
15+
color: 'blue',
16+
})
17+
18+
19+
20+
↓ ↓ ↓ ↓ ↓ ↓
21+
22+
TypeScript after transform:
23+
import { myStyled, myCss } from 'my-emotion';
24+
export const className = myCss({
25+
color: 'red',
26+
background: 'yellow',
27+
});
28+
export const StyledComponent = myStyled.div({
29+
color: 'blue',
30+
});
31+
32+
33+
`;
34+
35+
exports[`should transform custom-module.tsx with autoLabel false 1`] = `
36+
37+
File: custom-module.tsx
38+
TypeScript before transform:
39+
import { myStyled, myCss } from 'my-emotion'
40+
41+
export const className = myCss({
42+
color: 'red',
43+
background: 'yellow',
44+
})
45+
46+
export const StyledComponent = myStyled.div({
47+
color: 'blue',
48+
})
49+
50+
51+
52+
↓ ↓ ↓ ↓ ↓ ↓
53+
54+
TypeScript after transform:
55+
import { myStyled, myCss } from 'my-emotion';
56+
export const className = myCss({
57+
color: 'red',
58+
background: 'yellow',
59+
});
60+
export const StyledComponent = myStyled.div({
61+
color: 'blue',
62+
});
63+
64+
65+
`;
66+
67+
exports[`should transform custom-module.tsx with custom module 1`] = `
68+
69+
File: custom-module.tsx
70+
TypeScript before transform:
71+
import { myStyled, myCss } from 'my-emotion'
72+
73+
export const className = myCss({
74+
color: 'red',
75+
background: 'yellow',
76+
})
77+
78+
export const StyledComponent = myStyled.div({
79+
color: 'blue',
80+
})
81+
82+
83+
84+
↓ ↓ ↓ ↓ ↓ ↓
85+
86+
TypeScript after transform:
87+
import { myStyled, myCss } from 'my-emotion';
88+
export const className = /*#__PURE__*/ myCss({
89+
color: 'red',
90+
background: 'yellow',
91+
}, "label:className;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2N1c3RvbS1tb2R1bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV5QiIsImZpbGUiOiJjdXN0b20tbW9kdWxlLnRzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBteVN0eWxlZCwgbXlDc3MgfSBmcm9tICdteS1lbW90aW9uJ1xuXG5leHBvcnQgY29uc3QgY2xhc3NOYW1lID0gbXlDc3Moe1xuICBjb2xvcjogJ3JlZCcsXG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbXBvbmVudCA9IG15U3R5bGVkLmRpdih7XG4gIGNvbG9yOiAnYmx1ZScsXG59KVxuIl19 */");
92+
export const StyledComponent = /*#__PURE__*/ myStyled("div", {
93+
target: "eiefrsv0"
94+
})({
95+
color: 'blue',
96+
}, "label:StyledComponent;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2N1c3RvbS1tb2R1bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUV5QixBQUtNIiwiZmlsZSI6ImN1c3RvbS1tb2R1bGUudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG15U3R5bGVkLCBteUNzcyB9IGZyb20gJ215LWVtb3Rpb24nXG5cbmV4cG9ydCBjb25zdCBjbGFzc05hbWUgPSBteUNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbiAgYmFja2dyb3VuZDogJ3llbGxvdycsXG59KVxuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29tcG9uZW50ID0gbXlTdHlsZWQuZGl2KHtcbiAgY29sb3I6ICdibHVlJyxcbn0pXG4iXX0= */");
97+
98+
99+
`;
100+
101+
exports[`should transform custom-module.tsx with default configs 1`] = `
102+
103+
File: custom-module.tsx
104+
TypeScript before transform:
105+
import { myStyled, myCss } from 'my-emotion'
106+
107+
export const className = myCss({
108+
color: 'red',
109+
background: 'yellow',
110+
})
111+
112+
export const StyledComponent = myStyled.div({
113+
color: 'blue',
114+
})
115+
116+
117+
118+
↓ ↓ ↓ ↓ ↓ ↓
119+
120+
TypeScript after transform:
121+
import { myStyled, myCss } from 'my-emotion';
122+
export const className = myCss({
123+
color: 'red',
124+
background: 'yellow',
125+
});
126+
export const StyledComponent = myStyled.div({
127+
color: 'blue',
128+
});
129+
130+
131+
`;
132+
133+
exports[`should transform custom-module.tsx with sourcemap false 1`] = `
134+
135+
File: custom-module.tsx
136+
TypeScript before transform:
137+
import { myStyled, myCss } from 'my-emotion'
138+
139+
export const className = myCss({
140+
color: 'red',
141+
background: 'yellow',
142+
})
143+
144+
export const StyledComponent = myStyled.div({
145+
color: 'blue',
146+
})
147+
148+
149+
150+
↓ ↓ ↓ ↓ ↓ ↓
151+
152+
TypeScript after transform:
153+
import { myStyled, myCss } from 'my-emotion';
154+
export const className = myCss({
155+
color: 'red',
156+
background: 'yellow',
157+
});
158+
export const StyledComponent = myStyled.div({
159+
color: 'blue',
160+
});
161+
162+
163+
`;

0 commit comments

Comments
 (0)