Confusing behavior with ampersand selector

Hi,

I’m having confusing behavior with the plugin. I’m not quite sure this is a bug or expected behavior but I couldn’t find any answer for this online neither docs.

Steps to reproduce

Create a styled component

const StyledComponent = styled(Component)`
.parent {
  & .hede {
    color:black
  }
}`

Expected Behavior / Output

.parent .hede{color:black;}

Actual Behavior / Output

.iQAcRJ .parent .hede{color:black;}

It includes the unique class of the component when I use ampersand sign to get parent selector. Is it normal? If yes, is there any way to get parent selector like SASS?

Cheers

[thysultan]

The id in the example is a placeholder to demonstrate what s-c generates, so this.

styled.div`
.parent {
  &__kido + &__kido1 {
    color: red
  }
}

Is treated like sass would treat the following.

div {
  .parent {
    &__kido + &__kido1 {
      color: red
    }
  }
}

That is to say, it uses the same parent > child name-spacing* mechanism found in sass.

With this behavior in some cases(like mine) its impossible to use the ampersand.

Not sure i see the problem, the only difference between the expected vs actual is the added specificity.

[kitten]

@mrtkrcm It’d be helpful to understand what you’re actually trying to achieve apart from your current approach 😉 I hope that I can help you nonetheless for now.

&__kido + &__kido1

I understand that you’re trying to apply some kind of BEM modifiers as sibling identifiers here? This is actually not something we’d recommend, but to detail what & does,

The parent selector, or ampersand, or simply &, resolves to the component class. This is not the dynamic class that is generated depending on dynamic props. Thus & is going to resolve to the “wider” component’s id.

At the same time you’re trying to achieve something that doesn’t behave like the CSS nesting dictates it to behave.

So maybe you can detail your use case and we can help you to clear up the confusion