[gatsby-plugin-styled-components] Disable displayName option only in production build

[AnsonH]

In the gatsby-plugin-styled-components plug-in options, there's a field called displayName. When it's set to true, it enhances the attached CSS class name on each component such that you can see something like <button class="Button-asdf123 asdf123" /> instead of <button class="asdf123" /> in DevTools.

However, how can I set up this option such that displayName is true ONLY in development server (gatsby develop), but not in production build (gatsby build)? In other words, I want to set displayName to true during development and false during building for production.

Someone asked similar question on Stack Overflow. However, I'm not sure how I can do it in Gatsby. Thanks!

[herecydev]

Can you not leverage process.env.NODE_ENV, i.e.

{
displayName: process.env.NODE_ENV === "development" ? true : false
}