styled-components/babel-plugin-styled-components

Incorrect styles applied bug after v1.10.5

iDVB opened this issue · 3 comments

iDVB commented

Likely similar to #261 and #351 but their resolution does not seem to work/apply.

Env:
@ourcompany/react-ui-components = Custom Styled Components UI lib
projectx = Project that consumes/uses the above lib

We too are noticing that our projects (projectx) that consume our ui lib (@ourcompany/react-ui-components) are experiencing this same issue with the wrong styles being applied.

The way we build

Our @ourcompany/react-ui-components lib is bundling with rollup and the following .babelrc.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["babel-plugin-styled-components"],
  exclude: "node_modules/**"
}

Our consuming repo/project (projectx) is using gatsbyjs and gatsby-plugin-styled-components

Version of babel-plugin-styled-components

We've had to lock babel-plugin-styled-components to v1.10.5 in order to get it working right. Even tried updated everything to latest v2.0.2 and still broken.

Questions

  1. What IS the recommended way to author/bundle a styled-components lib. Do you use babel-plugin-styled-components on the lib and again on the consuming project (excluding node_modules, eg. that lib)
  2. Why did our configuration suddenly stop working with babel-plugin-styled-componentsv1.10.5? Anything after this and we get this same incorrect styles being applied bug.
  3. Are there any example / existing repos that have this working that I could look at for guidance?

Great questions...

  1. I think yes, mainly for SSR. For client-side, it wouldn't matter much except for debugging. For the lib, you would want to use the namespace option to avoid conflicting with application SSR, I think. https://styled-components.com/docs/tooling#namespace

  2. I don't know yet, but I'd like to figure it out. There was very little change in v1.10.6. Am I understanding that you tried all the versions between v1.10.5 and v2.0.2?

  3. I'd be interested in that too!

iDVB commented
  1. thanks @agriffis I'll try that namespace option. We use Gatsby so most things are pre-rendered (SSR) and client-side.

  2. To be 100% fair I'm not sure it happened in exactly v1.10.6 I just know v1.10.5 works and the latest for a while now has not. To make matters worse, we're now dealing with this _interopRequireDefault is not a function issue with seemingly no fix yet... so I can't even seem to test out other options until I have that fixed.

I will keep at trying to fix this new _interopRequireDefault issue and once its fixed will jump back into this one and see if I can get you an exact version where things go wrong.

iDVB commented

@agriffis ok.... I just identified that the issue is NOT with a specific version of babel-plugin-styled-components but more about making sure both the custom lib and the consuming project both use the SAME version. So we updated to the latest version and just used a resolution in the consuming project to lock it to the same version and everything works.
Odd. I wonder if this sensitivity is all that was introduced at some point.