styled-components/babel-plugin-styled-components

`sc-` prefix missing on some classes on CI after updating to nextjs 11

macrozone opened this issue · 1 comments

macrozone commented

thats a weird one.

After updating nextjs (and problably some other dependencies) i experienced the following:

snapshot tests indicated no changes locally, but on ci-pipeline i got changes in classnames.

E.g. here is a selected part of a diff. The (-) sign indicates whats in the snapshot and the (+) indicate what's new

  <div
    -         class="ProductDetailPrice__Wrapper-wqhdxy-0 dcrcCe"
    +         class="ProductDetailPrice__Wrapper-sc-wqhdxy-0 cwZKSz"
            >
              <div
                class="Price__Base-sc-14boc13-0 glwuYH"
              >
                <div

you notice the missing -sc- in some cases in the snapshots. What's striking is that some classes already had the -sc- mid-prefix and some now got it newly.

I checked ci and local for any differenes, both use same node version, i deleted node_modules (cleared caches), the yarn.lock file is consistent. I really can't explain the difference.

i am using babel-plugin-styled-components 1.13.2. I had 1.12.0 so i thought it was due to the update, but even after downgrading i could no longer fix this problem.

I am using styled-components version locked at 5.1.1 due to a bug in 5.3.x: styled-components/styled-components#3482

I know this problem is hard to reproduce, but maybe someone knowing the code can isolate the problem a bit better. Any help is super appreciated

this problem is only indirectly related to the update of nextjs, as its the snapshots of components (via storyshots) that are the problem. These snapshots do not use nextjs

it has to be some indirect dependency, but i am unable to find out, the yarn.lock changes are pretty big, so its tough to narrow it down.

macrozone commented

I found the difference, it was the jest cache that seemed to have interfered here. Deleting the jest cache solved the issue.

  • 👍2