Global namespace

Hi guys!!

First of all thank you very much for styled-components. We’re massively using it in our company and we’re superhappy with it! Great job!!

Lately we were forced to start using a global namespace for our css and we noticed that styled-components does not really play well with it.

Here you can find a bin with a practical example: https://www.webpackbin.com/bins/-KfvQIyzL57v9tfNRauJ .

Actual behaviour: The background is green.

Expected behaviour: The background is papayawhip.

So far we’re handling it by adding to each styled component a class self in order to style them in this way:

&.self {
  background: papayawhip;
}

But of course we’re not satisfied with this solution.

We thought it would be useful to pass to the ThemeProvider a global namespace to use for increasing the styled-components selectors specificity.

Do you have any other suggestion/solution for such a case?

[nvanselow]

The PR referenced in the previous comment is now closed. Based on a suggestion by @philpl, I have created an independent babel plugin that will automatically add && or a list of specified classes to all the styled components. I will make that publicly available as soon as I get everything setup.

[nvanselow]

We’ve run into this same issue. I’ve opened a PR that uses babel-plugin-styled-components along with some minor changes to styled-components to allow for additional classes to be added to the selectors for styled components.

https://github.com/styled-components/styled-components/pull/1260 https://github.com/styled-components/babel-plugin-styled-components/pull/101