Issue with hover and postcss-combine-media-query

[scriptcoded]

Hey!

Great work with this. I don't know how we'd get Tailwind working with Stencil without your work 😊

I noticed that using :hover and :active on an element at the same time did not work, and the hover state took precedence over the active state. Turns out that it's due to the postcss-combine-media-query plugin.

For an element like this:

<button class="bg-red-700 hover:bg-blue-700 active:bg-green-700">
  Click me
</button>

The generated CSS looks something like this (heavily simplified):

@layer utilities {
  @media (hover:hover) {
    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700)
    }
  }

  .active\:bg-green-700:active {
    background-color: var(--color-green-700)
  }

  .bg-red-700 {
    background-color: var(--color-red-700)
  }
}

@media (hover:hover) {
  .hover\:bg-blue-700:hover {
    background-color: var(--color-blue-700)
  }
}

So it looks like the plugin is failing to respect the layer directive, and digging around a little it looks like it's a known issue: SassNinja/postcss-combine-media-query#11

Would it make sense to disable the plugin until there's a fix in postcss-combine-media-query?

EDIT: To clarify the last media query overrules the ones in the utility layer and as such the :active state is never used. I'd expect the resulting CSS to look like this:

@layer utilities {
  @media (hover:hover) {
    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700)
    }
  }

  .active\:bg-green-700:active {
    background-color: var(--color-green-700)
  }

  .bg-red-700 {
    background-color: var(--color-red-700)
  }
}

[scriptcoded]

I've been able to work around this issue by using the following postcss.config.js file which mirrors the default plugins:

// PostCSS configuration to disable the postcss-combine-media-query plugin
// that's automatically loaded by stencil-tailwind-plugin.
// See https://github.com/Poimen/stencil-tailwind-plugin/issues/40
module.exports = {
  plugins: [
    require("postcss-combine-duplicated-selectors")({
      removeDuplicatedValues: true,
    }),
    require("cssnano")(),
  ],
};