Skip to content

Responsive CSS utility classes stripped from stylesheet in Astro 6 build #404

Description

@spokospace

Description

@playform/inline removes responsive utility classes (e.g. md:flex, md:block, md:flex-row, md:cursor-zoom-in) from the main CSS stylesheet during post-build processing. These classes are inside @media (min-width: 768px) blocks and are used in the HTML, but the plugin incorrectly treats them as unused and strips them.

This causes elements with hidden md:flex to remain display: none on desktop, since the md:flex rule is gone.

Reproduction

Environment:

  • @playform/inline: 0.1.4
  • @playform/compress: 0.2.2
  • astro: 6.0.5
  • vite: 8.0.0
  • unocss: 66.6.6

Steps:

  1. Use responsive UnoCSS utilities in Astro components:
<button class="hidden md:flex items-center">Click</button>
  1. Run astro build
  2. Before @playform/inline runs, the CSS file contains all responsive utilities correctly:
.md\:flex { display: flex }
.md\:block { display: block }
.md\:flex-row { flex-direction: row }
/* ... many more md:* classes */
  1. After @playform/inline processes the build, these classes are removed from the stylesheet

Verification: Disabling @playform/inline in astro.config.mjs results in all responsive classes being present and working correctly.

Expected behavior

@playform/inline should preserve CSS rules inside @media blocks that match classes used in the HTML, even if the media query doesn't apply at the "default" viewport.

Additional context

  • Non-responsive utilities like .hidden, .flex, .absolute are preserved correctly
  • A few responsive utilities survive (e.g. md:text-xs) — possibly because they're inlined into the HTML before the main CSS is pruned
  • This was working with Astro 5 / Vite 7 — the regression appeared after upgrading to Astro 6 / Vite 8

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

bugSomething isn't working

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions