feat: migrate to emotion 11 (#30)

BREAKING CHANGE: upgrade emotion to 11 Upgraded/swapped emotion packages to match the new ones: - bump @emotion/styled - @emotion/core → @emotion/react - emotion-theming → moved into @emotion/react - babel-plugin-emotion → @emotion/babel-plugin - jest-emotion → @emotion/jest [Full article](https://emotion.sh/docs/emotion-11)
janczizikow · Feb 18, 2022 · 88684ff · 88684ff
1 parent 759b692
commit 88684ff
Show file tree

Hide file tree

Showing 16 changed files with 707 additions and 998 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,11 +8,6 @@
     "@babel/proposal-class-properties",
     "@babel/proposal-object-rest-spread",
     "annotate-pure-calls",
-    [
-      "emotion",
-      {
-        "autoLabel": true
-      }
-    ]
+    "@emotion"
   ]
 }
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/index.cjs.js": {
-    "bundled": 7497,
-    "minified": 4346,
-    "gzipped": 1509
+    "bundled": 13805,
+    "minified": 10836,
+    "gzipped": 3990
   },
   "dist/index.esm.js": {
-    "bundled": 7245,
-    "minified": 4141,
-    "gzipped": 1442,
+    "bundled": 13553,
+    "minified": 10635,
+    "gzipped": 3922,
     "treeshaked": {
       "rollup": {
-        "code": 3341,
-        "import_statements": 31
+        "code": 3115,
+        "import_statements": 36
       },
       "webpack": {
-        "code": 4339
+        "code": 4109
       }
     }
   }

diff --git a/README.md b/README.md
@@ -13,12 +13,15 @@ Fully customizable responsive grid system build with [emotion](https://emotion.s
 
 ## Install
 
+> **⚠ WARNING**
+> For emotion 10 use v1.x.x of emotion-flex
+
 ```bash
-npm i --save emotion-flex @emotion/core @emotion/styled
+npm i --save emotion-flex @emotion/react @emotion/styled
 
 # or
 
-yarn add emotion-flex @emotion/core @emotion/styled
+yarn add emotion-flex @emotion/react @emotion/styled
 ```
 
 ## Usage
@@ -103,7 +106,7 @@ class Example extends Component {
 
 ```jsx
 import React, { Component } from 'react'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/react'
 
 import { Container, Row, Col } from 'emotion-flex'
 

diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
     "dist"
   ],
   "peerDependencies": {
-    "@emotion/core": "^10.0.0",
-    "@emotion/styled": "^10.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "react": ">=16.3.0"
   },
   "dependencies": {
@@ -56,23 +56,22 @@
     "@babel/preset-env": "7.4.1",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "7.3.3",
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.10",
+    "@emotion/babel-plugin": "^11.7.2",
+    "@emotion/jest": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@types/facepaint": "^1.2.0",
     "@types/jest": "^24.0.11",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
     "@types/react-test-renderer": "^16.8.1",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
-    "babel-plugin-emotion": "^10.0.9",
     "commitizen": "^4.0.3",
     "coveralls": "^3.0.3",
     "cross-env": "^5.2.0",
     "cz-conventional-changelog": "^3.0.2",
-    "emotion-theming": "^10.0.10",
     "husky": "^2.1.0",
     "jest": "^24.7.1",
-    "jest-emotion": "^10.0.10",
     "lint-staged": "^8.1.5",
     "prettier": "^1.17.0",
     "react": "^16.8.6",
@@ -120,7 +119,7 @@
       "js"
     ],
     "snapshotSerializers": [
-      "jest-emotion"
+      "@emotion/jest/serializer"
     ]
   }
 }
diff --git a/src/Col.ts b/src/Col.ts
@@ -1,5 +1,5 @@
 import facepaint from 'facepaint';
-import styled from './styled';
+import styled from '@emotion/styled';
 import { isInteger, getTheme, getBreakpoints } from './utils';
 
 type TwoToEleven = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;

diff --git a/src/Container.ts b/src/Container.ts
@@ -1,5 +1,5 @@
 import facepaint from 'facepaint';
-import styled from './styled';
+import styled from '@emotion/styled';
 import { getTheme, getBreakpoints } from './utils';
 
 export interface ContainerProps {

diff --git a/src/Row.ts b/src/Row.ts
@@ -1,4 +1,4 @@
-import styled from './styled';
+import styled from '@emotion/styled';
 import { getTheme } from './utils';
 
 export interface RowProps {

diff --git a/src/emotion.d.ts b/src/emotion.d.ts
@@ -0,0 +1,6 @@
+import {} from '@emotion/react/types/css-prop';
+import { Theme as EmotionFlexTheme } from './theme'
+
+declare module '@emotion/react' {
+  export interface Theme extends EmotionFlexTheme {}
+}
diff --git a/src/styled.ts b/src/styled.ts
diff --git a/tests/Col.spec.tsx b/tests/Col.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { customTheme } from './test-helpers';
 
 import { Col } from '../src';

diff --git a/tests/Container.spec.tsx b/tests/Container.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { customTheme } from './test-helpers';
 
 import { Container } from '../src';

diff --git a/tests/Row.spec.tsx b/tests/Row.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { customTheme } from './test-helpers';
 
 import { Row } from '../src';

diff --git a/tests/__snapshots__/Col.spec.tsx.snap b/tests/__snapshots__/Col.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Col /> renders with custom styles when given a custom theme 1`] = `
   max-width: 100%;
 }
 
-@media (min-width:600px) {
+@media (min-width: 600px) {
   .emotion-0 {
     -webkit-flex: 1 0 50%;
     -ms-flex: 1 0 50%;
@@ -21,7 +21,7 @@ exports[`<Col /> renders with custom styles when given a custom theme 1`] = `
   }
 }
 
-@media (min-width:960px) {
+@media (min-width: 960px) {
   .emotion-0 {
     -webkit-flex: 1 0 33.333333%;
     -ms-flex: 1 0 33.333333%;
@@ -30,7 +30,7 @@ exports[`<Col /> renders with custom styles when given a custom theme 1`] = `
   }
 }
 
-@media (min-width:1280px) {
+@media (min-width: 1280px) {
   .emotion-0 {
     -webkit-flex: 1 0 25%;
     -ms-flex: 1 0 25%;
@@ -39,7 +39,7 @@ exports[`<Col /> renders with custom styles when given a custom theme 1`] = `
   }
 }
 
-@media (min-width:1920px) {
+@media (min-width: 1920px) {
   .emotion-0 {
     -webkit-flex: 1 0 8.333333%;
     -ms-flex: 1 0 8.333333%;
@@ -100,25 +100,25 @@ exports[`<Col /> renders with offset styles when given a prop 1`] = `
   max-width: 100%;
 }
 
-@media (min-width:576px) {
+@media (min-width: 576px) {
   .emotion-0 {
     margin-left: 50%;
   }
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-0 {
     margin-left: 33.333333%;
   }
 }
 
-@media (min-width:992px) {
+@media (min-width: 992px) {
   .emotion-0 {
     margin-left: 25%;
   }
 }
 
-@media (min-width:1200px) {
+@media (min-width: 1200px) {
   .emotion-0 {
     margin-left: 8.333333%;
   }
@@ -144,31 +144,31 @@ exports[`<Col /> renders with order styles when given a prop 1`] = `
   order: 13;
 }
 
-@media (min-width:576px) {
+@media (min-width: 576px) {
   .emotion-0 {
     -webkit-order: 6;
     -ms-flex-order: 6;
     order: 6;
   }
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-0 {
     -webkit-order: 4;
     -ms-flex-order: 4;
     order: 4;
   }
 }
 
-@media (min-width:992px) {
+@media (min-width: 992px) {
   .emotion-0 {
     -webkit-order: 3;
     -ms-flex-order: 3;
     order: 3;
   }
 }
 
-@media (min-width:1200px) {
+@media (min-width: 1200px) {
   .emotion-0 {
     -webkit-order: -1;
     -ms-flex-order: -1;
@@ -193,7 +193,7 @@ exports[`<Col /> renders with responsive styles 1`] = `
   max-width: 100%;
 }
 
-@media (min-width:576px) {
+@media (min-width: 576px) {
   .emotion-0 {
     -webkit-flex: 1 0 50%;
     -ms-flex: 1 0 50%;
@@ -202,7 +202,7 @@ exports[`<Col /> renders with responsive styles 1`] = `
   }
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-0 {
     -webkit-flex: 1 0 33.333333%;
     -ms-flex: 1 0 33.333333%;
@@ -211,7 +211,7 @@ exports[`<Col /> renders with responsive styles 1`] = `
   }
 }
 
-@media (min-width:992px) {
+@media (min-width: 992px) {
   .emotion-0 {
     -webkit-flex: 1 0 25%;
     -ms-flex: 1 0 25%;
@@ -220,7 +220,7 @@ exports[`<Col /> renders with responsive styles 1`] = `
   }
 }
 
-@media (min-width:1200px) {
+@media (min-width: 1200px) {
   .emotion-0 {
     -webkit-flex: 1 0 8.333333%;
     -ms-flex: 1 0 8.333333%;

diff --git a/tests/__snapshots__/Container.spec.tsx.snap b/tests/__snapshots__/Container.spec.tsx.snap
@@ -9,25 +9,25 @@ exports[`<Container /> renders with custom styles when given a custom theme 1`]
   max-width: 100%;
 }
 
-@media (min-width:600px) {
+@media (min-width: 600px) {
   .emotion-0 {
     max-width: 576px;
   }
 }
 
-@media (min-width:960px) {
+@media (min-width: 960px) {
   .emotion-0 {
     max-width: 768px;
   }
 }
 
-@media (min-width:1280px) {
+@media (min-width: 1280px) {
   .emotion-0 {
     max-width: 992px;
   }
 }
 
-@media (min-width:1920px) {
+@media (min-width: 1920px) {
   .emotion-0 {
     max-width: 1200px;
   }
@@ -61,25 +61,25 @@ exports[`<Container /> renders with default styles 1`] = `
   max-width: 100%;
 }
 
-@media (min-width:576px) {
+@media (min-width: 576px) {
   .emotion-0 {
     max-width: 540px;
   }
 }
 
-@media (min-width:768px) {
+@media (min-width: 768px) {
   .emotion-0 {
     max-width: 720px;
   }
 }
 
-@media (min-width:992px) {
+@media (min-width: 992px) {
   .emotion-0 {
     max-width: 960px;
   }
 }
 
-@media (min-width:1200px) {
+@media (min-width: 1200px) {
   .emotion-0 {
     max-width: 1140px;
   }

diff --git a/tests/__snapshots__/Row.spec.tsx.snap b/tests/__snapshots__/Row.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`<Row /> renders with custom styles with custom theme 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -24,6 +25,7 @@ exports[`<Row /> renders with default styles 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -42,6 +44,7 @@ exports[`<Row /> renders with no gutters when given a prop 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;