RSC: Add css files to the example (#8905)

packages/cli/src/commands/experimental/setupRscHandler.js

@@ -121,6 +121,41 @@ export const handler = async ({ force, verbose }) => {
           })
         },
       },
+      {
+        title: 'Adding CSS files...',
+        task: async () => {
+          const files = [
+            {
+              template: 'Counter.css.template',
+              path: 'Counter.css',
+            },
+            {
+              template: 'Counter.module.css.template',
+              path: 'Counter.module.css',
+            },
+            {
+              template: 'App.css.template',
+              path: 'App.css',
+            },
+            {
+              template: 'App.module.css.template',
+              path: 'App.module.css',
+            },
+          ]
+
+          files.forEach((file) => {
+            const template = fs.readFileSync(
+              path.resolve(__dirname, 'templates', 'rsc', file.template),
+              'utf-8'
+            )
+            const filePath = path.join(rwPaths.web.src, file.path)
+
+            writeFile(filePath, template, {
+              overwriteExisting: force,
+            })
+          })
+        },
+      },
       {
         title: 'Updating index.html...',
         task: async () => {

packages/cli/src/commands/experimental/templates/rsc/App.css.template

@@ -0,0 +1,3 @@
+h1 {
+  text-decoration: underline;
+}

packages/cli/src/commands/experimental/templates/rsc/App.module.css.template

@@ -0,0 +1,3 @@
+.title {
+  color: green;
+}

packages/cli/src/commands/experimental/templates/rsc/App.tsx.template

@@ -1,12 +1,28 @@
+import { Assets } from '@redwoodjs/vite/assets'
+import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal'
+
+// @ts-expect-error no types
+import styles from './App.module.css'
 import { Counter } from './Counter'
 
+import './App.css'
+
+// TODO (RSC) Something like this will probably be needed
+// const RwRscGlobal = import.meta.env.PROD ? ProdRwRscServerGlobal : DevRwRscServerGlobal;
+
+globalThis.rwRscGlobal = new ProdRwRscServerGlobal()
+
 const App = ({ name = 'Anonymous' }) => {
   return (
-    <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
-      <h1>Hello {name}!!</h1>
-      <h3>This is a server component.</h3>
-      <Counter />
-    </div>
+    <>
+      {/* TODO (RSC) <Assets /> should be part of the router later */}
+      <Assets />
+      <div style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}>
+        <h1 className={styles.title}>Hello {name}!!</h1>
+        <h3>This is a server component.</h3>
+        <Counter />
+      </div>
+    </>
   )
 }
 

packages/cli/src/commands/experimental/templates/rsc/Counter.css.template

@@ -0,0 +1,7 @@
+/**
+ * This should affect all h3 elements on the page, both server components and
+ * client components. This is just standard CSS stuff
+ */
+h3 {
+  color: orange;
+}

packages/cli/src/commands/experimental/templates/rsc/Counter.module.css.template

@@ -0,0 +1,3 @@
+.header {
+  font-style: italic;
+}

packages/cli/src/commands/experimental/templates/rsc/Counter.tsx.template

@@ -2,14 +2,18 @@
 
 import React from 'react'
 
+// @ts-expect-error no types
+import styles from './Counter.module.css'
+import './Counter.css'
+
 export const Counter = () => {
   const [count, setCount] = React.useState(0)
 
   return (
     <div style={{ border: '3px blue dashed', margin: '1em', padding: '1em' }}>
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
-      <h3>This is a client component.</h3>
+      <h3 className={styles.header}>This is a client component.</h3>
     </div>
   )
 }