Passing options to gatsby-plugin-styled-components

[ugrupp]

Description

Hey, isn't it possible to pass styled-components options to the gatsby plugin? I tried specifically to set displayName: true, but nothing happens.

This is from my gatsby-config.js

plugins: [
  ...
  {
    resolve: 'gatsby-plugin-styled-components',
    options: {
      displayName: true,
    }
  }
],

Steps to reproduce

• Fresh install of the default starter kit
• Follow https://www.gatsbyjs.org/docs/styled-components/
• Use the above plugin config

Expected result

Element class names should be prefixed with the component names. As described in https://www.styled-components.com/docs/tooling#better-debugging

Actual result

Element class names are missing, as if displayName was still set to false.

Environment

• Gatsby version (npm list gatsby): gatsby@1.9.241
• gatsby-cli version (gatsby --version): 1.1.28
• gatsby-plugin-styled-components: 2.0.11
• styled-components: 3.2.3

File contents (if changed):

gatsby-config.js: see above

[ugrupp]

Solved it myself! Turns out the option should be provided to babel-plugin-styled-components.
So these steps fixed it:

• npm install --save babel-plugin-styled-components
• Adding a .babelrc with:

{
  "plugins": [
    ["babel-plugin-styled-components", {
      "displayName": true
    }]
  ]
}

[glennreyes]

As far as I understood the plugin options are being passed to the babel options. I think that's still a bug if setting plugin options doesn't affect anything.

https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/#options

[DSchau]

👋 Glenn!

This works just fine!

Given gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-styled-components',
	  options: {
        displayName: true,
        fileName: false
	  }
    }
  ]
}

we see the expected output

<div class="ImageContainer-kOPzZn cmmuwx">
  <!-- Image markup here -->
</div>