Fix loading of styles in static build (#2605)

* Fix loading of styles in static build * Adds a changeset
withastro · Feb 17, 2022 · 8776241 · 8776241
1 parent 5d5a8e6
commit 8776241
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/.changeset/fuzzy-drinks-drop.md b/.changeset/fuzzy-drinks-drop.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes Astro style resolution in the static build
diff --git a/packages/astro/src/core/path.ts b/packages/astro/src/core/path.ts
@@ -10,6 +10,10 @@ export function removeEndingForwardSlash(path: string) {
  return path.endsWith('/') ? path.slice(0, path.length - 1) : path;
 }
 
+export function startsWithForwardSlash(path: string) {
+ return path[0] === '/';
+}
+
 export function startsWithDotDotSlash(path: string) {
  const c1 = path[0];
  const c2 = path[1];

diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
@@ -11,7 +11,7 @@ import { parseAstroRequest } from './query.js';
 import { cachedCompilation } from './compile.js';
 import ancestor from 'common-ancestor-path';
 import { trackCSSDependencies, handleHotUpdate } from './hmr.js';
-import { isRelativePath } from '../core/path.js';
+import { isRelativePath, startsWithForwardSlash } from '../core/path.js';
 
 const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
 interface AstroPluginOptions {
@@ -29,6 +29,11 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
  }
  return filename;
  }
+ function relativeToRoot(pathname: string) {
+ const arg = startsWithForwardSlash(pathname) ? '.' + pathname : pathname;
+ const url = new URL(arg, config.projectRoot);
+ return slash(fileURLToPath(url)) + url.search;
+ }
 
  let viteTransform: TransformHook;
  let viteDevServer: vite.ViteDevServer | null = null;
@@ -52,13 +57,13 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
  // we need to resolve relative paths ourselves.
  if (from) {
  const { query: fromQuery, filename } = parseAstroRequest(from);
- if (fromQuery.astro && isRelativePath(id)) {
+ if (fromQuery.astro && isRelativePath(id) && fromQuery.type === 'script') {
  const resolvedURL = new URL(id, `file:https://${filename}`);
  const resolved = resolvedURL.pathname;
  if (isBrowserPath(resolved)) {
- return slash(fileURLToPath(new URL('.' + resolved, config.projectRoot)));
+ return relativeToRoot(resolved + resolvedURL.search);
  }
- return slash(fileURLToPath(resolvedURL));
+ return slash(fileURLToPath(resolvedURL)) + resolvedURL.search;
  }
  }
 
@@ -69,7 +74,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
  // Because this needs to be the id for the Vite CSS plugin to property resolve
  // relative @imports.
  if (query.type === 'style' && isBrowserPath(id)) {
- return slash(fileURLToPath(new URL('.' + id, config.projectRoot)));
+ return relativeToRoot(id);
  }
 
  return id;

diff --git a/packages/astro/test/static-build.test.js b/packages/astro/test/static-build.test.js
@@ -91,6 +91,15 @@ describe('Static build', () => {
  };
  }
 
+ describe('Page CSS', () => {
+ const findEvidence = createFindEvidence(/height:( )*45vw/);
+
+ it('Page level CSS is added', async () => {
+ const found = await findEvidence('/subpath/index.html');
+ expect(found).to.equal(true, 'Did not find page-level CSS on this page');
+ });
+ });
+
  describe('Shared CSS', () => {
  const findEvidence = createFindEvidence(/var\(--c\)/);