Классы модулей css css и boostrap active

Question

В проекте, над которым я работаю, мы используем модули css с postcss (также postcss-cssnext и postcss-include). У нас также есть bootstrap как зависимость, которая предоставляется во всем мире.

В данном компоненте у меня есть пользовательский класс для кнопки. Таким образом, моя кнопка имеет следующие классы: btn btn-custom.

В соответствии с требованиями, я хочу изменить внешний вид кнопки, когда она находится в активном состоянии. Для этого бутстрапа имеет следующий селектор: .btn.active, .btn:active. Перенос псевдокласса - легкая часть. Класс .active - это то, где он становится хитрым.

В моем файле css я пробовал несколько способов справиться с этим, но никто не работает. Вот некоторые из вещей, которые я пробовал:

.btn-custom { 
    &.active, &:active {} 
    @nested :global &.active, &:active {} 
    @nested :global & { &.active, &:active: {} } 
    @nested :global { &.active, &:active: {} } 
} 

:global { 
    .btn-custom { &.active, &:active {} } 
    .btn { &.active, &:active {} } 
} 

Есть ли у кого-нибудь идеи о том, как это можно достичь?

Answer 1

Глобальные целевые классы должен быть завернут в круглых скобках, например:

.btn-custom { 
    color: red; 
} 

.btn-custom:global(.active) { 
    color: blue; 
} 

Так с вложенностью:

.btn-custom { 
    &:global(.active), 
    &:active {} 
} 

Это последний не тестировалось, я предполагаю, порядок плагин PostCSS важен Вот.