microlinkhq · breadadams · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 ### React
 
 ```
-npm install @microlink/react styled-components --save
+npm install @microlink/react @emotion/react @emotion/styled --save
 ```
 
 ### Vanilla

diff --git a/packages/hover-react/.babelrc b/packages/hover-react/.babelrc
@@ -16,7 +16,8 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@emotion"
   ],
   "env": {
     "production": {

diff --git a/packages/hover-react/package.json b/packages/hover-react/package.json
@@ -36,6 +36,10 @@
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
     "@babel/runtime": "latest",
+    "@emotion/babel-plugin": "latest",
+    "@emotion/jest": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
     "@microlink/demo-links": "latest",
     "@rollup/plugin-babel": "latest",
     "@rollup/plugin-commonjs": "latest",
@@ -57,15 +61,13 @@
     "jest": "26",
     "jest-environment-enzyme": "latest",
     "jest-enzyme": "latest",
-    "jest-styled-components": "latest",
     "lodash": "latest",
     "prop-types": "latest",
     "react": "^17",
     "react-dom": "^17",
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
-    "styled-components": "latest",
     "unfetch": "latest"
   },
   "engines": {
@@ -91,9 +93,10 @@
     "verbose": true
   },
   "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "react": ">= 17",
-    "react-dom": ">= 17",
-    "styled-components": "^5"
+    "react-dom": ">= 17"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/hover-react/rollup.config.js b/packages/hover-react/rollup.config.js
@@ -12,7 +12,8 @@ const babelRc = JSON.parse(fs.readFileSync('./.babelrc'))
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }
 

diff --git a/packages/hover-react/src/index.js b/packages/hover-react/src/index.js
@@ -1,5 +1,5 @@
 import Microlink from '@microlink/react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import React from 'react'
 
 const PopOver = styled.div`

diff --git a/packages/hover-react/stories/index.js b/packages/hover-react/stories/index.js
@@ -1,6 +1,6 @@
 import 'unfetch/polyfill'
 import React from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 import { storiesOf } from '@storybook/react'
 

diff --git a/packages/hover-react/stories/index.test.js b/packages/hover-react/stories/index.test.js
@@ -1,4 +1,8 @@
+/* global expect */
+
 import initStoryshots from '@storybook/addon-storyshots'
-import 'jest-styled-components'
+import { createSerializer } from '@emotion/jest'
+
+expect.addSnapshotSerializer(createSerializer())
 
 initStoryshots()
diff --git a/packages/hover-vanilla/docs/bootstrap.html b/packages/hover-vanilla/docs/bootstrap.html
@@ -489,7 +489,7 @@ <h2 class="display-5 font-weight-normal">Official Themes</h2>
 
 </body>
 <script
-  src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+  src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function (event) {

diff --git a/packages/hover-vanilla/docs/collectednotes.html b/packages/hover-vanilla/docs/collectednotes.html
@@ -332,7 +332,7 @@ <h3 class="title is-size-4">Christian Gill</h3>
       --microlink-hover-border-color: #999;
     }
    </style>
-   <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
    <script src="./dist/microlink.js"></script>
    <script>
       document.addEventListener('DOMContentLoaded', function (event) {

diff --git a/packages/hover-vanilla/docs/dealflow.html b/packages/hover-vanilla/docs/dealflow.html
@@ -194,7 +194,7 @@ <h1><b>Ontruck raised &euro;17m</b>. The Hotels Network received €10m. Bootstr
 <link rel="stylesheet" property="stylesheet" href="/modules/system/assets/css/framework.extras.css">
 
     <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.eu01.nr-data.net","licenseKey":"e39de2683f","applicationID":"14124675","transactionName":"MhBSZQoZC0ZXVRZZWwtacVIMEQpbGXUPQ2gmGVFCCx0WaXVbEXNbCwFCXhQUAEd2RBde","queueTime":0,"applicationTime":104,"atts":"HldRE0IDGEg=","errorBeacon":"bam.eu01.nr-data.net","agent":""}</script></body>
-    <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <script src="./dist/microlink.js"></script>
   <style>
     :root {

diff --git a/packages/hover-vanilla/docs/index.html b/packages/hover-vanilla/docs/index.html
@@ -130,7 +130,7 @@ <h3 class="mt3 f3 fw6">Usage</h3>
   &#x3C;/style&#x3E;
 
   <span class="gray">&#x3C;!-- load @microlink/hover-vanilla --&#x3E;</span>
-  &lt;script src=&quot;https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/hover-vanilla@latest/dist/microlink.min.js&quot;&gt;&lt;/script&gt;
+  &lt;script src=&quot;https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/hover-vanilla@latest/dist/microlink.min.js&quot;&gt;&lt;/script&gt;
 
   <span class="gray">&#x3C;!-- intialize `microlinkHover` --&#x3E;</span>
   &#x3C;script&#x3E;
@@ -152,7 +152,7 @@ <h3 class="mt3 f3 fw6">See in action</h3>
     </p>
   </section>
 </body>
-<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.js"></script>
 <script>
   document.addEventListener('DOMContentLoaded', function (event) {

diff --git a/packages/hover-vanilla/docs/joshwcomeau.html b/packages/hover-vanilla/docs/joshwcomeau.html
@@ -423,7 +423,7 @@
       --microlink-hover-border-color: #999;
     }
   </style>
-  <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js,npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <script src="./dist/microlink.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function (event) {

diff --git a/packages/hover-vanilla/preact.html b/packages/hover-vanilla/preact.html
@@ -120,8 +120,8 @@ <h1 class="f4 black tc">custom</h1>
 <script src="https://cdn.jsdelivr.net/npm/preact@10.3.1/hooks/dist/hooks.umd.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/preact@10.3.1/compat/dist/compat.umd.min.js"></script>
 <script>window.React = window.ReactDOM = window.preactCompat</script>
-<script src="https://cdn.jsdelivr.net/npm/react-is@latest/umd/react-is.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/styled-components@latest/dist/styled-components.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@emotion/styled@11.11.0/dist/emotion-styled.cjs.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@emotion/react@11.11.0/dist/emotion-react.cjs.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>
 <script src="./dist/microlink.min.js"></script>
 <script>

diff --git a/packages/hover-vanilla/rollup.config.js b/packages/hover-vanilla/rollup.config.js
@@ -31,7 +31,8 @@ const plugins = ({ compress }) =>
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }
 

diff --git a/packages/hover-vanilla/src/index.js b/packages/hover-vanilla/src/index.js
@@ -1,6 +1,6 @@
 import MicrolinkHover from '@microlink/hover-react'
 import localhostUrl from 'localhost-url-regex'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import ReactDOM from 'react-dom'
 import React from 'react'
 

diff --git a/packages/react/.babelrc b/packages/react/.babelrc
@@ -16,7 +16,8 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@emotion"
   ],
   "env": {
     "production": {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -37,6 +37,10 @@
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
     "@babel/runtime": "latest",
+    "@emotion/babel-plugin": "latest",
+    "@emotion/jest": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
     "@microlink/demo-links": "latest",
     "@rollup/plugin-babel": "latest",
     "@rollup/plugin-commonjs": "latest",
@@ -56,15 +60,13 @@
     "jest": "26",
     "jest-environment-enzyme": "latest",
     "jest-enzyme": "latest",
-    "jest-styled-components": "latest",
     "lodash": "latest",
     "prop-types": "latest",
     "react": "^17",
     "react-dom": "^17",
     "rollup": "latest",
     "rollup-plugin-filesize": "latest",
     "rollup-plugin-visualizer": "latest",
-    "styled-components": "latest",
     "unfetch": "latest"
   },
   "engines": {
@@ -91,9 +93,10 @@
     "verbose": true
   },
   "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "react": ">= 17",
-    "react-dom": ">= 17",
-    "styled-components": "^5"
+    "react-dom": ">= 17"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
@@ -12,7 +12,8 @@ const babelRc = JSON.parse(fs.readFileSync('./.babelrc'))
 const globals = {
   react: 'React',
   'react-dom': 'ReactDOM',
-  'styled-components': 'styled',
+  '@emotion/react': 'emotionReact',
+  '@emotion/styled': 'emotionStyled',
   '@microlink/mql': 'mql'
 }
 
@@ -40,7 +41,6 @@ const build = ({ file, format, name, exports }) => {
   return {
     input: './src/index.js',
     output: {
-      interop: id => (id === 'styled-components' ? 'esModule' : 'default'),
       sourcemap: compress,
       file,
       format,

diff --git a/packages/react/src/components/Card/CardAnimation.js b/packages/react/src/components/Card/CardAnimation.js
@@ -1,4 +1,4 @@
-import { css, keyframes } from 'styled-components'
+import { css, keyframes } from '@emotion/react'
 
 const emptyStatePulse = keyframes`
   0% {

diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js
@@ -1,9 +1,10 @@
 /* global URL */
 
 import React, { useCallback, useMemo, useContext } from 'react'
-import styled, { css } from 'styled-components'
-import CardText from './CardText'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 
+import CardText from './CardText'
 import { transition } from '../../theme'
 import { classNames, media, isLarge, isSmall, isNil } from '../../utils'
 import { GlobalContext } from '../../context/GlobalState'
@@ -28,7 +29,7 @@ const mobileDescriptionStyle = css`
   `};
 `
 
-export const Content = styled('div').attrs({ className: classNames.content })`
+export const Content = styled('div')`
   display: flex;
   padding: 10px 15px;
   min-width: 0;
@@ -41,7 +42,9 @@ export const Content = styled('div').attrs({ className: classNames.content })`
   `};
 `
 
-const Header = styled('header').attrs({ className: classNames.title })`
+Content.defaultProps = { className: classNames.content }
+
+const Header = styled('header')`
   text-align: left;
   font-weight: bold;
   margin: 0;
@@ -58,7 +61,7 @@ const Header = styled('header').attrs({ className: classNames.title })`
   `}
 `
 
-const Description = styled('div').attrs({ className: classNames.description })`
+const Description = styled('div')`
   text-align: left;
   font-size: 14px;
   flex-grow: 2;
@@ -68,7 +71,7 @@ const Description = styled('div').attrs({ className: classNames.description })`
   ${({ cardSize }) => !isLarge(cardSize) && mobileDescriptionStyle};
 `
 
-const Footer = styled('footer').attrs({ className: classNames.url })`
+const Footer = styled('footer')`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -92,7 +95,7 @@ const Author = styled(CardText)`
   }
 `
 
-const PoweredBy = styled('span').attrs({ title: 'microlink.io' })`
+const PoweredBy = styled('span')`
   background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center
     center;
   display: block;
@@ -124,17 +127,17 @@ const CardContent = () => {
 
   return (
     <Content cardSize={size}>
-      <Header cardSize={size}>
+      <Header cardSize={size} className={classNames.title}>
         <CardText useNanoClamp={false}>{title}</CardText>
       </Header>
       {!isSmallCard && (
-        <Description cardSize={size}>
+        <Description cardSize={size} className={classNames.description}>
           <CardText lines={2}>{description}</CardText>
         </Description>
       )}
-      <Footer cardSize={size}>
+      <Footer cardSize={size} className={classNames.url}>
         <Author useNanoClamp={false}>{formattedUrl}</Author>
-        <PoweredBy onClick={handleOnClick} />
+        <PoweredBy onClick={handleOnClick} title='microlink.io' />
       </Footer>
     </Content>
   )

diff --git a/packages/react/src/components/Card/CardEmpty.js b/packages/react/src/components/Card/CardEmpty.js
@@ -1,7 +1,7 @@
 /* eslint-disable multiline-ternary */
 
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 
 import { emptyStateAnimation, emptyStateImageAnimation } from './CardAnimation'
 import CardImage from './CardMedia/Image'