Use URLs for styles, add CSS dev tests (#1993)

#1973

.changeset/tame-melons-think.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix CSS URLs on Windows

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

@@ -25,7 +25,7 @@ export function getStylesForURL(filePath: URL, viteServer: vite.ViteDevServer):
       if (!importedModule.id || scanned.has(importedModule.id)) continue;
       const ext = path.extname(importedModule.id.toLowerCase());
       if (STYLE_EXTENSIONS.has(ext)) {
-        css.add(importedModule.id); // if style file, add to list
+        css.add(importedModule.url || importedModule.id); // if style file, add to list
       } else {
         crawlCSS(importedModule.id, scanned); // otherwise, crawl file to see if it imports any CSS
       }

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

@@ -29,7 +29,7 @@ import { injectTags } from './html.js';
 import { generatePaginateFunction } from './paginate.js';
 import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js';
 
-const svelteAndVueStylesRE = /\?[^&]+&type=style&lang/;
+const svelteStylesRE = /svelte\?svelte&type=style/;
 
 interface SSROptions {
   /** an instance of the AstroConfig */
@@ -247,7 +247,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 
   // inject CSS
   [...getStylesForURL(filePath, viteServer)].forEach((href) => {
-    if (mode === 'development' && svelteAndVueStylesRE.test(href)) {
+    if (mode === 'development' && svelteStylesRE.test(href)) {
       tags.push({
         tag: 'script',
         attrs: { type: 'module', src: href },

packages/astro/test/0-css.test.js

@@ -8,260 +8,308 @@ import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-describe('Styles SSR', function () {
+let fixture;
-  this.timeout(30000); // test needs a little more time in CI
-
-  let fixture;
-  let index$;
-  let bundledCSS;
 
+describe('CSS', function () {
   before(async () => {
     fixture = await loadFixture({
       projectRoot: './fixtures/0-css/',
       renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
     });
-    await fixture.build();
-
-    // get bundled CSS (will be hashed, hence DOM query)
-    const html = await fixture.readFile('/index.html');
-    index$ = cheerio.load(html);
-    const bundledCSSHREF = index$('link[rel=stylesheet][href^=assets/]').attr('href');
-    bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
   });
 
-  describe('Astro styles', () => {
+  // test HTML and CSS contents for accuracy
-    it('HTML and CSS scoped correctly', async () => {
+  describe('build', () => {
-      const $ = index$;
+    this.timeout(30000); // test needs a little more time in CI
 
-      const el1 = $('#dynamic-class');
+    let $;
-      const el2 = $('#dynamic-vis');
+    let bundledCSS;
-      const classes = $('#class').attr('class').split(' ');
-      const scopedClass = classes.find((name) => /^astro-[A-Za-z0-9-]+/.test(name));
 
-      // 1. check HTML
+    before(async () => {
-      expect(el1.attr('class')).to.equal(`blue ${scopedClass}`);
+      await fixture.build();
-      expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
 
-      // 2. check CSS
+      // get bundled CSS (will be hashed, hence DOM query)
-      expect(bundledCSS).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`);
+      const html = await fixture.readFile('/index.html');
+      $ = cheerio.load(html);
+      const bundledCSSHREF = $('link[rel=stylesheet][href^=assets/]').attr('href');
+      bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
     });
 
-    it('No <style> skips scoping', async () => {
+    describe('Astro Styles', () => {
-      const $ = index$;
+      it('HTML and CSS scoped correctly', async () => {
+        const el1 = $('#dynamic-class');
+        const el2 = $('#dynamic-vis');
+        const classes = $('#class').attr('class').split(' ');
+        const scopedClass = classes.find((name) => /^astro-[A-Za-z0-9-]+/.test(name));
 
-      // Astro component without <style> should not include scoped class
+        // 1. check HTML
-      expect($('#no-scope').attr('class')).to.equal(undefined);
+        expect(el1.attr('class')).to.equal(`blue ${scopedClass}`);
+        expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
+
+        // 2. check CSS
+        expect(bundledCSS).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`);
+      });
+
+      it('No <style> skips scoping', async () => {
+        // Astro component without <style> should not include scoped class
+        expect($('#no-scope').attr('class')).to.equal(undefined);
+      });
+
+      it('Child inheritance', async () => {
+        expect($('#passed-in').attr('class')).to.match(/outer astro-[A-Z0-9]+ astro-[A-Z0-9]+/);
+      });
+
+      it('Using hydrated components adds astro-root styles', async () => {
+        expect(bundledCSS).to.include('display:contents');
+      });
+
+      it('<style lang="sass">', async () => {
+        expect(bundledCSS).to.match(new RegExp('h1.astro-[^{]*{color:#90ee90}'));
+      });
+
+      it('<style lang="scss">', async () => {
+        expect(bundledCSS).to.match(new RegExp('h1.astro-[^{]*{color:#ff69b4}'));
+      });
     });
 
-    it('Child inheritance', async () => {
+    describe('Styles in src/', () => {
-      const $ = index$;
+      it('.css', async () => {
+        expect(bundledCSS).to.match(new RegExp('.linked-css[^{]*{color:gold'));
+      });
 
-      expect($('#passed-in').attr('class')).to.match(/outer astro-[A-Z0-9]+ astro-[A-Z0-9]+/);
+      it('.sass', async () => {
+        expect(bundledCSS).to.match(new RegExp('.linked-sass[^{]*{color:#789'));
+      });
+
+      it('.scss', async () => {
+        expect(bundledCSS).to.match(new RegExp('.linked-scss[^{]*{color:#6b8e23'));
+      });
     });
 
-    it('Using hydrated components adds astro-root styles', async () => {
+    describe('JSX', () => {
-      expect(bundledCSS).to.include('display:contents');
+      it('.css', async () => {
+        const el = $('#react-css');
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('react-title');
+
+        // 2. check CSS
+        expect(bundledCSS).to.include('.react-title{');
+      });
+
+      it('.module.css', async () => {
+        const el = $('#react-module-css');
+        const classes = el.attr('class').split(' ');
+        const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include(moduleClass);
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy}`));
+      });
+
+      it('.sass', async () => {
+        const el = $('#react-sass');
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('react-sass-title');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.react-sass-title[^{]*{font-family:fantasy}`));
+      });
+
+      it('.scss', async () => {
+        const el = $('#react-scss');
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('react-scss-title');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.react-scss-title[^{]*{font-family:fantasy}`));
+      });
+
+      it('.module.sass', async () => {
+        const el = $('#react-module-sass');
+        const classes = el.attr('class').split(' ');
+        const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include(moduleClass);
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy}`));
+      });
+
+      it('.module.scss', async () => {
+        const el = $('#react-module-scss');
+        const classes = el.attr('class').split(' ');
+        const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include(moduleClass);
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy}`));
+      });
     });
 
-    it('<style lang="sass">', async () => {
+    describe('Vue', () => {
-      expect(bundledCSS).to.match(new RegExp('h1.astro-[^{]*{color:#90ee90}'));
+      it('<style>', async () => {
+        const el = $('#vue-css');
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('vue-css');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.vue-css[^{]*{font-family:cursive`));
+      });
+
+      it('<style scoped>', async () => {
+        const el = $('#vue-scoped');
+
+        // find data-v-* attribute (how Vue CSS scoping works)
+        const { attribs } = el.get(0);
+        const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
+        expect(scopeId).to.be.ok;
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('vue-scoped');
+
+        // 2. check CSS
+        expect(bundledCSS).to.include(`.vue-scoped[${scopeId}]`);
+      });
+
+      it('<style module>', async () => {
+        const el = $('#vue-modules');
+        const classes = el.attr('class').split(' ');
+        const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include(moduleClass);
+
+        // 2. check CSS
+        expect(bundledCSS).to.include(`${moduleClass}{`);
+      });
+
+      it('<style lang="sass">', async () => {
+        const el = $('#vue-sass');
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('vue-sass');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.vue-sass[^{]*{font-family:cursive`));
+      });
+
+      it('<style lang="scss">', async () => {
+        const el = $('#vue-scss');
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('vue-scss');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.vue-scss[^{]*{font-family:cursive`));
+      });
     });
 
-    it('<style lang="scss">', async () => {
+    describe('Svelte', () => {
-      expect(bundledCSS).to.match(new RegExp('h1.astro-[^{]*{color:#ff69b4}'));
+      it('<style>', async () => {
+        const el = $('#svelte-css');
+        const classes = el.attr('class').split(' ');
+        const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('svelte-css');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.svelte-css.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
+      });
+
+      it('<style lang="sass">', async () => {
+        const el = $('#svelte-sass');
+        const classes = el.attr('class').split(' ');
+        const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('svelte-sass');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.svelte-sass.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
+      });
+
+      it('<style lang="scss">', async () => {
+        const el = $('#svelte-scss');
+        const classes = el.attr('class').split(' ');
+        const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
+
+        // 1. check HTML
+        expect(el.attr('class')).to.include('svelte-scss');
+
+        // 2. check CSS
+        expect(bundledCSS).to.match(new RegExp(`.svelte-scss.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
+      });
     });
   });
 
-  describe('Styles in src/', () => {
+  // with "build" handling CSS checking, the dev tests are mostly testing the paths resolve in dev
-    it('.css', async () => {
+  describe('dev', () => {
-      expect(bundledCSS).to.match(new RegExp('.linked-css[^{]*{color:gold'));
+    let devServer;
+    let $;
+
+    before(async () => {
+      devServer = await fixture.startDevServer();
+      const html = await fixture.fetch('/').then((res) => res.text());
+      $ = cheerio.load(html);
     });
 
-    it('.sass', async () => {
+    after(async () => {
-      expect(bundledCSS).to.match(new RegExp('.linked-sass[^{]*{color:#789'));
+      devServer && (await devServer.stop());
     });
 
-    it('.scss', async () => {
+    it('resolves CSS in public/', async () => {
-      expect(bundledCSS).to.match(new RegExp('.linked-scss[^{]*{color:#6b8e23'));
+      const href = $('link[href="/global.css"]').attr('href');
-    });
+      expect((await fixture.fetch(href)).status).to.equal(200);
-  });
-
-  describe('JSX', () => {
-    it('.css', async () => {
-      const $ = index$;
-      const el = $('#react-css');
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('react-title');
-
-      // 2. check CSS
-      expect(bundledCSS).to.include('.react-title{');
     });
 
-    it('.module.css', async () => {
+    it('resolves CSS in src/', async () => {
-      const $ = index$;
+      const href = $('link[href$="linked.css"]').attr('href');
-      const el = $('#react-module-css');
+      expect((await fixture.fetch(href)).status).to.equal(200);
-      const classes = el.attr('class').split(' ');
-      const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include(moduleClass);
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy}`));
     });
 
-    it('.sass', async () => {
+    it('resolves Astro styles', async () => {
-      const $ = index$;
+      const style = $('style[astro-style]');
-      const el = $('#react-sass');
+      expect(style.length).to.not.equal(0);
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('react-sass-title');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.react-sass-title[^{]*{font-family:fantasy}`));
     });
 
-    it('.scss', async () => {
+    it('resolves Styles from React', async () => {
-      const $ = index$;
+      const styles = ['ReactCSS.css', 'ReactModules.module.css', 'ReactModules.module.scss', 'ReactModules.module.sass', 'ReactSass.sass', 'ReactScss.scss'];
-      const el = $('#react-scss');
+      for (const style of styles) {
-
+        const href = $(`link[href$="${style}"]`).attr('href');
-      // 1. check HTML
+        expect((await fixture.fetch(href)).status, style).to.equal(200);
-      expect(el.attr('class')).to.include('react-scss-title');
+      }
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.react-scss-title[^{]*{font-family:fantasy}`));
     });
 
-    it('.module.sass', async () => {
+    it('resolves CSS from Svelte', async () => {
-      const $ = index$;
+      const scripts = ['SvelteCSS.svelte?svelte&type=style&lang.css', 'SvelteSass.svelte?svelte&type=style&lang.css', 'SvelteScss.svelte?svelte&type=style&lang.css'];
-      const el = $('#react-module-sass');
+      for (const script of scripts) {
-      const classes = el.attr('class').split(' ');
+        const src = $(`script[src$="${script}"]`).attr('src');
-      const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
+        expect((await fixture.fetch(src)).status, script).to.equal(200);
-
+      }
-      // 1. check HTML
-      expect(el.attr('class')).to.include(moduleClass);
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy}`));
     });
 
-    it('.module.scss', async () => {
+    it('resolves CSS from Vue', async () => {
-      const $ = index$;
+      const styles = [
-      const el = $('#react-module-scss');
+        'VueCSS.vue?vue&type=style&index=0&lang.css',
-      const classes = el.attr('class').split(' ');
+        'VueModules.vue?vue&type=style&index=0&lang.module.scss',
-      const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
+        'VueSass.vue?vue&type=style&index=0&lang.sass',
-
+        'VueScoped.vue?vue&type=style&index=0&scoped=true&lang.css',
-      // 1. check HTML
+        'VueScss.vue?vue&type=style&index=0&lang.scss',
-      expect(el.attr('class')).to.include(moduleClass);
+      ];
-
+      for (const style of styles) {
-      // 2. check CSS
+        const href = $(`link[href$="${style}"]`).attr('href');
-      expect(bundledCSS).to.match(new RegExp(`.${moduleClass}[^{]*{font-family:fantasy}`));
+        expect((await fixture.fetch(href)).status, style).to.equal(200);
-    });
+      }
-  });
-
-  describe('Vue', () => {
-    it('<style>', async () => {
-      const $ = index$;
-      const el = $('#vue-css');
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('vue-css');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.vue-css[^{]*{font-family:cursive`));
-    });
-
-    it('<style scoped>', async () => {
-      const $ = index$;
-      const el = $('#vue-scoped');
-
-      // find data-v-* attribute (how Vue CSS scoping works)
-      const { attribs } = el.get(0);
-      const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-'));
-      expect(scopeId).to.be.ok;
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('vue-scoped');
-
-      // 2. check CSS
-      expect(bundledCSS).to.include(`.vue-scoped[${scopeId}]`);
-    });
-
-    it('<style module>', async () => {
-      const $ = index$;
-      const el = $('#vue-modules');
-      const classes = el.attr('class').split(' ');
-      const moduleClass = classes.find((name) => /^_title_[A-Za-z0-9-_]+/.test(name));
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include(moduleClass);
-
-      // 2. check CSS
-      expect(bundledCSS).to.include(`${moduleClass}{`);
-    });
-
-    it('<style lang="sass">', async () => {
-      const $ = index$;
-      const el = $('#vue-sass');
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('vue-sass');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.vue-sass[^{]*{font-family:cursive`));
-    });
-
-    it('<style lang="scss">', async () => {
-      const $ = index$;
-      const el = $('#vue-scss');
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('vue-scss');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.vue-scss[^{]*{font-family:cursive`));
-    });
-  });
-
-  describe('Svelte', () => {
-    it('<style>', async () => {
-      const $ = index$;
-      const el = $('#svelte-css');
-      const classes = el.attr('class').split(' ');
-      const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('svelte-css');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.svelte-css.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
-    });
-
-    it('<style lang="sass">', async () => {
-      const $ = index$;
-      const el = $('#svelte-sass');
-      const classes = el.attr('class').split(' ');
-      const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('svelte-sass');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.svelte-sass.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
-    });
-
-    it('<style lang="scss">', async () => {
-      const $ = index$;
-      const el = $('#svelte-scss');
-      const classes = el.attr('class').split(' ');
-      const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
-
-      // 1. check HTML
-      expect(el.attr('class')).to.include('svelte-scss');
-
-      // 2. check CSS
-      expect(bundledCSS).to.match(new RegExp(`.svelte-scss.${scopedClass}[^{]*{font-family:"Comic Sans MS"`));
     });
   });
 });

packages/astro/test/fixtures/0-css/public/global.css

@@ -0,0 +1,8 @@
+html,
+body {
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}

packages/astro/test/fixtures/0-css/src/pages/index.astro

@@ -9,14 +9,14 @@ import ReactModulesSass from '../components/ReactModulesSass.jsx';
 import ReactModulesScss from '../components/ReactModulesScss.jsx';
 import ReactSass from '../components/ReactSass.jsx';
 import ReactScss from '../components/ReactScss.jsx';
+import SvelteCSS from '../components/SvelteCSS.svelte';
+import SvelteSass from '../components/SvelteSass.svelte';
+import SvelteScss from '../components/SvelteScss.svelte';
 import VueCSS from '../components/VueCSS.vue';
 import VueModules from '../components/VueModules.vue';
 import VueSass from '../components/VueSass.vue';
 import VueScoped from '../components/VueScoped.vue';
 import VueScss from '../components/VueScss.vue';
-import SvelteCSS from '../components/SvelteCSS.svelte';
-import SvelteSass from '../components/SvelteSass.svelte';
-import SvelteScss from '../components/SvelteScss.svelte';
 import ReactDynamic from '../components/ReactDynamic.jsx';
 ---
 
@@ -33,6 +33,7 @@ import ReactDynamic from '../components/ReactDynamic.jsx';
         color: red;
       }
     </style>
+    <link rel="stylesheet" type="text/css" href="/global.css">
     <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
     <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}>
     <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.sass')}>
@@ -49,14 +50,14 @@ import ReactDynamic from '../components/ReactDynamic.jsx';
       <ReactModulesScss />
       <ReactSass />
       <ReactScss />
+      <SvelteCSS />
+      <SvelteSass />
+      <SvelteScss />
       <VueCSS />
       <VueModules />
       <VueSass />
       <VueScoped />
       <VueScss />
-      <SvelteCSS />
-      <SvelteSass />
-      <SvelteScss />
       <ReactDynamic client:load />
     </div>
   </body>

packages/astro/test/test-utils.js

@@ -25,10 +25,15 @@ import preview from '../dist/core/preview/index.js';
  *   .config     - Returns the final config. Will be automatically passed to the methods below:
  *
  *   Build
- *   .build()        - Async. Builds into current folder (will erase previous build)
+ *   .build()          - Async. Builds into current folder (will erase previous build)
- *   .readFile(path) - Async. Read a file from the build.
+ *   .readFile(path)   - Async. Read a file from the build.
- *   .preview()      - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
+ *
- *   .fetch(url)     - Async. Returns a URL from the prevew server (must have called .preview() before)
+ *   Dev
+ *   .startDevServer() - Async. Starts a dev server at an available port. Be sure to call devServer.stop() before test exit.
+ *   .fetch(url)       - Async. Returns a URL from the prevew server (must have called .preview() before)
+ *
+ *   Preview
+ *   .preview()        - Async. Starts a preview server. Note this can’t be running in same fixture as .dev() as they share ports. Also, you must call `server.close()` before test exit
  */
 export async function loadFixture(inlineConfig) {
   if (!inlineConfig || !inlineConfig.projectRoot) throw new Error("Must provide { projectRoot: './fixtures/...' }");
@@ -52,7 +57,11 @@ export async function loadFixture(inlineConfig) {
 
   return {
     build: (opts = {}) => build(config, { mode: 'development', logging: 'error', ...opts }),
-    startDevServer: () => dev(config, { logging: 'error' }),
+    startDevServer: async (opts = {}) => {
+      const devServer = await dev(config, { logging: 'error', ...opts });
+      inlineConfig.devOptions.port = devServer.port; // update port
+      return devServer;
+    },
     config,
     fetch: (url, init) => fetch(`http://${config.devOptions.hostname}:${config.devOptions.port}${url.replace(/^\/?/, '/')}`, init),
     preview: async (opts = {}) => {