Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues 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) { if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
await devModuleLoader.import(basePath); await devModuleLoader.import(basePath);
} }
const { stylesMap, urls } = await getStylesForURL( const { styles, urls } = await getStylesForURL(
pathToFileURL(basePath), pathToFileURL(basePath),
devModuleLoader, devModuleLoader,
'development' 'development'
@ -77,7 +77,7 @@ export function astroContentAssetPropagationPlugin({
); );
stringifiedLinks = JSON.stringify([...urls]); stringifiedLinks = JSON.stringify([...urls]);
stringifiedStyles = JSON.stringify([...stylesMap.values()]); stringifiedStyles = JSON.stringify(styles.map((s) => s.content));
stringifiedScripts = JSON.stringify([...hoistedScripts]); stringifiedScripts = JSON.stringify([...hoistedScripts]);
} else { } else {
// Otherwise, use placeholders to inject styles and scripts // 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 { isBuildableCSSRequest } from './util.js';
import { crawlGraph } from './vite.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. */ /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */
export async function getStylesForURL( export async function getStylesForURL(
filePath: URL, filePath: URL,
loader: ModuleLoader, loader: ModuleLoader,
mode: RuntimeMode mode: RuntimeMode
): Promise<{ urls: Set<string>; stylesMap: Map<string, string> }> { ): Promise<{ urls: Set<string>; styles: ImportedStyle[] }> {
const importedCssUrls = new Set<string>(); 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)) { for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
if (isBuildableCSSRequest(importedModule.url)) { if (isBuildableCSSRequest(importedModule.url)) {
@ -28,7 +35,11 @@ export async function getStylesForURL(
mode === 'development' && // only inline in development mode === 'development' && // only inline in development
typeof ssrModule?.default === 'string' // ignore JS module styles 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 { } else {
// NOTE: We use the `url` property here. `id` would break Windows. // NOTE: We use the `url` property here. `id` would break Windows.
importedCssUrls.add(importedModule.url); importedCssUrls.add(importedModule.url);
@ -38,6 +49,6 @@ export async function getStylesForURL(
return { return {
urls: importedCssUrls, 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. // 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>(); let links = new Set<SSRElement>();
[...styleUrls].forEach((href) => { [...styleUrls].forEach((href) => {
links.add({ links.add({
@ -306,7 +310,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
}); });
let styles = new Set<SSRElement>(); let styles = new Set<SSRElement>();
[...stylesMap].forEach(([url, content]) => { importedStyles.forEach(({ id, url, content }) => {
// Vite handles HMR for styles injected as scripts // Vite handles HMR for styles injected as scripts
scripts.add({ scripts.add({
props: { props: {
@ -319,7 +323,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
// should emulate what Vite injects so further HMR works as expected. // should emulate what Vite injects so further HMR works as expected.
styles.add({ styles.add({
props: { props: {
'data-vite-dev-id': url, 'data-vite-dev-id': id,
}, },
children: content, children: content,
}); });