test(mdx): create referenced css file (#6124)

Author: pcattori

integration/mdx-test.ts

@@ -5,6 +5,7 @@ import {
   createFixture,
   js,
   mdx,
+  css,
 } from "./helpers/create-fixture";
 import type { Fixture, AppFixture } from "./helpers/create-fixture";
 import { PlaywrightFixture } from "./helpers/playwright-fixture";
@@ -62,8 +63,10 @@ headers:
   Cache-Control: no-cache
 ---
 
+import stylesheetHref from "../app.css"
+
 export const links = () => [
-  { rel: "stylesheet", href: "app.css" }
+  { rel: "stylesheet", href: stylesheetHref }
 ]
 
 import { useLoaderData } from '@remix-run/react';
@@ -86,6 +89,13 @@ export function ComponentUsingData() {
         "app/routes/basic.mdx": mdx`
 # This is some basic markdown!
         `.trim(),
+
+        "app/app.css": css`
+          body {
+            background-color: #eee;
+            color: #000;
+          }
+        `,
       },
     });
     appFixture = await createAppFixture(fixture);
@@ -113,6 +123,8 @@ export function ComponentUsingData() {
     expect(await app.getHtml("title")).toMatch("My First Post");
     expect(await app.getHtml("#loader")).toMatch(/Mambo Number:.+5/s);
     expect(await app.getHtml("#handle")).toMatch("abc");
-    expect(await app.getHtml('link[rel="stylesheet"]')).toMatch("app.css");
+    expect(await app.getHtml('link[rel="stylesheet"]')).toMatch(
+      /app-[\dA-Z]+\.css/
+    );
   });
 });