Skip to content

Commit 686c312

Browse files
authored
Revives UnoCSS in dev mode when used with the client router (#16242)
1 parent 5bcd03c commit 686c312

2 files changed

Lines changed: 15 additions & 4 deletions

File tree

.changeset/silver-singers-tell.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'astro': patch
3+
---
4+
5+
Revives UnoCSS in dev mode when used with the client router.
6+
7+
This change partly reverts [#16089](https://github.com/withastro/astro/pull/16089), which in hindsight turned out to be too general. Instead of automatically persisting all style sheets, we now do this only for styles from Vue components.
8+

packages/astro/src/transitions/swap-functions.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,7 @@ export const restoreFocus = ({ activeElement, start, end }: SavedFocus) => {
174174
};
175175

176176
// Check for a head element that should persist and returns it,
177-
// either because it has the data attribute or is a link el.
178-
// Returns null if the element is not part of the new head, undefined if it should be left alone.
177+
// either because it has the data attribute or because replacing it would cause avoidable FOUC.
179178
const persistedHeadElement = (el: HTMLElement, newDoc: Document): Element | null => {
180179
const id = el.getAttribute(PERSIST_ATTR);
181180
const newEl = id && newDoc.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
@@ -187,12 +186,16 @@ const persistedHeadElement = (el: HTMLElement, newDoc: Document): Element | null
187186
return newDoc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
188187
}
189188
// In dev mode, Vite injects <style data-vite-dev-id="..."> elements whose
190-
// textContent is later transformed by HMR (e.g. Vue's `:deep()` → `[data-v-xxx]`).
189+
// textContent may later be transformed (especially Vue's `:deep()` → `[data-v-xxx]`).
191190
// Match these by their stable dev ID so the already-transformed style is preserved
192191
// across ClientRouter soft navigations instead of being replaced by the raw version.
192+
// There are other ids that can't be preserved and need a refresh, like Uno's /__uno.css,
193+
// which keeps the id with different contents.
194+
// To avoid enumerating all exceptions, we only apply the auto-persist logic to elements
195+
// that look like Vue's dev styles.
193196
if (import.meta.env.DEV && el.tagName === 'STYLE') {
194197
const viteDevId = el.getAttribute('data-vite-dev-id');
195-
if (viteDevId) {
198+
if (/\?vue&type=style&.*lang.css$/.test(viteDevId || '')) {
196199
return newDoc.head.querySelector(`style[data-vite-dev-id="${viteDevId}"]`);
197200
}
198201
}

0 commit comments

Comments
 (0)