Skip to content

Emotion update #10500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 19, 2018
Merged

Emotion update #10500

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a15397f
Move babel-plugin-emotion to v10
ChristopherBiscardi Dec 17, 2018
b218918
update tutorial install packages
ChristopherBiscardi Dec 17, 2018
f196550
update global styles tutorial
ChristopherBiscardi Dec 17, 2018
ba0af2f
Update README.md
DSchau Dec 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions docs/docs/creating-global-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ To start, create a new Gatsby site with the [hello world starter](https://github
```shell
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
cd global-styles
npm install --save gatsby-plugin-emotion emotion emotion-server react-emotion
npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled
```

Create `gatsby-config.js` and add the Emotion plugin:
Expand All @@ -90,21 +90,27 @@ Next, add a layout component at `src/components/layout.js`:

```jsx:title=src/components/layout.js
import React from "react"
import styled, { injectGlobal } from "react-emotion"

injectGlobal`
div {
background: red;
color: white;
}
`
import { Global, css } from "@emotion/core"
import styled from "@emotion/styled"

const Wrapper = styled("div")`
border: 2px solid green;
padding: 10px;
`

export default ({ children }) => <Wrapper>{children}</Wrapper>
export default ({ children }) => (
<Wrapper>
<Global
styles={css`
div {
background: red;
color: white;
}
`}
/>
{children}
</Wrapper>
)
```

Then, update `src/pages/index.js` to use the layout:
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/part-four/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Then install some other needed dependencies at the root of the project. You'll u
"Kirkham", and you'll try out a CSS-in-JS library, ["Emotion"](https://emotion.sh/):

```shell
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion emotion emotion-server @emotion/core
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
```

Set up a site similar to what you ended with in [Part Three](/tutorial/part-three). This site will have a layout component and two page components:
Expand Down
7 changes: 5 additions & 2 deletions packages/gatsby-plugin-emotion/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@

Provide support for using the css-in-js library
[Emotion](https://github.com/emotion-js/emotion) including server side
rendering.
rendering. This plugin supports Emotion v10+, older versions should use
older plugins. Check the Emotion 10 [migration
guide](https://emotion.sh/docs/migrating-to-emotion-10#incremental-migration)
for more information.

## Install

```
npm install --save gatsby-plugin-emotion emotion emotion-server @emotion/core @emotion/styled
npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled
```

## How to use
Expand Down
10 changes: 3 additions & 7 deletions packages/gatsby-plugin-emotion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.1.6",
"@babel/runtime": "^7.0.0",
"babel-plugin-emotion": "^10.0.0",
"babel-plugin-jsx-pragmatic": "^1.0.2"
"@emotion/babel-preset-css-prop": "10.0.5",
"@babel/runtime": "^7.0.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
Expand All @@ -27,9 +25,7 @@
"license": "MIT",
"main": "index.js",
"peerDependencies": {
"@emotion/core": "^10.0.0",
"emotion": "^10.0.0",
"emotion-server": "^10.0.0",
"@emotion/core": "^10.0.5",
"gatsby": ">2.0.0"
},
"repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion",
Expand Down
3 changes: 0 additions & 3 deletions packages/gatsby-plugin-emotion/src/gatsby-browser.js
View file
Open in desktop

This file was deleted.

24 changes: 2 additions & 22 deletions packages/gatsby-plugin-emotion/src/gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,7 @@
export const onCreateBabelConfig = ({ actions }, pluginOptions) => {
const pragmaName = `___EmotionJSX`

actions.setBabelPlugin({
name: `babel-plugin-jsx-pragmatic`,
actions.setBabelPreset({
Copy link
Contributor

@DSchau DSchau Dec 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should have probably been what we did from the beginning.

Doing some cursory reading--this doesn't require us to set the jsx pragma, correct? I'm not sure I like that approach, if so.

Copy link
Contributor

@DSchau DSchau Dec 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(although this wasn't out yet--so heh, can't really fault us for that)

Copy link
Contributor Author

@ChristopherBiscardi ChristopherBiscardi Dec 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

heh yeah, the nice "single preset" approach wasn't out yet when the original emotion changes were made to gatsby plugin related stuff. It was still the piecemeal approach.

Making this change does not require anyone to manually use the jsx pragma. The pragma is applied universally automatically. You can see in the preset that it's basically the same as what we were doing before by providing jsx and setting the pragma (with the React.Fragment settings, etc) and the core emotion plugin.

name: `@emotion/babel-preset-css-prop`,
options: {
export: `jsx`,
module: `@emotion/core`,
import: pragmaName,
},
})

actions.setBabelPlugin({
name: `@babel/plugin-transform-react-jsx`,
options: {
pragma: pragmaName,
pragmaFrag: `React.Fragment`,
},
})

actions.setBabelPlugin({
name: `babel-plugin-emotion`,
options: {
cssPropOptimization: true,
sourceMap: process.env.NODE_ENV !== `production`,
autoLabel: process.env.NODE_ENV !== `production`,
...(pluginOptions ? pluginOptions : {}),
Expand Down
25 changes: 0 additions & 25 deletions packages/gatsby-plugin-emotion/src/gatsby-ssr.js
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions packages/gatsby-plugin-emotion/src/wrap-element.js
View file
Open in desktop

This file was deleted.

28 changes: 19 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1069,6 +1069,16 @@
follow-redirects "^1.2.5"
is-buffer "^1.1.5"

"@emotion/[email protected]":
version "10.0.5"
resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.5.tgz#955485c6f621247ee35dc1e6bd8fef0ba1d3286f"
integrity sha512-Mf1651pWaqraE2jJdX1/+ArCBLhubxNoNrs0mfYOriIRxwnmjoKQLIEYTMNl/K7ZkIu2PNwvLKGv74fo3wYovA==
dependencies:
"@babel/plugin-transform-react-jsx" "^7.1.6"
babel-plugin-emotion "^10.0.5"
babel-plugin-jsx-pragmatic "^1.0.2"
object-assign "^4.1.1"

"@emotion/[email protected]":
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
Expand All @@ -1079,10 +1089,10 @@
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==

"@emotion/[email protected].0":
version "0.11.0"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.0.tgz#9332b483a112af7b515d20470a7bf1aa5f8dcf6c"
integrity sha512-SpUumzuN7CxEGvJKe3bul8+VKdcNleACokv5YgS+k4KQIurdq7dbm4sM7aT9hBx3ccMpDfg5BYVfR3NPoeU5PA==
"@emotion/serialize@^0.11.3":
version "0.11.3"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.3.tgz#c4af2d96e3ddb9a749b7b567daa7556bcae45af2"
integrity sha512-6Q+XH/7kMdHwtylwZvdkOVMydaGZ989axQ56NF7urTR7eiDMLGun//pFUy31ha6QR4C6JB+KJVhZ3AEAJm9Z1g==
dependencies:
"@emotion/hash" "0.7.1"
"@emotion/memoize" "0.7.1"
Expand Down Expand Up @@ -2972,15 +2982,15 @@ babel-plugin-dynamic-import-node@^1.2.0:
dependencies:
babel-plugin-syntax-dynamic-import "^6.18.0"

babel-plugin-emotion@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.0.tgz#ceb177a64d5ccba3c28d7de4a0697d0f3a66315f"
integrity sha512-O0ykSwaJQVHuZcAd0/TuMbG6QzuArGheL9XeEoQfgBeFlcyrGEj/2JexsCk4iMMiykxW7hfulm0zKy864PWOSw==
babel-plugin-emotion@^10.0.5:
version "10.0.5"
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.5.tgz#05ec47cde94f984b0b2aebdd41f81876cf9cbb24"
integrity sha512-ezct2vKACg4juSV0/A/4QIDJu2+5Sjna/8rX/LXY8D0qG8YEP3fu8pe5FqZ9yFGa8WOJ1sivf3/QKM/5C8naIg==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@emotion/hash" "0.7.1"
"@emotion/memoize" "0.7.1"
"@emotion/serialize" "0.11.0"
"@emotion/serialize" "^0.11.3"
babel-plugin-macros "^2.0.0"
babel-plugin-syntax-jsx "^6.18.0"
convert-source-map "^1.5.0"
Expand Down