question: can we add a custom prefix to the className instead of 'go'?

[sanjayjb]

I have a scenario where there might be conflicting class names generated by gooober hash, is there anyway I can use a custom className prefix like 'be' instead of 'go'?

[B-Teague]

The chance of a collision with the hash function should be very low. On the small occasion it does happen, you can reorder the properties around in one of the styled components to generate a different hash value.

css`
   color: blue;
   min-width: 100px;
`

change to

css`
   min-width: 100px;
   color: blue;
`

[B-Teague]

@cristianbote Maybe picking different prime values would help reduce collision rates?
https://www.planetmath.org/goodhashtableprimes
out = 97
factor = 769

This might reduce collision rates without impacting performance or bundle size

[Profesor08]

@B-Teague how about this scenario? Where both nodes will become blue.

https://codesandbox.io/s/react-goober-forked-68nbz?file=/src/index.js

const ChildA = styled("div")``;

const ChildB = styled("div")``;

const Parent = styled("div")`
  &:hover {
    ${ChildA} {
      color: red;
    }

    ${ChildB} {
      color: blue;
    }
  }
`;

function App() {
  return (
    <Parent>
      <ChildA>ChildA</ChildA>
      <ChildB>ChildB</ChildB>
    </Parent>
  );
}

[B-Teague]

@Profesor08 Hmmm, I see where this could be a bit buggy if two different styled elements have the exact same css resulting in the same class name. The current workaround would be to add the different hover values to the children instead of the parent.
Ideally, you shouldn't have two different components that have the exact same css. If you need shared css, you can extend components to leverage common functionality.

https://codesandbox.io/s/react-goober-forked-ynd84?file=/src/index.js

const StandardLink = styled("div")`
  background-color: green;
`;

const ChildA = styled(StandardLink)`
  &:hover {
    color: red;
  }
`;

const ChildB = styled(StandardLink)`
  &:hover {
    color: blue;
  }
`;

const Parent = styled("div")``;

function App() {
  return (
    <Parent>
      <ChildA>ChildA</ChildA>
      <ChildB>ChildB</ChildB>
    </Parent>
  );
}

[B-Teague]

@sanjayjb Does this PR #400 fix your issue?
https://codesandbox.io/s/react-goober-forked-3vnqd

[cristianbote]

@sanjayjb at this moment no. goober does not support this.