Open Profesor08 opened 2 years ago
I think this something Goober does. It's the library we use under the hood. I think they might have more info in their docs: https://github.com/cristianbote/goober
I think this something Goober does. It's the library we use under the hood. I think they might have more info in their docs: https://github.com/cristianbote/goober
May be you right, may be not. Goober generates unique classname for unique block of styles. And for empty block of styled, it generate class name go11
. There is nothing special. But the way in witch it nesting styles is different. And I there is the issue, I think.
There is an simple example: https://codesandbox.io/s/solidjs-zdeu5?file=/src/App.tsx
import { styled } from "solid-styled-components";
const ChildA = styled("div")``;
const ChildB = styled("div")``;
const Parent = styled("div")`
&:hover {
${ChildA.className} {
color: red;
}
${ChildB.className} {
color: blue;
}
}
`;
export const App = () => {
return (
<Parent>
<ChildA>ChildA</ChildA>
<ChildB>ChildB</ChildB>
</Parent>
);
};
A lot of elements has class name
go11
. This make a lot of conflicts if element don't has some styles, and I want to apply them to it depending on some parent. Every unique element must have his own unique className.