Media queries are not merged together

[hteumeuleu]

On the latest Maizzle (Framework v5.4.0, CLI v2.0.0), with the base starter, I add the following style in the existing <style> in layouts/main.html:

<style>
    @tailwind components;
    @tailwind utilities;

    img {
      @apply max-w-full align-middle;
    }

    @layer utilities {
      .hidden {
        @apply sm:w-[100px];
      }
    }
</style>

npm run build then turns it into this:

<style>
    @media (max-width: 600px) {
      .hidden {
        width: 100px;
      }
    }
    .hover-bg-slate-800:hover {
      background-color: #1e293b !important;
    }
    @media (max-width: 600px) {
      .sm-p-6 {
        padding: 24px !important;
      }
      .sm-px-4 {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      .sm-px-6 {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
    }
</style>

My expectation would be for the two (max-width: 600px) media queries to be merged in a single one.

[cossssmin]

Right, turns out Tailwind doesn't group rules that use @apply with screen modifiers when generating the CSS, so even this example would be output as a separate @media query:

@screen sm {
	.custom {
		@apply w-[100px];
	}
}

Note that it doesn't need to use a utility class name that exists in Tailwind, simply using @apply within a rule inside the @screen sm directive, leads to the same result.

We could use something like postcss-combine-media-query to merge them, or even better postcss-sort-media-queries which also provides options for sorting them.

We used to have this initially, but removed it at some point in time when Tailwind did a good-enough job (these merging/sorting plugins cost performance)... I think we could add it back, but disabled by default.

[cossssmin]

Turned out it was trickier than it seemed 😅

Apparently Tailwind generates separate media queries only if there are certain utilities in your HTML, like those using hover: modifiers AND you use @apply for custom CSS that uses breakpoint modifiers. What a mouthful!

The official starter for Maizzle does use some of those, hence the issue in your case.

Since normally this isn't an issue in a utility-CSS approach (if you don't have custom utilities that use breakpoint modifiers, they are properly grouped by Tailwind), I think this should be addressable through opt-in behavior, specifically an option that you enable to have Maizzle use a PostCSS plugin that can merge identical media queries.

See #1681 for a possible implementation and the test that proves it. Not totally thrilled with the API/option naming, but I think it could do. Let me know what you think.

[cossssmin]

Implemented in v5.5.0

https://github.com/maizzle/framework/releases/tag/v5.5.0