Add CSS @import test (#4454)

* Add css hmr test

* Allow HMR in e2e tests

* Add changeset

* Actually fix test

* Fix lint

* Skip windows for now

.changeset/odd-swans-collect.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Allow HMR for internal e2e tests

packages/astro/e2e/css.test.js

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { getColor, isWindows, testFactory } from './test-utils.js';
+
+const test = testFactory({
+	root: './fixtures/css/',
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+	await devServer.stop();
+});
+
+test.describe('CSS HMR', () => {
+	test.skip(isWindows, 'TODO: fix css hmr in windows');
+
+	test('edit CSS from @import', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const h = page.locator('h1');
+		expect(await getColor(h)).toBe('rgb(255, 0, 0)');
+
+		await astro.editFile('./src/styles/main.css', (original) =>
+			original.replace('--h1-color: red;', '--h1-color: green;')
+		);
+
+		expect(await getColor(h)).toBe('rgb(0, 128, 0)');
+	});
+});

packages/astro/e2e/fixtures/css/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@e2e/css",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/e2e/fixtures/css/src/pages/index.astro

@@ -0,0 +1,9 @@
+<h1>hello world</h1>
+
+<style>
+  @import "../styles/main.css";
+
+  h1 {
+    color: var(--h1-color);
+  }
+</style>

packages/astro/e2e/fixtures/css/src/styles/main.css

@@ -0,0 +1,3 @@
+:root {
+  --h1-color: red;
+}

packages/astro/e2e/test-utils.js

@@ -1,6 +1,8 @@
 import { test as testBase, expect } from '@playwright/test';
 import { loadFixture as baseLoadFixture } from '../test/test-utils.js';
 
+export const isWindows = process.platform === 'win32';
+
 export function loadFixture(inlineConfig) {
 	if (!inlineConfig || !inlineConfig.root)
 		throw new Error("Must provide { root: './fixtures/...' }");
@@ -40,3 +42,11 @@ export async function getErrorOverlayMessage(page) {
 
 	return await overlay.$$eval('.message-body', (m) => m[0].textContent);
 }
+
+/**
+ * @param {import('@playwright/test').Locator} el
+ * @returns {Promise<string>}
+ */
+export async function getColor(el) {
+	return await el.evaluate((e) => getComputedStyle(e).color);
+}

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

@@ -7,9 +7,10 @@ import { info } from '../core/logger/core.js';
 import * as msg from '../core/messages.js';
 import { isAstroScript } from './query.js';
 
-const PKG_PREFIX = new URL('../../', import.meta.url);
+const PKG_PREFIX = fileURLToPath(new URL('../../', import.meta.url));
+const E2E_PREFIX = fileURLToPath(new URL('../../e2e', import.meta.url));
 const isPkgFile = (id: string | null) => {
-	return id?.startsWith(fileURLToPath(PKG_PREFIX)) || id?.startsWith(PKG_PREFIX.pathname);
+	return id && id.startsWith(PKG_PREFIX) && !id.startsWith(E2E_PREFIX);
 };
 
 export interface HandleHotUpdateOptions {

pnpm-lock.yaml

@@ -585,6 +585,12 @@ importers:
       '@astrojs/vue': link:../../../../integrations/vue
       astro: link:../../..
 
+  packages/astro/e2e/fixtures/css:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/e2e/fixtures/error-cyclic:
     specifiers:
       '@astrojs/preact': workspace:*