DocumentationCommunityGitHubSlackSpectrum

Getting Started

IntroductionInstallCSSStyled ComponentsCompositionObject StylesNested SelectorsMedia QueriesGlobal Styles

Tooling

Babel PluginSource MapsSnapshot TestingTypescriptExtract Static

Source Maps

Edit this page

Note:

babel-plugin-emotion is required for source maps

emotion supports source maps for styles authored in javascript.

source-map-demo

Required For Source Maps:

  1. babel-plugin-emotion must be in your Babel setup. [documentation]
  2. process.env.NODE_ENV must be any value except "production"

Note:

We do not advise using sourceMaps in production. The source maps can add significant size to your bundle.

Basic Babel setup

.babelrc

{
  "plugins": [["emotion", { "sourceMap": true }]]
}

Use Babel’s env property and only use source maps in your development environment.

.babelrc

{
  "env": {
    "production": {
      "plugins": [["emotion", { "sourceMap": false }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true }]]
    }
  }
}
Previous Page
Babel Plugin