From 0febd5c7bb82f1b7a4e9bcf0a462860cb10aa161 Mon Sep 17 00:00:00 2001
From: Mayank <mayank99@users.noreply.github.com>
Date: Mon, 12 Sep 2022 18:55:34 -0400
Subject: [PATCH] Fix build error using `buildSsrCjsExternalHeuristics`

---
 README.md                          | 18 +++++++++---------
 emotion/astro.config.mjs           |  4 ++++
 linaria/astro.config.ts            |  2 ++
 styled-components/astro.config.mjs |  4 ++++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index d8036ec..cf12d03 100644
--- a/README.md
+++ b/README.md
@@ -4,15 +4,15 @@ This monorepo will show examples of various CSS-in-JS libraries in Astro. Curren
 
 ## Compatibility table
 
-| Library           | Status             | Notes                                                                  |
-| ----------------- | ------------------ | ---------------------------------------------------------------------- |
-| styled-components | ❌ Doesn't work    | Prod build errors with: `styled.div is not a function`                 |
-| emotion           | ❌ Doesn't work    | Prod build errors with: `styled.div is not a function`                 |
-| linaria           | 🟡 Partially works | `css` works perfectly using rollup plugin, `styled` causes build error |
-| stitches          | ✅ Works           | `<style>` tag for SSR needs to be in React component                   |
-| typestyle         | ✅ Works           | -                                                                      |
-| vanilla-extract   | ✅ Works           | -                                                                      |
-| solid-styled      | ❌ Doesn't work    | No vite or rollup plugin, also requires Context                        |
+| Library           | Status             | Notes                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| styled-components | 🟡 Partially works | Prod build errors with: `styled.div is not a function`. <br> Can be worked around with [`client:only`](https://docs.astro.build/en/reference/directives-reference/#clientonly) or by using [`vite.legacy.buildSsrCjsExternalHeuristics`](https://vitejs.dev/guide/ssr.html#ssr-format) and [`vite.ssr.noExternal`](https://vitejs.dev/config/ssr-options.html#ssr-noexternal) (will cause FOUC though). |
+| emotion           | 🟡 Partially works | Prod build errors with: `styled.div is not a function`. <br> Can be worked around with [`client:only`](https://docs.astro.build/en/reference/directives-reference/#clientonly) or by using [`vite.legacy.buildSsrCjsExternalHeuristics`](https://vitejs.dev/guide/ssr.html#ssr-format) and [`vite.ssr.noExternal`](https://vitejs.dev/config/ssr-options.html#ssr-noexternal) (will cause FOUC though). |
+| linaria           | ✅ Works           | Prod build errors with: `Named export 'styled' not found.`. <br> Can be worked around using [`vite.legacy.buildSsrCjsExternalHeuristics`](https://vitejs.dev/guide/ssr.html#ssr-format) and [`vite.ssr.noExternal`](https://vitejs.dev/config/ssr-options.html#ssr-noexternal) or by downgrading to v3.                                                                                                 |
+| stitches          | ✅ Works           | `<style>` tag for SSR needs to be in React component                                                                                                                                                                                                                                                                                                                                                    |
+| typestyle         | ✅ Works           | -                                                                                                                                                                                                                                                                                                                                                                                                       |
+| vanilla-extract   | ✅ Works           | -                                                                                                                                                                                                                                                                                                                                                                                                       |
+| solid-styled      | ❌ Doesn't work    | No vite or rollup plugin, also requires Context                                                                                                                                                                                                                                                                                                                                                         |
 
 ## Running locally
 
diff --git a/emotion/astro.config.mjs b/emotion/astro.config.mjs
index 8a6f195..314b04d 100644
--- a/emotion/astro.config.mjs
+++ b/emotion/astro.config.mjs
@@ -4,4 +4,8 @@ import react from '@astrojs/react';
 // https://astro.build/config
 export default defineConfig({
 	integrations: [react()],
+	vite: {
+		legacy: { buildSsrCjsExternalHeuristics: true },
+		ssr: { noExternal: ['@emotion/*'] },
+	},
 });
diff --git a/linaria/astro.config.ts b/linaria/astro.config.ts
index c339728..8297942 100644
--- a/linaria/astro.config.ts
+++ b/linaria/astro.config.ts
@@ -6,6 +6,8 @@ import linaria from '@linaria/rollup';
 export default defineConfig({
 	vite: {
 		plugins: [linaria()],
+		legacy: { buildSsrCjsExternalHeuristics: true },
+		ssr: { noExternal: ['@linaria/*'] },
 	},
 	integrations: [react()],
 });
diff --git a/styled-components/astro.config.mjs b/styled-components/astro.config.mjs
index 8a6f195..bda01e0 100644
--- a/styled-components/astro.config.mjs
+++ b/styled-components/astro.config.mjs
@@ -4,4 +4,8 @@ import react from '@astrojs/react';
 // https://astro.build/config
 export default defineConfig({
 	integrations: [react()],
+	vite: {
+		legacy: { buildSsrCjsExternalHeuristics: true },
+		ssr: { noExternal: ['styled-components'] },
+	},
 });