ITADN

Responsive CSS utility classes stripped from stylesheet in Astro 6 build

#404Openspokospace 创建于 2026-03-17
bug
S
spokospacecommented
## 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: ```html <button class="hidden md:flex items-center">Click</button> ``` 2. Run `astro build` 3. Before `@playform/inline` runs, the CSS file contains all responsive utilities correctly: ```css .md\:flex { display: flex } .md\:block { display: block } .md\:flex-row { flex-direction: row } /* ... many more md:* classes */ ``` 4. 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
0 条评论