mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Fix CSS styles on windows (#8724)
This commit is contained in:
parent
6db2687ef0
commit
455af3235b
4 changed files with 29 additions and 9 deletions
5
.changeset/poor-frogs-melt.md
Normal file
5
.changeset/poor-frogs-melt.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fix CSS styles on Windows
|
|
@ -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
|
||||
|
|
|
@ -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()],
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue