Curious Ruleset Collision

[neilchaudhuri]

In our design system, we categorize buttons two ways:

• Primary vs Secondary
• Inside default (white) background or dark brand background

As a result there are four kinds of buttons.

Using postcss-nested, I have this setup:

button, .btn {
    @apply ...

    &.primary {
        &:active {
            @apply bg-primary-brand;  /** <-- Error here **/
        }
    }

    &.secondary {
        @apply ...
    }
}

.bg-primary-brand {
    button.primary, &.btn.primary {...}
}

This produces the following error:

@apply cannot be used with .bg-primary-brand because .bg-primary-brand is included in multiple rulesets.

I can sort of see the problem here since there is potential for confusing recursion. While I can eliminate the error at the bottom by enumerating all the block elements (e.g. div.bg-primary-brand, main.bg-primary-brand, article.bg-primary-brand, etc.), what's the proper way to address these four composite categories in a way that doesn't cause problems?

[neilchaudhuri]

Incidentally, this worked as well:

:not(button).bg-primary-brand, :not(.btn).bg-primary-brand {...}

[estevanmaito]

Instead of bg-primary-brand, you should be applying the rules you want for that active state.

[neilchaudhuri]

Your response helps me understand the confusion. So bg-primary-brand is a color utility generated by TailwindCSS. In that first declaration, I am saying I want the primary button to have the color bg-primary-brand as the background color in active state.

In the second declaration, I am saying that any button that is a child of an element with class bg-primary-brand should have X styles associated with it.

In other words, the first application of bg-primary-brand is simply applying a color to a button when active. The second application is as a parent selector for a button underneath--a primary or secondary button resting inside a div, section, content element whose background color is bg-primary-brand.

Clearly, I need to express this a different way.

[estevanmaito]

Oh, now it makes sense why it wasn't making sense 😅. The names are colliding. You named the parent selector the same as the utility. Both are CSS classes.

Try changing your parent selector class to something like background-primary-brand.

[neilchaudhuri]

I could do that, but that would defeat the purpose of what I am trying to accomplish. I want to allow for the possibility of a button having bg-primary-brand and also a div (or section or main or whatever "sectional" element) having bg-primary-brand with a button inside somewhere.

I could certainly make background-primary-brand that applies bg-primary-brand, but that feels like duplication for the sake of a hack.

So far I have ended up using :not as I described above. That works, but I don't know if it represents the "right" solution.