Plugin options not consistently loaded for each node

[georgewilde]

When specifying SSR as true and adding a "namespace" property in the config options the namespace isn't applied to all styled component classes.

"plugins": [
        [
            "styled-components",
            {
                "ssr": true,
                "namespace": "sc-"
            }
        ]
    ]

Debugging the state object passed to the Program in the index file https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/index.js shows that the namespace isn't always correctly set. For example, here is the output of state.opts for two different nodes in the same test:

• { ssr: true, namespace: 'sc-' }
• { pure: true, ssr: true, displayName: true, preprocess: false }

While the first correctly matches the options specified in the plugin config, the second does not.

I'm unsure how the loading of the options works and whether this is an issue with babel-plugin-styled-components or possibly with babel-jest.

[georgewilde]

I believe this issue relates to bug #268

[rasitozcan]

Any chance you wrapped styled-components in an abstraction? I experienced a similar issue at work, and we finally found what was the problem (not a problem really, it was what I was missing);

Since styled components is in my wrapper, I import it as

import styled from "../my-styled-components"

And that caused the plugin to not work properly. Because it uses the import paths to work properly, you can check the details on VALID_TOP_LEVEL_IMPORT_PATHS It worked in some cases, as you can imagine, it was when I imported styled-components as the plugin expects:

import styled from "styled-components"

Plugin source shows that it accepts an option to babel.config to define topLevelImportPaths as below (but not documented I believe);

"topLevelImportPaths": [
     "../my-styled-components",
     "../any/other/path/maybe",
 ]

If you are using a similar approach to import styled & its named exports, this may be the case.