From f1d9b4416150d1294db730f8861a0c9f08549c96 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Wed, 9 Apr 2025 12:32:21 -0600
Subject: [PATCH] fix(richtext-lexical): diff component css was not included in
 css bundle (#12028)

Currently, the lexical version diff component is completely unstyled, as
the scss was never included in our css bundle. This PR ensures that the
diff component scss is included in our css bundle
---
 packages/richtext-lexical/bundle.js                | 4 ++--
 packages/richtext-lexical/eslint.config.js         | 1 +
 packages/richtext-lexical/src/exports/cssEntry.ts  | 5 +++++
 packages/richtext-lexical/src/field/Diff/index.tsx | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 packages/richtext-lexical/src/exports/cssEntry.ts

diff --git a/packages/richtext-lexical/bundle.js b/packages/richtext-lexical/bundle.js
index 1a651d0a79..e22a97fcfb 100644
--- a/packages/richtext-lexical/bundle.js
+++ b/packages/richtext-lexical/bundle.js
@@ -21,7 +21,7 @@ const removeCSSImports = {
 async function build() {
   // Bundle only the .scss files into a single css file
   await esbuild.build({
-    entryPoints: ['src/exports/client/index.ts'],
+    entryPoints: ['src/exports/cssEntry.ts'],
     bundle: true,
     minify: true,
     outdir: 'dist/bundled_scss',
@@ -35,7 +35,7 @@ async function build() {
   fs.mkdirSync('dist/exports/client_optimized')
 
   try {
-    fs.renameSync('dist/bundled_scss/index.css', 'dist/field/bundled.css')
+    fs.renameSync('dist/bundled_scss/cssEntry.css', 'dist/field/bundled.css')
     fs.copyFileSync('dist/field/bundled.css', 'dist/exports/client_optimized/bundled.css')
     fs.rmSync('dist/bundled_scss', { recursive: true })
   } catch (err) {
diff --git a/packages/richtext-lexical/eslint.config.js b/packages/richtext-lexical/eslint.config.js
index f55b13f827..5ca2976e9b 100644
--- a/packages/richtext-lexical/eslint.config.js
+++ b/packages/richtext-lexical/eslint.config.js
@@ -9,6 +9,7 @@ const { rules } = reactCompiler
 export const index = [
   ...rootEslintConfig,
   {
+    ignores: ['bundle.js'],
     languageOptions: {
       parserOptions: {
         ...rootParserOptions,
diff --git a/packages/richtext-lexical/src/exports/cssEntry.ts b/packages/richtext-lexical/src/exports/cssEntry.ts
new file mode 100644
index 0000000000..db68ef4287
--- /dev/null
+++ b/packages/richtext-lexical/src/exports/cssEntry.ts
@@ -0,0 +1,5 @@
+// The purpose of this file is to export all modules that may contain SCSS.
+// These will then be bundled into one CSS file by our bundler.
+
+export * from './client/index.js'
+export * from './server/rsc.js'
diff --git a/packages/richtext-lexical/src/field/Diff/index.tsx b/packages/richtext-lexical/src/field/Diff/index.tsx
index 3306d51f54..f670d8e9e4 100644
--- a/packages/richtext-lexical/src/field/Diff/index.tsx
+++ b/packages/richtext-lexical/src/field/Diff/index.tsx
@@ -7,6 +7,7 @@ import React from 'react'
 
 import './htmlDiff/index.scss'
 import './index.scss'
+import '../bundled.css'
 
 import type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'