:is specificity issue created after compilation

[tetz2442]

I'm having an issue with my compiled CSS with selectors being transformed into an :is selector. The :is selector will change the specificity to match the highest in it's list. A common pattern I use is creating tag and class selectors to style my headers as shown below. This makes it easy apply different header styles to different tags that don't necessarily match.

h1,
.h1 {
  font-size: 4.4rem;

  @media (--viewport-sm) {
    font-size: 5.6rem;
  }
}

h2,
.h2 {
  font-size: 4rem;

  @media (--viewport-sm) {
    font-size: 4.4rem;
  }
}

<h2 class="h1">Title</h2>

Instead of using the styles from the .h1 selector, which should be the highest specificity, it is instead taking the styles from :is(h2, .h2), which is the compiled result.