Switch to esbuild minifier for CSS (Comcast#3827)

* Switch to `esbuild` minfier for CSS

* Add a note on rollowdown

* Add a `Theming` section

* Update README.md

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

Author: amanmahajan7

README.md

@@ -26,7 +26,7 @@ The DataGrid component is designed to handle large datasets efficiently while of
 - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
 - Strictly typed with TypeScript
 - [Keyboard accessibility](https://adazzle.github.io/react-data-grid/#/CommonFeatures)
-- Light and dark mode support out of the box. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes.
+- Light and dark mode support out of the box.
 - [Frozen columns](https://adazzle.github.io/react-data-grid/#/CommonFeatures): Freeze columns to keep them visible during horizontal scrolling.
 - [Column resizing](https://adazzle.github.io/react-data-grid/#/CommonFeatures)
 - [Multi-column sorting](https://adazzle.github.io/react-data-grid/#/CommonFeatures)
@@ -53,6 +53,16 @@ The DataGrid component is designed to handle large datasets efficiently while of
 - [Changelog](CHANGELOG.md)
 - [Contributing](CONTRIBUTING.md)
 
+> **Important** <br />
+> `rolldown-vite` by default uses `lightningcss` to minify css which has a [bug minifying light-dark syntax](https://github.com/parcel-bundler/lightningcss/issues/873). You can switch to `esbuild` as a workaround
+
+```ts
+build: {
+  ....,
+  cssMinify: 'esbuild'
+}
+```
+
 ## Installation
 
 Install `react-data-grid` using your favorite package manager:
@@ -110,6 +120,10 @@ function App() {
 }
 ```
 
+## Theming
+
+Set `--rdg-color-scheme: light/dark` at the `:root` to control the color theme. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes.
+
 ## API Reference
 
 ### Components

vite.config.ts

@@ -50,7 +50,9 @@ export default defineConfig(({ command, isPreview }) => ({
   build: {
     modulePreload: { polyfill: false },
     sourcemap: true,
-    reportCompressedSize: false
+    reportCompressedSize: false,
+    // https://github.com/parcel-bundler/lightningcss/issues/873
+    cssMinify: 'esbuild'
   },
   plugins: [
     (!isTest || isPreview) &&