Why is the textfield wrapper doubling the appearance selector?

[loxy]

Hi!

In https://github.com/Tinkoff/taiga-ui/blob/bf55bb15a56620c24fb579a7bad5a70356e4728a/projects/core/styles/theme/wrapper/textfield.less#L8

the selector is doubled (twice [data-appearance='textfield']). But it should be:

tui-wrapper[data-appearance='textfield'] {
    transition: var(--tui-duration) ease-in-out;
    transition-property: box-shadow, background;
    background: var(--tui-base-01);
    color: var(--tui-text-01);
    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);

    &:after {
        transition: color var(--tui-duration) ease-in-out;
        border-width: 1px;
        color: var(--tui-base-03);
    }
...

Has it a special reason or is it copy & paste artefact?

Best regards,
Kersten

[waterplea]

Maybe this was made this way to enforce stronger specificity. Can't really tell. Does this affect you in some way?

[loxy]

No, not really. We are providing our own versions of the wrappers and I was just wondering. Specificity was also my guess, but the rules are applied exactly the same way. It has no effect when I remove it.

And it is the same selector, so the CSS would be something like:

tui-wrapper[data-appearance='textfield'][data-appearance='textfield']:after {
  //...
}

So my guess is, that the engine will ignore the second one. Just wanted to learn...

Thank you!

[waterplea]

No, doubling down on the same thing increases specificity. Sometimes when you want to increase it you can write same class twice like .action-button.action-button and it definitely works. So attributes should work too. Maybe it used to have an effect before when there were some other rules for :after that were defined in tui-wrapper component styles... 🤔

[loxy]

Wasn't aware of that. Thanks!