test: wip

Author: hi-ogawa

packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx

@@ -5,18 +5,28 @@ import cssInline from './client-inline.css?inline'
 import cssRaw from './client-raw.css?raw'
 import React from 'react'
 
-export function TestCssQueriesClient() {
+export function TestCssQueriesClient(props: {
+  serverUrl: string
+  serverInline: string
+  serverRaw: string
+}) {
   const [enabled, setEnabled] = React.useState(false)
+
+  function urlWithHmr(href: string) {
+    return href + (import.meta.env.BASE_URL ? '?t=' + Date.now() : '')
+  }
+
   return (
     <div>
-      <button onClick={() => setEnabled(!enabled)}>
-        test-css-queries-client
-      </button>
+      <button onClick={() => setEnabled(!enabled)}>test-css-queries</button>
       {enabled && (
         <>
-          <link rel="stylesheet" href={cssUrl} />
+          <link rel="stylesheet" href={urlWithHmr(cssUrl)} />
           <style>{cssInline}</style>
           <style>{cssRaw}</style>
+          <link rel="stylesheet" href={urlWithHmr(props.serverUrl)} />
+          <style>{props.serverInline}</style>
+          <style>{props.serverRaw}</style>
         </>
       )}
       <div className="test-css-url-client">test-css-url-client: {cssUrl}</div>

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-inline.css

@@ -1,4 +1,3 @@
 .test-css-inline-server {
-  padding: 4px;
-  margin: 2px;
+  color: rgb(0, 255, 50);
 }

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-raw.css

@@ -1,3 +1,3 @@
 .test-css-raw-server {
-  text-decoration: underline;
+  color: rgb(0, 255, 0);
 }

packages/plugin-rsc/examples/basic/src/routes/css-queries/server-url.css

@@ -1,3 +1,3 @@
 .test-css-url-server {
-  border: 2px solid rgb(255, 0, 0);
+  color: rgb(0, 200, 100);
 }

packages/plugin-rsc/examples/basic/src/routes/css-queries/server.tsx

@@ -6,6 +6,11 @@ import { TestCssQueriesClient } from './client'
 export function TestCssQueries() {
   return (
     <div>
+      <TestCssQueriesClient
+        serverUrl={cssUrl}
+        serverInline={cssInline}
+        serverRaw={cssRaw}
+      />
       <div>
         <div className="test-css-url-server">test-css-url-server: {cssUrl}</div>
         <div className="test-css-inline-server">
@@ -16,7 +21,6 @@ export function TestCssQueries() {
           test-css-raw-server: {typeof cssRaw === 'string' ? 'string' : 'other'}
         </div>
       </div>
-      <TestCssQueriesClient />
     </div>
   )
 }