diff --git a/README.md b/README.md index b0a3051f5f..b91c5cb848 100644 --- a/README.md +++ b/README.md @@ -53,16 +53,6 @@ The DataGrid component is designed to handle large datasets efficiently while of - [Changelog](CHANGELOG.md) - [Contributing](CONTRIBUTING.md) -> **Important**
-> `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: @@ -91,6 +81,17 @@ import 'react-data-grid/lib/styles.css'; `react-data-grid` is published as ECMAScript modules for evergreen browsers, bundlers, and server-side rendering. +> **Important**
+> Vite 8+ 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 tweak the `cssMinify` or `cssTarget` [settings](https://main.vite.dev/config/build-options) as a workaround. + +```ts +build: { + cssMinify: 'esbuild', + // or + cssTarget: 'esnext' +} +``` + ## Getting started Here is a basic example of how to use `react-data-grid` in your React application: diff --git a/vite.config.ts b/vite.config.ts index d4652ff0fa..7cf97ba322 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -102,7 +102,7 @@ export default defineConfig( sourcemap: true, reportCompressedSize: false, // https://github.com/parcel-bundler/lightningcss/issues/873 - cssMinify: 'esbuild' + cssTarget: 'esnext' }, plugins: [ ecij(),