Skip to content
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

Jump to bottom

feat(gatsby-plugin-emotion): Use correct babel preset with jsxRuntime #34085

Merged
merged 5 commits into from Dec 8, 2021
Merged

feat(gatsby-plugin-emotion): Use correct babel preset with jsxRuntime #34085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f68f9f
feat: set right babel config for emotion when use jsxruntime
iChenLei Nov 26, 2021
7af287f
fix lint issue
iChenLei Nov 27, 2021
72e5b63
fix eslint
iChenLei Nov 27, 2021
2b4a363
fix unit test
iChenLei Nov 27, 2021
9880d26
fix typo
marvinjude Dec 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 61 additions & 4 deletions packages/gatsby-plugin-emotion/src/__tests__/gatsby-node.js
View file
Open in desktop
Expand Up @@ -5,8 +5,13 @@ describe(`gatsby-plugin-emotion`, () => {
describe(`onCreateBabelConfig`, () => {
it(`sets the correct babel preset`, () => {
const actions = { setBabelPreset: jest.fn() }
const store = {
getState: () => {
return { config: {} }
},
}

onCreateBabelConfig({ actions }, null)
onCreateBabelConfig({ actions, store }, null)

expect(actions.setBabelPreset).toHaveBeenCalledTimes(1)
expect(actions.setBabelPreset).toHaveBeenCalledWith({
Expand All @@ -20,11 +25,36 @@ describe(`gatsby-plugin-emotion`, () => {
})
})

it(`passes additional options on to the preset`, () => {
it(`sets the correct babel plugin when using automatic jsxRuntime`, () => {
const actions = { setBabelPlugin: jest.fn() }
const store = {
getState: () => {
return { config: { jsxRuntime: `automatic` } }
},
}

onCreateBabelConfig({ actions, store }, null)

expect(actions.setBabelPlugin).toHaveBeenCalledTimes(1)
expect(actions.setBabelPlugin).toHaveBeenCalledWith({
name: expect.stringContaining(path.join(`@emotion`, `babel-plugin`)),
options: {
sourceMap: true,
autoLabel: `dev-only`,
},
})
})

it(`passes additional options to the preset`, () => {
const actions = { setBabelPreset: jest.fn() }
const pluginOptions = { useBuiltIns: true }
const store = {
getState: () => {
return { config: {} }
},
}

onCreateBabelConfig({ actions }, pluginOptions)
onCreateBabelConfig({ actions, store }, pluginOptions)

expect(actions.setBabelPreset).toHaveBeenCalledTimes(1)
expect(actions.setBabelPreset).toHaveBeenCalledWith({
Expand All @@ -39,6 +69,28 @@ describe(`gatsby-plugin-emotion`, () => {
})
})

it(`passes additional options to the plugin when using automatic jsxRuntime`, () => {
const actions = { setBabelPlugin: jest.fn() }
const pluginOptions = { useBuiltIns: true }
const store = {
getState: () => {
return { config: { jsxRuntime: `automatic` } }
},
}

onCreateBabelConfig({ actions, store }, pluginOptions)

expect(actions.setBabelPlugin).toHaveBeenCalledTimes(1)
expect(actions.setBabelPlugin).toHaveBeenCalledWith({
name: expect.stringContaining(path.join(`@emotion`, `babel-plugin`)),
options: {
sourceMap: true,
autoLabel: `dev-only`,
useBuiltIns: true,
},
})
})

describe(`in production mode`, () => {
let env

Expand All @@ -53,8 +105,13 @@ describe(`gatsby-plugin-emotion`, () => {

it(`sets the correct babel preset`, () => {
const actions = { setBabelPreset: jest.fn() }
const store = {
getState: () => {
return { config: {} }
},
}

onCreateBabelConfig({ actions }, null)
onCreateBabelConfig({ actions, store }, null)

expect(actions.setBabelPreset).toHaveBeenCalledTimes(1)
expect(actions.setBabelPreset).toHaveBeenCalledWith({
Expand Down
29 changes: 20 additions & 9 deletions packages/gatsby-plugin-emotion/src/gatsby-node.js
View file
Open in desktop
@@ -1,12 +1,23 @@
export const onCreateBabelConfig = ({ actions }, pluginOptions) => {
actions.setBabelPreset({
name: require.resolve(`@emotion/babel-preset-css-prop`),
options: {
sourceMap: process.env.NODE_ENV !== `production`,
autoLabel: `dev-only`,
...(pluginOptions ? pluginOptions : {}),
},
})
export const onCreateBabelConfig = ({ actions, store }, pluginOptions) => {
if (store.getState().config.jsxRuntime === `automatic`) {
actions.setBabelPlugin({
name: require.resolve(`@emotion/babel-plugin`),
options: {
sourceMap: process.env.NODE_ENV !== `production`,
autoLabel: `dev-only`,
...(pluginOptions ? pluginOptions : {}),
},
})
} else {
actions.setBabelPreset({
name: require.resolve(`@emotion/babel-preset-css-prop`),
options: {
sourceMap: process.env.NODE_ENV !== `production`,
autoLabel: `dev-only`,
...(pluginOptions ? pluginOptions : {}),
},
})
}
}

exports.pluginOptionsSchema = ({ Joi }) =>
Expand Down