Tailwindcss: Variants for utilities with @supports queries are not generated

[jorditarrida]

Describe the problem:

I created a custom utility called .multiply to add the mix-blend-mode property if supported. Since I also need to change the opacity only if the mix-blend-mode property is applied, I figured I could do this (I am writing SCSS so the nested @supports query works):

.multiply {
    @supports ( mix-blend-mode: multiply ) {
         opacity: 1;
         mix-blend-mode: multiply;
    }
}

This worked so far. But the problem was when I needed to generate variants, in particular the group-hover variant. Wrapping the previous code with @variants group-hover {}, as seen below, did not work: two identical .multiply utilities were generated, within a @supports block, but without the group-hover variant.

@variants group-hover {
    .multiply {
        @supports ( mix-blend-mode: multiply ) {
             opacity: 1;
             mix-blend-mode: multiply;
        }
    }
}

Since the nested @supports query is a SCSS feature, I also tried moving the @supports query outside of the declaration (see code below), but I got the same results.

@variants group-hover {
    @supports ( mix-blend-mode: multiply ) {
         .multiply {
             opacity: 1;
             mix-blend-mode: multiply;
        }
    }
}

So I figure this is a bug since the variant is not generated.

Link to a minimal reproduction:

Sorry, tried to provide a https://play.tailwindcss.com link but I got a 500 error when tried to generate the share link. Reproduction steps would be copying the second or third code block in a Tailwind project and checking that no .group:hover .group-hover\:.multiply selector is present on the compiled version.

[adamwathan]

I haven't thought too deeply about how this should work in a perfect world but this works currently:

@supports (mix-blend-mode: multiply) {
  @variants group-hover {
    .multiply {
      opacity: 1;
      mix-blend-mode: multiply;
    }
  }
}

If you need responsive variants, you can wrap them around the whole thing:

@responsive {
  @supports (mix-blend-mode: multiply) {
    @variants group-hover {
      .multiply {
        opacity: 1;
        mix-blend-mode: multiply;
      }
    }
  }
}

Agree in a perfect world it would "just work" I think, without trying to find the exact combination of directives in a specific order.

I'll leave this open until I have a chance to decide how it should actually work but thankfully you do have a workaround in the meantime 👍