Component selector classname collision

[samehegazy]

When using multiple instances of styled-components on the same page from different deployments, there is a possibility that static classname(starting sc-) can be duplicated between instances causing unintentional styling in case one of the instances used the component selector for styling.

[quantizor]

They don’t conflict, but extending an existing component includes the base component in the set of classNames to preserve inheritance.

This is intentional

On Wed, Mar 4, 2020 at 6:24 PM samehegazy [email protected] wrote:

When using multiple instances of styled-components on the same page from different deployments, there is a possibility that static classname(starting sc-) can be duplicated between instances causing unintentional styling in case one of the instances used the component selector for styling.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/babel-plugin-styled-components/issues/271?email_source=notifications&email_token=AAELFVVLTFKTOVYMCAFMJODRF3PMVA5CNFSM4LB5UD22YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4ISTEJWQ, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELFVS6EI6DCWKB7V2CBNDRF3PMVANCNFSM4LB5UD2Q .

[samehegazy]

Actually collisions do happen, and they must, otherwise we are saying that the 6 characters combinations will be enough to generate unique names for all possible components ever created by styled-components which I do not think is the case.

The issue here is not that collisions do not happen, the issue is that the hashing algorithm used is generating collisions with a higher frequency than desired, which seems to be the case as i have seen collisions happen between two applications with less than 50 components each.

There is no extending involved here, the components belong to two completely independent deployments , I am sorry if my original description was not clear, so let me clarify more:

• Page A is built using styled-components, for each component a classname starts sc- will be created to be used to identify the component and as a mean of providing component selector, let's say one of those components got the classname sc-dnqmqq

• Page A is also a host of widget B, widget B is also built with styled components, and it just happened that one of the components there got assigned to the same static class name sc-dnqmqq

• if either the page or the widget happen to have a component selector for either the components that has the same class name, those styling will be applied to the other component.

btw, the classname above is the actual classname that caused the issue on our case.

[brendonco]

have you tried:

    [
      "babel-plugin-styled-components",
      {
        "pure": true
      }
    ],