Responsive CSS utility classes stripped from stylesheet in Astro 6 build
bug
## 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 条评论