Refactor Vite config and add necessary plugins

Updated Vite configuration to include plugins and CSS directives.

Close react#439

Author: MoOx

packages/website/docs/learn/environment-setup/01-expo.md

@@ -74,6 +74,7 @@ module.exports = {
     require('react-strict-dom/postcss-plugin')({
       include: [
         // Include source files to watch for style changes
+        // Be specific and avoid a non-specific glob like "**/*.{js,jsx}" which could cause major performance issues during build
         'src/**/*.{js,jsx,mjs,ts,tsx}',
         // List any installed node_modules that include UI built with React Strict DOM
         'node_modules/<package-name>/*.js'

packages/website/docs/learn/environment-setup/02-next.md

@@ -54,18 +54,19 @@ export default config;
 import babelLoader from "./babelLoader.config.js";
 
 const config = {
-  plugins: [
+  plugins: {
     "react-strict-dom/postcss-plugin": {
       include: [
         // Include source files to watch for style changes
+        // Be specific and avoid a non-specific glob like "**/*.{js,jsx}" which could cause major performance issues during build
         'src/**/*.{js,jsx,mjs,ts,tsx}',
         // List any installed node_modules that include UI built with React Strict DOM
         'node_modules/<package-name>/*.js'
       ],
       babelConfig: babelLoader,
       useLayers: true,
     }
-  ],
+  },
 };
 
 export default config;

packages/website/docs/learn/environment-setup/03-vite.md

@@ -50,30 +50,37 @@ export default {
 import babelLoader from "./babel.config.js";
 
 export default {
-  plugins: [
+  plugins: {
     "react-strict-dom/postcss-plugin": {
       include: [
         // Include source files to watch for style changes
+        // Be specific and avoid a non-specific glob like "**/*.{js,jsx}" which could cause major performance issues during build
         'src/**/*.{js,jsx,mjs,ts,tsx}',
         // List any installed node_modules that include UI built with React Strict DOM
         'node_modules/<package-name>/*.js'
       ],
       babelConfig: babelLoader,
       useLayers: true,
     },
-  ],
+  },
 };
 ```
 
 ## Vite configuration
 
+If you just created a brand new Vite app, you might need to install
+
+```
+npm install vite-plugin-babel vite-tsconfig-paths
+```
+
 Create or edit the `vite.config.ts` file as follows.
 
 ```js title="vite.config.ts"
 import { defineConfig } from "vite";
-import viteBabel from "vite-plugin-babel";
-import viteReact from "@vitejs/plugin-react";
 import tsConfigPaths from "vite-tsconfig-paths";
+import viteReact from "@vitejs/plugin-react";
+import viteBabel from "vite-plugin-babel";
 
 export default defineConfig(() => ({
   plugins: [
@@ -92,7 +99,7 @@ export default defineConfig(() => ({
 
 Your app needs to include a CSS file that contains a `@react-strict-dom` directive. This acts as a placeholder that is replaced by the generated CSS during builds.
 
-```css title="strict.css"
+```css title="src/strict.css"
 /* This directive is used by the react-strict-dom postcss plugin. */
 /* It is automatically replaced with generated CSS during builds. */
 @react-strict-dom;
@@ -101,6 +108,8 @@ Your app needs to include a CSS file that contains a `@react-strict-dom` directi
 Next, import the CSS file in the `main.tsx` file.
 
 ```js title="src/main.tsx"
+// ...
+
 // Required for CSS to work on Vite
 import "./strict.css";
 
@@ -134,5 +143,21 @@ export default defineConfig(() => ({
     ],
   },
 }));
+```
+
+## Server-Side Rendering
+
+If you plan to use SSR with Vite you will need to add the following `ssr` options.
+
+```js title="vite.config.ts"
+import { defineConfig } from "vite";
 
+//...
+
+export default defineConfig(() => ({
+  // ...
+  ssr: {
+    noExternal: ["react-strict-dom"],
+  },
+}));
 ```