Note:
>
-> **`css` from `@emotion/core` does not return the computed class name string.** The function returns an object containing the computed name and flattened styles. The returned object is understood by emotion at a low level and can be composed with other emotion based styles inside of the `css` prop, other `css` calls, or the `styled` API.
+> **`css` from `@emotion/react` does not return the computed class name string.** The function returns an object containing the computed name and flattened styles. The returned object is understood by emotion at a low level and can be composed with other emotion based styles inside of the `css` prop, other `css` calls, or the `styled` API.
You can also pass in your css as variables, which allows for composition (read more about this [here](https://emotion.sh/docs/composition)).
@@ -167,7 +167,7 @@ The `P` component in this example has its default styles overridden in the `Arti
```js
/** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
const P = props => (
(
(MyComponent)({})` you should now be writing `styled(MyComponent)({})`
+
+If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred.
+
+## Theme type
+
+It's now easier to provide a type for `Theme`. Instead of creating custom instances (like before) you can augment the builtin `Theme` interface like this:
+
+```ts
+import '@emotion/react'
+
+declare module '@emotion/react' {
+ export interface Theme {
+ primaryColor: string
+ secondaryColor: string
+ }
+}
+```
+
+## css prop types
+
+The way in which we provide TypeScript support for the `css` prop has changed. Based on the usage of our JSX factories, we can add support for `css` prop only for components that support `className` prop (as our JSX factory functions take the provided `css` prop, resolve it and pass the generated `className` to the rendered component).
+
+For the classic runtime this has been implemented using technique described [here](https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions). What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for the `css` prop when using different libraries with `css` prop support, such as `styled-components`.
+
+For the automatic runtime this has been implemented by exporting `JSX` namespace from the appropriate entries but this is only supported in **TypeScript 4.1 or higher**.
+
+However, if you are stuck with older version of TypeScript or using the classic runtime implicitly by using our `@emotion/babel-preset-css-prop` then it's not possible to leverage leverage `css` prop support being added conditionally based on a type of rendered component. For those cases we have added a special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
+
+```ts
+/// ('div')`
+ color: red;
+`
+
+// Option B
+const B = styled.div({
+ color: 'red',
+})
+```
+
+Styled components are annotated the same way normal React components are:
+
+```jsx
+import styled from '@emotion/styled'
+
+type Props = { a: string }
+const Link = styled('a')`
+ color: red;
+`
+
+const App = () => ('div')`
+ color: red;
+`
+
+export const App = () => >('div')`
+ background-color: yellow;
+`
+
+const App = () => (
+ {() => 10}
+ ^^^^^^^^^^ Cannot create Container element because in property children:
+ • Either inexact function [1] is incompatible with exact React.Element [2].
+ • Or function [1] is incompatible with React.Portal [3].
+ • Or property @@iterator is missing in function [1] but exists in $Iterable [4].
+)
+```
+
+Alternatively, you can define the return type of your component, so that
+Flow doesn't need to infer it reading the props type of the internal component:
+
+```jsx
+import type { Node } from 'react'
+
+const Container = styled.div`
+ color: red;
+`
+
+export const App = (): Node =>
diff --git a/docs/install.mdx b/docs/install.mdx
index 3bc69fda7..e5208bd84 100644
--- a/docs/install.mdx
+++ b/docs/install.mdx
@@ -2,16 +2,16 @@
title: 'Install'
---
-There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the [`@emotion/core` package](/packages/@emotion/core). If you're not using React, you should use [the `emotion` package](#vanilla).
+There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the [`@emotion/react` package](/packages/@emotion/react). If you're not using React, you should use [the `emotion` package](#vanilla).
```bash
-yarn add @emotion/core
+yarn add @emotion/react
```
or if you prefer npm
```bash
-npm install --save @emotion/core
+npm install --save @emotion/react
```
To use it, import what you need, for example use [the css prop](/docs/css-prop.md) to create class names with styles.
@@ -20,7 +20,7 @@ To use it, import what you need, for example use [the css prop](/docs/css-prop.m
// @live
// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import { jsx, css } from '@emotion/react'
const style = css`
color: hotpink;
@@ -52,7 +52,7 @@ render(
`styled` is a way to create React components that have styles attached to them.
```bash
-# assuming you already have @emotion/core installed
+# assuming you already have @emotion/react installed
yarn add @emotion/styled
```
@@ -73,7 +73,7 @@ const Button = styled.button`
render(
This is a hotpink button. )
```
-## With [`babel-plugin-emotion`](/packages/babel-plugin-emotion)
+## With [`@emotion/babel-plugin`](/packages/@emotion/babel-plugin)
> Note:
>
@@ -82,13 +82,13 @@ render(
This is a hotpink button. )
Emotion has an optional [Babel](https://babeljs.io/) plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels.
```bash
-yarn add --dev babel-plugin-emotion
+yarn add --dev @emotion/babel-plugin
```
or if you prefer npm
```bash
-npm install --save-dev babel-plugin-emotion
+npm install --save-dev @emotion/babel-plugin
```
## .babelrc
@@ -97,7 +97,7 @@ _`"emotion"` must be the **first plugin** in your babel config `plugins` list._
```json
{
- "plugins": ["emotion"]
+ "plugins": ["@emotion"]
}
```
@@ -107,38 +107,23 @@ If you are using Babel's env option emotion must also be first for each environm
{
"env": {
"production": {
- "plugins": ["emotion", ...otherBabelPlugins]
+ "plugins": ["@emotion", ...otherBabelPlugins]
}
},
- "plugins": ["emotion"]
-}
-```
-
-## Recommended config
-
-```json
-{
- "env": {
- "production": {
- "plugins": ["emotion"]
- },
- "development": {
- "plugins": [["emotion", { "sourceMap": true }]]
- }
- }
+ "plugins": ["@emotion"]
}
```
# Vanilla
-If you're not using React, you can use vanilla Emotion from the `emotion` package. Most of the documentation here focuses on the React-specific version of Emotion, but most of the concepts in the React-specific version also apply to vanilla Emotion.
+If you're not using React, you can use vanilla Emotion from the `@emotion/css` package. Most of the documentation here focuses on the React-specific version of Emotion, but most of the concepts in the React-specific version also apply to vanilla Emotion.
```bash
-yarn add emotion
+yarn add @emotion/css
```
```jsx
-import { css } from 'emotion'
+import { css } from '@emotion/css'
const app = document.getElementById('root')
const myClassName = css`
diff --git a/docs/instances.mdx b/docs/instances.mdx
deleted file mode 100644
index 631ea2b5e..000000000
--- a/docs/instances.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: 'Instances'
----
-
-emotion allows creating custom instances of emotion to provide special options. Instances are created with the [`create-emotion`](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion) and [`create-emotion-server`](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion-server) packages which create instances of `emotion` and `emotion-server` respectively. They are documented in their own respective READMEs linked above.
-
-The instances' paths should be added as an option to `babel-plugin-emotion` [as shown in `babel-plugin-emotion`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion#instances).
diff --git a/docs/introduction.mdx b/docs/introduction.mdx
index d3287a173..9b04638c0 100644
--- a/docs/introduction.mdx
+++ b/docs/introduction.mdx
@@ -11,26 +11,24 @@ There are two primary methods of using Emotion. The first is framework agnostic
### Framework Agnostic
```bash
-npm i emotion
+npm i @emotion/css
```
-**[`emotion` documentation](https://emotion.sh/docs/emotion)**
+**[`@emotion/css` documentation](https://emotion.sh/docs/@emotion/css)**
-The [emotion](https://www.npmjs.com/package/emotion) package is framework agnostic and the simplest way to use Emotion.
+The [@emotion/css](https://www.npmjs.com/package/@emotion/css) package is framework agnostic and the simplest way to use Emotion.
- Requires no additional setup, babel plugin, or other config changes.
- Has support for auto vendor-prefixing, nested selectors, and media queries.
-- Works in situations where configuration is restricted or not possible such as with [Create React App](https://facebook.github.io/create-react-app)
-
- You simply prefer to use the `css` function to generate class names and `cx` to compose them.
- Server side rendering requires [additional work to set up](/docs/ssr.md#api)
```jsx
// @live
-import { css, cx } from 'emotion'
+import { css, cx } from '@emotion/css'
const color = 'white'
@@ -54,10 +52,10 @@ render(
### React
```bash
-npm i @emotion/core
+npm i @emotion/react
```
-The ["@emotion/core"](https://www.npmjs.com/package/@emotion/core) package requires React and is recommended for users of that framework if possible.
+The ["@emotion/react"](https://www.npmjs.com/package/@emotion/react) package requires React and is recommended for users of that framework if possible.
- Best when using React with a build environment that can be configured.
@@ -76,13 +74,13 @@ The ["@emotion/core"](https://www.npmjs.com/package/@emotion/core) package requi
- ESLint plugins available to ensure proper patterns and configuration are set.
-**[`@emotion/core` css prop documentation](/docs/css-prop.md)**
+**[`@emotion/react` css prop documentation](/docs/css-prop.md)**
```jsx
// @live
// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
const color = 'white'
@@ -104,7 +102,7 @@ render(
```
```bash
-npm i @emotion/styled @emotion/core
+npm i @emotion/styled @emotion/react
```
The [@emotion/styled](https://www.npmjs.com/package/@emotion/styled) package is for those who prefer to use the `styled.div` style API for creating components.
@@ -130,6 +128,10 @@ const Button = styled.button`
render(
This my button component. )
```
+### Browser requirements
+
+Emotion supports all popular browsers, including Internet Explorer 11.
+
### Libraries that Inspired Us
- ["original" glam](https://github.com/threepointone/glam/tree/e9bca3950f12503246ed7fccad5cf13e5e9c86e3)
diff --git a/docs/keyframes.mdx b/docs/keyframes.mdx
index 49e7a951c..916267ba4 100644
--- a/docs/keyframes.mdx
+++ b/docs/keyframes.mdx
@@ -2,12 +2,12 @@
title: 'Keyframes'
---
-You can define animations using the `keyframes` helper from `@emotion/core`. `keyframes` takes in a css keyframe definition and returns an object you can use in styles. You can use strings or objects just like `css`.
+You can define animations using the `keyframes` helper from `@emotion/react`. `keyframes` takes in a css keyframe definition and returns an object you can use in styles. You can use strings or objects just like `css`.
```jsx
// @live
/** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core'
+import { jsx, css, keyframes } from '@emotion/react'
const bounce = keyframes`
from, 20%, 53%, 80%, to {
diff --git a/docs/labels.mdx b/docs/labels.mdx
index f051613c8..f94de377e 100644
--- a/docs/labels.mdx
+++ b/docs/labels.mdx
@@ -2,12 +2,12 @@
title: 'Labels'
---
-Emotion adds a css property called `label`, the value of it is appended to the end of the class name, so it's more readable than a hash. `babel-plugin-emotion` adds these labels automatically based on the variable name and other information, so they don't need to be manually specified.
+Emotion adds a css property called `label`, the value of it is appended to the end of the class name, so it's more readable than a hash. `@emotion/babel-plugin` adds these labels automatically based on the variable name and other information, so they don't need to be manually specified.
```jsx
// @live
/** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
let style = css`
color: hotpink;
diff --git a/docs/media-queries.mdx b/docs/media-queries.mdx
index 67ca85d04..6528d5bb6 100644
--- a/docs/media-queries.mdx
+++ b/docs/media-queries.mdx
@@ -7,7 +7,7 @@ Using media queries in emotion works just like using media queries in regular cs
```jsx
// @live
/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import { jsx, css } from '@emotion/react'
render(
Note:
>
-> `babel-plugin-emotion` is required for source maps
+> `@emotion/babel-plugin` is required for source maps
-emotion supports source maps for styles authored in javascript.
+Emotion supports source maps for styles authored in JavaScript.
Required For Source Maps:
-1. `babel-plugin-emotion` must be in your Babel setup. [[documentation]](./install.md)
+1. `@emotion/babel-plugin` must be in your Babel setup. [[documentation]](./install.md)
2. `process.env.NODE_ENV` must be any value except `"production"`
> Note:
>
-> Source maps are on by default in babel-plugin-emotion but they will be removed in production builds
+> Source maps are on by default in @emotion/babel-plugin but they will be removed in production builds
diff --git a/docs/ssr.mdx b/docs/ssr.mdx
index 56e470066..d08f2ee31 100644
--- a/docs/ssr.mdx
+++ b/docs/ssr.mdx
@@ -6,7 +6,7 @@ Server side rendering in Emotion 10 has two approaches, each with their own trad
## Default Approach
-Server side rendering works out of the box in Emotion 10 and above if you're only using `@emotion/core` and `@emotion/styled`. This means you can call React's [`renderToString`](https://reactjs.org/docs/react-dom-server.html#rendertostring) or [`renderToNodeStream`](https://reactjs.org/docs/react-dom-server.html#rendertonodestream) methods directly without any extra configuration.
+Server side rendering works out of the box in Emotion 10 and above if you're only using `@emotion/react` and `@emotion/styled`. This means you can call React's [`renderToString`](https://reactjs.org/docs/react-dom-server.html#rendertostring) or [`renderToNodeStream`](https://reactjs.org/docs/react-dom-server.html#rendertonodestream) methods directly without any extra configuration.
```jsx
import { renderToString } from 'react-dom/server'
@@ -36,12 +36,13 @@ You can also use the advanced integration, it requires more work but does not ha
### On server
```jsx
-import { CacheProvider } from '@emotion/core'
+import { CacheProvider } from '@emotion/react'
import { renderToString } from 'react-dom/server'
-import createEmotionServer from 'create-emotion-server'
+import createEmotionServer from '@emotion/server/create-instance'
import createCache from '@emotion/cache'
-const cache = createCache()
+const key = 'custom'
+const cache = createCache({ key })
const { extractCritical } = createEmotionServer(cache)
let element = (
@@ -62,7 +63,7 @@ res
My site
-
+
${html}
@@ -97,7 +98,7 @@ This returns a string of html that inlines the critical css required right befor
```jsx
import { renderToString } from 'react-dom/server'
-import { renderStylesToString } from 'emotion-server'
+import { renderStylesToString } from '@emotion/server'
import App from './App'
const html = renderStylesToString(renderToString(
))
@@ -109,7 +110,7 @@ This returns a [Node Stream Writable](https://nodejs.org/api/stream.html#stream_
```jsx
import { renderToNodeStream } from 'react-dom/server'
-import { renderStylesToNodeStream } from 'emotion-server'
+import { renderStylesToNodeStream } from '@emotion/server'
import App from './App'
const stream = renderToNodeStream(
).pipe(renderStylesToNodeStream())
@@ -121,7 +122,7 @@ This returns an object with the properties `html`, `ids` and `css`. It removes u
```jsx
import { renderToString } from 'react-dom/server'
-import { extractCritical } from 'emotion-server'
+import { extractCritical } from '@emotion/server'
import App from './App'
const { html, ids, css } = extractCritical(renderToString(
))
@@ -132,7 +133,7 @@ const { html, ids, css } = extractCritical(renderToString(
))
`hydrate` should be called on the client with the `ids` that `extractCritical` returns. If you don't call it then emotion will reinsert all the rules. `hydrate` is **only** required for `extractCritical`, **not** for `renderStylesToString` or `renderStylesToNodeStream`, hydration occurs automatically with `renderStylesToString` and `renderStylesToNodeStream`.
```jsx
-import { hydrate } from 'emotion'
+import { hydrate } from '@emotion/css'
hydrate(ids)
```
@@ -174,16 +175,6 @@ export const createMyCache = () =>
stylisPlugins: [
/* your plugins here */
],
- // prefix based on the css property
- prefix: key => {
- switch (key) {
- case 'flex':
- return false
- case 'transform':
- default:
- return true
- }
- }
})
export const myCache = createMyCache()
@@ -192,7 +183,7 @@ export const myCache = createMyCache()
gatsby-ssr.js
```jsx
-import { CacheProvider } from '@emotion/core'
+import { CacheProvider } from '@emotion/react'
import { createMyCache } from './create-emotion-cache'
@@ -204,7 +195,7 @@ export const wrapRootElement = ({ element }) => (
gatsby-browser.js
```jsx
-import { CacheProvider } from '@emotion/core'
+import { CacheProvider } from '@emotion/react'
import { myCache } from './create-emotion-cache'
@@ -215,7 +206,7 @@ export const wrapRootElement = ({ element }) => (
> Note:
>
-> While Emotion 10 and above supports SSR out of the box, it's still recommended to use gatsby-plugin-emotion as gatsby-plugin-emotion will enable babel-plugin-emotion and other potential future optimisations.
+> While Emotion 10 and above supports SSR out of the box, it's still recommended to use gatsby-plugin-emotion as gatsby-plugin-emotion will enable @emotion/babel-plugin and other potential future optimisations.
## Puppeteer
@@ -242,7 +233,7 @@ if (root.hasChildNodes()) {
disable-speedy.js
```js
-import { sheet } from 'emotion'
+import { sheet } from '@emotion/css'
// Check if the root node has any children to detect if the app has been preprendered
// speedy is disabled when the app is being prerendered so that styles render into the DOM
diff --git a/docs/styled.mdx b/docs/styled.mdx
index 68a57716b..4a23643d4 100644
--- a/docs/styled.mdx
+++ b/docs/styled.mdx
@@ -87,7 +87,7 @@ render(
### Targeting another emotion component
-Similar to [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for emotion components to be targeted like regular CSS selectors when using [babel-plugin-emotion](/packages/babel-plugin-emotion.md).
+Similar to [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for emotion components to be targeted like regular CSS selectors when using [@emotion/babel-plugin](/packages/babel-plugin).
```jsx
// @live
@@ -159,7 +159,7 @@ This API was inspired by [glamorous](https://github.com/paypal/glamorous). ❤
### Customizing prop forwarding
-By default, Emotion passes all props to custom components and only props that are valid html attributes for string tags. You can customize this by passing a custom `shouldForwardProp` function. You can also use `@emotion/is-prop-valid` (which is used by emotion internally) to filter out props that are not valid as html attributes.
+By default, Emotion passes all props (except for `theme`) to custom components and only props that are valid html attributes for string tags. You can customize this by passing a custom `shouldForwardProp` function. You can also use `@emotion/is-prop-valid` (which is used by emotion internally) to filter out props that are not valid as html attributes.
```jsx
// @live
@@ -183,7 +183,7 @@ You can create dynamic styles that are based on props and use them in styles.
```jsx
// @live
import styled from '@emotion/styled'
-import { css } from '@emotion/core'
+import { css } from '@emotion/react'
const dynamicStyle = props =>
css`
diff --git a/docs/testing.mdx b/docs/testing.mdx
index 4540df5e3..bb3c2c64c 100644
--- a/docs/testing.mdx
+++ b/docs/testing.mdx
@@ -6,37 +6,59 @@ Adding [snapshot tests with Jest](https://facebook.github.io/jest/docs/en/snapsh
By diffing the serialized value of your React tree Jest can show you what changed in your app and allow you to fix it or update the snapshot.
-By default snapshots with emotion show generated class names. Adding [jest-emotion](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion) allows you to output the actual styles being applied.
+By default snapshots with emotion show generated class names. Adding [@emotion/jest](https://github.com/emotion-js/emotion/tree/master/packages/jest) allows you to output the actual styles being applied.
### Installation
```bash
-npm install --save-dev jest-emotion
+npm install --save-dev @emotion/jest
```
-Add the snapshot serializer in your [`setupTestFrameworkScriptFile`](http://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) _or_ at the top of your test file.
+Add the `"@emotion/jest/serializer"` to the [`snapshotSerializers`](https://jestjs.io/docs/en/configuration#snapshotserializers-arraystring) option.
+
+```json
+{
+ "snapshotSerializers": ["@emotion/jest/serializer"]
+}
+```
+
+Or use `expect.addSnapshotSerializer` to add it.
+
+```javascript
+import { createSerializer } from '@emotion/jest'
+
+expect.addSnapshotSerializer(createSerializer())
+```
+
+When using Enzyme, you can add `"@emotion/jest/enzyme-serializer"` instead.
+
+```json
+{
+ "snapshotSerializers": ["@emotion/jest/enzyme-serializer"]
+}
+```
+
+Or use `expect.addSnapshotSerializer` to add it like this:
+
```javascript
-import * as emotion from 'emotion'
-import { createSerializer } from 'jest-emotion'
+import { createEnzymeSerializer } from '@emotion/jest/enzyme-serializer' // also adds the enzyme-to-json serializer
-expect.addSnapshotSerializer(createSerializer(emotion))
+expect.addSnapshotSerializer(createEnzymeSerializer())
```
### Writing a test
-Writing a test with `jest-emotion` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON.
+Writing a test with `@emotion/jest` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON.
```jsx
import React from 'react'
-import serializer from 'jest-emotion'
/** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
import renderer from 'react-test-renderer'
-expect.addSnapshotSerializer(serializer)
const Button = props => (
Object** - An object or function that provides an object.
+
+```jsx
+import * as React from 'react'
+import styled from '@emotion/styled'
+import { ThemeProvider, withTheme } from '@emotion/react'
+
+// object-style theme
+
+const theme = {
+ backgroundColor: 'green',
+ color: 'red'
+}
+
+// function-style theme; note that if multiple are used,
+// the parent theme will be passed as a function argument
+
+const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' })
+
+class Container extends React.Component {
+ render() {
+ return (
+
+
+ Boom shaka laka!
+
+
+ )
+ }
+}
+```
+
+> Note:
+>
+> Make sure to hoist your theme out of render otherwise you may have performance problems.
+
+### withTheme(component: React.ComponentType): React.ComponentType
+
+A higher-order component that provides the current theme as a prop to the wrapped child and listens for changes. If the theme is updated, the child component will be re-rendered accordingly.
+
+```jsx
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+import { withTheme } from '@emotion/react'
+
+class TellMeTheColor extends React.Component {
+ render() {
+ return The color is {this.props.theme.color}.
+ }
+}
+
+TellMeTheColor.propTypes = {
+ theme: PropTypes.shape({
+ color: PropTypes.string
+ })
+}
+
+const TellMeTheColorWithTheme = withTheme(TellMeTheColor)
+```
+
+### useTheme
+
+A React hook that provides the current theme as its value. If the theme is updated, the child component will be re-rendered accordingly.
+
+```jsx
+// @live
+/** @jsx jsx */
+import { jsx, ThemeProvider, useTheme } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const theme = {
+ colors: {
+ primary: 'hotpink'
+ }
+}
+
+function SomeText(props) {
+ const theme = useTheme()
+ return
+}
+
+render(
+
+ some text
+
+)
+```
+
+## Credits
+
+Thanks goes to the [styled-components team](https://github.com/styled-components/styled-components) and [their contributors](https://github.com/styled-components/styled-components/graphs/contributors) who designed this API.
diff --git a/docs/typescript.mdx b/docs/typescript.mdx
index 91232cd68..de03d7180 100644
--- a/docs/typescript.mdx
+++ b/docs/typescript.mdx
@@ -2,12 +2,12 @@
title: 'TypeScript'
---
-Emotion includes TypeScript definitions for `@emotion/core` and `@emotion/styled`. These definitions also infer types for css properties with the object syntax, HTML/SVG tag names, and prop types.
+Emotion includes TypeScript definitions for `@emotion/react` and `@emotion/styled`. These definitions also infer types for css properties with the object syntax, HTML/SVG tag names, and prop types.
-## @emotion/core
+## @emotion/react
```tsx
-import { css } from '@emotion/core'
+import { css } from '@emotion/react'
const titleStyle = css({
boxSizing: 'border-box',
@@ -25,7 +25,7 @@ const subtitleStyle = css`
TypeScript checks css properties with the object style syntax using [csstype](https://www.npmjs.com/package/csstype) package, so following code will emit errors.
```tsx
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
const titleStyle = css({
^ Argument of type 'boxSizing: 'bordre-box';' is not assignable [...]
@@ -39,10 +39,31 @@ To make the css prop work with pure TypeScript (without babel plugin) you need t
```tsx
/** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
+
+
```
As a result you may be not able to use react fragment shorthand syntax - `<>`, but still you can use `
+```
+
+### `css` prop
+
+When using our jsx pragma the support for `css` prop is being added only for components that accepts `className` prop, as our `jsx` factory function takes provided `css` prop, resolves it and pass the generated `className` to the rendered component.
+
+However, it's not possible to leverage `css` prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our `@emotion/babel-preset-css-prop`) we have a special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
+
+```ts
+import {} from '@emotion/react/types/css-prop'
+```
## @emotion/styled
@@ -103,28 +124,20 @@ type ImageProps = {
width: number
}
-const Image0 = styled('div')`
- width: ${(props: ImageProps) => props.width};
- background: url(${(props: ImageProps) => props.src})
- center center;
+// Using a css block
+const Image0 = styled.div`
+ width: ${props => props.width};
+ background: url(${props => props.src}) center center;
+ background-size: contain;
+`
+const Image0 = styled('div')`
+ width: ${props => props.width};
+ background: url(${props => props.src}) center center;
background-size: contain;
`
// Or with object styles
-
-const Image1 = styled('div')(
- {
- backgroundSize: 'contain'
- },
- (props: ImageProps) => ({
- width: props.width,
- background: `url(${props.src}) center center`
- })
-)
-
-// Or with a generic type
-
-const Image2 = styled('div')(
+const Image1 = styled('div')(
{
backgroundSize: 'contain'
},
@@ -133,36 +146,28 @@ const Image2 = styled('div')(
background: `url(${props.src}) center center`
})
)
-
-// TS 2.9+ only
-const Image3 = styled.div`
- width: ${(props: ImageProps) => props.width};
- background: url(${(props: ImageProps) => props.src})
- center center;
- background-size: contain;
-`
```
-- For TypeScript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947.
-
### React Components
+Emotion can also style React components and will infer component props as expected.
+
```tsx
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
import styled from '@emotion/styled'
-type ComponentProps = {
+interface ComponentProps {
className?: string
label: string
}
-const Component: SFC = ({
+const Component: FC = ({
label,
className
}) => {label}
const StyledComponent0 = styled(Component)`
- color: red;
+ color: ${props => label === 'Important' ? 'red' : 'green'};
`
const StyledComponent1 = styled(Component)({
@@ -171,46 +176,68 @@ const StyledComponent1 = styled(Component)({
const App = () => (
-
)
```
+### Forwarding props
+
+Sometimes you want to wrap an existing component and override the type of a prop. Emotion allows you to specify a `shouldForwardProp` hook to filter properties which should be passed to the wrapped component.
+
+If you make should `shouldForwardProp` a [type guard](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards) then only the props from the type guard will be exposed.
+
+For example:
+
+``` ts
+const Original: React.FC<{ prop1: string, prop2: string }> = () => null
+
+interface StyledOriginalExtraProps {
+ // This prop would conflict with the `prop2` on Original
+ prop2: number
+}
+const StyledOriginal = styled(Original, {
+ // Filter prop2 by only forwarding prop1
+ shouldForwardProp: (propName): propName is 'prop1' => propName === 'prop1'
+})(props => {
+ // props.prop2 will be `number`
+ return {}
+})
+
+// No more type conflict error
+; = ({
+const Component: FC = ({
label,
className
}) => {label}
-type StyledComponentProps = {
+interface StyledComponentProps {
bgColor: string
}
-const StyledComponent0 = styled(Component)`
+const StyledComponent0 = styled(Component)`
color: red;
- background: ${(props: StyledComponentProps) =>
- props.bgColor};
+ background: ${props => props.label ? props.bgColor : 'white'};
`
-
-const StyledComponent1 = styled(Component)<
- StyledComponentProps
->(
- {
- color: 'red'
- },
+// or
+const StyledComponent1 = styled(Component)(
props => ({
- background: props.bgColor
+ color: 'red'
+ background: props.label ? props.bgColor : 'white'
})
)
@@ -230,30 +257,37 @@ const App = () => (
### Define a Theme
-By default, `props.theme` has an `any` type annotation and works without any errors.
-However, you can define a theme type by creating another `styled` instance.
+By default, `props.theme` is an empty object because it's the only thing that is type-safe as a default.
+You can define a theme type by extending our type declarations via your own declarations file.
-_styled.tsx_
+_emotion.d.ts_
-```tsx
-import styled, { CreateStyled } from '@emotion/styled'
+```typescript
+import '@emotion/react'
-type Theme = {
- color: {
- primary: string
- positive: string
- negative: string
+declare module '@emotion/react' {
+ export interface Theme {
+ color: {
+ primary: string
+ positive: string
+ negative: string
+ }
}
- // ...
}
-export default styled as CreateStyled
+// You are also able to use a 3rd party theme this way:
+import '@emotion/react'
+import { MuiTheme } from 'material-ui'
+
+declare module '@emotion/react' {
+ export interface Theme extends MuiTheme {}
+}
```
_Button.tsx_
```tsx
-import styled from '../path/to/styled'
+import styled from '@emotion/styled'
const Button = styled('button')`
padding: 20px;
@@ -263,3 +297,39 @@ const Button = styled('button')`
export default Button
```
+
+If you were previously relying on `theme` being an `any` type, you have to restore compatibility with:
+
+_emotion.d.ts_
+
+```ts
+import '@emotion/react'
+
+declare module '@emotion/react' {
+ export interface Theme extends Record {}
+}
+```
+
+### TypeScript < 2.9
+
+For Typescript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947.
+
+You can work around this by specifying the prop types in your style callback:
+
+``` ts
+const StyledComponent0 = styled(Component)`
+ color: red;
+ background: ${(props: StyledComponentProps) =>
+ props.bgColor};
+`
+```
+
+NOTE: This approach you will have to perform the intersection with the component props yourself to get at the component props
+
+``` ts
+const StyledComponent0 = styled(Component)`
+ color: red;
+ background: ${(props: StyledComponentProps & ComponentProps) =>
+ props.bgColor};
+`
+```
diff --git a/docs/with-props.mdx b/docs/with-props.mdx
index b8fc9f639..cb760e2ff 100644
--- a/docs/with-props.mdx
+++ b/docs/with-props.mdx
@@ -9,7 +9,7 @@ Note that if css is passed down via props, it will take precedence over the css
```jsx
// @live
/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import { jsx, css } from '@emotion/react'
const pinkInput = css`
background-color: pink;
diff --git a/flow-typed/npm/jest_v23.x.x.js b/flow-typed/npm/jest_v23.x.x.js
deleted file mode 100644
index 5671079ba..000000000
--- a/flow-typed/npm/jest_v23.x.x.js
+++ /dev/null
@@ -1,1167 +0,0 @@
-// flow-typed signature: 78c200acffbcc16bba9478f5396c3a00
-// flow-typed version: b2980740dd/jest_v23.x.x/flow_>=v0.39.x
-
-type JestMockFn, TReturn> = {
- (...args: TArguments): TReturn,
- /**
- * An object for introspecting mock calls
- */
- mock: {
- /**
- * An array that represents all calls that have been made into this mock
- * function. Each call is represented by an array of arguments that were
- * passed during the call.
- */
- calls: Array,
- /**
- * An array that contains all the object instances that have been
- * instantiated from this mock function.
- */
- instances: Array,
- /**
- * An array that contains all the object results that have been
- * returned by this mock function call
- */
- results: Array<{ isThrow: boolean, value: TReturn }>
- },
- /**
- * Resets all information stored in the mockFn.mock.calls and
- * mockFn.mock.instances arrays. Often this is useful when you want to clean
- * up a mock's usage data between two assertions.
- */
- mockClear(): void,
- /**
- * Resets all information stored in the mock. This is useful when you want to
- * completely restore a mock back to its initial state.
- */
- mockReset(): void,
- /**
- * Removes the mock and restores the initial implementation. This is useful
- * when you want to mock functions in certain test cases and restore the
- * original implementation in others. Beware that mockFn.mockRestore only
- * works when mock was created with jest.spyOn. Thus you have to take care of
- * restoration yourself when manually assigning jest.fn().
- */
- mockRestore(): void,
- /**
- * Accepts a function that should be used as the implementation of the mock.
- * The mock itself will still record all calls that go into and instances
- * that come from itself -- the only difference is that the implementation
- * will also be executed when the mock is called.
- */
- mockImplementation(
- fn: (...args: TArguments) => TReturn
- ): JestMockFn,
- /**
- * Accepts a function that will be used as an implementation of the mock for
- * one call to the mocked function. Can be chained so that multiple function
- * calls produce different results.
- */
- mockImplementationOnce(
- fn: (...args: TArguments) => TReturn
- ): JestMockFn,
- /**
- * Accepts a string to use in test result output in place of "jest.fn()" to
- * indicate which mock function is being referenced.
- */
- mockName(name: string): JestMockFn,
- /**
- * Just a simple sugar function for returning `this`
- */
- mockReturnThis(): void,
- /**
- * Accepts a value that will be returned whenever the mock function is called.
- */
- mockReturnValue(value: TReturn): JestMockFn,
- /**
- * Sugar for only returning a value once inside your mock
- */
- mockReturnValueOnce(value: TReturn): JestMockFn,
- /**
- * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value))
- */
- mockResolvedValue(value: TReturn): JestMockFn>,
- /**
- * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value))
- */
- mockResolvedValueOnce(
- value: TReturn
- ): JestMockFn>,
- /**
- * Sugar for jest.fn().mockImplementation(() => Promise.reject(value))
- */
- mockRejectedValue(value: TReturn): JestMockFn>,
- /**
- * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value))
- */
- mockRejectedValueOnce(value: TReturn): JestMockFn>
-}
-
-type JestAsymmetricEqualityType = {
- /**
- * A custom Jasmine equality tester
- */
- asymmetricMatch(value: mixed): boolean
-}
-
-type JestCallsType = {
- allArgs(): mixed,
- all(): mixed,
- any(): boolean,
- count(): number,
- first(): mixed,
- mostRecent(): mixed,
- reset(): void
-}
-
-type JestClockType = {
- install(): void,
- mockDate(date: Date): void,
- tick(milliseconds?: number): void,
- uninstall(): void
-}
-
-type JestMatcherResult = {
- message?: string | (() => string),
- pass: boolean
-}
-
-type JestMatcher = (
- actual: any,
- expected: any
-) => JestMatcherResult | Promise
-
-type JestPromiseType = {
- /**
- * Use rejects to unwrap the reason of a rejected promise so any other
- * matcher can be chained. If the promise is fulfilled the assertion fails.
- */
- rejects: JestExpectType,
- /**
- * Use resolves to unwrap the value of a fulfilled promise so any other
- * matcher can be chained. If the promise is rejected the assertion fails.
- */
- resolves: JestExpectType
-}
-
-/**
- * Jest allows functions and classes to be used as test names in test() and
- * describe()
- */
-type JestTestName = string | Function
-
-/**
- * Plugin: jest-styled-components
- */
-
-type JestStyledComponentsMatcherValue =
- | string
- | JestAsymmetricEqualityType
- | RegExp
- | typeof undefined
-
-type JestStyledComponentsMatcherOptions = {
- media?: string,
- modifier?: string,
- supports?: string
-}
-
-type JestStyledComponentsMatchersType = {
- toHaveStyleRule(
- property: string,
- value: JestStyledComponentsMatcherValue,
- options?: JestStyledComponentsMatcherOptions
- ): void
-}
-
-/**
- * Plugin: jest-enzyme
- */
-type EnzymeMatchersType = {
- // 5.x
- toBeEmpty(): void,
- toBePresent(): void,
- // 6.x
- toBeChecked(): void,
- toBeDisabled(): void,
- toBeEmptyRender(): void,
- toContainMatchingElement(selector: string): void,
- toContainMatchingElements(n: number, selector: string): void,
- toContainExactlyOneMatchingElement(selector: string): void,
- toContainReact(element: React$Element): void,
- toExist(): void,
- toHaveClassName(className: string): void,
- toHaveHTML(html: string): void,
- toHaveProp: ((propKey: string, propValue?: any) => void) &
- ((props: Object) => void),
- toHaveRef(refName: string): void,
- toHaveState: ((stateKey: string, stateValue?: any) => void) &
- ((state: Object) => void),
- toHaveStyle: ((styleKey: string, styleValue?: any) => void) &
- ((style: Object) => void),
- toHaveTagName(tagName: string): void,
- toHaveText(text: string): void,
- toHaveValue(value: any): void,
- toIncludeText(text: string): void,
- toMatchElement(
- element: React$Element,
- options?: {| ignoreProps?: boolean, verbose?: boolean |}
- ): void,
- toMatchSelector(selector: string): void,
- // 7.x
- toHaveDisplayName(name: string): void
-}
-
-// DOM testing library extensions https://github.com/kentcdodds/dom-testing-library#custom-jest-matchers
-type DomTestingLibraryType = {
- toBeDisabled(): void,
- toBeEmpty(): void,
- toBeInTheDocument(): void,
- toBeVisible(): void,
- toContainElement(element: HTMLElement | null): void,
- toContainHTML(htmlText: string): void,
- toHaveAttribute(name: string, expectedValue?: string): void,
- toHaveClass(...classNames: string[]): void,
- toHaveFocus(): void,
- toHaveFormValues(expectedValues: { [name: string]: any }): void,
- toHaveStyle(css: string): void,
- toHaveTextContent(
- content: string | RegExp,
- options?: { normalizeWhitespace: boolean }
- ): void,
- toBeInTheDOM(): void
-}
-
-// Jest JQuery Matchers: https://github.com/unindented/custom-jquery-matchers
-type JestJQueryMatchersType = {
- toExist(): void,
- toHaveLength(len: number): void,
- toHaveId(id: string): void,
- toHaveClass(className: string): void,
- toHaveTag(tag: string): void,
- toHaveAttr(key: string, val?: any): void,
- toHaveProp(key: string, val?: any): void,
- toHaveText(text: string | RegExp): void,
- toHaveData(key: string, val?: any): void,
- toHaveValue(val: any): void,
- toHaveCss(css: { [key: string]: any }): void,
- toBeChecked(): void,
- toBeDisabled(): void,
- toBeEmpty(): void,
- toBeHidden(): void,
- toBeSelected(): void,
- toBeVisible(): void,
- toBeFocused(): void,
- toBeInDom(): void,
- toBeMatchedBy(sel: string): void,
- toHaveDescendant(sel: string): void,
- toHaveDescendantWithText(sel: string, text: string | RegExp): void
-}
-
-// Jest Extended Matchers: https://github.com/jest-community/jest-extended
-type JestExtendedMatchersType = {
- /**
- * Note: Currently unimplemented
- * Passing assertion
- *
- * @param {String} message
- */
- // pass(message: string): void;
-
- /**
- * Note: Currently unimplemented
- * Failing assertion
- *
- * @param {String} message
- */
- // fail(message: string): void;
-
- /**
- * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty.
- */
- toBeEmpty(): void,
-
- /**
- * Use .toBeOneOf when checking if a value is a member of a given Array.
- * @param {Array.<*>} members
- */
- toBeOneOf(members: any[]): void,
-
- /**
- * Use `.toBeNil` when checking a value is `null` or `undefined`.
- */
- toBeNil(): void,
-
- /**
- * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`.
- * @param {Function} predicate
- */
- toSatisfy(predicate: (n: any) => boolean): void,
-
- /**
- * Use `.toBeArray` when checking if a value is an `Array`.
- */
- toBeArray(): void,
-
- /**
- * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x.
- * @param {Number} x
- */
- toBeArrayOfSize(x: number): void,
-
- /**
- * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set.
- * @param {Array.<*>} members
- */
- toIncludeAllMembers(members: any[]): void,
-
- /**
- * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set.
- * @param {Array.<*>} members
- */
- toIncludeAnyMembers(members: any[]): void,
-
- /**
- * Use `.toSatisfyAll` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean` for all values in an array.
- * @param {Function} predicate
- */
- toSatisfyAll(predicate: (n: any) => boolean): void,
-
- /**
- * Use `.toBeBoolean` when checking if a value is a `Boolean`.
- */
- toBeBoolean(): void,
-
- /**
- * Use `.toBeTrue` when checking a value is equal (===) to `true`.
- */
- toBeTrue(): void,
-
- /**
- * Use `.toBeFalse` when checking a value is equal (===) to `false`.
- */
- toBeFalse(): void,
-
- /**
- * Use .toBeDate when checking if a value is a Date.
- */
- toBeDate(): void,
-
- /**
- * Use `.toBeFunction` when checking if a value is a `Function`.
- */
- toBeFunction(): void,
-
- /**
- * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`.
- *
- * Note: Required Jest version >22
- * Note: Your mock functions will have to be asynchronous to cause the timestamps inside of Jest to occur in a differentJS event loop, otherwise the mock timestamps will all be the same
- *
- * @param {Mock} mock
- */
- toHaveBeenCalledBefore(mock: JestMockFn): void,
-
- /**
- * Use `.toBeNumber` when checking if a value is a `Number`.
- */
- toBeNumber(): void,
-
- /**
- * Use `.toBeNaN` when checking a value is `NaN`.
- */
- toBeNaN(): void,
-
- /**
- * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`.
- */
- toBeFinite(): void,
-
- /**
- * Use `.toBePositive` when checking if a value is a positive `Number`.
- */
- toBePositive(): void,
-
- /**
- * Use `.toBeNegative` when checking if a value is a negative `Number`.
- */
- toBeNegative(): void,
-
- /**
- * Use `.toBeEven` when checking if a value is an even `Number`.
- */
- toBeEven(): void,
-
- /**
- * Use `.toBeOdd` when checking if a value is an odd `Number`.
- */
- toBeOdd(): void,
-
- /**
- * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive).
- *
- * @param {Number} start
- * @param {Number} end
- */
- toBeWithin(start: number, end: number): void,
-
- /**
- * Use `.toBeObject` when checking if a value is an `Object`.
- */
- toBeObject(): void,
-
- /**
- * Use `.toContainKey` when checking if an object contains the provided key.
- *
- * @param {String} key
- */
- toContainKey(key: string): void,
-
- /**
- * Use `.toContainKeys` when checking if an object has all of the provided keys.
- *
- * @param {Array.} keys
- */
- toContainKeys(keys: string[]): void,
-
- /**
- * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys.
- *
- * @param {Array.} keys
- */
- toContainAllKeys(keys: string[]): void,
-
- /**
- * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys.
- *
- * @param {Array.} keys
- */
- toContainAnyKeys(keys: string[]): void,
-
- /**
- * Use `.toContainValue` when checking if an object contains the provided value.
- *
- * @param {*} value
- */
- toContainValue(value: any): void,
-
- /**
- * Use `.toContainValues` when checking if an object contains all of the provided values.
- *
- * @param {Array.<*>} values
- */
- toContainValues(values: any[]): void,
-
- /**
- * Use `.toContainAllValues` when checking if an object only contains all of the provided values.
- *
- * @param {Array.<*>} values
- */
- toContainAllValues(values: any[]): void,
-
- /**
- * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values.
- *
- * @param {Array.<*>} values
- */
- toContainAnyValues(values: any[]): void,
-
- /**
- * Use `.toContainEntry` when checking if an object contains the provided entry.
- *
- * @param {Array.} entry
- */
- toContainEntry(entry: [string, string]): void,
-
- /**
- * Use `.toContainEntries` when checking if an object contains all of the provided entries.
- *
- * @param {Array.>} entries
- */
- toContainEntries(entries: [string, string][]): void,
-
- /**
- * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries.
- *
- * @param {Array.>} entries
- */
- toContainAllEntries(entries: [string, string][]): void,
-
- /**
- * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries.
- *
- * @param {Array.>} entries
- */
- toContainAnyEntries(entries: [string, string][]): void,
-
- /**
- * Use `.toBeExtensible` when checking if an object is extensible.
- */
- toBeExtensible(): void,
-
- /**
- * Use `.toBeFrozen` when checking if an object is frozen.
- */
- toBeFrozen(): void,
-
- /**
- * Use `.toBeSealed` when checking if an object is sealed.
- */
- toBeSealed(): void,
-
- /**
- * Use `.toBeString` when checking if a value is a `String`.
- */
- toBeString(): void,
-
- /**
- * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings.
- *
- * @param {String} string
- */
- toEqualCaseInsensitive(string: string): void,
-
- /**
- * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix.
- *
- * @param {String} prefix
- */
- toStartWith(prefix: string): void,
-
- /**
- * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix.
- *
- * @param {String} suffix
- */
- toEndWith(suffix: string): void,
-
- /**
- * Use `.toInclude` when checking if a `String` includes the given `String` substring.
- *
- * @param {String} substring
- */
- toInclude(substring: string): void,
-
- /**
- * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times.
- *
- * @param {String} substring
- * @param {Number} times
- */
- toIncludeRepeated(substring: string, times: number): void,
-
- /**
- * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings.
- *
- * @param {Array.} substring
- */
- toIncludeMultiple(substring: string[]): void
-}
-
-interface JestExpectType {
- not: JestExpectType &
- EnzymeMatchersType &
- DomTestingLibraryType &
- JestJQueryMatchersType &
- JestStyledComponentsMatchersType &
- JestExtendedMatchersType;
- /**
- * If you have a mock function, you can use .lastCalledWith to test what
- * arguments it was last called with.
- */
- lastCalledWith(...args: Array): void;
- /**
- * toBe just checks that a value is what you expect. It uses === to check
- * strict equality.
- */
- toBe(value: any): void;
- /**
- * Use .toBeCalledWith to ensure that a mock function was called with
- * specific arguments.
- */
- toBeCalledWith(...args: Array): void;
- /**
- * Using exact equality with floating point numbers is a bad idea. Rounding
- * means that intuitive things fail.
- */
- toBeCloseTo(num: number, delta: any): void;
- /**
- * Use .toBeDefined to check that a variable is not undefined.
- */
- toBeDefined(): void;
- /**
- * Use .toBeFalsy when you don't care what a value is, you just want to
- * ensure a value is false in a boolean context.
- */
- toBeFalsy(): void;
- /**
- * To compare floating point numbers, you can use toBeGreaterThan.
- */
- toBeGreaterThan(number: number): void;
- /**
- * To compare floating point numbers, you can use toBeGreaterThanOrEqual.
- */
- toBeGreaterThanOrEqual(number: number): void;
- /**
- * To compare floating point numbers, you can use toBeLessThan.
- */
- toBeLessThan(number: number): void;
- /**
- * To compare floating point numbers, you can use toBeLessThanOrEqual.
- */
- toBeLessThanOrEqual(number: number): void;
- /**
- * Use .toBeInstanceOf(Class) to check that an object is an instance of a
- * class.
- */
- toBeInstanceOf(cls: Class<*>): void;
- /**
- * .toBeNull() is the same as .toBe(null) but the error messages are a bit
- * nicer.
- */
- toBeNull(): void;
- /**
- * Use .toBeTruthy when you don't care what a value is, you just want to
- * ensure a value is true in a boolean context.
- */
- toBeTruthy(): void;
- /**
- * Use .toBeUndefined to check that a variable is undefined.
- */
- toBeUndefined(): void;
- /**
- * Use .toContain when you want to check that an item is in a list. For
- * testing the items in the list, this uses ===, a strict equality check.
- */
- toContain(item: any): void;
- /**
- * Use .toContainEqual when you want to check that an item is in a list. For
- * testing the items in the list, this matcher recursively checks the
- * equality of all fields, rather than checking for object identity.
- */
- toContainEqual(item: any): void;
- /**
- * Use .toEqual when you want to check that two objects have the same value.
- * This matcher recursively checks the equality of all fields, rather than
- * checking for object identity.
- */
- toEqual(value: any): void;
- /**
- * Use .toHaveBeenCalled to ensure that a mock function got called.
- */
- toHaveBeenCalled(): void;
- toBeCalled(): void;
- /**
- * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
- * number of times.
- */
- toHaveBeenCalledTimes(number: number): void;
- toBeCalledTimes(number: number): void;
- /**
- *
- */
- toHaveBeenNthCalledWith(nthCall: number, ...args: Array): void;
- nthCalledWith(nthCall: number, ...args: Array): void;
- /**
- *
- */
- toHaveReturned(): void;
- toReturn(): void;
- /**
- *
- */
- toHaveReturnedTimes(number: number): void;
- toReturnTimes(number: number): void;
- /**
- *
- */
- toHaveReturnedWith(value: any): void;
- toReturnWith(value: any): void;
- /**
- *
- */
- toHaveLastReturnedWith(value: any): void;
- lastReturnedWith(value: any): void;
- /**
- *
- */
- toHaveNthReturnedWith(nthCall: number, value: any): void;
- nthReturnedWith(nthCall: number, value: any): void;
- /**
- * Use .toHaveBeenCalledWith to ensure that a mock function was called with
- * specific arguments.
- */
- toHaveBeenCalledWith(...args: Array): void;
- toBeCalledWith(...args: Array): void;
- /**
- * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
- * with specific arguments.
- */
- toHaveBeenLastCalledWith(...args: Array): void;
- lastCalledWith(...args: Array): void;
- /**
- * Check that an object has a .length property and it is set to a certain
- * numeric value.
- */
- toHaveLength(number: number): void;
- /**
- *
- */
- toHaveProperty(propPath: string, value?: any): void;
- /**
- * Use .toMatch to check that a string matches a regular expression or string.
- */
- toMatch(regexpOrString: RegExp | string): void;
- /**
- * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
- */
- toMatchObject(object: Object | Array): void;
- /**
- * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object.
- */
- toStrictEqual(value: any): void;
- /**
- * This ensures that an Object matches the most recent snapshot.
- */
- toMatchSnapshot(propertyMatchers?: any, name?: string): void;
- /**
- * This ensures that an Object matches the most recent snapshot.
- */
- toMatchSnapshot(name: string): void;
-
- toMatchInlineSnapshot(snapshot?: string): void;
- toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void;
- /**
- * Use .toThrow to test that a function throws when it is called.
- * If you want to test that a specific error gets thrown, you can provide an
- * argument to toThrow. The argument can be a string for the error message,
- * a class for the error, or a regex that should match the error.
- *
- * Alias: .toThrowError
- */
- toThrow(message?: string | Error | Class | RegExp): void;
- toThrowError(message?: string | Error | Class | RegExp): void;
- /**
- * Use .toThrowErrorMatchingSnapshot to test that a function throws a error
- * matching the most recent snapshot when it is called.
- */
- toThrowErrorMatchingSnapshot(): void;
- toThrowErrorMatchingInlineSnapshot(snapshot?: string): void;
-}
-
-type JestObjectType = {
- /**
- * Disables automatic mocking in the module loader.
- *
- * After this method is called, all `require()`s will return the real
- * versions of each module (rather than a mocked version).
- */
- disableAutomock(): JestObjectType,
- /**
- * An un-hoisted version of disableAutomock
- */
- autoMockOff(): JestObjectType,
- /**
- * Enables automatic mocking in the module loader.
- */
- enableAutomock(): JestObjectType,
- /**
- * An un-hoisted version of enableAutomock
- */
- autoMockOn(): JestObjectType,
- /**
- * Clears the mock.calls and mock.instances properties of all mocks.
- * Equivalent to calling .mockClear() on every mocked function.
- */
- clearAllMocks(): JestObjectType,
- /**
- * Resets the state of all mocks. Equivalent to calling .mockReset() on every
- * mocked function.
- */
- resetAllMocks(): JestObjectType,
- /**
- * Restores all mocks back to their original value.
- */
- restoreAllMocks(): JestObjectType,
- /**
- * Removes any pending timers from the timer system.
- */
- clearAllTimers(): void,
- /**
- * The same as `mock` but not moved to the top of the expectation by
- * babel-jest.
- */
- doMock(moduleName: string, moduleFactory?: any): JestObjectType,
- /**
- * The same as `unmock` but not moved to the top of the expectation by
- * babel-jest.
- */
- dontMock(moduleName: string): JestObjectType,
- /**
- * Returns a new, unused mock function. Optionally takes a mock
- * implementation.
- */
- fn, TReturn>(
- implementation?: (...args: TArguments) => TReturn
- ): JestMockFn,
- /**
- * Determines if the given function is a mocked function.
- */
- isMockFunction(fn: Function): boolean,
- /**
- * Given the name of a module, use the automatic mocking system to generate a
- * mocked version of the module for you.
- */
- genMockFromModule(moduleName: string): any,
- /**
- * Mocks a module with an auto-mocked version when it is being required.
- *
- * The second argument can be used to specify an explicit module factory that
- * is being run instead of using Jest's automocking feature.
- *
- * The third argument can be used to create virtual mocks -- mocks of modules
- * that don't exist anywhere in the system.
- */
- mock(
- moduleName: string,
- moduleFactory?: any,
- options?: Object
- ): JestObjectType,
- /**
- * Returns the actual module instead of a mock, bypassing all checks on
- * whether the module should receive a mock implementation or not.
- */
- requireActual(moduleName: string): any,
- /**
- * Returns a mock module instead of the actual module, bypassing all checks
- * on whether the module should be required normally or not.
- */
- requireMock(moduleName: string): any,
- /**
- * Resets the module registry - the cache of all required modules. This is
- * useful to isolate modules where local state might conflict between tests.
- */
- resetModules(): JestObjectType,
- /**
- * Exhausts the micro-task queue (usually interfaced in node via
- * process.nextTick).
- */
- runAllTicks(): void,
- /**
- * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
- * setInterval(), and setImmediate()).
- */
- runAllTimers(): void,
- /**
- * Exhausts all tasks queued by setImmediate().
- */
- runAllImmediates(): void,
- /**
- * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
- * or setInterval() and setImmediate()).
- */
- advanceTimersByTime(msToRun: number): void,
- /**
- * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
- * or setInterval() and setImmediate()).
- *
- * Renamed to `advanceTimersByTime`.
- */
- runTimersToTime(msToRun: number): void,
- /**
- * Executes only the macro-tasks that are currently pending (i.e., only the
- * tasks that have been queued by setTimeout() or setInterval() up to this
- * point)
- */
- runOnlyPendingTimers(): void,
- /**
- * Explicitly supplies the mock object that the module system should return
- * for the specified module. Note: It is recommended to use jest.mock()
- * instead.
- */
- setMock(moduleName: string, moduleExports: any): JestObjectType,
- /**
- * Indicates that the module system should never return a mocked version of
- * the specified module from require() (e.g. that it should always return the
- * real module).
- */
- unmock(moduleName: string): JestObjectType,
- /**
- * Instructs Jest to use fake versions of the standard timer functions
- * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
- * setImmediate and clearImmediate).
- */
- useFakeTimers(): JestObjectType,
- /**
- * Instructs Jest to use the real versions of the standard timer functions.
- */
- useRealTimers(): JestObjectType,
- /**
- * Creates a mock function similar to jest.fn but also tracks calls to
- * object[methodName].
- */
- spyOn(
- object: Object,
- methodName: string,
- accessType?: 'get' | 'set'
- ): JestMockFn,
- /**
- * Set the default timeout interval for tests and before/after hooks in milliseconds.
- * Note: The default timeout interval is 5 seconds if this method is not called.
- */
- setTimeout(timeout: number): JestObjectType
-}
-
-type JestSpyType = {
- calls: JestCallsType
-}
-
-/** Runs this function after every test inside this context */
-declare function afterEach(
- fn: (done: () => void) => ?Promise,
- timeout?: number
-): void
-/** Runs this function before every test inside this context */
-declare function beforeEach(
- fn: (done: () => void) => ?Promise,
- timeout?: number
-): void
-/** Runs this function after all tests have finished inside this context */
-declare function afterAll(
- fn: (done: () => void) => ?Promise,
- timeout?: number
-): void
-/** Runs this function before any tests have started inside this context */
-declare function beforeAll(
- fn: (done: () => void) => ?Promise,
- timeout?: number
-): void
-
-/** A context for grouping tests together */
-declare var describe: {
- /**
- * Creates a block that groups together several related tests in one "test suite"
- */
- (name: JestTestName, fn: () => void): void,
-
- /**
- * Only run this describe block
- */
- only(name: JestTestName, fn: () => void): void,
-
- /**
- * Skip running this describe block
- */
- skip(name: JestTestName, fn: () => void): void,
-
- /**
- * each runs this test against array of argument arrays per each run
- *
- * @param {table} table of Test
- */
- each(
- ...table: Array | mixed> | [Array, string]
- ): (
- name: JestTestName,
- fn?: (...args: Array) => ?Promise,
- timeout?: number
- ) => void
-}
-
-/** An individual test unit */
-declare var it: {
- /**
- * An individual test unit
- *
- * @param {JestTestName} Name of Test
- * @param {Function} Test
- * @param {number} Timeout for the test, in milliseconds.
- */
- (
- name: JestTestName,
- fn?: (done: () => void) => ?Promise,
- timeout?: number
- ): void,
-
- /**
- * Only run this test
- *
- * @param {JestTestName} Name of Test
- * @param {Function} Test
- * @param {number} Timeout for the test, in milliseconds.
- */
- only(
- name: JestTestName,
- fn?: (done: () => void) => ?Promise,
- timeout?: number
- ): {
- each(
- ...table: Array | mixed> | [Array, string]
- ): (
- name: JestTestName,
- fn?: (...args: Array) => ?Promise,
- timeout?: number
- ) => void
- },
-
- /**
- * Skip running this test
- *
- * @param {JestTestName} Name of Test
- * @param {Function} Test
- * @param {number} Timeout for the test, in milliseconds.
- */
- skip(
- name: JestTestName,
- fn?: (done: () => void) => ?Promise,
- timeout?: number
- ): void,
-
- /**
- * Run the test concurrently
- *
- * @param {JestTestName} Name of Test
- * @param {Function} Test
- * @param {number} Timeout for the test, in milliseconds.
- */
- concurrent(
- name: JestTestName,
- fn?: (done: () => void) => ?Promise,
- timeout?: number
- ): void,
-
- /**
- * each runs this test against array of argument arrays per each run
- *
- * @param {table} table of Test
- */
- each(
- ...table: Array | mixed> | [Array, string]
- ): (
- name: JestTestName,
- fn?: (...args: Array) => ?Promise,
- timeout?: number
- ) => void
-}
-
-declare function fit(
- name: JestTestName,
- fn: (done: () => void) => ?Promise,
- timeout?: number
-): void
-/** An individual test unit */
-declare var test: typeof it
-/** A disabled group of tests */
-declare var xdescribe: typeof describe
-/** A focused group of tests */
-declare var fdescribe: typeof describe
-/** A disabled individual test */
-declare var xit: typeof it
-/** A disabled individual test */
-declare var xtest: typeof it
-
-type JestPrettyFormatColors = {
- comment: { close: string, open: string },
- content: { close: string, open: string },
- prop: { close: string, open: string },
- tag: { close: string, open: string },
- value: { close: string, open: string }
-}
-
-type JestPrettyFormatIndent = string => string
-type JestPrettyFormatRefs = Array
-type JestPrettyFormatPrint = any => string
-type JestPrettyFormatStringOrNull = string | null
-
-type JestPrettyFormatOptions = {|
- callToJSON: boolean,
- edgeSpacing: string,
- escapeRegex: boolean,
- highlight: boolean,
- indent: number,
- maxDepth: number,
- min: boolean,
- plugins: JestPrettyFormatPlugins,
- printFunctionName: boolean,
- spacing: string,
- theme: {|
- comment: string,
- content: string,
- prop: string,
- tag: string,
- value: string
- |}
-|}
-
-type JestPrettyFormatPlugin = {
- print: (
- val: any,
- serialize: JestPrettyFormatPrint,
- indent: JestPrettyFormatIndent,
- opts: JestPrettyFormatOptions,
- colors: JestPrettyFormatColors
- ) => string,
- test: any => boolean
-}
-
-type JestPrettyFormatPlugins = Array
-
-/** The expect function is used every time you want to test a value */
-declare var expect: {
- /** The object that you want to make assertions against */
- (
- value: any
- ): JestExpectType &
- JestPromiseType &
- EnzymeMatchersType &
- DomTestingLibraryType &
- JestJQueryMatchersType &
- JestStyledComponentsMatchersType &
- JestExtendedMatchersType,
-
- /** Add additional Jasmine matchers to Jest's roster */
- extend(matchers: { [name: string]: JestMatcher }): void,
- /** Add a module that formats application-specific data structures. */
- addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,
- assertions(expectedAssertions: number): void,
- hasAssertions(): void,
- any(value: mixed): JestAsymmetricEqualityType,
- anything(): any,
- arrayContaining(value: Array): Array,
- objectContaining(value: Object): Object,
- /** Matches any received string that contains the exact expected string. */
- stringContaining(value: string): string,
- stringMatching(value: string | RegExp): string,
- not: {
- arrayContaining: (value: $ReadOnlyArray) => Array,
- objectContaining: (value: {}) => Object,
- stringContaining: (value: string) => string,
- stringMatching: (value: string | RegExp) => string
- }
-}
-
-// TODO handle return type
-// http://jasmine.github.io/2.4/introduction.html#section-Spies
-declare function spyOn(value: mixed, method: string): Object
-
-/** Holds all functions related to manipulating test runner */
-declare var jest: JestObjectType
-
-/**
- * The global Jasmine object, this is generally not exposed as the public API,
- * using features inside here could break in later versions of Jest.
- */
-declare var jasmine: {
- DEFAULT_TIMEOUT_INTERVAL: number,
- any(value: mixed): JestAsymmetricEqualityType,
- anything(): any,
- arrayContaining(value: Array): Array,
- clock(): JestClockType,
- createSpy(name: string): JestSpyType,
- createSpyObj(
- baseName: string,
- methodNames: Array
- ): { [methodName: string]: JestSpyType },
- objectContaining(value: Object): Object,
- stringMatching(value: string): string
-}
diff --git a/flow-typed/npm/jest_v25.x.x.js b/flow-typed/npm/jest_v25.x.x.js
new file mode 100644
index 000000000..84fb20228
--- /dev/null
+++ b/flow-typed/npm/jest_v25.x.x.js
@@ -0,0 +1,1206 @@
+// flow-typed signature: a0fbdb22ab391eceafc1d5643528e257
+// flow-typed version: dd2428a21d/jest_v25.x.x/flow_>=v0.104.x
+
+type JestMockFn, TReturn> = {
+ (...args: TArguments): TReturn,
+ /**
+ * An object for introspecting mock calls
+ */
+ mock: {
+ /**
+ * An array that represents all calls that have been made into this mock
+ * function. Each call is represented by an array of arguments that were
+ * passed during the call.
+ */
+ calls: Array,
+ /**
+ * An array that contains all the object instances that have been
+ * instantiated from this mock function.
+ */
+ instances: Array,
+ /**
+ * An array that contains all the object results that have been
+ * returned by this mock function call
+ */
+ results: Array<{
+ isThrow: boolean,
+ value: TReturn,
+ ...
+ }>,
+ ...
+ },
+ /**
+ * Resets all information stored in the mockFn.mock.calls and
+ * mockFn.mock.instances arrays. Often this is useful when you want to clean
+ * up a mock's usage data between two assertions.
+ */
+ mockClear(): void,
+ /**
+ * Resets all information stored in the mock. This is useful when you want to
+ * completely restore a mock back to its initial state.
+ */
+ mockReset(): void,
+ /**
+ * Removes the mock and restores the initial implementation. This is useful
+ * when you want to mock functions in certain test cases and restore the
+ * original implementation in others. Beware that mockFn.mockRestore only
+ * works when mock was created with jest.spyOn. Thus you have to take care of
+ * restoration yourself when manually assigning jest.fn().
+ */
+ mockRestore(): void,
+ /**
+ * Accepts a function that should be used as the implementation of the mock.
+ * The mock itself will still record all calls that go into and instances
+ * that come from itself -- the only difference is that the implementation
+ * will also be executed when the mock is called.
+ */
+ mockImplementation(
+ fn: (...args: TArguments) => TReturn
+ ): JestMockFn,
+ /**
+ * Accepts a function that will be used as an implementation of the mock for
+ * one call to the mocked function. Can be chained so that multiple function
+ * calls produce different results.
+ */
+ mockImplementationOnce(
+ fn: (...args: TArguments) => TReturn
+ ): JestMockFn,
+ /**
+ * Accepts a string to use in test result output in place of "jest.fn()" to
+ * indicate which mock function is being referenced.
+ */
+ mockName(name: string): JestMockFn,
+ /**
+ * Just a simple sugar function for returning `this`
+ */
+ mockReturnThis(): void,
+ /**
+ * Accepts a value that will be returned whenever the mock function is called.
+ */
+ mockReturnValue(value: TReturn): JestMockFn,
+ /**
+ * Sugar for only returning a value once inside your mock
+ */
+ mockReturnValueOnce(value: TReturn): JestMockFn,
+ /**
+ * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value))
+ */
+ mockResolvedValue(value: TReturn): JestMockFn>,
+ /**
+ * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value))
+ */
+ mockResolvedValueOnce(
+ value: TReturn
+ ): JestMockFn>,
+ /**
+ * Sugar for jest.fn().mockImplementation(() => Promise.reject(value))
+ */
+ mockRejectedValue(value: TReturn): JestMockFn>,
+ /**
+ * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value))
+ */
+ mockRejectedValueOnce(value: TReturn): JestMockFn>,
+ ...
+};
+
+type JestAsymmetricEqualityType = { /**
+ * A custom Jasmine equality tester
+ */
+asymmetricMatch(value: mixed): boolean, ... };
+
+type JestCallsType = {
+ allArgs(): mixed,
+ all(): mixed,
+ any(): boolean,
+ count(): number,
+ first(): mixed,
+ mostRecent(): mixed,
+ reset(): void,
+ ...
+};
+
+type JestClockType = {
+ install(): void,
+ mockDate(date: Date): void,
+ tick(milliseconds?: number): void,
+ uninstall(): void,
+ ...
+};
+
+type JestMatcherResult = {
+ message?: string | (() => string),
+ pass: boolean,
+ ...
+};
+
+type JestMatcher = (
+ received: any,
+ ...actual: Array
+) => JestMatcherResult | Promise;
+
+type JestPromiseType = {
+ /**
+ * Use rejects to unwrap the reason of a rejected promise so any other
+ * matcher can be chained. If the promise is fulfilled the assertion fails.
+ */
+ rejects: JestExpectType,
+ /**
+ * Use resolves to unwrap the value of a fulfilled promise so any other
+ * matcher can be chained. If the promise is rejected the assertion fails.
+ */
+ resolves: JestExpectType,
+ ...
+};
+
+/**
+ * Jest allows functions and classes to be used as test names in test() and
+ * describe()
+ */
+type JestTestName = string | Function;
+
+/**
+ * Plugin: jest-styled-components
+ */
+
+type JestStyledComponentsMatcherValue =
+ | string
+ | JestAsymmetricEqualityType
+ | RegExp
+ | typeof undefined;
+
+type JestStyledComponentsMatcherOptions = {
+ media?: string,
+ modifier?: string,
+ supports?: string,
+ ...
+};
+
+type JestStyledComponentsMatchersType = { toHaveStyleRule(
+ property: string,
+ value: JestStyledComponentsMatcherValue,
+ options?: JestStyledComponentsMatcherOptions
+): void, ... };
+
+/**
+ * Plugin: jest-enzyme
+ */
+type EnzymeMatchersType = {
+ // 5.x
+ toBeEmpty(): void,
+ toBePresent(): void,
+ // 6.x
+ toBeChecked(): void,
+ toBeDisabled(): void,
+ toBeEmptyRender(): void,
+ toContainMatchingElement(selector: string): void,
+ toContainMatchingElements(n: number, selector: string): void,
+ toContainExactlyOneMatchingElement(selector: string): void,
+ toContainReact(element: React$Element): void,
+ toExist(): void,
+ toHaveClassName(className: string): void,
+ toHaveHTML(html: string): void,
+ toHaveProp: ((propKey: string, propValue?: any) => void) &
+ ((props: {...}) => void),
+ toHaveRef(refName: string): void,
+ toHaveState: ((stateKey: string, stateValue?: any) => void) &
+ ((state: {...}) => void),
+ toHaveStyle: ((styleKey: string, styleValue?: any) => void) &
+ ((style: {...}) => void),
+ toHaveTagName(tagName: string): void,
+ toHaveText(text: string): void,
+ toHaveValue(value: any): void,
+ toIncludeText(text: string): void,
+ toMatchElement(
+ element: React$Element,
+ options?: {| ignoreProps?: boolean, verbose?: boolean |}
+ ): void,
+ toMatchSelector(selector: string): void,
+ // 7.x
+ toHaveDisplayName(name: string): void,
+ ...
+};
+
+// DOM testing library extensions (jest-dom)
+// https://github.com/testing-library/jest-dom
+type DomTestingLibraryType = {
+ /**
+ * @deprecated
+ */
+ toBeInTheDOM(container?: HTMLElement): void,
+ toBeInTheDocument(): void,
+ toBeVisible(): void,
+ toBeEmpty(): void,
+ toBeDisabled(): void,
+ toBeEnabled(): void,
+ toBeInvalid(): void,
+ toBeRequired(): void,
+ toBeValid(): void,
+ toContainElement(element: HTMLElement | null): void,
+ toContainHTML(htmlText: string): void,
+ toHaveAttribute(attr: string, value?: any): void,
+ toHaveClass(...classNames: string[]): void,
+ toHaveFocus(): void,
+ toHaveFormValues(expectedValues: { [name: string]: any, ... }): void,
+ toHaveStyle(css: string): void,
+ toHaveTextContent(
+ text: string | RegExp,
+ options?: { normalizeWhitespace: boolean, ... }
+ ): void,
+ toHaveValue(value?: string | string[] | number): void,
+ ...
+};
+
+// Jest JQuery Matchers: https://github.com/unindented/custom-jquery-matchers
+type JestJQueryMatchersType = {
+ toExist(): void,
+ toHaveLength(len: number): void,
+ toHaveId(id: string): void,
+ toHaveClass(className: string): void,
+ toHaveTag(tag: string): void,
+ toHaveAttr(key: string, val?: any): void,
+ toHaveProp(key: string, val?: any): void,
+ toHaveText(text: string | RegExp): void,
+ toHaveData(key: string, val?: any): void,
+ toHaveValue(val: any): void,
+ toHaveCss(css: { [key: string]: any, ... }): void,
+ toBeChecked(): void,
+ toBeDisabled(): void,
+ toBeEmpty(): void,
+ toBeHidden(): void,
+ toBeSelected(): void,
+ toBeVisible(): void,
+ toBeFocused(): void,
+ toBeInDom(): void,
+ toBeMatchedBy(sel: string): void,
+ toHaveDescendant(sel: string): void,
+ toHaveDescendantWithText(sel: string, text: string | RegExp): void,
+ ...
+};
+
+// Jest Extended Matchers: https://github.com/jest-community/jest-extended
+type JestExtendedMatchersType = {
+ /**
+ * Note: Currently unimplemented
+ * Passing assertion
+ *
+ * @param {String} message
+ */
+ // pass(message: string): void;
+
+ /**
+ * Note: Currently unimplemented
+ * Failing assertion
+ *
+ * @param {String} message
+ */
+ // fail(message: string): void;
+
+ /**
+ * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty.
+ */
+ toBeEmpty(): void,
+ /**
+ * Use .toBeOneOf when checking if a value is a member of a given Array.
+ * @param {Array.<*>} members
+ */
+ toBeOneOf(members: any[]): void,
+ /**
+ * Use `.toBeNil` when checking a value is `null` or `undefined`.
+ */
+ toBeNil(): void,
+ /**
+ * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`.
+ * @param {Function} predicate
+ */
+ toSatisfy(predicate: (n: any) => boolean): void,
+ /**
+ * Use `.toBeArray` when checking if a value is an `Array`.
+ */
+ toBeArray(): void,
+ /**
+ * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x.
+ * @param {Number} x
+ */
+ toBeArrayOfSize(x: number): void,
+ /**
+ * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set.
+ * @param {Array.<*>} members
+ */
+ toIncludeAllMembers(members: any[]): void,
+ /**
+ * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set.
+ * @param {Array.<*>} members
+ */
+ toIncludeAnyMembers(members: any[]): void,
+ /**
+ * Use `.toSatisfyAll` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean` for all values in an array.
+ * @param {Function} predicate
+ */
+ toSatisfyAll(predicate: (n: any) => boolean): void,
+ /**
+ * Use `.toBeBoolean` when checking if a value is a `Boolean`.
+ */
+ toBeBoolean(): void,
+ /**
+ * Use `.toBeTrue` when checking a value is equal (===) to `true`.
+ */
+ toBeTrue(): void,
+ /**
+ * Use `.toBeFalse` when checking a value is equal (===) to `false`.
+ */
+ toBeFalse(): void,
+ /**
+ * Use .toBeDate when checking if a value is a Date.
+ */
+ toBeDate(): void,
+ /**
+ * Use `.toBeFunction` when checking if a value is a `Function`.
+ */
+ toBeFunction(): void,
+ /**
+ * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`.
+ *
+ * Note: Required Jest version >22
+ * Note: Your mock functions will have to be asynchronous to cause the timestamps inside of Jest to occur in a differentJS event loop, otherwise the mock timestamps will all be the same
+ *
+ * @param {Mock} mock
+ */
+ toHaveBeenCalledBefore(mock: JestMockFn): void,
+ /**
+ * Use `.toBeNumber` when checking if a value is a `Number`.
+ */
+ toBeNumber(): void,
+ /**
+ * Use `.toBeNaN` when checking a value is `NaN`.
+ */
+ toBeNaN(): void,
+ /**
+ * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`.
+ */
+ toBeFinite(): void,
+ /**
+ * Use `.toBePositive` when checking if a value is a positive `Number`.
+ */
+ toBePositive(): void,
+ /**
+ * Use `.toBeNegative` when checking if a value is a negative `Number`.
+ */
+ toBeNegative(): void,
+ /**
+ * Use `.toBeEven` when checking if a value is an even `Number`.
+ */
+ toBeEven(): void,
+ /**
+ * Use `.toBeOdd` when checking if a value is an odd `Number`.
+ */
+ toBeOdd(): void,
+ /**
+ * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive).
+ *
+ * @param {Number} start
+ * @param {Number} end
+ */
+ toBeWithin(start: number, end: number): void,
+ /**
+ * Use `.toBeObject` when checking if a value is an `Object`.
+ */
+ toBeObject(): void,
+ /**
+ * Use `.toContainKey` when checking if an object contains the provided key.
+ *
+ * @param {String} key
+ */
+ toContainKey(key: string): void,
+ /**
+ * Use `.toContainKeys` when checking if an object has all of the provided keys.
+ *
+ * @param {Array.} keys
+ */
+ toContainKeys(keys: string[]): void,
+ /**
+ * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys.
+ *
+ * @param {Array.} keys
+ */
+ toContainAllKeys(keys: string[]): void,
+ /**
+ * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys.
+ *
+ * @param {Array.} keys
+ */
+ toContainAnyKeys(keys: string[]): void,
+ /**
+ * Use `.toContainValue` when checking if an object contains the provided value.
+ *
+ * @param {*} value
+ */
+ toContainValue(value: any): void,
+ /**
+ * Use `.toContainValues` when checking if an object contains all of the provided values.
+ *
+ * @param {Array.<*>} values
+ */
+ toContainValues(values: any[]): void,
+ /**
+ * Use `.toContainAllValues` when checking if an object only contains all of the provided values.
+ *
+ * @param {Array.<*>} values
+ */
+ toContainAllValues(values: any[]): void,
+ /**
+ * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values.
+ *
+ * @param {Array.<*>} values
+ */
+ toContainAnyValues(values: any[]): void,
+ /**
+ * Use `.toContainEntry` when checking if an object contains the provided entry.
+ *
+ * @param {Array.} entry
+ */
+ toContainEntry(entry: [string, string]): void,
+ /**
+ * Use `.toContainEntries` when checking if an object contains all of the provided entries.
+ *
+ * @param {Array.>} entries
+ */
+ toContainEntries(entries: [string, string][]): void,
+ /**
+ * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries.
+ *
+ * @param {Array.>} entries
+ */
+ toContainAllEntries(entries: [string, string][]): void,
+ /**
+ * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries.
+ *
+ * @param {Array.>} entries
+ */
+ toContainAnyEntries(entries: [string, string][]): void,
+ /**
+ * Use `.toBeExtensible` when checking if an object is extensible.
+ */
+ toBeExtensible(): void,
+ /**
+ * Use `.toBeFrozen` when checking if an object is frozen.
+ */
+ toBeFrozen(): void,
+ /**
+ * Use `.toBeSealed` when checking if an object is sealed.
+ */
+ toBeSealed(): void,
+ /**
+ * Use `.toBeString` when checking if a value is a `String`.
+ */
+ toBeString(): void,
+ /**
+ * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings.
+ *
+ * @param {String} string
+ */
+ toEqualCaseInsensitive(string: string): void,
+ /**
+ * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix.
+ *
+ * @param {String} prefix
+ */
+ toStartWith(prefix: string): void,
+ /**
+ * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix.
+ *
+ * @param {String} suffix
+ */
+ toEndWith(suffix: string): void,
+ /**
+ * Use `.toInclude` when checking if a `String` includes the given `String` substring.
+ *
+ * @param {String} substring
+ */
+ toInclude(substring: string): void,
+ /**
+ * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times.
+ *
+ * @param {String} substring
+ * @param {Number} times
+ */
+ toIncludeRepeated(substring: string, times: number): void,
+ /**
+ * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings.
+ *
+ * @param {Array.} substring
+ */
+ toIncludeMultiple(substring: string[]): void,
+ ...
+};
+
+// Diffing snapshot utility for Jest (snapshot-diff)
+// https://github.com/jest-community/snapshot-diff
+type SnapshotDiffType = {
+ /**
+ * Compare the difference between the actual in the `expect()`
+ * vs the object inside `valueB` with some extra options.
+ */
+ toMatchDiffSnapshot(
+ valueB: any,
+ options?: {|
+ expand?: boolean;
+ colors?: boolean;
+ contextLines?: number;
+ stablePatchmarks?: boolean;
+ aAnnotation?: string;
+ bAnnotation?: string;
+ |},
+ testName?: string
+ ): void,
+ ...
+}
+
+interface JestExpectType {
+ not: JestExpectType &
+ EnzymeMatchersType &
+ DomTestingLibraryType &
+ JestJQueryMatchersType &
+ JestStyledComponentsMatchersType &
+ JestExtendedMatchersType &
+ SnapshotDiffType;
+ /**
+ * If you have a mock function, you can use .lastCalledWith to test what
+ * arguments it was last called with.
+ */
+ lastCalledWith(...args: Array): void;
+ /**
+ * toBe just checks that a value is what you expect. It uses === to check
+ * strict equality.
+ */
+ toBe(value: any): void;
+ /**
+ * Use .toBeCalledWith to ensure that a mock function was called with
+ * specific arguments.
+ */
+ toBeCalledWith(...args: Array): void;
+ /**
+ * Using exact equality with floating point numbers is a bad idea. Rounding
+ * means that intuitive things fail.
+ */
+ toBeCloseTo(num: number, delta: any): void;
+ /**
+ * Use .toBeDefined to check that a variable is not undefined.
+ */
+ toBeDefined(): void;
+ /**
+ * Use .toBeFalsy when you don't care what a value is, you just want to
+ * ensure a value is false in a boolean context.
+ */
+ toBeFalsy(): void;
+ /**
+ * To compare floating point numbers, you can use toBeGreaterThan.
+ */
+ toBeGreaterThan(number: number): void;
+ /**
+ * To compare floating point numbers, you can use toBeGreaterThanOrEqual.
+ */
+ toBeGreaterThanOrEqual(number: number): void;
+ /**
+ * To compare floating point numbers, you can use toBeLessThan.
+ */
+ toBeLessThan(number: number): void;
+ /**
+ * To compare floating point numbers, you can use toBeLessThanOrEqual.
+ */
+ toBeLessThanOrEqual(number: number): void;
+ /**
+ * Use .toBeInstanceOf(Class) to check that an object is an instance of a
+ * class.
+ */
+ toBeInstanceOf(cls: Class<*>): void;
+ /**
+ * .toBeNull() is the same as .toBe(null) but the error messages are a bit
+ * nicer.
+ */
+ toBeNull(): void;
+ /**
+ * Use .toBeTruthy when you don't care what a value is, you just want to
+ * ensure a value is true in a boolean context.
+ */
+ toBeTruthy(): void;
+ /**
+ * Use .toBeUndefined to check that a variable is undefined.
+ */
+ toBeUndefined(): void;
+ /**
+ * Use .toContain when you want to check that an item is in a list. For
+ * testing the items in the list, this uses ===, a strict equality check.
+ */
+ toContain(item: any): void;
+ /**
+ * Use .toContainEqual when you want to check that an item is in a list. For
+ * testing the items in the list, this matcher recursively checks the
+ * equality of all fields, rather than checking for object identity.
+ */
+ toContainEqual(item: any): void;
+ /**
+ * Use .toEqual when you want to check that two objects have the same value.
+ * This matcher recursively checks the equality of all fields, rather than
+ * checking for object identity.
+ */
+ toEqual(value: any): void;
+ /**
+ * Use .toHaveBeenCalled to ensure that a mock function got called.
+ */
+ toHaveBeenCalled(): void;
+ toBeCalled(): void;
+ /**
+ * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact
+ * number of times.
+ */
+ toHaveBeenCalledTimes(number: number): void;
+ toBeCalledTimes(number: number): void;
+ /**
+ *
+ */
+ toHaveBeenNthCalledWith(nthCall: number, ...args: Array): void;
+ nthCalledWith(nthCall: number, ...args: Array): void;
+ /**
+ *
+ */
+ toHaveReturned(): void;
+ toReturn(): void;
+ /**
+ *
+ */
+ toHaveReturnedTimes(number: number): void;
+ toReturnTimes(number: number): void;
+ /**
+ *
+ */
+ toHaveReturnedWith(value: any): void;
+ toReturnWith(value: any): void;
+ /**
+ *
+ */
+ toHaveLastReturnedWith(value: any): void;
+ lastReturnedWith(value: any): void;
+ /**
+ *
+ */
+ toHaveNthReturnedWith(nthCall: number, value: any): void;
+ nthReturnedWith(nthCall: number, value: any): void;
+ /**
+ * Use .toHaveBeenCalledWith to ensure that a mock function was called with
+ * specific arguments.
+ */
+ toHaveBeenCalledWith(...args: Array): void;
+ toBeCalledWith(...args: Array): void;
+ /**
+ * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called
+ * with specific arguments.
+ */
+ toHaveBeenLastCalledWith(...args: Array): void;
+ lastCalledWith(...args: Array): void;
+ /**
+ * Check that an object has a .length property and it is set to a certain
+ * numeric value.
+ */
+ toHaveLength(number: number): void;
+ /**
+ *
+ */
+ toHaveProperty(propPath: string | $ReadOnlyArray, value?: any): void;
+ /**
+ * Use .toMatch to check that a string matches a regular expression or string.
+ */
+ toMatch(regexpOrString: RegExp | string): void;
+ /**
+ * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object.
+ */
+ toMatchObject(object: Object | Array): void;
+ /**
+ * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object.
+ */
+ toStrictEqual(value: any): void;
+ /**
+ * This ensures that an Object matches the most recent snapshot.
+ */
+ toMatchSnapshot(propertyMatchers?: any, name?: string): void;
+ /**
+ * This ensures that an Object matches the most recent snapshot.
+ */
+ toMatchSnapshot(name: string): void;
+
+ toMatchInlineSnapshot(snapshot?: string): void;
+ toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void;
+ /**
+ * Use .toThrow to test that a function throws when it is called.
+ * If you want to test that a specific error gets thrown, you can provide an
+ * argument to toThrow. The argument can be a string for the error message,
+ * a class for the error, or a regex that should match the error.
+ *
+ * Alias: .toThrowError
+ */
+ toThrow(message?: string | Error | Class | RegExp): void;
+ toThrowError(message?: string | Error | Class | RegExp): void;
+ /**
+ * Use .toThrowErrorMatchingSnapshot to test that a function throws a error
+ * matching the most recent snapshot when it is called.
+ */
+ toThrowErrorMatchingSnapshot(): void;
+ toThrowErrorMatchingInlineSnapshot(snapshot?: string): void;
+}
+
+type JestObjectType = {
+ /**
+ * Disables automatic mocking in the module loader.
+ *
+ * After this method is called, all `require()`s will return the real
+ * versions of each module (rather than a mocked version).
+ */
+ disableAutomock(): JestObjectType,
+ /**
+ * An un-hoisted version of disableAutomock
+ */
+ autoMockOff(): JestObjectType,
+ /**
+ * Enables automatic mocking in the module loader.
+ */
+ enableAutomock(): JestObjectType,
+ /**
+ * An un-hoisted version of enableAutomock
+ */
+ autoMockOn(): JestObjectType,
+ /**
+ * Clears the mock.calls and mock.instances properties of all mocks.
+ * Equivalent to calling .mockClear() on every mocked function.
+ */
+ clearAllMocks(): JestObjectType,
+ /**
+ * Resets the state of all mocks. Equivalent to calling .mockReset() on every
+ * mocked function.
+ */
+ resetAllMocks(): JestObjectType,
+ /**
+ * Restores all mocks back to their original value.
+ */
+ restoreAllMocks(): JestObjectType,
+ /**
+ * Removes any pending timers from the timer system.
+ */
+ clearAllTimers(): void,
+ /**
+ * Returns the number of fake timers still left to run.
+ */
+ getTimerCount(): number,
+ /**
+ * The same as `mock` but not moved to the top of the expectation by
+ * babel-jest.
+ */
+ doMock(moduleName: string, moduleFactory?: any): JestObjectType,
+ /**
+ * The same as `unmock` but not moved to the top of the expectation by
+ * babel-jest.
+ */
+ dontMock(moduleName: string): JestObjectType,
+ /**
+ * Returns a new, unused mock function. Optionally takes a mock
+ * implementation.
+ */
+ fn, TReturn>(
+ implementation?: (...args: TArguments) => TReturn
+ ): JestMockFn,
+ /**
+ * Determines if the given function is a mocked function.
+ */
+ isMockFunction(fn: Function): boolean,
+ /**
+ * Given the name of a module, use the automatic mocking system to generate a
+ * mocked version of the module for you.
+ */
+ genMockFromModule(moduleName: string): any,
+ /**
+ * Mocks a module with an auto-mocked version when it is being required.
+ *
+ * The second argument can be used to specify an explicit module factory that
+ * is being run instead of using Jest's automocking feature.
+ *
+ * The third argument can be used to create virtual mocks -- mocks of modules
+ * that don't exist anywhere in the system.
+ */
+ mock(
+ moduleName: string,
+ moduleFactory?: any,
+ options?: Object
+ ): JestObjectType,
+ /**
+ * Returns the actual module instead of a mock, bypassing all checks on
+ * whether the module should receive a mock implementation or not.
+ */
+ requireActual(moduleName: string): any,
+ /**
+ * Returns a mock module instead of the actual module, bypassing all checks
+ * on whether the module should be required normally or not.
+ */
+ requireMock(moduleName: string): any,
+ /**
+ * Resets the module registry - the cache of all required modules. This is
+ * useful to isolate modules where local state might conflict between tests.
+ */
+ resetModules(): JestObjectType,
+ /**
+ * Creates a sandbox registry for the modules that are loaded inside the
+ * callback function. This is useful to isolate specific modules for every
+ * test so that local module state doesn't conflict between tests.
+ */
+ isolateModules(fn: () => void): JestObjectType,
+ /**
+ * Exhausts the micro-task queue (usually interfaced in node via
+ * process.nextTick).
+ */
+ runAllTicks(): void,
+ /**
+ * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(),
+ * setInterval(), and setImmediate()).
+ */
+ runAllTimers(): void,
+ /**
+ * Exhausts all tasks queued by setImmediate().
+ */
+ runAllImmediates(): void,
+ /**
+ * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+ * or setInterval() and setImmediate()).
+ */
+ advanceTimersByTime(msToRun: number): void,
+ /**
+ * Executes only the macro task queue (i.e. all tasks queued by setTimeout()
+ * or setInterval() and setImmediate()).
+ *
+ * Renamed to `advanceTimersByTime`.
+ */
+ runTimersToTime(msToRun: number): void,
+ /**
+ * Executes only the macro-tasks that are currently pending (i.e., only the
+ * tasks that have been queued by setTimeout() or setInterval() up to this
+ * point)
+ */
+ runOnlyPendingTimers(): void,
+ /**
+ * Explicitly supplies the mock object that the module system should return
+ * for the specified module. Note: It is recommended to use jest.mock()
+ * instead.
+ */
+ setMock(moduleName: string, moduleExports: any): JestObjectType,
+ /**
+ * Indicates that the module system should never return a mocked version of
+ * the specified module from require() (e.g. that it should always return the
+ * real module).
+ */
+ unmock(moduleName: string): JestObjectType,
+ /**
+ * Instructs Jest to use fake versions of the standard timer functions
+ * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick,
+ * setImmediate and clearImmediate).
+ */
+ useFakeTimers(): JestObjectType,
+ /**
+ * Instructs Jest to use the real versions of the standard timer functions.
+ */
+ useRealTimers(): JestObjectType,
+ /**
+ * Creates a mock function similar to jest.fn but also tracks calls to
+ * object[methodName].
+ */
+ spyOn(
+ object: Object,
+ methodName: string,
+ accessType?: 'get' | 'set'
+ ): JestMockFn,
+ /**
+ * Set the default timeout interval for tests and before/after hooks in milliseconds.
+ * Note: The default timeout interval is 5 seconds if this method is not called.
+ */
+ setTimeout(timeout: number): JestObjectType,
+ ...
+};
+
+type JestSpyType = { calls: JestCallsType, ... };
+
+type JestDoneFn = {|
+ (): void,
+ fail: (error: Error) => void,
+|};
+
+/** Runs this function after every test inside this context */
+declare function afterEach(
+ fn: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+): void;
+/** Runs this function before every test inside this context */
+declare function beforeEach(
+ fn: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+): void;
+/** Runs this function after all tests have finished inside this context */
+declare function afterAll(
+ fn: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+): void;
+/** Runs this function before any tests have started inside this context */
+declare function beforeAll(
+ fn: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+): void;
+
+/** A context for grouping tests together */
+declare var describe: {
+ /**
+ * Creates a block that groups together several related tests in one "test suite"
+ */
+ (name: JestTestName, fn: () => void): void,
+ /**
+ * Only run this describe block
+ */
+ only(name: JestTestName, fn: () => void): void,
+ /**
+ * Skip running this describe block
+ */
+ skip(name: JestTestName, fn: () => void): void,
+ /**
+ * each runs this test against array of argument arrays per each run
+ *
+ * @param {table} table of Test
+ */
+ each(
+ ...table: Array | mixed> | [Array, string]
+ ): (
+ name: JestTestName,
+ fn?: (...args: Array) => ?Promise,
+ timeout?: number
+ ) => void,
+ ...
+};
+
+/** An individual test unit */
+declare var it: {
+ /**
+ * An individual test unit
+ *
+ * @param {JestTestName} Name of Test
+ * @param {Function} Test
+ * @param {number} Timeout for the test, in milliseconds.
+ */
+ (
+ name: JestTestName,
+ fn?: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+ ): void,
+ /**
+ * Only run this test
+ *
+ * @param {JestTestName} Name of Test
+ * @param {Function} Test
+ * @param {number} Timeout for the test, in milliseconds.
+ */
+ only: {|
+ (
+ name: JestTestName,
+ fn?: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+ ): void,
+ each(
+ ...table: Array | mixed> | [Array, string]
+ ): (
+ name: JestTestName,
+ fn?: (...args: Array) => ?Promise,
+ timeout?: number
+ ) => void
+ |},
+ /**
+ * Skip running this test
+ *
+ * @param {JestTestName} Name of Test
+ * @param {Function} Test
+ * @param {number} Timeout for the test, in milliseconds.
+ */
+ skip(
+ name: JestTestName,
+ fn?: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+ ): void,
+ /**
+ * Highlight planned tests in the summary output
+ *
+ * @param {String} Name of Test to do
+ */
+ todo(name: string): void,
+ /**
+ * Run the test concurrently
+ *
+ * @param {JestTestName} Name of Test
+ * @param {Function} Test
+ * @param {number} Timeout for the test, in milliseconds.
+ */
+ concurrent(
+ name: JestTestName,
+ fn?: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+ ): void,
+ /**
+ * each runs this test against array of argument arrays per each run
+ *
+ * @param {table} table of Test
+ */
+ each(
+ ...table: Array | mixed> | [Array, string]
+ ): (
+ name: JestTestName,
+ fn?: (...args: Array) => ?Promise,
+ timeout?: number
+ ) => void,
+ ...
+};
+
+declare function fit(
+ name: JestTestName,
+ fn: (done: JestDoneFn) => ?Promise,
+ timeout?: number
+): void;
+/** An individual test unit */
+declare var test: typeof it;
+/** A disabled group of tests */
+declare var xdescribe: typeof describe;
+/** A focused group of tests */
+declare var fdescribe: typeof describe;
+/** A disabled individual test */
+declare var xit: typeof it;
+/** A disabled individual test */
+declare var xtest: typeof it;
+
+type JestPrettyFormatColors = {
+ comment: {
+ close: string,
+ open: string,
+ ...
+ },
+ content: {
+ close: string,
+ open: string,
+ ...
+ },
+ prop: {
+ close: string,
+ open: string,
+ ...
+ },
+ tag: {
+ close: string,
+ open: string,
+ ...
+ },
+ value: {
+ close: string,
+ open: string,
+ ...
+ },
+ ...
+};
+
+type JestPrettyFormatIndent = string => string;
+type JestPrettyFormatRefs = Array;
+type JestPrettyFormatPrint = any => string;
+type JestPrettyFormatStringOrNull = string | null;
+
+type JestPrettyFormatOptions = {|
+ callToJSON: boolean,
+ edgeSpacing: string,
+ escapeRegex: boolean,
+ highlight: boolean,
+ indent: number,
+ maxDepth: number,
+ min: boolean,
+ plugins: JestPrettyFormatPlugins,
+ printFunctionName: boolean,
+ spacing: string,
+ theme: {|
+ comment: string,
+ content: string,
+ prop: string,
+ tag: string,
+ value: string,
+ |},
+|};
+
+type JestPrettyFormatPlugin = {
+ print: (
+ val: any,
+ serialize: JestPrettyFormatPrint,
+ indent: JestPrettyFormatIndent,
+ opts: JestPrettyFormatOptions,
+ colors: JestPrettyFormatColors
+ ) => string,
+ test: any => boolean,
+ ...
+};
+
+type JestPrettyFormatPlugins = Array;
+
+/** The expect function is used every time you want to test a value */
+declare var expect: {
+ /** The object that you want to make assertions against */
+ (
+ value: any
+ ): JestExpectType &
+ JestPromiseType &
+ EnzymeMatchersType &
+ DomTestingLibraryType &
+ JestJQueryMatchersType &
+ JestStyledComponentsMatchersType &
+ JestExtendedMatchersType &
+ SnapshotDiffType,
+ /** Add additional Jasmine matchers to Jest's roster */
+ extend(matchers: { [name: string]: JestMatcher, ... }): void,
+ /** Add a module that formats application-specific data structures. */
+ addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,
+ assertions(expectedAssertions: number): void,
+ hasAssertions(): void,
+ any(value: mixed): JestAsymmetricEqualityType,
+ anything(): any,
+ arrayContaining(value: Array): Array,
+ objectContaining(value: Object): Object,
+ /** Matches any received string that contains the exact expected string. */
+ stringContaining(value: string): string,
+ stringMatching(value: string | RegExp): string,
+ not: {
+ arrayContaining: (value: $ReadOnlyArray) => Array,
+ objectContaining: (value: {...}) => Object,
+ stringContaining: (value: string) => string,
+ stringMatching: (value: string | RegExp) => string,
+ ...
+ },
+ ...
+};
+
+// TODO handle return type
+// http://jasmine.github.io/2.4/introduction.html#section-Spies
+declare function spyOn(value: mixed, method: string): Object;
+
+/** Holds all functions related to manipulating test runner */
+declare var jest: JestObjectType;
+
+/**
+ * The global Jasmine object, this is generally not exposed as the public API,
+ * using features inside here could break in later versions of Jest.
+ */
+declare var jasmine: {
+ DEFAULT_TIMEOUT_INTERVAL: number,
+ any(value: mixed): JestAsymmetricEqualityType,
+ anything(): any,
+ arrayContaining(value: Array): Array,
+ clock(): JestClockType,
+ createSpy(name: string): JestSpyType,
+ createSpyObj(
+ baseName: string,
+ methodNames: Array
+ ): { [methodName: string]: JestSpyType, ... },
+ objectContaining(value: Object): Object,
+ stringMatching(value: string): string,
+ ...
+};
diff --git a/jest.config.js b/jest.config.js
index a32ee0f44..081b19bf4 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,6 +16,6 @@ module.exports = {
setupFilesAfterEnv: ['/test/testSetup.js'],
coveragePathIgnorePatterns: [
'/node_modules/',
- '/packages/babel-plugin-emotion/test/util.js'
+ '/packages/babel-plugin/test/util.js'
]
}
diff --git a/jest.dist.js b/jest.dist.js
index 1fb335798..a34e1460e 100644
--- a/jest.dist.js
+++ b/jest.dist.js
@@ -1,10 +1,7 @@
const baseConfig = require('./jest.config.js')
module.exports = Object.assign({}, baseConfig, {
- transformIgnorePatterns: ['dist', 'node_modules'],
- testPathIgnorePatterns: baseConfig.testPathIgnorePatterns.concat(
- 'babel-plugin-emotion'
- )
+ transformIgnorePatterns: ['dist', 'node_modules']
})
delete module.exports.moduleNameMapper
diff --git a/package.json b/package.json
index 789f76e93..651714af3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"build:site": "cd site && yarn build:site",
"flow": "flow",
"flow:check": "flow check --flowconfig-name=.flowconfig-ci",
+ "preinstall": "node ./scripts/ensure-yarn.js",
"postinstall": "opencollective postinstall && preconstruct dev && manypkg check",
"changeset": "changeset",
"version-packages": "changeset version",
@@ -57,19 +58,30 @@
],
"plugins": [
"prettier",
- "flowtype"
+ "flowtype",
+ "@emotion"
],
"parser": "babel-eslint",
"rules": {
- "prettier/prettier": "error",
- "react/prop-types": 0,
+ "camelcase": 0,
+ "no-template-curly-in-string": 0,
+ "prefer-const": 0,
+ "no-unused-vars": 0,
+ "flowtype/define-flow-type": 2,
+ "import/no-duplicates": 0,
+ "prettier/prettier": [
+ "error",
+ {
+ "parser": "flow"
+ }
+ ],
+ "react/jsx-curly-brace-presence": 0,
+ "react/jsx-handler-names": 0,
"react/no-unused-prop-types": 0,
+ "react/prop-types": 0,
"react/react-in-jsx-scope": 0,
"standard/computed-property-even-spacing": 0,
- "no-template-curly-in-string": 0,
- "camelcase": 0,
- "import/no-duplicates": 0,
- "flowtype/define-flow-type": 2
+ "@emotion/pkg-renaming": 2
},
"env": {
"browser": true
@@ -111,7 +123,8 @@
"packages/*",
"site",
"scripts/*",
- "playgrounds/*"
+ "playgrounds/*",
+ "removed-packages/*"
],
"nohoist": [
"**/dtslint"
@@ -119,12 +132,17 @@
},
"preconstruct": {
"packages": [
- "packages/*"
+ "packages/*",
+ "removed-packages/*"
],
"globals": {
"react": "React",
"react/jsx-runtime": "ReactJSX",
"react/jsx-dev-runtime": "ReactJSXDev"
+ },
+ "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+ "newEntrypoints": true,
+ "newDistFilenames": true
}
},
"bugs": {
@@ -136,7 +154,7 @@
"threshold": "7 Kb"
},
{
- "path": "./packages/styled-base/dist/styled-base.umd.min.js",
+ "path": "./packages/styled/base/dist/styled.umd.min.js",
"threshold": "9.7 Kb"
},
{
@@ -161,73 +179,69 @@
}
},
"dependencies": {
- "@babel/core": "^7.5.5",
- "@babel/helper-module-imports": "^7.0.0",
- "@babel/plugin-proposal-class-properties": "^7.5.5",
+ "@babel/core": "^7.7.2",
+ "@babel/helper-module-imports": "^7.7.0",
+ "@babel/plugin-proposal-class-properties": "^7.7.0",
"@babel/plugin-syntax-jsx": "^7.12.1",
- "@babel/plugin-transform-flow-strip-types": "^7.4.4",
+ "@babel/plugin-transform-flow-strip-types": "^7.6.3",
"@babel/plugin-transform-react-jsx": "^7.12.1",
- "@babel/preset-env": "^7.5.5",
+ "@babel/preset-env": "^7.7.1",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.12.1",
- "@babel/register": "^7.5.5",
- "@babel/runtime": "^7.5.5",
- "@changesets/changelog-github": "^0.1.0",
+ "@babel/register": "^7.7.0",
+ "@babel/runtime": "^7.7.2",
+ "@changesets/changelog-github": "^0.2.7",
"@changesets/cli": "2.11.2",
- "@manypkg/cli": "^0.5.2",
+ "@manypkg/cli": "^0.16.1",
"@mdx-js/mdx": "^1.1.0",
"@mdx-js/react": "^1.0.27",
- "@preconstruct/cli": "1.1.29",
- "@testing-library/react": "^8.0.2",
- "@types/jest": "^23.0.2",
+ "@preconstruct/cli": "1.1.34",
+ "@testing-library/react": "^11.0.4",
+ "@types/jest": "^26.0.14",
"@types/node": "^10.11.4",
- "@types/react": "^16.8.20",
+ "@types/react": "^16.9.11",
"babel-check-duplicated-nodes": "^1.0.0",
- "babel-core": "^6.26.3",
- "babel-eslint": "^8.2.3",
+ "babel-eslint": "^10.1.0",
"babel-flow-types": "^1.2.3",
- "babel-jest": "^24.1.0",
+ "babel-jest": "^26.3.0",
"babel-plugin-add-basic-constructor-for-react-components": "^0.1.0",
"babel-plugin-codegen": "^3.0.0",
"babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0",
"babel-plugin-jsx-pragmatic": "^1.0.2",
- "babel-plugin-macros": "^2.0.0",
"babel-plugin-react-native-web": "^0.9.6",
- "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-define": "^1.3.0",
- "babel-standalone": "^6.26.0",
"benchmark": "^2.1.4",
"bolt-check": "^0.3.0",
"bundlesize": "^0.13.2",
"codecov": "^2.3.1",
"cssjanus": "^1.2.0",
"dtslint": "^0.3.0",
- "enzyme": "^3.7.0",
- "enzyme-adapter-react-16": "^1.6.0",
- "enzyme-to-json": "^3.2.1",
- "eslint": "^4.5.0",
- "eslint-config-prettier": "^2.3.0",
+ "enzyme": "^3.11.0",
+ "enzyme-adapter-react-16": "^1.15.5",
+ "enzyme-to-json": "^3.6.1",
+ "eslint": "^7.10.0",
+ "eslint-config-prettier": "^6.12.0",
"eslint-config-react": "^1.1.7",
- "eslint-config-standard": "^10.2.1",
- "eslint-config-standard-react": "^5.0.0",
- "eslint-plugin-flowtype": "^2.50.0",
- "eslint-plugin-import": "^2.7.0",
- "eslint-plugin-node": "^5.1.1",
- "eslint-plugin-prettier": "^2.2.0",
- "eslint-plugin-promise": "^3.5.0",
- "eslint-plugin-react": "^7.3.0",
- "eslint-plugin-react-hooks": "^1.0.1",
- "eslint-plugin-standard": "^3.0.1",
- "flow-bin": "^0.110.0",
+ "eslint-config-standard": "^14.1.1",
+ "eslint-config-standard-react": "^9.2.0",
+ "eslint-plugin-flowtype": "^5.2.0",
+ "eslint-plugin-import": "^2.22.1",
+ "eslint-plugin-node": "^11.1.0",
+ "eslint-plugin-prettier": "^3.1.4",
+ "eslint-plugin-promise": "^4.2.1",
+ "eslint-plugin-react": "^7.21.3",
+ "eslint-plugin-react-hooks": "^4.1.2",
+ "eslint-plugin-standard": "^4.0.1",
+ "flow-bin": "^0.128.0",
"html-tag-names": "^1.1.2",
"husky": "^3.0.9",
- "jest": "^24.1.0",
- "jest-environment-jsdom": "^24.0.0",
+ "jest": "^26.4.2",
+ "jest-environment-jsdom": "^26.3.0",
"jest-in-case": "^1.0.2",
- "jest-junit": "^5.1.0",
- "jest-serializer-html": "^4.0.1",
- "jest-watch-typeahead": "^0.2.0",
- "jsdom": "^11.3.0",
+ "jest-junit": "^11.1.0",
+ "jest-serializer-html": "^7.0.0",
+ "jest-watch-typeahead": "^0.6.1",
+ "jsdom": "^16.4.0",
"lint-staged": "^7.2.0",
"module-alias": "^2.0.1",
"multipipe": "^1.0.2",
@@ -238,21 +252,18 @@
"prettier": "1.14.3",
"puppeteer": "^1.6.0",
"raf": "^3.4.0",
- "razzle": "^2.4.0",
"react": "16.14.0",
"react-art": "^16.5.2",
"react-dom": "16.14.0",
"react-helmet": "^5.2.0",
"react-icons": "^2.2.7",
"react-live": "1.10.0",
- "react-native": "^0.57.0",
- "react-native-web": "0.9.6",
- "react-primitives": "^0.7.0",
+ "react-native": "^0.63.2",
+ "react-native-web": "0.13.12",
+ "react-primitives": "^0.8.1",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.5",
- "react-test-renderer": "^16.3.2",
- "stylis": "3.5.4",
- "stylis-rule-sheet": "^0.0.10",
+ "react-test-renderer": "16.8.6",
"svg-tag-names": "^1.1.1",
"through": "^2.3.8",
"unified": "^6.1.6",
diff --git a/packages/babel-plugin-emotion/CHANGELOG.md b/packages/babel-plugin-emotion/CHANGELOG.md
deleted file mode 100644
index 0c65926c5..000000000
--- a/packages/babel-plugin-emotion/CHANGELOG.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# babel-plugin-emotion
-
-## 10.0.33
-
-### Patch Changes
-
-- [`b9f8ae3`](https://github.com/emotion-js/emotion/commit/b9f8ae3f6e18b0569376b9ed62e9d09d141adff8) [#1829](https://github.com/emotion-js/emotion/pull/1829) Thanks [@Andarist](https://github.com/Andarist)! - Skip appending source maps & labels to Babel-transpiled tagged template expressions.
-
-## 10.0.29
-
-### Patch Changes
-
-- Updated dependencies [[`446e756`](https://github.com/emotion-js/emotion/commit/446e75661c4aa01e51d1466472a212940c19cd82)]:
- - @emotion/hash@0.8.0
- - @emotion/serialize@0.11.16
-
-## 10.0.28
-
-### Patch Changes
-
-- [`4dfe558`](https://github.com/emotion-js/emotion/commit/4dfe55811a25bf66306aee46f7f0d6c909004c42) [#1731](https://github.com/emotion-js/emotion/pull/1731) Thanks [@ndelangen](https://github.com/ndelangen)! - Fixed an issue with adding `label` & `target` options to `styled`-related calls when those properties were already set, causing those properties to be duplicated. This could have happened for example when transpiling already transpiled code or when providing those options manually (latter being less likely).
-
-* [`af07afb`](https://github.com/emotion-js/emotion/commit/af07afbe5a887be82f72a12fd6cd1673a32f5263) [#1761](https://github.com/emotion-js/emotion/pull/1761) Thanks [@mansourkheffache](https://github.com/mansourkheffache)! - Push source maps & labels to cooked/raw arrays in TS-transpiled tagged template expressions containing interpolations. This is a case not covered previously by [#1538](https://github.com/emotion-js/emotion/pull/1538).
-
-## 10.0.27
-
-### Patch Changes
-
-- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
-- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- - @emotion/hash@0.7.4
- - @emotion/memoize@0.7.4
- - @emotion/serialize@0.11.15
-
-## 10.0.23
-
-### Patch Changes
-
-- [`3927293d`](https://github.com/emotion-js/emotion/commit/3927293d0b9d96b4a7c00196e8430728759b1161) [#1569](https://github.com/emotion-js/emotion/pull/1569) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object (generated by Babel) being stringified by accident
-
-* [`b3a0f148`](https://github.com/emotion-js/emotion/commit/b3a0f1484f2efcc78b447639ff2e0bc0f29915ae) [#1574](https://github.com/emotion-js/emotion/pull/1574) Thanks [@Andarist](https://github.com/Andarist)! - Fix babel plugin crashing when called programmatically without providing a filename
-
-* Updated dependencies [[`a55f3d49`](https://github.com/emotion-js/emotion/commit/a55f3d49c2febdf7eb1bede3f12da13c3efa1399), [`ca95f385`](https://github.com/emotion-js/emotion/commit/ca95f385f7ce3da6d53de1a652b3b219f11434c4)]:
- - @emotion/serialize@0.11.14
-
-## 10.0.22
-
-### Patch Changes
-
-- [`1bb3efe3`](https://github.com/emotion-js/emotion/commit/1bb3efe399ddf0f3332187f3c751fbba9326d02c) [#1554](https://github.com/emotion-js/emotion/pull/1554) Thanks [@Andarist](https://github.com/Andarist)! - Prepend appended label string with semicolon to avoid problems with declaration blocks without a final semicolon
-
-- Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286)]:
- - @emotion/serialize@0.11.12
-
-## 10.0.21
-
-### Patch Changes
-
-- [0eafebb5](https://github.com/emotion-js/emotion/commit/0eafebb5119212897f81084f63a807c02b0012fc) [#1538](https://github.com/emotion-js/emotion/pull/1538) Thanks [@Andarist](https://github.com/Andarist)! - Push source maps & labels to cooked/raw arrays in TS-transpiled tagged template expressions
-
-## 10.0.20
-
-### Patch Changes
-
-- [1b3791d4](https://github.com/emotion-js/emotion/commit/1b3791d4c458838a097c815a38108c9719023b92) [#1526](https://github.com/emotion-js/emotion/pull/1526) Thanks [@ahutchings](https://github.com/ahutchings)! - Fix `autoLabel` crash on `css` used in expression assigned to an object pattern
-
-## 10.0.19
-
-- Updated dependencies [c81c0033]:
- - @emotion/serialize@0.11.11
- - @emotion/hash@0.7.3
- - @emotion/memoize@0.7.3
-
-## 10.0.17
-
-### Patch Changes
-
-- [b22b4ca4](https://github.com/emotion-js/emotion/commit/b22b4ca460ec66ea313dd9ea9556bd7a2d04798c) [#1485](https://github.com/emotion-js/emotion/pull/1485) Thanks [@JSteunou](https://github.com/JSteunou)! - Fix `autoLabel` crash on `css` used as a computed key of an object
-
-## 10.0.16
-
-### Patch Changes
-
-- [1ea9b3a6](https://github.com/emotion-js/emotion/commit/1ea9b3a6) - Fix an inconsistency with Babel config ordering in the README
-
-## 10.0.15
-
-### Patch Changes
-
-- [4a3b18a2](https://github.com/emotion-js/emotion/commit/4a3b18a2) [#1451](https://github.com/emotion-js/emotion/pull/1451) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with auto-labelling crashing on \$ at runtime
-- [284f8fa](https://github.com/emotion-js/emotion/commit/284f8fa9e0d2926fa26346e63519f8db24e22cc7) [#1336](https://github.com/emotion-js/emotion/pull/1336) Thanks [@Zenwolf](https://github.com/Zenwolf)! - Keep CSS comments that include `@`
-
-## 10.0.14
-
-### Patch Changes
-
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
-
-## 10.0.13
-
-### Patch Changes
-
-- [7bad392c](https://github.com/emotion-js/emotion/commit/7bad392c) [#1387](https://github.com/emotion-js/emotion/pull/1387) Thanks [@mherodev](https://github.com/mherodev)! - Added object property auto label support for babel-plugin-emotion
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap
deleted file mode 100644
index cb73f2007..000000000
--- a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap
+++ /dev/null
@@ -1,280 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`babel css inline babel 6 custom instance 1`] = `
-"import { css as _css } from 'my-emotion-instance';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-/*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: '1lrxbo5',
- styles: 'color:hotpink;'
-} : {
- name: '1lrxbo5',
- styles: 'color:hotpink;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICdteS1lbW90aW9uLWluc3RhbmNlJ1xuICAgIGxvbGBjb2xvcjpob3RwaW5rO2AiXX0= */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 custom instance relative 1`] = `
-"import { css as _css } from './my-emotion-instance';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-/*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: '1lrxbo5',
- styles: 'color:hotpink;'
-} : {
- name: '1lrxbo5',
- styles: 'color:hotpink;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuL215LWVtb3Rpb24taW5zdGFuY2UnXG4gICAgbG9sYGNvbG9yOmhvdHBpbms7YCJdfQ== */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 custom instance relative complex 1`] = `
-"import { css as _css } from '../__tests__/my-emotion-instance';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-/*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: '1lrxbo5',
- styles: 'color:hotpink;'
-} : {
- name: '1lrxbo5',
- styles: 'color:hotpink;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuLi9fX3Rlc3RzX18vbXktZW1vdGlvbi1pbnN0YW5jZSdcbiAgICBsb2xgY29sb3I6aG90cGluaztgIl19 */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 label format with dirname, filename, and local 1`] = `
-"import { css as _css } from 'emotion';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-let cls = /*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: 'mn0r3a-my-css-__tests__-css-requires-options-cls',
- styles: 'color:hotpink;;label:my-css-__tests__-css-requires-options-cls;'
-} : {
- name: 'mn0r3a-my-css-__tests__-css-requires-options-cls',
- styles: 'color:hotpink;;label:my-css-__tests__-css-requires-options-cls;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 label format with filename and local 1`] = `
-"import { css as _css } from 'emotion';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-let cls = /*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: 'jnyc7-my-css-css-requires-options-cls',
- styles: 'color:hotpink;;label:my-css-css-requires-options-cls;'
-} : {
- name: 'jnyc7-my-css-css-requires-options-cls',
- styles: 'color:hotpink;;label:my-css-css-requires-options-cls;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 label format with filename that is index and local 1`] = `
-"import { css as _css } from 'emotion';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-let cls = /*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: 'v8qj0c-my-css-some-directory-cls',
- styles: 'color:hotpink;;label:my-css-some-directory-cls;'
-} : {
- name: 'v8qj0c-my-css-some-directory-cls',
- styles: 'color:hotpink;;label:my-css-some-directory-cls;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 label format with only local 1`] = `
-"import { css as _css } from 'emotion';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return 'You have tried to stringify object returned from \`css\` function. It isn\\\\'t supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).'; }
-
-let cls = /*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
- name: 'ryhvpw-my-css-cls',
- styles: 'color:hotpink;;label:my-css-cls;'
-} : {
- name: 'ryhvpw-my-css-cls',
- styles: 'color:hotpink;;label:my-css-cls;',
- map: '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */',
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 6 label on code transpiled by TS (with interpolations) 1`] = `
-"import _css from '@emotion/css';
-
-import { __makeTemplateObject } from 'tslib';
-
-import { hoverStyles } from './styles';
-
-var templateObject_1;
-
-const someVar = /*#__PURE__*/_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n;label:someVar;'], ['\\\\n color: hotpink;\\\\n;label:someVar;'])), hoverStyles);"
-`;
-
-exports[`babel css inline babel 6 label on code transpiled by TS 1`] = `
-"import _css from '@emotion/css';
-
-import { __makeTemplateObject } from 'tslib';
-
-
-var templateObject_1;
-
-const someVar = /*#__PURE__*/_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n;label:someVar;'], ['\\\\n color: hotpink;\\\\n;label:someVar;'])));"
-`;
-
-exports[`babel css inline babel 7 custom instance 1`] = `
-"import { css as _css } from \\"my-emotion-instance\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICdteS1lbW90aW9uLWluc3RhbmNlJ1xuICAgIGxvbGBjb2xvcjpob3RwaW5rO2AiXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 custom instance relative 1`] = `
-"import { css as _css } from \\"./my-emotion-instance\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuL215LWVtb3Rpb24taW5zdGFuY2UnXG4gICAgbG9sYGNvbG9yOmhvdHBpbms7YCJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 custom instance relative complex 1`] = `
-"import { css as _css } from \\"../__tests__/my-emotion-instance\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVPIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3MgYXMgbG9sfSBmcm9tICcuLi9fX3Rlc3RzX18vbXktZW1vdGlvbi1pbnN0YW5jZSdcbiAgICBsb2xgY29sb3I6aG90cGluaztgIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 label format with dirname, filename, and local 1`] = `
-"import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-let cls =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\"
-} : {
- name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 label format with filename and local 1`] = `
-"import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-let cls =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"jnyc7-my-css-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\"
-} : {
- name: \\"jnyc7-my-css-css-requires-options-cls\\",
- styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 label format with filename that is index and local 1`] = `
-"import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-let cls =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"v8qj0c-my-css-some-directory-cls\\",
- styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\"
-} : {
- name: \\"v8qj0c-my-css-some-directory-cls\\",
- styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 label format with only local 1`] = `
-"import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-let cls =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"ryhvpw-my-css-cls\\",
- styles: \\"color:hotpink;;label:my-css-cls;\\"
-} : {
- name: \\"ryhvpw-my-css-cls\\",
- styles: \\"color:hotpink;;label:my-css-cls;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHtjc3N9IGZyb20gJ2Vtb3Rpb24nXG4gICAgbGV0IGNscyA9IGNzcyh7Y29sb3I6J2hvdHBpbmsnfSlcbiAgICAiXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`babel css inline babel 7 label on code transpiled by TS (with interpolations) 1`] = `
-"import _css from \\"@emotion/css\\";
-import { __makeTemplateObject } from 'tslib';
-import { hoverStyles } from './styles';
-var templateObject_1;
-
-const someVar =
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"])), hoverStyles);"
-`;
-
-exports[`babel css inline babel 7 label on code transpiled by TS 1`] = `
-"import _css from \\"@emotion/css\\";
-import { __makeTemplateObject } from 'tslib';
-var templateObject_1;
-
-const someVar =
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"])));"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
deleted file mode 100644
index 7bddbcf40..000000000
--- a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,289 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@emotion/babel-plugin-core core-with-component 1`] = `
-"// @flow
-import styled from '@emotion/styled'
-
-const MyComponent = styled.div({ color: 'hotpink' })
-
-const OtherComponent = MyComponent.withComponent('section')
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _styled from \\"@emotion/styled-base\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const MyComponent = _styled(\\"div\\", {
- target: \\"ema3wqd0\\",
- label: \\"MyComponent\\"
-})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jb21wb25lbnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR29CIiwiZmlsZSI6ImNvcmUtd2l0aC1jb21wb25lbnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IE15Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7IGNvbG9yOiAnaG90cGluaycgfSlcblxuY29uc3QgT3RoZXJDb21wb25lbnQgPSBNeUNvbXBvbmVudC53aXRoQ29tcG9uZW50KCdzZWN0aW9uJylcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-const OtherComponent = MyComponent.withComponent('section', {
- target: \\"ema3wqd1\\",
- label: \\"OtherComponent\\"
-});"
-`;
-
-exports[`@emotion/babel-plugin-core core-with-css-import 1`] = `
-"/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
-
-const SomeComponent = props => (
-
-)
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
-} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jc3MtaW1wb3J0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtZIiwiZmlsZSI6ImNvcmUtd2l0aC1jc3MtaW1wb3J0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3gsIGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-const SomeComponent = props =>
;"
-`;
-
-exports[`@emotion/babel-plugin-core does-not-change-other-props 1`] = `
-"/** @jsx jsx */
-import { jsx } from '@emotion/core'
-
-const Svg =
-)
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
-} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImpzeC1ob2lzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLSSIsImZpbGUiOiJqc3gtaG9pc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGNvbG9yOiAnaG90cGluaydcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbilcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-const SomeComponent = props =>
;"
-`;
-
-exports[`@emotion/babel-plugin-core object-property 1`] = `
-"// @flow
-import * as React from 'react'
-import { jsx } from '@emotion/core'
-import styled from '@emotion/styled'
-
-const MyObject = {
- MyProperty: styled.div({ color: 'hotpink' })
-}
-
-function Logo(props) {
- return
-)
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"dwt66v-SomeComponent\\",
- styles: \\"color:hotpink;background-color:green;;label:SomeComponent;\\"
-} : {
- name: \\"dwt66v-SomeComponent\\",
- styles: \\"color:hotpink;background-color:green;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1vYmplY3Qtd2l0aC1jYW1lbC1jYXNlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtJIiwiZmlsZSI6InN0YXRpYy1vYmplY3Qtd2l0aC1jYW1lbC1jYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiAnZ3JlZW4nXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-const SomeComponent = props =>
;"
-`;
-
-exports[`@emotion/babel-plugin-core static-object-with-child-selectors 1`] = `
-"/** @jsx jsx */
-
-import { jsx } from '@emotion/core'
-
-const SomeComponent = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1vvht02-SomeComponent\\",
- styles: \\"color:green;:hover{color:hotpink;};label:SomeComponent;\\"
-} : {
- name: \\"1vvht02-SomeComponent\\",
- styles: \\"color:green;:hover{color:hotpink;};label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1vYmplY3Qtd2l0aC1jaGlsZC1zZWxlY3RvcnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT00iLCJmaWxlIjoic3RhdGljLW9iamVjdC13aXRoLWNoaWxkLXNlbGVjdG9ycy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogJ2dyZWVuJyxcbiAgICAgICAgJzpob3Zlcic6IHtcbiAgICAgICAgICBjb2xvcjogJ2hvdHBpbmsnXG4gICAgICAgIH1cbiAgICAgIH19XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKVxufVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-const SomeComponent = props => {
- return
;
-};"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap
deleted file mode 100644
index ab3b7c884..000000000
--- a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`styled inline babel 6 hash generation no file system 1`] = `
-"import _styled from \\"@emotion/styled-base\\";
-
-_styled(\\"h1\\", {
- target: \\"e1vqloan0\\"
-})({
- name: \\"14ksm7b\\",
- styles: \\"color:blue;\\"
-});"
-`;
-
-exports[`styled inline babel 7 hash generation no file system 1`] = `
-"import _styled from \\"@emotion/styled-base\\";
-
-_styled(\\"h1\\", {
- target: \\"e1vqloan0\\"
-})({
- name: \\"14ksm7b\\",
- styles: \\"color:blue;\\"
-});"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap
deleted file mode 100644
index a0e5b5063..000000000
--- a/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap
+++ /dev/null
@@ -1,638 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`vanilla emotion comments 1`] = `
-"import { css } from 'emotion'
-
-css\`
- // display:flex;
-
- /*
-wef
-
-dfwf*/
- color: hotpink;
-\`
-
-css\`
- /* @noflip */
- left: 1px;
-\`
-
-css\`
- left: 2px;
-
- /* @noflip */
- &.foo {
- left: 3px;
- }
-
- &.zot {
- /* @noflip */
- right: 1px;
- }
-\`
-
-css\`
- /* @whatever */
- left: 4px;
-\`
-
-css\`
- left: 5px;
-
- /* @whatever */
- &.foo {
- left: 6px;
- }
-
- &.zot {
- /* @whatever */
- right: 2px;
- }
-\`
-
-css\`
- // @noflip should-be-removed
- left: 7px;
-\`
-
-css\`
- // @shouldberemoved
- left: 8px;
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"njzoxi\\",
- styles: \\"/* @noflip */ left:1px;\\"
-} : {
- name: \\"njzoxi\\",
- styles: \\"/* @noflip */ left:1px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1d9s3pk\\",
- styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\"
-} : {
- name: \\"1d9s3pk\\",
- styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"197xj9y\\",
- styles: \\"/* @whatever */ left:4px;\\"
-} : {
- name: \\"197xj9y\\",
- styles: \\"/* @whatever */ left:4px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"11qyfqd\\",
- styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\"
-} : {
- name: \\"11qyfqd\\",
- styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"luqhsn\\",
- styles: \\"left:7px;\\"
-} : {
- name: \\"luqhsn\\",
- styles: \\"left:7px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1v35xj1\\",
- styles: \\"left:8px;\\"
-} : {
- name: \\"1v35xj1\\",
- styles: \\"left:8px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion css-basic 1`] = `
-"import { css } from 'emotion'
-
-css\`
- margin: 12px 48px;
- color: #ffffff;
- display: flex;
- flex: 1 0 auto;
- color: blue;
- @media (min-width: 420px) {
- line-height: 40px;
- }
- width: \${window.whatever};
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-/*#__PURE__*/
-_css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width:420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5jc3NgXG4gIG1hcmdpbjogMTJweCA0OHB4O1xuICBjb2xvcjogI2ZmZmZmZjtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleDogMSAwIGF1dG87XG4gIGNvbG9yOiBibHVlO1xuICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICBsaW5lLWhlaWdodDogNDBweDtcbiAgfVxuICB3aWR0aDogJHt3aW5kb3cud2hhdGV2ZXJ9O1xuYFxuIl19 */\\"));"
-`;
-
-exports[`vanilla emotion css-object 1`] = `
-"import { css } from 'emotion'
-
-let someCls = css({
- color: window.whatever
-})
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-let someCls =
-/*#__PURE__*/
-_css({
- color: window.whatever
-}, \\";label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzKHtcbiAgY29sb3I6IHdpbmRvdy53aGF0ZXZlclxufSlcbiJdfQ== */\\"));"
-`;
-
-exports[`vanilla emotion does-not-minify-inside-content-property 1`] = `
-"import { css } from 'emotion'
-
-const cls1 = css\`
- content: ' { } ';
-\`
-// prettier-ignore
-const cls2 = css\`
- content: \\" { } \\";
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const cls1 =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"hn2j47-cls1\\",
- styles: \\"content:' { } ';;label:cls1;\\"
-} : {
- name: \\"hn2j47-cls1\\",
- styles: \\"content:' { } ';;label:cls1;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-}); // prettier-ignore
-
-
-const cls2 =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"nh732h-cls2\\",
- styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\"
-} : {
- name: \\"nh732h-cls2\\",
- styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion hoisting 1`] = `
-"import { css } from 'emotion'
-
-function test() {
- const cls1 = css\`
- font-size: 20px;
- @media (min-width: 420px) {
- color: blue;
- \${css\`
- width: 96px;
- height: 96px;
- \`};
- line-height: 26px;
- }
- background: green;
- \${{ backgroundColor: 'hotpink' }};
- \`
-
- const cls2 = css\`
- \${{ color: 'blue' }};
- \`
-
- const cls3 = css\`
- display: flex;
- &:hover {
- color: hotpink;
- }
- \`
- let outerVar = 'something'
- function inner() {
- const styles = { color: 'darkorchid' }
- const color = 'aquamarine'
-
- const cls4 = css\`
- \${cls3};
- \${cls1};
- \${{ color: 'darkorchid' }};
- \${{ color }};
- \${css\`
- height: 420px;
- width: \${styles};
- \`};
- \`
- let someCls = css\`
- color: \${outerVar};
- \`
- }
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-function test() {
- const cls1 =
- /*#__PURE__*/
- _css(\\"font-size:20px;@media (min-width:420px){color:blue;\\",
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"ekayrg-cls1\\",
- styles: \\"width:96px;height:96px;;label:cls1;\\"
- } : {
- name: \\"ekayrg-cls1\\",
- styles: \\"width:96px;height:96px;;label:cls1;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6ImhvaXN0aW5nLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- }), \\";line-height:26px;}background:green;background-color:hotpink;;;label:cls1;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\"));
-
- const cls2 =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1tbvdns-cls2\\",
- styles: \\"color:blue;;;label:cls2;\\"
- } : {
- name: \\"1tbvdns-cls2\\",
- styles: \\"color:blue;;;label:cls2;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
-
- const cls3 =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1m06t0b-cls3\\",
- styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\"
- } : {
- name: \\"1m06t0b-cls3\\",
- styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
-
- let outerVar = 'something';
-
- function inner() {
- const styles = {
- color: 'darkorchid'
- };
- const color = 'aquamarine';
-
- const cls4 =
- /*#__PURE__*/
- _css(cls3, \\";\\", cls1, \\";color:darkorchid;;\\", {
- color
- }, \\";\\",
- /*#__PURE__*/
- _css(\\"height:420px;width:\\", styles, \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\")), \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"));
-
- let someCls =
- /*#__PURE__*/
- _css(\\"color:\\", outerVar, \\";;label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"));
- }
-}"
-`;
-
-exports[`vanilla emotion inject-global-basic 1`] = `
-"import { injectGlobal } from 'emotion'
-
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-_injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\"
-} : {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ2Vtb3Rpb24nXG5cbmluamVjdEdsb2JhbGBcbiAgYm9keSB7XG4gICAgbWFyZ2luOiAwO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion inject-global-change-import 1`] = `
-"import { injectGlobal as inject } from 'emotion'
-
-inject\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`
-
-let injectGlobal = window.whatever
-
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-_injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\"
-} : {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnZW1vdGlvbidcblxuaW5qZWN0YFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBpbmplY3RHbG9iYWwgPSB3aW5kb3cud2hhdGV2ZXJcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-let injectGlobal = window.whatever;
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`;"
-`;
-
-exports[`vanilla emotion inject-global-with-font-face 1`] = `
-"import { injectGlobal } from 'emotion'
-
-injectGlobal\`
- @font-face {
- font-family: 'Patrick Hand SC';
- font-style: normal;
- font-weight: 400;
- src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'),
- url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
- format('woff2');
- unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
- U+A720-A7FF;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-_injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"lu7y12\\",
- styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\"
-} : {
- name: \\"lu7y12\\",
- styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1mb250LWZhY2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC13aXRoLWZvbnQtZmFjZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ2Vtb3Rpb24nXG5cbmluamVjdEdsb2JhbGBcbiAgQGZvbnQtZmFjZSB7XG4gICAgZm9udC1mYW1pbHk6ICdQYXRyaWNrIEhhbmQgU0MnO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIHNyYzogbG9jYWwoJ1BhdHJpY2sgSGFuZCBTQycpLCBsb2NhbCgnUGF0cmlja0hhbmRTQy1SZWd1bGFyJyksXG4gICAgICB1cmwoaHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbS9zL3BhdHJpY2toYW5kc2MvdjQvT1lGV0NnZkNSLTd1SElvdmpVWlhzWjcxVWlzMFFlYjlHcW84SVpWN2NrRS53b2ZmMilcbiAgICAgICAgZm9ybWF0KCd3b2ZmMicpO1xuICAgIHVuaWNvZGUtcmFuZ2U6IFUrMDEwMC0wMjRmLCBVKzEtMWVmZiwgVSsyMGEwLTIwYWIsIFUrMjBhZC0yMGNmLCBVKzJjNjAtMmM3ZixcbiAgICAgIFUrQTcyMC1BN0ZGO1xuICB9XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion inject-global-with-interpolation 1`] = `
-"import { injectGlobal } from 'emotion'
-
-let display = window.whatever
-
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- display: \${display};
- & > div {
- display: none;
- }
- }
- html {
- background: green;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-let display = window.whatever;
-
-_injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnZW1vdGlvbidcblxubGV0IGRpc3BsYXkgPSB3aW5kb3cud2hhdGV2ZXJcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBkaXNwbGF5OiAke2Rpc3BsYXl9O1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\"));"
-`;
-
-exports[`vanilla emotion keyframes-basic 1`] = `
-"import { keyframes } from 'emotion'
-
-const rotate360 = keyframes\`
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { keyframes as _keyframes } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const rotate360 =
-/*#__PURE__*/
-_keyframes(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1k98dea-rotate360\\",
- styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
-} : {
- name: \\"1k98dea-rotate360\\",
- styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoia2V5ZnJhbWVzLWJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion keyframes-with-interpolation 1`] = `
-"import { keyframes } from 'emotion'
-
-let endingRotation = window.whatever
-
-const rotate360 = keyframes\`
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(\${endingRotation});
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { keyframes as _keyframes } from \\"emotion\\";
-let endingRotation = window.whatever;
-
-const rotate360 =
-/*#__PURE__*/
-_keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");};label:rotate360;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgZW5kaW5nUm90YXRpb24gPSB3aW5kb3cud2hhdGV2ZXJcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoJHtlbmRpbmdSb3RhdGlvbn0pO1xuICB9XG5gXG4iXX0= */\\"));"
-`;
-
-exports[`vanilla emotion object-label 1`] = `
-"import { css } from 'emotion'
-
-let obj = {
- someProp: css({ color: 'green' }),
- anotherProp: css({ color: 'hotpink' })
-}
-class Thing {
- static Prop = css({ color: 'yellow' })
- BadIdea = css({ color: 'red' })
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-let obj = {
- someProp:
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"16vqze6-someProp\\",
- styles: \\"color:green;;label:someProp;\\"
- } : {
- name: \\"16vqze6-someProp\\",
- styles: \\"color:green;;label:someProp;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- }),
- anotherProp:
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"r0tjkz-anotherProp\\",
- styles: \\"color:hotpink;;label:anotherProp;\\"
- } : {
- name: \\"r0tjkz-anotherProp\\",
- styles: \\"color:hotpink;;label:anotherProp;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- })
-};
-
-class Thing {
- static Prop =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1q8lxwm-Prop\\",
- styles: \\"color:yellow;;label:Prop;\\"
- } : {
- name: \\"1q8lxwm-Prop\\",
- styles: \\"color:yellow;;label:Prop;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoib2JqZWN0LWxhYmVsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxubGV0IG9iaiA9IHtcbiAgc29tZVByb3A6IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pLFxuICBhbm90aGVyUHJvcDogY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgUHJvcCA9IGNzcyh7IGNvbG9yOiAneWVsbG93JyB9KVxuICBCYWRJZGVhID0gY3NzKHsgY29sb3I6ICdyZWQnIH0pXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
- BadIdea =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"15lhxip-BadIdea\\",
- styles: \\"color:red;;label:BadIdea;\\"
- } : {
- name: \\"15lhxip-BadIdea\\",
- styles: \\"color:red;;label:BadIdea;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
-}"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-non-pascal-case-arrow-function.js b/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-non-pascal-case-arrow-function.js
deleted file mode 100644
index 0ba549a39..000000000
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-non-pascal-case-arrow-function.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import css from '@emotion/css/macro'
-
-let something = () => {
- css`
- color: hotpink;
- `
-}
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-1.js b/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-1.js
deleted file mode 100644
index 3d4e54c96..000000000
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-1.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import css from '@emotion/css/macro'
-
-const thing = css`
- color: hotpink;
-`
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/no-actual-import.js b/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/no-actual-import.js
deleted file mode 100644
index 7d7bccebf..000000000
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/no-actual-import.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@emotion/css/macro'
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/other-imports.js b/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/other-imports.js
deleted file mode 100644
index 263843291..000000000
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/other-imports.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { nonExistantImport } from '@emotion/css/macro'
-
-nonExistantImport()
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/index.js b/packages/babel-plugin-emotion/__tests__/css-macro/index.js
deleted file mode 100644
index e6157004d..000000000
--- a/packages/babel-plugin-emotion/__tests__/css-macro/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// @flow
-import tester from 'babel-tester'
-
-tester('@emotion/css/macro', __dirname)
diff --git a/packages/babel-plugin-emotion/__tests__/css-requires-options.js b/packages/babel-plugin-emotion/__tests__/css-requires-options.js
deleted file mode 100644
index 7fea7d28d..000000000
--- a/packages/babel-plugin-emotion/__tests__/css-requires-options.js
+++ /dev/null
@@ -1,128 +0,0 @@
-// @flow
-import { createInlineTests } from 'old-babel-tester'
-import path from 'path'
-
-const inline = {
- 'label format with only local': {
- code: `
- import {css} from 'emotion'
- let cls = css({color:'hotpink'})
- `,
- opts: {
- labelFormat: 'my-css-[local]',
- autoLabel: true
- },
- filename: __filename
- },
- 'label format with filename that is index and local': {
- code: `
- import {css} from 'emotion'
- let cls = css({color:'hotpink'})
- `,
- opts: {
- labelFormat: 'my-css-[filename]-[local]',
- autoLabel: true
- },
- filename: 'some-directory/index.js'
- },
-
- 'label format with filename and local': {
- code: `
- import {css} from 'emotion'
- let cls = css({color:'hotpink'})
- `,
- opts: {
- labelFormat: 'my-css-[filename]-[local]',
- autoLabel: true
- },
- filename: __filename
- },
-
- 'label format with dirname, filename, and local': {
- code: `
- import {css} from 'emotion'
- let cls = css({color:'hotpink'})
- `,
- opts: {
- labelFormat: 'my-css-[dirname]-[filename]-[local]',
- autoLabel: true
- },
- filename: __filename
- },
-
- // this test has better readability for label alone than other ones which include source maps
- 'label on code transpiled by TS': {
- code: `
- import { __makeTemplateObject } from 'tslib'
- import css from '@emotion/css'
-
- var templateObject_1
-
- const someVar = css(
- templateObject_1 ||
- (templateObject_1 = __makeTemplateObject(
- ['\\n color: hotpink;\\n'],
- ['\\n color: hotpink;\\n']
- ))
- )
- `,
- opts: {
- autoLabel: true,
- sourceMap: false
- },
- filename: __filename
- },
-
- 'label on code transpiled by TS (with interpolations) ': {
- code: `
- import { __makeTemplateObject } from 'tslib'
- import css from '@emotion/css'
- import { hoverStyles } from './styles'
-
- var templateObject_1
-
- const someVar = css(
- templateObject_1 ||
- (templateObject_1 = __makeTemplateObject(
- ['\\n color: hotpink;\\n'],
- ['\\n color: hotpink;\\n']
- )),
- hoverStyles
- )
- `,
- opts: {
- autoLabel: true,
- sourceMap: false
- },
- filename: __filename
- },
-
- 'custom instance': {
- code: `
- import {css as lol} from 'my-emotion-instance'
- lol\`color:hotpink;\``,
- opts: {
- instances: ['my-emotion-instance']
- },
- filename: __filename
- },
- 'custom instance relative': {
- code: `
- import {css as lol} from './my-emotion-instance'
- lol\`color:hotpink;\``,
- opts: {
- instances: [path.join(__dirname, './my-emotion-instance')]
- },
- filename: __filename
- },
- 'custom instance relative complex': {
- code: `
- import {css as lol} from '../__tests__/my-emotion-instance'
- lol\`color:hotpink;\``,
- opts: {
- instances: [path.join(__dirname, './my-emotion-instance')]
- },
- filename: __filename
- }
-}
-createInlineTests('babel css inline', inline)
diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/css-core.js b/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/css-core.js
deleted file mode 100644
index a800dcb42..000000000
--- a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/css-core.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from '@emotion/core'
-
-let style = css({ color: 'hotpink' })
diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap
deleted file mode 100644
index d23ff2b93..000000000
--- a/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`disable source map css 1`] = `
-"import css from '@emotion/css'
-
-let style = css({ color: 'hotpink' })
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _css from \\"@emotion/css\\";
-let style = {
- name: \\"hpn981-style\\",
- styles: \\"color:hotpink;;label:style;\\"
-};"
-`;
-
-exports[`disable source map css-core 1`] = `
-"import { css } from '@emotion/core'
-
-let style = css({ color: 'hotpink' })
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css } from '@emotion/core';
-let style = {
- name: \\"hpn981-style\\",
- styles: \\"color:hotpink;;label:style;\\"
-};"
-`;
-
-exports[`disable source map styled 1`] = `
-"import styled from '@emotion/styled'
-
-let Comp = styled.div({ color: 'hotpink' })
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _styled from \\"@emotion/styled-base\\";
-
-let Comp = _styled(\\"div\\", {
- target: \\"e4zcdjx0\\",
- label: \\"Comp\\"
-})({
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-});"
-`;
-
-exports[`disable source map vanilla 1`] = `
-"import { css } from 'emotion'
-
-let cls = css({ color: 'hotpink' })
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-let cls =
-/*#__PURE__*/
-_css({
- name: \\"8dy5on-cls\\",
- styles: \\"color:hotpink;;label:cls;\\"
-});"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-object.js b/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-object.js
deleted file mode 100644
index ad4369744..000000000
--- a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-object.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import css from '@emotion/css'
-
-css({ color: 'hotpink' })
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-string.js b/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-string.js
deleted file mode 100644
index 00819cb06..000000000
--- a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-string.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import css from '@emotion/css'
-
-css`
- color: hotpink;
-`
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap
deleted file mode 100644
index 950abad45..000000000
--- a/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,219 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`source maps css-object 1`] = `
-"import css from '@emotion/css'
-
-css({ color: 'hotpink' })
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _css from \\"@emotion/css\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};"
-`;
-
-exports[`source maps css-prop 1`] = `
-"/** @jsx jsx */
-import { jsx } from '@emotion/core'
-
-const SomeComponent = props =>
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
-} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0MiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gPGRpdiBjc3M9e3sgY29sb3I6ICdob3RwaW5rJyB9fSB7Li4ucHJvcHN9IC8+XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-const SomeComponent = props =>
;"
-`;
-
-exports[`source maps css-prop-dynamic 1`] = `
-"/** @jsx jsx */
-import { jsx } from '@emotion/core'
-
-const SomeComponent = props => (
-
-)
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _css from \\"@emotion/css\\";
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
-const SomeComponent = props =>
;"
-`;
-
-exports[`source maps css-string 1`] = `
-"import css from '@emotion/css'
-
-css\`
- color: hotpink;
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _css from \\"@emotion/css\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};"
-`;
-
-exports[`source maps css-transpiled-by-ts 1`] = `
-"import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css'
-
-var templateObject_1
-
-css(
- templateObject_1 ||
- (templateObject_1 = __makeTemplateObject(
- ['\\\\n color: hotpink;\\\\n'],
- ['\\\\n color: hotpink;\\\\n']
- ))
-)
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _css from \\"@emotion/css\\";
-
-var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\";
-
-import { __makeTemplateObject } from 'tslib';
-var templateObject_1;
-
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + _emotionSourceMap], ['\\\\n color: hotpink;\\\\n' + _emotionSourceMap])));"
-`;
-
-exports[`source maps css-transpiled-by-ts-with-interpolations 1`] = `
-"import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css'
-import { hoverStyles } from './styles'
-
-var templateObject_1
-
-css(
- templateObject_1 ||
- (templateObject_1 = __makeTemplateObject(
- ['\\\\n color: hotpink;\\\\n'],
- ['\\\\n color: hotpink;\\\\n']
- )),
- hoverStyles
-)
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _css from \\"@emotion/css\\";
-
-var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5pbXBvcnQgeyBob3ZlclN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuXG52YXIgdGVtcGxhdGVPYmplY3RfMVxuXG5jc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSksXG4gIGhvdmVyU3R5bGVzXG4pXG4iXX0= */\\";
-
-import { __makeTemplateObject } from 'tslib';
-import { hoverStyles } from './styles';
-var templateObject_1;
-
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + _emotionSourceMap], ['\\\\n color: hotpink;\\\\n' + _emotionSourceMap])), hoverStyles);"
-`;
-
-exports[`source maps styled-object 1`] = `
-"import styled from '@emotion/styled'
-
-const SomeComponent = styled.div({
- color: 'hotpink'
-})
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _styled from \\"@emotion/styled-base\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const SomeComponent = _styled(\\"div\\", {
- target: \\"eb28ebz0\\",
- label: \\"SomeComponent\\"
-})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgY29sb3I6ICdob3RwaW5rJ1xufSlcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`source maps styled-string 1`] = `
-"import styled from '@emotion/styled'
-
-const SomeComponent = styled.div\`
- color: hotpink;
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import _styled from \\"@emotion/styled-base\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const SomeComponent = _styled(\\"div\\", {
- target: \\"eb28ebz0\\",
- label: \\"SomeComponent\\"
-})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/index.js b/packages/babel-plugin-emotion/__tests__/styled-macro/index.js
deleted file mode 100644
index d842f0ac9..000000000
--- a/packages/babel-plugin-emotion/__tests__/styled-macro/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// @flow
-import tester from 'babel-tester'
-
-tester('@emotion/styled.macro', __dirname)
diff --git a/packages/babel-plugin-emotion/__tests__/styled-requires-options.js b/packages/babel-plugin-emotion/__tests__/styled-requires-options.js
deleted file mode 100644
index 0b1cdd948..000000000
--- a/packages/babel-plugin-emotion/__tests__/styled-requires-options.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// @flow
-import { createInlineTests } from 'old-babel-tester'
-
-const cases = {
- 'hash generation no file system': {
- code: 'import styled from "@emotion/styled";\nstyled.h1`color:blue;`',
- filename: undefined
- }
-}
-
-createInlineTests('styled inline', cases)
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap
deleted file mode 100644
index 23bdbc56e..000000000
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,638 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`vanilla emotion comments 1`] = `
-"import { css } from 'emotion/macro'
-
-css\`
- // display:flex;
-
- /*
-wef
-
-dfwf*/
- color: hotpink;
-\`
-
-css\`
- /* @noflip */
- left: 1px;
-\`
-
-css\`
- left: 2px;
-
- /* @noflip */
- &.foo {
- left: 3px;
- }
-
- &.zot {
- /* @noflip */
- right: 1px;
- }
-\`
-
-css\`
- /* @whatever */
- left: 4px;
-\`
-
-css\`
- left: 5px;
-
- /* @whatever */
- &.foo {
- left: 6px;
- }
-
- &.zot {
- /* @whatever */
- right: 2px;
- }
-\`
-
-css\`
- // @noflip should-be-removed
- left: 7px;
-\`
-
-css\`
- // @shouldberemoved
- left: 8px;
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
-} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"njzoxi\\",
- styles: \\"/* @noflip */ left:1px;\\"
-} : {
- name: \\"njzoxi\\",
- styles: \\"/* @noflip */ left:1px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1d9s3pk\\",
- styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\"
-} : {
- name: \\"1d9s3pk\\",
- styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"197xj9y\\",
- styles: \\"/* @whatever */ left:4px;\\"
-} : {
- name: \\"197xj9y\\",
- styles: \\"/* @whatever */ left:4px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"11qyfqd\\",
- styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\"
-} : {
- name: \\"11qyfqd\\",
- styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"luqhsn\\",
- styles: \\"left:7px;\\"
-} : {
- name: \\"luqhsn\\",
- styles: \\"left:7px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1v35xj1\\",
- styles: \\"left:8px;\\"
-} : {
- name: \\"1v35xj1\\",
- styles: \\"left:8px;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion css-basic 1`] = `
-"import { css } from 'emotion/macro'
-
-css\`
- margin: 12px 48px;
- color: #ffffff;
- display: flex;
- flex: 1 0 auto;
- color: blue;
- @media (min-width: 420px) {
- line-height: 40px;
- }
- width: \${window.whatever};
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-/*#__PURE__*/
-_css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width:420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5jc3NgXG4gIG1hcmdpbjogMTJweCA0OHB4O1xuICBjb2xvcjogI2ZmZmZmZjtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleDogMSAwIGF1dG87XG4gIGNvbG9yOiBibHVlO1xuICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICBsaW5lLWhlaWdodDogNDBweDtcbiAgfVxuICB3aWR0aDogJHt3aW5kb3cud2hhdGV2ZXJ9O1xuYFxuIl19 */\\"));"
-`;
-
-exports[`vanilla emotion css-object 1`] = `
-"import { css } from 'emotion/macro'
-
-let someCls = css({
- color: window.whatever
-})
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-let someCls =
-/*#__PURE__*/
-_css({
- color: window.whatever
-}, \\";label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmxldCBzb21lQ2xzID0gY3NzKHtcbiAgY29sb3I6IHdpbmRvdy53aGF0ZXZlclxufSlcbiJdfQ== */\\"));"
-`;
-
-exports[`vanilla emotion does-not-minify-inside-content-property 1`] = `
-"import { css } from 'emotion/macro'
-
-const cls1 = css\`
- content: ' { } ';
-\`
-// prettier-ignore
-const cls2 = css\`
- content: \\" { } \\";
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const cls1 =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"hn2j47-cls1\\",
- styles: \\"content:' { } ';;label:cls1;\\"
-} : {
- name: \\"hn2j47-cls1\\",
- styles: \\"content:' { } ';;label:cls1;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-}); // prettier-ignore
-
-
-const cls2 =
-/*#__PURE__*/
-_css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"nh732h-cls2\\",
- styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\"
-} : {
- name: \\"nh732h-cls2\\",
- styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion hoisting 1`] = `
-"import { css } from 'emotion/macro'
-
-function test() {
- const cls1 = css\`
- font-size: 20px;
- @media (min-width: 420px) {
- color: blue;
- \${css\`
- width: 96px;
- height: 96px;
- \`};
- line-height: 26px;
- }
- background: green;
- \${{ backgroundColor: 'hotpink' }};
- \`
-
- const cls2 = css\`
- \${{ color: 'blue' }};
- \`
-
- const cls3 = css\`
- display: flex;
- &:hover {
- color: hotpink;
- }
- \`
- let outerVar = 'something'
- function inner() {
- const styles = { color: 'darkorchid' }
- const color = 'aquamarine'
-
- const cls4 = css\`
- \${cls3};
- \${cls1};
- \${{ color: 'darkorchid' }};
- \${{ color }};
- \${css\`
- height: 420px;
- width: \${styles};
- \`};
- \`
- let someCls = css\`
- color: \${outerVar};
- \`
- }
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-function test() {
- const cls1 =
- /*#__PURE__*/
- _css(\\"font-size:20px;@media (min-width:420px){color:blue;\\",
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"ekayrg-cls1\\",
- styles: \\"width:96px;height:96px;;label:cls1;\\"
- } : {
- name: \\"ekayrg-cls1\\",
- styles: \\"width:96px;height:96px;;label:cls1;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6ImhvaXN0aW5nLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- }), \\";line-height:26px;}background:green;background-color:hotpink;;;label:cls1;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\"));
-
- const cls2 =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1tbvdns-cls2\\",
- styles: \\"color:blue;;;label:cls2;\\"
- } : {
- name: \\"1tbvdns-cls2\\",
- styles: \\"color:blue;;;label:cls2;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
-
- const cls3 =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1m06t0b-cls3\\",
- styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\"
- } : {
- name: \\"1m06t0b-cls3\\",
- styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
-
- let outerVar = 'something';
-
- function inner() {
- const styles = {
- color: 'darkorchid'
- };
- const color = 'aquamarine';
-
- const cls4 =
- /*#__PURE__*/
- _css(cls3, \\";\\", cls1, \\";color:darkorchid;;\\", {
- color
- }, \\";\\",
- /*#__PURE__*/
- _css(\\"height:420px;width:\\", styles, \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\")), \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"));
-
- let someCls =
- /*#__PURE__*/
- _css(\\"color:\\", outerVar, \\";;label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"));
- }
-}"
-`;
-
-exports[`vanilla emotion inject-global-basic 1`] = `
-"import { injectGlobal } from 'emotion/macro'
-
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-_injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\"
-} : {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmluamVjdEdsb2JhbGBcbiAgYm9keSB7XG4gICAgbWFyZ2luOiAwO1xuICAgIHBhZGRpbmc6IDA7XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion inject-global-change-import 1`] = `
-"import { injectGlobal as inject } from 'emotion/macro'
-
-inject\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`
-
-let injectGlobal = window.whatever
-
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-_injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\"
-} : {
- name: \\"1d66lop\\",
- styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuaW5qZWN0YFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBpbmplY3RHbG9iYWwgPSB3aW5kb3cud2hhdGV2ZXJcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-let injectGlobal = window.whatever;
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- & > div {
- display: flex;
- }
- }
- html {
- background: green;
- }
-\`;"
-`;
-
-exports[`vanilla emotion inject-global-with-font-face 1`] = `
-"import { injectGlobal } from 'emotion/macro'
-
-injectGlobal\`
- @font-face {
- font-family: 'Patrick Hand SC';
- font-style: normal;
- font-weight: 400;
- src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'),
- url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
- format('woff2');
- unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
- U+A720-A7FF;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-_injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"lu7y12\\",
- styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\"
-} : {
- name: \\"lu7y12\\",
- styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1mb250LWZhY2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC13aXRoLWZvbnQtZmFjZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmluamVjdEdsb2JhbGBcbiAgQGZvbnQtZmFjZSB7XG4gICAgZm9udC1mYW1pbHk6ICdQYXRyaWNrIEhhbmQgU0MnO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIHNyYzogbG9jYWwoJ1BhdHJpY2sgSGFuZCBTQycpLCBsb2NhbCgnUGF0cmlja0hhbmRTQy1SZWd1bGFyJyksXG4gICAgICB1cmwoaHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbS9zL3BhdHJpY2toYW5kc2MvdjQvT1lGV0NnZkNSLTd1SElvdmpVWlhzWjcxVWlzMFFlYjlHcW84SVpWN2NrRS53b2ZmMilcbiAgICAgICAgZm9ybWF0KCd3b2ZmMicpO1xuICAgIHVuaWNvZGUtcmFuZ2U6IFUrMDEwMC0wMjRmLCBVKzEtMWVmZiwgVSsyMGEwLTIwYWIsIFUrMjBhZC0yMGNmLCBVKzJjNjAtMmM3ZixcbiAgICAgIFUrQTcyMC1BN0ZGO1xuICB9XG5gXG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion inject-global-with-interpolation 1`] = `
-"import { injectGlobal } from 'emotion/macro'
-
-let display = window.whatever
-
-injectGlobal\`
- body {
- margin: 0;
- padding: 0;
- display: \${display};
- & > div {
- display: none;
- }
- }
- html {
- background: green;
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { injectGlobal as _injectGlobal } from \\"emotion\\";
-let display = window.whatever;
-
-_injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxubGV0IGRpc3BsYXkgPSB3aW5kb3cud2hhdGV2ZXJcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBkaXNwbGF5OiAke2Rpc3BsYXl9O1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\"));"
-`;
-
-exports[`vanilla emotion keyframes-basic 1`] = `
-"import { keyframes } from 'emotion/macro'
-
-const rotate360 = keyframes\`
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { keyframes as _keyframes } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-const rotate360 =
-/*#__PURE__*/
-_keyframes(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1k98dea-rotate360\\",
- styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
-} : {
- name: \\"1k98dea-rotate360\\",
- styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoia2V5ZnJhbWVzLWJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxuYFxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});"
-`;
-
-exports[`vanilla emotion keyframes-with-interpolation 1`] = `
-"import { keyframes } from 'emotion/macro'
-
-let endingRotation = window.whatever
-
-const rotate360 = keyframes\`
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(\${endingRotation});
- }
-\`
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { keyframes as _keyframes } from \\"emotion\\";
-let endingRotation = window.whatever;
-
-const rotate360 =
-/*#__PURE__*/
-_keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");};label:rotate360;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgZW5kaW5nUm90YXRpb24gPSB3aW5kb3cud2hhdGV2ZXJcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoJHtlbmRpbmdSb3RhdGlvbn0pO1xuICB9XG5gXG4iXX0= */\\"));"
-`;
-
-exports[`vanilla emotion object-label 1`] = `
-"import { css } from 'emotion/macro'
-
-let obj = {
- someProp: css({ color: 'green' }),
- anotherProp: css({ color: 'hotpink' })
-}
-class Thing {
- static Prop = css({ color: 'yellow' })
- BadIdea = css({ color: 'red' })
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { css as _css } from \\"emotion\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-let obj = {
- someProp:
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"16vqze6-someProp\\",
- styles: \\"color:green;;label:someProp;\\"
- } : {
- name: \\"16vqze6-someProp\\",
- styles: \\"color:green;;label:someProp;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- }),
- anotherProp:
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"r0tjkz-anotherProp\\",
- styles: \\"color:hotpink;;label:anotherProp;\\"
- } : {
- name: \\"r0tjkz-anotherProp\\",
- styles: \\"color:hotpink;;label:anotherProp;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- })
-};
-
-class Thing {
- static Prop =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1q8lxwm-Prop\\",
- styles: \\"color:yellow;;label:Prop;\\"
- } : {
- name: \\"1q8lxwm-Prop\\",
- styles: \\"color:yellow;;label:Prop;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoib2JqZWN0LWxhYmVsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxubGV0IG9iaiA9IHtcbiAgc29tZVByb3A6IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pLFxuICBhbm90aGVyUHJvcDogY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgUHJvcCA9IGNzcyh7IGNvbG9yOiAneWVsbG93JyB9KVxuICBCYWRJZGVhID0gY3NzKHsgY29sb3I6ICdyZWQnIH0pXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
- BadIdea =
- /*#__PURE__*/
- _css(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"15lhxip-BadIdea\\",
- styles: \\"color:red;;label:BadIdea;\\"
- } : {
- name: \\"15lhxip-BadIdea\\",
- styles: \\"color:red;;label:BadIdea;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
- });
-}"
-`;
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/index.js b/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/index.js
deleted file mode 100644
index c7c6a572b..000000000
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// @flow
-import tester from 'babel-tester'
-
-tester('vanilla emotion', __dirname)
diff --git a/packages/babel-plugin-emotion/src/css-macro.js b/packages/babel-plugin-emotion/src/css-macro.js
deleted file mode 100644
index 476b64675..000000000
--- a/packages/babel-plugin-emotion/src/css-macro.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// @flow
-import { createMacro } from 'babel-plugin-macros'
-import { addDefault, addNamed } from '@babel/helper-module-imports'
-import { transformExpressionWithStyles } from './utils'
-
-export const transformCssCallExpression = ({
- babel,
- state,
- path,
- sourceMap
-}: {
- babel: *,
- state: *,
- path: *,
- sourceMap?: string
-}) => {
- let node = transformExpressionWithStyles({
- babel,
- state,
- path,
- shouldLabel: true,
- sourceMap
- })
- if (node) {
- path.replaceWith(node)
- path.hoist()
- } else if (path.isCallExpression()) {
- path.addComment('leading', '#__PURE__')
- }
-}
-
-export default createMacro(({ references, state, babel, isEmotionCall }) => {
- if (!isEmotionCall) {
- state.emotionSourceMap = true
- }
- const t = babel.types
- if (references.default && references.default.length) {
- references.default.reverse().forEach(reference => {
- if (!state.cssIdentifier) {
- state.cssIdentifier = addDefault(reference, '@emotion/css', {
- nameHint: 'css'
- })
- }
- reference.replaceWith(t.cloneDeep(state.cssIdentifier))
- transformCssCallExpression({ babel, state, path: reference.parentPath })
- })
- }
- Object.keys(references)
- .filter(x => x !== 'default')
- .forEach(referenceKey => {
- let runtimeNode = addNamed(
- state.file.path,
- referenceKey,
- '@emotion/css',
- { nameHint: referenceKey }
- )
-
- references[referenceKey].reverse().forEach(reference => {
- reference.replaceWith(t.cloneDeep(runtimeNode))
- })
- })
-})
diff --git a/packages/babel-plugin-emotion/src/emotion-macro.js b/packages/babel-plugin-emotion/src/emotion-macro.js
deleted file mode 100644
index fe53db59d..000000000
--- a/packages/babel-plugin-emotion/src/emotion-macro.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// @flow
-import { transformExpressionWithStyles } from './utils'
-import { addNamed } from '@babel/helper-module-imports'
-import { createMacro } from 'babel-plugin-macros'
-
-export let createEmotionMacro = (instancePath: string) =>
- createMacro(function macro({ references, state, babel, isEmotionCall }) {
- if (!isEmotionCall) {
- state.emotionSourceMap = true
- }
-
- let t = babel.types
- Object.keys(references).forEach(referenceKey => {
- let isPure = true
- let runtimeNode = addNamed(state.file.path, referenceKey, instancePath)
-
- switch (referenceKey) {
- case 'injectGlobal': {
- isPure = false
- }
- // eslint-disable-next-line no-fallthrough
- case 'css':
- case 'keyframes': {
- references[referenceKey].reverse().forEach(reference => {
- const path = reference.parentPath
-
- reference.replaceWith(t.cloneDeep(runtimeNode))
- if (isPure) {
- path.addComment('leading', '#__PURE__')
- }
- let node = transformExpressionWithStyles({
- babel,
- state,
- path,
- shouldLabel: true
- })
- if (node) {
- path.node.arguments[0] = node
- }
- })
- break
- }
- default: {
- references[referenceKey].reverse().forEach(reference => {
- reference.replaceWith(t.cloneDeep(runtimeNode))
- })
- }
- }
- })
- })
diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js
deleted file mode 100644
index 23e0335ad..000000000
--- a/packages/babel-plugin-emotion/src/index.js
+++ /dev/null
@@ -1,241 +0,0 @@
-// @flow
-import { createEmotionMacro } from './emotion-macro'
-import { createStyledMacro } from './styled-macro'
-import cssMacro, { transformCssCallExpression } from './css-macro'
-import { addDefault } from '@babel/helper-module-imports'
-import nodePath from 'path'
-import { getSourceMap, getStyledOptions } from './utils'
-
-let webStyledMacro = createStyledMacro({
- importPath: '@emotion/styled-base',
- originalImportPath: '@emotion/styled',
- isWeb: true
-})
-let nativeStyledMacro = createStyledMacro({
- importPath: '@emotion/native',
- originalImportPath: '@emotion/native',
- isWeb: false
-})
-let primitivesStyledMacro = createStyledMacro({
- importPath: '@emotion/primitives',
- originalImportPath: '@emotion/primitives',
- isWeb: false
-})
-
-export const macros = {
- createEmotionMacro,
- css: cssMacro,
- createStyledMacro
-}
-
-export type BabelPath = any
-
-export type EmotionBabelPluginPass = any
-
-let emotionCoreMacroThatsNotARealMacro = ({ references, state, babel }) => {
- Object.keys(references).forEach(refKey => {
- if (refKey === 'css') {
- references[refKey].forEach(path => {
- transformCssCallExpression({ babel, state, path: path.parentPath })
- })
- }
- })
-}
-emotionCoreMacroThatsNotARealMacro.keepImport = true
-
-function getAbsolutePath(instancePath: string, rootPath: string) {
- if (instancePath.charAt(0) === '.') {
- let absoluteInstancePath = nodePath.resolve(rootPath, instancePath)
- return absoluteInstancePath
- }
- return false
-}
-
-function getInstancePathToCompare(instancePath: string, rootPath: string) {
- let absolutePath = getAbsolutePath(instancePath, rootPath)
- if (absolutePath === false) {
- return instancePath
- }
- return absolutePath
-}
-
-export default function(babel: *) {
- let t = babel.types
- return {
- name: 'emotion',
- inherits: require('babel-plugin-syntax-jsx'),
- visitor: {
- ImportDeclaration(path: *, state: *) {
- const hasFilepath =
- path.hub.file.opts.filename &&
- path.hub.file.opts.filename !== 'unknown'
- let dirname = hasFilepath
- ? nodePath.dirname(path.hub.file.opts.filename)
- : ''
-
- if (
- !state.pluginMacros[path.node.source.value] &&
- state.emotionInstancePaths.indexOf(
- getInstancePathToCompare(path.node.source.value, dirname)
- ) !== -1
- ) {
- state.pluginMacros[path.node.source.value] = createEmotionMacro(
- path.node.source.value
- )
- }
- let pluginMacros = state.pluginMacros
- // most of this is from https://github.com/kentcdodds/babel-plugin-macros/blob/master/src/index.js
- if (pluginMacros[path.node.source.value] === undefined) {
- return
- }
- if (t.isImportNamespaceSpecifier(path.node.specifiers[0])) {
- return
- }
- const imports = path.node.specifiers.map(s => ({
- localName: s.local.name,
- importedName:
- s.type === 'ImportDefaultSpecifier' ? 'default' : s.imported.name
- }))
- let shouldExit = false
- let hasReferences = false
- const referencePathsByImportName = imports.reduce(
- (byName, { importedName, localName }) => {
- let binding = path.scope.getBinding(localName)
- if (!binding) {
- shouldExit = true
- return byName
- }
- byName[importedName] = binding.referencePaths
- hasReferences =
- hasReferences || Boolean(byName[importedName].length)
- return byName
- },
- {}
- )
- if (!hasReferences || shouldExit) {
- return
- }
- /**
- * Other plugins that run before babel-plugin-macros might use path.replace, where a path is
- * put into its own replacement. Apparently babel does not update the scope after such
- * an operation. As a remedy, the whole scope is traversed again with an empty "Identifier"
- * visitor - this makes the problem go away.
- *
- * See: https://github.com/kentcdodds/import-all.macro/issues/7
- */
- state.file.scope.path.traverse({
- Identifier() {}
- })
-
- pluginMacros[path.node.source.value]({
- references: referencePathsByImportName,
- state,
- babel,
- isBabelMacrosCall: true,
- isEmotionCall: true
- })
- if (!pluginMacros[path.node.source.value].keepImport) {
- path.remove()
- }
- },
- Program(path: *, state: *) {
- state.emotionInstancePaths = (state.opts.instances || []).map(
- instancePath => getInstancePathToCompare(instancePath, process.cwd())
- )
- state.pluginMacros = {
- '@emotion/css': cssMacro,
- '@emotion/styled': webStyledMacro,
- '@emotion/core': emotionCoreMacroThatsNotARealMacro,
- '@emotion/primitives': primitivesStyledMacro,
- '@emotion/native': nativeStyledMacro,
- emotion: createEmotionMacro('emotion')
- }
- if (state.opts.cssPropOptimization === undefined) {
- for (const node of path.node.body) {
- if (
- t.isImportDeclaration(node) &&
- node.source.value === '@emotion/core' &&
- node.specifiers.some(
- x => t.isImportSpecifier(x) && x.imported.name === 'jsx'
- )
- ) {
- state.transformCssProp = true
- break
- }
- }
- } else {
- state.transformCssProp = state.opts.cssPropOptimization
- }
-
- if (state.opts.sourceMap === false) {
- state.emotionSourceMap = false
- } else {
- state.emotionSourceMap = true
- }
- },
- JSXAttribute(path: *, state: *) {
- if (path.node.name.name !== 'css' || !state.transformCssProp) {
- return
- }
-
- if (
- t.isJSXExpressionContainer(path.node.value) &&
- (t.isObjectExpression(path.node.value.expression) ||
- t.isArrayExpression(path.node.value.expression))
- ) {
- let expressionPath = path.get('value.expression')
- let sourceMap =
- state.emotionSourceMap && path.node.loc !== undefined
- ? getSourceMap(path.node.loc.start, state)
- : ''
-
- expressionPath.replaceWith(
- t.callExpression(
- // the name of this identifier doesn't really matter at all
- // it'll never appear in generated code
- t.identifier('___shouldNeverAppearCSS'),
- [path.node.value.expression]
- )
- )
-
- transformCssCallExpression({
- babel,
- state,
- path: expressionPath,
- sourceMap
- })
- if (t.isCallExpression(expressionPath)) {
- if (!state.cssIdentifier) {
- state.cssIdentifier = addDefault(path, '@emotion/css', {
- nameHint: 'css'
- })
- }
- expressionPath
- .get('callee')
- .replaceWith(t.cloneDeep(state.cssIdentifier))
- }
- }
- },
- CallExpression: {
- exit(path: BabelPath, state: EmotionBabelPluginPass) {
- try {
- if (
- path.node.callee &&
- path.node.callee.property &&
- path.node.callee.property.name === 'withComponent'
- ) {
- switch (path.node.arguments.length) {
- case 1:
- case 2: {
- path.node.arguments[1] = getStyledOptions(t, path, state)
- }
- }
- }
- } catch (e) {
- throw path.buildCodeFrameError(e)
- }
- }
- }
- }
- }
-}
diff --git a/packages/babel-plugin-emotion/src/styled-macro.js b/packages/babel-plugin-emotion/src/styled-macro.js
deleted file mode 100644
index be3e5be96..000000000
--- a/packages/babel-plugin-emotion/src/styled-macro.js
+++ /dev/null
@@ -1,113 +0,0 @@
-// @flow
-import { createMacro } from 'babel-plugin-macros'
-import { addDefault, addNamed } from '@babel/helper-module-imports'
-import { transformExpressionWithStyles, getStyledOptions } from './utils'
-
-export let createStyledMacro = ({
- importPath,
- originalImportPath = importPath,
- isWeb
-}: {
- importPath: string,
- originalImportPath?: string,
- isWeb: boolean
-}) =>
- createMacro(({ references, state, babel, isEmotionCall }) => {
- if (!isEmotionCall) {
- state.emotionSourceMap = true
- }
- const t = babel.types
- if (references.default && references.default.length) {
- let _styledIdentifier
- let getStyledIdentifier = () => {
- if (_styledIdentifier === undefined) {
- _styledIdentifier = addDefault(state.file.path, importPath, {
- nameHint: 'styled'
- })
- }
- return t.cloneDeep(_styledIdentifier)
- }
- let originalImportPathStyledIdentifier
- let getOriginalImportPathStyledIdentifier = () => {
- if (originalImportPathStyledIdentifier === undefined) {
- originalImportPathStyledIdentifier = addDefault(
- state.file.path,
- originalImportPath,
- {
- nameHint: 'styled'
- }
- )
- }
- return t.cloneDeep(originalImportPathStyledIdentifier)
- }
- if (importPath === originalImportPath) {
- getOriginalImportPathStyledIdentifier = getStyledIdentifier
- }
- references.default.forEach(reference => {
- let isCall = false
- if (
- t.isMemberExpression(reference.parent) &&
- reference.parent.computed === false
- ) {
- isCall = true
- if (
- // checks if the first character is lowercase
- // becasue we don't want to transform the member expression if
- // it's in primitives/native
- reference.parent.property.name.charCodeAt(0) > 96
- ) {
- reference.parentPath.replaceWith(
- t.callExpression(getStyledIdentifier(), [
- t.stringLiteral(reference.parent.property.name)
- ])
- )
- } else {
- reference.replaceWith(getStyledIdentifier())
- }
- } else if (
- reference.parentPath &&
- reference.parentPath.parentPath &&
- t.isCallExpression(reference.parentPath) &&
- reference.parent.callee === reference.node
- ) {
- isCall = true
- reference.replaceWith(getStyledIdentifier())
- } else {
- reference.replaceWith(getOriginalImportPathStyledIdentifier())
- }
- if (reference.parentPath && reference.parentPath.parentPath) {
- const styledCallPath = reference.parentPath.parentPath
- let node = transformExpressionWithStyles({
- path: styledCallPath,
- state,
- babel,
- shouldLabel: false
- })
- if (node && isWeb) {
- // we know the argument length will be 1 since that's the only time we will have a node since it will be static
- styledCallPath.node.arguments[0] = node
- }
- }
-
- if (isCall) {
- reference.addComment('leading', '#__PURE__')
- if (isWeb) {
- reference.parentPath.node.arguments[1] = getStyledOptions(
- t,
- reference.parentPath,
- state
- )
- }
- }
- })
- }
- Object.keys(references)
- .filter(x => x !== 'default')
- .forEach(referenceKey => {
- let runtimeNode = addNamed(state.file.path, referenceKey, importPath)
-
- references[referenceKey].reverse().forEach(reference => {
- reference.replaceWith(t.cloneDeep(runtimeNode))
- })
- })
- })
diff --git a/packages/babel-plugin-emotion/src/utils/minify-utils.js b/packages/babel-plugin-emotion/src/utils/minify-utils.js
deleted file mode 100644
index b90946401..000000000
--- a/packages/babel-plugin-emotion/src/utils/minify-utils.js
+++ /dev/null
@@ -1,96 +0,0 @@
-// @flow
-// babel-plugin-styled-components
-// https://github.com/styled-components/babel-plugin-styled-components/blob/8d44acc36f067d60d4e09f9c22ff89695bc332d2/src/minify/index.js
-
-const multilineCommentRegex = /\/\*[^!](.|[\r\n])*?\*\//g
-const lineCommentStart = /\/\//g
-const symbolRegex = /(\s*[;:{},]\s*)/g
-
-// Counts occurences of substr inside str
-const countOccurences = (str, substr) => str.split(substr).length - 1
-
-// Joins substrings until predicate returns true
-const reduceSubstr = (substrs, join, predicate) => {
- const length = substrs.length
- let res = substrs[0]
-
- if (length === 1) {
- return res
- }
-
- for (let i = 1; i < length; i++) {
- if (predicate(res)) {
- break
- }
-
- res += join + substrs[i]
- }
-
- return res
-}
-
-// Joins at comment starts when it's inside a string or parantheses
-// effectively removing line comments
-export const stripLineComment = (line: string) =>
- reduceSubstr(
- line.split(lineCommentStart),
- '//',
- str =>
- !str.endsWith(':') && // NOTE: This is another guard against urls, if they're not inside strings or parantheses.
- countOccurences(str, "'") % 2 === 0 &&
- countOccurences(str, '"') % 2 === 0 &&
- countOccurences(str, '(') === countOccurences(str, ')')
- )
-
-export const compressSymbols = (code: string) =>
- code.split(symbolRegex).reduce((str, fragment, index) => {
- // Even-indices are non-symbol fragments
- if (index % 2 === 0) {
- return str + fragment
- }
-
- // Only manipulate symbols outside of strings
- if (
- countOccurences(str, "'") % 2 === 0 &&
- countOccurences(str, '"') % 2 === 0
- ) {
- return str + fragment.trim()
- }
-
- return str + fragment
- }, '')
-
-// Detects lines that are exclusively line comments
-const isLineComment = line => line.trim().startsWith('//')
-const linebreakRegex = /[\r\n]\s*/g
-const spacesAndLinebreakRegex = /\s+|\n+/g
-
-function multilineReplacer(match: string) {
- // When we encounter a standard multi-line CSS comment and it contains a '@'
- // character, we keep the comment but optimize it into a single line. Some
- // Stylis plugins, such as the stylis-rtl via the cssjanus plugin, use this
- // special comment syntax to control behavior (such as: /* @noflip */).
- // We can do this with standard CSS comments because they will work with
- // compression, as opposed to non-standard single-line comments that will
- // break compressed CSS. If the comment doesn't contain '@', then we replace
- // it with a line break, which effectively removes it from the output.
-
- const keepComment = match.indexOf('@') > -1
-
- if (keepComment) {
- return match.replace(spacesAndLinebreakRegex, ' ').trim()
- }
-
- return '\n'
-}
-
-export const minify = (code: string) => {
- const newCode = code
- .replace(multilineCommentRegex, multilineReplacer) // If allowed, remove line breaks and extra space from multi-line comments so they appear on one line
- .split(linebreakRegex) // Split at newlines
- .filter(line => line.length > 0 && !isLineComment(line)) // Removes lines containing only line comments
- .map(stripLineComment) // Remove line comments inside text
- .join(' ') // Rejoin all lines
-
- return compressSymbols(newCode)
-}
diff --git a/packages/babel-plugin-emotion/src/utils/minify.js b/packages/babel-plugin-emotion/src/utils/minify.js
deleted file mode 100644
index d9f0b64af..000000000
--- a/packages/babel-plugin-emotion/src/utils/minify.js
+++ /dev/null
@@ -1,88 +0,0 @@
-// @flow
-import { minify } from './minify-utils'
-
-export function getExpressionsFromTemplateLiteral(node: *, t: *): Array<*> {
- const raw = createRawStringFromTemplateLiteral(node)
- const minified = minify(raw)
- return replacePlaceholdersWithExpressions(minified, node.expressions || [], t)
-}
-
-const interleave = (strings: Array<*>, interpolations: Array<*>) =>
- interpolations.reduce(
- (array, interp, i) => array.concat([interp], strings[i + 1]),
- [strings[0]]
- )
-
-function getDynamicMatches(str: string) {
- const re = /xxx(\d+)xxx/gm
- let match
- const matches = []
- while ((match = re.exec(str)) !== null) {
- // so that flow doesn't complain
- if (match !== null) {
- matches.push({
- value: match[0],
- p1: parseInt(match[1], 10),
- index: match.index
- })
- }
- }
-
- return matches
-}
-
-function replacePlaceholdersWithExpressions(
- str: string,
- expressions: Array<*>,
- t: *
-) {
- const matches = getDynamicMatches(str)
- if (matches.length === 0) {
- if (str === '') {
- return []
- }
- return [t.stringLiteral(str)]
- }
- const strings = []
- const finalExpressions = []
- let cursor = 0
-
- matches.forEach(({ value, p1, index }, i) => {
- const preMatch = str.substring(cursor, index)
- cursor = cursor + preMatch.length + value.length
- if (preMatch) {
- strings.push(t.stringLiteral(preMatch))
- } else if (i === 0) {
- strings.push(t.stringLiteral(''))
- }
-
- finalExpressions.push(expressions[p1])
- if (i === matches.length - 1) {
- strings.push(t.stringLiteral(str.substring(index + value.length)))
- }
- })
-
- return interleave(strings, finalExpressions).filter(
- (node: { value: string }) => {
- return node.value !== ''
- }
- )
-}
-
-function createRawStringFromTemplateLiteral(quasi: {
- quasis: Array<{ value: { cooked: string } }>
-}) {
- let strs = quasi.quasis.map(x => x.value.cooked)
-
- const src = strs
- .reduce((arr, str, i) => {
- arr.push(str)
- if (i !== strs.length - 1) {
- arr.push(`xxx${i}xxx`)
- }
- return arr
- }, [])
- .join('')
- .trim()
- return src
-}
diff --git a/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js b/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js
deleted file mode 100644
index 2bac853e4..000000000
--- a/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js
+++ /dev/null
@@ -1,174 +0,0 @@
-// @flow
-
-import { serializeStyles } from '@emotion/serialize'
-import { getExpressionsFromTemplateLiteral } from './minify'
-import { getLabelFromPath } from './label'
-import { getSourceMap } from './source-maps'
-import { simplifyObject } from './object-to-string'
-import { appendStringToArguments, joinStringLiterals } from './strings'
-import {
- getTypeScriptMakeTemplateObjectPath,
- isTaggedTemplateTranspiledByBabel
-} from './transpiled-output-utils'
-
-const CSS_OBJECT_STRINGIFIED_ERROR =
- "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
-
-// with babel@6 fallback
-const cloneNode = (t, node) =>
- typeof t.cloneNode === 'function' ? t.cloneNode(node) : t.cloneDeep(node)
-
-function createSourceMapConditional(t, production, development) {
- return t.conditionalExpression(
- t.binaryExpression(
- '===',
- t.memberExpression(
- t.memberExpression(t.identifier('process'), t.identifier('env')),
- t.identifier('NODE_ENV')
- ),
- t.stringLiteral('production')
- ),
- production,
- development
- )
-}
-
-export let transformExpressionWithStyles = ({
- babel,
- state,
- path,
- shouldLabel,
- sourceMap = ''
-}: {
- babel: *,
- state: *,
- path: *,
- shouldLabel: boolean,
- sourceMap?: string
-}): * => {
- let t = babel.types
- if (t.isTaggedTemplateExpression(path)) {
- const expressions = getExpressionsFromTemplateLiteral(path.node.quasi, t)
- if (state.emotionSourceMap && path.node.quasi.loc !== undefined) {
- sourceMap = getSourceMap(path.node.quasi.loc.start, state)
- }
- path.replaceWith(t.callExpression(path.node.tag, expressions))
- }
-
- if (t.isCallExpression(path)) {
- const canAppendStrings = path.node.arguments.every(
- arg => arg.type !== 'SpreadElement'
- )
-
- if (canAppendStrings && shouldLabel) {
- const label = getLabelFromPath(path, state, t)
- if (label) {
- appendStringToArguments(path, `;label:${label};`, t)
- }
- }
-
- path.get('arguments').forEach(node => {
- if (t.isObjectExpression(node)) {
- node.replaceWith(simplifyObject(node.node, t))
- }
- })
-
- path.node.arguments = joinStringLiterals(path.node.arguments, t)
-
- if (
- canAppendStrings &&
- state.emotionSourceMap &&
- !sourceMap &&
- path.node.loc !== undefined
- ) {
- sourceMap = getSourceMap(path.node.loc.start, state)
- }
-
- if (
- path.node.arguments.length === 1 &&
- t.isStringLiteral(path.node.arguments[0])
- ) {
- let cssString = path.node.arguments[0].value
- let res = serializeStyles([cssString])
- let prodNode = t.objectExpression([
- t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
- t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles))
- ])
- let node = prodNode
- if (sourceMap) {
- if (!state.emotionStringifiedCssId) {
- const uid = state.file.scope.generateUidIdentifier(
- '__EMOTION_STRINGIFIED_CSS_ERROR__'
- )
- state.emotionStringifiedCssId = uid
- const cssObjectToString = t.functionDeclaration(
- uid,
- [],
- t.blockStatement([
- t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR))
- ])
- )
- cssObjectToString._compact = true
- state.file.path.unshiftContainer('body', [cssObjectToString])
- }
- let devNode = t.objectExpression([
- t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
- t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)),
- t.objectProperty(t.identifier('map'), t.stringLiteral(sourceMap)),
- t.objectProperty(
- t.identifier('toString'),
- cloneNode(t, state.emotionStringifiedCssId)
- )
- ])
- node = createSourceMapConditional(t, prodNode, devNode)
- }
-
- return node
- }
- if (sourceMap) {
- let lastIndex = path.node.arguments.length - 1
- let last = path.node.arguments[lastIndex]
- let sourceMapConditional = createSourceMapConditional(
- t,
- t.stringLiteral(''),
- t.stringLiteral(sourceMap)
- )
- if (t.isStringLiteral(last)) {
- path.node.arguments[lastIndex] = t.binaryExpression(
- '+',
- last,
- sourceMapConditional
- )
- } else {
- const makeTemplateObjectCallPath = getTypeScriptMakeTemplateObjectPath(
- path
- )
-
- if (makeTemplateObjectCallPath) {
- const sourceMapId = state.file.scope.generateUidIdentifier(
- 'emotionSourceMap'
- )
- const sourceMapDeclaration = t.variableDeclaration('var', [
- t.variableDeclarator(sourceMapId, sourceMapConditional)
- ])
- sourceMapDeclaration._compact = true
- state.file.path.unshiftContainer('body', [sourceMapDeclaration])
-
- makeTemplateObjectCallPath.get('arguments').forEach(argPath => {
- const elements = argPath.get('elements')
- const lastElement = elements[elements.length - 1]
- lastElement.replaceWith(
- t.binaryExpression(
- '+',
- lastElement.node,
- cloneNode(t, sourceMapId)
- )
- )
- })
- } else if (!isTaggedTemplateTranspiledByBabel(path)) {
- path.node.arguments.push(sourceMapConditional)
- }
- }
- }
- }
-}
diff --git a/packages/babel-plugin-jsx-pragmatic/README.md b/packages/babel-plugin-jsx-pragmatic/README.md
index 92392214e..cefa96b0b 100644
--- a/packages/babel-plugin-jsx-pragmatic/README.md
+++ b/packages/babel-plugin-jsx-pragmatic/README.md
@@ -6,7 +6,7 @@ The original README of babel-plugin-jsx-pragmatic with some modifications is sho
---
-[@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html) has a `pragma` option that's used when transforming JSX to function calls instead of the default function `React.createElement`.
+[@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx.html) has a `pragma` option that's used when transforming JSX to function calls instead of the default function `React.createElement`.
This Babel plugin is a companion to that feature that allows you to dynamically load a module associated with the `pragma` value.
@@ -27,10 +27,10 @@ React.createElement(Some, { jsx: 'element' })
By setting the `pragma` option like this:
```js
-babel.transform(code, {
+babel.transformSync(code, {
plugins: [
[
- 'babel-plugin-transform-react-jsx',
+ '@babel/plugin-transform-react-jsx',
{
pragma: 'whatever'
}
@@ -56,10 +56,10 @@ var whatever = require('whatever')
This plugin allows you to make that part dynamic as well:
```js
-babel.transform(code, {
+babel.transformSync(code, {
plugins: [
[
- 'babel-plugin-transform-react-jsx',
+ '@babel/plugin-transform-react-jsx',
{
pragma: 'whatever'
}
@@ -96,7 +96,7 @@ String. The identifier that you want to import the `module` with. This should co
{
plugins: [
[
- 'babel-plugin-transform-react-jsx',
+ '@babel/plugin-transform-react-jsx',
{
pragma: 'x'
}
@@ -115,7 +115,7 @@ String. The identifier that you want to import the `module` with. This should co
{
plugins: [
[
- 'babel-plugin-transform-react-jsx',
+ '@babel/plugin-transform-react-jsx',
{
pragma: 'x.y'
}
diff --git a/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap
index 8a22e108f..97c159000 100644
--- a/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap
+++ b/packages/babel-plugin-jsx-pragmatic/__tests__/__snapshots__/index.js.snap
@@ -20,7 +20,7 @@ import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
ReactDOM.render(
↓ ↓ ↓ ↓ ↓ ↓
import * as React from 'react';
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
const P = () =>
;"
`;
diff --git a/packages/babel-plugin-jsx-pragmatic/__tests__/index.js b/packages/babel-plugin-jsx-pragmatic/__tests__/index.js
index 0cd05c4b8..4aee36786 100644
--- a/packages/babel-plugin-jsx-pragmatic/__tests__/index.js
+++ b/packages/babel-plugin-jsx-pragmatic/__tests__/index.js
@@ -8,7 +8,7 @@ babelTester('@emotion/babel-plugin-jsx-pragmatic', __dirname, {
jsxPragmatic,
{
export: 'jsx',
- module: '@emotion/core',
+ module: '@emotion/react',
import: '___EmotionJSX'
}
]
diff --git a/packages/babel-plugin-jsx-pragmatic/package.json b/packages/babel-plugin-jsx-pragmatic/package.json
index fd257be11..9ace31064 100644
--- a/packages/babel-plugin-jsx-pragmatic/package.json
+++ b/packages/babel-plugin-jsx-pragmatic/package.json
@@ -2,10 +2,13 @@
"name": "@emotion/babel-plugin-jsx-pragmatic",
"version": "0.1.5",
"description": "Insert code to load a module corresponding to JSX pragma.",
- "main": "dist/babel-plugin-jsx-pragmatic.cjs.js",
- "module": "dist/babel-plugin-jsx-pragmatic.esm.js",
+ "main": "dist/emotion-babel-plugin-jsx-pragmatic.cjs.js",
+ "module": "dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-jsx-pragmatic",
+ "scripts": {
+ "test:typescript": "exit 0"
+ },
"dependencies": {
"@babel/plugin-syntax-jsx": "^7.12.1"
},
@@ -20,6 +23,6 @@
"access": "public"
},
"devDependencies": {
- "@babel/core": "^7.5.5"
+ "@babel/core": "^7.7.2"
}
}
diff --git a/packages/babel-plugin/CHANGELOG.md b/packages/babel-plugin/CHANGELOG.md
new file mode 100644
index 000000000..be39c7411
--- /dev/null
+++ b/packages/babel-plugin/CHANGELOG.md
@@ -0,0 +1,301 @@
+# @emotion/babel-plugin
+
+## 11.0.0
+
+### Major Changes
+
+- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `babel-plugin-emotion` to `@emotion/babel-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` in your Babel config.
+
+* [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option
+
+* [`c65c5d88`](https://github.com/emotion-js/emotion/commit/c65c5d887002d76557eaefcb98091d795b13f9a9) [#1622](https://github.com/emotion-js/emotion/pull/1622) Thanks [@Andarist](https://github.com/Andarist)! - Drop Babel 6 support
+
+- [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1656](https://github.com/emotion-js/emotion/pull/1656) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+
+ Each possible value for this option produces different output code:
+
+ - with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+ - with `always` we always add labels when possible,
+ - with `never` we disable this entirely and no labels are added.
+
+* [`b7d21373`](https://github.com/emotion-js/emotion/commit/b7d21373d967d0f958dd59aaaa650047e23e8e8b) [#2080](https://github.com/emotion-js/emotion/pull/2080) Thanks [@Andarist](https://github.com/Andarist)! - `cssPropOptimization` defaults now to `true` regardless of the `@emotion/react` import presence.
+
+### Minor Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Added the `importMap` option which allows you to tell `@emotion/babel-plugin` what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
+
+- [`c672175b`](https://github.com/emotion-js/emotion/commit/c672175b52e86de43b3d4092a8fe34b2023ceae8) [#1130](https://github.com/emotion-js/emotion/pull/1130) Thanks [@jtmthf](https://github.com/jtmthf)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.
+
+* [`5e803106`](https://github.com/emotion-js/emotion/commit/5e803106d391b7c036bdf634318b80337a1d9b70) [#1893](https://github.com/emotion-js/emotion/pull/1893) Thanks [@Andarist](https://github.com/Andarist)! - Added support for converting assignment expressions to labels in cases like this:
+
+ ```js
+ styles = css``
+ Timeline.Item = styled.li``
+ Timeline.Item.Anchor = styled.a``
+ ```
+
+- [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1651](https://github.com/emotion-js/emotion/pull/1651) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
+
+* [`5c7ec859`](https://github.com/emotion-js/emotion/commit/5c7ec85904633a11185066fa591dc8969f3f2ff2) [#1805](https://github.com/emotion-js/emotion/pull/1805) Thanks [@Andarist](https://github.com/Andarist)! - Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.
+
+* [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1639](https://github.com/emotion-js/emotion/pull/1639) Thanks [@Andarist](https://github.com/Andarist)! - `Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps.
+
+### Patch Changes
+
+- [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0) [#1602](https://github.com/emotion-js/emotion/pull/1602) Thanks [@Andarist](https://github.com/Andarist)! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such
+
+* [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like `& :hover` the whitespace before colon has a semantic meaning and needs to be preserved.
+
+* Updated dependencies [[`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387), [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403), [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85), [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07), [`c6431074`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]:
+ - @emotion/serialize@1.0.0
+
+## 11.0.0-rc.0
+
+### Major Changes
+
+- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
+
+### Patch Changes
+
+- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
+ - @emotion/serialize@1.0.0-rc.0
+
+## 11.0.0-next.17
+
+### Patch Changes
+
+- Updated dependencies [[`76e3dc4d`](https://github.com/emotion-js/emotion/commit/76e3dc4dd3e76423aa5d527b3e66fe3be1722e5a)]:
+ - @emotion/serialize@1.0.0-next.5
+
+## 11.0.0-next.16
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @emotion/serialize@0.11.15-next.4
+
+## 11.0.0-next.15
+
+### Patch Changes
+
+- Updated dependencies [[`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07)]:
+ - @emotion/serialize@1.0.0-next.3
+
+## 11.0.0-next.13
+
+### Minor Changes
+
+- [`5e803106`](https://github.com/emotion-js/emotion/commit/5e803106d391b7c036bdf634318b80337a1d9b70) [#1893](https://github.com/emotion-js/emotion/pull/1893) Thanks [@Andarist](https://github.com/Andarist)! - Added support for converting assignment expressions to labels in cases like this:
+
+ ```js
+ styles = css``
+ Timeline.Item = styled.li``
+ Timeline.Item.Anchor = styled.a``
+ ```
+
+### Patch Changes
+
+- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like `& :hover` the whitespace before colon has a semantic meaning and needs to be preserved.
+
+- Updated dependencies []:
+ - @emotion/serialize@0.11.15-next.2
+
+## 11.0.0-next.12
+
+### Minor Changes
+
+- [`5c7ec859`](https://github.com/emotion-js/emotion/commit/5c7ec85904633a11185066fa591dc8969f3f2ff2) [#1805](https://github.com/emotion-js/emotion/pull/1805) Thanks [@Andarist](https://github.com/Andarist)! - Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.
+
+### Patch Changes
+
+- [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d) [#1732](https://github.com/emotion-js/emotion/pull/1732) Thanks [@Andarist](https://github.com/Andarist)! - Fixed a regression from [a PR which has optimized Babel output](https://github.com/emotion-js/emotion/pull/1656) which has caused inserted label not being extracted correctly and also broke styles composition in certain situations.
+
+- Updated dependencies [[`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d)]:
+ - @emotion/serialize@1.0.0-next.1
+
+## 11.0.0-next.11
+
+### Patch Changes
+
+- Updated dependencies [[`f08ef5a3`](https://github.com/emotion-js/emotion/commit/f08ef5a316c1d05bff8e7f3690781e1089a263c6)]:
+ - @emotion/serialize@0.11.15-next.4
+
+## 11.0.0-next.10
+
+### Major Changes
+
+- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `babel-plugin-emotion` to `@emotion/babel-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` in your Babel config.
+
+* [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1656](https://github.com/emotion-js/emotion/pull/1656) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+
+ Each possible value for this option produces different output code:
+
+ - with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+ - with `always` we always add labels when possible,
+ - with `never` we disable this entirely and no labels are added.
+
+## 11.0.0-next.6
+
+### Major Changes
+
+- [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - Removed `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/core/macro` has been added to account for this use case and appropriate changes has been made to `babel-plugin-emotion` to facilitate those changes.
+
+ If you have used `@emotion/css` directly (it was always reexported from `@emotion/core`) or you have been using its macro then you should update your code like this:
+
+ ```diff
+ -import css from '@emotion/css'
+ +import { css } from '@emotion/core'
+
+ // or
+ -import css from '@emotion/css/macro'
+ +import { css } from '@emotion/core/macro'
+ ```
+
+### Minor Changes
+
+- [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1651](https://github.com/emotion-js/emotion/pull/1651) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
+
+* [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1639](https://github.com/emotion-js/emotion/pull/1639) Thanks [@Andarist](https://github.com/Andarist)! - `Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps.
+
+## 11.0.0-next.4
+
+### Major Changes
+
+- [`c65c5d88`](https://github.com/emotion-js/emotion/commit/c65c5d887002d76557eaefcb98091d795b13f9a9) [#973](https://github.com/emotion-js/emotion/pull/973) Thanks [@Andarist](https://github.com/Andarist)! - Drop Babel 6 support
+
+## 11.0.0-next.3
+
+### Major Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option
+
+* [`f9feab1a`](https://github.com/emotion-js/emotion/commit/f9feab1a5d1ca88e53c3f7a063be5d5871cc93e8) [#1575](https://github.com/emotion-js/emotion/pull/1575) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for `@emotion/styled-base` package. It has been moved to `@emotion/styled` and is available as `@emotion/styled/base`. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when `@emotion/styled-base` was not installed explicitly by a user.
+
+### Minor Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Added the `importMap` option which allows you to tell babel-plugin-emotion what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
+
+### Patch Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix issue with not updating referenced import when bailing out on already transpiled vanilla emotion nodes (a regression introduced in #1602)
+- Updated dependencies [[`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387), [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85)]:
+ - @emotion/serialize@0.11.15-next.1
+
+## 11.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]:
+ - @emotion/serialize@1.0.0-next.0
+
+## 11.0.0-next.0
+
+### Major Changes
+
+- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number
+
+### Patch Changes
+
+- [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0) [#1602](https://github.com/emotion-js/emotion/pull/1602) Thanks [@Andarist](https://github.com/Andarist)! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such
+
+## 10.0.33
+
+### Patch Changes
+
+- [`b9f8ae3`](https://github.com/emotion-js/emotion/commit/b9f8ae3f6e18b0569376b9ed62e9d09d141adff8) [#1829](https://github.com/emotion-js/emotion/pull/1829) Thanks [@Andarist](https://github.com/Andarist)! - Skip appending source maps & labels to Babel-transpiled tagged template expressions.
+
+## 10.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`446e756`](https://github.com/emotion-js/emotion/commit/446e75661c4aa01e51d1466472a212940c19cd82)]:
+ - @emotion/hash@0.8.0
+ - @emotion/serialize@0.11.16
+
+## 10.0.28
+
+### Patch Changes
+
+- [`4dfe558`](https://github.com/emotion-js/emotion/commit/4dfe55811a25bf66306aee46f7f0d6c909004c42) [#1731](https://github.com/emotion-js/emotion/pull/1731) Thanks [@ndelangen](https://github.com/ndelangen)! - Fixed an issue with adding `label` & `target` options to `styled`-related calls when those properties were already set, causing those properties to be duplicated. This could have happened for example when transpiling already transpiled code or when providing those options manually (latter being less likely).
+
+* [`af07afb`](https://github.com/emotion-js/emotion/commit/af07afbe5a887be82f72a12fd6cd1673a32f5263) [#1761](https://github.com/emotion-js/emotion/pull/1761) Thanks [@mansourkheffache](https://github.com/mansourkheffache)! - Push source maps & labels to cooked/raw arrays in TS-transpiled tagged template expressions containing interpolations. This is a case not covered previously by [#1538](https://github.com/emotion-js/emotion/pull/1538).
+
+## 10.0.27
+
+### Patch Changes
+
+- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
+- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
+ - @emotion/hash@0.7.4
+ - @emotion/memoize@0.7.4
+ - @emotion/serialize@0.11.15
+
+## 10.0.23
+
+### Patch Changes
+
+- [`3927293d`](https://github.com/emotion-js/emotion/commit/3927293d0b9d96b4a7c00196e8430728759b1161) [#1569](https://github.com/emotion-js/emotion/pull/1569) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object (generated by Babel) being stringified by accident
+
+* [`b3a0f148`](https://github.com/emotion-js/emotion/commit/b3a0f1484f2efcc78b447639ff2e0bc0f29915ae) [#1574](https://github.com/emotion-js/emotion/pull/1574) Thanks [@Andarist](https://github.com/Andarist)! - Fix babel plugin crashing when called programmatically without providing a filename
+
+* Updated dependencies [[`a55f3d49`](https://github.com/emotion-js/emotion/commit/a55f3d49c2febdf7eb1bede3f12da13c3efa1399), [`ca95f385`](https://github.com/emotion-js/emotion/commit/ca95f385f7ce3da6d53de1a652b3b219f11434c4)]:
+ - @emotion/serialize@0.11.14
+
+## 10.0.22
+
+### Patch Changes
+
+- [`1bb3efe3`](https://github.com/emotion-js/emotion/commit/1bb3efe399ddf0f3332187f3c751fbba9326d02c) [#1554](https://github.com/emotion-js/emotion/pull/1554) Thanks [@Andarist](https://github.com/Andarist)! - Prepend appended label string with semicolon to avoid problems with declaration blocks without a final semicolon
+
+- Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286)]:
+ - @emotion/serialize@0.11.12
+
+## 10.0.21
+
+### Patch Changes
+
+- [0eafebb5](https://github.com/emotion-js/emotion/commit/0eafebb5119212897f81084f63a807c02b0012fc) [#1538](https://github.com/emotion-js/emotion/pull/1538) Thanks [@Andarist](https://github.com/Andarist)! - Push source maps & labels to cooked/raw arrays in TS-transpiled tagged template expressions
+
+## 10.0.20
+
+### Patch Changes
+
+- [1b3791d4](https://github.com/emotion-js/emotion/commit/1b3791d4c458838a097c815a38108c9719023b92) [#1526](https://github.com/emotion-js/emotion/pull/1526) Thanks [@ahutchings](https://github.com/ahutchings)! - Fix `autoLabel` crash on `css` used in expression assigned to an object pattern
+
+## 10.0.19
+
+- Updated dependencies [c81c0033]:
+ - @emotion/serialize@0.11.11
+ - @emotion/hash@0.7.3
+ - @emotion/memoize@0.7.3
+
+## 10.0.17
+
+### Patch Changes
+
+- [b22b4ca4](https://github.com/emotion-js/emotion/commit/b22b4ca460ec66ea313dd9ea9556bd7a2d04798c) [#1485](https://github.com/emotion-js/emotion/pull/1485) Thanks [@JSteunou](https://github.com/JSteunou)! - Fix `autoLabel` crash on `css` used as a computed key of an object
+
+## 10.0.16
+
+### Patch Changes
+
+- [1ea9b3a6](https://github.com/emotion-js/emotion/commit/1ea9b3a6) - Fix an inconsistency with Babel config ordering in the README
+
+## 10.0.15
+
+### Patch Changes
+
+- [4a3b18a2](https://github.com/emotion-js/emotion/commit/4a3b18a2) [#1451](https://github.com/emotion-js/emotion/pull/1451) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with auto-labelling crashing on \$ at runtime
+- [284f8fa](https://github.com/emotion-js/emotion/commit/284f8fa9e0d2926fa26346e63519f8db24e22cc7) [#1336](https://github.com/emotion-js/emotion/pull/1336) Thanks [@Zenwolf](https://github.com/Zenwolf)! - Keep CSS comments that include `@`
+
+## 10.0.14
+
+### Patch Changes
+
+- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
+
+## 10.0.13
+
+### Patch Changes
+
+- [7bad392c](https://github.com/emotion-js/emotion/commit/7bad392c) [#1387](https://github.com/emotion-js/emotion/pull/1387) Thanks [@mherodev](https://github.com/mherodev)! - Added object property auto label support for babel-plugin-emotion
diff --git a/packages/babel-plugin-emotion/LICENSE b/packages/babel-plugin/LICENSE
similarity index 100%
rename from packages/babel-plugin-emotion/LICENSE
rename to packages/babel-plugin/LICENSE
diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin/README.md
similarity index 72%
rename from packages/babel-plugin-emotion/README.md
rename to packages/babel-plugin/README.md
index 16000d681..465498841 100644
--- a/packages/babel-plugin-emotion/README.md
+++ b/packages/babel-plugin/README.md
@@ -1,9 +1,9 @@
-# babel-plugin-emotion
+# @emotion/babel-plugin
> Babel plugin for the minification and optimization of emotion styles.
-`babel-plugin-emotion` is highly recommended, but not required in version 8 and
-above of `emotion`.
+`@emotion/babel-plugin` is highly recommended, but not required in version 8 and
+above of Emotion.
## Features
@@ -97,13 +97,13 @@ const myStyles = /* #__PURE__ */ css(
## Installation
```bash
-yarn add --dev babel-plugin-emotion
+yarn add --dev @emotion/babel-plugin
```
or if you prefer npm
```bash
-npm install --save-dev babel-plugin-emotion
+npm install --save-dev @emotion/babel-plugin
```
## Usage
@@ -116,7 +116,7 @@ Without options:
```json
{
- "plugins": ["emotion"]
+ "plugins": ["@emotion"]
}
```
@@ -128,11 +128,11 @@ _Defaults Shown_
{
"plugins": [
[
- "emotion",
+ "@emotion",
{
// sourceMap is on by default but source maps are dead code eliminated in production
"sourceMap": true,
- "autoLabel": process.env.NODE_ENV !== 'production',
+ "autoLabel": "dev-only",
"labelFormat": "[local]",
"cssPropOptimization": true
}
@@ -147,21 +147,21 @@ Recommended Setup
```json
{
- "plugins": ["emotion"]
+ "plugins": ["@emotion"]
}
```
### Via CLI
```bash
-babel --plugins babel-plugin-emotion script.js
+babel --plugins @emotion/babel-plugin script.js
```
### Via Node API
```javascript
require('@babel/core').transform('code', {
- plugins: ['babel-plugin-emotion']
+ plugins: ['@emotion/babel-plugin']
})
```
@@ -179,11 +179,11 @@ This option enables the following:
> Note:
>
-> Source maps are on by default in babel-plugin-emotion but they will be removed in production builds
+> Source maps are on by default in @emotion/babel-plugin but they will be removed in production builds
### `autoLabel`
-`boolean`, defaults to `process.env.NODE_ENV !== 'production'`.
+`'dev-only' | 'always' | 'never'`, , defaults to `dev-only`.
This option enables the following:
@@ -194,6 +194,12 @@ This option enables the following:
(Eg. `iconStyles$1` will become `iconStyles1`) because `$` is not valid
[CSS ClassName Selector](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#449000)
+Each possible value for this option produces different output code:
+
+- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+- with `always` we always add labels when possible,
+- with `never` we disable this entirely and no labels are added.
+
#### css
**In**
@@ -214,7 +220,7 @@ const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;')
`string`, defaults to `"[local]"`.
-This option only works when `autoLabel` is set to `true`. It allows you to
+This option only works when `autoLabel` is set to `'dev-only'` or `'always'`. It allows you to
define the format of the resulting `label`. The format is defined via string where
variable parts are enclosed in square brackets `[]`.
For example `labelFormat: "my-classname--[local]"`, where `[local]` will be replaced
@@ -235,7 +241,7 @@ be prepended automatically.
```javascript
// BrownView.js
-// autoLabel: true
+// autoLabel: 'dev-only'
// labelFormat: '[filename]--[local]'
const brownStyles = css({ color: 'brown' })
```
@@ -285,35 +291,49 @@ const H1 = /*#__PURE__*/ styled('h1', {
`H1`'s class name attribute would be `css-hash-H1`
-### `instances`
+### `cssPropOptimization`
-`Array`, defaults to
+`boolean`, defaults to `true`.
-```jsx
-;['emotion']
-```
+This option assumes that you are using something to make `@emotion/react`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.
-This option allows `babel-plugin-emotion` to know which imports to treat as
-emotion imports and transform as such. This option is **only** required if you
-use a custom instance of emotion created with `create-emotion` or you're
-importing emotion from somewhere other than the paths above. Relative paths are
-resolved relative to `process.cwd()`(the current working directory).
+### `importMap`
-[**Documentation**](https://emotion.sh/docs/instances)
+This option allows you to tell @emotion/babel-plugin what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
-### `cssPropOptimization`
+An example config:
-`boolean`, defaults to `true` if an import from `@emotion/core` is found in a file.
-
-This option assumes that you are using something to make `@emotion/core`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.
+```json
+{
+ "my-package": {
+ "anotherExport": {
+ "canonicalImport": ["@emotion/styled", "default"],
+ "styledBaseImport": ["my-package/base", "anotherExport"]
+ }
+ },
+ "some-package": {
+ "someExport": {
+ "canonicalImport": ["@emotion/react", "css"]
+ },
+ "thisIsTheJsxExport": {
+ "canonicalImport": ["@emotion/react", "jsx"]
+ }
+ }
+}
+```
## Babel Macros
-Instead of using `babel-plugin-emotion`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below.
+Instead of using `@emotion/babel-plugin`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below.
```jsx
-import styled from 'react-emotion/macro'
-import { css, keyframes, injectGlobal, flush, hydrate } from 'emotion/macro'
-import css from '@emotion/css/macro'
+import {
+ css,
+ keyframes,
+ injectGlobal,
+ flush,
+ hydrate
+} from '@emotion/css/macro'
+import { jsx, css, Global, keyframes } from '@emotion/react/macro'
import styled from '@emotion/styled/macro'
```
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-component.js b/packages/babel-plugin/__tests__/__fixtures__/core-with-component.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-component.js
rename to packages/babel-plugin/__tests__/__fixtures__/core-with-component.js
diff --git a/packages/babel-plugin/__tests__/__fixtures__/core-with-css-import-dynamic.js b/packages/babel-plugin/__tests__/__fixtures__/core-with-css-import-dynamic.js
new file mode 100644
index 000000000..40d67d268
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__fixtures__/core-with-css-import-dynamic.js
@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react'
+
+const SomeComponent = props => (
+
+)
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-css-import.js b/packages/babel-plugin/__tests__/__fixtures__/core-with-css-import.js
similarity index 74%
rename from packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-css-import.js
rename to packages/babel-plugin/__tests__/__fixtures__/core-with-css-import.js
index 33a037702..a229b2b92 100644
--- a/packages/babel-plugin-emotion/__tests__/__fixtures__/core-with-css-import.js
+++ b/packages/babel-plugin/__tests__/__fixtures__/core-with-css-import.js
@@ -1,5 +1,5 @@
/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import { jsx, css } from '@emotion/react'
const SomeComponent = props => (
({ backgroundColor: theme.bgColor })
+const css2 = theme => ({ padding: theme.spacing.small })
+
+function SomeComponent(props) {
+ return
{'Emotion'}
+}
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/does-not-change-other-props.js b/packages/babel-plugin/__tests__/__fixtures__/does-not-change-other-props.js
similarity index 64%
rename from packages/babel-plugin-emotion/__tests__/__fixtures__/does-not-change-other-props.js
rename to packages/babel-plugin/__tests__/__fixtures__/does-not-change-other-props.js
index 4254a9197..f1ddffede 100644
--- a/packages/babel-plugin-emotion/__tests__/__fixtures__/does-not-change-other-props.js
+++ b/packages/babel-plugin/__tests__/__fixtures__/does-not-change-other-props.js
@@ -1,4 +1,4 @@
/** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
const Svg =
diff --git a/packages/babel-plugin/__tests__/__fixtures__/dynamic.js b/packages/babel-plugin/__tests__/__fixtures__/dynamic.js
new file mode 100644
index 000000000..4fbfb6cff
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__fixtures__/dynamic.js
@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props =>
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/function-declaration.js b/packages/babel-plugin/__tests__/__fixtures__/function-declaration.js
similarity index 79%
rename from packages/babel-plugin-emotion/__tests__/__fixtures__/function-declaration.js
rename to packages/babel-plugin/__tests__/__fixtures__/function-declaration.js
index e25abcf14..b2f0327c2 100644
--- a/packages/babel-plugin-emotion/__tests__/__fixtures__/function-declaration.js
+++ b/packages/babel-plugin/__tests__/__fixtures__/function-declaration.js
@@ -1,6 +1,6 @@
// @flow
import * as React from 'react'
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
function Logo(props) {
return (
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/import-namespace-does-not-throw.js b/packages/babel-plugin/__tests__/__fixtures__/import-namespace-does-not-throw.js
similarity index 68%
rename from packages/babel-plugin-emotion/__tests__/__fixtures__/import-namespace-does-not-throw.js
rename to packages/babel-plugin/__tests__/__fixtures__/import-namespace-does-not-throw.js
index 90b486d2c..a1deabc1a 100644
--- a/packages/babel-plugin-emotion/__tests__/__fixtures__/import-namespace-does-not-throw.js
+++ b/packages/babel-plugin/__tests__/__fixtures__/import-namespace-does-not-throw.js
@@ -1,2 +1,2 @@
-import * as emotionCore from '@emotion/core'
+import * as emotionCore from '@emotion/react'
// could probably support this for real but it's pretty rare so I'm not gonna spend time on it now
diff --git a/packages/babel-plugin-emotion/__tests__/__fixtures__/jsx-hoist.js b/packages/babel-plugin/__tests__/__fixtures__/jsx-hoist.js
similarity index 76%
rename from packages/babel-plugin-emotion/__tests__/__fixtures__/jsx-hoist.js
rename to packages/babel-plugin/__tests__/__fixtures__/jsx-hoist.js
index 6ffa1a99b..47fda3f15 100644
--- a/packages/babel-plugin-emotion/__tests__/__fixtures__/jsx-hoist.js
+++ b/packages/babel-plugin/__tests__/__fixtures__/jsx-hoist.js
@@ -1,5 +1,5 @@
/** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
const SomeComponent = props => (
(
{
return (
diff --git a/packages/babel-plugin/__tests__/__snapshots__/css-requires-options.js.snap b/packages/babel-plugin/__tests__/__snapshots__/css-requires-options.js.snap
new file mode 100644
index 000000000..4b9deb01e
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__snapshots__/css-requires-options.js.snap
@@ -0,0 +1,294 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`babel css inline autoLabel set to always - complex expression 1`] = `
+"
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+import fooStyles from './foo';
+let cls = css(fooStyles);"
+`;
+
+exports[`babel css inline autoLabel set to always - complex expression, last arg string 1`] = `
+"
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles, 'color: hotpink;')
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+import fooStyles from './foo';
+let cls = css(fooStyles, 'color: hotpink;');"
+`;
+
+exports[`babel css inline autoLabel set to always 1`] = `
+"
+ import { css } from 'emotion'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+let cls = css({
+ color: 'hotpink'
+});"
+`;
+
+exports[`babel css inline autoLabel set to never - complex expression 1`] = `
+"
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+import fooStyles from './foo';
+let cls = css(fooStyles);"
+`;
+
+exports[`babel css inline autoLabel set to never 1`] = `
+"
+ import { css } from 'emotion'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from 'emotion';
+let cls = css({
+ color: 'hotpink'
+});"
+`;
+
+exports[`babel css inline code already transpiled by emotion plugin (avoid double transpilation) 1`] = `
+"
+ import { keyframes as _keyframes } from \\"emotion\\";
+ import { css as _css } from \\"emotion\\";
+
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+ let someCls =
+ /*#__PURE__*/
+ _css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1jwq1yt-someCls\\",
+ styles: \\"color:hotpink;;label:someCls;\\"
+ } : {
+ name: \\"1jwq1yt-someCls\\",
+ styles: \\"color:hotpink;;label:someCls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+
+ let rotate360 =
+ /*#__PURE__*/
+ _keyframes(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1k98dea-rotate360\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
+ } : {
+ name: \\"1k98dea-rotate360\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { keyframes as _keyframes } from \\"emotion\\";
+import { css as _css } from \\"emotion\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+ return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\";
+}
+
+let someCls = /*#__PURE__*/_css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1jwq1yt-someCls\\",
+ styles: \\"color:hotpink;;label:someCls;\\"
+} : {
+ name: \\"1jwq1yt-someCls\\",
+ styles: \\"color:hotpink;;label:someCls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+let rotate360 = /*#__PURE__*/_keyframes(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1k98dea-rotate360\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
+} : {
+ name: \\"1k98dea-rotate360\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline label format function 1`] = `
+"
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let cls = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"wiafqk-CLS_CSS-REQUIRES-OPTIONS\\",
+ styles: \\"color:hotpink;label:CLS_CSS-REQUIRES-OPTIONS;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuICAgIGxldCBjbHMgPSBjc3Moe2NvbG9yOidob3RwaW5rJ30pXG4gICAgIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline label format with dirname, filename, and local 1`] = `
+"
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let cls = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1azqn5t-my-css-__tests__-css-requires-options-cls\\",
+ styles: \\"color:hotpink;label:my-css-__tests__-css-requires-options-cls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuICAgIGxldCBjbHMgPSBjc3Moe2NvbG9yOidob3RwaW5rJ30pXG4gICAgIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline label format with filename and local 1`] = `
+"
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let cls = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"12j84ju-my-css-css-requires-options-cls\\",
+ styles: \\"color:hotpink;label:my-css-css-requires-options-cls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuICAgIGxldCBjbHMgPSBjc3Moe2NvbG9yOidob3RwaW5rJ30pXG4gICAgIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline label format with filename that is index and local 1`] = `
+"
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let cls = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1uf5d32-my-css-some-directory-cls\\",
+ styles: \\"color:hotpink;label:my-css-some-directory-cls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuICAgIGxldCBjbHMgPSBjc3Moe2NvbG9yOidob3RwaW5rJ30pXG4gICAgIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline label format with only local 1`] = `
+"
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let cls = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1xiywpm-my-css-cls\\",
+ styles: \\"color:hotpink;label:my-css-cls;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuICAgIGxldCBjbHMgPSBjc3Moe2NvbG9yOidob3RwaW5rJ30pXG4gICAgIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`babel css inline label on code transpiled by TS (with interpolations) 1`] = `
+"
+ import { __makeTemplateObject } from 'tslib'
+ import { css } from '@emotion/react'
+ import { hoverStyles } from './styles'
+
+ var templateObject_1
+
+ const someVar = css(
+ templateObject_1 ||
+ (templateObject_1 = __makeTemplateObject(
+ ['\\\\n color: hotpink;\\\\n'],
+ ['\\\\n color: hotpink;\\\\n']
+ )),
+ hoverStyles
+ )
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { __makeTemplateObject } from 'tslib';
+import { css } from '@emotion/react';
+import { hoverStyles } from './styles';
+var templateObject_1;
+const someVar = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n'], ['\\\\n color: hotpink;\\\\n'])), hoverStyles);"
+`;
+
+exports[`babel css inline label on code transpiled by TS 1`] = `
+"
+ import { __makeTemplateObject } from 'tslib'
+ import { css } from '@emotion/react'
+
+ var templateObject_1
+
+ const someVar = css(
+ templateObject_1 ||
+ (templateObject_1 = __makeTemplateObject(
+ ['\\\\n color: hotpink;\\\\n'],
+ ['\\\\n color: hotpink;\\\\n']
+ ))
+ )
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { __makeTemplateObject } from 'tslib';
+import { css } from '@emotion/react';
+var templateObject_1;
+const someVar = /*#__PURE__*/css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar;\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar;\\")])));"
+`;
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/__snapshots__/css.js.snap
similarity index 51%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap
rename to packages/babel-plugin/__tests__/__snapshots__/css.js.snap
index 22126d6a2..4d6a5afde 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap
+++ b/packages/babel-plugin/__tests__/__snapshots__/css.js.snap
@@ -1,9 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`@emotion/css/macro actual-expected-usage 1`] = `
+exports[`emotion-babel-plugin css actual-expected-usage 1`] = `
"/** @jsx jsx */
-import { jsx } from '@emotion/core'
-import css from '@emotion/css/macro'
+import { jsx, css } from '@emotion/react'
const SomeComponent = () => (
(
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
/** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjdHVhbC1leHBlY3RlZC11c2FnZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNWSIsImZpbGUiOiJhY3R1YWwtZXhwZWN0ZWQtdXNhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY29uc3QgU29tZUNvbXBvbmVudCA9ICgpID0+IChcbiAgPGRpdlxuICAgIGNzcz17Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH1cbiAgLz5cbilcbiJdfQ== */\\",
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjdHVhbC1leHBlY3RlZC11c2FnZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJhY3R1YWwtZXhwZWN0ZWQtdXNhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSAoKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGB9XG4gIC8+XG4pXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const SomeComponent = () =>
;"
`;
-exports[`@emotion/css/macro already-transpiled-by-babel 1`] = `
+exports[`emotion-babel-plugin css already-transpiled-by-babel 1`] = `
"/* eslint-disable */
-import css from '@emotion/css/macro'
+import css from '@emotion/css'
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose'
function _templateObject() {
@@ -57,7 +54,8 @@ const fooStyles = css(_templateObject())
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+/* eslint-disable */
+import css from '@emotion/css';
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose';
function _templateObject() {
@@ -71,13 +69,11 @@ function _templateObject() {
} // no label & source maps should be appended
-const fooStyles =
-/*#__PURE__*/
-_css(_templateObject());"
+const fooStyles = css(_templateObject());"
`;
-exports[`@emotion/css/macro basic 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css basic 1`] = `
+"import { css } from '@emotion/react'
function doThing() {
return css\`
@@ -88,17 +84,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"k008qs\\",
- styles: \\"display:flex;\\"
+ name: \\"zjik7\\",
+ styles: \\"display:flex\\"
} : {
- name: \\"k008qs\\",
- styles: \\"display:flex;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
+ name: \\"8v5aok-doThing\\",
+ styles: \\"display:flex;label:doThing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -107,8 +103,8 @@ function doThing() {
}"
`;
-exports[`@emotion/css/macro call-expression 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css call-expression 1`] = `
+"import { css } from '@emotion/react'
function doThing() {
return css({ color: 'hotpink' })
@@ -117,17 +113,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
+ name: \\"aarqni-doThing\\",
+ styles: \\"color:hotpink;label:doThing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -136,8 +132,8 @@ function doThing() {
}"
`;
-exports[`@emotion/css/macro call-inside-call 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css call-inside-call 1`] = `
+"import { css } from '@emotion/react'
const thing = css\`
display: flex;
@@ -151,42 +147,39 @@ const thing = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const thing =
-/*#__PURE__*/
-_css(\\"display:flex;&:hover{\\", process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\"
+import { css } from '@emotion/react';
+const thing = /*#__PURE__*/css(\\"display:flex;&:hover{\\", process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1MiLCJmaWxlIjoiY2FsbC1pbnNpZGUtY2FsbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1MiLCJmaWxlIjoiY2FsbC1pbnNpZGUtY2FsbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-}, \\";};label:thing;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICY6aG92ZXIge1xuICAgICR7Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH07XG4gIH1cbmBcbiJdfQ== */\\"));"
+}, \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:thing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICY6aG92ZXIge1xuICAgICR7Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH07XG4gIH1cbmBcbiJdfQ== */\\");"
`;
-exports[`@emotion/css/macro comment-with-interpolation 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css comment-with-interpolation 1`] = `
+"import { css } from '@emotion/react'
css\`
// color: \${'green'};
- /*
-
+ /*
+
something: \${'something'};
-
+
*/
color: hotpink;
\`
css\`
// color: \${'green'};
- /*
-
+ /*
+
something: \${'something'};
-
+
*/
color: \${'hotpink'};
\`
@@ -194,32 +187,31 @@ css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qIFxuICBcbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcbiAgXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKiBcbiAgXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG4gIFxuICAqL1xuICBjb2xvcjogJHsnaG90cGluayd9O1xuYFxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qXG5cbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcblxuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiAkeydob3RwaW5rJ307XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qIFxuICBcbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcbiAgXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKiBcbiAgXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG4gIFxuICAqL1xuICBjb2xvcjogJHsnaG90cGluayd9O1xuYFxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qXG5cbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcblxuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiAkeydob3RwaW5rJ307XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/css/macro impure 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css impure 1`] = `
+"import { css } from '@emotion/react'
function thing() {}
@@ -232,20 +224,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+import { css } from '@emotion/react';
function thing() {}
function doThing() {
- return (
- /*#__PURE__*/
- _css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
- );
+ return /*#__PURE__*/css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:doThing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\");
}"
`;
-exports[`@emotion/css/macro inside-anonymous-arrow-function 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css inside-anonymous-arrow-function 1`] = `
+"import { css } from '@emotion/react'
export default () => {
css\`
@@ -256,17 +245,17 @@ export default () => {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -275,8 +264,8 @@ export default (() => {
});"
`;
-exports[`@emotion/css/macro inside-anonymous-function 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css inside-anonymous-function 1`] = `
+"import { css } from '@emotion/react'
export default () => {
css\`
@@ -287,17 +276,17 @@ export default () => {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -306,11 +295,10 @@ export default (() => {
});"
`;
-exports[`@emotion/css/macro inside-class 1`] = `
+exports[`emotion-babel-plugin css inside-class 1`] = `
"/** @jsx jsx */
import { Component } from 'react'
-import { jsx } from '@emotion/core'
-import css from '@emotion/css/macro'
+import { jsx, css } from '@emotion/react'
class SomeComponent extends Component {
render() {
@@ -327,21 +315,19 @@ class SomeComponent extends Component {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
/** @jsx jsx */
import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTZ0IiLCJmaWxlIjoiaW5zaWRlLWNsYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY2xhc3MgU29tZUNvbXBvbmVudCBleHRlbmRzIENvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0= */\\",
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRZ0IiLCJmaWxlIjoiaW5zaWRlLWNsYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNsYXNzIFNvbWVDb21wb25lbnQgZXh0ZW5kcyBDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgIClcbiAgfVxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -353,64 +339,90 @@ class SomeComponent extends Component {
}"
`;
-exports[`@emotion/css/macro inside-non-pascal-case-arrow-function 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css label-1 1`] = `
+"import { css } from '@emotion/react'
-let something = () => {
- css\`
- color: hotpink;
- \`
-}
+const thing = css\`
+ color: hotpink;
+\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+import { css } from '@emotion/react';
+const thing = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-let something = () => {
- _ref;
};"
`;
-exports[`@emotion/css/macro label-1 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css label-arrow-function-expression 1`] = `
+"import { css } from '@emotion/react'
-const thing = css\`
+const thing = () => css\`
color: hotpink;
\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSAoKSA9PiBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const thing = () => _ref;"
+`;
+
+exports[`emotion-babel-plugin css label-function-expression 1`] = `
+"import { css } from '@emotion/react'
+
+const thing = function() {
+ return css\`
+ color: hotpink;
+ \`
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const thing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\"
+import { css } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1kiLCJmaWxlIjoibGFiZWwtZnVuY3Rpb24tZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCB0aGluZyA9IGZ1bmN0aW9uKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const thing = function () {
+ return _ref;
};"
`;
-exports[`@emotion/css/macro label-no-final-semi 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css label-no-final-semi 1`] = `
+"import { css } from '@emotion/react'
// prettier-ignore
const thing = css\`
@@ -420,24 +432,23 @@ const thing = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-// prettier-ignore
+import { css } from '@emotion/react'; // prettier-ignore
+
const thing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1hi0qos-thing\\",
- styles: \\"color:hotpink;label:thing;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2lCIiwiZmlsZSI6ImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbmtcbmBcbiJdfQ== */\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2lCIiwiZmlsZSI6ImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbmtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/css/macro label-object 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css label-object 1`] = `
+"import { css } from '@emotion/react'
const thing = {
thisShouldBeTheLabel: css\`
@@ -452,36 +463,35 @@ const thing = {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
const thing = {
thisShouldBeTheLabel: process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lsaf1d-thisShouldBeTheLabel\\",
- styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lsaf1d-thisShouldBeTheLabel\\",
- styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMkIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
+ name: \\"xjpive-thisShouldBeTheLabel\\",
+ styles: \\"color:hotpink;label:thisShouldBeTheLabel;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMkIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
},
// prettier-ignore
'shouldBeAnotherLabel': process.env.NODE_ENV === \\"production\\" ? {
- name: \\"7xoeh4-shouldBeAnotherLabel\\",
- styles: \\"color:green;;label:shouldBeAnotherLabel;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"7xoeh4-shouldBeAnotherLabel\\",
- styles: \\"color:green;;label:shouldBeAnotherLabel;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
+ name: \\"lgalrw-shouldBeAnotherLabel\\",
+ styles: \\"color:green;label:shouldBeAnotherLabel;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
}
};"
`;
-exports[`@emotion/css/macro label-transpiled-by-ts 1`] = `
+exports[`emotion-babel-plugin css label-transpiled-by-ts 1`] = `
"import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react'
var templateObject_1
@@ -496,21 +506,15 @@ const someVar = css(
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
-var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\";
-
import { __makeTemplateObject } from 'tslib';
+import { css } from '@emotion/react';
var templateObject_1;
-
-const someVar =
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])));"
+const someVar = /*#__PURE__*/css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar;\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar;\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")])));"
`;
-exports[`@emotion/css/macro label-transpiled-by-ts-with-interpolations 1`] = `
+exports[`emotion-babel-plugin css label-transpiled-by-ts-with-interpolations 1`] = `
"import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css/macro'
+import css from '@emotion/react'
import { hoverStyles } from './styles'
var templateObject_1
@@ -527,21 +531,15 @@ const someVar = css(
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
-var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMtd2l0aC1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoibGFiZWwtdHJhbnNwaWxlZC1ieS10cy13aXRoLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcbmltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuaW1wb3J0IHsgaG92ZXJTdHlsZXMgfSBmcm9tICcuL3N0eWxlcydcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKSxcbiAgaG92ZXJTdHlsZXNcbilcbiJdfQ== */\\";
-
import { __makeTemplateObject } from 'tslib';
+import css from '@emotion/react';
import { hoverStyles } from './styles';
var templateObject_1;
-
-const someVar =
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])), hoverStyles);"
+const someVar = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n'], ['\\\\n color: hotpink;\\\\n'])), hoverStyles);"
`;
-exports[`@emotion/css/macro multiple-calls 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css multiple-calls 1`] = `
+"import { css } from '@emotion/react'
const thing = css\`
color: hotpink;
@@ -554,41 +552,40 @@ const otherThing = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
const thing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const otherThing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"vrj4vp-otherThing\\",
- styles: \\"color:green;;label:otherThing;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"vrj4vp-otherThing\\",
- styles: \\"color:green;;label:otherThing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
+ name: \\"onvdw0-otherThing\\",
+ styles: \\"color:green;label:otherThing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/css/macro no-actual-import 1`] = `
-"import '@emotion/css/macro'
+exports[`emotion-babel-plugin css no-actual-import 1`] = `
+"import '@emotion/react'
↓ ↓ ↓ ↓ ↓ ↓
-"
+import '@emotion/react';"
`;
-exports[`@emotion/css/macro object-dynamic-property 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css object-dynamic-property 1`] = `
+"import { css } from '@emotion/react'
function doThing() {
return {
@@ -599,17 +596,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiB7XG4gICAgW2Nzcyh7IGNvbG9yOiAnaG90cGluaycgfSldOiAnY29sZGJsdWUnXG4gIH1cbn1cbiJdfQ== */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiB7XG4gICAgW2Nzcyh7IGNvbG9yOiAnaG90cGluaycgfSldOiAnY29sZGJsdWUnXG4gIH1cbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -620,9 +617,9 @@ function doThing() {
}"
`;
-exports[`@emotion/css/macro object-pattern-variable-declarator 1`] = `
-"import { css } from '@emotion/core'
-import { extractCritical } from 'emotion-server'
+exports[`emotion-babel-plugin css object-pattern-variable-declarator 1`] = `
+"import { css } from '@emotion/react'
+import { extractCritical } from '@emotion/server'
import React from 'react'
import { renderToString } from 'react-dom/server'
@@ -639,32 +636,39 @@ const { css: styles } = extractCritical(
↓ ↓ ↓ ↓ ↓ ↓
-import { css } from '@emotion/core';
-import { extractCritical } from 'emotion-server';
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/react';
+import { extractCritical } from '@emotion/server';
import React from 'react';
import { renderToString } from 'react-dom/server';
const {
css: styles
-} = extractCritical(renderToString(
));"
+} = extractCritical(renderToString(
));"
`;
-exports[`@emotion/css/macro other-imports 1`] = `
-"import { nonExistantImport } from '@emotion/css/macro'
+exports[`emotion-babel-plugin css other-imports 1`] = `
+"import { nonExistantImport } from '@emotion/react'
nonExistantImport()
↓ ↓ ↓ ↓ ↓ ↓
-import { nonExistantImport as _nonExistantImport } from \\"@emotion/css\\";
-
-_nonExistantImport();"
+import { nonExistantImport } from '@emotion/react';
+nonExistantImport();"
`;
-exports[`@emotion/css/macro remove-block-comments 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css remove-block-comments 1`] = `
+"import { css } from '@emotion/react'
css\`
/* color:green;
@@ -676,23 +680,22 @@ ddjfwjkng
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1ibG9jay1jb21tZW50cy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJyZW1vdmUtYmxvY2stY29tbWVudHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvKiBjb2xvcjpncmVlbjtcbmRkamZ3amtuZ1xuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1ibG9jay1jb21tZW50cy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJyZW1vdmUtYmxvY2stY29tbWVudHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY3NzYFxuICAvKiBjb2xvcjpncmVlbjtcbmRkamZ3amtuZ1xuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/css/macro remove-line-comments 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css remove-line-comments 1`] = `
+"import { css } from '@emotion/react'
css\`
// color: green;
@@ -702,23 +705,22 @@ css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from '@emotion/react';
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6InJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNzc2BcbiAgLy8gY29sb3I6IGdyZWVuO1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6InJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNzc2BcbiAgLy8gY29sb3I6IGdyZWVuO1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/css/macro tagged-template-args-forwarded 1`] = `
-"import css from '@emotion/css/macro'
+exports[`emotion-babel-plugin css tagged-template-args-forwarded 1`] = `
+"import { css } from '@emotion/react'
function media(...args) {
return css\`
@@ -735,18 +737,11 @@ const test = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+import { css } from '@emotion/react';
function media(...args) {
- return (
- /*#__PURE__*/
- _css(\\"@media (min-width:100px){\\",
- /*#__PURE__*/
- _css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"))
- );
+ return /*#__PURE__*/css(\\"@media (min-width: 100px){\\", /*#__PURE__*/css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\");
}
-const test =
-/*#__PURE__*/
-_css(media\`color: red;\`, \\";;label:test;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIG1lZGlhKC4uLmFyZ3MpIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAwcHgpIHtcbiAgICAgICR7Y3NzKC4uLmFyZ3MpfTtcbiAgICB9XG4gIGBcbn1cblxuY29uc3QgdGVzdCA9IGNzc2BcbiAgJHttZWRpYWBjb2xvcjogcmVkO2B9O1xuYFxuIl19 */\\"));"
+const test = /*#__PURE__*/css(media\`color: red;\`, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:test;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmZ1bmN0aW9uIG1lZGlhKC4uLmFyZ3MpIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAwcHgpIHtcbiAgICAgICR7Y3NzKC4uLmFyZ3MpfTtcbiAgICB9XG4gIGBcbn1cblxuY29uc3QgdGVzdCA9IGNzc2BcbiAgJHttZWRpYWBjb2xvcjogcmVkO2B9O1xuYFxuIl19 */\\");"
`;
diff --git a/packages/babel-plugin/__tests__/__snapshots__/global-requires-options.js.snap b/packages/babel-plugin/__tests__/__snapshots__/global-requires-options.js.snap
new file mode 100644
index 000000000..3c0ec693d
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__snapshots__/global-requires-options.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Global inline source maps can be disabled 1`] = `
+"
+import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
diff --git a/packages/babel-plugin/__tests__/__snapshots__/global.js.snap b/packages/babel-plugin/__tests__/__snapshots__/global.js.snap
new file mode 100644
index 000000000..f2063cf42
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__snapshots__/global.js.snap
@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emotion-babel-plugin Global basic-array 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"9aoaei\\",
+ styles: \\"color:hotpink;background-color:#fff\\"
+} : {
+ name: \\"9aoaei\\",
+ styles: \\"color:hotpink;background-color:#fff\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCB7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH1dfSAvPlxuKVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global basic-obj 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global complex-array 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+
+const getBgColor = () => ({
+ backgroundColor: '#fff'
+});
+
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global complex-obj 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css as _css } from \\"@emotion/react\\";
+import * as React from 'react';
+import { Global } from '@emotion/react';
+
+const getBgColor = () => ({
+ backgroundColor: '#fff'
+});
+
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global css-used-as-value 1`] = `
+"import * as React from 'react'
+import { Global, css } from '@emotion/react'
+
+// this gets ignored by Global macro, but it tests that this combination doesn't crash or something
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global, css } from '@emotion/react'; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuLy8gdGhpcyBnZXRzIGlnbm9yZWQgYnkgR2xvYmFsIG1hY3JvLCBidXQgaXQgdGVzdHMgdGhhdCB0aGlzIGNvbWJpbmF0aW9uIGRvZXNuJ3QgY3Jhc2ggb3Igc29tZXRoaW5nXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17Y3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KX0gLz5cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global no-jsx 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+const foo = Global
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+const foo = Global;"
+`;
+
+exports[`emotion-babel-plugin Global no-styles-prop 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global spread-styles 1`] = `
+"/* eslint-disable */
+import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+/* eslint-disable */
+import * as React from 'react';
+import { Global } from '@emotion/react';
+export default (() =>
);"
+`;
+
+exports[`emotion-babel-plugin Global with-closing-element 1`] = `
+"/* eslint-disable */
+import * as React from 'react'
+import { Global } from '@emotion/react'
+
+// prettier-ignore
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/* eslint-disable */
+import * as React from 'react';
+import { Global } from '@emotion/react'; // prettier-ignore
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG4vLyBwcmV0dGllci1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycgfX0+PC9HbG9iYWw+XG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
diff --git a/packages/babel-plugin/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/__snapshots__/index.js.snap
new file mode 100644
index 000000000..8ef5aec25
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__snapshots__/index.js.snap
@@ -0,0 +1,365 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@emotion/babel-plugin core-with-component 1`] = `
+"// @flow
+import styled from '@emotion/styled'
+
+const MyComponent = styled.div({ color: 'hotpink' })
+
+const OtherComponent = MyComponent.withComponent('section')
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+// @flow
+const MyComponent = _styled(\\"div\\", {
+ target: \\"eck06en0\\",
+ label: \\"MyComponent\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jb21wb25lbnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR29CIiwiZmlsZSI6ImNvcmUtd2l0aC1jb21wb25lbnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IE15Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7IGNvbG9yOiAnaG90cGluaycgfSlcblxuY29uc3QgT3RoZXJDb21wb25lbnQgPSBNeUNvbXBvbmVudC53aXRoQ29tcG9uZW50KCdzZWN0aW9uJylcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+const OtherComponent = MyComponent.withComponent('section', {
+ target: \\"eck06en1\\",
+ label: \\"OtherComponent\\"
+});"
+`;
+
+exports[`@emotion/babel-plugin core-with-css-import 1`] = `
+"/** @jsx jsx */
+import { jsx, css } from '@emotion/react'
+
+const SomeComponent = props => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jc3MtaW1wb3J0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtZIiwiZmlsZSI6ImNvcmUtd2l0aC1jc3MtaW1wb3J0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3gsIGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbilcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`@emotion/babel-plugin core-with-css-import-dynamic 1`] = `
+"/** @jsx jsx */
+import { jsx, css } from '@emotion/react'
+
+const SomeComponent = props => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`@emotion/babel-plugin css-prop-complex-array 1`] = `
+"/** @jsx jsx */
+import { jsx, Global } from '@emotion/react/macro'
+
+const css1 = theme => ({ backgroundColor: theme.bgColor })
+const css2 = theme => ({ padding: theme.spacing.small })
+
+function SomeComponent(props) {
+ return
{'Emotion'}
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+/** @jsx jsx */
+import { jsx, Global } from \\"@emotion/react\\";
+
+const css1 = theme => ({
+ backgroundColor: theme.bgColor
+});
+
+const css2 = theme => ({
+ padding: theme.spacing.small
+});
+
+function SomeComponent(props) {
+ return
{'Emotion'}
;
+}"
+`;
+
+exports[`@emotion/babel-plugin does-not-change-other-props 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const Svg =
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+const Svg =
;"
+`;
+
+exports[`@emotion/babel-plugin dynamic 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css as _css } from \\"@emotion/react\\";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`@emotion/babel-plugin function-declaration 1`] = `
+"// @flow
+import * as React from 'react'
+import { jsx } from '@emotion/react'
+
+function Logo(props) {
+ return (
+
+ )
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+// @flow
+import * as React from 'react';
+import { jsx } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"4zleql\\",
+ styles: \\"display:block\\"
+} : {
+ name: \\"jgxhdf-Logo\\",
+ styles: \\"display:block;label:Logo;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZ1bmN0aW9uLWRlY2xhcmF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9NIiwiZmlsZSI6ImZ1bmN0aW9uLWRlY2xhcmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQGZsb3dcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsganN4IH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmZ1bmN0aW9uIExvZ28ocHJvcHMpIHtcbiAgcmV0dXJuIChcbiAgICA8YVxuICAgICAgY3NzPXt7XG4gICAgICAgIGRpc3BsYXk6ICdibG9jaydcbiAgICAgIH19XG4gICAgLz5cbiAgKVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+function Logo(props) {
+ return
;
+}"
+`;
+
+exports[`@emotion/babel-plugin import-namespace-does-not-throw 1`] = `
+"import * as emotionCore from '@emotion/react'
+// could probably support this for real but it's pretty rare so I'm not gonna spend time on it now
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as emotionCore from '@emotion/react'; // could probably support this for real but it's pretty rare so I'm not gonna spend time on it now"
+`;
+
+exports[`@emotion/babel-plugin jsx-hoist 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImpzeC1ob2lzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLSSIsImZpbGUiOiJqc3gtaG9pc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBjb2xvcjogJ2hvdHBpbmsnXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`@emotion/babel-plugin object-property 1`] = `
+"// @flow
+import * as React from 'react'
+import { jsx } from '@emotion/react'
+import styled from '@emotion/styled'
+
+const MyObject = {
+ MyProperty: styled.div({ color: 'hotpink' })
+}
+
+function Logo(props) {
+ return
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+// @flow
+import * as React from 'react';
+import { jsx } from '@emotion/react';
+const MyObject = {
+ MyProperty: _styled(\\"div\\", {
+ target: \\"erl9uiw0\\",
+ label: \\"MyProperty\\"
+ })(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+ } : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNYyIsImZpbGUiOiJvYmplY3QtcHJvcGVydHkuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBNeU9iamVjdCA9IHtcbiAgTXlQcm9wZXJ0eTogc3R5bGVkLmRpdih7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cblxuZnVuY3Rpb24gTG9nbyhwcm9wcykge1xuICByZXR1cm4gPE15T2JqZWN0Lk15UHJvcGVydHkgLz5cbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ })
+};
+
+function Logo(props) {
+ return
;
+}"
+`;
+
+exports[`@emotion/babel-plugin static-object-with-camel-case 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"qmoypw\\",
+ styles: \\"color:hotpink;background-color:green\\"
+} : {
+ name: \\"lcrht-SomeComponent\\",
+ styles: \\"color:hotpink;background-color:green;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1vYmplY3Qtd2l0aC1jYW1lbC1jYXNlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtJIiwiZmlsZSI6InN0YXRpYy1vYmplY3Qtd2l0aC1jYW1lbC1jYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHByb3BzID0+IChcbiAgPGRpdlxuICAgIGNzcz17e1xuICAgICAgY29sb3I6ICdob3RwaW5rJyxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogJ2dyZWVuJ1xuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`@emotion/babel-plugin static-object-with-child-selectors 1`] = `
+"/** @jsx jsx */
+
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props => {
+ return (
+
+ )
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1t2q7lq\\",
+ styles: \\"color:green;:hover{color:hotpink;}\\"
+} : {
+ name: \\"1vvht02-SomeComponent\\",
+ styles: \\"color:green;:hover{color:hotpink;};label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1vYmplY3Qtd2l0aC1jaGlsZC1zZWxlY3RvcnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT00iLCJmaWxlIjoic3RhdGljLW9iamVjdC13aXRoLWNoaWxkLXNlbGVjdG9ycy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHByb3BzID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICAgICc6aG92ZXInOiB7XG4gICAgICAgICAgY29sb3I6ICdob3RwaW5rJ1xuICAgICAgICB9XG4gICAgICB9fVxuICAgICAgey4uLnByb3BzfVxuICAgIC8+XG4gIClcbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const SomeComponent = props => {
+ return
;
+};"
+`;
diff --git a/packages/babel-plugin/__tests__/__snapshots__/styled-requires-options.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled-requires-options.js.snap
new file mode 100644
index 000000000..462eca23b
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__snapshots__/styled-requires-options.js.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styled inline autoLabel set to never 1`] = `
+"
+import styled from '@emotion/styled'
+const Foo = styled.h1\`color:hotpink;\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+const Foo = _styled(\\"h1\\", {
+ target: \\"eoxfmb00\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVxQiIsImZpbGUiOiJzdHlsZWQtcmVxdWlyZXMtb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbIlxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5jb25zdCBGb28gPSBzdHlsZWQuaDFgY29sb3I6aG90cGluaztgXG4gICAgIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`styled inline hash generation no file system 1`] = `
+"
+import styled from '@emotion/styled'
+styled.h1\`color:blue;\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+_styled(\\"h1\\", {
+ target: \\"e8evh370\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"117wnve\\",
+ styles: \\"color:blue\\"
+} : {
+ name: \\"117wnve\\",
+ styles: \\"color:blue\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap
similarity index 69%
rename from packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap
rename to packages/babel-plugin/__tests__/__snapshots__/styled.js.snap
index 5d9467182..4d3075f49 100644
--- a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap
+++ b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`@emotion/babel-plugin-core styled already-transpiled-by-babel 1`] = `
+exports[`emotion-babel-plugin styled already-transpiled-by-babel 1`] = `
"/* eslint-disable */
import styled from '@emotion/styled'
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose'
@@ -21,7 +21,9 @@ const SomeComponent = styled('div')(_templateObject())
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
+
+/* eslint-disable */
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose';
function _templateObject() {
@@ -35,15 +37,13 @@ function _templateObject() {
} // source maps should not be appended
-const SomeComponent =
-/*#__PURE__*/
-_styled('div', {
- target: \\"emm8aqm0\\",
+const SomeComponent = /*#__PURE__*/_styled('div', {
+ target: \\"ec90nws0\\",
label: \\"SomeComponent\\"
})(_templateObject());"
`;
-exports[`@emotion/babel-plugin-core styled basic 1`] = `
+exports[`emotion-babel-plugin styled basic 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled.div\`
@@ -53,25 +53,25 @@ const SomeComponent = styled.div\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"e1c0oh1z0\\",
+ target: \\"el9tp5g0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJiYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
`;
-exports[`@emotion/babel-plugin-core styled call-expression 1`] = `
+exports[`emotion-babel-plugin styled call-expression 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled('div')\`
@@ -81,27 +81,25 @@ const SomeComponent = styled('div')\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const SomeComponent =
-/*#__PURE__*/
-_styled('div', {
- target: \\"eyt0cf80\\",
+const SomeComponent = /*#__PURE__*/_styled('div', {
+ target: \\"elbjn3a0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFbUMiLCJmaWxlIjoiY2FsbC1leHByZXNzaW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQoJ2RpdicpYFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
`;
-exports[`@emotion/babel-plugin-core styled comments 1`] = `
+exports[`emotion-babel-plugin styled comments 1`] = `
"import styled from '@emotion/styled'
styled.div\`
@@ -117,24 +115,24 @@ dfwf */
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
_styled(\\"div\\", {
- target: \\"e1vv9dlm0\\"
+ target: \\"e1jqiiye0\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVVIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbnN0eWxlZC5kaXZgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YgKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
`;
-exports[`@emotion/babel-plugin-core styled component-selector 1`] = `
+exports[`emotion-babel-plugin styled component-selector 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled.div\`
@@ -164,43 +162,43 @@ let OneLastComponent = styled.div({
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"e4byx850\\",
+ target: \\"e1i93zq73\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
let SomeOtherComponent = _styled(\\"div\\", {
- target: \\"e4byx851\\",
+ target: \\"e1i93zq72\\",
label: \\"SomeOtherComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNeUIiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
let AnotherComponent = _styled(\\"div\\", {
- target: \\"e4byx852\\",
+ target: \\"e1i93zq71\\",
label: \\"AnotherComponent\\"
})(SomeComponent, \\"{color:green;}\\", SomeOtherComponent, \\"{color:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\"));
let OneLastComponent = _styled(\\"div\\", {
- target: \\"e4byx853\\",
+ target: \\"e1i93zq70\\",
label: \\"OneLastComponent\\"
})({
[SomeComponent]: {
@@ -212,7 +210,7 @@ let OneLastComponent = _styled(\\"div\\", {
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnVCIiwiZmlsZSI6ImNvbXBvbmVudC1zZWxlY3Rvci5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmxldCBTb21lT3RoZXJDb21wb25lbnQgPSBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuXG5sZXQgQW5vdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICR7U29tZUNvbXBvbmVudH0ge1xuICAgIGNvbG9yOiBncmVlbjtcbiAgfVxuICAke1NvbWVPdGhlckNvbXBvbmVudH0ge1xuICAgIGNvbG9yOiBncmVlbjtcbiAgfVxuYFxuXG5sZXQgT25lTGFzdENvbXBvbmVudCA9IHN0eWxlZC5kaXYoe1xuICBbU29tZUNvbXBvbmVudF06IHtcbiAgICBjb2xvcjogJ2dyZWVuJ1xuICB9LFxuICBbU29tZU90aGVyQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH1cbn0pXG4iXX0= */\\");"
`;
-exports[`@emotion/babel-plugin-core styled existing-options 1`] = `
+exports[`emotion-babel-plugin styled existing-options 1`] = `
"import styled from '@emotion/styled'
styled('div', { shouldForwardProp: window.whatever }, window.whatever)()
@@ -237,7 +235,7 @@ styled('button', cfg)({})
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -246,25 +244,25 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string
/*#__PURE__*/
_styled('div', {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb20\\"
+ target: \\"e4yan9t4\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoiZXhpc3Rpbmctb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5zdHlsZWQoJ2RpdicsIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LCB3aW5kb3cud2hhdGV2ZXIpKClcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKWBgXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pKClcblxuc3R5bGVkKFxuICB3aW5kb3cud2hhdGV2ZXIsXG4gIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LFxuICB3aW5kb3cud2hhdGV2ZXJcbilgYFxuXG5jb25zdCBjZmcgPSB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfVxuc3R5bGVkKCdidXR0b24nLCBjZmcpKHt9KVxuIl19 */\\");
/*#__PURE__*/
_styled('div', {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb21\\"
+ target: \\"e4yan9t3\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNFIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\");
/*#__PURE__*/
_styled(window.whatever, {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb22\\"
+ target: \\"e4yan9t2\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUEiLCJmaWxlIjoiZXhpc3Rpbmctb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5zdHlsZWQoJ2RpdicsIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LCB3aW5kb3cud2hhdGV2ZXIpKClcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKWBgXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pKClcblxuc3R5bGVkKFxuICB3aW5kb3cud2hhdGV2ZXIsXG4gIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LFxuICB3aW5kb3cud2hhdGV2ZXJcbilgYFxuXG5jb25zdCBjZmcgPSB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfVxuc3R5bGVkKCdidXR0b24nLCBjZmcpKHt9KVxuIl19 */\\");
/*#__PURE__*/
_styled(window.whatever, {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb23\\"
+ target: \\"e4yan9t1\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JDIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\");
const cfg = {
@@ -273,7 +271,7 @@ const cfg = {
/*#__PURE__*/
_styled('button', _extends({}, {
- target: \\"ek6pnb24\\"
+ target: \\"e4yan9t0\\"
}, cfg))(process.env.NODE_ENV === \\"production\\" ? {
name: \\"0\\",
styles: \\"\\"
@@ -285,7 +283,7 @@ _styled('button', _extends({}, {
});"
`;
-exports[`@emotion/babel-plugin-core styled function-interpolation 1`] = `
+exports[`emotion-babel-plugin styled function-interpolation 1`] = `
"import styled from '@emotion/styled'
let Avatar = styled.img\`
@@ -298,18 +296,19 @@ let Avatar = styled.img\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
let Avatar = _styled(\\"img\\", {
- target: \\"ecty2dv0\\",
+ target: \\"e9o8e9e0\\",
label: \\"Avatar\\"
})(\\"width:96px;height:96px;border-radius:\\", props => props.theme.borderRadius, \\";border:1px solid \\", props => props.theme.borderColor, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZ1bmN0aW9uLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImZ1bmN0aW9uLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxubGV0IEF2YXRhciA9IHN0eWxlZC5pbWdgXG4gIHdpZHRoOiA5NnB4O1xuICBoZWlnaHQ6IDk2cHg7XG4gIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuYm9yZGVyUmFkaXVzfTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG5gXG4iXX0= */\\"));"
`;
-exports[`@emotion/babel-plugin-core styled label 1`] = `
+exports[`emotion-babel-plugin styled label 1`] = `
"/** @jsx jsx */
+/* eslint-disable react/jsx-pascal-case */
import styled from '@emotion/styled'
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
class Thing {
static SomeComponent = styled.div\`
@@ -328,38 +327,52 @@ class Thing {
const Test = () =>
}
+{
+ const Timeline = styled.ul\`\`
+ Timeline.Item = styled.li\`\`
+ Timeline.Item.Anchor = styled.a\`\`
+}
+
+{
+ let Comp
+ Comp = styled.div\`\`
+}
+
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-import { jsx } from '@emotion/core';
+/** @jsx jsx */
+
+/* eslint-disable react/jsx-pascal-case */
+import { jsx } from '@emotion/react';
class Thing {
static SomeComponent = _styled(\\"div\\", {
- target: \\"egllku90\\",
+ target: \\"e2dh5506\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUttQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG5cbntcbiAgY29uc3QgVGltZWxpbmUgPSBzdHlsZWQudWxgYFxuICBUaW1lbGluZS5JdGVtID0gc3R5bGVkLmxpYGBcbiAgVGltZWxpbmUuSXRlbS5BbmNob3IgPSBzdHlsZWQuYWBgXG59XG5cbntcbiAgbGV0IENvbXBcbiAgQ29tcCA9IHN0eWxlZC5kaXZgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
BadIdeaComponent = _styled(\\"div\\", {
- target: \\"egllku91\\",
+ target: \\"e2dh5505\\",
label: \\"BadIdeaComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"d1m7sn\\",
- styles: \\"background:hotpink;\\"
+ name: \\"1nzpx79\\",
+ styles: \\"background:hotpink\\"
} : {
- name: \\"d1m7sn\\",
- styles: \\"background:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVErQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\",
+ name: \\"1nzpx79\\",
+ styles: \\"background:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMrQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG5cbntcbiAgY29uc3QgVGltZWxpbmUgPSBzdHlsZWQudWxgYFxuICBUaW1lbGluZS5JdGVtID0gc3R5bGVkLmxpYGBcbiAgVGltZWxpbmUuSXRlbS5BbmNob3IgPSBzdHlsZWQuYWBgXG59XG5cbntcbiAgbGV0IENvbXBcbiAgQ29tcCA9IHN0eWxlZC5kaXZgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
}
@@ -367,23 +380,45 @@ class Thing {
{
// label should get sanitized
const MiniCalWrap$ = _styled(\\"div\\", {
- target: \\"egllku92\\",
+ target: \\"e2dh5504\\",
label: \\"MiniCalWrap-\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"tokvmb\\",
- styles: \\"color:red;\\"
+ name: \\"hwfcu5\\",
+ styles: \\"color:red\\"
} : {
- name: \\"tokvmb\\",
- styles: \\"color:red;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVpQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\",
+ name: \\"hwfcu5\\",
+ styles: \\"color:red\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const Test = () =>
;
+}
+{
+ const Timeline = _styled(\\"ul\\", {
+ target: \\"e2dh5503\\",
+ label: \\"Timeline\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCNEIiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
+
+ Timeline.Item = _styled(\\"li\\", {
+ target: \\"e2dh5502\\",
+ label: \\"Timeline-Item\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCMkIiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
+ Timeline.Item.Anchor = _styled(\\"a\\", {
+ target: \\"e2dh5501\\",
+ label: \\"Timeline-Item-Anchor\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
+}
+{
+ let Comp;
+ Comp = _styled(\\"div\\", {
+ target: \\"e2dh5500\\",
+ label: \\"Comp\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCbUIiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
}"
`;
-exports[`@emotion/babel-plugin-core styled more-than-10-interpolations 1`] = `
+exports[`emotion-babel-plugin styled more-than-10-interpolations 1`] = `
"import styled from '@emotion/styled'
// yes, this was actually a bug at one point
@@ -405,16 +440,16 @@ const H1 = styled.h1\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
// yes, this was actually a bug at one point
const H1 = _styled(\\"h1\\", {
- target: \\"e2mb8uz0\\",
+ target: \\"e1nqrpma0\\",
label: \\"H1\\"
})(\\"text-decoration:underline;border-right:solid blue \\", 54, \\"px;background:white;color:black;display:block;border-radius:3px;padding:25px;width:500px;z-index:\\", 100, \\";font-size:18px;text-align:center;border-left:\\", p => p.theme.blue, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vcmUtdGhhbi0xMC1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoibW9yZS10aGFuLTEwLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbi8vIHllcywgdGhpcyB3YXMgYWN0dWFsbHkgYSBidWcgYXQgb25lIHBvaW50XG5jb25zdCBIMSA9IHN0eWxlZC5oMWBcbiAgdGV4dC1kZWNvcmF0aW9uOiAkeyd1bmRlcmxpbmUnfTtcbiAgYm9yZGVyLXJpZ2h0OiBzb2xpZCBibHVlICR7NTR9cHg7XG4gIGJhY2tncm91bmQ6ICR7J3doaXRlJ307XG4gIGNvbG9yOiAkeydibGFjayd9O1xuICBkaXNwbGF5OiAkeydibG9jayd9O1xuICBib3JkZXItcmFkaXVzOiAkeyczcHgnfTtcbiAgcGFkZGluZzogJHsnMjVweCd9O1xuICB3aWR0aDogJHsnNTAwcHgnfTtcbiAgei1pbmRleDogJHsxMDB9O1xuICBmb250LXNpemU6ICR7JzE4cHgnfTtcbiAgdGV4dC1hbGlnbjogJHsnY2VudGVyJ307XG4gIGJvcmRlci1sZWZ0OiAke3AgPT4gcC50aGVtZS5ibHVlfTtcbmBcbiJdfQ== */\\"));"
`;
-exports[`@emotion/babel-plugin-core styled multiple-calls 1`] = `
+exports[`emotion-babel-plugin styled multiple-calls 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled.div\`
@@ -428,38 +463,38 @@ const SomeOtherComponent = styled.button\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"eqvttbz0\\",
+ target: \\"eqhyoqt1\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const SomeOtherComponent = _styled(\\"button\\", {
- target: \\"eqvttbz1\\",
+ target: \\"eqhyoqt0\\",
label: \\"SomeOtherComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"bjcoli\\",
- styles: \\"color:green;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"bjcoli\\",
- styles: \\"color:green;\\",
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU13QyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
`;
-exports[`@emotion/babel-plugin-core styled native 1`] = `
+exports[`emotion-babel-plugin styled native 1`] = `
"import styled from '@emotion/native'
styled.View\`
@@ -471,18 +506,18 @@ styled.View({})
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/native\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import styled from '@emotion/native';
+
/*#__PURE__*/
-_styled.View(\\"color:hotpink;\\");
+styled.View(\\"color:hotpink;\\");
/*#__PURE__*/
-_styled.View(\\"\\");"
+styled.View(\\"\\");"
`;
-exports[`@emotion/babel-plugin-core styled no-call 1`] = `
+exports[`emotion-babel-plugin styled no-call 1`] = `
"import styled from '@emotion/styled'
export let thing = styled
@@ -492,12 +527,12 @@ console.log(styled)
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled\\";
-export let thing = _styled;
-console.log(_styled);"
+import styled from '@emotion/styled';
+export let thing = styled;
+console.log(styled);"
`;
-exports[`@emotion/babel-plugin-core styled no-import 1`] = `
+exports[`emotion-babel-plugin styled no-import 1`] = `
"import '@emotion/styled'
@@ -506,7 +541,7 @@ exports[`@emotion/babel-plugin-core styled no-import 1`] = `
import '@emotion/styled';"
`;
-exports[`@emotion/babel-plugin-core styled object 1`] = `
+exports[`emotion-babel-plugin styled object 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled.div({ color: 'hotpink' })
@@ -514,25 +549,25 @@ const SomeComponent = styled.div({ color: 'hotpink' })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"e1gch6x40\\",
+ target: \\"eyr3fbm0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoib2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
`;
-exports[`@emotion/babel-plugin-core styled object-call-expression 1`] = `
+exports[`emotion-babel-plugin styled object-call-expression 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled('div')({ color: 'hotpink' })
@@ -540,27 +575,25 @@ const SomeComponent = styled('div')({ color: 'hotpink' })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const SomeComponent =
-/*#__PURE__*/
-_styled('div', {
- target: \\"eavmgrz0\\",
+const SomeComponent = /*#__PURE__*/_styled('div', {
+ target: \\"e1cky9xc0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXNCIiwiZmlsZSI6Im9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHN0eWxlZCgnZGl2JykoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
`;
-exports[`@emotion/babel-plugin-core styled object-function 1`] = `
+exports[`emotion-babel-plugin styled object-function 1`] = `
"import styled from '@emotion/styled'
const SomeComponent = styled.div(props => ({ color: props.color }))
@@ -568,17 +601,17 @@ const SomeComponent = styled.div(props => ({ color: props.color }))
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
const SomeComponent = _styled(\\"div\\", {
- target: \\"e1i0tb8p0\\",
+ target: \\"e14okpby0\\",
label: \\"SomeComponent\\"
})(props => ({
color: props.color
}), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1mdW5jdGlvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoib2JqZWN0LWZ1bmN0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHByb3BzID0+ICh7IGNvbG9yOiBwcm9wcy5jb2xvciB9KSlcbiJdfQ== */\\");"
`;
-exports[`@emotion/babel-plugin-core styled other-imports 1`] = `
+exports[`emotion-babel-plugin styled other-imports 1`] = `
"import { something, otherThing } from '@emotion/styled'
something()
@@ -587,15 +620,12 @@ otherThing()
↓ ↓ ↓ ↓ ↓ ↓
-import { otherThing as _otherThing } from \\"@emotion/styled-base\\";
-import { something as _something } from \\"@emotion/styled-base\\";
-
-_something();
-
-_otherThing();"
+import { something, otherThing } from '@emotion/styled';
+something();
+otherThing();"
`;
-exports[`@emotion/babel-plugin-core styled primitives 1`] = `
+exports[`emotion-babel-plugin styled primitives 1`] = `
"import styled from '@emotion/primitives'
styled('SomeFakeComponent')\`
@@ -613,24 +643,24 @@ styled.View({})
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/primitives\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import styled from '@emotion/primitives';
+
/*#__PURE__*/
-_styled('SomeFakeComponent')(\\"color:hotpink;\\");
+styled('SomeFakeComponent')(\\"color:hotpink;\\");
/*#__PURE__*/
-_styled('SomeFakeComponent')(\\"\\");
+styled('SomeFakeComponent')(\\"\\");
/*#__PURE__*/
-_styled.View(\\"color:hotpink;\\");
+styled.View(\\"color:hotpink;\\");
/*#__PURE__*/
-_styled.View(\\"\\");"
+styled.View(\\"\\");"
`;
-exports[`@emotion/babel-plugin-core styled primitives-other-name 1`] = `
+exports[`emotion-babel-plugin styled primitives-other-name 1`] = `
"import something from '@emotion/primitives'
something.View\`
@@ -642,18 +672,18 @@ something.View({})
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/primitives\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import something from '@emotion/primitives';
+
/*#__PURE__*/
-_styled.View(\\"color:hotpink;\\");
+something.View(\\"color:hotpink;\\");
/*#__PURE__*/
-_styled.View(\\"\\");"
+something.View(\\"\\");"
`;
-exports[`@emotion/babel-plugin-core styled shorthand-property 1`] = `
+exports[`emotion-babel-plugin styled shorthand-property 1`] = `
"import styled from '@emotion/styled'
let fontSize = window.whatever
@@ -663,18 +693,18 @@ const H1 = styled.h1({ fontSize })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
let fontSize = window.whatever;
const H1 = _styled(\\"h1\\", {
- target: \\"eqz3u3g0\\",
+ target: \\"e4pkhyn0\\",
label: \\"H1\\"
})({
fontSize
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNob3J0aGFuZC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJVyIsImZpbGUiOiJzaG9ydGhhbmQtcHJvcGVydHkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxubGV0IGZvbnRTaXplID0gd2luZG93LndoYXRldmVyXG5cbmNvbnN0IEgxID0gc3R5bGVkLmgxKHsgZm9udFNpemUgfSlcbiJdfQ== */\\");"
`;
-exports[`@emotion/babel-plugin-core styled with-spread 1`] = `
+exports[`emotion-babel-plugin styled with-spread 1`] = `
"import styled from '@emotion/styled'
const H1 = styled.h1({ ...window.whatever })
@@ -682,10 +712,10 @@ const H1 = styled.h1({ ...window.whatever })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
const H1 = _styled(\\"h1\\", {
- target: \\"e18quw4k0\\",
+ target: \\"e49hde00\\",
label: \\"H1\\"
})({ ...window.whatever
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtc3ByZWFkLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVXIiwiZmlsZSI6IndpdGgtc3ByZWFkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IEgxID0gc3R5bGVkLmgxKHsgLi4ud2luZG93LndoYXRldmVyIH0pXG4iXX0= */\\");"
diff --git a/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap b/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap
new file mode 100644
index 000000000..c98d4560c
--- /dev/null
+++ b/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap
@@ -0,0 +1,619 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vanilla emotion comments 1`] = `
+"import { css } from '@emotion/css'
+
+css\`
+ // display:flex;
+
+ /*
+wef
+
+dfwf*/
+ color: hotpink;
+\`
+
+css\`
+ /* @noflip */
+ left: 1px;
+\`
+
+css\`
+ left: 2px;
+
+ /* @noflip */
+ &.foo {
+ left: 3px;
+ }
+
+ &.zot {
+ /* @noflip */
+ right: 1px;
+ }
+\`
+
+css\`
+ /* @whatever */
+ left: 4px;
+\`
+
+css\`
+ left: 5px;
+
+ /* @whatever */
+ &.foo {
+ left: 6px;
+ }
+
+ &.zot {
+ /* @whatever */
+ right: 2px;
+ }
+\`
+
+css\`
+ // @noflip should-be-removed
+ left: 7px;
+\`
+
+css\`
+ // @shouldberemoved
+ left: 8px;
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"14fte1c\\",
+ styles: \\"/* @noflip */left:1px\\"
+} : {
+ name: \\"14fte1c\\",
+ styles: \\"/* @noflip */left:1px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"hdn0xn\\",
+ styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\"
+} : {
+ name: \\"hdn0xn\\",
+ styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"m1e8pu\\",
+ styles: \\"/* @whatever */left:4px\\"
+} : {
+ name: \\"m1e8pu\\",
+ styles: \\"/* @whatever */left:4px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"ldghp9\\",
+ styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\"
+} : {
+ name: \\"ldghp9\\",
+ styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"o10ag4\\",
+ styles: \\"left:7px\\"
+} : {
+ name: \\"o10ag4\\",
+ styles: \\"left:7px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"zrl602\\",
+ styles: \\"left:8px\\"
+} : {
+ name: \\"zrl602\\",
+ styles: \\"left:8px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion css-basic 1`] = `
+"import { css } from '@emotion/css'
+
+css\`
+ margin: 12px 48px;
+ color: #ffffff;
+ display: flex;
+ flex: 1 0 auto;
+ color: blue;
+ @media (min-width: 420px) {
+ line-height: 40px;
+ }
+ width: \${window.whatever};
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from '@emotion/css';
+
+/*#__PURE__*/
+css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width: 420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));"
+`;
+
+exports[`vanilla emotion css-object 1`] = `
+"import { css } from '@emotion/css'
+
+let someCls = css({
+ color: window.whatever
+})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from '@emotion/css';
+let someCls = /*#__PURE__*/css({
+ color: window.whatever
+}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls;\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxubGV0IHNvbWVDbHMgPSBjc3Moe1xuICBjb2xvcjogd2luZG93LndoYXRldmVyXG59KVxuIl19 */\\");"
+`;
+
+exports[`vanilla emotion does-not-minify-inside-content-property 1`] = `
+"import { css } from '@emotion/css'
+
+const cls1 = css\`
+ content: ' { } ';
+\`
+// prettier-ignore
+const cls2 = css\`
+ content: \\" { } \\";
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+const cls1 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1bpoqk7\\",
+ styles: \\"content:' { } '\\"
+} : {
+ name: \\"19tqhve-cls1\\",
+ styles: \\"content:' { } ';label:cls1;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jb25zdCBjbHMxID0gY3NzYFxuICBjb250ZW50OiAnICB7ICB9ICAnO1xuYFxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCBjbHMyID0gY3NzYFxuICBjb250ZW50OiBcIiAgeyAgfSAgXCI7XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+}); // prettier-ignore
+
+const cls2 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"9pd1g7\\",
+ styles: \\"content:\\\\\\" { } \\\\\\"\\"
+} : {
+ name: \\"16r822g-cls2\\",
+ styles: \\"content:\\\\\\" { } \\\\\\";label:cls2;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jb25zdCBjbHMxID0gY3NzYFxuICBjb250ZW50OiAnICB7ICB9ICAnO1xuYFxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCBjbHMyID0gY3NzYFxuICBjb250ZW50OiBcIiAgeyAgfSAgXCI7XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion hoisting 1`] = `
+"import { css } from '@emotion/css'
+
+function test() {
+ const cls1 = css\`
+ font-size: 20px;
+ @media (min-width: 420px) {
+ color: blue;
+ \${css\`
+ width: 96px;
+ height: 96px;
+ \`};
+ line-height: 26px;
+ }
+ background: green;
+ \${{ backgroundColor: 'hotpink' }};
+ \`
+
+ const cls2 = css\`
+ \${{ color: 'blue' }};
+ \`
+
+ const cls3 = css\`
+ display: flex;
+ &:hover {
+ color: hotpink;
+ }
+ \`
+ let outerVar = 'something'
+ function inner() {
+ const styles = { color: 'darkorchid' }
+ const color = 'aquamarine'
+
+ const cls4 = css\`
+ \${cls3};
+ \${cls1};
+ \${{ color: 'darkorchid' }};
+ \${{ color }};
+ \${css\`
+ height: 420px;
+ width: \${styles};
+ \`};
+ \`
+ let someCls = css\`
+ color: \${outerVar};
+ \`
+ }
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+
+function test() {
+ const cls1 = /*#__PURE__*/css(\\"font-size:20px;@media (min-width: 420px){color:blue;\\", /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"14ht2kb\\",
+ styles: \\"width:96px;height:96px\\"
+ } : {
+ name: \\"1ylk12k-cls1\\",
+ styles: \\"width:96px;height:96px;label:cls1;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6ImhvaXN0aW5nLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ }), \\";line-height:26px;}background:green;background-color:hotpink;;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls1;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\");
+ const cls2 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"14ksm7b\\",
+ styles: \\"color:blue;\\"
+ } : {
+ name: \\"ca17a1-cls2\\",
+ styles: \\"color:blue;;label:cls2;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ const cls3 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"a21n9o\\",
+ styles: \\"display:flex;&:hover{color:hotpink;}\\"
+ } : {
+ name: \\"1m06t0b-cls3\\",
+ styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ let outerVar = 'something';
+
+ function inner() {
+ const styles = {
+ color: 'darkorchid'
+ };
+ const color = 'aquamarine';
+ const cls4 = /*#__PURE__*/css(cls3, \\";\\", cls1, \\";color:darkorchid;;\\", {
+ color
+ }, \\";\\", /*#__PURE__*/css(\\"height:420px;width:\\", styles, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\"), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\");
+ let someCls = /*#__PURE__*/css(\\"color:\\", outerVar, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\");
+ }
+}"
+`;
+
+exports[`vanilla emotion inject-global-basic 1`] = `
+"import { injectGlobal } from '@emotion/css'
+
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { injectGlobal } from '@emotion/css';
+injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\"
+} : {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion inject-global-change-import 1`] = `
+"import { injectGlobal as inject } from '@emotion/css'
+
+inject\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+let injectGlobal = window.whatever
+
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { injectGlobal as inject } from '@emotion/css';
+inject(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\"
+} : {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5pbmplY3RgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcblxubGV0IGluamVjdEdsb2JhbCA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+let injectGlobal = window.whatever;
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`;"
+`;
+
+exports[`vanilla emotion inject-global-with-font-face 1`] = `
+"import { injectGlobal } from '@emotion/css'
+
+injectGlobal\`
+ @font-face {
+ font-family: 'Patrick Hand SC';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'),
+ url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
+ format('woff2');
+ unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
+ U+A720-A7FF;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { injectGlobal } from '@emotion/css';
+injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"lu7y12\\",
+ styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\"
+} : {
+ name: \\"lu7y12\\",
+ styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1mb250LWZhY2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC13aXRoLWZvbnQtZmFjZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuaW5qZWN0R2xvYmFsYFxuICBAZm9udC1mYWNlIHtcbiAgICBmb250LWZhbWlseTogJ1BhdHJpY2sgSGFuZCBTQyc7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgc3JjOiBsb2NhbCgnUGF0cmljayBIYW5kIFNDJyksIGxvY2FsKCdQYXRyaWNrSGFuZFNDLVJlZ3VsYXInKSxcbiAgICAgIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3MvcGF0cmlja2hhbmRzYy92NC9PWUZXQ2dmQ1ItN3VISW92alVaWHNaNzFVaXMwUWViOUdxbzhJWlY3Y2tFLndvZmYyKVxuICAgICAgICBmb3JtYXQoJ3dvZmYyJyk7XG4gICAgdW5pY29kZS1yYW5nZTogVSswMTAwLTAyNGYsIFUrMS0xZWZmLCBVKzIwYTAtMjBhYiwgVSsyMGFkLTIwY2YsIFUrMmM2MC0yYzdmLFxuICAgICAgVStBNzIwLUE3RkY7XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion inject-global-with-interpolation 1`] = `
+"import { injectGlobal } from '@emotion/css'
+
+let display = window.whatever
+
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ display: \${display};
+ & > div {
+ display: none;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { injectGlobal } from '@emotion/css';
+let display = window.whatever;
+injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";&>div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));"
+`;
+
+exports[`vanilla emotion keyframes-basic 1`] = `
+"import { keyframes } from '@emotion/css'
+
+const rotate360 = keyframes\`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { keyframes } from '@emotion/css';
+const rotate360 = /*#__PURE__*/keyframes(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1q8eu9e\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);}\\"
+} : {
+ name: \\"1k98dea-rotate360\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoia2V5ZnJhbWVzLWJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion keyframes-with-interpolation 1`] = `
+"import { keyframes } from '@emotion/css'
+
+let endingRotation = window.whatever
+
+const rotate360 = keyframes\`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(\${endingRotation});
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { keyframes } from '@emotion/css';
+let endingRotation = window.whatever;
+const rotate360 = /*#__PURE__*/keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:rotate360;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmxldCBlbmRpbmdSb3RhdGlvbiA9IHdpbmRvdy53aGF0ZXZlclxuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgke2VuZGluZ1JvdGF0aW9ufSk7XG4gIH1cbmBcbiJdfQ== */\\");"
+`;
+
+exports[`vanilla emotion nested-orphaned-pseudo 1`] = `
+"import { css } from '@emotion/css'
+
+// whitespace before pseudo should be preserved
+css\`
+ & :hover {
+ color: hotpink;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css'; // whitespace before pseudo should be preserved
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1e7lzue\\",
+ styles: \\"& :hover{color:hotpink;}\\"
+} : {
+ name: \\"1e7lzue\\",
+ styles: \\"& :hover{color:hotpink;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5lc3RlZC1vcnBoYW5lZC1wc2V1ZG8uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0ciLCJmaWxlIjoibmVzdGVkLW9ycGhhbmVkLXBzZXVkby5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuLy8gd2hpdGVzcGFjZSBiZWZvcmUgcHNldWRvIHNob3VsZCBiZSBwcmVzZXJ2ZWRcbmNzc2BcbiAgJiA6aG92ZXIge1xuICAgIGNvbG9yOiBob3RwaW5rO1xuICB9XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion object-label 1`] = `
+"import { css } from '@emotion/css'
+
+let obj = {
+ someProp: css({ color: 'green' }),
+ anotherProp: css({ color: 'hotpink' })
+}
+class Thing {
+ static Prop = css({ color: 'yellow' })
+ BadIdea = css({ color: 'red' })
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let obj = {
+ someProp: /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
+ } : {
+ name: \\"cw3a48-someProp\\",
+ styles: \\"color:green;label:someProp;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmxldCBvYmogPSB7XG4gIHNvbWVQcm9wOiBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KSxcbiAgYW5vdGhlclByb3A6IGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFByb3AgPSBjc3MoeyBjb2xvcjogJ3llbGxvdycgfSlcbiAgQmFkSWRlYSA9IGNzcyh7IGNvbG9yOiAncmVkJyB9KVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ }),
+ anotherProp: /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+ } : {
+ name: \\"1oocabw-anotherProp\\",
+ styles: \\"color:hotpink;label:anotherProp;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmxldCBvYmogPSB7XG4gIHNvbWVQcm9wOiBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KSxcbiAgYW5vdGhlclByb3A6IGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFByb3AgPSBjc3MoeyBjb2xvcjogJ3llbGxvdycgfSlcbiAgQmFkSWRlYSA9IGNzcyh7IGNvbG9yOiAncmVkJyB9KVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ })
+};
+
+class Thing {
+ static Prop = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1bcsghv\\",
+ styles: \\"color:yellow\\"
+ } : {
+ name: \\"1p4vs6c-Prop\\",
+ styles: \\"color:yellow;label:Prop;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoib2JqZWN0LWxhYmVsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ BadIdea = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"hwfcu5\\",
+ styles: \\"color:red\\"
+ } : {
+ name: \\"1htwp0n-BadIdea\\",
+ styles: \\"color:red;label:BadIdea;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmxldCBvYmogPSB7XG4gIHNvbWVQcm9wOiBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KSxcbiAgYW5vdGhlclByb3A6IGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFByb3AgPSBjc3MoeyBjb2xvcjogJ3llbGxvdycgfSlcbiAgQmFkSWRlYSA9IGNzcyh7IGNvbG9yOiAncmVkJyB9KVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+}"
+`;
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/actual-expected-usage.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/actual-expected-usage.js
similarity index 58%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/actual-expected-usage.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/actual-expected-usage.js
index 9a01670b7..9eb6e8d98 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/actual-expected-usage.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/actual-expected-usage.js
@@ -1,6 +1,5 @@
/** @jsx jsx */
-import { jsx } from '@emotion/core'
-import css from '@emotion/css/macro'
+import { jsx, css } from '@emotion/react/macro'
const SomeComponent = () => (
{
css`
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-anonymous-function.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/inside-anonymous-function.js
similarity index 57%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-anonymous-function.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/inside-anonymous-function.js
index b849d69e9..d0f8126a5 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-anonymous-function.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/inside-anonymous-function.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
export default () => {
css`
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-class.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/inside-class.js
similarity index 73%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-class.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/inside-class.js
index 3406ec466..c8e5aecbb 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/inside-class.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/inside-class.js
@@ -1,7 +1,6 @@
/** @jsx jsx */
import { Component } from 'react'
-import { jsx } from '@emotion/core'
-import css from '@emotion/css/macro'
+import { jsx, css } from '@emotion/react/macro'
class SomeComponent extends Component {
render() {
diff --git a/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-1.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-1.js
new file mode 100644
index 000000000..8f0dab1d9
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-1.js
@@ -0,0 +1,5 @@
+import { css } from '@emotion/react/macro'
+
+const thing = css`
+ color: hotpink;
+`
diff --git a/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-arrow-function-expression.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-arrow-function-expression.js
new file mode 100644
index 000000000..329d79d0e
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-arrow-function-expression.js
@@ -0,0 +1,5 @@
+import { css } from '@emotion/react/macro'
+
+const thing = () => css`
+ color: hotpink;
+`
diff --git a/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-function-expression.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-function-expression.js
new file mode 100644
index 000000000..7372b24ea
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-function-expression.js
@@ -0,0 +1,7 @@
+import { css } from '@emotion/react/macro'
+
+const thing = function() {
+ return css`
+ color: hotpink;
+ `
+}
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-no-final-semi.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-no-final-semi.js
similarity index 57%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-no-final-semi.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/label-no-final-semi.js
index 0e4b02b49..3d366c862 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-no-final-semi.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-no-final-semi.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
// prettier-ignore
const thing = css`
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-object.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-object.js
similarity index 77%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-object.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/label-object.js
index b85115f9c..4ec0a7a06 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-object.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-object.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
const thing = {
thisShouldBeTheLabel: css`
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js
similarity index 87%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js
index b7b7c8334..e69dd8823 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js
@@ -1,5 +1,5 @@
import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css/macro'
+import css from '@emotion/react/macro'
import { hoverStyles } from './styles'
var templateObject_1
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js
similarity index 84%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js
index 38040e252..bc126539e 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js
@@ -1,5 +1,5 @@
import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
var templateObject_1
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/multiple-calls.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/multiple-calls.js
similarity index 65%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/multiple-calls.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/multiple-calls.js
index cef066e25..04c12d8ca 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/multiple-calls.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/multiple-calls.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
const thing = css`
color: hotpink;
diff --git a/packages/babel-plugin/__tests__/css-macro/__fixtures__/no-actual-import.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/no-actual-import.js
new file mode 100644
index 000000000..cb9d608df
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/no-actual-import.js
@@ -0,0 +1 @@
+import '@emotion/react/macro'
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-dynamic-property.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/object-dynamic-property.js
similarity index 65%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-dynamic-property.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/object-dynamic-property.js
index cf75dc886..39139261b 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-dynamic-property.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/object-dynamic-property.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
function doThing() {
return {
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js
similarity index 70%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js
index 2e97c7201..abc00ba64 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js
@@ -1,5 +1,5 @@
-import { css } from '@emotion/core'
-import { extractCritical } from 'emotion-server'
+import { css } from '@emotion/react'
+import { extractCritical } from '@emotion/server'
import React from 'react'
import { renderToString } from 'react-dom/server'
diff --git a/packages/babel-plugin/__tests__/css-macro/__fixtures__/other-imports.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/other-imports.js
new file mode 100644
index 000000000..ddc230587
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/other-imports.js
@@ -0,0 +1,3 @@
+import { nonExistantImport } from '@emotion/react/macro'
+
+nonExistantImport()
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/remove-block-comments.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/remove-block-comments.js
similarity index 57%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/remove-block-comments.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/remove-block-comments.js
index 662929d78..dfef06540 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/remove-block-comments.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/remove-block-comments.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
css`
/* color:green;
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/remove-line-comments.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/remove-line-comments.js
similarity index 51%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/remove-line-comments.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/remove-line-comments.js
index f8f1e1ef7..31b0e9a33 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/remove-line-comments.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/remove-line-comments.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
css`
// color: green;
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js
similarity index 78%
rename from packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js
rename to packages/babel-plugin/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js
index e2217793d..349df0b07 100644
--- a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js
+++ b/packages/babel-plugin/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js
@@ -1,4 +1,4 @@
-import css from '@emotion/css/macro'
+import { css } from '@emotion/react/macro'
function media(...args) {
return css`
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap b/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap
similarity index 50%
rename from packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap
rename to packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap
index a9e6e119d..c4dcfd5ff 100644
--- a/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap
+++ b/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap
@@ -1,9 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`@emotion/babel-plugin-core css actual-expected-usage 1`] = `
+exports[`@emotion/react - css macro actual-expected-usage 1`] = `
"/** @jsx jsx */
-import { jsx } from '@emotion/core'
-import css from '@emotion/css'
+import { jsx, css } from '@emotion/react/macro'
const SomeComponent = () => (
(
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
/** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx, css } from \\"@emotion/react\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjdHVhbC1leHBlY3RlZC11c2FnZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNWSIsImZpbGUiOiJhY3R1YWwtZXhwZWN0ZWQtdXNhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY29uc3QgU29tZUNvbXBvbmVudCA9ICgpID0+IChcbiAgPGRpdlxuICAgIGNzcz17Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH1cbiAgLz5cbilcbiJdfQ== */\\",
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjdHVhbC1leHBlY3RlZC11c2FnZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJhY3R1YWwtZXhwZWN0ZWQtdXNhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSAoKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGB9XG4gIC8+XG4pXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const SomeComponent = () =>
;"
`;
-exports[`@emotion/babel-plugin-core css already-transpiled-by-babel 1`] = `
+exports[`@emotion/react - css macro already-transpiled-by-babel 1`] = `
"/* eslint-disable */
-import css from '@emotion/css'
+import css from '@emotion/css/macro'
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose'
function _templateObject() {
@@ -57,7 +54,8 @@ const fooStyles = css(_templateObject())
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+/* eslint-disable */
+import css from \\"@emotion/css\\";
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose';
function _templateObject() {
@@ -71,13 +69,11 @@ function _templateObject() {
} // no label & source maps should be appended
-const fooStyles =
-/*#__PURE__*/
-_css(_templateObject());"
+const fooStyles = css(_templateObject());"
`;
-exports[`@emotion/babel-plugin-core css basic 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro basic 1`] = `
+"import { css } from '@emotion/react/macro'
function doThing() {
return css\`
@@ -88,17 +84,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"k008qs\\",
- styles: \\"display:flex;\\"
+ name: \\"zjik7\\",
+ styles: \\"display:flex\\"
} : {
- name: \\"k008qs\\",
- styles: \\"display:flex;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
+ name: \\"8v5aok-doThing\\",
+ styles: \\"display:flex;label:doThing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -107,8 +103,8 @@ function doThing() {
}"
`;
-exports[`@emotion/babel-plugin-core css call-expression 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro call-expression 1`] = `
+"import { css } from '@emotion/react/macro'
function doThing() {
return css({ color: 'hotpink' })
@@ -117,17 +113,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
+ name: \\"aarqni-doThing\\",
+ styles: \\"color:hotpink;label:doThing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -136,8 +132,8 @@ function doThing() {
}"
`;
-exports[`@emotion/babel-plugin-core css call-inside-call 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro call-inside-call 1`] = `
+"import { css } from '@emotion/react/macro'
const thing = css\`
display: flex;
@@ -151,42 +147,39 @@ const thing = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const thing =
-/*#__PURE__*/
-_css(\\"display:flex;&:hover{\\", process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\"
+import { css } from \\"@emotion/react\\";
+const thing = /*#__PURE__*/css(\\"display:flex;&:hover{\\", process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1MiLCJmaWxlIjoiY2FsbC1pbnNpZGUtY2FsbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1MiLCJmaWxlIjoiY2FsbC1pbnNpZGUtY2FsbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-}, \\";};label:thing;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICY6aG92ZXIge1xuICAgICR7Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH07XG4gIH1cbmBcbiJdfQ== */\\"));"
+}, \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:thing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICY6aG92ZXIge1xuICAgICR7Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH07XG4gIH1cbmBcbiJdfQ== */\\");"
`;
-exports[`@emotion/babel-plugin-core css comment-with-interpolation 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro comment-with-interpolation 1`] = `
+"import { css } from '@emotion/react/macro'
css\`
// color: \${'green'};
- /*
-
+ /*
+
something: \${'something'};
-
+
*/
color: hotpink;
\`
css\`
// color: \${'green'};
- /*
-
+ /*
+
something: \${'something'};
-
+
*/
color: \${'hotpink'};
\`
@@ -194,32 +187,31 @@ css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qIFxuICBcbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcbiAgXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKiBcbiAgXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG4gIFxuICAqL1xuICBjb2xvcjogJHsnaG90cGluayd9O1xuYFxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qXG5cbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcblxuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiAkeydob3RwaW5rJ307XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qIFxuICBcbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcbiAgXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKiBcbiAgXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG4gIFxuICAqL1xuICBjb2xvcjogJHsnaG90cGluayd9O1xuYFxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNzc2BcbiAgLy8gY29sb3I6ICR7J2dyZWVuJ307XG4gIC8qXG5cbiAgc29tZXRoaW5nOiAkeydzb21ldGhpbmcnfTtcblxuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiAkeydob3RwaW5rJ307XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/babel-plugin-core css impure 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro impure 1`] = `
+"import { css } from '@emotion/react/macro'
function thing() {}
@@ -232,20 +224,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+import { css } from \\"@emotion/react\\";
function thing() {}
function doThing() {
- return (
- /*#__PURE__*/
- _css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
- );
+ return /*#__PURE__*/css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:doThing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\");
}"
`;
-exports[`@emotion/babel-plugin-core css inside-anonymous-arrow-function 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro inside-anonymous-arrow-function 1`] = `
+"import { css } from '@emotion/react/macro'
export default () => {
css\`
@@ -256,17 +245,17 @@ export default () => {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -275,8 +264,8 @@ export default (() => {
});"
`;
-exports[`@emotion/babel-plugin-core css inside-anonymous-function 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro inside-anonymous-function 1`] = `
+"import { css } from '@emotion/react/macro'
export default () => {
css\`
@@ -287,17 +276,17 @@ export default () => {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -306,11 +295,10 @@ export default (() => {
});"
`;
-exports[`@emotion/babel-plugin-core css inside-class 1`] = `
+exports[`@emotion/react - css macro inside-class 1`] = `
"/** @jsx jsx */
import { Component } from 'react'
-import { jsx } from '@emotion/core'
-import css from '@emotion/css'
+import { jsx, css } from '@emotion/react/macro'
class SomeComponent extends Component {
render() {
@@ -327,21 +315,19 @@ class SomeComponent extends Component {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
/** @jsx jsx */
import { Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx, css } from \\"@emotion/react\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"zszx19-SomeComponent\\",
- styles: \\"color:hotpink;;label:SomeComponent;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTZ0IiLCJmaWxlIjoiaW5zaWRlLWNsYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY2xhc3MgU29tZUNvbXBvbmVudCBleHRlbmRzIENvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0= */\\",
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRZ0IiLCJmaWxlIjoiaW5zaWRlLWNsYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNsYXNzIFNvbWVDb21wb25lbnQgZXh0ZW5kcyBDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgIClcbiAgfVxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -353,64 +339,90 @@ class SomeComponent extends Component {
}"
`;
-exports[`@emotion/babel-plugin-core css inside-non-pascal-case-arrow-function 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro label-1 1`] = `
+"import { css } from '@emotion/react/macro'
-let something = () => {
- css\`
- color: hotpink;
- \`
-}
+const thing = css\`
+ color: hotpink;
+\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+import { css } from \\"@emotion/react\\";
+const thing = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-let something = () => {
- _ref;
};"
`;
-exports[`@emotion/babel-plugin-core css label-1 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro label-arrow-function-expression 1`] = `
+"import { css } from '@emotion/react/macro'
-const thing = css\`
+const thing = () => css\`
color: hotpink;
\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSAoKSA9PiBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const thing = () => _ref;"
+`;
+
+exports[`@emotion/react - css macro label-function-expression 1`] = `
+"import { css } from '@emotion/react/macro'
+
+const thing = function() {
+ return css\`
+ color: hotpink;
+ \`
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const thing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\"
+import { css } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1kiLCJmaWxlIjoibGFiZWwtZnVuY3Rpb24tZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGZ1bmN0aW9uKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const thing = function () {
+ return _ref;
};"
`;
-exports[`@emotion/babel-plugin-core css label-no-final-semi 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro label-no-final-semi 1`] = `
+"import { css } from '@emotion/react/macro'
// prettier-ignore
const thing = css\`
@@ -420,24 +432,23 @@ const thing = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-// prettier-ignore
+import { css } from \\"@emotion/react\\"; // prettier-ignore
+
const thing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1hi0qos-thing\\",
- styles: \\"color:hotpink;label:thing;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
name: \\"1hi0qos-thing\\",
styles: \\"color:hotpink;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2lCIiwiZmlsZSI6ImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbmtcbmBcbiJdfQ== */\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2lCIiwiZmlsZSI6ImxhYmVsLW5vLWZpbmFsLXNlbWkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbmtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/babel-plugin-core css label-object 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro label-object 1`] = `
+"import { css } from '@emotion/react/macro'
const thing = {
thisShouldBeTheLabel: css\`
@@ -452,36 +463,35 @@ const thing = {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
const thing = {
thisShouldBeTheLabel: process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lsaf1d-thisShouldBeTheLabel\\",
- styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lsaf1d-thisShouldBeTheLabel\\",
- styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMkIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
+ name: \\"xjpive-thisShouldBeTheLabel\\",
+ styles: \\"color:hotpink;label:thisShouldBeTheLabel;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMkIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
},
// prettier-ignore
'shouldBeAnotherLabel': process.env.NODE_ENV === \\"production\\" ? {
- name: \\"7xoeh4-shouldBeAnotherLabel\\",
- styles: \\"color:green;;label:shouldBeAnotherLabel;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"7xoeh4-shouldBeAnotherLabel\\",
- styles: \\"color:green;;label:shouldBeAnotherLabel;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
+ name: \\"lgalrw-shouldBeAnotherLabel\\",
+ styles: \\"color:green;label:shouldBeAnotherLabel;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0ge1xuICB0aGlzU2hvdWxkQmVUaGVMYWJlbDogY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgLFxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgJ3Nob3VsZEJlQW5vdGhlckxhYmVsJzpjc3NgXG4gICAgY29sb3I6Z3JlZW47XG4gIGBcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
}
};"
`;
-exports[`@emotion/babel-plugin-core css label-transpiled-by-ts 1`] = `
+exports[`@emotion/react - css macro label-transpiled-by-ts 1`] = `
"import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css'
+import { css } from '@emotion/react/macro'
var templateObject_1
@@ -496,21 +506,15 @@ const someVar = css(
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
-var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\";
-
import { __makeTemplateObject } from 'tslib';
+import { css } from \\"@emotion/react\\";
var templateObject_1;
-
-const someVar =
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])));"
+const someVar = /*#__PURE__*/css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar;\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar;\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")])));"
`;
-exports[`@emotion/babel-plugin-core css label-transpiled-by-ts-with-interpolations 1`] = `
+exports[`@emotion/react - css macro label-transpiled-by-ts-with-interpolations 1`] = `
"import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css'
+import css from '@emotion/react/macro'
import { hoverStyles } from './styles'
var templateObject_1
@@ -527,21 +531,15 @@ const someVar = css(
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
-var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMtd2l0aC1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoibGFiZWwtdHJhbnNwaWxlZC1ieS10cy13aXRoLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcbmltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuaW1wb3J0IHsgaG92ZXJTdHlsZXMgfSBmcm9tICcuL3N0eWxlcydcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKSxcbiAgaG92ZXJTdHlsZXNcbilcbiJdfQ== */\\";
-
import { __makeTemplateObject } from 'tslib';
+import css from \\"@emotion/react\\";
import { hoverStyles } from './styles';
var templateObject_1;
-
-const someVar =
-/*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])), hoverStyles);"
+const someVar = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n'], ['\\\\n color: hotpink;\\\\n'])), hoverStyles);"
`;
-exports[`@emotion/babel-plugin-core css multiple-calls 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro multiple-calls 1`] = `
+"import { css } from '@emotion/react/macro'
const thing = css\`
color: hotpink;
@@ -554,41 +552,40 @@ const otherThing = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
const thing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1yq4vdx-thing\\",
- styles: \\"color:hotpink;;label:thing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
+ name: \\"1hi0qos-thing\\",
+ styles: \\"color:hotpink;label:thing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const otherThing = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"vrj4vp-otherThing\\",
- styles: \\"color:green;;label:otherThing;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"vrj4vp-otherThing\\",
- styles: \\"color:green;;label:otherThing;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
+ name: \\"onvdw0-otherThing\\",
+ styles: \\"color:green;label:otherThing;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IG90aGVyVGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/babel-plugin-core css no-actual-import 1`] = `
-"import '@emotion/css'
+exports[`@emotion/react - css macro no-actual-import 1`] = `
+"import '@emotion/react/macro'
↓ ↓ ↓ ↓ ↓ ↓
-import '@emotion/css';"
+import \\"@emotion/react\\";"
`;
-exports[`@emotion/babel-plugin-core css object-dynamic-property 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro object-dynamic-property 1`] = `
+"import { css } from '@emotion/react/macro'
function doThing() {
return {
@@ -599,17 +596,17 @@ function doThing() {
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiB7XG4gICAgW2Nzcyh7IGNvbG9yOiAnaG90cGluaycgfSldOiAnY29sZGJsdWUnXG4gIH1cbn1cbiJdfQ== */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiB7XG4gICAgW2Nzcyh7IGNvbG9yOiAnaG90cGluaycgfSldOiAnY29sZGJsdWUnXG4gIH1cbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -620,9 +617,9 @@ function doThing() {
}"
`;
-exports[`@emotion/babel-plugin-core css object-pattern-variable-declarator 1`] = `
-"import { css } from '@emotion/core'
-import { extractCritical } from 'emotion-server'
+exports[`@emotion/react - css macro object-pattern-variable-declarator 1`] = `
+"import { css } from '@emotion/react'
+import { extractCritical } from '@emotion/server'
import React from 'react'
import { renderToString } from 'react-dom/server'
@@ -639,40 +636,31 @@ const { css: styles } = extractCritical(
↓ ↓ ↓ ↓ ↓ ↓
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-import { css } from '@emotion/core';
-import { extractCritical } from 'emotion-server';
+import { css } from '@emotion/react';
+import { extractCritical } from '@emotion/server';
import React from 'react';
import { renderToString } from 'react-dom/server';
const {
css: styles
-} = extractCritical(renderToString(
));"
+} = extractCritical(renderToString(
));"
`;
-exports[`@emotion/babel-plugin-core css other-imports 1`] = `
-"import { nonExistantImport } from '@emotion/css'
+exports[`@emotion/react - css macro other-imports 1`] = `
+"import { nonExistantImport } from '@emotion/react/macro'
nonExistantImport()
↓ ↓ ↓ ↓ ↓ ↓
-import { nonExistantImport as _nonExistantImport } from \\"@emotion/css\\";
-
-_nonExistantImport();"
+import { nonExistantImport } from \\"@emotion/react\\";
+nonExistantImport();"
`;
-exports[`@emotion/babel-plugin-core css remove-block-comments 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro remove-block-comments 1`] = `
+"import { css } from '@emotion/react/macro'
css\`
/* color:green;
@@ -684,23 +672,22 @@ ddjfwjkng
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1ibG9jay1jb21tZW50cy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJyZW1vdmUtYmxvY2stY29tbWVudHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvKiBjb2xvcjpncmVlbjtcbmRkamZ3amtuZ1xuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1ibG9jay1jb21tZW50cy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJyZW1vdmUtYmxvY2stY29tbWVudHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY3NzYFxuICAvKiBjb2xvcjpncmVlbjtcbmRkamZ3amtuZ1xuICAqL1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/babel-plugin-core css remove-line-comments 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro remove-line-comments 1`] = `
+"import { css } from '@emotion/react/macro'
css\`
// color: green;
@@ -710,23 +697,22 @@ css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import { css } from \\"@emotion/react\\";
process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6InJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgLy8gY29sb3I6IGdyZWVuO1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6InJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNzc2BcbiAgLy8gY29sb3I6IGdyZWVuO1xuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};"
`;
-exports[`@emotion/babel-plugin-core css tagged-template-args-forwarded 1`] = `
-"import css from '@emotion/css'
+exports[`@emotion/react - css macro tagged-template-args-forwarded 1`] = `
+"import { css } from '@emotion/react/macro'
function media(...args) {
return css\`
@@ -743,18 +729,11 @@ const test = css\`
↓ ↓ ↓ ↓ ↓ ↓
-import _css from \\"@emotion/css\\";
+import { css } from \\"@emotion/react\\";
function media(...args) {
- return (
- /*#__PURE__*/
- _css(\\"@media (min-width:100px){\\",
- /*#__PURE__*/
- _css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"))
- );
+ return /*#__PURE__*/css(\\"@media (min-width: 100px){\\", /*#__PURE__*/css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\");
}
-const test =
-/*#__PURE__*/
-_css(media\`color: red;\`, \\";;label:test;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIG1lZGlhKC4uLmFyZ3MpIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAwcHgpIHtcbiAgICAgICR7Y3NzKC4uLmFyZ3MpfTtcbiAgICB9XG4gIGBcbn1cblxuY29uc3QgdGVzdCA9IGNzc2BcbiAgJHttZWRpYWBjb2xvcjogcmVkO2B9O1xuYFxuIl19 */\\"));"
+const test = /*#__PURE__*/css(media\`color: red;\`, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:test;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmZ1bmN0aW9uIG1lZGlhKC4uLmFyZ3MpIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogMTAwcHgpIHtcbiAgICAgICR7Y3NzKC4uLmFyZ3MpfTtcbiAgICB9XG4gIGBcbn1cblxuY29uc3QgdGVzdCA9IGNzc2BcbiAgJHttZWRpYWBjb2xvcjogcmVkO2B9O1xuYFxuIl19 */\\");"
`;
diff --git a/packages/babel-plugin/__tests__/css-macro/index.js b/packages/babel-plugin/__tests__/css-macro/index.js
new file mode 100644
index 000000000..fae1b1815
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-macro/index.js
@@ -0,0 +1,4 @@
+// @flow
+import babelTester from 'babel-tester'
+
+babelTester('@emotion/react - css macro', __dirname)
diff --git a/packages/babel-plugin/__tests__/css-requires-options.js b/packages/babel-plugin/__tests__/css-requires-options.js
new file mode 100644
index 000000000..ce17ed79d
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css-requires-options.js
@@ -0,0 +1,219 @@
+// @flow
+import babelTester from 'babel-tester'
+import plugin from '@emotion/babel-plugin'
+
+const last = arr => arr[arr.length - 1]
+
+const cases = {
+ 'label format with only local': {
+ code: `
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [
+ [
+ plugin,
+ {
+ labelFormat: 'my-css-[local]'
+ }
+ ]
+ ],
+ babelFileName: __filename
+ },
+ 'label format with filename that is index and local': {
+ code: `
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [
+ [
+ plugin,
+ {
+ labelFormat: 'my-css-[filename]-[local]'
+ }
+ ]
+ ],
+ babelFileName: 'some-directory/index.js'
+ },
+
+ 'label format with filename and local': {
+ code: `
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [
+ [
+ plugin,
+ {
+ labelFormat: 'my-css-[filename]-[local]'
+ }
+ ]
+ ],
+ babelFileName: __filename
+ },
+
+ 'label format with dirname, filename, and local': {
+ code: `
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [
+ [
+ plugin,
+ {
+ labelFormat: 'my-css-[dirname]-[filename]-[local]'
+ }
+ ]
+ ],
+ babelFileName: __filename
+ },
+
+ 'label format function': {
+ code: `
+ import { css } from '@emotion/css'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [
+ [
+ plugin,
+ {
+ labelFormat: ({ name, path }) =>
+ `${name.toUpperCase()}_${last(
+ path.replace(/\..+$/, '').split('/')
+ ).toUpperCase()}`
+ }
+ ]
+ ],
+ babelFileName: __filename
+ },
+
+ // this test has better readability for label alone than other ones which include source maps
+ 'label on code transpiled by TS': {
+ code: `
+ import { __makeTemplateObject } from 'tslib'
+ import { css } from '@emotion/react'
+
+ var templateObject_1
+
+ const someVar = css(
+ templateObject_1 ||
+ (templateObject_1 = __makeTemplateObject(
+ ['\\n color: hotpink;\\n'],
+ ['\\n color: hotpink;\\n']
+ ))
+ )
+ `,
+ plugins: [
+ [
+ plugin,
+ {
+ sourceMap: false
+ }
+ ]
+ ],
+ babelFileName: __filename
+ },
+
+ 'label on code transpiled by TS (with interpolations) ': {
+ code: `
+ import { __makeTemplateObject } from 'tslib'
+ import { css } from '@emotion/react'
+ import { hoverStyles } from './styles'
+
+ var templateObject_1
+
+ const someVar = css(
+ templateObject_1 ||
+ (templateObject_1 = __makeTemplateObject(
+ ['\\n color: hotpink;\\n'],
+ ['\\n color: hotpink;\\n']
+ )),
+ hoverStyles
+ )
+ `,
+ opts: {
+ autoLabel: true,
+ sourceMap: false
+ },
+ filename: __filename
+ },
+
+ 'code already transpiled by emotion plugin (avoid double transpilation)': {
+ code: `
+ import { keyframes as _keyframes } from "emotion";
+ import { css as _css } from "emotion";
+
+ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; }
+
+ let someCls =
+ /*#__PURE__*/
+ _css(process.env.NODE_ENV === "production" ? {
+ name: "1jwq1yt-someCls",
+ styles: "color:hotpink;;label:someCls;"
+ } : {
+ name: "1jwq1yt-someCls",
+ styles: "color:hotpink;;label:someCls;",
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+
+ let rotate360 =
+ /*#__PURE__*/
+ _keyframes(process.env.NODE_ENV === "production" ? {
+ name: "1k98dea-rotate360",
+ styles: "from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;"
+ } : {
+ name: "1k98dea-rotate360",
+ styles: "from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;",
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ `,
+ plugins: [plugin],
+ babelFileName: __filename
+ },
+ 'autoLabel set to always': {
+ code: `
+ import { css } from 'emotion'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [[plugin, { autoLabel: 'always' }]],
+ babelFileName: __filename
+ },
+ 'autoLabel set to always - complex expression': {
+ code: `
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles)
+ `,
+ plugins: [[plugin, { autoLabel: 'always' }]],
+ babelFileName: __filename
+ },
+ 'autoLabel set to always - complex expression, last arg string': {
+ code: `
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles, 'color: hotpink;')
+ `,
+ plugins: [[plugin, { autoLabel: 'always' }]],
+ babelFileName: __filename
+ },
+ 'autoLabel set to never': {
+ code: `
+ import { css } from 'emotion'
+ let cls = css({color:'hotpink'})
+ `,
+ plugins: [[plugin, { autoLabel: 'never' }]],
+ babelFileName: __filename
+ },
+ 'autoLabel set to never - complex expression': {
+ code: `
+ import { css } from 'emotion'
+ import fooStyles from './foo'
+ let cls = css(fooStyles)
+ `,
+ plugins: [[plugin, { autoLabel: 'never' }]],
+ babelFileName: __filename
+ }
+}
+babelTester('babel css inline', cases)
diff --git a/packages/babel-plugin/__tests__/css.js b/packages/babel-plugin/__tests__/css.js
new file mode 100644
index 000000000..d8ed7ea49
--- /dev/null
+++ b/packages/babel-plugin/__tests__/css.js
@@ -0,0 +1,8 @@
+import babelTester from 'babel-tester'
+import plugin from '@emotion/babel-plugin'
+import path from 'path'
+
+babelTester('emotion-babel-plugin css', path.join(__dirname, 'css-macro'), {
+ plugins: [plugin],
+ transform: src => src.replace(/\/macro/g, '')
+})
diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/css.js b/packages/babel-plugin/__tests__/disable-source-map/__fixtures__/css.js
similarity index 51%
rename from packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/css.js
rename to packages/babel-plugin/__tests__/disable-source-map/__fixtures__/css.js
index 28fbdfdd7..dd92ecdec 100644
--- a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/css.js
+++ b/packages/babel-plugin/__tests__/disable-source-map/__fixtures__/css.js
@@ -1,3 +1,3 @@
-import css from '@emotion/css'
+import { css } from '@emotion/react'
let style = css({ color: 'hotpink' })
diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/styled.js b/packages/babel-plugin/__tests__/disable-source-map/__fixtures__/styled.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/styled.js
rename to packages/babel-plugin/__tests__/disable-source-map/__fixtures__/styled.js
diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/vanilla.js b/packages/babel-plugin/__tests__/disable-source-map/__fixtures__/vanilla.js
similarity index 51%
rename from packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/vanilla.js
rename to packages/babel-plugin/__tests__/disable-source-map/__fixtures__/vanilla.js
index f6836db0b..a5a57e4da 100644
--- a/packages/babel-plugin-emotion/__tests__/disable-source-map/__fixtures__/vanilla.js
+++ b/packages/babel-plugin/__tests__/disable-source-map/__fixtures__/vanilla.js
@@ -1,3 +1,3 @@
-import { css } from 'emotion'
+import { css } from '@emotion/css'
let cls = css({ color: 'hotpink' })
diff --git a/packages/babel-plugin/__tests__/disable-source-map/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/disable-source-map/__snapshots__/index.js.snap
new file mode 100644
index 000000000..55cc88385
--- /dev/null
+++ b/packages/babel-plugin/__tests__/disable-source-map/__snapshots__/index.js.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`disable source map css 1`] = `
+"import { css } from '@emotion/react'
+
+let style = css({ color: 'hotpink' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/react';
+let style = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1gfxf27-style\\",
+ styles: \\"color:hotpink;label:style;\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};"
+`;
+
+exports[`disable source map styled 1`] = `
+"import styled from '@emotion/styled'
+
+let Comp = styled.div({ color: 'hotpink' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+let Comp = _styled(\\"div\\", {
+ target: \\"eggnygh0\\",
+ label: \\"Comp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`disable source map vanilla 1`] = `
+"import { css } from '@emotion/css'
+
+let cls = css({ color: 'hotpink' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css';
+let cls = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"6kh100-cls\\",
+ styles: \\"color:hotpink;label:cls;\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/index.js b/packages/babel-plugin/__tests__/disable-source-map/index.js
similarity index 75%
rename from packages/babel-plugin-emotion/__tests__/disable-source-map/index.js
rename to packages/babel-plugin/__tests__/disable-source-map/index.js
index 128796f2b..fe82aa99f 100644
--- a/packages/babel-plugin-emotion/__tests__/disable-source-map/index.js
+++ b/packages/babel-plugin/__tests__/disable-source-map/index.js
@@ -1,5 +1,5 @@
import babelTester from 'babel-tester'
-import plugin from 'babel-plugin-emotion'
+import plugin from '@emotion/babel-plugin'
babelTester('disable source map', __dirname, {
plugins: [[plugin, { sourceMap: false }]]
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/basic-array.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/basic-array.js
new file mode 100644
index 000000000..07485c0a8
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/basic-array.js
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () => (
+
+)
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/basic-obj.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/basic-obj.js
new file mode 100644
index 000000000..ef15e5dd8
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/basic-obj.js
@@ -0,0 +1,4 @@
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/complex-array.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/complex-array.js
new file mode 100644
index 000000000..2930eaf21
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/complex-array.js
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/complex-obj.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/complex-obj.js
new file mode 100644
index 000000000..4c47e43e8
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/complex-obj.js
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/css-used-as-value.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/css-used-as-value.js
new file mode 100644
index 000000000..21be25ab7
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/css-used-as-value.js
@@ -0,0 +1,5 @@
+import * as React from 'react'
+import { Global, css } from '@emotion/react/macro'
+
+// this gets ignored by Global macro, but it tests that this combination doesn't crash or something
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/no-jsx.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/no-jsx.js
new file mode 100644
index 000000000..39a4101db
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/no-jsx.js
@@ -0,0 +1,4 @@
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+const foo = Global
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/no-styles-prop.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/no-styles-prop.js
new file mode 100644
index 000000000..1307da5be
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/no-styles-prop.js
@@ -0,0 +1,4 @@
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/spread-styles.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/spread-styles.js
new file mode 100644
index 000000000..2fe4612e3
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/spread-styles.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__fixtures__/with-closing-element.js b/packages/babel-plugin/__tests__/global-macro/__fixtures__/with-closing-element.js
new file mode 100644
index 000000000..83772f865
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__fixtures__/with-closing-element.js
@@ -0,0 +1,6 @@
+/* eslint-disable */
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+// prettier-ignore
+export default () =>
diff --git a/packages/babel-plugin/__tests__/global-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/global-macro/__snapshots__/index.js.snap
new file mode 100644
index 000000000..6844a0bbd
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/__snapshots__/index.js.snap
@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@emotion/react - Global macro basic-array 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"9aoaei\\",
+ styles: \\"color:hotpink;background-color:#fff\\"
+} : {
+ name: \\"9aoaei\\",
+ styles: \\"color:hotpink;background-color:#fff\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8R2xvYmFsIHN0eWxlcz17W3sgY29sb3I6ICdob3RwaW5rJyB9LCB7IGJhY2tncm91bmRDb2xvcjogJyNmZmYnIH1dfSAvPlxuKVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro basic-obj 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro complex-array 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+
+const getBgColor = () => ({
+ backgroundColor: '#fff'
+});
+
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro complex-obj 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css as _css } from \\"@emotion/react\\";
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+
+const getBgColor = () => ({
+ backgroundColor: '#fff'
+});
+
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro css-used-as-value 1`] = `
+"import * as React from 'react'
+import { Global, css } from '@emotion/react/macro'
+
+// this gets ignored by Global macro, but it tests that this combination doesn't crash or something
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global, css } from \\"@emotion/react\\"; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuLy8gdGhpcyBnZXRzIGlnbm9yZWQgYnkgR2xvYmFsIG1hY3JvLCBidXQgaXQgdGVzdHMgdGhhdCB0aGlzIGNvbWJpbmF0aW9uIGRvZXNuJ3QgY3Jhc2ggb3Igc29tZXRoaW5nXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17Y3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KX0gLz5cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro no-jsx 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+const foo = Global
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+const foo = Global;"
+`;
+
+exports[`@emotion/react - Global macro no-styles-prop 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro spread-styles 1`] = `
+"/* eslint-disable */
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+/* eslint-disable */
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\";
+export default (() =>
);"
+`;
+
+exports[`@emotion/react - Global macro with-closing-element 1`] = `
+"/* eslint-disable */
+import * as React from 'react'
+import { Global } from '@emotion/react/macro'
+
+// prettier-ignore
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/* eslint-disable */
+import * as React from 'react';
+import { Global } from \\"@emotion/react\\"; // prettier-ignore
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG4vLyBwcmV0dGllci1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXt7IGNvbG9yOiAnaG90cGluaycgfX0+PC9HbG9iYWw+XG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
diff --git a/packages/babel-plugin/__tests__/global-macro/index.js b/packages/babel-plugin/__tests__/global-macro/index.js
new file mode 100644
index 000000000..f2d206728
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-macro/index.js
@@ -0,0 +1,4 @@
+// @flow
+import babelTester from 'babel-tester'
+
+babelTester('@emotion/react - Global macro', __dirname)
diff --git a/packages/babel-plugin/__tests__/global-requires-options.js b/packages/babel-plugin/__tests__/global-requires-options.js
new file mode 100644
index 000000000..e8e7cf132
--- /dev/null
+++ b/packages/babel-plugin/__tests__/global-requires-options.js
@@ -0,0 +1,17 @@
+// @flow
+import babelTester from 'babel-tester'
+import plugin from '@emotion/babel-plugin'
+
+const cases = {
+ 'source maps can be disabled': {
+ code: `
+import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
+ `,
+ plugins: [[plugin, { sourceMap: false }]]
+ }
+}
+
+babelTester('Global inline', cases)
diff --git a/packages/babel-plugin-emotion/__tests__/css.js b/packages/babel-plugin/__tests__/global.js
similarity index 57%
rename from packages/babel-plugin-emotion/__tests__/css.js
rename to packages/babel-plugin/__tests__/global.js
index 2590d6eb5..68f0e3d57 100644
--- a/packages/babel-plugin-emotion/__tests__/css.js
+++ b/packages/babel-plugin/__tests__/global.js
@@ -1,10 +1,10 @@
import babelTester from 'babel-tester'
-import plugin from 'babel-plugin-emotion'
+import plugin from '@emotion/babel-plugin'
import path from 'path'
babelTester(
- '@emotion/babel-plugin-core css',
- path.join(__dirname, 'css-macro'),
+ 'emotion-babel-plugin Global',
+ path.join(__dirname, 'global-macro'),
{
plugins: [plugin],
transform: src => src.replace(/\/macro/g, '')
diff --git a/packages/babel-plugin/__tests__/import-mapping/__fixtures__/global-needs-css.js b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/global-needs-css.js
new file mode 100644
index 000000000..0357e18d2
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/global-needs-css.js
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { SomeGlobalFromCore } from 'package-two'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () => (
+
+)
diff --git a/packages/babel-plugin/__tests__/import-mapping/__fixtures__/global.js b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/global.js
new file mode 100644
index 000000000..71cf49659
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/global.js
@@ -0,0 +1,4 @@
+import * as React from 'react'
+import { SomeGlobalFromCore } from 'package-two'
+
+export default () =>
diff --git a/packages/babel-plugin/__tests__/import-mapping/__fixtures__/jsx.js b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/jsx.js
new file mode 100644
index 000000000..f84f73224
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/jsx.js
@@ -0,0 +1,4 @@
+/** @jsx someJsx */
+import { someJsx } from 'package-two'
+
+const SomeComponent = props =>
diff --git a/packages/babel-plugin/__tests__/import-mapping/__fixtures__/non-default-styled.js b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/non-default-styled.js
new file mode 100644
index 000000000..318dc6ff4
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/non-default-styled.js
@@ -0,0 +1,3 @@
+import { nonDefaultStyled } from 'package-one'
+
+let SomeComp = nonDefaultStyled.div({ color: 'hotpink' })
diff --git a/packages/babel-plugin/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js
new file mode 100644
index 000000000..f997bea80
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js
@@ -0,0 +1,3 @@
+import { nonDefaultStyled } from 'package-four'
+
+let SomeComp = nonDefaultStyled.div({ color: 'hotpink' })
diff --git a/packages/babel-plugin/__tests__/import-mapping/__fixtures__/vanilla.js b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/vanilla.js
new file mode 100644
index 000000000..81cfb6b30
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__fixtures__/vanilla.js
@@ -0,0 +1,3 @@
+import { something } from 'package-three'
+
+something({ color: 'green' })
diff --git a/packages/babel-plugin/__tests__/import-mapping/__snapshots__/import-mapping.js.snap b/packages/babel-plugin/__tests__/import-mapping/__snapshots__/import-mapping.js.snap
new file mode 100644
index 000000000..1b481eb2c
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/__snapshots__/import-mapping.js.snap
@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`import mapping global 1`] = `
+"import * as React from 'react'
+import { SomeGlobalFromCore } from 'package-two'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { SomeGlobalFromCore } from 'package-two';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdsb2JhbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHeUMiLCJmaWxlIjoiZ2xvYmFsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTb21lR2xvYmFsRnJvbUNvcmUgfSBmcm9tICdwYWNrYWdlLXR3bydcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPFNvbWVHbG9iYWxGcm9tQ29yZSBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`import mapping global-needs-css 1`] = `
+"import * as React from 'react'
+import { SomeGlobalFromCore } from 'package-two'
+
+const getBgColor = () => ({ backgroundColor: '#fff' })
+
+export default () => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { someCssFromCore as _css } from \\"package-two\\";
+import * as React from 'react';
+import { SomeGlobalFromCore } from 'package-two';
+
+const getBgColor = () => ({
+ backgroundColor: '#fff'
+});
+
+export default (() =>
);"
+`;
+
+exports[`import mapping jsx 1`] = `
+"/** @jsx someJsx */
+import { someJsx } from 'package-two'
+
+const SomeComponent = props =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { someCssFromCore as _css } from \\"package-two\\";
+
+/** @jsx someJsx */
+import { someJsx } from 'package-two';
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`import mapping non-default-styled 1`] = `
+"import { nonDefaultStyled } from 'package-one'
+
+let SomeComp = nonDefaultStyled.div({ color: 'hotpink' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { nonDefaultStyled } from 'package-one';
+let SomeComp = nonDefaultStyled(\\"div\\", {
+ target: \\"e1dq5q4a0\\",
+ label: \\"SomeComp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vbi1kZWZhdWx0LXN0eWxlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZSIsImZpbGUiOiJub24tZGVmYXVsdC1zdHlsZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBub25EZWZhdWx0U3R5bGVkIH0gZnJvbSAncGFja2FnZS1vbmUnXG5cbmxldCBTb21lQ29tcCA9IG5vbkRlZmF1bHRTdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`import mapping styled-with-base-specified 1`] = `
+"import { nonDefaultStyled } from 'package-four'
+
+let SomeComp = nonDefaultStyled.div({ color: 'hotpink' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { something as _styled } from \\"package-four/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+let SomeComp = _styled(\\"div\\", {
+ target: \\"e16az05m0\\",
+ label: \\"SomeComp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC13aXRoLWJhc2Utc3BlY2lmaWVkLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVlIiwiZmlsZSI6InN0eWxlZC13aXRoLWJhc2Utc3BlY2lmaWVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbm9uRGVmYXVsdFN0eWxlZCB9IGZyb20gJ3BhY2thZ2UtZm91cidcblxubGV0IFNvbWVDb21wID0gbm9uRGVmYXVsdFN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`import mapping vanilla 1`] = `
+"import { something } from 'package-three'
+
+something({ color: 'green' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { something } from 'package-three';
+
+/*#__PURE__*/
+something(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
+} : {
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZhbmlsbGEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoidmFuaWxsYS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHNvbWV0aGluZyB9IGZyb20gJ3BhY2thZ2UtdGhyZWUnXG5cbnNvbWV0aGluZyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
diff --git a/packages/babel-plugin/__tests__/import-mapping/import-mapping.js b/packages/babel-plugin/__tests__/import-mapping/import-mapping.js
new file mode 100644
index 000000000..1fd649b4a
--- /dev/null
+++ b/packages/babel-plugin/__tests__/import-mapping/import-mapping.js
@@ -0,0 +1,42 @@
+import babelTester from 'babel-tester'
+import plugin from '@emotion/babel-plugin'
+
+babelTester('import mapping', __dirname, {
+ plugins: [
+ [
+ plugin,
+ {
+ importMap: {
+ 'package-one': {
+ nonDefaultStyled: {
+ canonicalImport: ['@emotion/styled', 'default']
+ }
+ },
+ 'package-two': {
+ someJsx: {
+ canonicalImport: ['@emotion/react', 'jsx']
+ },
+ someCssFromCore: {
+ canonicalImport: ['@emotion/react', 'css']
+ },
+ SomeGlobalFromCore: {
+ canonicalImport: ['@emotion/react', 'Global']
+ }
+ },
+
+ 'package-three': {
+ something: {
+ canonicalImport: ['@emotion/css', 'css']
+ }
+ },
+ 'package-four': {
+ nonDefaultStyled: {
+ canonicalImport: ['@emotion/styled', 'default'],
+ styledBaseImport: ['package-four/base', 'something']
+ }
+ }
+ }
+ }
+ ]
+ ]
+})
diff --git a/packages/babel-plugin-emotion/__tests__/index.js b/packages/babel-plugin/__tests__/index.js
similarity index 70%
rename from packages/babel-plugin-emotion/__tests__/index.js
rename to packages/babel-plugin/__tests__/index.js
index 3a75e5d79..0c64e0461 100644
--- a/packages/babel-plugin-emotion/__tests__/index.js
+++ b/packages/babel-plugin/__tests__/index.js
@@ -1,7 +1,7 @@
import babelTester from 'babel-tester'
-import plugin from 'babel-plugin-emotion'
+import plugin from '@emotion/babel-plugin'
-babelTester('@emotion/babel-plugin-core', __dirname, {
+babelTester('@emotion/babel-plugin', __dirname, {
// we add a duplicate of our own plugin
// users may run babel twice, and our plugin should be smart enough to not duplicate fields
plugins: [plugin, [plugin, undefined, 'emotion-copy']]
diff --git a/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-object.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-object.js
new file mode 100644
index 000000000..bc943ba37
--- /dev/null
+++ b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-object.js
@@ -0,0 +1,3 @@
+import { css } from '@emotion/react'
+
+css({ color: 'hotpink' })
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-prop-dynamic.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-prop-dynamic.js
similarity index 78%
rename from packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-prop-dynamic.js
rename to packages/babel-plugin/__tests__/source-maps/__fixtures__/css-prop-dynamic.js
index 8f2a623e1..c23d4905c 100644
--- a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-prop-dynamic.js
+++ b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-prop-dynamic.js
@@ -1,5 +1,5 @@
/** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
const SomeComponent = props => (
diff --git a/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-string.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-string.js
new file mode 100644
index 000000000..dc947d5c3
--- /dev/null
+++ b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-string.js
@@ -0,0 +1,5 @@
+import { css } from '@emotion/react'
+
+css`
+ color: hotpink;
+`
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js
similarity index 87%
rename from packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js
rename to packages/babel-plugin/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js
index 2db71cb37..ea4ce8dfa 100644
--- a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js
+++ b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js
@@ -1,5 +1,5 @@
import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css'
+import { css } from '@emotion/react'
import { hoverStyles } from './styles'
var templateObject_1
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js
similarity index 85%
rename from packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js
rename to packages/babel-plugin/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js
index 00bccc9ad..9ba8b2367 100644
--- a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js
+++ b/packages/babel-plugin/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js
@@ -1,5 +1,5 @@
import { __makeTemplateObject } from 'tslib'
-import css from '@emotion/css'
+import { css } from '@emotion/react'
var templateObject_1
diff --git a/packages/babel-plugin/__tests__/source-maps/__fixtures__/global-styles-prop.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/global-styles-prop.js
new file mode 100644
index 000000000..6a8262711
--- /dev/null
+++ b/packages/babel-plugin/__tests__/source-maps/__fixtures__/global-styles-prop.js
@@ -0,0 +1,4 @@
+import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/styled-object.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/styled-object.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/styled-object.js
rename to packages/babel-plugin/__tests__/source-maps/__fixtures__/styled-object.js
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/styled-string.js b/packages/babel-plugin/__tests__/source-maps/__fixtures__/styled-string.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/styled-string.js
rename to packages/babel-plugin/__tests__/source-maps/__fixtures__/styled-string.js
diff --git a/packages/babel-plugin/__tests__/source-maps/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/source-maps/__snapshots__/index.js.snap
new file mode 100644
index 000000000..7ab30e8eb
--- /dev/null
+++ b/packages/babel-plugin/__tests__/source-maps/__snapshots__/index.js.snap
@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`source maps css-object 1`] = `
+"import { css } from '@emotion/react'
+
+css({ color: 'hotpink' })
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/react';
+process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};"
+`;
+
+exports[`source maps css-prop 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"1wl9j1m-SomeComponent\\",
+ styles: \\"color:hotpink;label:SomeComponent;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0MiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHByb3BzID0+IDxkaXYgY3NzPXt7IGNvbG9yOiAnaG90cGluaycgfX0gey4uLnByb3BzfSAvPlxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`source maps css-prop-dynamic 1`] = `
+"/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+const SomeComponent = props => (
+
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css as _css } from \\"@emotion/react\\";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+const SomeComponent = props =>
;"
+`;
+
+exports[`source maps css-string 1`] = `
+"import { css } from '@emotion/react'
+
+css\`
+ color: hotpink;
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/react';
+process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};"
+`;
+
+exports[`source maps css-transpiled-by-ts 1`] = `
+"import { __makeTemplateObject } from 'tslib'
+import { css } from '@emotion/react'
+
+var templateObject_1
+
+css(
+ templateObject_1 ||
+ (templateObject_1 = __makeTemplateObject(
+ ['\\\\n color: hotpink;\\\\n'],
+ ['\\\\n color: hotpink;\\\\n']
+ ))
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { __makeTemplateObject } from 'tslib';
+import { css } from '@emotion/react';
+var templateObject_1;
+
+/*#__PURE__*/
+css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")])));"
+`;
+
+exports[`source maps css-transpiled-by-ts-with-interpolations 1`] = `
+"import { __makeTemplateObject } from 'tslib'
+import { css } from '@emotion/react'
+import { hoverStyles } from './styles'
+
+var templateObject_1
+
+css(
+ templateObject_1 ||
+ (templateObject_1 = __makeTemplateObject(
+ ['\\\\n color: hotpink;\\\\n'],
+ ['\\\\n color: hotpink;\\\\n']
+ )),
+ hoverStyles
+)
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { __makeTemplateObject } from 'tslib';
+import { css } from '@emotion/react';
+import { hoverStyles } from './styles';
+var templateObject_1;
+
+/*#__PURE__*/
+css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBob3ZlclN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuXG52YXIgdGVtcGxhdGVPYmplY3RfMVxuXG5jc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSksXG4gIGhvdmVyU3R5bGVzXG4pXG4iXX0= */\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBob3ZlclN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuXG52YXIgdGVtcGxhdGVPYmplY3RfMVxuXG5jc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSksXG4gIGhvdmVyU3R5bGVzXG4pXG4iXX0= */\\")])), hoverStyles);"
+`;
+
+exports[`source maps global-styles-prop 1`] = `
+"import * as React from 'react'
+import { Global } from '@emotion/react'
+
+export default () =>
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { Global } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export default (() =>
);"
+`;
+
+exports[`source maps styled-object 1`] = `
+"import styled from '@emotion/styled'
+
+const SomeComponent = styled.div({
+ color: 'hotpink'
+})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+const SomeComponent = _styled(\\"div\\", {
+ target: \\"eb28ebz0\\",
+ label: \\"SomeComponent\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgY29sb3I6ICdob3RwaW5rJ1xufSlcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`source maps styled-string 1`] = `
+"import styled from '@emotion/styled'
+
+const SomeComponent = styled.div\`
+ color: hotpink;
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled/base\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+const SomeComponent = _styled(\\"div\\", {
+ target: \\"eb28ebz0\\",
+ label: \\"SomeComponent\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/index.js b/packages/babel-plugin/__tests__/source-maps/index.js
similarity index 78%
rename from packages/babel-plugin-emotion/__tests__/source-maps/index.js
rename to packages/babel-plugin/__tests__/source-maps/index.js
index fe1ce0eb3..550983f01 100644
--- a/packages/babel-plugin-emotion/__tests__/source-maps/index.js
+++ b/packages/babel-plugin/__tests__/source-maps/index.js
@@ -1,5 +1,5 @@
import babelTester from 'babel-tester'
-import plugin from 'babel-plugin-emotion'
+import plugin from '@emotion/babel-plugin'
babelTester('source maps', __dirname, {
plugins: [[plugin, { sourceMap: true }]],
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/already-transpiled-by-babel.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/already-transpiled-by-babel.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/already-transpiled-by-babel.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/already-transpiled-by-babel.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/basic.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/basic.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/basic.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/basic.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/call-expression.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/call-expression.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/call-expression.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/call-expression.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/comments.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/comments.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/comments.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/comments.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/component-selector.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/component-selector.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/component-selector.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/component-selector.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/existing-options.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/existing-options.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/existing-options.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/existing-options.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/function-interpolation.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/function-interpolation.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/function-interpolation.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/function-interpolation.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/label.js
similarity index 59%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/label.js
index d6fbd2bb2..a1a62d9e5 100644
--- a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js
+++ b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/label.js
@@ -1,6 +1,7 @@
/** @jsx jsx */
+/* eslint-disable react/jsx-pascal-case */
import styled from '@emotion/styled/macro'
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
class Thing {
static SomeComponent = styled.div`
@@ -18,3 +19,14 @@ class Thing {
`
const Test = () =>
}
+
+{
+ const Timeline = styled.ul``
+ Timeline.Item = styled.li``
+ Timeline.Item.Anchor = styled.a``
+}
+
+{
+ let Comp
+ Comp = styled.div``
+}
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/more-than-10-interpolations.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/more-than-10-interpolations.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/more-than-10-interpolations.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/more-than-10-interpolations.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/multiple-calls.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/multiple-calls.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/multiple-calls.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/multiple-calls.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/native.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/native.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/native.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/native.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/no-call.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/no-call.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/no-call.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/no-call.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/no-import.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/no-import.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/no-import.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/no-import.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/object-call-expression.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/object-call-expression.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/object-call-expression.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/object-call-expression.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/object-function.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/object-function.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/object-function.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/object-function.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/object.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/object.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/object.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/object.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/other-imports.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/other-imports.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/other-imports.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/other-imports.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/primitives-other-name.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/primitives-other-name.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/primitives-other-name.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/primitives-other-name.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/primitives.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/primitives.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/primitives.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/primitives.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/shorthand-property.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/shorthand-property.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/shorthand-property.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/shorthand-property.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/with-spread.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/with-spread.js
similarity index 100%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/with-spread.js
rename to packages/babel-plugin/__tests__/styled-macro/__fixtures__/with-spread.js
diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap
similarity index 72%
rename from packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap
rename to packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap
index 43c3059bf..6a9e270e2 100644
--- a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap
+++ b/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap
@@ -21,7 +21,9 @@ const SomeComponent = styled('div')(_templateObject())
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
+
+/* eslint-disable */
import _taggedTemplateLiteralLoose from '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose';
function _templateObject() {
@@ -35,10 +37,8 @@ function _templateObject() {
} // source maps should not be appended
-const SomeComponent =
-/*#__PURE__*/
-_styled('div', {
- target: \\"emm8aqm0\\",
+const SomeComponent = /*#__PURE__*/_styled('div', {
+ target: \\"ec90nws0\\",
label: \\"SomeComponent\\"
})(_templateObject());"
`;
@@ -53,19 +53,19 @@ const SomeComponent = styled.div\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"e1c0oh1z0\\",
+ target: \\"el9tp5g0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJiYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
@@ -81,21 +81,19 @@ const SomeComponent = styled('div')\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const SomeComponent =
-/*#__PURE__*/
-_styled('div', {
- target: \\"eyt0cf80\\",
+const SomeComponent = /*#__PURE__*/_styled('div', {
+ target: \\"elbjn3a0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFbUMiLCJmaWxlIjoiY2FsbC1leHByZXNzaW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQoJ2RpdicpYFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
@@ -117,18 +115,18 @@ dfwf */
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
_styled(\\"div\\", {
- target: \\"e1vv9dlm0\\"
+ target: \\"e1jqiiye0\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVVIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbnN0eWxlZC5kaXZgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YgKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
@@ -164,43 +162,43 @@ let OneLastComponent = styled.div({
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"e4byx850\\",
+ target: \\"e1i93zq73\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
let SomeOtherComponent = _styled(\\"div\\", {
- target: \\"e4byx851\\",
+ target: \\"e1i93zq72\\",
label: \\"SomeOtherComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNeUIiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
let AnotherComponent = _styled(\\"div\\", {
- target: \\"e4byx852\\",
+ target: \\"e1i93zq71\\",
label: \\"AnotherComponent\\"
})(SomeComponent, \\"{color:green;}\\", SomeOtherComponent, \\"{color:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\"));
let OneLastComponent = _styled(\\"div\\", {
- target: \\"e4byx853\\",
+ target: \\"e1i93zq70\\",
label: \\"OneLastComponent\\"
})({
[SomeComponent]: {
@@ -237,7 +235,7 @@ styled('button', cfg)({})
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -246,25 +244,25 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string
/*#__PURE__*/
_styled('div', {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb20\\"
+ target: \\"e4yan9t4\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoiZXhpc3Rpbmctb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5zdHlsZWQoJ2RpdicsIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LCB3aW5kb3cud2hhdGV2ZXIpKClcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKWBgXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pKClcblxuc3R5bGVkKFxuICB3aW5kb3cud2hhdGV2ZXIsXG4gIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LFxuICB3aW5kb3cud2hhdGV2ZXJcbilgYFxuXG5jb25zdCBjZmcgPSB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfVxuc3R5bGVkKCdidXR0b24nLCBjZmcpKHt9KVxuIl19 */\\");
/*#__PURE__*/
_styled('div', {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb21\\"
+ target: \\"e4yan9t3\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNFIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\");
/*#__PURE__*/
_styled(window.whatever, {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb22\\"
+ target: \\"e4yan9t2\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUEiLCJmaWxlIjoiZXhpc3Rpbmctb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5zdHlsZWQoJ2RpdicsIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LCB3aW5kb3cud2hhdGV2ZXIpKClcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKWBgXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pKClcblxuc3R5bGVkKFxuICB3aW5kb3cud2hhdGV2ZXIsXG4gIHsgc2hvdWxkRm9yd2FyZFByb3A6IHdpbmRvdy53aGF0ZXZlciB9LFxuICB3aW5kb3cud2hhdGV2ZXJcbilgYFxuXG5jb25zdCBjZmcgPSB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfVxuc3R5bGVkKCdidXR0b24nLCBjZmcpKHt9KVxuIl19 */\\");
/*#__PURE__*/
_styled(window.whatever, {
shouldForwardProp: window.whatever,
- target: \\"ek6pnb23\\"
+ target: \\"e4yan9t1\\"
}, window.whatever)(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4aXN0aW5nLW9wdGlvbnMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JDIiwiZmlsZSI6ImV4aXN0aW5nLW9wdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxuc3R5bGVkKCdkaXYnLCB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSwgd2luZG93LndoYXRldmVyKSgpXG5cbnN0eWxlZCgnZGl2JywgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sIHdpbmRvdy53aGF0ZXZlcilgYFxuXG5zdHlsZWQoXG4gIHdpbmRvdy53aGF0ZXZlcixcbiAgeyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH0sXG4gIHdpbmRvdy53aGF0ZXZlclxuKSgpXG5cbnN0eWxlZChcbiAgd2luZG93LndoYXRldmVyLFxuICB7IHNob3VsZEZvcndhcmRQcm9wOiB3aW5kb3cud2hhdGV2ZXIgfSxcbiAgd2luZG93LndoYXRldmVyXG4pYGBcblxuY29uc3QgY2ZnID0geyBzaG91bGRGb3J3YXJkUHJvcDogd2luZG93LndoYXRldmVyIH1cbnN0eWxlZCgnYnV0dG9uJywgY2ZnKSh7fSlcbiJdfQ== */\\");
const cfg = {
@@ -273,7 +271,7 @@ const cfg = {
/*#__PURE__*/
_styled('button', _extends({}, {
- target: \\"ek6pnb24\\"
+ target: \\"e4yan9t0\\"
}, cfg))(process.env.NODE_ENV === \\"production\\" ? {
name: \\"0\\",
styles: \\"\\"
@@ -298,18 +296,19 @@ let Avatar = styled.img\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
let Avatar = _styled(\\"img\\", {
- target: \\"ecty2dv0\\",
+ target: \\"e9o8e9e0\\",
label: \\"Avatar\\"
})(\\"width:96px;height:96px;border-radius:\\", props => props.theme.borderRadius, \\";border:1px solid \\", props => props.theme.borderColor, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZ1bmN0aW9uLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImZ1bmN0aW9uLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxubGV0IEF2YXRhciA9IHN0eWxlZC5pbWdgXG4gIHdpZHRoOiA5NnB4O1xuICBoZWlnaHQ6IDk2cHg7XG4gIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT4gcHJvcHMudGhlbWUuYm9yZGVyUmFkaXVzfTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHtwcm9wcyA9PiBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG5gXG4iXX0= */\\"));"
`;
exports[`@emotion/styled.macro label 1`] = `
"/** @jsx jsx */
+/* eslint-disable react/jsx-pascal-case */
import styled from '@emotion/styled/macro'
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
class Thing {
static SomeComponent = styled.div\`
@@ -328,38 +327,52 @@ class Thing {
const Test = () =>
}
+{
+ const Timeline = styled.ul\`\`
+ Timeline.Item = styled.li\`\`
+ Timeline.Item.Anchor = styled.a\`\`
+}
+
+{
+ let Comp
+ Comp = styled.div\`\`
+}
+
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-import { jsx } from '@emotion/core';
+/** @jsx jsx */
+
+/* eslint-disable react/jsx-pascal-case */
+import { jsx } from '@emotion/react';
class Thing {
static SomeComponent = _styled(\\"div\\", {
- target: \\"egllku90\\",
+ target: \\"e2dh5506\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUttQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG5cbntcbiAgY29uc3QgVGltZWxpbmUgPSBzdHlsZWQudWxgYFxuICBUaW1lbGluZS5JdGVtID0gc3R5bGVkLmxpYGBcbiAgVGltZWxpbmUuSXRlbS5BbmNob3IgPSBzdHlsZWQuYWBgXG59XG5cbntcbiAgbGV0IENvbXBcbiAgQ29tcCA9IHN0eWxlZC5kaXZgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
BadIdeaComponent = _styled(\\"div\\", {
- target: \\"egllku91\\",
+ target: \\"e2dh5505\\",
label: \\"BadIdeaComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"d1m7sn\\",
- styles: \\"background:hotpink;\\"
+ name: \\"1nzpx79\\",
+ styles: \\"background:hotpink\\"
} : {
- name: \\"d1m7sn\\",
- styles: \\"background:hotpink;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVErQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\",
+ name: \\"1nzpx79\\",
+ styles: \\"background:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMrQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG5cbntcbiAgY29uc3QgVGltZWxpbmUgPSBzdHlsZWQudWxgYFxuICBUaW1lbGluZS5JdGVtID0gc3R5bGVkLmxpYGBcbiAgVGltZWxpbmUuSXRlbS5BbmNob3IgPSBzdHlsZWQuYWBgXG59XG5cbntcbiAgbGV0IENvbXBcbiAgQ29tcCA9IHN0eWxlZC5kaXZgYFxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
}
@@ -367,19 +380,41 @@ class Thing {
{
// label should get sanitized
const MiniCalWrap$ = _styled(\\"div\\", {
- target: \\"egllku92\\",
+ target: \\"e2dh5504\\",
label: \\"MiniCalWrap-\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"tokvmb\\",
- styles: \\"color:red;\\"
+ name: \\"hwfcu5\\",
+ styles: \\"color:red\\"
} : {
- name: \\"tokvmb\\",
- styles: \\"color:red;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVpQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\",
+ name: \\"hwfcu5\\",
+ styles: \\"color:red\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const Test = () =>
;
+}
+{
+ const Timeline = _styled(\\"ul\\", {
+ target: \\"e2dh5503\\",
+ label: \\"Timeline\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCNEIiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
+
+ Timeline.Item = _styled(\\"li\\", {
+ target: \\"e2dh5502\\",
+ label: \\"Timeline-Item\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCMkIiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
+ Timeline.Item.Anchor = _styled(\\"a\\", {
+ target: \\"e2dh5501\\",
+ label: \\"Timeline-Item-Anchor\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
+}
+{
+ let Comp;
+ Comp = _styled(\\"div\\", {
+ target: \\"e2dh5500\\",
+ label: \\"Comp\\"
+ })(process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCbUIiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgU29tZUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgQmFkSWRlYUNvbXBvbmVudCA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogaG90cGluaztcbiAgYFxufVxuXG57XG4gIC8vIGxhYmVsIHNob3VsZCBnZXQgc2FuaXRpemVkXG4gIGNvbnN0IE1pbmlDYWxXcmFwJCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IHJlZDtcbiAgYFxuICBjb25zdCBUZXN0ID0gKCkgPT4gPE1pbmlDYWxXcmFwJCAvPlxufVxuXG57XG4gIGNvbnN0IFRpbWVsaW5lID0gc3R5bGVkLnVsYGBcbiAgVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG4gIFRpbWVsaW5lLkl0ZW0uQW5jaG9yID0gc3R5bGVkLmFgYFxufVxuXG57XG4gIGxldCBDb21wXG4gIENvbXAgPSBzdHlsZWQuZGl2YGBcbn1cbiJdfQ== */\\");
}"
`;
@@ -405,11 +440,11 @@ const H1 = styled.h1\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
// yes, this was actually a bug at one point
const H1 = _styled(\\"h1\\", {
- target: \\"e2mb8uz0\\",
+ target: \\"e1nqrpma0\\",
label: \\"H1\\"
})(\\"text-decoration:underline;border-right:solid blue \\", 54, \\"px;background:white;color:black;display:block;border-radius:3px;padding:25px;width:500px;z-index:\\", 100, \\";font-size:18px;text-align:center;border-left:\\", p => p.theme.blue, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vcmUtdGhhbi0xMC1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoibW9yZS10aGFuLTEwLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbi8vIHllcywgdGhpcyB3YXMgYWN0dWFsbHkgYSBidWcgYXQgb25lIHBvaW50XG5jb25zdCBIMSA9IHN0eWxlZC5oMWBcbiAgdGV4dC1kZWNvcmF0aW9uOiAkeyd1bmRlcmxpbmUnfTtcbiAgYm9yZGVyLXJpZ2h0OiBzb2xpZCBibHVlICR7NTR9cHg7XG4gIGJhY2tncm91bmQ6ICR7J3doaXRlJ307XG4gIGNvbG9yOiAkeydibGFjayd9O1xuICBkaXNwbGF5OiAkeydibG9jayd9O1xuICBib3JkZXItcmFkaXVzOiAkeyczcHgnfTtcbiAgcGFkZGluZzogJHsnMjVweCd9O1xuICB3aWR0aDogJHsnNTAwcHgnfTtcbiAgei1pbmRleDogJHsxMDB9O1xuICBmb250LXNpemU6ICR7JzE4cHgnfTtcbiAgdGV4dC1hbGlnbjogJHsnY2VudGVyJ307XG4gIGJvcmRlci1sZWZ0OiAke3AgPT4gcC50aGVtZS5ibHVlfTtcbmBcbiJdfQ== */\\"));"
`;
@@ -428,32 +463,32 @@ const SomeOtherComponent = styled.button\`
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"eqvttbz0\\",
+ target: \\"eqhyoqt1\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const SomeOtherComponent = _styled(\\"button\\", {
- target: \\"eqvttbz1\\",
+ target: \\"eqhyoqt0\\",
label: \\"SomeOtherComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"bjcoli\\",
- styles: \\"color:green;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"bjcoli\\",
- styles: \\"color:green;\\",
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU13QyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
@@ -488,9 +523,9 @@ console.log(styled)
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled\\";
-export let thing = _styled;
-console.log(_styled);"
+import styled from \\"@emotion/styled\\";
+export let thing = styled;
+console.log(styled);"
`;
exports[`@emotion/styled.macro no-import 1`] = `
@@ -510,19 +545,19 @@ const SomeComponent = styled.div({ color: 'hotpink' })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
const SomeComponent = _styled(\\"div\\", {
- target: \\"e1gch6x40\\",
+ target: \\"eyr3fbm0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoib2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
@@ -536,21 +571,19 @@ const SomeComponent = styled('div')({ color: 'hotpink' })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-const SomeComponent =
-/*#__PURE__*/
-_styled('div', {
- target: \\"eavmgrz0\\",
+const SomeComponent = /*#__PURE__*/_styled('div', {
+ target: \\"e1cky9xc0\\",
label: \\"SomeComponent\\"
})(process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1lrxbo5\\",
- styles: \\"color:hotpink;\\",
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXNCIiwiZmlsZSI6Im9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHN0eWxlZCgnZGl2JykoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});"
@@ -564,10 +597,10 @@ const SomeComponent = styled.div(props => ({ color: props.color }))
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
const SomeComponent = _styled(\\"div\\", {
- target: \\"e1i0tb8p0\\",
+ target: \\"e14okpby0\\",
label: \\"SomeComponent\\"
})(props => ({
color: props.color
@@ -646,11 +679,11 @@ const H1 = styled.h1({ fontSize })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
let fontSize = window.whatever;
const H1 = _styled(\\"h1\\", {
- target: \\"eqz3u3g0\\",
+ target: \\"e4pkhyn0\\",
label: \\"H1\\"
})({
fontSize
@@ -665,10 +698,10 @@ const H1 = styled.h1({ ...window.whatever })
↓ ↓ ↓ ↓ ↓ ↓
-import _styled from \\"@emotion/styled-base\\";
+import _styled from \\"@emotion/styled/base\\";
const H1 = _styled(\\"h1\\", {
- target: \\"e18quw4k0\\",
+ target: \\"e49hde00\\",
label: \\"H1\\"
})({ ...window.whatever
}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtc3ByZWFkLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVXIiwiZmlsZSI6IndpdGgtc3ByZWFkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IEgxID0gc3R5bGVkLmgxKHsgLi4ud2luZG93LndoYXRldmVyIH0pXG4iXX0= */\\");"
diff --git a/packages/babel-plugin/__tests__/styled-macro/index.js b/packages/babel-plugin/__tests__/styled-macro/index.js
new file mode 100644
index 000000000..f183501ef
--- /dev/null
+++ b/packages/babel-plugin/__tests__/styled-macro/index.js
@@ -0,0 +1,4 @@
+// @flow
+import babelTester from 'babel-tester'
+
+babelTester('@emotion/styled.macro', __dirname)
diff --git a/packages/babel-plugin/__tests__/styled-requires-options.js b/packages/babel-plugin/__tests__/styled-requires-options.js
new file mode 100644
index 000000000..a2d1a57e2
--- /dev/null
+++ b/packages/babel-plugin/__tests__/styled-requires-options.js
@@ -0,0 +1,24 @@
+// @flow
+import babelTester from 'babel-tester'
+import plugin from '@emotion/babel-plugin'
+
+const cases = {
+ 'hash generation no file system': {
+ code: `
+import styled from '@emotion/styled'
+styled.h1\`color:blue;\`
+`,
+ plugins: [plugin],
+ babelFileName: undefined
+ },
+ 'autoLabel set to never': {
+ code: `
+import styled from '@emotion/styled'
+const Foo = styled.h1\`color:hotpink;\`
+ `,
+ plugins: [[plugin, { autoLabel: 'never' }]],
+ babelFileName: __filename
+ }
+}
+
+babelTester('styled inline', cases)
diff --git a/packages/babel-plugin-emotion/__tests__/styled.js b/packages/babel-plugin/__tests__/styled.js
similarity index 71%
rename from packages/babel-plugin-emotion/__tests__/styled.js
rename to packages/babel-plugin/__tests__/styled.js
index 87826a812..494cc4340 100644
--- a/packages/babel-plugin-emotion/__tests__/styled.js
+++ b/packages/babel-plugin/__tests__/styled.js
@@ -1,9 +1,9 @@
import babelTester from 'babel-tester'
-import plugin from 'babel-plugin-emotion'
+import plugin from '@emotion/babel-plugin'
import path from 'path'
babelTester(
- '@emotion/babel-plugin-core styled',
+ 'emotion-babel-plugin styled',
path.join(__dirname, 'styled-macro'),
{
plugins: [plugin],
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/comments.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/comments.js
similarity index 91%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/comments.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/comments.js
index 54fbcac8e..bb86516dc 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/comments.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/comments.js
@@ -1,4 +1,4 @@
-import { css } from 'emotion/macro'
+import { css } from '@emotion/css/macro'
css`
// display:flex;
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js
similarity index 81%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js
index cf3ed5ae8..bc170df30 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js
@@ -1,4 +1,4 @@
-import { css } from 'emotion/macro'
+import { css } from '@emotion/css/macro'
css`
margin: 12px 48px;
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js
similarity index 54%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js
index 54a75ad90..d76af168c 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js
@@ -1,4 +1,4 @@
-import { css } from 'emotion/macro'
+import { css } from '@emotion/css/macro'
let someCls = css({
color: window.whatever
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js
similarity index 72%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js
index 226e21ce0..44f315011 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js
@@ -1,4 +1,4 @@
-import { css } from 'emotion/macro'
+import { css } from '@emotion/css/macro'
const cls1 = css`
content: ' { } ';
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js
similarity index 95%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js
index ebcbe8a1b..7195054f2 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js
@@ -1,4 +1,4 @@
-import { css } from 'emotion/macro'
+import { css } from '@emotion/css/macro'
function test() {
const cls1 = css`
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js
similarity index 73%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js
index 60c8b9581..fe8492c9e 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js
@@ -1,4 +1,4 @@
-import { injectGlobal } from 'emotion/macro'
+import { injectGlobal } from '@emotion/css/macro'
injectGlobal`
body {
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js
similarity index 83%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js
index b50fe9f34..6f2f929e8 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js
@@ -1,4 +1,4 @@
-import { injectGlobal as inject } from 'emotion/macro'
+import { injectGlobal as inject } from '@emotion/css/macro'
inject`
body {
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js
similarity index 89%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js
index e2e0fff95..df51d7fed 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js
@@ -1,4 +1,4 @@
-import { injectGlobal } from 'emotion/macro'
+import { injectGlobal } from '@emotion/css/macro'
injectGlobal`
@font-face {
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js
similarity index 79%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js
index e61bed38f..126108739 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js
@@ -1,4 +1,4 @@
-import { injectGlobal } from 'emotion/macro'
+import { injectGlobal } from '@emotion/css/macro'
let display = window.whatever
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js
similarity index 71%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js
index 211976e29..5a18a68ef 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js
@@ -1,4 +1,4 @@
-import { keyframes } from 'emotion/macro'
+import { keyframes } from '@emotion/css/macro'
const rotate360 = keyframes`
from {
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js
similarity index 77%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js
index 6a1d120f0..1a0a91b83 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js
@@ -1,4 +1,4 @@
-import { keyframes } from 'emotion/macro'
+import { keyframes } from '@emotion/css/macro'
let endingRotation = window.whatever
diff --git a/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js
new file mode 100644
index 000000000..891bab3b5
--- /dev/null
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js
@@ -0,0 +1,8 @@
+import { css } from '@emotion/css/macro'
+
+// whitespace before pseudo should be preserved
+css`
+ & :hover {
+ color: hotpink;
+ }
+`
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js
similarity index 81%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js
rename to packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js
index 7e51d98ee..1ab455a35 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js
@@ -1,4 +1,4 @@
-import { css } from 'emotion/macro'
+import { css } from '@emotion/css/macro'
let obj = {
someProp: css({ color: 'green' }),
diff --git a/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap
new file mode 100644
index 000000000..e7e3a308e
--- /dev/null
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap
@@ -0,0 +1,619 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vanilla emotion comments 1`] = `
+"import { css } from '@emotion/css/macro'
+
+css\`
+ // display:flex;
+
+ /*
+wef
+
+dfwf*/
+ color: hotpink;
+\`
+
+css\`
+ /* @noflip */
+ left: 1px;
+\`
+
+css\`
+ left: 2px;
+
+ /* @noflip */
+ &.foo {
+ left: 3px;
+ }
+
+ &.zot {
+ /* @noflip */
+ right: 1px;
+ }
+\`
+
+css\`
+ /* @whatever */
+ left: 4px;
+\`
+
+css\`
+ left: 5px;
+
+ /* @whatever */
+ &.foo {
+ left: 6px;
+ }
+
+ &.zot {
+ /* @whatever */
+ right: 2px;
+ }
+\`
+
+css\`
+ // @noflip should-be-removed
+ left: 7px;
+\`
+
+css\`
+ // @shouldberemoved
+ left: 8px;
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from \\"@emotion/css\\";
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"14fte1c\\",
+ styles: \\"/* @noflip */left:1px\\"
+} : {
+ name: \\"14fte1c\\",
+ styles: \\"/* @noflip */left:1px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"hdn0xn\\",
+ styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\"
+} : {
+ name: \\"hdn0xn\\",
+ styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"m1e8pu\\",
+ styles: \\"/* @whatever */left:4px\\"
+} : {
+ name: \\"m1e8pu\\",
+ styles: \\"/* @whatever */left:4px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"ldghp9\\",
+ styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\"
+} : {
+ name: \\"ldghp9\\",
+ styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"o10ag4\\",
+ styles: \\"left:7px\\"
+} : {
+ name: \\"o10ag4\\",
+ styles: \\"left:7px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"zrl602\\",
+ styles: \\"left:8px\\"
+} : {
+ name: \\"zrl602\\",
+ styles: \\"left:8px\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion css-basic 1`] = `
+"import { css } from '@emotion/css/macro'
+
+css\`
+ margin: 12px 48px;
+ color: #ffffff;
+ display: flex;
+ flex: 1 0 auto;
+ color: blue;
+ @media (min-width: 420px) {
+ line-height: 40px;
+ }
+ width: \${window.whatever};
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from \\"@emotion/css\\";
+
+/*#__PURE__*/
+css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width: 420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));"
+`;
+
+exports[`vanilla emotion css-object 1`] = `
+"import { css } from '@emotion/css/macro'
+
+let someCls = css({
+ color: window.whatever
+})
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from \\"@emotion/css\\";
+let someCls = /*#__PURE__*/css({
+ color: window.whatever
+}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls;\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxubGV0IHNvbWVDbHMgPSBjc3Moe1xuICBjb2xvcjogd2luZG93LndoYXRldmVyXG59KVxuIl19 */\\");"
+`;
+
+exports[`vanilla emotion does-not-minify-inside-content-property 1`] = `
+"import { css } from '@emotion/css/macro'
+
+const cls1 = css\`
+ content: ' { } ';
+\`
+// prettier-ignore
+const cls2 = css\`
+ content: \\" { } \\";
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from \\"@emotion/css\\";
+const cls1 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1bpoqk7\\",
+ styles: \\"content:' { } '\\"
+} : {
+ name: \\"19tqhve-cls1\\",
+ styles: \\"content:' { } ';label:cls1;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jb25zdCBjbHMxID0gY3NzYFxuICBjb250ZW50OiAnICB7ICB9ICAnO1xuYFxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCBjbHMyID0gY3NzYFxuICBjb250ZW50OiBcIiAgeyAgfSAgXCI7XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+}); // prettier-ignore
+
+const cls2 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"9pd1g7\\",
+ styles: \\"content:\\\\\\" { } \\\\\\"\\"
+} : {
+ name: \\"16r822g-cls2\\",
+ styles: \\"content:\\\\\\" { } \\\\\\";label:cls2;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jb25zdCBjbHMxID0gY3NzYFxuICBjb250ZW50OiAnICB7ICB9ICAnO1xuYFxuLy8gcHJldHRpZXItaWdub3JlXG5jb25zdCBjbHMyID0gY3NzYFxuICBjb250ZW50OiBcIiAgeyAgfSAgXCI7XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion hoisting 1`] = `
+"import { css } from '@emotion/css/macro'
+
+function test() {
+ const cls1 = css\`
+ font-size: 20px;
+ @media (min-width: 420px) {
+ color: blue;
+ \${css\`
+ width: 96px;
+ height: 96px;
+ \`};
+ line-height: 26px;
+ }
+ background: green;
+ \${{ backgroundColor: 'hotpink' }};
+ \`
+
+ const cls2 = css\`
+ \${{ color: 'blue' }};
+ \`
+
+ const cls3 = css\`
+ display: flex;
+ &:hover {
+ color: hotpink;
+ }
+ \`
+ let outerVar = 'something'
+ function inner() {
+ const styles = { color: 'darkorchid' }
+ const color = 'aquamarine'
+
+ const cls4 = css\`
+ \${cls3};
+ \${cls1};
+ \${{ color: 'darkorchid' }};
+ \${{ color }};
+ \${css\`
+ height: 420px;
+ width: \${styles};
+ \`};
+ \`
+ let someCls = css\`
+ color: \${outerVar};
+ \`
+ }
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from \\"@emotion/css\\";
+
+function test() {
+ const cls1 = /*#__PURE__*/css(\\"font-size:20px;@media (min-width: 420px){color:blue;\\", /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"14ht2kb\\",
+ styles: \\"width:96px;height:96px\\"
+ } : {
+ name: \\"1ylk12k-cls1\\",
+ styles: \\"width:96px;height:96px;label:cls1;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6ImhvaXN0aW5nLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ }), \\";line-height:26px;}background:green;background-color:hotpink;;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls1;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\");
+ const cls2 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"14ksm7b\\",
+ styles: \\"color:blue;\\"
+ } : {
+ name: \\"ca17a1-cls2\\",
+ styles: \\"color:blue;;label:cls2;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ const cls3 = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"a21n9o\\",
+ styles: \\"display:flex;&:hover{color:hotpink;}\\"
+ } : {
+ name: \\"1m06t0b-cls3\\",
+ styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ let outerVar = 'something';
+
+ function inner() {
+ const styles = {
+ color: 'darkorchid'
+ };
+ const color = 'aquamarine';
+ const cls4 = /*#__PURE__*/css(cls3, \\";\\", cls1, \\";color:darkorchid;;\\", {
+ color
+ }, \\";\\", /*#__PURE__*/css(\\"height:420px;width:\\", styles, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\"), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\");
+ let someCls = /*#__PURE__*/css(\\"color:\\", outerVar, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\");
+ }
+}"
+`;
+
+exports[`vanilla emotion inject-global-basic 1`] = `
+"import { injectGlobal } from '@emotion/css/macro'
+
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { injectGlobal } from \\"@emotion/css\\";
+injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\"
+} : {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion inject-global-change-import 1`] = `
+"import { injectGlobal as inject } from '@emotion/css/macro'
+
+inject\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+let injectGlobal = window.whatever
+
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { injectGlobal as inject } from \\"@emotion/css\\";
+inject(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\"
+} : {
+ name: \\"59k0ad\\",
+ styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5pbmplY3RgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcblxubGV0IGluamVjdEdsb2JhbCA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+let injectGlobal = window.whatever;
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ & > div {
+ display: flex;
+ }
+ }
+ html {
+ background: green;
+ }
+\`;"
+`;
+
+exports[`vanilla emotion inject-global-with-font-face 1`] = `
+"import { injectGlobal } from '@emotion/css/macro'
+
+injectGlobal\`
+ @font-face {
+ font-family: 'Patrick Hand SC';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Patrick Hand SC'), local('PatrickHandSC-Regular'),
+ url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2)
+ format('woff2');
+ unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f,
+ U+A720-A7FF;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { injectGlobal } from \\"@emotion/css\\";
+injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"lu7y12\\",
+ styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\"
+} : {
+ name: \\"lu7y12\\",
+ styles: \\"@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1mb250LWZhY2UuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC13aXRoLWZvbnQtZmFjZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuaW5qZWN0R2xvYmFsYFxuICBAZm9udC1mYWNlIHtcbiAgICBmb250LWZhbWlseTogJ1BhdHJpY2sgSGFuZCBTQyc7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgc3JjOiBsb2NhbCgnUGF0cmljayBIYW5kIFNDJyksIGxvY2FsKCdQYXRyaWNrSGFuZFNDLVJlZ3VsYXInKSxcbiAgICAgIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3MvcGF0cmlja2hhbmRzYy92NC9PWUZXQ2dmQ1ItN3VISW92alVaWHNaNzFVaXMwUWViOUdxbzhJWlY3Y2tFLndvZmYyKVxuICAgICAgICBmb3JtYXQoJ3dvZmYyJyk7XG4gICAgdW5pY29kZS1yYW5nZTogVSswMTAwLTAyNGYsIFUrMS0xZWZmLCBVKzIwYTAtMjBhYiwgVSsyMGFkLTIwY2YsIFUrMmM2MC0yYzdmLFxuICAgICAgVStBNzIwLUE3RkY7XG4gIH1cbmBcbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion inject-global-with-interpolation 1`] = `
+"import { injectGlobal } from '@emotion/css/macro'
+
+let display = window.whatever
+
+injectGlobal\`
+ body {
+ margin: 0;
+ padding: 0;
+ display: \${display};
+ & > div {
+ display: none;
+ }
+ }
+ html {
+ background: green;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { injectGlobal } from \\"@emotion/css\\";
+let display = window.whatever;
+injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";&>div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));"
+`;
+
+exports[`vanilla emotion keyframes-basic 1`] = `
+"import { keyframes } from '@emotion/css/macro'
+
+const rotate360 = keyframes\`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { keyframes } from \\"@emotion/css\\";
+const rotate360 = /*#__PURE__*/keyframes(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1q8eu9e\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);}\\"
+} : {
+ name: \\"1k98dea-rotate360\\",
+ styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoia2V5ZnJhbWVzLWJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICB9XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion keyframes-with-interpolation 1`] = `
+"import { keyframes } from '@emotion/css/macro'
+
+let endingRotation = window.whatever
+
+const rotate360 = keyframes\`
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(\${endingRotation});
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+import { keyframes } from \\"@emotion/css\\";
+let endingRotation = window.whatever;
+const rotate360 = /*#__PURE__*/keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:rotate360;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmxldCBlbmRpbmdSb3RhdGlvbiA9IHdpbmRvdy53aGF0ZXZlclxuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgke2VuZGluZ1JvdGF0aW9ufSk7XG4gIH1cbmBcbiJdfQ== */\\");"
+`;
+
+exports[`vanilla emotion nested-orphaned-pseudo 1`] = `
+"import { css } from '@emotion/css/macro'
+
+// whitespace before pseudo should be preserved
+css\`
+ & :hover {
+ color: hotpink;
+ }
+\`
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from \\"@emotion/css\\"; // whitespace before pseudo should be preserved
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1e7lzue\\",
+ styles: \\"& :hover{color:hotpink;}\\"
+} : {
+ name: \\"1e7lzue\\",
+ styles: \\"& :hover{color:hotpink;}\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5lc3RlZC1vcnBoYW5lZC1wc2V1ZG8uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0ciLCJmaWxlIjoibmVzdGVkLW9ycGhhbmVkLXBzZXVkby5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuLy8gd2hpdGVzcGFjZSBiZWZvcmUgcHNldWRvIHNob3VsZCBiZSBwcmVzZXJ2ZWRcbmNzc2BcbiAgJiA6aG92ZXIge1xuICAgIGNvbG9yOiBob3RwaW5rO1xuICB9XG5gXG4iXX0= */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
+exports[`vanilla emotion object-label 1`] = `
+"import { css } from '@emotion/css/macro'
+
+let obj = {
+ someProp: css({ color: 'green' }),
+ anotherProp: css({ color: 'hotpink' })
+}
+class Thing {
+ static Prop = css({ color: 'yellow' })
+ BadIdea = css({ color: 'red' })
+}
+
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from \\"@emotion/css\\";
+let obj = {
+ someProp: /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
+ } : {
+ name: \\"cw3a48-someProp\\",
+ styles: \\"color:green;label:someProp;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmxldCBvYmogPSB7XG4gIHNvbWVQcm9wOiBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KSxcbiAgYW5vdGhlclByb3A6IGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFByb3AgPSBjc3MoeyBjb2xvcjogJ3llbGxvdycgfSlcbiAgQmFkSWRlYSA9IGNzcyh7IGNvbG9yOiAncmVkJyB9KVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ }),
+ anotherProp: /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+ } : {
+ name: \\"1oocabw-anotherProp\\",
+ styles: \\"color:hotpink;label:anotherProp;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmxldCBvYmogPSB7XG4gIHNvbWVQcm9wOiBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KSxcbiAgYW5vdGhlclByb3A6IGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFByb3AgPSBjc3MoeyBjb2xvcjogJ3llbGxvdycgfSlcbiAgQmFkSWRlYSA9IGNzcyh7IGNvbG9yOiAncmVkJyB9KVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ })
+};
+
+class Thing {
+ static Prop = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"1bcsghv\\",
+ styles: \\"color:yellow\\"
+ } : {
+ name: \\"1p4vs6c-Prop\\",
+ styles: \\"color:yellow;label:Prop;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoib2JqZWN0LWxhYmVsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+ BadIdea = /*#__PURE__*/css(process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"hwfcu5\\",
+ styles: \\"color:red\\"
+ } : {
+ name: \\"1htwp0n-BadIdea\\",
+ styles: \\"color:red;label:BadIdea;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmxldCBvYmogPSB7XG4gIHNvbWVQcm9wOiBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KSxcbiAgYW5vdGhlclByb3A6IGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFByb3AgPSBjc3MoeyBjb2xvcjogJ3llbGxvdycgfSlcbiAgQmFkSWRlYSA9IGNzcyh7IGNvbG9yOiAncmVkJyB9KVxufVxuIl19 */\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+ });
+}"
+`;
diff --git a/packages/babel-plugin/__tests__/vanilla-emotion-macro/index.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/index.js
new file mode 100644
index 000000000..07961ee8f
--- /dev/null
+++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/index.js
@@ -0,0 +1,4 @@
+// @flow
+import babelTester from 'babel-tester'
+
+babelTester('vanilla emotion', __dirname)
diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion.js b/packages/babel-plugin/__tests__/vanilla-emotion.js
similarity index 83%
rename from packages/babel-plugin-emotion/__tests__/vanilla-emotion.js
rename to packages/babel-plugin/__tests__/vanilla-emotion.js
index ac90dcf19..a90a7b6b1 100644
--- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion.js
+++ b/packages/babel-plugin/__tests__/vanilla-emotion.js
@@ -1,5 +1,5 @@
import babelTester from 'babel-tester'
-import plugin from 'babel-plugin-emotion'
+import plugin from '@emotion/babel-plugin'
import path from 'path'
babelTester('vanilla emotion', path.join(__dirname, 'vanilla-emotion-macro'), {
diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
new file mode 100644
index 000000000..40053366a
--- /dev/null
+++ b/packages/babel-plugin/package.json
@@ -0,0 +1,50 @@
+{
+ "name": "@emotion/babel-plugin",
+ "version": "11.0.0",
+ "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
+ "main": "dist/emotion-babel-plugin.cjs.js",
+ "module": "dist/emotion-babel-plugin.esm.js",
+ "files": [
+ "src",
+ "lib",
+ "dist"
+ ],
+ "scripts": {
+ "test:typescript": "exit 0"
+ },
+ "dependencies": {
+ "@babel/helper-module-imports": "^7.7.0",
+ "@babel/plugin-syntax-jsx": "^7.12.1",
+ "@babel/runtime": "^7.7.2",
+ "@emotion/hash": "^0.8.0",
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/serialize": "^1.0.0",
+ "babel-plugin-macros": "^2.6.1",
+ "convert-source-map": "^1.5.0",
+ "escape-string-regexp": "^4.0.0",
+ "find-root": "^1.1.0",
+ "source-map": "^0.5.7",
+ "stylis": "^4.0.3"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.7.2",
+ "babel-check-duplicated-nodes": "^1.0.0"
+ },
+ "author": "Kye Hohenberger",
+ "homepage": "https://emotion.sh",
+ "license": "MIT",
+ "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin",
+ "keywords": [
+ "styles",
+ "emotion",
+ "react",
+ "css",
+ "css-in-js"
+ ],
+ "bugs": {
+ "url": "https://github.com/emotion-js/emotion/issues"
+ }
+}
diff --git a/packages/babel-plugin/src/core-macro.js b/packages/babel-plugin/src/core-macro.js
new file mode 100644
index 000000000..77f39f124
--- /dev/null
+++ b/packages/babel-plugin/src/core-macro.js
@@ -0,0 +1,198 @@
+// @flow
+import {
+ transformExpressionWithStyles,
+ createTransformerMacro,
+ getSourceMap,
+ addImport
+} from './utils'
+
+export const transformCssCallExpression = ({
+ state,
+ babel,
+ path,
+ sourceMap,
+ annotateAsPure = true
+}: {
+ state: *,
+ babel: *,
+ path: *,
+ sourceMap?: string,
+ annotateAsPure?: boolean
+}) => {
+ let node = transformExpressionWithStyles({
+ babel,
+ state,
+ path,
+ shouldLabel: true,
+ sourceMap
+ })
+ if (node) {
+ path.replaceWith(node)
+ path.hoist()
+ } else if (annotateAsPure && path.isCallExpression()) {
+ path.addComment('leading', '#__PURE__')
+ }
+}
+
+export const transformCsslessArrayExpression = ({
+ state,
+ babel,
+ path
+}: {
+ babel: *,
+ state: *,
+ path: *
+}) => {
+ let t = babel.types
+ let expressionPath = path.get('value.expression')
+ let sourceMap =
+ state.emotionSourceMap && path.node.loc !== undefined
+ ? getSourceMap(path.node.loc.start, state)
+ : ''
+
+ expressionPath.replaceWith(
+ t.callExpression(
+ // the name of this identifier doesn't really matter at all
+ // it'll never appear in generated code
+ t.identifier('___shouldNeverAppearCSS'),
+ path.node.value.expression.elements
+ )
+ )
+
+ transformCssCallExpression({
+ babel,
+ state,
+ path: expressionPath,
+ sourceMap,
+ annotateAsPure: false
+ })
+
+ if (t.isCallExpression(expressionPath)) {
+ expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments))
+ }
+}
+
+export const transformCsslessObjectExpression = ({
+ state,
+ babel,
+ path,
+ cssImport
+}: {
+ babel: *,
+ state: *,
+ path: *,
+ cssImport: { importSource: string, cssExport: string }
+}) => {
+ let t = babel.types
+ let expressionPath = path.get('value.expression')
+ let sourceMap =
+ state.emotionSourceMap && path.node.loc !== undefined
+ ? getSourceMap(path.node.loc.start, state)
+ : ''
+
+ expressionPath.replaceWith(
+ t.callExpression(
+ // the name of this identifier doesn't really matter at all
+ // it'll never appear in generated code
+ t.identifier('___shouldNeverAppearCSS'),
+ [path.node.value.expression]
+ )
+ )
+
+ transformCssCallExpression({
+ babel,
+ state,
+ path: expressionPath,
+ sourceMap
+ })
+
+ if (t.isCallExpression(expressionPath)) {
+ expressionPath
+ .get('callee')
+ .replaceWith(
+ addImport(state, cssImport.importSource, cssImport.cssExport, 'css')
+ )
+ }
+}
+
+let cssTransformer = ({
+ state,
+ babel,
+ reference
+}: {
+ state: any,
+ babel: any,
+ reference: any
+}) => {
+ transformCssCallExpression({ babel, state, path: reference.parentPath })
+}
+
+let globalTransformer = ({
+ state,
+ babel,
+ reference,
+ importSource,
+ options
+}: {
+ state: any,
+ babel: any,
+ reference: any,
+ importSource: string,
+ options: { cssExport?: string }
+}) => {
+ const t = babel.types
+
+ if (
+ !t.isJSXIdentifier(reference.node) ||
+ !t.isJSXOpeningElement(reference.parentPath.node)
+ ) {
+ return
+ }
+
+ const stylesPropPath = reference.parentPath
+ .get('attributes')
+ .find(p => t.isJSXAttribute(p.node) && p.node.name.name === 'styles')
+
+ if (!stylesPropPath) {
+ return
+ }
+
+ if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
+ if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
+ transformCsslessArrayExpression({
+ state,
+ babel,
+ path: stylesPropPath
+ })
+ } else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
+ transformCsslessObjectExpression({
+ state,
+ babel,
+ path: stylesPropPath,
+ cssImport:
+ options.cssExport !== undefined
+ ? {
+ importSource,
+ cssExport: options.cssExport
+ }
+ : {
+ importSource: '@emotion/react',
+ cssExport: 'css'
+ }
+ })
+ }
+ }
+}
+
+export const transformers = {
+ // this is an empty function because this transformer is never called
+ // we don't run any transforms on `jsx` directly
+ // instead we use it as a hint to enable css prop optimization
+ jsx: () => {},
+ css: cssTransformer,
+ Global: globalTransformer
+}
+
+export default createTransformerMacro(transformers, {
+ importSource: '@emotion/react'
+})
diff --git a/packages/babel-plugin/src/emotion-macro.js b/packages/babel-plugin/src/emotion-macro.js
new file mode 100644
index 000000000..c35bb9552
--- /dev/null
+++ b/packages/babel-plugin/src/emotion-macro.js
@@ -0,0 +1,67 @@
+// @flow
+import { transformExpressionWithStyles, createTransformerMacro } from './utils'
+
+const isAlreadyTranspiled = path => {
+ if (!path.isCallExpression()) {
+ return false
+ }
+
+ const firstArgPath = path.get('arguments.0')
+
+ if (!firstArgPath) {
+ return false
+ }
+
+ if (!firstArgPath.isConditionalExpression()) {
+ return false
+ }
+
+ const alternatePath = firstArgPath.get('alternate')
+
+ if (!alternatePath.isObjectExpression()) {
+ return false
+ }
+
+ const properties = new Set(
+ alternatePath.get('properties').map(p => p.node.key.name)
+ )
+
+ return ['name', 'styles'].every(p => properties.has(p))
+}
+
+let createEmotionTransformer = (isPure: boolean) => ({
+ state,
+ babel,
+ importSource,
+ reference,
+ importSpecifierName
+}: Object) => {
+ const path = reference.parentPath
+
+ if (isAlreadyTranspiled(path)) {
+ return
+ }
+
+ if (isPure) {
+ path.addComment('leading', '#__PURE__')
+ }
+
+ let node = transformExpressionWithStyles({
+ babel,
+ state,
+ path,
+ shouldLabel: true
+ })
+ if (node) {
+ path.node.arguments[0] = node
+ }
+}
+
+export let transformers = {
+ css: createEmotionTransformer(true),
+ injectGlobal: createEmotionTransformer(false),
+ keyframes: createEmotionTransformer(true)
+}
+
+export let createEmotionMacro = (importSource: string) =>
+ createTransformerMacro(transformers, { importSource })
diff --git a/packages/babel-plugin/src/index.js b/packages/babel-plugin/src/index.js
new file mode 100644
index 000000000..246fc4742
--- /dev/null
+++ b/packages/babel-plugin/src/index.js
@@ -0,0 +1,300 @@
+// @flow
+import syntaxJsx from '@babel/plugin-syntax-jsx'
+import {
+ createEmotionMacro,
+ transformers as vanillaTransformers
+} from './emotion-macro'
+import { createStyledMacro, styledTransformer } from './styled-macro'
+import coreMacro, {
+ transformers as coreTransformers,
+ transformCsslessArrayExpression,
+ transformCsslessObjectExpression
+} from './core-macro'
+import { getStyledOptions, createTransformerMacro } from './utils'
+
+const getCssExport = (reexported, importSource, mapping) => {
+ const cssExport = Object.keys(mapping).find(localExportName => {
+ const [packageName, exportName] = mapping[localExportName].canonicalImport
+ return packageName === '@emotion/react' && exportName === 'css'
+ })
+
+ if (!cssExport) {
+ throw new Error(
+ `You have specified that '${importSource}' re-exports '${reexported}' from '@emotion/react' but it doesn't also re-export 'css' from '@emotion/react', 'css' is necessary for certain optimisations, please re-export it from '${importSource}'`
+ )
+ }
+
+ return cssExport
+}
+
+let webStyledMacro = createStyledMacro({
+ importSource: '@emotion/styled/base',
+ originalImportSource: '@emotion/styled',
+ isWeb: true
+})
+let nativeStyledMacro = createStyledMacro({
+ importSource: '@emotion/native',
+ originalImportSource: '@emotion/native',
+ isWeb: false
+})
+let primitivesStyledMacro = createStyledMacro({
+ importSource: '@emotion/primitives',
+ originalImportSource: '@emotion/primitives',
+ isWeb: false
+})
+let vanillaEmotionMacro = createEmotionMacro('@emotion/css')
+
+let transformersSource = {
+ '@emotion/css': vanillaTransformers,
+ '@emotion/react': coreTransformers,
+ '@emotion/styled': {
+ default: [
+ styledTransformer,
+ { styledBaseImport: ['@emotion/styled/base', 'default'], isWeb: true }
+ ]
+ },
+ '@emotion/primitives': {
+ default: [styledTransformer, { isWeb: false }]
+ },
+ '@emotion/native': {
+ default: [styledTransformer, { isWeb: false }]
+ }
+}
+
+export const macros = {
+ core: coreMacro,
+ nativeStyled: nativeStyledMacro,
+ primitivesStyled: primitivesStyledMacro,
+ webStyled: webStyledMacro,
+ vanillaEmotion: vanillaEmotionMacro
+}
+
+export type BabelPath = any
+
+export type EmotionBabelPluginPass = any
+
+const AUTO_LABEL_VALUES = ['dev-only', 'never', 'always']
+
+export default function(babel: *, options: *) {
+ if (
+ options.autoLabel !== undefined &&
+ !AUTO_LABEL_VALUES.includes(options.autoLabel)
+ ) {
+ throw new Error(
+ `The 'autoLabel' option must be undefined, or one of the following: ${AUTO_LABEL_VALUES.map(
+ s => `"${s}"`
+ ).join(', ')}`
+ )
+ }
+
+ let t = babel.types
+ return {
+ name: '@emotion',
+ inherits: syntaxJsx,
+ visitor: {
+ ImportDeclaration(path: *, state: *) {
+ const macro = state.pluginMacros[path.node.source.value]
+ // most of this is from https://github.com/kentcdodds/babel-plugin-macros/blob/master/src/index.js
+ if (macro === undefined) {
+ return
+ }
+ if (t.isImportNamespaceSpecifier(path.node.specifiers[0])) {
+ return
+ }
+ const imports = path.node.specifiers.map(s => ({
+ localName: s.local.name,
+ importedName:
+ s.type === 'ImportDefaultSpecifier' ? 'default' : s.imported.name
+ }))
+ let shouldExit = false
+ let hasReferences = false
+ const referencePathsByImportName = imports.reduce(
+ (byName, { importedName, localName }) => {
+ let binding = path.scope.getBinding(localName)
+ if (!binding) {
+ shouldExit = true
+ return byName
+ }
+ byName[importedName] = binding.referencePaths
+ hasReferences =
+ hasReferences || Boolean(byName[importedName].length)
+ return byName
+ },
+ {}
+ )
+ if (!hasReferences || shouldExit) {
+ return
+ }
+ /**
+ * Other plugins that run before babel-plugin-macros might use path.replace, where a path is
+ * put into its own replacement. Apparently babel does not update the scope after such
+ * an operation. As a remedy, the whole scope is traversed again with an empty "Identifier"
+ * visitor - this makes the problem go away.
+ *
+ * See: https://github.com/kentcdodds/import-all.macro/issues/7
+ */
+ state.file.scope.path.traverse({
+ Identifier() {}
+ })
+
+ macro({
+ path,
+ references: referencePathsByImportName,
+ state,
+ babel,
+ isEmotionCall: true,
+ isBabelMacrosCall: true
+ })
+ },
+ Program(path: *, state: *) {
+ let macros = {}
+ let jsxReactImports: Array<{
+ importSource: string,
+ export: string,
+ cssExport: string
+ }> = [
+ { importSource: '@emotion/react', export: 'jsx', cssExport: 'css' }
+ ]
+ state.jsxReactImport = jsxReactImports[0]
+ Object.keys(state.opts.importMap || {}).forEach(importSource => {
+ let value = state.opts.importMap[importSource]
+ let transformers = {}
+ Object.keys(value).forEach(localExportName => {
+ let { canonicalImport, ...options } = value[localExportName]
+ let [packageName, exportName] = canonicalImport
+ if (packageName === '@emotion/react' && exportName === 'jsx') {
+ jsxReactImports.push({
+ importSource,
+ export: localExportName,
+ cssExport: getCssExport('jsx', importSource, value)
+ })
+ return
+ }
+ let packageTransformers = transformersSource[packageName]
+
+ if (packageTransformers === undefined) {
+ throw new Error(
+ `There is no transformer for the export '${exportName}' in '${packageName}'`
+ )
+ }
+
+ let extraOptions
+
+ if (packageName === '@emotion/react' && exportName === 'Global') {
+ // this option is not supposed to be set in importMap
+ extraOptions = {
+ cssExport: getCssExport('Global', importSource, value)
+ }
+ } else if (
+ packageName === '@emotion/styled' &&
+ exportName === 'default'
+ ) {
+ // this is supposed to override defaultOptions value
+ // and let correct value to be set if coming in options
+ extraOptions = {
+ styledBaseImport: undefined
+ }
+ }
+
+ let [exportTransformer, defaultOptions] =
+ // $FlowFixMe
+ Array.isArray(packageTransformers[exportName])
+ ? packageTransformers[exportName]
+ : [packageTransformers[exportName]]
+
+ transformers[localExportName] = [
+ exportTransformer,
+ {
+ ...defaultOptions,
+ ...extraOptions,
+ ...options
+ }
+ ]
+ })
+ macros[importSource] = createTransformerMacro(transformers, {
+ importSource
+ })
+ })
+ state.pluginMacros = {
+ '@emotion/styled': webStyledMacro,
+ '@emotion/react': coreMacro,
+ '@emotion/primitives': primitivesStyledMacro,
+ '@emotion/native': nativeStyledMacro,
+ '@emotion/css': vanillaEmotionMacro,
+ ...macros
+ }
+
+ for (const node of path.node.body) {
+ if (t.isImportDeclaration(node)) {
+ let jsxReactImport = jsxReactImports.find(
+ thing =>
+ node.source.value === thing.importSource &&
+ node.specifiers.some(
+ x =>
+ t.isImportSpecifier(x) && x.imported.name === thing.export
+ )
+ )
+ if (jsxReactImport) {
+ state.jsxReactImport = jsxReactImport
+ break
+ }
+ }
+ }
+
+ if (state.opts.cssPropOptimization === false) {
+ state.transformCssProp = false
+ } else {
+ state.transformCssProp = true
+ }
+
+ if (state.opts.sourceMap === false) {
+ state.emotionSourceMap = false
+ } else {
+ state.emotionSourceMap = true
+ }
+ },
+ JSXAttribute(path: *, state: *) {
+ if (path.node.name.name !== 'css' || !state.transformCssProp) {
+ return
+ }
+
+ if (t.isJSXExpressionContainer(path.node.value)) {
+ if (t.isArrayExpression(path.node.value.expression)) {
+ transformCsslessArrayExpression({
+ state,
+ babel,
+ path
+ })
+ } else if (t.isObjectExpression(path.node.value.expression)) {
+ transformCsslessObjectExpression({
+ state,
+ babel,
+ path,
+ cssImport: state.jsxReactImport
+ })
+ }
+ }
+ },
+ CallExpression: {
+ exit(path: BabelPath, state: EmotionBabelPluginPass) {
+ try {
+ if (
+ path.node.callee &&
+ path.node.callee.property &&
+ path.node.callee.property.name === 'withComponent'
+ ) {
+ switch (path.node.arguments.length) {
+ case 1:
+ case 2: {
+ path.node.arguments[1] = getStyledOptions(t, path, state)
+ }
+ }
+ }
+ } catch (e) {
+ throw path.buildCodeFrameError(e)
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/packages/babel-plugin/src/styled-macro.js b/packages/babel-plugin/src/styled-macro.js
new file mode 100644
index 000000000..aef7008dd
--- /dev/null
+++ b/packages/babel-plugin/src/styled-macro.js
@@ -0,0 +1,143 @@
+// @flow
+import {
+ transformExpressionWithStyles,
+ getStyledOptions,
+ addImport,
+ createTransformerMacro
+} from './utils'
+
+const getReferencedSpecifier = (path, specifierName) => {
+ const specifiers = path.get('specifiers')
+ return specifierName === 'default'
+ ? specifiers.find(p => p.isImportDefaultSpecifier())
+ : specifiers.find(p => p.node.local.name === specifierName)
+}
+
+export let styledTransformer = ({
+ state,
+ babel,
+ path,
+ importSource,
+ reference,
+ importSpecifierName,
+ options: { styledBaseImport, isWeb }
+}: {
+ state: Object,
+ babel: Object,
+ path: any,
+ importSource: string,
+ importSpecifierName: string,
+ reference: Object,
+ options: { styledBaseImport?: [string, string], isWeb: boolean }
+}) => {
+ let t = babel.types
+
+ let getStyledIdentifier = () => {
+ if (
+ !styledBaseImport ||
+ (styledBaseImport[0] === importSource &&
+ styledBaseImport[1] === importSpecifierName)
+ ) {
+ return importSpecifierName === 'default'
+ ? t.identifier(
+ path.get('specifiers').find(p => p.isImportDefaultSpecifier()).node
+ .local.name
+ )
+ : t.identifier(importSpecifierName)
+ }
+
+ if (path.node) {
+ const referencedSpecifier = getReferencedSpecifier(
+ path,
+ importSpecifierName
+ )
+
+ if (referencedSpecifier) {
+ referencedSpecifier.remove()
+ }
+
+ if (!path.get('specifiers').length) {
+ path.remove()
+ }
+ }
+
+ const [baseImportSource, baseSpecifierName] = styledBaseImport
+
+ return addImport(state, baseImportSource, baseSpecifierName, 'styled')
+ }
+ let isCall = false
+ if (
+ t.isMemberExpression(reference.parent) &&
+ reference.parent.computed === false
+ ) {
+ isCall = true
+ if (
+ // checks if the first character is lowercase
+ // becasue we don't want to transform the member expression if
+ // it's in primitives/native
+ reference.parent.property.name.charCodeAt(0) > 96
+ ) {
+ reference.parentPath.replaceWith(
+ t.callExpression(getStyledIdentifier(), [
+ t.stringLiteral(reference.parent.property.name)
+ ])
+ )
+ } else {
+ reference.replaceWith(getStyledIdentifier())
+ }
+ } else if (
+ reference.parentPath &&
+ reference.parentPath.parentPath &&
+ t.isCallExpression(reference.parentPath) &&
+ reference.parent.callee === reference.node
+ ) {
+ isCall = true
+ reference.replaceWith(getStyledIdentifier())
+ }
+
+ if (reference.parentPath && reference.parentPath.parentPath) {
+ const styledCallPath = reference.parentPath.parentPath
+ let node = transformExpressionWithStyles({
+ path: styledCallPath,
+ state,
+ babel,
+ shouldLabel: false
+ })
+ if (node && isWeb) {
+ // we know the argument length will be 1 since that's the only time we will have a node since it will be static
+ styledCallPath.node.arguments[0] = node
+ }
+ }
+
+ if (isCall) {
+ reference.addComment('leading', '#__PURE__')
+ if (isWeb) {
+ reference.parentPath.node.arguments[1] = getStyledOptions(
+ t,
+ reference.parentPath,
+ state
+ )
+ }
+ }
+}
+
+export let createStyledMacro = ({
+ importSource,
+ originalImportSource = importSource,
+ baseImportName = 'default',
+ isWeb
+}: {
+ importSource: string,
+ originalImportSource?: string,
+ baseImportName?: string,
+ isWeb: boolean
+}) =>
+ createTransformerMacro(
+ {
+ default: [
+ styledTransformer,
+ { styledBaseImport: [importSource, baseImportName], isWeb }
+ ]
+ },
+ { importSource: originalImportSource }
+ )
diff --git a/packages/babel-plugin/src/utils/add-import.js b/packages/babel-plugin/src/utils/add-import.js
new file mode 100644
index 000000000..4d1113ac8
--- /dev/null
+++ b/packages/babel-plugin/src/utils/add-import.js
@@ -0,0 +1,30 @@
+import { addDefault, addNamed } from '@babel/helper-module-imports'
+
+export function addImport(
+ state: any,
+ importSource: string,
+ importedSpecifier: string,
+ nameHint?: string
+) {
+ let cacheKey = ['import', importSource, importedSpecifier].join(':')
+ if (state[cacheKey] === undefined) {
+ let importIdentifier
+ if (importedSpecifier === 'default') {
+ importIdentifier = addDefault(state.file.path, importSource, { nameHint })
+ } else {
+ importIdentifier = addNamed(
+ state.file.path,
+ importedSpecifier,
+ importSource,
+ {
+ nameHint
+ }
+ )
+ }
+ state[cacheKey] = importIdentifier.name
+ }
+ return {
+ type: 'Identifier',
+ name: state[cacheKey]
+ }
+}
diff --git a/packages/babel-plugin-emotion/src/utils/get-styled-options.js b/packages/babel-plugin/src/utils/get-styled-options.js
similarity index 91%
rename from packages/babel-plugin-emotion/src/utils/get-styled-options.js
rename to packages/babel-plugin/src/utils/get-styled-options.js
index e76a7fa79..510b62a57 100644
--- a/packages/babel-plugin-emotion/src/utils/get-styled-options.js
+++ b/packages/babel-plugin/src/utils/get-styled-options.js
@@ -10,6 +10,8 @@ const getKnownProperties = (t: *, node: *) =>
)
export let getStyledOptions = (t: *, path: *, state: *) => {
+ const autoLabel = state.opts.autoLabel || 'dev-only'
+
let args = path.node.arguments
let optionsArgument = args.length >= 2 ? args[1] : null
@@ -28,7 +30,8 @@ export let getStyledOptions = (t: *, path: *, state: *) => {
)
}
- let label = getLabelFromPath(path, state, t)
+ let label = autoLabel !== 'never' ? getLabelFromPath(path, state, t) : null
+
if (label && !knownProperties.has('label')) {
properties.push(
t.objectProperty(t.identifier('label'), t.stringLiteral(label))
diff --git a/packages/babel-plugin-emotion/src/utils/get-target-class-name.js b/packages/babel-plugin/src/utils/get-target-class-name.js
similarity index 100%
rename from packages/babel-plugin-emotion/src/utils/get-target-class-name.js
rename to packages/babel-plugin/src/utils/get-target-class-name.js
diff --git a/packages/babel-plugin-emotion/src/utils/index.js b/packages/babel-plugin/src/utils/index.js
similarity index 64%
rename from packages/babel-plugin-emotion/src/utils/index.js
rename to packages/babel-plugin/src/utils/index.js
index 95490a0cf..733b947dc 100644
--- a/packages/babel-plugin-emotion/src/utils/index.js
+++ b/packages/babel-plugin/src/utils/index.js
@@ -1,5 +1,4 @@
// @flow
-export { getExpressionsFromTemplateLiteral } from './minify'
export { getLabelFromPath } from './label'
export { getSourceMap } from './source-maps'
export { getTargetClassName } from './get-target-class-name'
@@ -8,4 +7,9 @@ export {
transformExpressionWithStyles
} from './transform-expression-with-styles'
export { getStyledOptions } from './get-styled-options'
-export { appendStringToArguments, joinStringLiterals } from './strings'
+export {
+ appendStringReturningExpressionToArguments,
+ joinStringLiterals
+} from './strings'
+export { addImport } from './add-import'
+export { createTransformerMacro } from './transformer-macro'
diff --git a/packages/babel-plugin-emotion/src/utils/label.js b/packages/babel-plugin/src/utils/label.js
similarity index 69%
rename from packages/babel-plugin-emotion/src/utils/label.js
rename to packages/babel-plugin/src/utils/label.js
index 3f3aba35b..c40ba95d3 100644
--- a/packages/babel-plugin-emotion/src/utils/label.js
+++ b/packages/babel-plugin/src/utils/label.js
@@ -1,6 +1,11 @@
// @flow
import nodePath from 'path'
+type LabelFormatOptions = {
+ name: string,
+ path: string
+}
+
const invalidClassNameCharacters = /[!"#$%&'()*+,./:;<=>?@[\]^`|}~{]/g
const sanitizeLabelPart = (labelPart: string) =>
@@ -8,12 +13,23 @@ const sanitizeLabelPart = (labelPart: string) =>
function getLabel(
identifierName?: string,
- autoLabel: boolean,
- labelFormat?: string,
+ labelFormat?: string | (LabelFormatOptions => string),
filename: string
) {
- if (!identifierName || !autoLabel) return null
- if (!labelFormat) return sanitizeLabelPart(identifierName)
+ if (!identifierName) return null
+
+ const sanitizedName = sanitizeLabelPart(identifierName)
+
+ if (!labelFormat) {
+ return sanitizedName
+ }
+
+ if (typeof labelFormat === 'function') {
+ return labelFormat({
+ name: sanitizedName,
+ path: filename
+ })
+ }
const parsedPath = nodePath.parse(filename)
let localDirname = nodePath.basename(parsedPath.dir)
@@ -24,7 +40,7 @@ function getLabel(
}
return labelFormat
- .replace(/\[local\]/gi, sanitizeLabelPart(identifierName))
+ .replace(/\[local\]/gi, sanitizedName)
.replace(/\[filename\]/gi, sanitizeLabelPart(localFilename))
.replace(/\[dirname\]/gi, sanitizeLabelPart(localDirname))
}
@@ -32,21 +48,17 @@ function getLabel(
export function getLabelFromPath(path: *, state: *, t: *) {
return getLabel(
getIdentifierName(path, t),
- state.opts.autoLabel === undefined
- ? process.env.NODE_ENV !== 'production'
- : state.opts.autoLabel,
state.opts.labelFormat,
state.file.opts.filename
)
}
-let pascalCaseRegex = /^[A-Z][A-Za-z]+/
-
function getDeclaratorName(path, t) {
// $FlowFixMe
const parent = path.findParent(
p =>
p.isVariableDeclarator() ||
+ p.isAssignmentExpression() ||
p.isFunctionDeclaration() ||
p.isFunctionExpression() ||
p.isArrowFunctionExpression() ||
@@ -65,29 +77,49 @@ function getDeclaratorName(path, t) {
return ''
}
- // we probably have an inline css prop usage
- if (parent.isFunctionDeclaration()) {
- let { name } = parent.node.id
- if (pascalCaseRegex.test(name)) {
- return name
+ if (parent.isAssignmentExpression()) {
+ let { left } = parent.node
+ if (t.isIdentifier(left)) {
+ return left.name
+ }
+ if (t.isMemberExpression(left)) {
+ let memberExpression = left
+ let name = ''
+ while (true) {
+ if (!t.isIdentifier(memberExpression.property)) {
+ return ''
+ }
+
+ name = `${memberExpression.property.name}${name ? `-${name}` : ''}`
+
+ if (t.isIdentifier(memberExpression.object)) {
+ return `${memberExpression.object.name}-${name}`
+ }
+
+ if (!t.isMemberExpression(memberExpression.object)) {
+ return ''
+ }
+ memberExpression = memberExpression.object
+ }
}
return ''
}
+ // we probably have an inline css prop usage
+ if (parent.isFunctionDeclaration()) {
+ return parent.node.id.name || ''
+ }
+
// we could also have an object property
if (parent.isObjectProperty() && !parent.node.computed) {
return parent.node.key.name
}
- let variableDeclarator = path.findParent(p => p.isVariableDeclarator())
+ let variableDeclarator = parent.findParent(p => p.isVariableDeclarator())
if (!variableDeclarator) {
return ''
}
- let { name } = variableDeclarator.node.id
- if (pascalCaseRegex.test(name)) {
- return name
- }
- return ''
+ return variableDeclarator.node.id.name
}
function getIdentifierName(path: *, t: *) {
diff --git a/packages/babel-plugin/src/utils/minify.js b/packages/babel-plugin/src/utils/minify.js
new file mode 100644
index 000000000..d37371274
--- /dev/null
+++ b/packages/babel-plugin/src/utils/minify.js
@@ -0,0 +1,156 @@
+// @flow
+import { compile } from 'stylis'
+
+const isAutoInsertedRule = element => {
+ if (element.type !== 'rule' || !element.parent) {
+ return false
+ }
+
+ let parent = element
+ do {
+ parent = parent.parent
+ } while (parent && parent.type !== 'rule')
+
+ return !!parent && element.value === parent.value
+}
+
+const toInputTree = (elements, tree) => {
+ for (let i = 0; i < elements.length; i++) {
+ const element = elements[i]
+ const { parent, children } = element
+
+ if (!parent) {
+ tree.push(element)
+ } else if (!isAutoInsertedRule(element)) {
+ parent.children.push(element)
+ }
+
+ if (Array.isArray(children)) {
+ element.children = []
+ toInputTree(children, tree)
+ }
+ }
+
+ return tree
+}
+
+var stringifyTree = elements => {
+ return elements
+ .map(element => {
+ switch (element.type) {
+ case 'import':
+ case 'decl':
+ return element.value
+ case 'comm':
+ // When we encounter a standard multi-line CSS comment and it contains a '@'
+ // character, we keep the comment. Some Stylis plugins, such as
+ // the stylis-rtl via the cssjanus plugin, use this special comment syntax
+ // to control behavior (such as: /* @noflip */). We can do this
+ // with standard CSS comments because they will work with compression,
+ // as opposed to non-standard single-line comments that will break compressed CSS.
+ return element.props === '/' && element.value.includes('@')
+ ? element.value
+ : ''
+ case 'rule':
+ return `${element.value.replace(/&\f/g, '&')}{${stringifyTree(
+ element.children
+ )}}`
+ default: {
+ return `${element.value}{${stringifyTree(element.children)}}`
+ }
+ }
+ })
+ .join('')
+}
+
+const interleave = (strings: Array<*>, interpolations: Array<*>) =>
+ interpolations.reduce(
+ (array, interp, i) => array.concat([interp], strings[i + 1]),
+ [strings[0]]
+ )
+
+function getDynamicMatches(str: string) {
+ const re = /xxx(\d+):xxx/gm
+ let match
+ const matches = []
+ while ((match = re.exec(str)) !== null) {
+ // so that flow doesn't complain
+ if (match !== null) {
+ matches.push({
+ value: match[0],
+ p1: parseInt(match[1], 10),
+ index: match.index
+ })
+ }
+ }
+
+ return matches
+}
+
+function replacePlaceholdersWithExpressions(
+ str: string,
+ expressions: Array<*>,
+ t: *
+) {
+ const matches = getDynamicMatches(str)
+ if (matches.length === 0) {
+ if (str === '') {
+ return []
+ }
+ return [t.stringLiteral(str)]
+ }
+ const strings = []
+ const finalExpressions = []
+ let cursor = 0
+
+ matches.forEach(({ value, p1, index }, i) => {
+ const preMatch = str.substring(cursor, index)
+ cursor = cursor + preMatch.length + value.length
+ if (preMatch) {
+ strings.push(t.stringLiteral(preMatch))
+ } else if (i === 0) {
+ strings.push(t.stringLiteral(''))
+ }
+
+ finalExpressions.push(expressions[p1])
+ if (i === matches.length - 1) {
+ strings.push(t.stringLiteral(str.substring(index + value.length)))
+ }
+ })
+
+ return interleave(strings, finalExpressions).filter(
+ (node: { value: string }) => {
+ return node.value !== ''
+ }
+ )
+}
+
+function createRawStringFromTemplateLiteral(quasi: {
+ quasis: Array<{ value: { cooked: string } }>
+}) {
+ let strs = quasi.quasis.map(x => x.value.cooked)
+
+ const src = strs
+ .reduce((arr, str, i) => {
+ arr.push(str)
+ if (i !== strs.length - 1) {
+ arr.push(`xxx${i}:xxx`)
+ }
+ return arr
+ }, [])
+ .join('')
+ .trim()
+ return src
+}
+
+export default function minify(path: *, t: *): void {
+ const quasi = path.node.quasi
+ const raw = createRawStringFromTemplateLiteral(quasi)
+ const minified = stringifyTree(toInputTree(compile(raw), []))
+ const expressions = replacePlaceholdersWithExpressions(
+ minified,
+ quasi.expressions || [],
+ t
+ )
+ path.replaceWith(t.callExpression(path.node.tag, expressions))
+}
diff --git a/packages/babel-plugin-emotion/src/utils/object-to-string.js b/packages/babel-plugin/src/utils/object-to-string.js
similarity index 100%
rename from packages/babel-plugin-emotion/src/utils/object-to-string.js
rename to packages/babel-plugin/src/utils/object-to-string.js
diff --git a/packages/babel-plugin-emotion/src/utils/source-maps.js b/packages/babel-plugin/src/utils/source-maps.js
similarity index 100%
rename from packages/babel-plugin-emotion/src/utils/source-maps.js
rename to packages/babel-plugin/src/utils/source-maps.js
diff --git a/packages/babel-plugin-emotion/src/utils/strings.js b/packages/babel-plugin/src/utils/strings.js
similarity index 53%
rename from packages/babel-plugin-emotion/src/utils/strings.js
rename to packages/babel-plugin/src/utils/strings.js
index 1c95e7a22..6c91c6216 100644
--- a/packages/babel-plugin-emotion/src/utils/strings.js
+++ b/packages/babel-plugin/src/utils/strings.js
@@ -4,13 +4,19 @@ import {
isTaggedTemplateTranspiledByBabel
} from './transpiled-output-utils'
-export const appendStringToArguments = (path: *, string: string, t: *) => {
- if (!string) {
- return
- }
- const args = path.node.arguments
- if (t.isStringLiteral(args[args.length - 1])) {
- args[args.length - 1].value += string
+export const appendStringReturningExpressionToArguments = (
+ t: *,
+ path: *,
+ expression: *
+) => {
+ let lastIndex = path.node.arguments.length - 1
+ let last = path.node.arguments[lastIndex]
+ if (t.isStringLiteral(last)) {
+ if (typeof expression === 'string') {
+ path.node.arguments[lastIndex].value += expression
+ } else {
+ path.node.arguments[lastIndex] = t.binaryExpression('+', last, expression)
+ }
} else {
const makeTemplateObjectCallPath = getTypeScriptMakeTemplateObjectPath(path)
@@ -18,12 +24,22 @@ export const appendStringToArguments = (path: *, string: string, t: *) => {
makeTemplateObjectCallPath.get('arguments').forEach(argPath => {
const elements = argPath.get('elements')
const lastElement = elements[elements.length - 1]
- lastElement.replaceWith(
- t.stringLiteral(lastElement.node.value + string)
- )
+ if (typeof expression === 'string') {
+ lastElement.replaceWith(
+ t.stringLiteral(lastElement.node.value + expression)
+ )
+ } else {
+ lastElement.replaceWith(
+ t.binaryExpression('+', lastElement.node, t.cloneNode(expression))
+ )
+ }
})
} else if (!isTaggedTemplateTranspiledByBabel(path)) {
- args.push(t.stringLiteral(string))
+ if (typeof expression === 'string') {
+ path.node.arguments.push(t.stringLiteral(expression))
+ } else {
+ path.node.arguments.push(expression)
+ }
}
}
}
diff --git a/packages/babel-plugin/src/utils/transform-expression-with-styles.js b/packages/babel-plugin/src/utils/transform-expression-with-styles.js
new file mode 100644
index 000000000..420b4c2bd
--- /dev/null
+++ b/packages/babel-plugin/src/utils/transform-expression-with-styles.js
@@ -0,0 +1,163 @@
+// @flow
+
+import { serializeStyles } from '@emotion/serialize'
+import minify from './minify'
+import { getLabelFromPath } from './label'
+import { getSourceMap } from './source-maps'
+import { simplifyObject } from './object-to-string'
+import {
+ appendStringReturningExpressionToArguments,
+ joinStringLiterals
+} from './strings'
+
+const CSS_OBJECT_STRINGIFIED_ERROR =
+ "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
+
+function createNodeEnvConditional(t, production, development) {
+ return t.conditionalExpression(
+ t.binaryExpression(
+ '===',
+ t.memberExpression(
+ t.memberExpression(t.identifier('process'), t.identifier('env')),
+ t.identifier('NODE_ENV')
+ ),
+ t.stringLiteral('production')
+ ),
+ production,
+ development
+ )
+}
+
+export let transformExpressionWithStyles = ({
+ babel,
+ state,
+ path,
+ shouldLabel,
+ sourceMap = ''
+}: {
+ babel: *,
+ state: *,
+ path: *,
+ shouldLabel: boolean,
+ sourceMap?: string
+}): * => {
+ const autoLabel = state.opts.autoLabel || 'dev-only'
+ let t = babel.types
+ if (t.isTaggedTemplateExpression(path)) {
+ if (
+ !sourceMap &&
+ state.emotionSourceMap &&
+ path.node.quasi.loc !== undefined
+ ) {
+ sourceMap = getSourceMap(path.node.quasi.loc.start, state)
+ }
+ minify(path, t)
+ }
+
+ if (t.isCallExpression(path)) {
+ const canAppendStrings = path.node.arguments.every(
+ arg => arg.type !== 'SpreadElement'
+ )
+
+ path.get('arguments').forEach(node => {
+ if (t.isObjectExpression(node)) {
+ node.replaceWith(simplifyObject(node.node, t))
+ }
+ })
+
+ path.node.arguments = joinStringLiterals(path.node.arguments, t)
+
+ if (
+ !sourceMap &&
+ canAppendStrings &&
+ state.emotionSourceMap &&
+ path.node.loc !== undefined
+ ) {
+ sourceMap = getSourceMap(path.node.loc.start, state)
+ }
+
+ const label =
+ shouldLabel && autoLabel !== 'never'
+ ? getLabelFromPath(path, state, t)
+ : null
+
+ if (
+ path.node.arguments.length === 1 &&
+ t.isStringLiteral(path.node.arguments[0])
+ ) {
+ let cssString = path.node.arguments[0].value.replace(/;$/, '')
+ let res = serializeStyles([
+ `${cssString}${
+ label && autoLabel === 'always' ? `;label:${label};` : ''
+ }`
+ ])
+ let prodNode = t.objectExpression([
+ t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
+ t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles))
+ ])
+
+ if (!state.emotionStringifiedCssId) {
+ const uid = state.file.scope.generateUidIdentifier(
+ '__EMOTION_STRINGIFIED_CSS_ERROR__'
+ )
+ state.emotionStringifiedCssId = uid
+ const cssObjectToString = t.functionDeclaration(
+ uid,
+ [],
+ t.blockStatement([
+ t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR))
+ ])
+ )
+ cssObjectToString._compact = true
+ state.file.path.unshiftContainer('body', [cssObjectToString])
+ }
+
+ if (label && autoLabel === 'dev-only') {
+ res = serializeStyles([`${cssString};label:${label};`])
+ }
+
+ let devNode = t.objectExpression(
+ [
+ t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
+ t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)),
+ sourceMap &&
+ t.objectProperty(t.identifier('map'), t.stringLiteral(sourceMap)),
+ t.objectProperty(
+ t.identifier('toString'),
+ t.cloneNode(state.emotionStringifiedCssId)
+ )
+ ].filter(Boolean)
+ )
+
+ return createNodeEnvConditional(t, prodNode, devNode)
+ }
+
+ if (canAppendStrings && label) {
+ const labelString = `;label:${label};`
+
+ switch (autoLabel) {
+ case 'dev-only': {
+ const labelConditional = createNodeEnvConditional(
+ t,
+ t.stringLiteral(''),
+ t.stringLiteral(labelString)
+ )
+ appendStringReturningExpressionToArguments(t, path, labelConditional)
+ break
+ }
+ case 'always':
+ appendStringReturningExpressionToArguments(t, path, labelString)
+ break
+ }
+ }
+
+ if (sourceMap) {
+ let sourceMapConditional = createNodeEnvConditional(
+ t,
+ t.stringLiteral(''),
+ t.stringLiteral(sourceMap)
+ )
+ appendStringReturningExpressionToArguments(t, path, sourceMapConditional)
+ }
+ }
+}
diff --git a/packages/babel-plugin/src/utils/transformer-macro.js b/packages/babel-plugin/src/utils/transformer-macro.js
new file mode 100644
index 000000000..ea1048969
--- /dev/null
+++ b/packages/babel-plugin/src/utils/transformer-macro.js
@@ -0,0 +1,58 @@
+// @flow
+import { createMacro } from 'babel-plugin-macros'
+
+type Transformer = Function
+
+export function createTransformerMacro(
+ transformers: { [key: string]: Transformer | [Transformer, Object] },
+ { importSource }: { importSource: string }
+) {
+ let macro = createMacro(
+ ({ path, source, references, state, babel, isEmotionCall }) => {
+ if (!path) {
+ path = state.file.scope.path
+ .get('body')
+ .find(p => p.isImportDeclaration() && p.node.source.value === source)
+ }
+
+ if (/\/macro$/.test(source)) {
+ path
+ .get('source')
+ .replaceWith(
+ babel.types.stringLiteral(source.replace(/\/macro$/, ''))
+ )
+ }
+
+ if (!isEmotionCall) {
+ state.emotionSourceMap = true
+ }
+ Object.keys(references).forEach(importSpecifierName => {
+ if (transformers[importSpecifierName]) {
+ references[importSpecifierName].reverse().forEach(reference => {
+ let options
+ let transformer
+ if (Array.isArray(transformers[importSpecifierName])) {
+ transformer = transformers[importSpecifierName][0]
+ options = transformers[importSpecifierName][1]
+ } else {
+ transformer = transformers[importSpecifierName]
+ options = {}
+ }
+ transformer({
+ state,
+ babel,
+ path,
+ importSource,
+ importSpecifierName,
+ options,
+ reference
+ })
+ })
+ }
+ })
+ return { keepImports: true }
+ }
+ )
+ macro.transformers = transformers
+ return macro
+}
diff --git a/packages/babel-plugin-emotion/src/utils/transpiled-output-utils.js b/packages/babel-plugin/src/utils/transpiled-output-utils.js
similarity index 100%
rename from packages/babel-plugin-emotion/src/utils/transpiled-output-utils.js
rename to packages/babel-plugin/src/utils/transpiled-output-utils.js
diff --git a/packages/babel-preset-css-prop/CHANGELOG.md b/packages/babel-preset-css-prop/CHANGELOG.md
index 5c1b38751..4d3780317 100644
--- a/packages/babel-preset-css-prop/CHANGELOG.md
+++ b/packages/babel-preset-css-prop/CHANGELOG.md
@@ -1,5 +1,106 @@
# @emotion/babel-preset-css-prop
+## 11.0.0
+
+### Major Changes
+
+- [`9e3671c4`](https://github.com/emotion-js/emotion/commit/9e3671c466975fb31cd45431e25cb60ffb677a70) [#2076](https://github.com/emotion-js/emotion/pull/2076) Thanks [@Andarist](https://github.com/Andarist)! - Removed `runtime` option that was introduced to this preset and deprecated shortly after that. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option
+
+* [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1656](https://github.com/emotion-js/emotion/pull/1656) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+
+ Each possible value for this option produces different output code:
+
+ - with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+ - with `always` we always add labels when possible,
+ - with `never` we disable this entirely and no labels are added.
+
+### Minor Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Added the `importMap` option which allows you to tell `@emotion/babel-plugin` what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
+
+- [`c672175b`](https://github.com/emotion-js/emotion/commit/c672175b52e86de43b3d4092a8fe34b2023ceae8) [#1130](https://github.com/emotion-js/emotion/pull/1130) Thanks [@jtmthf](https://github.com/jtmthf)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.
+
+* [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1651](https://github.com/emotion-js/emotion/pull/1651) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
+
+### Patch Changes
+
+- Updated dependencies [[`c672175b`](https://github.com/emotion-js/emotion/commit/c672175b52e86de43b3d4092a8fe34b2023ceae8), [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1), [`5e803106`](https://github.com/emotion-js/emotion/commit/5e803106d391b7c036bdf634318b80337a1d9b70), [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d), [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`c65c5d88`](https://github.com/emotion-js/emotion/commit/c65c5d887002d76557eaefcb98091d795b13f9a9), [`5c7ec859`](https://github.com/emotion-js/emotion/commit/5c7ec85904633a11185066fa591dc8969f3f2ff2), [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe), [`b7d21373`](https://github.com/emotion-js/emotion/commit/b7d21373d967d0f958dd59aaaa650047e23e8e8b), [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1), [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd)]:
+ - @emotion/babel-plugin@11.0.0
+
+## 11.0.0-rc.0
+
+### Major Changes
+
+- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
+
+### Patch Changes
+
+- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
+ - @emotion/babel-plugin@11.0.0-rc.0
+
+## 11.0.0-next.10
+
+### Major Changes
+
+- [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1656](https://github.com/emotion-js/emotion/pull/1656) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+
+ Each possible value for this option produces different output code:
+
+ - with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+ - with `always` we always add labels when possible,
+ - with `never` we disable this entirely and no labels are added.
+
+### Patch Changes
+
+- Updated dependencies [[`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe)]:
+ - @emotion/babel-plugin@11.0.0-next.10
+
+## 11.0.0-next.8
+
+### Minor Changes
+
+- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1609](https://github.com/emotion-js/emotion/pull/1609) Thanks [@joltmode](https://github.com/joltmode)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.
+
+### Patch Changes
+
+- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]:
+ - babel-plugin-emotion@11.0.0-next.8
+
+## 11.0.0-next.6
+
+### Minor Changes
+
+- [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1651](https://github.com/emotion-js/emotion/pull/1651) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
+
+### Patch Changes
+
+- Updated dependencies [[`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d), [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41), [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd)]:
+ - babel-plugin-emotion@11.0.0-next.6
+
+## 11.0.0-next.3
+
+### Major Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option
+
+### Minor Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Added the `importMap` option which allows you to tell babel-plugin-emotion what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
+
+### Patch Changes
+
+- Updated dependencies [[`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1), [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1), [`f9feab1a`](https://github.com/emotion-js/emotion/commit/f9feab1a5d1ca88e53c3f7a063be5d5871cc93e8), [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1)]:
+ - babel-plugin-emotion@11.0.0-next.3
+
+## 11.0.0-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]:
+ - babel-plugin-emotion@11.0.0-next.0
+
## 10.2.1
### Patch Changes
diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md
index a7b82dc20..a3505f09a 100644
--- a/packages/babel-preset-css-prop/README.md
+++ b/packages/babel-preset-css-prop/README.md
@@ -1,11 +1,16 @@
# @emotion/babel-preset-css-prop
-> A Babel preset to automatically enable Emotion's css prop when using the classic JSX runtime. If you want to use [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) please do not use this preset but rather just include our [`babel-plugin-emotion`](/packages/babel-plugin-emotion) directly and follow instructions for configuring the new JSX runtimes [here](/docs/css-prop.mdx##babel-preset).
-
-- [Install](#install)
-- [Usage](#usage)
-- [Features](#features)
-- [Options](#options)
+> A Babel preset to automatically enable Emotion's css prop when using the classic JSX runtime. If you want to use [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) please do not use this preset but rather just include our [`@emotion/babel-plugin`](/packages/babel-plugin) directly and follow instructions for configuring the new JSX runtimes [here](/docs/css-prop.mdx##babel-preset).
+
+- [@emotion/babel-preset-css-prop](#emotionbabel-preset-css-prop)
+ - [Install](#install)
+ - [Usage](#usage)
+ - [Via CLI](#via-cli)
+ - [Via Node API](#via-node-api)
+ - [Features](#features)
+ - [Example](#example)
+ - [Options](#options)
+ - [Examples](#examples)
## Install
@@ -15,6 +20,10 @@ yarn add @emotion/babel-preset-css-prop
## Usage
+> Note:
+>
+> This plugin is not compatible with `@babel/plugin-transform-react-inline-elements`. If you use both then your `css` prop styles won't be applied correctly.
+
**.babelrc**
```json
@@ -23,7 +32,7 @@ yarn add @emotion/babel-preset-css-prop
}
```
-`@emotion/babel-preset-css-prop` includes the emotion plugin. The `babel-plugin-emotion` entry should be removed from your config and any options moved to the preset. If you use `@babel/preset-react` or `@babel/preset-typescript` ensure that `@emotion/babel-preset-css-prop` is inserted after them in your babel config.
+`@emotion/babel-preset-css-prop` includes the emotion plugin. The `@emotion/babel-plugin` entry should be removed from your config and any options moved to the preset. If you use `@babel/preset-react` or `@babel/preset-typescript` ensure that `@emotion/babel-preset-css-prop` is inserted after them in your babel config.
```diff
{
@@ -31,16 +40,16 @@ yarn add @emotion/babel-preset-css-prop
+ [
+ "@emotion/babel-preset-css-prop",
+ {
-+ "autoLabel": true,
++ "autoLabel": "dev-only",
+ "labelFormat": "[local]"
+ }
+ ]
+ ],
- "plugins": [
- [
-- "emotion",
+- "@emotion",
- {
-- "autoLabel": true,
+- "autoLabel": "dev-only",
- "labelFormat": "[local]"
- }
- ]
@@ -73,7 +82,7 @@ This preset enables the `css` prop for an entire project via a single entry to t
| Before | `
` | `React.createElement('img', { src: 'avatar.png' })` |
| After | `
` | `jsx('img', { src: 'avatar.png' })` |
-`import { jsx } from '@emotion/core'` is automatically added to the top of files where required.
+`import { jsx } from '@emotion/react'` is automatically added to the top of files where required.
## Example
@@ -96,7 +105,7 @@ const Link = props => (
**Out**
```javascript
-import { jsx as ___EmotionJSX } from '@emotion/core'
+import { jsx as ___EmotionJSX } from '@emotion/react'
function _extends() {
/* babel Object.assign polyfill */
@@ -127,17 +136,17 @@ const Link = props =>
)
```
-_In addition to the custom JSX factory, this example includes `babel-plugin-emotion` transforms that are enabled by default._
+_In addition to the custom JSX factory, this example includes `@emotion/babel-plugin` transforms that are enabled by default._
## Options
-Options for both `babel-plugin-emotion` and `@babel/plugin-transform-react-jsx` are supported and will be forwarded to their respective plugin.
+Options for both `@emotion/babel-plugin` and `@babel/plugin-transform-react-jsx` are supported and will be forwarded to their respective plugin.
> Refer to the plugin's documentation for full option documentation.
>
-> - [`babel-plugin-emotion`](https://emotion.sh/docs/babel)
+> - [`@emotion/babel-plugin`](https://emotion.sh/docs/babel)
>
-> - [`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx)
+> - [`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)
### Examples
@@ -146,7 +155,7 @@ Options for both `babel-plugin-emotion` and `@babel/plugin-transform-react-jsx`
"presets": [
"@emotion/babel-preset-css-prop",
{
- "autoLabel": true,
+ "autoLabel": "dev-only",
"labelFormat": "[local]",
"useBuiltIns": false,
"throwIfNamespace": true
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js
new file mode 100644
index 000000000..54a8dff97
--- /dev/null
+++ b/packages/babel-preset-css-prop/__tests__/__fixtures__/array-css-prop.js
@@ -0,0 +1,3 @@
+import * as React from 'react'
+
+const Component = props =>
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js
deleted file mode 100644
index 8cce98778..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading &&
{'Loading...'} }
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js
deleted file mode 100644
index 8881d1211..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- {label}
-
- ))}
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js
deleted file mode 100644
index 32562407f..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export let Button = props => {
- return (
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js
deleted file mode 100644
index fa7a52a1c..000000000
--- a/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export let Button = () => {
- return (
-
- {'Test'}
-
- )
-}
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap
deleted file mode 100644
index 81f3fb263..000000000
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime-dev.js.snap
+++ /dev/null
@@ -1,207 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`automatic runtime fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading &&
{'Loading...'} }
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/core/jsx-dev-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/core/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = ({
- loading,
- ...props
-}) => {
- return _jsxDEV(_Fragment, {
- children: [_jsxDEV(\\"button\\", {
- css: _ref,
- ...props
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 4,
- columnNumber: 7
- }, this), loading && _jsxDEV(\\"span\\", {
- children: 'Loading...'
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 5,
- columnNumber: 19
- }, this)]
- }, void 0, true);
-};"
-`;
-
-exports[`automatic runtime index 1`] = `
-"import * as React from 'react'
-
-export let Button = props => {
- return (
- <>
-
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/core/jsx-dev-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/core/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-import * as React from 'react';
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = props => {
- return _jsxDEV(_Fragment, {
- children: _jsxDEV(\\"button\\", {
- css: _ref,
- ...props
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 6,
- columnNumber: 7
- }, this)
- }, void 0, false);
-};"
-`;
-
-exports[`automatic runtime key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- {label}
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { createElement as _createElement } from \\"@emotion/core\\";
-import { jsxDEV as _jsxDEV } from \\"@emotion/core/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"1f5afni-Buttons\\",
- styles: \\"color:hotpink;;label:Buttons;\\"
-};
-export let Buttons = ({
- buttons
-}) => {
- return _jsxDEV(\\"div\\", {
- children: buttons.map(({
- id,
- label,
- ...rest
- }) => _createElement(\\"button\\", { ...rest,
- key: id,
- css: _ref,
- __source: {
- fileName: _jsxFileName,
- lineNumber: 5,
- columnNumber: 9
- },
- __self: this
- }, label))
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 5
- }, this);
-};"
-`;
-
-exports[`automatic runtime no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/core/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = props => {
- return _jsxDEV(\\"button\\", {
- css: _ref,
- ...props
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 5
- }, this);
-};"
-`;
-
-exports[`automatic runtime static-children 1`] = `
-"export let Button = () => {
- return (
-
- {'Test'}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsxDEV as _jsxDEV } from \\"@emotion/core/jsx-dev-runtime\\";
-var _jsxFileName = \\"/test/path/to/some/file.js\\";
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = () => {
- return _jsxDEV(\\"button\\", {
- css: _ref,
- children: 'Test'
- }, void 0, false, {
- fileName: _jsxFileName,
- lineNumber: 3,
- columnNumber: 5
- }, this);
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap
deleted file mode 100644
index 31b141ff6..000000000
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/automatic-runtime.js.snap
+++ /dev/null
@@ -1,173 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`automatic runtime fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading &&
{'Loading...'} }
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/core/jsx-runtime\\";
-import { jsxs as _jsxs } from \\"@emotion/core/jsx-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/core/jsx-runtime\\";
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = ({
- loading,
- ...props
-}) => {
- return _jsxs(_Fragment, {
- children: [_jsx(\\"button\\", {
- css: _ref,
- ...props
- }), loading && _jsx(\\"span\\", {
- children: 'Loading...'
- })]
- });
-};"
-`;
-
-exports[`automatic runtime index 1`] = `
-"import * as React from 'react'
-
-export let Button = props => {
- return (
- <>
-
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/core/jsx-runtime\\";
-import { Fragment as _Fragment } from \\"@emotion/core/jsx-runtime\\";
-import * as React from 'react';
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = props => {
- return _jsx(_Fragment, {
- children: _jsx(\\"button\\", {
- css: _ref,
- ...props
- })
- });
-};"
-`;
-
-exports[`automatic runtime key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- {label}
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { createElement as _createElement } from \\"@emotion/core\\";
-import { jsx as _jsx } from \\"@emotion/core/jsx-runtime\\";
-var _ref = {
- name: \\"1f5afni-Buttons\\",
- styles: \\"color:hotpink;;label:Buttons;\\"
-};
-export let Buttons = ({
- buttons
-}) => {
- return _jsx(\\"div\\", {
- children: buttons.map(({
- id,
- label,
- ...rest
- }) => _createElement(\\"button\\", { ...rest,
- key: id,
- css: _ref
- }, label))
- });
-};"
-`;
-
-exports[`automatic runtime no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/core/jsx-runtime\\";
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = props => {
- return _jsx(\\"button\\", {
- css: _ref,
- ...props
- });
-};"
-`;
-
-exports[`automatic runtime static-children 1`] = `
-"export let Button = () => {
- return (
-
- {'Test'}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as _jsx } from \\"@emotion/core/jsx-runtime\\";
-var _ref = {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-};
-export let Button = () => {
- return _jsx(\\"button\\", {
- css: _ref,
- children: 'Test'
- });
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
index 0db790940..2e2e0817e 100644
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
+++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap
@@ -1,42 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`@emotion/babel-preset-css-prop fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading &&
{'Loading...'} }
-
- )
-}
+exports[`@emotion/babel-preset-css-prop array-css-prop 1`] = `
+"import * as React from 'react'
+const Component = props =>
- ↓ ↓ ↓ ↓ ↓ ↓
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+ ↓ ↓ ↓ ↓ ↓ ↓
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
+
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
} : {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyYWdtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImZyYWdtZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGxldCBCdXR0b24gPSAoeyBsb2FkaW5nLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxidXR0b24gY3NzPXt7IGNvbG9yOiAnaG90cGluaycgfX0gey4uLnByb3BzfSAvPlxuICAgICAge2xvYWRpbmcgJiYgPHNwYW4+eydMb2FkaW5nLi4uJ308L3NwYW4+fVxuICAgIDwvPlxuICApXG59XG4iXX0= */\\",
+ name: \\"1p2bh5c-Component\\",
+ styles: \\"color:green;label:Component;\\",
+ map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFycmF5LWNzcy1wcm9wLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJhcnJheS1jc3MtcHJvcC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17W3sgY29sb3I6ICdncmVlbicgfV19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
-export let Button = ({
- loading,
- ...props
-}) => {
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props)), loading && ___EmotionJSX(\\"span\\", null, 'Loading...'));
-};"
+const Component = props => ___EmotionJSX(\\"div\\", _extends({
+ css: _ref
+}, props));"
`;
exports[`@emotion/babel-preset-css-prop index 1`] = `
@@ -63,14 +54,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
import * as React from 'react';
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
} : {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\",
+ name: \\"1v4u9bq-Button\\",
+ styles: \\"color:hotpink;label:Button;\\",
map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1RIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5cbmV4cG9ydCBsZXQgQnV0dG9uID0gcHJvcHMgPT4ge1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIGNzcz17e1xuICAgICAgICAgIGNvbG9yOiAnaG90cGluaydcbiAgICAgICAgfX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgLz5cbiAgICA8Lz5cbiAgKVxufVxuIl19 */\\",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
@@ -81,130 +72,3 @@ export let Button = props => {
}, props)));
};"
`;
-
-exports[`@emotion/babel-preset-css-prop key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- {label}
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1f5afni-Buttons\\",
- styles: \\"color:hotpink;;label:Buttons;\\"
-} : {
- name: \\"1f5afni-Buttons\\",
- styles: \\"color:hotpink;;label:Buttons;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleS1hZnRlci1zcHJlYWQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT1UiLCJmaWxlIjoia2V5LWFmdGVyLXNwcmVhZC5qcyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBsZXQgQnV0dG9ucyA9ICh7IGJ1dHRvbnMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICB7YnV0dG9ucy5tYXAoKHsgaWQsIGxhYmVsLCAuLi5yZXN0IH0pID0+IChcbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgY3NzPXt7XG4gICAgICAgICAgICBjb2xvcjogJ2hvdHBpbmsnXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9idXR0b24+XG4gICAgICApKX1cbiAgICA8L2Rpdj5cbiAgKVxufVxuIl19 */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Buttons = ({
- buttons
-}) => {
- return ___EmotionJSX(\\"div\\", null, buttons.map(({
- id,
- label,
- ...rest
- }) => ___EmotionJSX(\\"button\\", _extends({}, rest, {
- key: id,
- css: _ref
- }), label)));
-};"
-`;
-
-exports[`@emotion/babel-preset-css-prop no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-} : {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vLXN0YXRpYy1jaGlsZHJlbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHTSIsImZpbGUiOiJuby1zdGF0aWMtY2hpbGRyZW4uanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgbGV0IEJ1dHRvbiA9IHByb3BzID0+IHtcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6ICdob3RwaW5rJ1xuICAgICAgfX1cbiAgICAgIHsuLi5wcm9wc31cbiAgICAvPlxuICApXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Button = props => {
- return ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props));
-};"
-`;
-
-exports[`@emotion/babel-preset-css-prop static-children 1`] = `
-"export let Button = () => {
- return (
-
- {'Test'}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
-
-var _ref = process.env.NODE_ENV === \\"production\\" ? {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\"
-} : {
- name: \\"1q24rv0-Button\\",
- styles: \\"color:hotpink;;label:Button;\\",
- map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1jaGlsZHJlbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHTSIsImZpbGUiOiJzdGF0aWMtY2hpbGRyZW4uanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgbGV0IEJ1dHRvbiA9ICgpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6ICdob3RwaW5rJ1xuICAgICAgfX1cbiAgICA+XG4gICAgICB7J1Rlc3QnfVxuICAgIDwvYnV0dG9uPlxuICApXG59XG4iXX0= */\\",
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-export let Button = () => {
- return ___EmotionJSX(\\"button\\", {
- css: _ref
- }, 'Test');
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
index 8f1df7c0d..87d320f5b 100644
--- a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
+++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap
@@ -1,34 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`options are used fragment 1`] = `
-"export let Button = ({ loading, ...props }) => {
- return (
- <>
-
- {loading &&
{'Loading...'} }
-
- )
-}
+exports[`options are used array-css-prop 1`] = `
+"import * as React from 'react'
+const Component = props =>
- ↓ ↓ ↓ ↓ ↓ ↓
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
+ ↓ ↓ ↓ ↓ ↓ ↓
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var _ref = {
- name: \\"s1pogm-__fixtures__--fragment--Button\\",
- styles: \\"color:hotpink;;label:__fixtures__--fragment--Button;\\"
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"v98kxt\\",
+ styles: \\"color:green\\"
+} : {
+ name: \\"vplqcj-__fixtures__--array-css-prop--Component\\",
+ styles: \\"color:green;label:__fixtures__--array-css-prop--Component;\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
-export let Button = ({
- loading,
- ...props
-}) => {
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props)), loading && ___EmotionJSX(\\"span\\", null, 'Loading...'));
-};"
+
+const Component = props => ___EmotionJSX(\\"div\\", _extends({
+ css: _ref
+}, props));"
`;
exports[`options are used index 1`] = `
@@ -52,117 +50,23 @@ export let Button = props => {
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
import * as React from 'react';
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-var _ref = {
- name: \\"1a7y9g-__fixtures__--__fixtures__--Button\\",
- styles: \\"color:hotpink;;label:__fixtures__--__fixtures__--Button;\\"
+import { jsx as ___EmotionJSX } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+ name: \\"3sn2xs\\",
+ styles: \\"color:hotpink\\"
+} : {
+ name: \\"17qglar-__fixtures__--__fixtures__--Button\\",
+ styles: \\"color:hotpink;label:__fixtures__--__fixtures__--Button;\\",
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
+
export let Button = props => {
return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(\\"button\\", _extends({
css: _ref
}, props)));
};"
`;
-
-exports[`options are used key-after-spread 1`] = `
-"export let Buttons = ({ buttons }) => {
- return (
-
- {buttons.map(({ id, label, ...rest }) => (
-
- {label}
-
- ))}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = {
- name: \\"1fsxnz6-__fixtures__--key-after-spread--Buttons\\",
- styles: \\"color:hotpink;;label:__fixtures__--key-after-spread--Buttons;\\"
-};
-export let Buttons = ({
- buttons
-}) => {
- return ___EmotionJSX(\\"div\\", null, buttons.map(({
- id,
- label,
- ...rest
- }) => ___EmotionJSX(\\"button\\", _extends({}, rest, {
- key: id,
- css: _ref
- }), label)));
-};"
-`;
-
-exports[`options are used no-static-children 1`] = `
-"export let Button = props => {
- return (
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = {
- name: \\"1zt6yv-__fixtures__--no-static-children--Button\\",
- styles: \\"color:hotpink;;label:__fixtures__--no-static-children--Button;\\"
-};
-export let Button = props => {
- return ___EmotionJSX(\\"button\\", _extends({
- css: _ref
- }, props));
-};"
-`;
-
-exports[`options are used static-children 1`] = `
-"export let Button = () => {
- return (
-
- {'Test'}
-
- )
-}
-
-
- ↓ ↓ ↓ ↓ ↓ ↓
-
-import { jsx as ___EmotionJSX } from \\"@emotion/core\\";
-var _ref = {
- name: \\"1adtr1x-__fixtures__--static-children--Button\\",
- styles: \\"color:hotpink;;label:__fixtures__--static-children--Button;\\"
-};
-export let Button = () => {
- return ___EmotionJSX(\\"button\\", {
- css: _ref
- }, 'Test');
-};"
-`;
diff --git a/packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js b/packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js
deleted file mode 100644
index 552a88294..000000000
--- a/packages/babel-preset-css-prop/__tests__/automatic-runtime-dev.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import babelTester from 'babel-tester'
-import preset from '@emotion/babel-preset-css-prop'
-
-babelTester('automatic runtime', __dirname, {
- filename: '/test/path/to/some/file.js',
- presets: [
- [
- preset,
- {
- sourceMap: false,
- runtime: 'automatic',
- development: true
- }
- ]
- ]
-})
diff --git a/packages/babel-preset-css-prop/__tests__/automatic-runtime.js b/packages/babel-preset-css-prop/__tests__/automatic-runtime.js
deleted file mode 100644
index f6c2836cf..000000000
--- a/packages/babel-preset-css-prop/__tests__/automatic-runtime.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import babelTester from 'babel-tester'
-import preset from '@emotion/babel-preset-css-prop'
-
-babelTester('automatic runtime', __dirname, {
- presets: [
- [
- preset,
- {
- sourceMap: false,
- runtime: 'automatic'
- }
- ]
- ]
-})
diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json
index 93e8fd981..51562073d 100644
--- a/packages/babel-preset-css-prop/package.json
+++ b/packages/babel-preset-css-prop/package.json
@@ -1,17 +1,19 @@
{
"name": "@emotion/babel-preset-css-prop",
- "version": "10.2.1",
+ "version": "11.0.0",
"description": "A babel preset to automatically enable emotion's css prop",
- "main": "dist/babel-preset-css-prop.cjs.js",
- "module": "dist/babel-preset-css-prop.esm.js",
+ "main": "dist/emotion-babel-preset-css-prop.cjs.js",
+ "module": "dist/emotion-babel-preset-css-prop.esm.js",
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop",
+ "scripts": {
+ "test:typescript": "exit 0"
+ },
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.1",
- "@babel/plugin-transform-react-jsx-development": "^7.12.1",
- "@babel/runtime": "^7.5.5",
- "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5",
- "babel-plugin-emotion": "^10.0.27"
+ "@babel/runtime": "^7.7.2",
+ "@emotion/babel-plugin": "^11.0.0",
+ "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5"
},
"peerDependencies": {
"@babel/core": "^7.0.0"
@@ -24,6 +26,6 @@
"dist"
],
"devDependencies": {
- "@babel/core": "^7.5.5"
+ "@babel/core": "^7.7.2"
}
}
diff --git a/packages/babel-preset-css-prop/src/index.js b/packages/babel-preset-css-prop/src/index.js
index 22a9d891f..c8082dda8 100644
--- a/packages/babel-preset-css-prop/src/index.js
+++ b/packages/babel-preset-css-prop/src/index.js
@@ -1,58 +1,52 @@
import jsx from '@babel/plugin-transform-react-jsx'
-import jsxDev from '@babel/plugin-transform-react-jsx-development'
import pragmatic from '@emotion/babel-plugin-jsx-pragmatic'
-import emotion from 'babel-plugin-emotion'
+import emotion from '@emotion/babel-plugin'
let pragmaName = '___EmotionJSX'
// pull out the emotion options and pass everything else to the jsx transformer
// this means if @babel/plugin-transform-react-jsx adds more options, it'll just work
-// and if babel-plugin-emotion adds more options we can add them since this lives in
-// the same repo as babel-plugin-emotion
+// and if @emotion/babel-plugin adds more options we can add them since this lives in
+// the same repo as @emotion/babel-plugin
export default (
api,
- {
- pragma,
- sourceMap,
- autoLabel,
- labelFormat,
- instances,
- development = false,
- ...options
- } = {}
+ { pragma, sourceMap, autoLabel, labelFormat, importMap, ...options } = {}
) => {
if (options.runtime) {
- console.warn(
- '`runtime` option has been deprecated. It still works and will continue to work in Emotion 10 but we have found out that including JSX plugin twice in the Babel configuration leads to hard to debug problems and it\'s not always obvious that some presets include it. If you want to configure `runtime: "automatic"` just replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `babel-plugin-emotion`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset'
+ throw new Error(
+ 'The `runtime` option has been removed. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset'
)
}
return {
plugins: [
- options.runtime !== 'automatic' && [
+ [
pragmatic,
- { export: 'jsx', module: '@emotion/core', import: pragmaName }
+ {
+ export: 'jsx',
+ module: '@emotion/react',
+ import: pragmaName
+ }
+ ],
+ [
+ jsx,
+ {
+ pragma: pragmaName,
+ pragmaFrag: 'React.Fragment',
+ ...options
+ }
],
- options.runtime === 'automatic'
- ? [
- development ? jsxDev : jsx,
- { importSource: '@emotion/core', ...options }
- ]
- : [
- jsx,
- { pragma: pragmaName, pragmaFrag: 'React.Fragment', ...options }
- ],
[
emotion,
{
sourceMap,
autoLabel,
labelFormat,
- instances,
- cssPropOptimization: true
+ cssPropOptimization: true,
+ importMap
}
]
- ].filter(Boolean)
+ ]
}
}
diff --git a/packages/cache/CHANGELOG.md b/packages/cache/CHANGELOG.md
index babdc66b3..a2f3254ed 100644
--- a/packages/cache/CHANGELOG.md
+++ b/packages/cache/CHANGELOG.md
@@ -1,5 +1,158 @@
# @emotion/cache
+## 11.0.0
+
+### Major Changes
+
+- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - From now on `key` option is required. Please make sure it's unique (and not equal to `"css"`) as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.
+
+* [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
+
+ It has been completely rewritten and comes with some breaking changes. The most notable ones that might affect Emotion users are:
+
+ - plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
+ - vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
+ - the prefixer is now just a plugin which happens to be included in the default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that.
+ - `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.
+
+### Minor Changes
+
+- [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c) [#1473](https://github.com/emotion-js/emotion/pull/1473) Thanks [@jcharry](https://github.com/jcharry)! - The new `prepend` option can make Emotion add style tags at the beginning of the specified DOM container instead of the end.
+
+### Patch Changes
+
+- [`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b) [#1998](https://github.com/emotion-js/emotion/pull/1998) Thanks [@Andarist](https://github.com/Andarist)! - Styles are now correctly extracted from the correct cache (`key`-sensitive) on the server.
+
+* [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.
+
+- [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0) [#1997](https://github.com/emotion-js/emotion/pull/1997) Thanks [@Andarist](https://github.com/Andarist)! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used `key`s from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this:
+
+ ```js
+ import styled from '@emotion/styled/macro'
+ import { render } from '@testing-library/react'
+ const Div = styled.div``
+ test('foo', () => {
+ const { container } = render(
)
+ expect(container).toMatchSnapshot()
+ })
+ ```
+
+- Updated dependencies [[`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d), [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c), [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
+ - @emotion/sheet@1.0.0
+ - @emotion/utils@1.0.0
+
+## 11.0.0-rc.0
+
+### Major Changes
+
+- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
+
+### Patch Changes
+
+- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
+ - @emotion/sheet@1.0.0-rc.0
+ - @emotion/utils@1.0.0-rc.0
+
+## 11.0.0-next.19
+
+### Patch Changes
+
+- [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d) [#2028](https://github.com/emotion-js/emotion/pull/2028) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with Emotion messing up style elements already processed by previously initialized Emotion copy.
+
+- Updated dependencies [[`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d)]:
+ - @emotion/sheet@1.0.0-next.5
+
+## 11.0.0-next.18
+
+### Patch Changes
+
+- [`19df60b8`](https://github.com/emotion-js/emotion/commit/19df60b8382814f241f909e1f4cb98fe19e72a4a) [#2015](https://github.com/emotion-js/emotion/pull/2015) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with rules nested in orphaned pseudo selectors not being adjusted correctly.
+
+## 11.0.0-next.16
+
+### Patch Changes
+
+- [`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b) [#1998](https://github.com/emotion-js/emotion/pull/1998) Thanks [@Andarist](https://github.com/Andarist)! - Styles are now correctly extracted from the correct cache (`key`-sensitive) on the server.
+
+* [`dfe98028`](https://github.com/emotion-js/emotion/commit/dfe98028451a27c5190fa1ba138e51ef3d6d9be1) [#2003](https://github.com/emotion-js/emotion/pull/2003) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with orphaned pseudo selectors (e.g. `:hover` - where `&:hover`, `div:hover`, etc are not considered orphaned) having the context selector (the one computed based on all ancestor levels selectors) doubled in a descendant at-rule.
+
+- [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0) [#1997](https://github.com/emotion-js/emotion/pull/1997) Thanks [@Andarist](https://github.com/Andarist)! - From now on an empty rule will get inserted into the DOM in non-production environments if it gets created by the user. This helps to grab used `key`s from the (JS)DOM even for caches that have not inserted any actual rules to the document yet. It allows `@emotion/jest` to find those and serialize Emotion classes properly in situations like this:
+
+ ```js
+ import styled from '@emotion/styled/macro'
+ import { render } from '@testing-library/react'
+ const Div = styled.div``
+ test('foo', () => {
+ const { container } = render(
)
+ expect(container).toMatchSnapshot()
+ })
+ ```
+
+- Updated dependencies [[`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0)]:
+ - @emotion/utils@1.0.0-next.1
+ - @emotion/sheet@1.0.0-next.4
+
+## 11.0.0-next.15
+
+### Patch Changes
+
+- Updated dependencies [[`dc1a0c5e`](https://github.com/emotion-js/emotion/commit/dc1a0c5ed78b27fb7ce49b6296f2ca8631654cd1)]:
+ - @emotion/sheet@1.0.0-next.3
+
+## 11.0.0-next.13
+
+### Major Changes
+
+- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
+
+ It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
+
+ - plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
+ - vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
+ - Prefixer is now just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that.
+ - `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.
+
+### Patch Changes
+
+- Updated dependencies [[`91046a8c`](https://github.com/emotion-js/emotion/commit/91046a8c188327a65daac61583ef3c4458f30afb), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
+ - @emotion/sheet@1.0.0-next.2
+ - @emotion/utils@1.0.0-next.0
+
+## 11.0.0-next.12
+
+### Major Changes
+
+- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - From now on `key` option is required. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.
+
+### Patch Changes
+
+- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with SSRed styles causing a React rehydration mismatch between server & client when cache was created in render.
+
+## 11.0.0-next.10
+
+### Patch Changes
+
+- [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Use sheet's `rehydrate` method for SSRed styles which inserts rehydrated styles at correct position when used in combination with `prepend` option.
+- Updated dependencies [[`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71)]:
+ - @emotion/sheet@0.10.0-next.1
+
+## 11.0.0-next.6
+
+### Minor Changes
+
+- [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c) [#1473](https://github.com/emotion-js/emotion/pull/1473) Thanks [@jcharry](https://github.com/jcharry)! - Accept new `prepend` option to allow for adding style tags at the beginning of the specified DOM container.
+
+### Patch Changes
+
+- Updated dependencies [[`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c)]:
+ - @emotion/sheet@0.10.0-next.0
+
+## 11.0.0-next.0
+
+### Major Changes
+
+- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number
+
## 10.0.29
### Patch Changes
diff --git a/packages/cache/README.md b/packages/cache/README.md
index 0b94e1ffe..2e051ebec 100644
--- a/packages/cache/README.md
+++ b/packages/cache/README.md
@@ -35,19 +35,17 @@ A nonce that will be set on each style tag that emotion inserts for [Content Sec
### `stylisPlugins`
-`Function` | `Array
`
+``Array`
-A Stylis plugin or plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#plugins). This can be used for many purposes such as RTL.
+A Stylis plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#middleware). This can be used for many purposes such as RTL.
-### `prefix`
-
-`boolean` | `Function`, defaults to `true`
-
-Allows changing Stylis's vendor prefixing settings. It can be a boolean or a function to dynamically set which properties are prefixed. [More information can be found in the Stylis docs](https://github.com/thysultan/stylis.js#vendor-prefixing).
+> Note:
+>
+> Prefixer is just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that (`import { prefixer } from 'stylis'`);
### `key`
-`string`, defaults to `"css"`
+`string`,
The prefix before class names. It will also be set as the value of the `data-emotion` attribute on the style tags that emotion inserts and it's used in the attribute name that marks style elements in `renderStylesToString` and `renderStylesToNodeStream`. This is **required if using multiple emotion caches in the same app**.
@@ -56,3 +54,9 @@ The prefix before class names. It will also be set as the value of the `data-emo
`HTMLElement`
A DOM node that emotion will insert all of its style tags into. This is useful for inserting styles into iframes.
+
+### `prepend`
+
+`boolean`
+
+A string representing whether to prepend rather than append style tags into the specified container DOM node.
diff --git a/packages/cache/__tests__/__snapshots__/hydration.js.snap b/packages/cache/__tests__/__snapshots__/hydration.js.snap
index ef0840185..240d5b44f 100644
--- a/packages/cache/__tests__/__snapshots__/hydration.js.snap
+++ b/packages/cache/__tests__/__snapshots__/hydration.js.snap
@@ -4,7 +4,8 @@ exports[`it works 1`] = `
@@ -12,3 +13,24 @@ exports[`it works 1`] = `
`;
+
+exports[`rehydrated styles to head can be flushed 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`rehydrated styles to head can be flushed 2`] = `
+
+
+
+
+`;
diff --git a/packages/cache/__tests__/hydration.js b/packages/cache/__tests__/hydration.js
index 80900b5a6..2119d48f2 100644
--- a/packages/cache/__tests__/hydration.js
+++ b/packages/cache/__tests__/hydration.js
@@ -3,13 +3,35 @@ import { safeQuerySelector } from 'test-utils'
import hashString from '@emotion/hash'
import createCache from '@emotion/cache'
+beforeEach(() => {
+ safeQuerySelector('head').innerHTML = ''
+ safeQuerySelector('body').innerHTML = ''
+})
+
test('it works', () => {
let css = `color:hotpink;`
let hash = hashString(css)
safeQuerySelector(
'body'
- ).innerHTML = ``
- let cache = createCache()
+ ).innerHTML = ``
+ let cache = createCache({ key: 'css' })
expect(cache.inserted).toEqual({ [hash]: true })
expect(document.documentElement).toMatchSnapshot()
})
+
+test('rehydrated styles to head can be flushed', () => {
+ let css = `color:hotpink;`
+ let hash = hashString(css)
+ safeQuerySelector(
+ 'head'
+ ).innerHTML = ``
+
+ // this moves emotion style tags at initialization time
+ jest.resetModules()
+ require('@emotion/react')
+
+ let cache = createCache({ key: 'emo' })
+ expect(document.documentElement).toMatchSnapshot()
+ cache.sheet.flush()
+ expect(document.documentElement).toMatchSnapshot()
+})
diff --git a/packages/cache/package.json b/packages/cache/package.json
index 97eeab600..e82185cbb 100644
--- a/packages/cache/package.json
+++ b/packages/cache/package.json
@@ -1,12 +1,12 @@
{
"name": "@emotion/cache",
- "version": "10.0.29",
+ "version": "11.0.0",
"description": "emotion's cache",
- "main": "dist/cache.cjs.js",
- "module": "dist/cache.esm.js",
+ "main": "dist/emotion-cache.cjs.js",
+ "module": "dist/emotion-cache.esm.js",
"browser": {
- "./dist/cache.cjs.js": "./dist/cache.browser.cjs.js",
- "./dist/cache.esm.js": "./dist/cache.browser.esm.js"
+ "./dist/emotion-cache.cjs.js": "./dist/emotion-cache.browser.cjs.js",
+ "./dist/emotion-cache.esm.js": "./dist/emotion-cache.browser.esm.js"
},
"types": "types/index.d.ts",
"license": "MIT",
@@ -15,13 +15,14 @@
"test:typescript": "dtslint types"
},
"dependencies": {
- "@emotion/sheet": "0.9.4",
- "@emotion/stylis": "0.8.5",
- "@emotion/utils": "0.11.3",
- "@emotion/weak-memoize": "0.2.5"
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/sheet": "^1.0.0",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "stylis": "^4.0.3"
},
"devDependencies": {
- "@emotion/hash": "0.8.0",
+ "@emotion/hash": "*",
"dtslint": "^0.3.0"
},
"publishConfig": {
@@ -30,6 +31,6 @@
"files": [
"src",
"dist",
- "types"
+ "types/*.d.ts"
]
}
diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js
index a8caad7a1..36946ee65 100644
--- a/packages/cache/src/index.js
+++ b/packages/cache/src/index.js
@@ -1,58 +1,70 @@
// @flow
import { StyleSheet } from '@emotion/sheet'
import { type EmotionCache, type SerializedStyles } from '@emotion/utils'
-import Stylis from '@emotion/stylis'
+import {
+ serialize,
+ compile,
+ middleware,
+ rulesheet,
+ stringify,
+ prefixer,
+ COMMENT
+} from 'stylis'
import weakMemoize from '@emotion/weak-memoize'
-import { Sheet, removeLabel, ruleSheet } from './stylis-plugins'
+import memoize from '@emotion/memoize'
+import {
+ compat,
+ removeLabel,
+ createUnsafeSelectorsAlarm,
+ incorrectImportAlarm
+} from './stylis-plugins'
import type { StylisPlugin } from './types'
let isBrowser = typeof document !== 'undefined'
-export type PrefixOption =
- | boolean
- | ((key: string, value: string, context: 1 | 2 | 3) => boolean)
-type StylisPlugins = StylisPlugin[] | StylisPlugin
-
export type Options = {
nonce?: string,
- stylisPlugins?: StylisPlugins,
- prefix?: PrefixOption,
- key?: string,
+ stylisPlugins?: StylisPlugin[],
+ key: string,
container?: HTMLElement,
- speedy?: boolean
+ speedy?: boolean,
+ prepend?: boolean
}
-let rootServerStylisCache = {}
-
let getServerStylisCache = isBrowser
? undefined
- : weakMemoize(() => {
- let getCache = weakMemoize(() => ({}))
- let prefixTrueCache = {}
- let prefixFalseCache = {}
- return prefix => {
- if (prefix === undefined || prefix === true) {
- return prefixTrueCache
- }
- if (prefix === false) {
- return prefixFalseCache
- }
- return getCache(prefix)
- }
- })
+ : weakMemoize(() =>
+ memoize(() => {
+ let cache = {}
+ return name => cache[name]
+ })
+ )
-let createCache = (options?: Options): EmotionCache => {
- if (options === undefined) options = {}
- let key = options.key || 'css'
- let stylisOptions
+const defaultStylisPlugins = [prefixer]
- if (options.prefix !== undefined) {
- stylisOptions = {
- prefix: options.prefix
- }
+let createCache = (options: Options): EmotionCache => {
+ let key = options.key
+
+ if (process.env.NODE_ENV !== 'production' && !key) {
+ throw new Error(
+ "You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" +
+ `If multiple caches share the same key they might "fight" for each other's style elements.`
+ )
+ }
+
+ if (isBrowser && key === 'css') {
+ const ssrStyles = document.querySelectorAll(
+ `style[data-emotion]:not([data-s])`
+ )
+ // get SSRed styles out of the way of React's hydration
+ // document.head is a safe place to move them to
+ Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => {
+ ;((document.head: any): HTMLHeadElement).appendChild(node)
+ node.setAttribute('data-s', '')
+ })
}
- let stylis = new Stylis(stylisOptions)
+ const stylisPlugins = options.stylisPlugins || defaultStylisPlugins
if (process.env.NODE_ENV !== 'production') {
// $FlowFixMe
@@ -65,21 +77,26 @@ let createCache = (options?: Options): EmotionCache => {
let inserted = {}
// $FlowFixMe
let container: HTMLElement
+ const nodesToHydrate = []
if (isBrowser) {
- container = options.container || document.head
-
- const nodes = document.querySelectorAll(`style[data-emotion-${key}]`)
-
- Array.prototype.forEach.call(nodes, (node: HTMLStyleElement) => {
- const attrib = node.getAttribute(`data-emotion-${key}`)
- // $FlowFixMe
- attrib.split(' ').forEach(id => {
- inserted[id] = true
- })
- if (node.parentNode !== container) {
- container.appendChild(node)
+ container = options.container || ((document.head: any): HTMLHeadElement)
+
+ Array.prototype.forEach.call(
+ document.querySelectorAll(`style[data-emotion]`),
+ (node: HTMLStyleElement) => {
+ const attrib = ((node.getAttribute(`data-emotion`): any): string).split(
+ ' '
+ )
+ if (attrib[0] !== key) {
+ return
+ }
+ // $FlowFixMe
+ for (let i = 1; i < attrib.length; i++) {
+ inserted[attrib[i]] = true
+ }
+ nodesToHydrate.push(node)
}
- })
+ )
}
let insert: (
@@ -89,8 +106,45 @@ let createCache = (options?: Options): EmotionCache => {
shouldCache: boolean
) => string | void
+ const omnipresentPlugins = [compat, removeLabel]
+
+ if (process.env.NODE_ENV !== 'production') {
+ omnipresentPlugins.push(
+ createUnsafeSelectorsAlarm({
+ get compat() {
+ return cache.compat
+ }
+ }),
+ incorrectImportAlarm
+ )
+ }
+
if (isBrowser) {
- stylis.use(options.stylisPlugins)(ruleSheet)
+ let currentSheet
+
+ const finalizingPlugins = [
+ stringify,
+ process.env.NODE_ENV !== 'production'
+ ? element => {
+ if (!element.root) {
+ if (element.return) {
+ currentSheet.insert(element.return)
+ } else if (element.value && element.type !== COMMENT) {
+ // insert empty rule in non-production environments
+ // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet
+ currentSheet.insert(`${element.value}{}`)
+ }
+ }
+ }
+ : rulesheet(rule => {
+ currentSheet.insert(rule)
+ })
+ ]
+
+ const serializer = middleware(
+ omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)
+ )
+ const stylis = styles => serialize(compile(styles), serializer)
insert = (
selector: string,
@@ -98,38 +152,39 @@ let createCache = (options?: Options): EmotionCache => {
sheet: StyleSheet,
shouldCache: boolean
): void => {
- let name = serialized.name
- Sheet.current = sheet
+ currentSheet = sheet
if (
process.env.NODE_ENV !== 'production' &&
serialized.map !== undefined
) {
- let map = serialized.map
- Sheet.current = {
+ currentSheet = {
insert: (rule: string) => {
- sheet.insert(rule + map)
+ sheet.insert(rule + ((serialized.map: any): string))
}
}
}
- stylis(selector, serialized.styles)
+
+ stylis(selector ? `${selector}{${serialized.styles}}` : serialized.styles)
+
if (shouldCache) {
- cache.inserted[name] = true
+ cache.inserted[serialized.name] = true
}
}
} else {
- stylis.use(removeLabel)
- let serverStylisCache = rootServerStylisCache
- if (options.stylisPlugins || options.prefix !== undefined) {
- stylis.use(options.stylisPlugins)
- // $FlowFixMe
- serverStylisCache = getServerStylisCache(
- options.stylisPlugins || rootServerStylisCache
- )(options.prefix)
- }
+ const finalizingPlugins = [stringify]
+ const serializer = middleware(
+ omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)
+ )
+ const stylis = styles => serialize(compile(styles), serializer)
+
+ // $FlowFixMe
+ let serverStylisCache = getServerStylisCache(stylisPlugins)(key)
let getRules = (selector: string, serialized: SerializedStyles): string => {
let name = serialized.name
if (serverStylisCache[name] === undefined) {
- serverStylisCache[name] = stylis(selector, serialized.styles)
+ serverStylisCache[name] = stylis(
+ selector ? `${selector}{${serialized.styles}}` : serialized.styles
+ )
}
return serverStylisCache[name]
}
@@ -175,78 +230,23 @@ let createCache = (options?: Options): EmotionCache => {
}
}
- if (process.env.NODE_ENV !== 'production') {
- // https://esbench.com/bench/5bf7371a4cd7e6009ef61d0a
- const commentStart = /\/\*/g
- const commentEnd = /\*\//g
-
- stylis.use((context, content) => {
- switch (context) {
- case -1: {
- while (commentStart.test(content)) {
- commentEnd.lastIndex = commentStart.lastIndex
-
- if (commentEnd.test(content)) {
- commentStart.lastIndex = commentEnd.lastIndex
- continue
- }
-
- throw new Error(
- 'Your styles have an unterminated comment ("/*" without corresponding "*/").'
- )
- }
-
- commentStart.lastIndex = 0
- break
- }
- }
- })
-
- stylis.use((context, content, selectors) => {
- switch (context) {
- case -1: {
- const flag =
- 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'
- const unsafePseudoClasses = content.match(
- /(:first|:nth|:nth-last)-child/g
- )
-
- if (unsafePseudoClasses && cache.compat !== true) {
- unsafePseudoClasses.forEach(unsafePseudoClass => {
- const ignoreRegExp = new RegExp(
- `${unsafePseudoClass}.*\\/\\* ${flag} \\*\\/`
- )
- const ignore = ignoreRegExp.test(content)
-
- if (unsafePseudoClass && !ignore) {
- console.error(
- `The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${
- unsafePseudoClass.split('-child')[0]
- }-of-type".`
- )
- }
- })
- }
-
- break
- }
- }
- })
- }
-
const cache: EmotionCache = {
key,
sheet: new StyleSheet({
key,
- container,
+ container: ((container: any): HTMLElement),
nonce: options.nonce,
- speedy: options.speedy
+ speedy: options.speedy,
+ prepend: options.prepend
}),
nonce: options.nonce,
inserted,
registered: {},
insert
}
+
+ cache.sheet.hydrate(nodesToHydrate)
+
return cache
}
diff --git a/packages/cache/src/stylis-plugins.js b/packages/cache/src/stylis-plugins.js
index c27e1bf90..1e8db8c0c 100644
--- a/packages/cache/src/stylis-plugins.js
+++ b/packages/cache/src/stylis-plugins.js
@@ -1,89 +1,193 @@
-// @flow
-// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet
-// inlined to avoid umd wrapper and peerDep warnings/installing stylis
-// since we use stylis after closure compiler
+import {
+ compile,
+ alloc,
+ dealloc,
+ next,
+ delimit,
+ token,
+ char,
+ from,
+ identifier,
+ peek,
+ position
+} from 'stylis'
-import type { StylisPlugin } from './types'
+const last = arr => (arr.length ? arr[arr.length - 1] : null)
-const delimiter = '/*|*/'
-const needle = delimiter + '}'
+const toRules = (parsed, points) => {
+ // pretend we've started with a comma
+ let index = -1
+ let character = 44
-function toSheet(block) {
- if (block) {
- Sheet.current.insert(block + '}')
- }
-}
+ do {
+ switch (token(character)) {
+ case 0:
+ // &\f
+ if (character === 38 && peek() === 12) {
+ // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
+ // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
+ // and when it should just concatenate the outer and inner selectors
+ // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
+ points[index] = 1
+ }
+ parsed[index] += identifier(position - 1)
+ break
+ case 2:
+ parsed[index] += delimit(character)
+ break
+ case 4:
+ // comma
+ if (character === 44) {
+ // colon
+ parsed[++index] = peek() === 58 ? '&\f' : ''
+ points[index] = parsed[index].length
+ break
+ }
+ // fallthrough
+ default:
+ parsed[index] += from(character)
+ }
+ } while ((character = next()))
-export let Sheet: { current: { +insert: string => void } } = {
- current: (null: any)
+ return parsed
}
-export let ruleSheet: StylisPlugin = (
- context,
- content,
- selectors,
- parents,
- line,
- column,
- length,
- ns,
- depth,
- at
-) => {
- switch (context) {
- // property
- case 1: {
- switch (content.charCodeAt(0)) {
- case 64: {
- // @import
- Sheet.current.insert(content + ';')
- return ''
- }
- // charcode for l
- case 108: {
- // charcode for b
- // this ignores label
- if (content.charCodeAt(2) === 98) {
- return ''
- }
- }
- }
- break
+const getRules = (value, points) => dealloc(toRules(alloc(value), points))
+
+// WeakSet would be more appropriate, but only WeakMap is supported in IE11
+const fixedElements = /* #__PURE__ */ new WeakMap()
+
+export let compat = element => {
+ if (
+ element.type !== 'rule' ||
+ !element.parent ||
+ // .length indicates if this rule contains pseudo or not
+ !element.length
+ ) {
+ return
+ }
+
+ let { value, parent } = element
+ let isImplicitRule =
+ element.column === parent.column && element.line === parent.line
+
+ while (parent.type !== 'rule') {
+ parent = parent.parent
+ }
+
+ // short-circuit for the simplest case
+ if (
+ element.props.length === 1 &&
+ value.charCodeAt(0) !== 58 /* colon */ &&
+ !fixedElements.get(parent)
+ ) {
+ return
+ }
+
+ // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
+ // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
+ if (isImplicitRule) {
+ return
+ }
+
+ fixedElements.set(element, true)
+
+ const points = []
+ const rules = getRules(value, points)
+ const parentRules = parent.props
+
+ for (let i = 0, k = 0; i < rules.length; i++) {
+ for (let j = 0; j < parentRules.length; j++, k++) {
+ element.props[k] = points[i]
+ ? rules[i].replace(/&\f/g, parentRules[j])
+ : `${parentRules[j]} ${rules[i]}`
}
- // selector
- case 2: {
- if (ns === 0) return content + delimiter
- break
+ }
+}
+
+export let removeLabel = element => {
+ if (element.type === 'decl') {
+ var value = element.value
+ if (
+ // charcode for l
+ value.charCodeAt(0) === 108 &&
+ // charcode for b
+ value.charCodeAt(2) === 98
+ ) {
+ // this ignores label
+ element.return = ''
+ element.value = ''
}
- // at-rule
- case 3: {
- switch (ns) {
- // @font-face, @page
- case 102:
- case 112: {
- Sheet.current.insert(selectors[0] + content)
- return ''
- }
- default: {
- return content + (at === 0 ? delimiter : '')
- }
- }
+ }
+}
+
+const ignoreFlag =
+ 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'
+
+const isIgnoringComment = element =>
+ !!element &&
+ element.type === 'comm' &&
+ element.children.indexOf(ignoreFlag) > -1
+
+export let createUnsafeSelectorsAlarm = cache => (element, index, children) => {
+ if (element.type !== 'rule') return
+
+ const unsafePseudoClasses = element.value.match(
+ /(:first|:nth|:nth-last)-child/g
+ )
+
+ if (unsafePseudoClasses && cache.compat !== true) {
+ const prevElement = index > 0 ? children[index - 1] : null
+ if (prevElement && isIgnoringComment(last(prevElement.children))) {
+ return
}
- case -2: {
- content.split(needle).forEach(toSheet)
+ unsafePseudoClasses.forEach(unsafePseudoClass => {
+ console.error(
+ `The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${
+ unsafePseudoClass.split('-child')[0]
+ }-of-type".`
+ )
+ })
+ }
+}
+
+let isImportRule = element =>
+ element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64
+
+const isPrependedWithRegularRules = (index, children) => {
+ for (let i = index - 1; i >= 0; i--) {
+ if (!isImportRule(children[i])) {
+ return true
}
}
+ return false
}
-export let removeLabel: StylisPlugin = (context, content) => {
- if (
- context === 1 &&
- // charcode for l
- content.charCodeAt(0) === 108 &&
- // charcode for b
- content.charCodeAt(2) === 98
- // this ignores label
- ) {
- return ''
+// use this to remove incorrect elements from further processing
+// so they don't get handed to the `sheet` (or anything else)
+// as that could potentially lead to additional logs which in turn could be overhelming to the user
+const nullifyElement = element => {
+ element.type = ''
+ element.value = ''
+ element.return = ''
+ element.children = ''
+ element.props = ''
+}
+
+export let incorrectImportAlarm = (element, index, children) => {
+ if (!isImportRule(element)) {
+ return
+ }
+
+ if (element.parent) {
+ console.error(
+ "`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."
+ )
+ nullifyElement(element)
+ } else if (isPrependedWithRegularRules(index, children)) {
+ console.error(
+ "`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."
+ )
+ nullifyElement(element)
}
}
diff --git a/packages/cache/src/types.js b/packages/cache/src/types.js
index f71990903..92312fb30 100644
--- a/packages/cache/src/types.js
+++ b/packages/cache/src/types.js
@@ -1,13 +1,26 @@
// @flow
-export type StylisPlugin = (
- context: -2 | -1 | 0 | 1 | 2 | 3,
- content: string,
- selectors: Array
,
- parents: Array,
+export type StylisElement = {
+ type: string,
+ value: string,
+ props: Array,
+ root: StylisElement | null,
+ children: Array,
line: number,
column: number,
length: number,
- at: number,
- depth: number
-) => mixed
+ return: string
+}
+export type StylisPluginCallback = (
+ element: StylisElement,
+ index: number,
+ children: Array,
+ callback: StylisPluginCallback
+) => string | void
+
+export type StylisPlugin = (
+ element: StylisElement,
+ index: number,
+ children: Array,
+ callback: StylisPluginCallback
+) => string | void
diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts
index a9a9ca8fd..1a856d442 100644
--- a/packages/cache/types/index.d.ts
+++ b/packages/cache/types/index.d.ts
@@ -1,17 +1,41 @@
// Definitions by: Junyoung Clare Jang
// TypeScript Version: 2.2
-import { Plugin as StylisPlugin, Prefix } from '@emotion/stylis'
import { EmotionCache } from '@emotion/utils'
-export { StylisPlugin, Prefix, EmotionCache }
+export { EmotionCache }
+
+export interface StylisElement {
+ type: string
+ value: string
+ props: Array
+ root: StylisElement | null
+ children: Array
+ line: number
+ column: number
+ length: number
+ return: string
+}
+export type StylisPluginCallback = (
+ element: StylisElement,
+ index: number,
+ children: Array,
+ callback: StylisPluginCallback
+) => string | undefined
+
+export type StylisPlugin = (
+ element: StylisElement,
+ index: number,
+ children: Array,
+ callback: StylisPluginCallback
+) => string | undefined
export interface Options {
nonce?: string
- stylisPlugins?: StylisPlugin | Array
- prefix?: Prefix
- key?: string
+ stylisPlugins?: Array
+ key: string
container?: HTMLElement
speedy?: boolean
+ prepend?: boolean
}
-export default function createCache(options?: Options): EmotionCache
+export default function createCache(options: Options): EmotionCache
diff --git a/packages/cache/types/tests.ts b/packages/cache/types/tests.ts
index 64a73365a..63f65aaef 100644
--- a/packages/cache/types/tests.ts
+++ b/packages/cache/types/tests.ts
@@ -3,6 +3,6 @@ import createCache, { Options } from '@emotion/cache'
declare const testOptions: Options
// $ExpectType EmotionCache
-createCache()
+createCache({ key: 'test-key' })
// $ExpectType EmotionCache
createCache(testOptions)
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
deleted file mode 100644
index 895776a8b..000000000
--- a/packages/core/CHANGELOG.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# @emotion/core
-
-## 10.1.1
-
-### Patch Changes
-
-- [`fe30cbd6`](https://github.com/emotion-js/emotion/commit/fe30cbd60b131bd7017d574cc25215dcd04d1f46) [#2066](https://github.com/emotion-js/emotion/pull/2066) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with React giving warning about static children not having unique keys when using the classic `jsx` factory. This example illustrates the situation in which this has been incorrectly happening:
-
- ```js
-
- ```
-
-## 10.1.0
-
-### Minor Changes
-
-- [`71514b06`](https://github.com/emotion-js/emotion/commit/71514b06fe172517168f98321499f05e74388de6) [#1970](https://github.com/emotion-js/emotion/pull/1970) Thanks [@FLGMwt](https://github.com/FLGMwt)! - Support for [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) has been added. They require compatible React versions and shouldn't be manually used.
-
- To use them you can use the new `@jsxImportSource @emotion/core` pragma instead of the old `@jsx jsx` or you can use `@emotion/babel-preset-css-prop` with `{ runtime: 'automatic' }` option to have it handled automatically for you for the whole project.
-
-## 10.0.35
-
-### Patch Changes
-
-- [`2cf3b16b`](https://github.com/emotion-js/emotion/commit/2cf3b16b94eb7bad8d745b135fb2bfa99154980d) [#1973](https://github.com/emotion-js/emotion/pull/1973) Thanks [@santialbo](https://github.com/santialbo)! - Fixed label extraction from the stack traces in node for components wrapped in `React.forwardRef`. This has affected only development builds.
-
-## 10.0.34
-
-### Patch Changes
-
-- [`4979ebb2`](https://github.com/emotion-js/emotion/commit/4979ebb2f9db94fa291384213e4f37e4a58a294a) [#1966](https://github.com/emotion-js/emotion/pull/1966) Thanks [@chnakamura](https://github.com/chnakamura)! - Fixed label extraction from the stack traces in Chrome in certain scenarios. This has affected only development builds.
-
-## 10.0.28
-
-### Patch Changes
-
-- [`d0b2a94`](https://github.com/emotion-js/emotion/commit/d0b2a94ab9d5648667447dbd78e7a2e3e93de42a) [#1714](https://github.com/emotion-js/emotion/pull/1714) Thanks [@Andarist](https://github.com/Andarist)! - Fixed label extraction from the stack traces in FireFox and Safari. We have failed to match a label in Emotion wrappers like Theme UI which caused SSR mismatches in mentioned browsers. This has affected only development builds.
-
-## 10.0.27
-
-### Patch Changes
-
-- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
-- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- - @emotion/cache@10.0.27
- - @emotion/css@10.0.27
- - emotion-server@10.0.27
- - emotion-theming@10.0.27
- - emotion@10.0.27
- - @emotion/serialize@0.11.15
- - @emotion/sheet@0.9.4
- - @emotion/styled@10.0.27
- - @emotion/utils@0.11.3
-
-## 10.0.22
-
-### Patch Changes
-
-- [`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387) [#1219](https://github.com/emotion-js/emotion/pull/1219) Thanks [@Andarist](https://github.com/Andarist)! - Add dev hint about css object being stringified by accident
-
-* [`2fc75f26`](https://github.com/emotion-js/emotion/commit/2fc75f266b23cf48fb842953bc47eebcb5241cbd) [#1548](https://github.com/emotion-js/emotion/pull/1548) Thanks [@Andarist](https://github.com/Andarist)! - Accept objects as `className` in jsx-created components (they are stringified) to match React behavior
-
-- [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc) [#1553](https://github.com/emotion-js/emotion/pull/1553) Thanks [@Andarist](https://github.com/Andarist)! - Add dev warning about keyframes being interpolated into plain strings.
-
-* [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286) [#1560](https://github.com/emotion-js/emotion/pull/1560) Thanks [@Andarist](https://github.com/Andarist)! - Fix composition of styles without a final semicolon in a declaration block
-
-* Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286), [`c3f0bc10`](https://github.com/emotion-js/emotion/commit/c3f0bc101833fff1ee4e27c7a730b821a7df4a15), [`11bea3a8`](https://github.com/emotion-js/emotion/commit/11bea3a89f38f9052c692c3df050ad802b6b954c)]:
- - @emotion/serialize@0.11.12
- - @emotion/styled@10.0.22
- - @emotion/css@10.0.22
-
-## 10.0.21
-
-### Patch Changes
-
-- [7855db4a](https://github.com/emotion-js/emotion/commit/7855db4ae379f212e7b972b9108419154e17ed45) [#1537](https://github.com/emotion-js/emotion/pull/1537) Thanks [@Andarist](https://github.com/Andarist)! - Add missing `/* #__PURE__ */` annotation to creation of EmotionCssPropInternal
-
-## 10.0.20
-
-### Patch Changes
-
-- [38bb2b19](https://github.com/emotion-js/emotion/commit/38bb2b19d4ff1552116829e068664516d167a3f8) [#1530](https://github.com/emotion-js/emotion/pull/1530) Thanks [@Andarist](https://github.com/Andarist)! - Fix class not being applied when putting nil as css prop value on wrapper component
-
-## 10.0.17
-
-### Patch Changes
-
-- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Add warnings about using illegal escape sequences
- - [10514a86](https://github.com/emotion-js/emotion/commit/10514a8635dcaa55b85c7bff90e2a9e14d1ba61f) [#1482](https://github.com/emotion-js/emotion/pull/1482) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Remove react native bundles in favour of different isBrowser detection
- - [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Update Babel dependencies
-
-## 10.0.16
-
-### Patch Changes
-
-- [47262b64](https://github.com/emotion-js/emotion/commit/47262b64) - Fix labels from stack traces in some cases
-
-## 10.0.15
-
-### Patch Changes
-
-- [188dc0e7](https://github.com/emotion-js/emotion/commit/188dc0e7) [#1443](https://github.com/emotion-js/emotion/pull/1443) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Extract styles rather than inline them in compat mode with the Global component
- - [4a3b18a2](https://github.com/emotion-js/emotion/commit/4a3b18a2) [#1451](https://github.com/emotion-js/emotion/pull/1451) Thanks [@Andarist](https://github.com/Andarist)! - Fixed issue with auto-labelling crashing on \$ at runtime
-
-## 10.0.14
-
-### Patch Changes
-
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
diff --git a/packages/core/__tests__/__snapshots__/global-with-theme.js.snap b/packages/core/__tests__/__snapshots__/global-with-theme.js.snap
deleted file mode 100644
index 3f8b9a7b0..000000000
--- a/packages/core/__tests__/__snapshots__/global-with-theme.js.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`basic 1`] = `
-
-
-
-
-
-
-
-
-`;
-
-exports[`basic 2`] = `
-
-
-
-
-
-
-`;
diff --git a/packages/core/__tests__/babel/__snapshots__/css.js.snap b/packages/core/__tests__/babel/__snapshots__/css.js.snap
deleted file mode 100644
index 8d538787f..000000000
--- a/packages/core/__tests__/babel/__snapshots__/css.js.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tagged template args forwarded 1`] = `
-@media (min-width:100px) {
- .emotion-0 {
- color: red;
- }
-}
-
-
- something
-
-`;
diff --git a/packages/core/__tests__/babel/__snapshots__/source-map-server.js.snap b/packages/core/__tests__/babel/__snapshots__/source-map-server.js.snap
deleted file mode 100644
index ee54647e0..000000000
--- a/packages/core/__tests__/babel/__snapshots__/source-map-server.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`basic 1`] = `"some hotpink text
"`;
diff --git a/packages/core/__tests__/babel/css.js b/packages/core/__tests__/babel/css.js
deleted file mode 100644
index f850b446e..000000000
--- a/packages/core/__tests__/babel/css.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/** @jsx jsx */
-import 'test-utils/next-env'
-import { jsx, css } from '@emotion/core'
-import renderer from 'react-test-renderer'
-
-test('tagged template args forwarded', () => {
- function media(...args) {
- return css`
- @media (min-width: 100px) {
- ${css(...args)};
- }
- `
- }
-
- const tree = renderer.create(
-
- something
-
- )
-
- expect(tree.toJSON()).toMatchSnapshot()
-})
diff --git a/packages/core/__tests__/compat/__snapshots__/server.js.snap b/packages/core/__tests__/compat/__snapshots__/server.js.snap
deleted file mode 100644
index 56112f8fc..000000000
--- a/packages/core/__tests__/compat/__snapshots__/server.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Global component extracts the styles rather than inlines it 1`] = `
-Object {
- "css": ".css-1lrxbo5{color:hotpink;}html{color:green;}",
- "html": "
",
- "ids": Array [
- "1lrxbo5",
- "1vwj31w",
- ],
-}
-`;
-
-exports[`it works 1`] = `
-Object {
- "css": ".css-1lrxbo5{color:hotpink;}",
- "html": "
",
- "ids": Array [
- "1lrxbo5",
- ],
-}
-`;
diff --git a/packages/core/__tests__/compat/server.js b/packages/core/__tests__/compat/server.js
deleted file mode 100644
index 0939fb63d..000000000
--- a/packages/core/__tests__/compat/server.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/** @jsx jsx
- * @jest-environment node
- * @flow
- */
-import { jsx, Global } from '@emotion/core'
-import createEmotionServer from 'create-emotion-server'
-import createCache from '@emotion/cache'
-import { CacheProvider } from '@emotion/core'
-import { renderToString } from 'react-dom/server'
-
-test('it works', () => {
- let cache = createCache()
- let { extractCritical } = createEmotionServer(cache)
- let ele = (
-
-
-
- )
- expect(extractCritical(renderToString(ele))).toMatchSnapshot()
-})
-
-test('Global component extracts the styles rather than inlines it', () => {
- let cache = createCache()
- let { extractCritical } = createEmotionServer(cache)
- let ele = (
-
-
-
- )
- expect(extractCritical(renderToString(ele))).toMatchSnapshot()
-})
diff --git a/packages/core/__tests__/custom-cache.js b/packages/core/__tests__/custom-cache.js
deleted file mode 100644
index 492b1b4e7..000000000
--- a/packages/core/__tests__/custom-cache.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// @flow
-/** @jsx jsx */
-import 'test-utils/next-env'
-import createCache from '@emotion/cache'
-import { jsx, CacheProvider } from '@emotion/core'
-import renderer from 'react-test-renderer'
-
-function render(ele) {
- return renderer.create(ele).toJSON()
-}
-
-test('with prefix option', () => {
- let cache = createCache({ prefix: false })
-
- expect(
- render(
-
-
-
- )
- ).toMatchInlineSnapshot(`
-.emotion-0 {
- display: flex;
-}
-
-
-`)
-})
diff --git a/packages/core/jsx-dev-runtime/package.json b/packages/core/jsx-dev-runtime/package.json
deleted file mode 100644
index 2f4fa7d54..000000000
--- a/packages/core/jsx-dev-runtime/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "main": "dist/core.cjs.js",
- "module": "dist/core.esm.js",
- "umd:main": "dist/core.umd.min.js",
- "browser": {
- "./dist/core.cjs.js": "./dist/core.browser.cjs.js",
- "./dist/core.esm.js": "./dist/core.browser.esm.js"
- },
- "preconstruct": {
- "source": "../src/jsx-dev-runtime",
- "umdName": "emotionCoreJSXDevRuntime"
- }
-}
diff --git a/packages/core/jsx-runtime/package.json b/packages/core/jsx-runtime/package.json
deleted file mode 100644
index e9ead97a7..000000000
--- a/packages/core/jsx-runtime/package.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "main": "dist/core.cjs.js",
- "module": "dist/core.esm.js",
- "umd:main": "dist/core.umd.min.js",
- "browser": {
- "./dist/core.cjs.js": "./dist/core.browser.cjs.js",
- "./dist/core.esm.js": "./dist/core.browser.esm.js"
- },
- "preconstruct": {
- "source": "../src/jsx-runtime",
- "umdName": "emotionCoreJSXRuntime"
- }
-}
diff --git a/packages/core/package.json b/packages/core/package.json
deleted file mode 100644
index f6d8a7be2..000000000
--- a/packages/core/package.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
- "name": "@emotion/core",
- "version": "10.1.1",
- "main": "dist/core.cjs.js",
- "module": "dist/core.esm.js",
- "browser": {
- "./dist/core.cjs.js": "./dist/core.browser.cjs.js",
- "./dist/core.esm.js": "./dist/core.browser.esm.js"
- },
- "types": "types/index.d.ts",
- "files": [
- "src",
- "dist",
- "jsx-runtime",
- "jsx-dev-runtime",
- "types"
- ],
- "author": "mitchellhamilton ",
- "license": "MIT",
- "scripts": {
- "test:typescript": "dtslint types"
- },
- "dependencies": {
- "@babel/runtime": "^7.5.5",
- "@emotion/cache": "^10.0.27",
- "@emotion/css": "^10.0.27",
- "@emotion/serialize": "^0.11.15",
- "@emotion/sheet": "0.9.4",
- "@emotion/utils": "0.11.3"
- },
- "peerDependencies": {
- "react": ">=16.3.0"
- },
- "devDependencies": {
- "@emotion/styled": "^10.0.27",
- "@types/react": "^16.8.20",
- "dtslint": "^0.3.0",
- "emotion": "^10.0.27",
- "emotion-server": "^10.0.27",
- "emotion-theming": "^10.0.27",
- "html-tag-names": "^1.1.2",
- "react": "16.14.0",
- "svg-tag-names": "^1.1.1"
- },
- "repository": "https://github.com/emotion-js/emotion/tree/master/packages/core",
- "publishConfig": {
- "access": "public"
- },
- "umd:main": "dist/core.umd.min.js",
- "preconstruct": {
- "source": "src/index.js",
- "entrypoints": [
- ".",
- "jsx-runtime",
- "jsx-dev-runtime"
- ],
- "umdName": "emotionCore"
- }
-}
diff --git a/packages/core/src/class-names.js b/packages/core/src/class-names.js
deleted file mode 100644
index e99313b4d..000000000
--- a/packages/core/src/class-names.js
+++ /dev/null
@@ -1,135 +0,0 @@
-// @flow
-import * as React from 'react'
-import { getRegisteredStyles, insertStyles } from '@emotion/utils'
-import { serializeStyles } from '@emotion/serialize'
-import { withEmotionCache, ThemeContext } from './context'
-import { isBrowser } from './utils'
-
-type ClassNameArg =
- | string
- | boolean
- | { [key: string]: boolean }
- | Array
- | null
- | void
-
-let classnames = (args: Array): string => {
- let len = args.length
- let i = 0
- let cls = ''
- for (; i < len; i++) {
- let arg = args[i]
- if (arg == null) continue
-
- let toAdd
- switch (typeof arg) {
- case 'boolean':
- break
- case 'object': {
- if (Array.isArray(arg)) {
- toAdd = classnames(arg)
- } else {
- toAdd = ''
- for (const k in arg) {
- if (arg[k] && k) {
- toAdd && (toAdd += ' ')
- toAdd += k
- }
- }
- }
- break
- }
- default: {
- toAdd = arg
- }
- }
- if (toAdd) {
- cls && (cls += ' ')
- cls += toAdd
- }
- }
- return cls
-}
-function merge(
- registered: Object,
- css: (...args: Array) => string,
- className: string
-) {
- const registeredStyles = []
-
- const rawClassName = getRegisteredStyles(
- registered,
- registeredStyles,
- className
- )
-
- if (registeredStyles.length < 2) {
- return className
- }
- return rawClassName + css(registeredStyles)
-}
-
-type Props = {
- children: ({
- css: (...args: Array) => string,
- cx: (...args: Array) => string,
- theme: Object
- }) => React.Node
-}
-
-export const ClassNames = withEmotionCache((props, context) => {
- return (
-
- {theme => {
- let rules = ''
- let serializedHashes = ''
- let hasRendered = false
-
- let css = (...args: Array) => {
- if (hasRendered && process.env.NODE_ENV !== 'production') {
- throw new Error('css can only be used during render')
- }
- let serialized = serializeStyles(args, context.registered)
- if (isBrowser) {
- insertStyles(context, serialized, false)
- } else {
- let res = insertStyles(context, serialized, false)
- if (res !== undefined) {
- rules += res
- }
- }
- if (!isBrowser) {
- serializedHashes += ` ${serialized.name}`
- }
- return `${context.key}-${serialized.name}`
- }
- let cx = (...args: Array) => {
- if (hasRendered && process.env.NODE_ENV !== 'production') {
- throw new Error('cx can only be used during render')
- }
- return merge(context.registered, css, classnames(args))
- }
- let content = { css, cx, theme }
- let ele = props.children(content)
- hasRendered = true
- if (!isBrowser && rules.length !== 0) {
- return (
-
-
- {ele}
-
- )
- }
- return ele
- }}
-
- )
-})
diff --git a/packages/core/src/context.js b/packages/core/src/context.js
deleted file mode 100644
index 868cb2f1e..000000000
--- a/packages/core/src/context.js
+++ /dev/null
@@ -1,77 +0,0 @@
-// @flow
-import { type EmotionCache } from '@emotion/utils'
-import * as React from 'react'
-import createCache from '@emotion/cache'
-import { isBrowser } from './utils'
-
-let EmotionCacheContext: React.Context = React.createContext(
- // we're doing this to avoid preconstruct's dead code elimination in this one case
- // because this module is primarily intended for the browser and node
- // but it's also required in react native and similar environments sometimes
- // and we could have a special build just for that
- // but this is much easier and the native packages
- // might use a different theme context in the future anyway
- typeof HTMLElement !== 'undefined' ? createCache() : null
-)
-
-export let ThemeContext = React.createContext({})
-export let CacheProvider = EmotionCacheContext.Provider
-
-let withEmotionCache = function withEmotionCache(
- func: (props: Props, cache: EmotionCache, ref: React.Ref<*>) => React.Node
-): React.StatelessFunctionalComponent {
- let render = (props: Props, ref: React.Ref<*>) => {
- return (
-
- {(
- // $FlowFixMe we know it won't be null
- cache: EmotionCache
- ) => {
- return func(props, cache, ref)
- }}
-
- )
- }
- // $FlowFixMe
- return React.forwardRef(render)
-}
-
-if (!isBrowser) {
- class BasicProvider extends React.Component<
- { children: EmotionCache => React.Node },
- { value: EmotionCache }
- > {
- state = { value: createCache() }
- render() {
- return (
-
- {this.props.children(this.state.value)}
-
- )
- }
- }
-
- withEmotionCache = function withEmotionCache(
- func: (props: Props, cache: EmotionCache) => React.Node
- ): React.StatelessFunctionalComponent {
- return (props: Props) => (
-
- {context => {
- if (context === null) {
- return (
-
- {newContext => {
- return func(props, newContext)
- }}
-
- )
- } else {
- return func(props, context)
- }
- }}
-
- )
- }
-}
-
-export { withEmotionCache }
diff --git a/packages/core/src/global.js b/packages/core/src/global.js
deleted file mode 100644
index 78664b940..000000000
--- a/packages/core/src/global.js
+++ /dev/null
@@ -1,148 +0,0 @@
-// @flow
-import * as React from 'react'
-import { withEmotionCache, ThemeContext } from './context'
-import {
- type EmotionCache,
- type SerializedStyles,
- insertStyles
-} from '@emotion/utils'
-import { isBrowser } from './utils'
-
-import { StyleSheet } from '@emotion/sheet'
-import { serializeStyles } from '@emotion/serialize'
-
-type Styles = Object | Array
-
-type GlobalProps = {
- +styles: Styles | (Object => Styles)
-}
-
-let warnedAboutCssPropForGlobal = false
-
-export let Global: React.StatelessFunctionalComponent<
- GlobalProps
-> = /* #__PURE__ */ withEmotionCache((props: GlobalProps, cache) => {
- if (
- process.env.NODE_ENV !== 'production' &&
- !warnedAboutCssPropForGlobal &&
- // check for className as well since the user is
- // probably using the custom createElement which
- // means it will be turned into a className prop
- // $FlowFixMe I don't really want to add it to the type since it shouldn't be used
- (props.className || props.css)
- ) {
- console.error(
- "It looks like you're using the css prop on Global, did you mean to use the styles prop instead?"
- )
- warnedAboutCssPropForGlobal = true
- }
- let styles = props.styles
-
- if (typeof styles === 'function') {
- return (
-
- {theme => {
- let serialized = serializeStyles([styles(theme)])
-
- return
- )
- }
- let serialized = serializeStyles([styles])
-
- return {
- sheet: StyleSheet
- componentDidMount() {
- this.sheet = new StyleSheet({
- key: `${this.props.cache.key}-global`,
- nonce: this.props.cache.sheet.nonce,
- container: this.props.cache.sheet.container
- })
- // $FlowFixMe
- let node: HTMLStyleElement | null = document.querySelector(
- `style[data-emotion-${this.props.cache.key}="${
- this.props.serialized.name
- }"]`
- )
-
- if (node !== null) {
- this.sheet.tags.push(node)
- }
- if (this.props.cache.sheet.tags.length) {
- this.sheet.before = this.props.cache.sheet.tags[0]
- }
- this.insertStyles()
- }
- componentDidUpdate(prevProps) {
- if (prevProps.serialized.name !== this.props.serialized.name) {
- this.insertStyles()
- }
- }
- insertStyles() {
- if (this.props.serialized.next !== undefined) {
- // insert keyframes
- insertStyles(this.props.cache, this.props.serialized.next, true)
- }
- if (this.sheet.tags.length) {
- // if this doesn't exist then it will be null so the style element will be appended
- let element = this.sheet.tags[this.sheet.tags.length - 1]
- .nextElementSibling
- this.sheet.before = ((element: any): Element | null)
- this.sheet.flush()
- }
- this.props.cache.insert(``, this.props.serialized, this.sheet, false)
- }
-
- componentWillUnmount() {
- this.sheet.flush()
- }
- render() {
- if (!isBrowser) {
- let { serialized } = this.props
-
- let serializedNames = serialized.name
- let serializedStyles = serialized.styles
- let next = serialized.next
- while (next !== undefined) {
- serializedNames += ' ' + next.name
- serializedStyles += next.styles
- next = next.next
- }
-
- let shouldCache = this.props.cache.compat === true
-
- let rules = this.props.cache.insert(
- ``,
- { name: serializedNames, styles: serializedStyles },
- this.sheet,
- shouldCache
- )
-
- if (!shouldCache) {
- return (
-
- )
- }
- }
- return null
- }
-}
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
deleted file mode 100644
index 3a090be48..000000000
--- a/packages/core/src/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// @flow
-export { withEmotionCache, CacheProvider, ThemeContext } from './context'
-export { jsx } from './jsx'
-export { jsx as createElement } from './jsx'
-export { Global } from './global'
-export { keyframes } from './keyframes'
-export { ClassNames } from './class-names'
-export { default as css } from '@emotion/css'
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
deleted file mode 100644
index 9395e0133..000000000
--- a/packages/core/types/index.d.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-// Definitions by: Junyoung Clare Jang
-// TypeScript Version: 2.8
-
-import { EmotionCache } from '@emotion/cache'
-import css, { Interpolation, SerializedStyles } from '@emotion/css'
-import { Keyframes } from '@emotion/serialize'
-import {
- ClassAttributes,
- ComponentClass,
- Context,
- Provider,
- SFC,
- ReactElement,
- ReactNode,
- Ref,
- createElement
-} from 'react'
-
-export {
- ArrayInterpolation,
- ComponentSelector,
- CSSObject,
- FunctionInterpolation,
- ObjectInterpolation
-} from '@emotion/css'
-
-export { EmotionCache, Interpolation, SerializedStyles, css }
-
-export const ThemeContext: Context
-export const CacheProvider: Provider
-export function withEmotionCache(
- func: (props: Props, context: EmotionCache, ref: Ref) => ReactNode
-): SFC>
-
-export const jsx: typeof createElement
-
-export type InterpolationWithTheme =
- | Interpolation
- | ((theme: Theme) => Interpolation)
-
-export interface GlobalProps {
- styles: InterpolationWithTheme
-}
-/**
- * @desc
- * JSX generic are supported only after TS@2.9
- */
-export function Global(props: GlobalProps): ReactElement
-
-export function keyframes(
- template: TemplateStringsArray,
- ...args: Array
-): Keyframes
-export function keyframes(...args: Array): Keyframes
-
-export interface ArrayClassNamesArg extends Array {}
-export type ClassNamesArg =
- | undefined
- | null
- | string
- | boolean
- | { [className: string]: boolean | null | undefined }
- | ArrayClassNamesArg
-
-export interface ClassNamesContent {
- css(template: TemplateStringsArray, ...args: Array): string
- css(...args: Array): string
- cx(...args: Array): string
- theme: Theme
-}
-export interface ClassNamesProps {
- children(content: ClassNamesContent): ReactNode
-}
-/**
- * @desc
- * JSX generic are supported only after TS@2.9
- */
-export function ClassNames(
- props: ClassNamesProps
-): ReactElement
-
-declare module 'react' {
- interface DOMAttributes {
- css?: InterpolationWithTheme
- }
-}
-
-declare global {
- namespace JSX {
- /**
- * Do we need to modify `LibraryManagedAttributes` too,
- * to make `className` props optional when `css` props is specified?
- */
-
- interface IntrinsicAttributes {
- css?: InterpolationWithTheme
- }
- }
-}
diff --git a/packages/core/types/tests.tsx b/packages/core/types/tests.tsx
deleted file mode 100644
index d880d41e6..000000000
--- a/packages/core/types/tests.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/** @jsx jsx */
-import { ComponentClass } from 'react'
-import {
- ClassNames,
- ClassNamesContent,
- Global,
- Interpolation,
- CacheProvider,
- css,
- jsx,
- keyframes,
- withEmotionCache
-} from '@emotion/core'
-; [theme.resetStyle]} />
-
-declare const getRandomColor: () => string
-
-const ComponentWithCache = withEmotionCache((_props: {}, context) => {
- return (
-
- context.sheet.insert(`div { backgroundColor: ${getRandomColor()} }`)
- }
- />
- )
-})
-;
{}} />
-;
-
- This is really big
-
-
- {({ css, cx, theme }: ClassNamesContent) => {
- return (
-
-
- Fst Text
-
-
- Snd Text
-
-
- )
- }}
-
diff --git a/packages/create-emotion-server/CHANGELOG.md b/packages/create-emotion-server/CHANGELOG.md
deleted file mode 100644
index 4e3f361aa..000000000
--- a/packages/create-emotion-server/CHANGELOG.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# create-emotion-server
-
-## 10.0.27
-
-### Patch Changes
-
-- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
-- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- - @emotion/utils@0.11.3
-
-## 10.0.14
-
-### Patch Changes
-
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
diff --git a/packages/create-emotion-server/README.md b/packages/create-emotion-server/README.md
deleted file mode 100644
index ac3eaae00..000000000
--- a/packages/create-emotion-server/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# create-emotion-server
-
-> Create Server-Side-Rendering APIs for emotion instances
-
-`create-emotion-server` allows you create various APIs for Server-Side Rendering with instances of emotion. This is **only** needed if you use a custom instance of emotion from `create-emotion` and you want to do Server-Side Rendering.
-
-```jsx
-import createEmotionServer from 'create-emotion-server'
-
-import { cache } from 'my-emotion-instance'
-// or
-import createCache from '@emotion/cache'
-
-let cache = createCache()
-
-export const {
- extractCritical,
- renderStylesToString,
- renderStylesToNodeStream
-} = createEmotionServer(cache)
-```
-
-[All of emotion's SSR APIs are documented in their own doc.](https://emotion.sh/docs/ssr)
diff --git a/packages/create-emotion-server/types/tslint.json b/packages/create-emotion-server/types/tslint.json
deleted file mode 100644
index 2028bec7b..000000000
--- a/packages/create-emotion-server/types/tslint.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "extends": "dtslint/dtslint.json",
- "rules": {
- "array-type": [true, "generic"],
- "semicolon": false
- }
-}
diff --git a/packages/create-emotion/CHANGELOG.md b/packages/create-emotion/CHANGELOG.md
deleted file mode 100644
index e6af87609..000000000
--- a/packages/create-emotion/CHANGELOG.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# create-emotion
-
-## 10.0.27
-
-### Patch Changes
-
-- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
-- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- - @emotion/cache@10.0.27
- - create-emotion-server@10.0.27
- - @emotion/serialize@0.11.15
- - @emotion/sheet@0.9.4
- - @emotion/utils@0.11.3
-
-## 10.0.14
-
-### Patch Changes
-
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
diff --git a/packages/create-emotion/README.md b/packages/create-emotion/README.md
deleted file mode 100644
index b48f9a4fb..000000000
--- a/packages/create-emotion/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# create-emotion
-
-### Create distinct instances of emotion.
-
-The main [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion) package can be thought of as a call to `createEmotion` with sensible defaults for most applications.
-
-```javascript
-import createEmotion from 'create-emotion'
-
-export const {
- flush,
- hydrate,
- cx,
- merge,
- getRegisteredStyles,
- injectGlobal,
- keyframes,
- css,
- sheet,
- cache
-} = createEmotion()
-```
-
-### Upside
-
-- Calling it directly will allow for some low level customization.
-
-- Create custom names for emotion APIs to help with migration from other, similar libraries.
-
-- Could set custom `key` to something other than `css`
-
-### Downside
-
-- Introduces some amount of complexity to your application that can vary depending on developer experience.
-
-- Required to keep up with changes in the repo and API at a lower level than if using `emotion` directly
-
-### Primary use cases
-
-- Using emotion in embedded contexts such as an ``
-
-- Setting a [nonce](/packages/cache#nonce-string) on any `` tag emotion creates for security purposes
-
-- Use emotion with a developer defined `` tag
-
-- Using emotion with custom stylis plugins
-
-## Multiple instances in a single app example
-
-```jsx
-import createEmotion from 'create-emotion'
-
-export const {
- flush,
- hydrate,
- cx,
- merge,
- getRegisteredStyles,
- injectGlobal,
- keyframes,
- css,
- sheet,
- cache
-} = createEmotion({
- // The key option is required when there will be multiple instances in a single app
- key: 'some-key'
-})
-```
-
-## Options
-
-`createEmotion` accepts the same options as [createCache](/packages/cache#options) from `@emotion/cache`.
diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json
deleted file mode 100644
index d1dfdaf93..000000000
--- a/packages/create-emotion/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "name": "create-emotion",
- "version": "10.0.27",
- "description": "The Next Generation of CSS-in-JS.",
- "main": "dist/create-emotion.cjs.js",
- "module": "dist/create-emotion.esm.js",
- "types": "types/index.d.ts",
- "files": [
- "src",
- "dist",
- "types"
- ],
- "scripts": {
- "test:typescript": "dtslint types"
- },
- "dependencies": {
- "@emotion/cache": "^10.0.27",
- "@emotion/serialize": "^0.11.15",
- "@emotion/sheet": "0.9.4",
- "@emotion/utils": "0.11.3"
- },
- "devDependencies": {
- "babel-plugin-transform-define": "^1.3.0",
- "create-emotion-server": "10.0.27",
- "dtslint": "^0.3.0"
- },
- "author": "Kye Hohenberger",
- "homepage": "https://emotion.sh",
- "license": "MIT",
- "repository": "https://github.com/emotion-js/emotion/tree/master/packages/create-emotion",
- "keywords": [
- "styles",
- "emotion",
- "react",
- "css",
- "css-in-js"
- ],
- "bugs": {
- "url": "https://github.com/emotion-js/emotion/issues"
- },
- "browser": {
- "./dist/create-emotion.cjs.js": "./dist/create-emotion.browser.cjs.js",
- "./dist/create-emotion.esm.js": "./dist/create-emotion.browser.esm.js"
- }
-}
diff --git a/packages/create-emotion/test/stream.test.js b/packages/create-emotion/test/stream.test.js
deleted file mode 100644
index 6d18523cb..000000000
--- a/packages/create-emotion/test/stream.test.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * @jest-environment node
- * @flow
- */
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import {
- getComponents,
- getInjectedRules,
- createBigComponent,
- getCssFromChunks,
- setHtml,
- renderToStringWithStream
-} from '../../emotion-server/test/util'
-import { JSDOM } from 'jsdom'
-
-let emotion
-let emotionServer
-let reactEmotion
-
-describe('renderStylesToNodeStream', () => {
- beforeEach(() => {
- jest.resetModules()
- emotion = require('./emotion-instance')
- emotionServer = require('./emotion-instance')
- reactEmotion = require('./emotion-instance')
- })
- test('renders styles with ids', async () => {
- const { Page1, Page2 } = getComponents(emotion, reactEmotion)
- expect(
- await renderToStringWithStream( (https://github.com/Andarist)",
+ "main": "dist/emotion-css-prettifier.cjs.js",
+ "module": "dist/emotion-css-prettifier.esm.js",
+ "types": "types/index.d.ts",
+ "license": "MIT",
+ "dependencies": {
+ "@emotion/memoize": "^0.7.4",
+ "stylis": "^4.0.3"
+ },
+ "devDependencies": {},
+ "publishConfig": {
+ "access": "public"
+ },
+ "files": [
+ "src",
+ "dist",
+ "types/*.d.ts"
+ ]
+}
diff --git a/packages/css-prettifier/src/index.js b/packages/css-prettifier/src/index.js
new file mode 100644
index 000000000..0f92ea05d
--- /dev/null
+++ b/packages/css-prettifier/src/index.js
@@ -0,0 +1,53 @@
+import memoize from '@emotion/memoize'
+import { compile, serialize, combine, tokenize } from 'stylis'
+
+// adjusted https://github.com/thysultan/stylis.js/blob/68b9043427c177b95a0fd6a2a13f5b636bf80236/src/Serializer.js#L26-L34
+const prettyStringify = memoize(
+ indentation => (element, index, children, callback) => {
+ switch (element.type) {
+ case '@import':
+ return (element.return = element.return || element.value) + '\n\n'
+ case 'decl':
+ return (element.return =
+ element.return || `${element.props}: ${element.children};\n`)
+ case 'comm':
+ return ''
+ case '@media':
+ case '@supports':
+ element.value = combine(
+ tokenize(element.value),
+ (value, index, children) => {
+ // (
+ if (value.charCodeAt(0) === 40 && children[index - 1] !== ' ') {
+ return ' ' + value
+ }
+ return value
+ }
+ )
+ break
+ case 'rule':
+ element.value = element.props.join(
+ element.root &&
+ (element.root.type === '@keyframes' ||
+ element.root.type === '@-webkit-keyframes')
+ ? ', '
+ : ',\n'
+ )
+ }
+
+ return (children = serialize(element.children, callback)).length
+ ? (element.return =
+ element.value +
+ ' {\n' +
+ children
+ .trim()
+ .replace(/^/gm, indentation)
+ .replace(/^\s+$/gm, '') +
+ '\n}\n\n')
+ : ''
+ }
+)
+
+export default function prettify(styles, indentation = ' ') {
+ return serialize(compile(styles), prettyStringify(indentation)).trim()
+}
diff --git a/packages/css-prettifier/types/index.d.ts b/packages/css-prettifier/types/index.d.ts
new file mode 100644
index 000000000..ea8733a22
--- /dev/null
+++ b/packages/css-prettifier/types/index.d.ts
@@ -0,0 +1 @@
+export default function prettify(styles: string, indentation?: string): string
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index 185e48d2b..862c48049 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -1,4 +1,217 @@
-# @emotion/css
+# emotion
+
+## 11.0.0
+
+### Major Changes
+
+- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `emotion` to `@emotion/css`. Please change any imports of `emotion` to import `@emotion/css` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`.
+
+* [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Move create `create-emotion` to `@emotion/css/create-instance`. Please change any imports of `create-emotion` to import `@emotion/css/create-instance` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`.
+
+- [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - The `key` option is now required when creating a custom instance of a cache. Please make sure it's unique (and not equal to `'css'`) as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.
+
+* [`5bea60b1`](https://github.com/emotion-js/emotion/commit/5bea60b1ffab85fbc965532006c3a94ea139f0bf) [#1807](https://github.com/emotion-js/emotion/pull/1807) Thanks [@Andarist](https://github.com/Andarist)! - Removed support for interpolating class names returned from `css`, so this will no longer be possible:
+
+ ```js
+ const cls1 = css`
+ color: blue;
+ `
+ const cls2 = css`
+ & .${cls1} {
+ color: red;
+ }
+ `
+ ```
+
+ This has already been deprecated for the lifetime of v10.
+
+* [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - Removed default export from `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/react/macro` has been added to account for this use case and appropriate changes has been made to `@emotion/babel-plugin` to facilitate those changes.
+
+ If you have used `@emotion/css` directly (it was always reexported from `@emotion/react`) or you have been using its macro then you should update your code like this:
+
+ ```diff
+ -import css from '@emotion/css'
+ +import { css } from '@emotion/react'
+
+ // or
+ -import css from '@emotion/css/macro'
+ +import { css } from '@emotion/react/macro'
+ ```
+
+ You can also use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin` to do this for you.
+
+* [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
+
+ It has been completely rewritten and comes with some breaking changes. The most notable ones that might affect Emotion users are:
+
+ - plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
+ - vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
+ - the prefixer is now just a plugin which happens to be included in the default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that.
+ - `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.
+
+- [`cf56694`](https://github.com/emotion-js/emotion/commit/cf56694d54d0b2bd6208f561d8ce829da4918952) [#2088](https://github.com/emotion-js/emotion/pull/2088) Thanks [@Andarist](https://github.com/Andarist)! - UMD filenames have been changed.
+
+### Minor Changes
+
+- [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07) [#1956](https://github.com/emotion-js/emotion/pull/1956) Thanks [@eps1lon](https://github.com/eps1lon)! - Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.
+
+### Patch Changes
+
+- [`6d32d82b`](https://github.com/emotion-js/emotion/commit/6d32d82beb45b18e5f18a37932b862ad19b17044) [#1848](https://github.com/emotion-js/emotion/pull/1848) Thanks [@osdiab](https://github.com/osdiab)! - Added `speedy` method to the TS type declaration of the `sheet` object available on Emotion instances. In addition to that - `StyleSheet` type is no longer exported from this package and instead `CSSStyleSheet` is available now. The `StyleSheet` type might still be imported from `@emotion/sheet`, but it has no `speedy` method and thus it's not the same as what is available in this package as `CSSStyleSheet`.
+
+- Updated dependencies [[`c672175b`](https://github.com/emotion-js/emotion/commit/c672175b52e86de43b3d4092a8fe34b2023ceae8), [`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b), [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387), [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d), [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1), [`4a891bf6`](https://github.com/emotion-js/emotion/commit/4a891bf6a30e3bb37f8f32031fa75a571c637d9c), [`5e803106`](https://github.com/emotion-js/emotion/commit/5e803106d391b7c036bdf634318b80337a1d9b70), [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d), [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403), [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`c65c5d88`](https://github.com/emotion-js/emotion/commit/c65c5d887002d76557eaefcb98091d795b13f9a9), [`5c7ec859`](https://github.com/emotion-js/emotion/commit/5c7ec85904633a11185066fa591dc8969f3f2ff2), [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71), [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0), [`b7d21373`](https://github.com/emotion-js/emotion/commit/b7d21373d967d0f958dd59aaaa650047e23e8e8b), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07), [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`c6431074`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
+ - @emotion/babel-plugin@11.0.0
+ - @emotion/cache@11.0.0
+ - @emotion/serialize@1.0.0
+ - @emotion/sheet@1.0.0
+ - @emotion/utils@1.0.0
+
+## 11.0.0-rc.0
+
+### Major Changes
+
+- [`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63) [#2030](https://github.com/emotion-js/emotion/pull/2030) Thanks [@Andarist](https://github.com/Andarist)! - Release candidate version.
+
+### Patch Changes
+
+- Updated dependencies [[`9c4ebc16`](https://github.com/emotion-js/emotion/commit/9c4ebc160471097c5d04fb92dba3ed0df870bb63)]:
+ - @emotion/babel-plugin@11.0.0-rc.0
+ - @emotion/cache@11.0.0-rc.0
+ - @emotion/serialize@1.0.0-rc.0
+ - @emotion/sheet@1.0.0-rc.0
+ - @emotion/utils@1.0.0-rc.0
+
+## 11.0.0-next.19
+
+### Patch Changes
+
+- Updated dependencies [[`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d), [`42df3f3b`](https://github.com/emotion-js/emotion/commit/42df3f3bc01526eed61cedba106d86b9e3807f9d)]:
+ - @emotion/sheet@1.0.0-next.5
+ - @emotion/cache@11.0.0-next.19
+
+## 11.0.0-next.17
+
+### Patch Changes
+
+- Updated dependencies [[`76e3dc4d`](https://github.com/emotion-js/emotion/commit/76e3dc4dd3e76423aa5d527b3e66fe3be1722e5a)]:
+ - @emotion/serialize@1.0.0-next.5
+ - @emotion/babel-plugin@11.0.0-next.17
+
+## 11.0.0-next.16
+
+### Patch Changes
+
+- Updated dependencies [[`a8eb4e75`](https://github.com/emotion-js/emotion/commit/a8eb4e75eed26763dc4f82ddd9bb49af4552768b), [`dfe98028`](https://github.com/emotion-js/emotion/commit/dfe98028451a27c5190fa1ba138e51ef3d6d9be1), [`debaad9a`](https://github.com/emotion-js/emotion/commit/debaad9ab4bd6c80312092826d9146f3d29c0899), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0), [`39be057b`](https://github.com/emotion-js/emotion/commit/39be057b1a0c6b76f2cb7a455cb8bc35fe875ba0)]:
+ - @emotion/cache@11.0.0-next.16
+ - @emotion/utils@1.0.0-next.1
+ - @emotion/sheet@1.0.0-next.4
+ - @emotion/serialize@0.11.15-next.4
+ - @emotion/babel-plugin@11.0.0-next.16
+
+## 11.0.0-next.15
+
+### Minor Changes
+
+- [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07) [#1956](https://github.com/emotion-js/emotion/pull/1956) Thanks [@eps1lon](https://github.com/eps1lon)! - Upgraded [`csstype`](https://www.npmjs.com/package/csstype) dependency to its v3. This is what we use to provide TypeScript typings for object styles. The upgrade should not affect any consuming code but it's worth mentioning if any edge case scenarios arise.
+
+### Patch Changes
+
+- Updated dependencies [[`dc1a0c5e`](https://github.com/emotion-js/emotion/commit/dc1a0c5ed78b27fb7ce49b6296f2ca8631654cd1), [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07)]:
+ - @emotion/sheet@1.0.0-next.3
+ - @emotion/serialize@1.0.0-next.3
+ - @emotion/cache@11.0.0-next.15
+ - @emotion/babel-plugin@11.0.0-next.15
+
+## 11.0.0-next.14
+
+### Patch Changes
+
+- [`6d32d82b`](https://github.com/emotion-js/emotion/commit/6d32d82beb45b18e5f18a37932b862ad19b17044) [#1848](https://github.com/emotion-js/emotion/pull/1848) Thanks [@osdiab](https://github.com/osdiab)! - Added `speedy` method to the TS type declaration of the `sheet` object available on Emotion instances. In addition to that - `StyleSheet` type is no longer exported from this package and instead `CSSStyleSheet` is available now. The `StyleSheet` type might still be imported from `@emotion/sheet`, but it has no `speedy` method and thus it's not the same as what is available in this package as `CSSStyleSheet`.
+
+## 11.0.0-next.13
+
+### Major Changes
+
+- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
+
+ It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
+
+ - plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
+ - vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
+ - Prefixer is now just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that.
+ - `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.
+
+### Patch Changes
+
+- Updated dependencies [[`91046a8c`](https://github.com/emotion-js/emotion/commit/91046a8c188327a65daac61583ef3c4458f30afb), [`5e803106`](https://github.com/emotion-js/emotion/commit/5e803106d391b7c036bdf634318b80337a1d9b70), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf), [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf)]:
+ - @emotion/sheet@1.0.0-next.2
+ - @emotion/babel-plugin@11.0.0-next.13
+ - @emotion/cache@11.0.0-next.13
+ - @emotion/utils@1.0.0-next.0
+ - @emotion/serialize@0.11.15-next.2
+
+## 11.0.0-next.12
+
+### Major Changes
+
+- [`5bea60b1`](https://github.com/emotion-js/emotion/commit/5bea60b1ffab85fbc965532006c3a94ea139f0bf) [#1807](https://github.com/emotion-js/emotion/pull/1807) Thanks [@Andarist](https://github.com/Andarist)! - Removed support for interpolating class names returned from `css`, so this will no longer be possible:
+
+ ```js
+ const cls1 = css`
+ color: blue;
+ `
+ const cls2 = css`
+ & .${cls1} {
+ color: red;
+ }
+ `
+ ```
+
+ This has already been deprecated for the lifetime of v10.
+
+* [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - From now on `key` option is required when creating a custom instance. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache. If multiple caches share the same key they might "fight" for each other's style elements.
+
+### Patch Changes
+
+- Updated dependencies [[`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`5c7ec859`](https://github.com/emotion-js/emotion/commit/5c7ec85904633a11185066fa591dc8969f3f2ff2), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d), [`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`105de5c8`](https://github.com/emotion-js/emotion/commit/105de5c8752be0983c000e1e26462dc8fcf0708d)]:
+ - @emotion/serialize@1.0.0-next.1
+ - @emotion/babel-plugin@11.0.0-next.12
+ - @emotion/cache@11.0.0-next.12
+
+## 11.0.0-next.11
+
+### Patch Changes
+
+- Updated dependencies [[`f08ef5a3`](https://github.com/emotion-js/emotion/commit/f08ef5a316c1d05bff8e7f3690781e1089a263c6)]:
+ - @emotion/serialize@0.11.15-next.4
+ - @emotion/babel-plugin@11.0.0-next.11
+
+## 11.0.0-next.10
+
+### Major Changes
+
+- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Move create `create-emotion` to `@emotion/css/create-instance`. Please change any imports of `create-emotion` to import `@emotion/css/create-instance` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`.
+
+* [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `emotion` to `@emotion/css`. Please change any imports of `emotion` to import `@emotion/css` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`.
+
+### Patch Changes
+
+- Updated dependencies [[`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1), [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71), [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe), [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71)]:
+ - @emotion/babel-plugin@11.0.0-next.10
+ - @emotion/sheet@0.10.0-next.1
+ - @emotion/cache@11.0.0-next.10
+
+## 11.0.0-next.0
+
+### Major Changes
+
+- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number
+
+### Patch Changes
+
+- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]:
+ - babel-plugin-emotion@11.0.0-next.0
+ - create-emotion@11.0.0-next.0
## 10.0.27
@@ -7,27 +220,26 @@
- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
- Updated dependencies [[`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968)]:
- babel-plugin-emotion@10.0.27
- - @emotion/serialize@0.11.15
- - @emotion/utils@0.11.3
+ - create-emotion@10.0.27
+ - @emotion/stylis@0.8.5
-## 10.0.22
+## 10.0.23
### Patch Changes
-- [`11bea3a8`](https://github.com/emotion-js/emotion/commit/11bea3a89f38f9052c692c3df050ad802b6b954c) [#1562](https://github.com/emotion-js/emotion/pull/1562) Thanks [@FezVrasta](https://github.com/FezVrasta)! - Export Flow type definitions for @emotion/styled/macro and @emotion/css/macro
+- [`1ae94891`](https://github.com/emotion-js/emotion/commit/1ae948917326e2bc2bc978c59d04cb2695c72e38) [#1583](https://github.com/emotion-js/emotion/pull/1583) Thanks [@Andarist](https://github.com/Andarist)! - Export TS & Flow types for emotion/macro
-- Updated dependencies [[`4fc5657a`](https://github.com/emotion-js/emotion/commit/4fc5657ac8d0002322321cfbfc254b7196d27387), [`10211951`](https://github.com/emotion-js/emotion/commit/10211951051729b149930a8646de14bae9ae1bbc), [`57a767ea`](https://github.com/emotion-js/emotion/commit/57a767ea3dd18eefbbdc7269cc13128caad65286), [`1bb3efe3`](https://github.com/emotion-js/emotion/commit/1bb3efe399ddf0f3332187f3c751fbba9326d02c)]:
- - @emotion/serialize@0.11.12
- - babel-plugin-emotion@10.0.22
+- Updated dependencies [[`3927293d`](https://github.com/emotion-js/emotion/commit/3927293d0b9d96b4a7c00196e8430728759b1161), [`b3a0f148`](https://github.com/emotion-js/emotion/commit/b3a0f1484f2efcc78b447639ff2e0bc0f29915ae)]:
+ - babel-plugin-emotion@10.0.23
-## 10.0.14
+## 10.0.17
### Patch Changes
-- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
+- [66cda641](https://github.com/emotion-js/emotion/commit/66cda64128631790b81e3c9df273a972358ea593) [#1478](https://github.com/emotion-js/emotion/pull/1478) Thanks [@Andarist](https://github.com/Andarist)! - Add warnings about using illegal escape sequences
-## 10.0.12
+## 10.0.14
### Patch Changes
-- [49ce3041](https://github.com/emotion-js/emotion/commit/49ce3041) [#1351](https://github.com/emotion-js/emotion/pull/1351) Thanks [@ivandotv](https://github.com/ivandotv)! - Create module definition file for css macro
+- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool
diff --git a/packages/emotion/README.md b/packages/css/README.md
similarity index 63%
rename from packages/emotion/README.md
rename to packages/css/README.md
index ee9ec153c..8a9e165e7 100644
--- a/packages/emotion/README.md
+++ b/packages/css/README.md
@@ -1,6 +1,6 @@
-# emotion
+# @emotion/css
-The [emotion](https://www.npmjs.com/package/emotion) package is framework agnostic and the simplest way to use Emotion.
+The [@emotion/css](https://www.npmjs.com/package/@emotion/css) package is framework agnostic and the simplest way to use Emotion.
## Table of Contents
@@ -10,19 +10,20 @@ The [emotion](https://www.npmjs.com/package/emotion) package is framework agnost
- [Global Styles — `injectGlobal`](#global-styles)
- [Animation Keyframes — `keyframes`](#animation-keyframes)
- [Composing Class Names — `cx`](#cx)
-- [Server Side Rendering](/docs/ssr.mdx#api)
-- [Babel Plugin](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion)
+- [Custom Instances](#custom-instances)
+- [Server Side Rendering](https://emotion.sh/docs/ssr#api)
+- [Babel Plugin](https://emotion.sh/docs/@emotion/babel-plugin)
## Quick Start
Get up and running with a single import.
```bash
-npm install --save emotion
+npm install --save @emotion/css
```
```javascript
-import { css } from 'emotion'
+import { css } from '@emotion/css'
const app = document.getElementById('root')
const myStyle = css`
@@ -41,7 +42,7 @@ The `css` function accepts styles as a template literal, object, or array of obj
```jsx
// @live
-import { css } from 'emotion'
+import { css } from '@emotion/css'
const color = 'darkgreen'
@@ -63,7 +64,7 @@ render(
```jsx
// @live
-import { css } from 'emotion'
+import { css } from '@emotion/css'
const color = 'darkgreen'
@@ -85,7 +86,7 @@ render(
```jsx
// @live
-import { css } from 'emotion'
+import { css } from '@emotion/css'
const color = 'darkgreen'
const isDanger = true
@@ -114,7 +115,7 @@ render(
`injectGlobal` injects styles into the global scope and is useful for applications such as css resets or font faces.
```jsx
-import { injectGlobal } from 'emotion'
+import { injectGlobal } from '@emotion/css'
injectGlobal`
* {
@@ -143,7 +144,7 @@ injectGlobal`
```jsx
// @live
-import { css, keyframes } from 'emotion'
+import { css, keyframes } from '@emotion/css'
const bounce = keyframes`
from, 20%, 53%, 80%, to {
@@ -181,7 +182,7 @@ render(
```jsx
// @live
-import { css, keyframes } from 'emotion'
+import { css, keyframes } from '@emotion/css'
const bounce = keyframes({
'from, 20%, 53%, 80%, to': {
@@ -212,14 +213,14 @@ render(
)
```
-## cx
+### cx
`cx` is emotion's version of the popular [`classnames` library](https://github.com/JedWatson/classnames). The key advantage of `cx` is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.
**Combining class names**
```jsx
-import { cx, css } from 'emotion'
+import { cx, css } from '@emotion/css'
const cls1 = css`
font-size: 20px;
@@ -269,3 +270,76 @@ const cls1 = css`
className={cx(cls1, 'profile')}
/>
```
+
+## Custom Instances
+
+With `@emotion/css/create-instance`, you can provide custom options to Emotion's cache.
+
+The main `@emotion/css` entrypoint can be thought of as a call to `@emotion/css/create-instance` with sensible defaults for most applications.
+
+```javascript
+import createEmotion from '@emotion/css/create-instance'
+
+export const {
+ flush,
+ hydrate,
+ cx,
+ merge,
+ getRegisteredStyles,
+ injectGlobal,
+ keyframes,
+ css,
+ sheet,
+ cache
+} = createEmotion()
+```
+
+### Upside
+
+- Calling it directly will allow for some low level customization.
+
+- Create custom names for emotion APIs to help with migration from other, similar libraries.
+
+- Could set custom `key` to something other than `css`
+
+### Downside
+
+- Introduces some amount of complexity to your application that can vary depending on developer experience.
+
+- Required to keep up with changes in the repo and API at a lower level than if using `@emotion/css` directly
+
+### Primary use cases
+
+- Using emotion in embedded contexts such as an ``
+
+- Setting a [nonce](/packages/cache#nonce-string) on any `` tag emotion creates for security purposes
+
+- Use emotion with a container different than `document.head` for style elements
+
+- Using emotion with custom stylis plugins
+
+## Multiple instances in a single app example
+
+```jsx
+import createEmotion from '@emotion/css/create-instance'
+
+export const {
+ flush,
+ hydrate,
+ cx,
+ merge,
+ getRegisteredStyles,
+ injectGlobal,
+ keyframes,
+ css,
+ sheet,
+ cache
+} = createEmotion({
+ // The key option is required when there will be multiple instances in a single app
+ key: 'some-key'
+})
+```
+
+## Options
+
+`createEmotion` accepts the same options as [createCache](/packages/cache#options) from `@emotion/cache`.
diff --git a/packages/css/create-instance/package.json b/packages/css/create-instance/package.json
new file mode 100644
index 000000000..203a18da1
--- /dev/null
+++ b/packages/css/create-instance/package.json
@@ -0,0 +1,9 @@
+{
+ "main": "dist/emotion-css-create-instance.cjs.js",
+ "module": "dist/emotion-css-create-instance.esm.js",
+ "umd:main": "dist/emotion-css-create-instance.umd.min.js",
+ "types": "../types/create-instance",
+ "preconstruct": {
+ "umdName": "createEmotion"
+ }
+}
diff --git a/packages/css/macro.d.ts b/packages/css/macro.d.ts
index 905db52af..345f223e5 100644
--- a/packages/css/macro.d.ts
+++ b/packages/css/macro.d.ts
@@ -1,5 +1 @@
-declare module '@emotion/css/macro' {
- import css from '@emotion/css'
- export * from '@emotion/css'
- export default css
-}
+export * from '@emotion/css'
diff --git a/packages/css/macro.js b/packages/css/macro.js
index 0633d65f3..fd6bd88ce 100644
--- a/packages/css/macro.js
+++ b/packages/css/macro.js
@@ -1 +1 @@
-module.exports = require('babel-plugin-emotion').macros.css
+module.exports = require('@emotion/babel-plugin').macros.vanillaEmotion
diff --git a/packages/css/macro.js.flow b/packages/css/macro.js.flow
index b2d58a66c..63ae97e66 100644
--- a/packages/css/macro.js.flow
+++ b/packages/css/macro.js.flow
@@ -1,3 +1,2 @@
// @flow
export * from './src/index.js'
-export { default } from './src/index.js'
diff --git a/packages/css/package.json b/packages/css/package.json
index 92f784418..a93170f92 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,36 +1,61 @@
{
"name": "@emotion/css",
- "version": "10.0.27",
- "description": "a function to serialize css and object styless",
- "main": "dist/css.cjs.js",
- "module": "dist/css.esm.js",
+ "version": "11.0.0",
+ "description": "The Next Generation of CSS-in-JS.",
+ "main": "dist/emotion-css.cjs.js",
+ "module": "dist/emotion-css.esm.js",
"types": "types/index.d.ts",
- "license": "MIT",
- "repository": "https://github.com/emotion-js/emotion/tree/master/packages/css",
+ "files": [
+ "src",
+ "dist",
+ "types",
+ "macro.js",
+ "macro.d.ts",
+ "macro.js.flow",
+ "create-instance"
+ ],
"scripts": {
"test:typescript": "dtslint types"
},
"dependencies": {
- "@emotion/serialize": "^0.11.15",
- "@emotion/utils": "0.11.3",
- "babel-plugin-emotion": "^10.0.27"
+ "@emotion/babel-plugin": "^11.0.0",
+ "@emotion/cache": "^11.0.0",
+ "@emotion/serialize": "^1.0.0",
+ "@emotion/sheet": "^1.0.0",
+ "@emotion/utils": "^1.0.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@babel/core": {
+ "optional": true
+ }
},
"devDependencies": {
+ "@babel/core": "^7.7.2",
"dtslint": "^0.3.0"
},
- "publishConfig": {
- "access": "public"
- },
- "files": [
- "src",
- "dist",
- "types",
- "macro.js",
- "macro.d.ts",
- "macro.js.flow"
+ "author": "Kye Hohenberger",
+ "homepage": "https://emotion.sh",
+ "license": "MIT",
+ "repository": "https://github.com/emotion-js/emotion/tree/master/packages/emotion",
+ "keywords": [
+ "styles",
+ "emotion",
+ "react",
+ "css",
+ "css-in-js"
],
- "browser": {
- "./dist/css.cjs.js": "./dist/css.browser.cjs.js",
- "./dist/css.esm.js": "./dist/css.browser.esm.js"
+ "bugs": {
+ "url": "https://github.com/emotion-js/emotion/issues"
+ },
+ "umd:main": "dist/emotion-css.umd.min.js",
+ "preconstruct": {
+ "umdName": "emotion",
+ "entrypoints": [
+ "./index.js",
+ "./create-instance.js"
+ ]
}
}
diff --git a/packages/create-emotion/src/index.js b/packages/css/src/create-instance.js
similarity index 100%
rename from packages/create-emotion/src/index.js
rename to packages/css/src/create-instance.js
diff --git a/packages/css/src/index.js b/packages/css/src/index.js
index ac79c1dfa..523fed93e 100644
--- a/packages/css/src/index.js
+++ b/packages/css/src/index.js
@@ -1,10 +1,15 @@
// @flow
+import createEmotion from './create-instance'
-import type { Interpolation, SerializedStyles } from '@emotion/utils'
-import { serializeStyles } from '@emotion/serialize'
-
-function css(...args: Array): SerializedStyles {
- return serializeStyles(args)
-}
-
-export default css
+export const {
+ flush,
+ hydrate,
+ cx,
+ merge,
+ getRegisteredStyles,
+ injectGlobal,
+ keyframes,
+ css,
+ sheet,
+ cache
+} = createEmotion({ key: 'css' })
diff --git a/packages/emotion/test/__snapshots__/component-selector.test.js.snap b/packages/css/test/__snapshots__/component-selector.test.js.snap
similarity index 67%
rename from packages/emotion/test/__snapshots__/component-selector.test.js.snap
rename to packages/css/test/__snapshots__/component-selector.test.js.snap
index 59bfb31df..0831e50cb 100644
--- a/packages/emotion/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/css/test/__snapshots__/component-selector.test.js.snap
@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`component selector should be converted to use the emotion target className 1`] = `
-.emotion-2 .emotion-1 {
+.emotion-0 .emotion-2 {
color: red;
}
-.emotion-0 {
+.emotion-1 {
color: blue;
}
`;
diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
similarity index 88%
rename from packages/emotion/test/__snapshots__/css.test.js.snap
rename to packages/css/test/__snapshots__/css.test.js.snap
index 29a813a72..fcf9de112 100644
--- a/packages/emotion/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`css @supports 1`] = `
-@supports (display:grid) {
+@supports (display: grid) {
.emotion-0 {
display: grid;
}
@@ -83,8 +83,8 @@ exports[`css boolean as value 1`] = `
exports[`css composition stuff 1`] = `
.emotion-0 {
-webkit-box-pack: center;
- -webkit-justify-content: center;
-ms-flex-pack: center;
+ -webkit-justify-content: center;
justify-content: center;
}
@@ -96,8 +96,8 @@ exports[`css composition stuff 1`] = `
exports[`css composition stuff 2`] = `
.emotion-0 {
-webkit-box-pack: center;
- -webkit-justify-content: center;
-ms-flex-pack: center;
+ -webkit-justify-content: center;
justify-content: center;
}
@@ -115,8 +115,8 @@ exports[`css composition with objects 1`] = `
width: 30px;
height: calc(40vw - 50px);
-webkit-box-pack: center;
- -webkit-justify-content: center;
-ms-flex-pack: center;
+ -webkit-justify-content: center;
justify-content: center;
}
@@ -129,7 +129,7 @@ exports[`css composition with objects 1`] = `
color: red;
}
-@media (min-width:420px) {
+@media (min-width: 420px) {
.emotion-0 {
color: green;
}
@@ -238,7 +238,7 @@ exports[`css flushes correctly 1`] = `
exports[`css flushes correctly 2`] = `
`;
@@ -303,20 +303,20 @@ exports[`css manually use label property 1`] = `
`;
exports[`css manually use label property 2`] = `
-".css-17sz4tf-wow-cls1 {
+".css-3uek40-wow-cls1 {
color: hotpink;
}"
`;
exports[`css media query specificity 1`] = `
-".css-13ug87i-cls {
+".css-xlxbv2-cls {
width: 32px;
height: 32px;
border-radius: 50%;
}
-@media (min-width:420px) {
- .css-13ug87i-cls {
+@media (min-width: 420px) {
+ .css-xlxbv2-cls {
width: 96px;
height: 96px;
}
@@ -330,7 +330,7 @@ exports[`css media query specificity 2`] = `
border-radius: 50%;
}
-@media (min-width:420px) {
+@media (min-width: 420px) {
.emotion-0 {
width: 96px;
height: 96px;
@@ -345,7 +345,7 @@ exports[`css media query specificity 2`] = `
exports[`css multiline declaration 1`] = `
.emotion-0 {
display: grid;
- grid: 'AppBar' auto 'Main' 1fr / 1fr;
+ grid: 'AppBar' auto 'Main' 1fr/1fr;
}
-`;
-
-exports[`css nested at rules 1`] = `
-@media (min-width: 420px) {
- .glamor-0 {
- color: pink;
- }
-}
-
-@media (min-width: 420px) and (max-width: 500px) {
- .glamor-0 {
- color: hotpink;
- }
-}
-
-@supports (display: grid) {
- .glamor-0 {
- display: grid;
- }
-}
-
-@supports (display: grid) and ((display: -webkit-box) or (display: flex)) {
- .glamor-0 {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
}
}
`;
-exports[`css nested selector without parent declaration 1`] = `
-.emotion-0 {
- color: blue;
-}
-
-.emotion-1 .emotion-0 {
- color: red;
-}
-
-
-`;
-
exports[`css null rule 1`] = `
,
diff --git a/packages/emotion/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
similarity index 62%
rename from packages/emotion/test/__snapshots__/warnings.test.js.snap
rename to packages/css/test/__snapshots__/warnings.test.js.snap
index d11606330..fef01cd1b 100644
--- a/packages/emotion/test/__snapshots__/warnings.test.js.snap
+++ b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -15,7 +15,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
content: 'another thing';
content: url("http://www.example.com/test.png");
content: counter(chapter_counter);
- content: counters(section_counter,".");
+ content: counters(section_counter, ".");
content: attr(value string);
}
@@ -23,19 +23,3 @@ exports[`does not warn when valid values are passed for the content property 1`]
className="emotion-0"
/>
`;
-
-exports[`does warn when invalid values are passed for the content property 1`] = `
-.emotion-0 {
- content: this is not valid;
-}
-
-
-`;
-
-exports[`does warn when invalid values are passed for the content property 2`] = `
-
-`;
diff --git a/packages/emotion/test/component-selector.test.js b/packages/css/test/component-selector.test.js
similarity index 94%
rename from packages/emotion/test/component-selector.test.js
rename to packages/css/test/component-selector.test.js
index c3be66c95..ce5bbbada 100644
--- a/packages/emotion/test/component-selector.test.js
+++ b/packages/css/test/component-selector.test.js
@@ -2,7 +2,7 @@ import 'test-utils/legacy-env'
import React from 'react'
import styled from '@emotion/styled'
import renderer from 'react-test-renderer'
-import { css } from 'emotion'
+import { css } from '@emotion/css'
describe('component selector', () => {
test('should be converted to use the emotion target className', () => {
diff --git a/packages/emotion/test/css.test.js b/packages/css/test/css.test.js
similarity index 96%
rename from packages/emotion/test/css.test.js
rename to packages/css/test/css.test.js
index c09b468f8..b32630a6d 100644
--- a/packages/emotion/test/css.test.js
+++ b/packages/css/test/css.test.js
@@ -2,7 +2,7 @@
import 'test-utils/legacy-env'
import React from 'react'
import renderer from 'react-test-renderer'
-import { css, flush, sheet } from 'emotion'
+import { css, flush, sheet } from '@emotion/css'
describe('css', () => {
test('float property', () => {
@@ -264,24 +264,6 @@ describe('css', () => {
const tree2 = renderer.create(
).toJSON()
expect(tree2).toMatchSnapshot()
})
- test('nested selector without parent declaration', () => {
- const cls1 = css`
- color: blue;
- `
- const cls2 = css`
- & .${cls1} {
- color: red;
- }
- `
- const tree = renderer
- .create(
-
- )
- .toJSON()
- expect(tree).toMatchSnapshot()
- })
test('null rule', () => {
const cls1 = css()
diff --git a/packages/emotion/test/cx.test.js b/packages/css/test/cx.test.js
similarity index 98%
rename from packages/emotion/test/cx.test.js
rename to packages/css/test/cx.test.js
index ba814b0cf..fc074cbba 100644
--- a/packages/emotion/test/cx.test.js
+++ b/packages/css/test/cx.test.js
@@ -2,7 +2,7 @@
import 'test-utils/legacy-env'
import React from 'react'
import renderer from 'react-test-renderer'
-import { css, cx } from 'emotion'
+import { css, cx } from '@emotion/css'
describe('cx', () => {
test('merge 2', () => {
diff --git a/packages/emotion/test/inject-global.test.js b/packages/css/test/inject-global.test.js
similarity index 95%
rename from packages/emotion/test/inject-global.test.js
rename to packages/css/test/inject-global.test.js
index bc3b779a1..212c4937d 100644
--- a/packages/emotion/test/inject-global.test.js
+++ b/packages/css/test/inject-global.test.js
@@ -1,6 +1,6 @@
// @flow
import 'test-utils/legacy-env'
-import { injectGlobal, sheet, flush, css } from 'emotion'
+import { injectGlobal, sheet, flush, css } from '@emotion/css'
describe('injectGlobal', () => {
afterEach(() => {
diff --git a/packages/create-emotion/test/__snapshots__/css.test.js.snap b/packages/css/test/instance/__snapshots__/css.test.js.snap
similarity index 82%
rename from packages/create-emotion/test/__snapshots__/css.test.js.snap
rename to packages/css/test/instance/__snapshots__/css.test.js.snap
index dd8d2be7c..ec57cd312 100644
--- a/packages/create-emotion/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/instance/__snapshots__/css.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`css @supports 1`] = `
-@supports (display:grid) {
+@supports (display: grid) {
.emotion-0 {
display: grid;
}
@@ -35,8 +35,6 @@ exports[`css array with explicit true 1`] = `
exports[`css auto px 1`] = `
.emotion-0 {
display: flex;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
font-size: 10px;
}
@@ -58,9 +56,6 @@ exports[`css boolean as value 1`] = `
exports[`css composition stuff 1`] = `
.emotion-0 {
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
@@ -71,9 +66,6 @@ exports[`css composition stuff 1`] = `
exports[`css composition stuff 2`] = `
.emotion-0 {
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
@@ -87,24 +79,21 @@ exports[`css composition with objects 1`] = `
display: flex;
width: 30px;
height: calc(40vw - 50px);
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
.emotion-0:hover {
- color: blue;
+ color: hotpink;
}
.emotion-0:after {
content: " ";
- color: red;
+ color: hotpink;
}
-@media (min-width:420px) {
+@media (min-width: 420px) {
.emotion-0 {
- color: green;
+ color: hotpink;
}
}
@@ -179,7 +168,7 @@ exports[`css falsy value in nested selector on object 1`] = `
exports[`css float property 1`] = `
.emotion-0 {
- float: right;
+ float: left;
}
`;
-exports[`css nested selector without parent declaration 1`] = `
-.emotion-0 {
- color: blue;
-}
-
-.emotion-1 .emotion-0 {
- color: red;
-}
-
-
-`;
-
exports[`css null rule 1`] = `
+
+
+
+
+`;
+
+exports[`hydration only inserts rules that are not in the critical css 2`] = `
+"@font-face {
+ font-family: 'Patrick Hand SC';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
+ unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
+}
+
+@keyframes animation-i9f7qw-bounce {
+ from, 20%, 53%, 80%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 40%, 43% {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -30px, 0);
+ }
+
+ 70% {
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -15px, 0);
+ }
+
+ 90% {
+ transform: translate3d(0, -4px, 0);
+ }
+}
+
+.some-key-1icu1xs-hoverStyles {
+ color: hotpink;
+}
+
+.some-key-1icu1xs-hoverStyles:hover {
+ color: hotpink;
+ background-color: lightgray;
+ border-color: aqua;
+ box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+}
+
+.some-key-k26awr {
+ display: none;
+}
+
+.no-prefix {
+ display: flex;
+ justify-content: center;
+}
+
+.some-key-14e1j2p-hoverStyles-Something_Main {
+ color: hotpink;
+ display: flex;
+}
+
+.some-key-14e1j2p-hoverStyles-Something_Main:hover {
+ color: hotpink;
+ background-color: lightgray;
+ border-color: aqua;
+ box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+}
+
+.some-key-1h1w8ez-Image {
+ animation: animation-i9f7qw-bounce;
+ border-radius: 50%;
+ height: 50px;
+ width: 50px;
+ background-color: red;
+}
+
+.some-global-200 {
+ padding: 0;
+ margin: 200;
+}
+
+.some-key-127stik {
+ color: hotpink;
+}
+
+.some-global-199 {
+ padding: 0;
+ margin: 199;
+}
+
+.some-key-9rpmvg {
+ color: hotpink;
+}
+
+.some-global-198 {
+ padding: 0;
+ margin: 198;
+}
+
+.some-key-1hzr4kc {
+ color: hotpink;
+}
+
+.some-global-197 {
+ padding: 0;
+ margin: 197;
+}
+
+.some-key-ogzoe7 {
+ color: hotpink;
+}
+
+.some-global-196 {
+ padding: 0;
+ margin: 196;
+}
+
+.some-key-6ng8h1 {
+ color: hotpink;
+}
+
+.some-global-195 {
+ padding: 0;
+ margin: 195;
+}
+
+.some-key-zv4lth {
+ color: hotpink;
+}
+
+.some-global-194 {
+ padding: 0;
+ margin: 194;
+}
+
+.some-key-1ui45lz {
+ color: hotpink;
+}
+
+.some-global-193 {
+ padding: 0;
+ margin: 193;
+}
+
+.some-key-1h86azu {
+ color: hotpink;
+}
+
+.some-global-192 {
+ padding: 0;
+ margin: 192;
+}
+
+.some-key-1piy66f {
+ color: hotpink;
+}
+
+.some-global-191 {
+ padding: 0;
+ margin: 191;
+}
+
+.some-key-a19qo7 {
+ color: hotpink;
+}
+
+.some-global-190 {
+ padding: 0;
+ margin: 190;
+}
+
+.some-key-wj15j7 {
+ color: hotpink;
+}
+
+.some-global-189 {
+ padding: 0;
+ margin: 189;
+}
+
+.some-key-1hrwn8e {
+ color: hotpink;
+}
+
+.some-global-188 {
+ padding: 0;
+ margin: 188;
+}
+
+.some-key-17myt6d {
+ color: hotpink;
+}
+
+.some-global-187 {
+ padding: 0;
+ margin: 187;
+}
+
+.some-key-2jtlz5 {
+ color: hotpink;
+}
+
+.some-global-186 {
+ padding: 0;
+ margin: 186;
+}
+
+.some-key-1xu1wg1 {
+ color: hotpink;
+}
+
+.some-global-185 {
+ padding: 0;
+ margin: 185;
+}
+
+.some-key-1wmxn4h {
+ color: hotpink;
+}
+
+.some-global-184 {
+ padding: 0;
+ margin: 184;
+}
+
+.some-key-lrd20s {
+ color: hotpink;
+}
+
+.some-global-183 {
+ padding: 0;
+ margin: 183;
+}
+
+.some-key-r7njcf {
+ color: hotpink;
+}
+
+.some-global-182 {
+ padding: 0;
+ margin: 182;
+}
+
+.some-key-9lx5bg {
+ color: hotpink;
+}
+
+.some-global-181 {
+ padding: 0;
+ margin: 181;
+}
+
+.some-key-16v8jwc {
+ color: hotpink;
+}
+
+.some-global-180 {
+ padding: 0;
+ margin: 180;
+}
+
+.some-key-14fn903 {
+ color: hotpink;
+}
+
+.some-global-179 {
+ padding: 0;
+ margin: 179;
+}
+
+.some-key-1h1mfz2 {
+ color: hotpink;
+}
+
+.some-global-178 {
+ padding: 0;
+ margin: 178;
+}
+
+.some-key-11mzquy {
+ color: hotpink;
+}
+
+.some-global-177 {
+ padding: 0;
+ margin: 177;
+}
+
+.some-key-3930ld {
+ color: hotpink;
+}
+
+.some-global-176 {
+ padding: 0;
+ margin: 176;
+}
+
+.some-key-1lby04m {
+ color: hotpink;
+}
+
+.some-global-175 {
+ padding: 0;
+ margin: 175;
+}
+
+.some-key-hp7r6o {
+ color: hotpink;
+}
+
+.some-global-174 {
+ padding: 0;
+ margin: 174;
+}
+
+.some-key-98uzk5 {
+ color: hotpink;
+}
+
+.some-global-173 {
+ padding: 0;
+ margin: 173;
+}
+
+.some-key-1krg3ya {
+ color: hotpink;
+}
+
+.some-global-172 {
+ padding: 0;
+ margin: 172;
+}
+
+.some-key-1ktw7xe {
+ color: hotpink;
+}
+
+.some-global-171 {
+ padding: 0;
+ margin: 171;
+}
+
+.some-key-ck0owr {
+ color: hotpink;
+}
+
+.some-global-170 {
+ padding: 0;
+ margin: 170;
+}
+
+.some-key-1xcxshi {
+ color: hotpink;
+}
+
+.some-global-169 {
+ padding: 0;
+ margin: 169;
+}
+
+.some-key-1ps9cly {
+ color: hotpink;
+}
+
+.some-global-168 {
+ padding: 0;
+ margin: 168;
+}
+
+.some-key-1yvnnz5 {
+ color: hotpink;
+}
+
+.some-global-167 {
+ padding: 0;
+ margin: 167;
+}
+
+.some-key-1c10kwm {
+ color: hotpink;
+}
+
+.some-global-166 {
+ padding: 0;
+ margin: 166;
+}
+
+.some-key-hkdnb5 {
+ color: hotpink;
+}
+
+.some-global-165 {
+ padding: 0;
+ margin: 165;
+}
+
+.some-key-1v2yh0n {
+ color: hotpink;
+}
+
+.some-global-164 {
+ padding: 0;
+ margin: 164;
+}
+
+.some-key-1jzftor {
+ color: hotpink;
+}
+
+.some-global-163 {
+ padding: 0;
+ margin: 163;
+}
+
+.some-key-wr17pn {
+ color: hotpink;
+}
+
+.some-global-162 {
+ padding: 0;
+ margin: 162;
+}
+
+.some-key-hf7itv {
+ color: hotpink;
+}
+
+.some-global-161 {
+ padding: 0;
+ margin: 161;
+}
+
+.some-key-6qzhcg {
+ color: hotpink;
+}
+
+.some-global-160 {
+ padding: 0;
+ margin: 160;
+}
+
+.some-key-1avzbzg {
+ color: hotpink;
+}
+
+.some-global-159 {
+ padding: 0;
+ margin: 159;
+}
+
+.some-key-o92y19 {
+ color: hotpink;
+}
+
+.some-global-158 {
+ padding: 0;
+ margin: 158;
+}
+
+.some-key-1ljsuqn {
+ color: hotpink;
+}
+
+.some-global-157 {
+ padding: 0;
+ margin: 157;
+}
+
+.some-key-9zagsq {
+ color: hotpink;
+}
+
+.some-global-156 {
+ padding: 0;
+ margin: 156;
+}
+
+.some-key-1ypl0i8 {
+ color: hotpink;
+}
+
+.some-global-155 {
+ padding: 0;
+ margin: 155;
+}
+
+.some-key-rzsrsa {
+ color: hotpink;
+}
+
+.some-global-154 {
+ padding: 0;
+ margin: 154;
+}
+
+.some-key-ce7d51 {
+ color: hotpink;
+}
+
+.some-global-153 {
+ padding: 0;
+ margin: 153;
+}
+
+.some-key-tknw4p {
+ color: hotpink;
+}
+
+.some-global-152 {
+ padding: 0;
+ margin: 152;
+}
+
+.some-key-zgq7e2 {
+ color: hotpink;
+}
+
+.some-global-151 {
+ padding: 0;
+ margin: 151;
+}
+
+.some-key-16xxcse {
+ color: hotpink;
+}
+
+.some-global-150 {
+ padding: 0;
+ margin: 150;
+}
+
+.some-key-rvw1un {
+ color: hotpink;
+}
+
+.some-global-149 {
+ padding: 0;
+ margin: 149;
+}
+
+.some-key-br1uza {
+ color: hotpink;
+}
+
+.some-global-148 {
+ padding: 0;
+ margin: 148;
+}
+
+.some-key-1o91asl {
+ color: hotpink;
+}
+
+.some-global-147 {
+ padding: 0;
+ margin: 147;
+}
+
+.some-key-1nn9pws {
+ color: hotpink;
+}
+
+.some-global-146 {
+ padding: 0;
+ margin: 146;
+}
+
+.some-key-upbaf3 {
+ color: hotpink;
+}
+
+.some-global-145 {
+ padding: 0;
+ margin: 145;
+}
+
+.some-key-10168f0 {
+ color: hotpink;
+}
+
+.some-global-144 {
+ padding: 0;
+ margin: 144;
+}
+
+.some-key-18beinc {
+ color: hotpink;
+}
+
+.some-global-143 {
+ padding: 0;
+ margin: 143;
+}
+
+.some-key-11m1dja {
+ color: hotpink;
+}
+
+.some-global-142 {
+ padding: 0;
+ margin: 142;
+}
+
+.some-key-h4at5s {
+ color: hotpink;
+}
+
+.some-global-141 {
+ padding: 0;
+ margin: 141;
+}
+
+.some-key-ejnakw {
+ color: hotpink;
+}
+
+.some-global-140 {
+ padding: 0;
+ margin: 140;
+}
+
+.some-key-1o2ovve {
+ color: hotpink;
+}
+
+.some-global-139 {
+ padding: 0;
+ margin: 139;
+}
+
+.some-key-ac9phq {
+ color: hotpink;
+}
+
+.some-global-138 {
+ padding: 0;
+ margin: 138;
+}
+
+.some-key-1phm45w {
+ color: hotpink;
+}
+
+.some-global-137 {
+ padding: 0;
+ margin: 137;
+}
+
+.some-key-159l0ul {
+ color: hotpink;
+}
+
+.some-global-136 {
+ padding: 0;
+ margin: 136;
+}
+
+.some-key-ia21oa {
+ color: hotpink;
+}
+
+.some-global-135 {
+ padding: 0;
+ margin: 135;
+}
+
+.some-key-tz2duq {
+ color: hotpink;
+}
+
+.some-global-134 {
+ padding: 0;
+ margin: 134;
+}
+
+.some-key-4xg4ag {
+ color: hotpink;
+}
+
+.some-global-133 {
+ padding: 0;
+ margin: 133;
+}
+
+.some-key-pur9fb {
+ color: hotpink;
+}
+
+.some-global-132 {
+ padding: 0;
+ margin: 132;
+}
+
+.some-key-6nme6c {
+ color: hotpink;
+}
+
+.some-global-131 {
+ padding: 0;
+ margin: 131;
+}
+
+.some-key-13nv4rl {
+ color: hotpink;
+}
+
+.some-global-130 {
+ padding: 0;
+ margin: 130;
+}
+
+.some-key-155bmea {
+ color: hotpink;
+}
+
+.some-global-129 {
+ padding: 0;
+ margin: 129;
+}
+
+.some-key-10s2f9x {
+ color: hotpink;
+}
+
+.some-global-128 {
+ padding: 0;
+ margin: 128;
+}
+
+.some-key-178vhlt {
+ color: hotpink;
+}
+
+.some-global-127 {
+ padding: 0;
+ margin: 127;
+}
+
+.some-key-1hsnkst {
+ color: hotpink;
+}
+
+.some-global-126 {
+ padding: 0;
+ margin: 126;
+}
+
+.some-key-zuvm9o {
+ color: hotpink;
+}
+
+.some-global-125 {
+ padding: 0;
+ margin: 125;
+}
+
+.some-key-1tl89bm {
+ color: hotpink;
+}
+
+.some-global-124 {
+ padding: 0;
+ margin: 124;
+}
+
+.some-key-wpx7q8 {
+ color: hotpink;
+}
+
+.some-global-123 {
+ padding: 0;
+ margin: 123;
+}
+
+.some-key-1tehwar {
+ color: hotpink;
+}
+
+.some-global-122 {
+ padding: 0;
+ margin: 122;
+}
+
+.some-key-ms9j35 {
+ color: hotpink;
+}
+
+.some-global-121 {
+ padding: 0;
+ margin: 121;
+}
+
+.some-key-m4u91z {
+ color: hotpink;
+}
+
+.some-global-120 {
+ padding: 0;
+ margin: 120;
+}
+
+.some-key-3ci19s {
+ color: hotpink;
+}
+
+.some-global-119 {
+ padding: 0;
+ margin: 119;
+}
+
+.some-key-evutcw {
+ color: hotpink;
+}
+
+.some-global-118 {
+ padding: 0;
+ margin: 118;
+}
+
+.some-key-1g07rpc {
+ color: hotpink;
+}
+
+.some-global-117 {
+ padding: 0;
+ margin: 117;
+}
+
+.some-key-16ejwut {
+ color: hotpink;
+}
+
+.some-global-116 {
+ padding: 0;
+ margin: 116;
+}
+
+.some-key-6gxm9 {
+ color: hotpink;
+}
+
+.some-global-115 {
+ padding: 0;
+ margin: 115;
+}
+
+.some-key-1mbin8s {
+ color: hotpink;
+}
+
+.some-global-114 {
+ padding: 0;
+ margin: 114;
+}
+
+.some-key-1cj8bm0 {
+ color: hotpink;
+}
+
+.some-global-113 {
+ padding: 0;
+ margin: 113;
+}
+
+.some-key-r5e3ls {
+ color: hotpink;
+}
+
+.some-global-112 {
+ padding: 0;
+ margin: 112;
+}
+
+.some-key-uupi2e {
+ color: hotpink;
+}
+
+.some-global-111 {
+ padding: 0;
+ margin: 111;
+}
+
+.some-key-zr22cf {
+ color: hotpink;
+}
+
+.some-global-110 {
+ padding: 0;
+ margin: 110;
+}
+
+.some-key-13wmhd1 {
+ color: hotpink;
+}
+
+.some-global-109 {
+ padding: 0;
+ margin: 109;
+}
+
+.some-key-i8sgdi {
+ color: hotpink;
+}
+
+.some-global-108 {
+ padding: 0;
+ margin: 108;
+}
+
+.some-key-k0avx5 {
+ color: hotpink;
+}
+
+.some-global-107 {
+ padding: 0;
+ margin: 107;
+}
+
+.some-key-6dl9n7 {
+ color: hotpink;
+}
+
+.some-global-106 {
+ padding: 0;
+ margin: 106;
+}
+
+.some-key-1fz7vvs {
+ color: hotpink;
+}
+
+.some-global-105 {
+ padding: 0;
+ margin: 105;
+}
+
+.some-key-17n3gda {
+ color: hotpink;
+}
+
+.some-global-104 {
+ padding: 0;
+ margin: 104;
+}
+
+.some-key-1qfsvxb {
+ color: hotpink;
+}
+
+.some-global-103 {
+ padding: 0;
+ margin: 103;
+}
+
+.some-key-4tl6t0 {
+ color: hotpink;
+}
+
+.some-global-102 {
+ padding: 0;
+ margin: 102;
+}
+
+.some-key-1rryha9 {
+ color: hotpink;
+}
+
+.some-global-101 {
+ padding: 0;
+ margin: 101;
+}
+
+.some-key-ejgs3d {
+ color: hotpink;
+}
+
+.some-global-100 {
+ padding: 0;
+ margin: 100;
+}
+
+.some-key-1h1preu {
+ color: hotpink;
+}
+
+.some-global-99 {
+ padding: 0;
+ margin: 99;
+}
+
+.some-key-1ewulib {
+ color: hotpink;
+}
+
+.some-global-98 {
+ padding: 0;
+ margin: 98;
+}
+
+.some-key-1g9aqxv {
+ color: hotpink;
+}
+
+.some-global-97 {
+ padding: 0;
+ margin: 97;
+}
+
+.some-key-1lxxdaw {
+ color: hotpink;
+}
+
+.some-global-96 {
+ padding: 0;
+ margin: 96;
+}
+
+.some-key-x21xi2 {
+ color: hotpink;
+}
+
+.some-global-95 {
+ padding: 0;
+ margin: 95;
+}
+
+.some-key-133obvl {
+ color: hotpink;
+}
+
+.some-global-94 {
+ padding: 0;
+ margin: 94;
+}
+
+.some-key-o9oiih {
+ color: hotpink;
+}
+
+.some-global-93 {
+ padding: 0;
+ margin: 93;
+}
+
+.some-key-16h21pl {
+ color: hotpink;
+}
+
+.some-global-92 {
+ padding: 0;
+ margin: 92;
+}
+
+.some-key-scfkxf {
+ color: hotpink;
+}
+
+.some-global-91 {
+ padding: 0;
+ margin: 91;
+}
+
+.some-key-1u10ji2 {
+ color: hotpink;
+}
+
+.some-global-90 {
+ padding: 0;
+ margin: 90;
+}
+
+.some-key-i9peew {
+ color: hotpink;
+}
+
+.some-global-89 {
+ padding: 0;
+ margin: 89;
+}
+
+.some-key-13q89pq {
+ color: hotpink;
+}
+
+.some-global-88 {
+ padding: 0;
+ margin: 88;
+}
+
+.some-key-qcun1q {
+ color: hotpink;
+}
+
+.some-global-87 {
+ padding: 0;
+ margin: 87;
+}
+
+.some-key-eb1awr {
+ color: hotpink;
+}
+
+.some-global-86 {
+ padding: 0;
+ margin: 86;
+}
+
+.some-key-1sllz3x {
+ color: hotpink;
+}
+
+.some-global-85 {
+ padding: 0;
+ margin: 85;
+}
+
+.some-key-1oevn2u {
+ color: hotpink;
+}
+
+.some-global-84 {
+ padding: 0;
+ margin: 84;
+}
+
+.some-key-zjzdc9 {
+ color: hotpink;
+}
+
+.some-global-83 {
+ padding: 0;
+ margin: 83;
+}
+
+.some-key-6wqs48 {
+ color: hotpink;
+}
+
+.some-global-82 {
+ padding: 0;
+ margin: 82;
+}
+
+.some-key-1jrdvsc {
+ color: hotpink;
+}
+
+.some-global-81 {
+ padding: 0;
+ margin: 81;
+}
+
+.some-key-1vea8p9 {
+ color: hotpink;
+}
+
+.some-global-80 {
+ padding: 0;
+ margin: 80;
+}
+
+.some-key-vekko5 {
+ color: hotpink;
+}
+
+.some-global-79 {
+ padding: 0;
+ margin: 79;
+}
+
+.some-key-1ixaqkz {
+ color: hotpink;
+}
+
+.some-global-78 {
+ padding: 0;
+ margin: 78;
+}
+
+.some-key-1juqtoj {
+ color: hotpink;
+}
+
+.some-global-77 {
+ padding: 0;
+ margin: 77;
+}
+
+.some-key-cyahzj {
+ color: hotpink;
+}
+
+.some-global-76 {
+ padding: 0;
+ margin: 76;
+}
+
+.some-key-1559ay6 {
+ color: hotpink;
+}
+
+.some-global-75 {
+ padding: 0;
+ margin: 75;
+}
+
+.some-key-kgdim {
+ color: hotpink;
+}
+
+.some-global-74 {
+ padding: 0;
+ margin: 74;
+}
+
+.some-key-18cyyxf {
+ color: hotpink;
+}
+
+.some-global-73 {
+ padding: 0;
+ margin: 73;
+}
+
+.some-key-z0i9x2 {
+ color: hotpink;
+}
+
+.some-global-72 {
+ padding: 0;
+ margin: 72;
+}
+
+.some-key-gkpvss {
+ color: hotpink;
+}
+
+.some-global-71 {
+ padding: 0;
+ margin: 71;
+}
+
+.some-key-weerr6 {
+ color: hotpink;
+}
+
+.some-global-70 {
+ padding: 0;
+ margin: 70;
+}
+
+.some-key-sw7yje {
+ color: hotpink;
+}
+
+.some-global-69 {
+ padding: 0;
+ margin: 69;
+}
+
+.some-key-12qk6uq {
+ color: hotpink;
+}
+
+.some-global-68 {
+ padding: 0;
+ margin: 68;
+}
+
+.some-key-8e7cu8 {
+ color: hotpink;
+}
+
+.some-global-67 {
+ padding: 0;
+ margin: 67;
+}
+
+.some-key-6bla26 {
+ color: hotpink;
+}
+
+.some-global-66 {
+ padding: 0;
+ margin: 66;
+}
+
+.some-key-35jwvs {
+ color: hotpink;
+}
+
+.some-global-65 {
+ padding: 0;
+ margin: 65;
+}
+
+.some-key-1nrgdft {
+ color: hotpink;
+}
+
+.some-global-64 {
+ padding: 0;
+ margin: 64;
+}
+
+.some-key-1g4joaz {
+ color: hotpink;
+}
+
+.some-global-63 {
+ padding: 0;
+ margin: 63;
+}
+
+.some-key-3zq00y {
+ color: hotpink;
+}
+
+.some-global-62 {
+ padding: 0;
+ margin: 62;
+}
+
+.some-key-1gk0yhg {
+ color: hotpink;
+}
+
+.some-global-61 {
+ padding: 0;
+ margin: 61;
+}
+
+.some-key-65xyj4 {
+ color: hotpink;
+}
+
+.some-global-60 {
+ padding: 0;
+ margin: 60;
+}
+
+.some-key-17wkfhz {
+ color: hotpink;
+}
+
+.some-global-59 {
+ padding: 0;
+ margin: 59;
+}
+
+.some-key-w9l44e {
+ color: hotpink;
+}
+
+.some-global-58 {
+ padding: 0;
+ margin: 58;
+}
+
+.some-key-i5ss3y {
+ color: hotpink;
+}
+
+.some-global-57 {
+ padding: 0;
+ margin: 57;
+}
+
+.some-key-qua63f {
+ color: hotpink;
+}
+
+.some-global-56 {
+ padding: 0;
+ margin: 56;
+}
+
+.some-key-1sjj1qr {
+ color: hotpink;
+}
+
+.some-global-55 {
+ padding: 0;
+ margin: 55;
+}
+
+.some-key-90js15 {
+ color: hotpink;
+}
+
+.some-global-54 {
+ padding: 0;
+ margin: 54;
+}
+
+.some-key-1mzlono {
+ color: hotpink;
+}
+
+.some-global-53 {
+ padding: 0;
+ margin: 53;
+}
+
+.some-key-bjhszk {
+ color: hotpink;
+}
+
+.some-global-52 {
+ padding: 0;
+ margin: 52;
+}
+
+.some-key-ja3cay {
+ color: hotpink;
+}
+
+.some-global-51 {
+ padding: 0;
+ margin: 51;
+}
+
+.some-key-148np4p {
+ color: hotpink;
+}
+
+.some-global-50 {
+ padding: 0;
+ margin: 50;
+}
+
+.some-key-f4eyff {
+ color: hotpink;
+}
+
+.some-global-49 {
+ padding: 0;
+ margin: 49;
+}
+
+.some-key-1rl24dh {
+ color: hotpink;
+}
+
+.some-global-48 {
+ padding: 0;
+ margin: 48;
+}
+
+.some-key-c5gtq4 {
+ color: hotpink;
+}
+
+.some-global-47 {
+ padding: 0;
+ margin: 47;
+}
+
+.some-key-zn3vlf {
+ color: hotpink;
+}
+
+.some-global-46 {
+ padding: 0;
+ margin: 46;
+}
+
+.some-key-10y72es {
+ color: hotpink;
+}
+
+.some-global-45 {
+ padding: 0;
+ margin: 45;
+}
+
+.some-key-bm2jv1 {
+ color: hotpink;
+}
+
+.some-global-44 {
+ padding: 0;
+ margin: 44;
+}
+
+.some-key-11jkxwc {
+ color: hotpink;
+}
+
+.some-global-43 {
+ padding: 0;
+ margin: 43;
+}
+
+.some-key-2u5nz5 {
+ color: hotpink;
+}
+
+.some-global-42 {
+ padding: 0;
+ margin: 42;
+}
+
+.some-key-a8aq2j {
+ color: hotpink;
+}
+
+.some-global-41 {
+ padding: 0;
+ margin: 41;
+}
+
+.some-key-z8kcia {
+ color: hotpink;
+}
+
+.some-global-40 {
+ padding: 0;
+ margin: 40;
+}
+
+.some-key-1df0hco {
+ color: hotpink;
+}
+
+.some-global-39 {
+ padding: 0;
+ margin: 39;
+}
+
+.some-key-11rstpz {
+ color: hotpink;
+}
+
+.some-global-38 {
+ padding: 0;
+ margin: 38;
+}
+
+.some-key-1w071u6 {
+ color: hotpink;
+}
+
+.some-global-37 {
+ padding: 0;
+ margin: 37;
+}
+
+.some-key-1luo8x6 {
+ color: hotpink;
+}
+
+.some-global-36 {
+ padding: 0;
+ margin: 36;
+}
+
+.some-key-1ts80l8 {
+ color: hotpink;
+}
-
-
-
-
-
+.some-global-35 {
+ padding: 0;
+ margin: 35;
+}
-`;
+.some-key-duffth {
+ color: hotpink;
+}
-exports[`hydration only inserts rules that are not in the critical css 2`] = `
-".some-key-1icu1xs-hoverStyles {
+.some-global-34 {
+ padding: 0;
+ margin: 34;
+}
+
+.some-key-tt1okc {
color: hotpink;
}
-.some-key-1icu1xs-hoverStyles:hover {
- color: white;
- background-color: lightgray;
- border-color: aqua;
- box-shadow: 15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+.some-global-33 {
+ padding: 0;
+ margin: 33;
}
-.some-key-k26awr {
- display: none;
-}"
-`;
+.some-key-tax4hg {
+ color: hotpink;
+}
-exports[`hydration only inserts rules that are not in the critical css 3`] = `
-"@font-face {
+.some-global-32 {
+ padding: 0;
+ margin: 32;
+}
+
+.some-key-1k8drt4 {
+ color: hotpink;
+}
+
+.some-global-31 {
+ padding: 0;
+ margin: 31;
+}
+
+.some-key-qfe6wx {
+ color: hotpink;
+}
+
+.some-global-30 {
+ padding: 0;
+ margin: 30;
+}
+
+.some-key-jhchv1 {
+ color: hotpink;
+}
+
+.some-global-29 {
+ padding: 0;
+ margin: 29;
+}
+
+.some-key-1soonbp {
+ color: hotpink;
+}
+
+.some-global-28 {
+ padding: 0;
+ margin: 28;
+}
+
+.some-key-1vibp0n {
+ color: hotpink;
+}
+
+.some-global-27 {
+ padding: 0;
+ margin: 27;
+}
+
+.some-key-13a4u4g {
+ color: hotpink;
+}
+
+.some-global-26 {
+ padding: 0;
+ margin: 26;
+}
+
+.some-key-99b9o6 {
+ color: hotpink;
+}
+
+.some-global-25 {
+ padding: 0;
+ margin: 25;
+}
+
+.some-key-mccdz6 {
+ color: hotpink;
+}
+
+.some-global-24 {
+ padding: 0;
+ margin: 24;
+}
+
+.some-key-vh0ult {
+ color: hotpink;
+}
+
+.some-global-23 {
+ padding: 0;
+ margin: 23;
+}
+
+.some-key-1jkc31r {
+ color: hotpink;
+}
+
+.some-global-22 {
+ padding: 0;
+ margin: 22;
+}
+
+.some-key-a00fqn {
+ color: hotpink;
+}
+
+.some-global-21 {
+ padding: 0;
+ margin: 21;
+}
+
+.some-key-jkplpw {
+ color: hotpink;
+}
+
+.some-global-20 {
+ padding: 0;
+ margin: 20;
+}
+
+.some-key-10sw1k2 {
+ color: hotpink;
+}
+
+.some-global-19 {
+ padding: 0;
+ margin: 19;
+}
+
+.some-key-gs8wd6 {
+ color: hotpink;
+}
+
+.some-global-18 {
+ padding: 0;
+ margin: 18;
+}
+
+.some-key-1kgu7pf {
+ color: hotpink;
+}
+
+.some-global-17 {
+ padding: 0;
+ margin: 17;
+}
+
+.some-key-abzsl4 {
+ color: hotpink;
+}
+
+.some-global-16 {
+ padding: 0;
+ margin: 16;
+}
+
+.some-key-1k6hdda {
+ color: hotpink;
+}
+
+.some-global-15 {
+ padding: 0;
+ margin: 15;
+}
+
+.some-key-9gkufl {
+ color: hotpink;
+}
+
+.some-global-14 {
+ padding: 0;
+ margin: 14;
+}
+
+.some-key-1ewesh6 {
+ color: hotpink;
+}
+
+.some-global-13 {
+ padding: 0;
+ margin: 13;
+}
+
+.some-key-9e7j34 {
+ color: hotpink;
+}
+
+.some-global-12 {
+ padding: 0;
+ margin: 12;
+}
+
+.some-key-1ta3m3l {
+ color: hotpink;
+}
+
+.some-global-11 {
+ padding: 0;
+ margin: 11;
+}
+
+.some-key-mke1vr {
+ color: hotpink;
+}
+
+.some-global-10 {
+ padding: 0;
+ margin: 10;
+}
+
+.some-key-138g2ic {
+ color: hotpink;
+}
+
+.some-global-9 {
+ padding: 0;
+ margin: 9;
+}
+
+.some-key-1ambdpy {
+ color: hotpink;
+}
+
+.some-global-8 {
+ padding: 0;
+ margin: 8;
+}
+
+.some-key-36wzef {
+ color: hotpink;
+}
+
+.some-global-7 {
+ padding: 0;
+ margin: 7;
+}
+
+.some-key-1vluzwd {
+ color: hotpink;
+}
+
+.some-global-6 {
+ padding: 0;
+ margin: 6;
+}
+
+.some-key-1o5nzp5 {
+ color: hotpink;
+}
+
+.some-global-5 {
+ padding: 0;
+ margin: 5;
+}
+
+.some-key-xnoh5a {
+ color: hotpink;
+}
+
+.some-global-4 {
+ padding: 0;
+ margin: 4;
+}
+
+.some-key-1gl3nb5 {
+ color: hotpink;
+}
+
+.some-global-3 {
+ padding: 0;
+ margin: 3;
+}
+
+.some-key-1etkgh2 {
+ color: hotpink;
+}
+
+.some-global-2 {
+ padding: 0;
+ margin: 2;
+}
+
+.some-key-191jeup {
+ color: hotpink;
+}
+
+.some-global-1 {
+ padding: 0;
+ margin: 1;
+}
+
+.some-key-1wes8i6 {
+ color: hotpink;
+}
+
+@font-face {
font-family: 'Patrick Hand SC';
font-style: normal;
font-weight: 400;
- src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
- unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf, U+2c60-2c7f,U+A720-A7FF;
+ src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
+ unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
}
-@-webkit-keyframes animation-i9f7qw-bounce {
+@keyframes animation-i9f7qw-bounce {
from, 20%, 53%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translate3d(0, 0, 0);
}
40%, 43% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-30px,0);
- -ms-transform: translate3d(0,-30px,0);
- transform: translate3d(0,-30px,0);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -30px, 0);
}
70% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-15px,0);
- -ms-transform: translate3d(0,-15px,0);
- transform: translate3d(0,-15px,0);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -15px, 0);
}
90% {
- -webkit-transform: translate3d(0,-4px,0);
- -ms-transform: translate3d(0,-4px,0);
- transform: translate3d(0,-4px,0);
+ transform: translate3d(0, -4px, 0);
}
}
-@keyframes animation-i9f7qw-bounce {
- from, 20%, 53%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- }
-
- 40%, 43% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-30px,0);
- -ms-transform: translate3d(0,-30px,0);
- transform: translate3d(0,-30px,0);
- }
+.some-key-1icu1xs-hoverStyles {
+ color: hotpink;
+}
- 70% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-15px,0);
- -ms-transform: translate3d(0,-15px,0);
- transform: translate3d(0,-15px,0);
- }
+.some-key-1icu1xs-hoverStyles:hover {
+ color: hotpink;
+ background-color: lightgray;
+ border-color: aqua;
+ box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+}
- 90% {
- -webkit-transform: translate3d(0,-4px,0);
- -ms-transform: translate3d(0,-4px,0);
- transform: translate3d(0,-4px,0);
- }
+.some-key-k26awr {
+ display: none;
}
.no-prefix {
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
@@ -133,89 +1937,66 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
}
.some-key-14e1j2p-hoverStyles-Something_Main:hover {
- color: white;
+ color: hotpink;
background-color: lightgray;
border-color: aqua;
- box-shadow: 15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+ box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+}
+
+.some-key-1h1w8ez-Image {
+ animation: animation-i9f7qw-bounce;
+ border-radius: 50%;
+ height: 50px;
+ width: 50px;
+ background-color: red;
}
@font-face {
font-family: 'Patrick Hand SC';
font-style: normal;
font-weight: 400;
- src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
- unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf, U+2c60-2c7f,U+A720-A7FF;
+ src: local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');
+ unicode-range: U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;
}
-@-webkit-keyframes animation-i9f7qw-bounce {
+@keyframes animation-i9f7qw-bounce {
from, 20%, 53%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transform: translate3d(0, 0, 0);
}
40%, 43% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-30px,0);
- -ms-transform: translate3d(0,-30px,0);
- transform: translate3d(0,-30px,0);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -30px, 0);
}
70% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-15px,0);
- -ms-transform: translate3d(0,-15px,0);
- transform: translate3d(0,-15px,0);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ transform: translate3d(0, -15px, 0);
}
90% {
- -webkit-transform: translate3d(0,-4px,0);
- -ms-transform: translate3d(0,-4px,0);
- transform: translate3d(0,-4px,0);
+ transform: translate3d(0, -4px, 0);
}
}
-@keyframes animation-i9f7qw-bounce {
- from, 20%, 53%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- animation-timing-function: cubic-bezier(0.215,0.61,0.355,1);
- -webkit-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- }
-
- 40%, 43% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-30px,0);
- -ms-transform: translate3d(0,-30px,0);
- transform: translate3d(0,-30px,0);
- }
+.some-key-1icu1xs-hoverStyles {
+ color: hotpink;
+}
- 70% {
- -webkit-animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- animation-timing-function: cubic-bezier(0.755,0.05,0.855,0.06);
- -webkit-transform: translate3d(0,-15px,0);
- -ms-transform: translate3d(0,-15px,0);
- transform: translate3d(0,-15px,0);
- }
+.some-key-1icu1xs-hoverStyles:hover {
+ color: hotpink;
+ background-color: lightgray;
+ border-color: aqua;
+ box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+}
- 90% {
- -webkit-transform: translate3d(0,-4px,0);
- -ms-transform: translate3d(0,-4px,0);
- transform: translate3d(0,-4px,0);
- }
+.some-key-k26awr {
+ display: none;
}
.no-prefix {
display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
@@ -225,14 +2006,13 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
}
.some-key-14e1j2p-hoverStyles-Something_Main:hover {
- color: white;
+ color: hotpink;
background-color: lightgray;
border-color: aqua;
- box-shadow: 15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
+ box-shadow: -15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;
}
.some-key-1h1w8ez-Image {
- -webkit-animation: animation-i9f7qw-bounce;
animation: animation-i9f7qw-bounce;
border-radius: 50%;
height: 50px;
@@ -241,18 +2021,9 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
}"
`;
-exports[`renderStylesToString renders large recursive component 1`] = `
+exports[`hydration only inserts rules that are not in the critical css 3`] = `""`;
-
-
+exports[`renderStylesToString renders large recursive component 1`] = `
@@ -260,1991 +2031,996 @@ exports[`renderStylesToString renders large recursive component 1`] = `
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
woah there
hello world
-
` | `React.createElement('img', { src: 'avatar.png' })` |
-| After | `
### Installation
```bash
-npm install --save-dev jest-emotion
+npm install --save-dev @emotion/jest
```
-Add the snapshot serializer in your [`setupTestFrameworkScriptFile`](http://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) _or_ at the top of your test file.
+Add the `"@emotion/jest/serializer"` to the [`snapshotSerializers`](https://jestjs.io/docs/en/configuration#snapshotserializers-arraystring) option.
+
+```json
+{
+ "snapshotSerializers": ["@emotion/jest/serializer"]
+}
+```
+
+Or use `expect.addSnapshotSerializer` to add it.
+
+```javascript
+import { createSerializer } from '@emotion/jest'
+
+expect.addSnapshotSerializer(createSerializer())
+```
+
+When using Enzyme, you can add `"@emotion/jest/enzyme-serializer"` instead.
+
+```json
+{
+ "snapshotSerializers": ["@emotion/jest/enzyme-serializer"]
+}
+```
+
+Or use `expect.addSnapshotSerializer` to add it like this:
+
```javascript
-import * as emotion from 'emotion'
-import { createSerializer } from 'jest-emotion'
+import { createEnzymeSerializer } from '@emotion/jest/enzyme-serializer' // also adds the enzyme-to-json serializer
-expect.addSnapshotSerializer(createSerializer(emotion))
+expect.addSnapshotSerializer(createEnzymeSerializer())
```
### Writing a test
-Writing a test with `jest-emotion` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON.
+Writing a test with `@emotion/jest` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON.
```jsx
import React from 'react'
-import serializer from 'jest-emotion'
/** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
import renderer from 'react-test-renderer'
-expect.addSnapshotSerializer(serializer)
const Button = props => (