styled-components
Question: What is namespace used for?
The documentation suggests:
this setting is handy when you are working with micro frontends where class name collision can occur
It suggests that this feature would replace this such as https://github.com/QuickBase/babel-plugin-styled-components-css-namespace, but they only make the debugging experience better.
Here is a code sandbox to illustrate my point. The class name is right, but I can't see the point if the css is attached to the simple hash:
If styles were attached to the longest generated (src__Div-my-app__adb5uh-0 in the example), this problem would be fixed.
@luanraithz I have had issue with css-namespace-plugin, it didn't work with a parcel for example.
generated output of namespace setting
I am not sure why there is the only hash. but my generated components have only long className.
I will check tomorrow if I can replicate it.
Ok, thanks! You can check the code sandbox I provided in the description, there is a very simple scenario there.
@luanraithz I have checked my local env and it works as intended. I don't have that short hash class name.
@rajzik Can you upload your local test to github? I want to see what I've done wrong.
@luanraithz There might be an issue, after all, I have checked the wrong plugin, there has to be some PR which negates my changes. Will take a look.
@luanraithz today I have had some time to take a look, and it looks like there is an issue with some change in styled-components. Because right now injection of the stylesheet to the HTML will create hashed className and it doesn't really care about component id at all.
https://github.com/styled-components/styled-components/blob/d4b9ee8a3c1514cac57e22209bcd6102e10f79b1/packages/styled-components/src/models/ComponentStyle.js#L52
I have created an issue/question on styled-components.
Damn, I have no words, really nice investigation! Thank you for that @rajzik!
i submitted a pull request https://github.com/styled-components/styled-components/pull/3225 because i did not see that the namespaces work... and we really need that feature to work, please 🙏
@justnewbee if you want something that work you could use https://github.com/QuickBase/babel-plugin-styled-components-css-namespace. I'm using it in production, so far so good.