Fix HMR in static build + @import HMR (#2440)

* Fix HMR in static build + @import HMR

* Changeset

* Add a comment on what cleanUrl is doing

* Running prettier

* Improve comments on how the static build compilation

works differently.

.changeset/angry-apricots-invite.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes HMR of CSS that is imported from astro, when using the static build flag

packages/astro/src/core/ssr/index.ts

@@ -229,6 +229,18 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
  )
  : new Set<SSRElement>();
 
+ // Inject HMR scripts
+ if (mode === 'development' && astroConfig.buildOptions.experimentalStaticBuild) {
+ scripts.add({
+ props: { type: 'module', src: '/@vite/client' },
+ children: '',
+ });
+ scripts.add({
+ props: { type: 'module', src: new URL('../../runtime/client/hmr.js', import.meta.url).pathname },
+ children: '',
+ });
+ }
+
  const result = createResult({ astroConfig, logging, origin, params, pathname, renderers, scripts });
  // Resolves specifiers in the inline hydrated scripts, such as "@astrojs/renderer-preact/client.js"
  result.resolve = async (s: string) => {
@@ -249,7 +261,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
  const tags: vite.HtmlTagDescriptor[] = [];
 
  // dev only: inject Astro HMR client
- if (mode === 'development') {
+ if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
  tags.push({
  tag: 'script',
  attrs: { type: 'module' },

packages/astro/src/vite-plugin-astro/compile.ts

@@ -50,6 +50,13 @@ async function compile(config: AstroConfig, filename: string, source: string, vi
  experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild,
  // TODO add experimental flag here
  preprocessStyle: async (value: string, attrs: Record<string, string>) => {
+ // When using this flag CSS is added via <link> and therefore goes
+ // through Vite's CSS pipeline. We don't need to transform here, it will be
+ // transformed on CSS requests.
+ if (config.buildOptions.experimentalStaticBuild) {
+ return { code: value };
+ }
+
  const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
  try {
  const result = await transformWithVite({

packages/astro/src/vite-plugin-astro/index.ts

@@ -3,6 +3,7 @@ import type { AstroConfig } from '../@types/astro';
 import type { LogOptions } from '../core/logger';
 
 import esbuild from 'esbuild';
+import npath from 'path';
 import { fileURLToPath } from 'url';
 import { AstroDevServer } from '../core/dev/index.js';
 import { getViteTransform, TransformHook } from './styles.js';
@@ -29,6 +30,11 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
  }
 
  let viteTransform: TransformHook;
+
+ // Variables for determing if an id starts with /src...
+ const srcRootWeb = config.src.pathname.slice(config.projectRoot.pathname.length - 1);
+ const isBrowserPath = (path: string) => path.startsWith(srcRootWeb);
+
  return {
  name: '@astrojs/vite-plugin-astro',
  enforce: 'pre', // run transforms before other plugins can
@@ -38,7 +44,16 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
  // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
  async resolveId(id) {
  // serve sub-part requests (*?astro) as virtual modules
- if (parseAstroRequest(id).query.astro) {
+ const { query } = parseAstroRequest(id);
+ if (query.astro) {
+ // Convert /src/pages/index.astro?astro&type=style to /Users/name/
+ // Because this needs to be the id for the Vite CSS plugin to property resolve
+ // relative @imports.
+ if (query.type === 'style' && isBrowserPath(id)) {
+ const outId = npath.posix.join(config.projectRoot.pathname, id);
+ return outId;
+ }
+
  return id;
  }
  },

packages/astro/vendor/vite/dist/client/client.mjs

@@ -199,6 +199,16 @@ function warnFailedFetch(err, path) {
 socket.addEventListener('message', async ({ data }) => {
  handleMessage(JSON.parse(data));
 });
+
+/**
+ * This cleans up the query params and removes the `direct` param which is internal.
+ * Other query params are preserved.
+ */
+function cleanUrl(pathname) {
+ let url = new URL(pathname, location);
+ url.searchParams.delete('direct');
+ return url.pathname + url.search;
+}
 let isFirstUpdate = true;
 async function handleMessage(payload) {
  switch (payload.type) {
@@ -230,11 +240,13 @@ async function handleMessage(payload) {
  // css-update
  // this is only sent when a css file referenced with <link> is updated
  let { path, timestamp } = update;
- path = path.replace(/\?.*/, '');
+ let searchUrl = cleanUrl(path);
  // can't use querySelector with `[href*=]` here since the link may be
  // using relative paths so we need to use link.href to grab the full
  // URL for the include check.
- const el = [].slice.call(document.querySelectorAll(`link`)).find((e) => e.href.includes(path));
+ const el = [].slice.call(document.querySelectorAll(`link`)).find((e) => {
+ return cleanUrl(e.href).includes(searchUrl)
+ });
  if (el) {
  const newPath = `${base}${path.slice(1)}${path.includes('?') ? '&' : '?'}t=${timestamp}`;
  el.href = new URL(newPath, el.href).href;