Namespace break adjacent sibling combinator selector

[slestang]

First all thank for this plugin, is solved a very annoying CSS override issue between our 2 projects.

My issue is that:

const InfoContainer = styled.div`
  display: flex;
  & + & {
    margin-left: 0.5rem;
  }
`;

now generate the style ('spa' is our namespace):

.sc-eHgmQL {}.spa .hVujAK{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .spa .hVujAK + .spa .hVujAK{margin-left:0.5rem;}

With that style the margin-left is never applied because the selector should be .spa .hVujAK + .hVujAK instead of .spa .hVujAK + .spa .hVujAK

Is that fixable in babel-plugin-styled-components-css-namespace?

[nvanselow]

Thanks for the issue. We've seen this once in our codebase as well, although we don't often use that selector. We'll have to investigate, but it seems possible.

[nvanselow]

As a quick update, I've done a bit of digging and the issue appears to be the way & is interpreted once we add it to the top level selector. It looks like the plugin is correctly adding the class only to the top level, but that is later being picked up by the one's inside. I plan to do a bit more on this, but unfortunately it won't be a quick fix.

[stevenremot]

Hi, I got this problem too in styled components like this:

const MyFirstExample = styled.div`
  input:checked + & { ... }
`

const MySecondExample = styled.div`
  .invalid & { ... }
`

I have the feeling that solving this problem requires much more than just wrapping the whole CSS code with && { / .prefix & {, as it's done today. I think the plugin should be able to detect nested rules and apply the prefix for each selector, that's a whole new level of parsing 😄

Do you have a simpler idea in your mind?

[nvanselow]

I was hoping there would be a simpler solution by lifting where we place the more specific selector, but I haven't found a good entry point yet. I think you're right that we'll have to start getting a little smarter about how we apply the fix.

In the code output from the plugin we get:

.moreSpecific & {
  & + & {
    color: red;
  }
}

when that code runs it turns into:

.moreSpecific .Hjklm + .moreSpecific .Hjklm {
   color: red;
}

but what we need to happen is:

.moreSpecific .Hjklm + .Hjklm {
  color: red;
}

The example @stevenremot provided gets a little trickier. We need the plugin to do the following:

.moreSpecific .invalid & {
   color: red;
}

The problem gets compounded if there are other rules in that block too.

const MySecondExample = styled.div`
  .invalid & { color: red;  }

 border-color: blue;
`;

We would need the plugin to somehow add a more specific selector to the second one, but not the first. The plugin would have to output something like the following:

.moreSpecific  .invalid & {color: red; }

.moreSpecific &  {
  border-color: blue;
}

For now, I'll add a note to the Readme, but in future versions, we're going to have to start working on some smarter parsing for these use cases.

[nvanselow]

Fixed by #15 in version 0.1.1
Please use the new rawCssNamespace option.
https://github.com/QuickBase/babel-plugin-styled-components-css-namespace#multiple-namespaces

Thanks to @daniloster for the excellent approach and fix!