Remove postcss-nested

package.json

@@ -96,7 +96,6 @@
     "jspdf-autotable": "^3.5.23",
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.25",
-    "postcss-nested": "^6.0.1",
     "prettier": "3.1.1",
     "react": "^18.1.0",
     "react-dnd": "^16.0.1",

rollup.config.js

@@ -1,7 +1,6 @@
 import { isAbsolute } from 'node:path';
 import wyw from '@wyw-in-js/rollup';
 import postcss from 'rollup-plugin-postcss';
-import postcssNested from 'postcss-nested';
 import { babel } from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import pkg from './package.json' assert { type: 'json' };
@@ -35,7 +34,6 @@ export default {
       }
     }),
     postcss({
-      plugins: [postcssNested],
       extract: 'styles.css'
     }),
     babel({

src/index.ts

@@ -1,3 +1,5 @@
+import './style/layers.css';
+
 export { default, type DataGridProps, type DataGridHandle } from './DataGrid';
 export { default as TreeDataGrid, type TreeDataGridProps } from './TreeDataGrid';
 export { DataGridDefaultRenderersProvider } from './DataGridDefaultRenderersProvider';

src/style/core.ts

@@ -37,72 +37,55 @@ const darkTheme = `
 `;
 
 const root = css`
-  @layer rdg {
-    @layer Defaults,
-      FocusSink,
-      CheckboxInput,
-      CheckboxIcon,
-      CheckboxLabel,
-      Cell,
-      HeaderCell,
-      SummaryCell,
-      EditCell,
-      Row,
-      HeaderRow,
-      SummaryRow,
-      GroupedRow,
-      Root;
-
-    @layer Defaults {
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
+  @layer rdg.Defaults {
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
     }
+  }
 
-    @layer Root {
-      ${lightTheme}
-      --rdg-selection-color: #66afe9;
-      --rdg-font-size: 14px;
-
-      display: grid;
-
-      color-scheme: var(--rdg-color-scheme, light dark);
-
-      /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
-      /* We set a stacking context so internal elements don't render on top of external elements. */
-      /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
-      contain: content;
-      content-visibility: auto;
-      block-size: 350px;
-      border: 1px solid var(--rdg-border-color);
-      box-sizing: border-box;
-      overflow: auto;
-      background-color: var(--rdg-background-color);
-      color: var(--rdg-color);
-      font-size: var(--rdg-font-size);
-
-      /* needed on Firefox to fix scrollbars */
-      &::before {
-        content: '';
-        grid-column: 1/-1;
-        grid-row: 1/-1;
-      }
+  @layer rdg.Root {
+    ${lightTheme}
+    --rdg-selection-color: #66afe9;
+    --rdg-font-size: 14px;
+
+    display: grid;
+
+    color-scheme: var(--rdg-color-scheme, light dark);
+
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
+    /* We set a stacking context so internal elements don't render on top of external elements. */
+    /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
+    contain: content;
+    content-visibility: auto;
+    block-size: 350px;
+    border: 1px solid var(--rdg-border-color);
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: var(--rdg-background-color);
+    color: var(--rdg-color);
+    font-size: var(--rdg-font-size);
+
+    /* needed on Firefox to fix scrollbars */
+    &::before {
+      content: '';
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
 
-      &.rdg-dark {
-        --rdg-color-scheme: dark;
-        ${darkTheme}
-      }
+    &.rdg-dark {
+      --rdg-color-scheme: dark;
+      ${darkTheme}
+    }
 
-      &.rdg-light {
-        --rdg-color-scheme: light;
-      }
+    &.rdg-light {
+      --rdg-color-scheme: light;
+    }
 
-      @media (prefers-color-scheme: dark) {
-        &:not(.rdg-light) {
-          ${darkTheme}
-        }
+    @media (prefers-color-scheme: dark) {
+      &:not(.rdg-light) {
+        ${darkTheme}
       }
     }
   }

src/style/layers.css

@@ -0,0 +1,16 @@
+@layer rdg {
+  @layer Defaults,
+    FocusSink,
+    CheckboxInput,
+    CheckboxIcon,
+    CheckboxLabel,
+    Cell,
+    HeaderCell,
+    SummaryCell,
+    EditCell,
+    Row,
+    HeaderRow,
+    SummaryRow,
+    GroupedRow,
+    Root;
+}

vite.config.ts

@@ -1,6 +1,5 @@
 import react from '@vitejs/plugin-react';
 import wyw from '@wyw-in-js/vite';
-import postcssNested from 'postcss-nested';
 import { defineConfig } from 'vite';
 
 const isCI = process.env.CI === 'true';
@@ -27,11 +26,6 @@ export default defineConfig({
     }),
     !isTest && wyw({ preprocessor: 'none' })
   ],
-  css: {
-    postcss: {
-      plugins: [postcssNested]
-    }
-  },
   server: {
     open: true
   },