Skip to content

Commit 7cb2921

Browse files
zry656565zry656565
committed
feat: upgrade emotion to 11.0.0-rc.0
1 parent 9fa592f commit 7cb2921

21 files changed

+378
-1074
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ module.exports = {
121121
})],
122122
}),
123123
compilerOptions: {
124-
// set jsx pragma to jsx or alias which is from the @emotion/core package to enable css property in jsx component
124+
// set jsx pragma to jsx or alias which is from the @emotion/react package to enable css property in jsx component
125125
jsxFactory: "jsx"
126126
}
127127
},

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
"test": "jest --no-cache --ci"
1616
},
1717
"devDependencies": {
18-
"@emotion/core": "^10.0.22",
19-
"@emotion/styled": "^10.0.23",
18+
"@emotion/css": "^11.0.0-rc.0",
19+
"@emotion/react": "^11.0.0-rc.0",
20+
"@emotion/styled": "^11.0.0-rc.0",
2021
"@types/convert-source-map": "^1.5.1",
2122
"@types/find-root": "^1.1.1",
2223
"@types/jest": "^26.0.0",
2324
"@types/lodash": "^4.14.146",
2425
"@types/react-dom": "^16.9.4",
25-
"emotion": "^10.0.23",
2626
"html-webpack-plugin": "^4.0.1",
2727
"husky": "^4.0.0",
2828
"jest": "^25.1.0",

‎src/index.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface Options {
3030

3131
const defaultEmotionModules: ModuleConfig[] = [
3232
{
33-
moduleName: 'emotion',
33+
moduleName: '@emotion/css',
3434
exportedNames: ['css', 'keyframes', 'injectGlobal', 'cx', 'merge'],
3535
},
3636
{
@@ -40,7 +40,7 @@ const defaultEmotionModules: ModuleConfig[] = [
4040
styledName: 'styled',
4141
},
4242
{
43-
moduleName: '@emotion/core',
43+
moduleName: '@emotion/react',
4444
exportedNames: ['css'],
4545
},
4646
]
@@ -67,7 +67,7 @@ const createImportJSXAst = memoize((propertyName: string | undefined) => {
6767
: ts.createImportSpecifier(undefined, ts.createIdentifier('jsx')),
6868
]),
6969
)
70-
const moduleSpecifier = ts.createStringLiteral('@emotion/core')
70+
const moduleSpecifier = ts.createStringLiteral('@emotion/react')
7171

7272
return ts.createImportDeclaration(
7373
undefined,
@@ -111,7 +111,7 @@ export const createEmotionPlugin = (pluginOptions?: Options) => {
111111
...moduleInfo,
112112
})
113113
} else if (compilerOptions.allowSyntheticDefaultImports) {
114-
// treat it as import * as emotion from 'emotion'
114+
// treat it as import * as emotion from '@emotion/css'
115115
importCalls.push({
116116
name: name.text,
117117
type: 'namespaceImport',
@@ -168,7 +168,7 @@ export const createEmotionPlugin = (pluginOptions?: Options) => {
168168
}
169169
if (ts.isImportDeclaration(node)) {
170170
importCalls = importCalls.concat(getImportCalls(node, compilerOptions))
171-
// insert import { jsx [as jsxFactory] } from '@emotion/core' behind the react import declaration
171+
// insert import { jsx [as jsxFactory] } from '@emotion/react' behind the react import declaration
172172
if (
173173
!inserted &&
174174
options.autoInject &&

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ TypeScript before transform:
6161
↓ ↓ ↓ ↓ ↓ ↓
6262

6363
TypeScript after transform:
64-
import { jsx } from "@emotion/core";
64+
import { jsx } from "@emotion/react";
6565
import React from 'react';
6666
import ReactDOM from 'react-dom';
6767
import styled from '@emotion/styled';
@@ -170,7 +170,7 @@ TypeScript before transform:
170170
↓ ↓ ↓ ↓ ↓ ↓
171171

172172
TypeScript after transform:
173-
import { jsx } from "@emotion/core";
173+
import { jsx } from "@emotion/react";
174174
import React from 'react';
175175
import ReactDOM from 'react-dom';
176176
import styled from '@emotion/styled';
@@ -279,7 +279,7 @@ TypeScript before transform:
279279
↓ ↓ ↓ ↓ ↓ ↓
280280

281281
TypeScript after transform:
282-
import { jsx } from "@emotion/core";
282+
import { jsx } from "@emotion/react";
283283
import React from 'react';
284284
import ReactDOM from 'react-dom';
285285
import styled from '@emotion/styled';
@@ -388,7 +388,7 @@ TypeScript before transform:
388388
↓ ↓ ↓ ↓ ↓ ↓
389389

390390
TypeScript after transform:
391-
import { jsx } from "@emotion/core";
391+
import { jsx } from "@emotion/react";
392392
import React from 'react';
393393
import ReactDOM from 'react-dom';
394394
import styled from '@emotion/styled';
@@ -497,7 +497,7 @@ TypeScript before transform:
497497
↓ ↓ ↓ ↓ ↓ ↓
498498

499499
TypeScript after transform:
500-
import { jsx } from "@emotion/core";
500+
import { jsx } from "@emotion/react";
501501
import React from 'react';
502502
import ReactDOM from 'react-dom';
503503
import styled from '@emotion/styled';

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

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

‎tests/__snapshots__/emotion-core-complex.tsx.shot‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ TypeScript before transform:
77
import React from 'react'
88
import { PureComponent } from 'react'
99
import ReactDOM from 'react-dom'
10-
import { css } from '@emotion/core'
10+
import { css } from '@emotion/react'
1111

1212
const className = css({
1313
color: 'red',
@@ -33,11 +33,11 @@ TypeScript before transform:
3333
↓ ↓ ↓ ↓ ↓ ↓
3434

3535
TypeScript after transform:
36-
import { jsx } from "@emotion/core";
36+
import { jsx } from "@emotion/react";
3737
import React from 'react';
3838
import { PureComponent } from 'react';
3939
import ReactDOM from 'react-dom';
40-
import { css } from '@emotion/core';
40+
import { css } from '@emotion/react';
4141
const className = /*#__PURE__*/ css({
4242
color: 'red',
4343
background: 'yellow',
@@ -63,7 +63,7 @@ TypeScript before transform:
6363
import React from 'react'
6464
import { PureComponent } from 'react'
6565
import ReactDOM from 'react-dom'
66-
import { css } from '@emotion/core'
66+
import { css } from '@emotion/react'
6767

6868
const className = css({
6969
color: 'red',
@@ -89,15 +89,15 @@ TypeScript before transform:
8989
↓ ↓ ↓ ↓ ↓ ↓
9090

9191
TypeScript after transform:
92-
import { jsx } from "@emotion/core";
92+
import { jsx } from "@emotion/react";
9393
import React from 'react';
9494
import { PureComponent } from 'react';
9595
import ReactDOM from 'react-dom';
96-
import { css } from '@emotion/core';
96+
import { css } from '@emotion/react';
9797
const className = /*#__PURE__*/ css({
9898
color: 'red',
9999
background: 'yellow',
100-
}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Vtb3Rpb24tY29yZS1jb21wbGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLa0IiLCJmaWxlIjoiZW1vdGlvbi1jb3JlLWNvbXBsZXgudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBjbGFzc05hbWUgPSBjc3Moe1xuICBjb2xvcjogJ3JlZCcsXG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgPGRpdiBjc3M9e2NsYXNzTmFtZX0+XG4gICAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
100+
}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Vtb3Rpb24tY29yZS1jb21wbGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLa0IiLCJmaWxlIjoiZW1vdGlvbi1jb3JlLWNvbXBsZXgudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY2xhc3NOYW1lID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICBiYWNrZ3JvdW5kOiAneWVsbG93Jyxcbn0pXG5cbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBQdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgIDxkaXYgY3NzPXtjbGFzc05hbWV9PlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
101101
export class SimpleComponent extends PureComponent {
102102
render() {
103103
return (<React.Fragment>
@@ -119,7 +119,7 @@ TypeScript before transform:
119119
import React from 'react'
120120
import { PureComponent } from 'react'
121121
import ReactDOM from 'react-dom'
122-
import { css } from '@emotion/core'
122+
import { css } from '@emotion/react'
123123

124124
const className = css({
125125
color: 'red',
@@ -145,15 +145,15 @@ TypeScript before transform:
145145
↓ ↓ ↓ ↓ ↓ ↓
146146

147147
TypeScript after transform:
148-
import { jsx } from "@emotion/core";
148+
import { jsx } from "@emotion/react";
149149
import React from 'react';
150150
import { PureComponent } from 'react';
151151
import ReactDOM from 'react-dom';
152-
import { css } from '@emotion/core';
152+
import { css } from '@emotion/react';
153153
const className = /*#__PURE__*/ css({
154154
color: 'red',
155155
background: 'yellow',
156-
}, "label:className;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Vtb3Rpb24tY29yZS1jb21wbGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLa0IiLCJmaWxlIjoiZW1vdGlvbi1jb3JlLWNvbXBsZXgudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBjbGFzc05hbWUgPSBjc3Moe1xuICBjb2xvcjogJ3JlZCcsXG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgPGRpdiBjc3M9e2NsYXNzTmFtZX0+XG4gICAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
156+
}, "label:className;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Vtb3Rpb24tY29yZS1jb21wbGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLa0IiLCJmaWxlIjoiZW1vdGlvbi1jb3JlLWNvbXBsZXgudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY2xhc3NOYW1lID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICBiYWNrZ3JvdW5kOiAneWVsbG93Jyxcbn0pXG5cbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBQdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgIDxkaXYgY3NzPXtjbGFzc05hbWV9PlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
157157
export class SimpleComponent extends PureComponent {
158158
render() {
159159
return (<React.Fragment>
@@ -175,7 +175,7 @@ TypeScript before transform:
175175
import React from 'react'
176176
import { PureComponent } from 'react'
177177
import ReactDOM from 'react-dom'
178-
import { css } from '@emotion/core'
178+
import { css } from '@emotion/react'
179179

180180
const className = css({
181181
color: 'red',
@@ -201,15 +201,15 @@ TypeScript before transform:
201201
↓ ↓ ↓ ↓ ↓ ↓
202202

203203
TypeScript after transform:
204-
import { jsx } from "@emotion/core";
204+
import { jsx } from "@emotion/react";
205205
import React from 'react';
206206
import { PureComponent } from 'react';
207207
import ReactDOM from 'react-dom';
208-
import { css } from '@emotion/core';
208+
import { css } from '@emotion/react';
209209
const className = /*#__PURE__*/ css({
210210
color: 'red',
211211
background: 'yellow',
212-
}, "label:className;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Vtb3Rpb24tY29yZS1jb21wbGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLa0IiLCJmaWxlIjoiZW1vdGlvbi1jb3JlLWNvbXBsZXgudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBjbGFzc05hbWUgPSBjc3Moe1xuICBjb2xvcjogJ3JlZCcsXG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgPGRpdiBjc3M9e2NsYXNzTmFtZX0+XG4gICAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdfQ== */");
212+
}, "label:className;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3RzL2ZpeHR1cmVzL2Vtb3Rpb24tY29yZS1jb21wbGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLa0IiLCJmaWxlIjoiZW1vdGlvbi1jb3JlLWNvbXBsZXgudHN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY2xhc3NOYW1lID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICBiYWNrZ3JvdW5kOiAneWVsbG93Jyxcbn0pXG5cbmV4cG9ydCBjbGFzcyBTaW1wbGVDb21wb25lbnQgZXh0ZW5kcyBQdXJlQ29tcG9uZW50IHtcbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgIDxkaXYgY3NzPXtjbGFzc05hbWV9PlxuICAgICAgICAgIDxzcGFuPmhlbGxvPC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKVxuICB9XG59XG5cblJlYWN0RE9NLnJlbmRlcig8U2ltcGxlQ29tcG9uZW50IC8+LCBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykpXG4iXX0= */");
213213
export class SimpleComponent extends PureComponent {
214214
render() {
215215
return (<React.Fragment>
@@ -231,7 +231,7 @@ TypeScript before transform:
231231
import React from 'react'
232232
import { PureComponent } from 'react'
233233
import ReactDOM from 'react-dom'
234-
import { css } from '@emotion/core'
234+
import { css } from '@emotion/react'
235235

236236
const className = css({
237237
color: 'red',
@@ -257,11 +257,11 @@ TypeScript before transform:
257257
↓ ↓ ↓ ↓ ↓ ↓
258258

259259
TypeScript after transform:
260-
import { jsx } from "@emotion/core";
260+
import { jsx } from "@emotion/react";
261261
import React from 'react';
262262
import { PureComponent } from 'react';
263263
import ReactDOM from 'react-dom';
264-
import { css } from '@emotion/core';
264+
import { css } from '@emotion/react';
265265
const className = /*#__PURE__*/ css({
266266
color: 'red',
267267
background: 'yellow',

0 commit comments

Comments
 (0)