What is the purpose of class `go11`?

[Profesor08]

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.

const WeatherWidget = styled<"div">(({ ...props }) => {
  <WidgetContainer {...props}>...</WidgetContainer>;
})``;

export const Weather = styled<"div">(({ ...props }) => {
  return (
    <Show when={store.showWeatherWidget}>
      <WeatherWidget {...props} />
    </Show>
  );
})``;

export const Header = styled("div")`
  display: grid;
  grid-template-columns: 30px 280px auto 1fr;
  align-items: start;
  gap: 32px;

  ${Weather.className} {
    grid-column: 2 / 4;
  }
`;

[ryansolid]

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

[Profesor08]

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>
  );
};