diff options
| -rw-r--r-- | packages/astro/src/vite-plugin-astro-server/css.ts | 19 | ||||
| -rw-r--r-- | packages/astro/test/0-css.test.js | 9 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/0-css/src/components/VueModules.vue | 4 |
3 files changed, 14 insertions, 18 deletions
diff --git a/packages/astro/src/vite-plugin-astro-server/css.ts b/packages/astro/src/vite-plugin-astro-server/css.ts index c2dd5f6d7..9a4133f3d 100644 --- a/packages/astro/src/vite-plugin-astro-server/css.ts +++ b/packages/astro/src/vite-plugin-astro-server/css.ts @@ -9,6 +9,8 @@ interface ImportedStyle { content: string; } +const inlineQueryRE = /(?:\?|&)inline(?:$|&)/ + /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */ export async function getStylesForURL( filePath: URL, @@ -32,21 +34,20 @@ export async function getStylesForURL( } // Else try to load it else { - const url = new URL(importedModule.url, 'http://localhost'); + let modId = importedModule.url // Mark url with ?inline so Vite will return the CSS as plain string, even for CSS modules - url.searchParams.set('inline', ''); - const modId = `${decodeURI(url.pathname)}${url.search}`; - + if (!inlineQueryRE.test(importedModule.url)) { + if (importedModule.url.includes('?')) { + modId = importedModule.url.replace('?', '?inline&'); + } else { + modId += '?inline'; + } + } try { // The SSR module is possibly not loaded. Load it if it's null. const ssrModule = await loader.import(modId); css = ssrModule.default; } catch { - // Some CSS modules, e.g. from Vue files, may not work with the ?inline query. - // If so, we fallback to a url instead - if (modId.includes('.module.')) { - importedCssUrls.add(importedModule.url); - } // The module may not be inline-able, e.g. SCSS partials. Skip it as it may already // be inlined into other modules if it happens to be in the graph. continue; diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 6c2ee0966..a582f9e71 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -225,7 +225,7 @@ describe('CSS', function () { it('<style module>', async () => { const el = $('#vue-modules'); const classes = el.attr('class').split(' '); - const moduleClass = classes.find((name) => /^_title_[\w-]+/.test(name)); + const moduleClass = classes.find((name) => /^_vueModules_[\w-]+/.test(name)); // 1. check HTML assert.equal(el.attr('class').includes(moduleClass), true); @@ -405,18 +405,13 @@ describe('CSS', function () { }); it('resolves CSS from Vue', async () => { - const styles = ['VueModules.vue?vue&type=style&index=0&lang.module.scss']; - for (const style of styles) { - const href = $(`link[href$="${style}"]`).attr('href'); - assert.equal((await fixture.fetch(href)).status, 200, style); - } - const allInjectedStyles = $('style').text().replace(/\s*/g, ''); assert.equal(allInjectedStyles.includes('.vue-css{'), true); assert.equal(allInjectedStyles.includes('.vue-sass{'), true); assert.equal(allInjectedStyles.includes('.vue-scss{'), true); assert.equal(allInjectedStyles.includes('.vue-scoped[data-v-'), true); + assert.equal(allInjectedStyles.includes('._vueModules_'), true); }); it('remove unused styles from client:load components', async () => { diff --git a/packages/astro/test/fixtures/0-css/src/components/VueModules.vue b/packages/astro/test/fixtures/0-css/src/components/VueModules.vue index 3fa687fba..579ac311f 100644 --- a/packages/astro/test/fixtures/0-css/src/components/VueModules.vue +++ b/packages/astro/test/fixtures/0-css/src/components/VueModules.vue @@ -1,10 +1,10 @@ <style module lang="scss"> $type: cursive; -.title { +.vueModules { font-family: $type; } </style> <template> - <h1 id="vue-modules" :class="$style.title">Vue CSS Modules</h1> + <h1 id="vue-modules" :class="$style.vueModules">Vue CSS Modules</h1> </template> |