# gatsby-plugin-emotion > Gatsby plugin to add support for Emotion Latest version **8.16.0** (published 2026-01-26) · MIT license · 0 weekly downloads ## Install ```sh npm install gatsby-plugin-emotion pnpm add gatsby-plugin-emotion yarn add gatsby-plugin-emotion bun add gatsby-plugin-emotion ``` ## Health **Score 60/100 (C)** — status: stable. Positive: no vulnerabilities; high maintenance score; popular repo; extremely popular. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 8.16.0 | | Published | 2026-01-26 | | First published | 2017-07-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=18.0.0 <26 | | Dependencies | 2 | | Unpacked size | 43.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 55939 | | Author | Tegan Churchill | | Maintainers | pieh, kathmbeck, serhalp-netlify, mlgualtieri-gatsby, fk, tylerbarnes, daniellewgatsby | | Keywords | gatsby, gatsby-plugin, emotion, css-in-js | ## Links - npm: https://www.npmjs.com/package/gatsby-plugin-emotion - Repository: https://github.com/gatsbyjs/gatsby - Homepage: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion#readme - Issues: https://github.com/gatsbyjs/gatsby/issues - npm.io page: https://npm.io/package/gatsby-plugin-emotion ## Dependencies (2) - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/babel-preset-css-prop](https://npm.io/package/@emotion/babel-preset-css-prop.md) ^11.11.0 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 8.16.0 (latest) — 2026-01-26 - 8.17.0-next.0 (next) — 2025-11-27 - 8.17.0-react19.1 (react19) — 2025-11-26 - 6.15.0 (latest-v3) — 2022-12-07 - 7.25.0 (latest-v4) — 2022-12-07 - 8.0.0-alpha-drupal-proxyurl.14 (drupal-proxyurl) — 2022-11-22 - 7.14.0-alpha-transformer-json.26 (alpha-transformer-json) — 2022-10-12 - 8.0.0-alpha-v5.d20221012t101120.57 (alpha-v5) — 2022-10-12 - 7.23.0-alpha-a5-peer.70 (alpha-a5-peer) — 2022-09-14 - 7.23.0-alpha-preview-gh-api.26 (preview-gh-api) — 2022-09-08 - 7.23.0-alpha-9689ff.25 (alpha-9689ff) — 2022-08-31 - 7.18.0-alpha-drupal-self-reference.18 (drupal-self-reference) — 2022-07-19 - 7.15.0-alpha-wp-image-cdn-auth.48 (wp-image-cdn-auth) — 2022-05-20 - 7.8.0-alpha-image-service.24 (image-service) — 2022-02-10 - 7.6.0-alpha-ts-jit.60 (alpha-ts-jit) — 2022-01-21 - … 348 more at https://npm.io/package/gatsby-plugin-emotion/versions ## README # gatsby-plugin-emotion Provide support for using the css-in-js library [Emotion](https://github.com/emotion-js/emotion) including server side rendering. **This plugin supports Emotion v11+** Older versions should use versions of this plugin which support Emotion 8 and 9. Check out the Emotion 10 [migration guide](https://emotion.sh/docs/migrating-to-emotion-10#incremental-migration) for more information on how to upgrade. ## Install ```shell npm install gatsby-plugin-emotion @emotion/react @emotion/styled ``` ## How to use Add the plugin to your `gatsby-config.js`. ```js module.exports = { plugins: [ { resolve: `gatsby-plugin-emotion`, options: { // Accepts the following options, all of which are defined by `@emotion/babel-plugin` plugin. // The values for each key in this example are the defaults the plugin uses. sourceMap: true, autoLabel: "dev-only", labelFormat: `[local]`, cssPropOptimization: true, }, }, ], } ``` ## Options The plugin supports the same options that you can pass into [`@emotion/babel-plugin`](https://emotion.sh/docs/@emotion/babel-plugin#options). | Option | Type | Description | Default | Required | | --------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -------- | | `sourceMap` | boolean | Tells the plugin to inject source maps for use in browser dev tools in development. | `true` | | | `autoLabel` | `'dev-only' ∣ 'always' ∣ 'never'` | Automatically adds the label property to styles so that class names generated by css or styled include the name of the variable the result is assigned to. You can read more about this option in [`@emotion/babel-plugin`'s docs](https://emotion.sh/docs/@emotion/babel-plugin#autolabel) | `dev-only` | | | `labelFormat` | string | Only works when `autoLabel` is set to true. 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 with the name of the variable the result is assigned to. | `"[local]"` | | | `cssPropOptimization` | boolean | 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. | `true` | | --- _Source: https://npm.io/package/gatsby-plugin-emotion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._