michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix CSS styles on windows (#8724)

Browse source
This commit is contained in:
Bjorn Lu 2023-10-02 23:17:34 +08:00 committed by GitHub
parent 6db2687ef0
commit 455af3235b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/poor-frogs-melt.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix CSS styles on Windows

4
packages/astro/src/content/vite-plugin-content-assets.ts
View file

@ -64,7 +64,7 @@ export function astroContentAssetPropagationPlugin({
if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
await devModuleLoader.import(basePath);
}
const { stylesMap, urls } = await getStylesForURL(
const { styles, urls } = await getStylesForURL(
pathToFileURL(basePath),
devModuleLoader,
'development'
@ -77,7 +77,7 @@ export function astroContentAssetPropagationPlugin({
);
stringifiedLinks = JSON.stringify([...urls]);
stringifiedStyles = JSON.stringify([...stylesMap.values()]);
stringifiedStyles = JSON.stringify(styles.map((s) => s.content));
stringifiedScripts = JSON.stringify([...hoistedScripts]);
} else {
// Otherwise, use placeholders to inject styles and scripts

19
packages/astro/src/vite-plugin-astro-server/css.ts
View file

@ -4,14 +4,21 @@ import { viteID } from '../core/util.js';
import { isBuildableCSSRequest } from './util.js';
import { crawlGraph } from './vite.js';
interface ImportedStyle {
id: string;
url: string;
content: string;
}
/** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
export async function getStylesForURL(
filePath: URL,
loader: ModuleLoader,
mode: RuntimeMode
): Promise<{ urls: Set<string>; stylesMap: Map<string, string> }> {
): Promise<{ urls: Set<string>; styles: ImportedStyle[] }> {
const importedCssUrls = new Set<string>();
const importedStylesMap = new Map<string, string>();
// Map of url to injected style object. Use a `url` key to deduplicate styles
const importedStylesMap = new Map<string, ImportedStyle>();
for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
if (isBuildableCSSRequest(importedModule.url)) {
@ -28,7 +35,11 @@ export async function getStylesForURL(
mode === 'development' && // only inline in development
typeof ssrModule?.default === 'string' // ignore JS module styles
) {
importedStylesMap.set(importedModule.id ?? importedModule.url, ssrModule.default);
importedStylesMap.set(importedModule.url, {
id: importedModule.id ?? importedModule.url,
url: importedModule.url,
content: ssrModule.default,
});
} else {
// NOTE: We use the `url` property here. `id` would break Windows.
importedCssUrls.add(importedModule.url);
@ -38,6 +49,6 @@ export async function getStylesForURL(
return {
urls: importedCssUrls,
stylesMap: importedStylesMap,
styles: [...importedStylesMap.values()],
};
}

10
packages/astro/src/vite-plugin-astro-server/route.ts
View file

@ -293,7 +293,11 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
}
// Pass framework CSS in as style tags to be appended to the page.
const { urls: styleUrls, stylesMap } = await getStylesForURL(filePath, moduleLoader, mode);
const { urls: styleUrls, styles: importedStyles } = await getStylesForURL(
filePath,
moduleLoader,
mode
);
let links = new Set<SSRElement>();
[...styleUrls].forEach((href) => {
links.add({
@ -306,7 +310,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
});
let styles = new Set<SSRElement>();
[...stylesMap].forEach(([url, content]) => {
importedStyles.forEach(({ id, url, content }) => {
// Vite handles HMR for styles injected as scripts
scripts.add({
props: {
@ -319,7 +323,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
// should emulate what Vite injects so further HMR works as expected.
styles.add({
props: {
'data-vite-dev-id': url,
'data-vite-dev-id': id,
},
children: content,
});