Mix css modules classes and boostrap active

Question

In a project I am working on we use css modules with postcss (also postcss-cssnext and postcss-include). We also have bootstrap as a dependency which is globally provided.

In a given component I do have a custom class for a button. So my button has the following classes: btn btn-custom.

According to the requirements I want to modify the appearance of the button when it is in an active state. For that bootstrap has the following selector: .btn.active, .btn:active. Overwriting the pseudoclass is the easy part. The .active class though is where it gets tricky.

In my css file I have tried several ways to handle this but none seems to work. Here are some of the things I've tried:

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

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

Has anyone any idea on how this could be achieved?

Answer 1

Global targeted classes needs to be wrapped in parens, like so:

.btn-custom {
  color: red;
}

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

So with nesting:

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

That last one is untested, I guess the order of PostCSS plugins is important here.