code · pull · Mar 11, 2026 · Mar 11, 2026 · Mar 11, 2026 · Mar 11, 2026
diff --git a/documentation/ag-grid-docs/src/content/docs/column-definitions/index.mdoc b/documentation/ag-grid-docs/src/content/docs/column-definitions/index.mdoc
@@ -98,6 +98,10 @@ const gridOptions = {
 }
 ```
 
+{% note %}
+The provided column types use cell classes to apply styling. The `CellStyleModule` is required for these types to work correctly.
+{% /note %}
+
 ## Updating Columns
 
 Columns can be controlled by updating the column state, or updating the column definition.

diff --git a/esbuild.config.cjs b/esbuild.config.cjs
@@ -3,38 +3,18 @@ const { umdWrapper } = require('esbuild-plugin-umd-wrapper');
 const fs = require('fs/promises');
 const path = require('path');
 const postcss = require('postcss');
-const cssAutoPrefix = require('autoprefixer');
-const cssNano = require('cssnano');
-const cssImport = require('postcss-import');
-const cssRtl = require('postcss-rtlcss');
-const cssUrl = require('postcss-url');
+const postcssPlugins = require('./postcss-plugins.cjs');
 
 /** @type {import('esbuild').Plugin} */
 const cssPlugin = {
     name: 'css-plugin',
     setup(build) {
         build.onLoad({ filter: /\.css$/ }, async (args) => {
             const css = await require('fs').promises.readFile(args.path, 'utf8');
-            const result = await postcss([
-                cssImport(),
-                cssUrl({ url: 'inline' }),
-                cssAutoPrefix(),
-                cssRtl({
-                    ltrPrefix: `:where(.ag-ltr)`,
-                    rtlPrefix: `:where(.ag-rtl)`,
-                    bothPrefix: `:where(.ag-ltr, .ag-rtl)`,
-                }),
-                cssNano({
-                    preset: [
-                        'default',
-                        {
-                            discardComments: true,
-                            normalizeWhitespace: true,
-                            minifySelectors: true,
-                        },
-                    ],
-                }),
-            ]).process(css, { from: args.path, to: args.path });
+            const result = await postcss(postcssPlugins).process(css, {
+                from: args.path,
+                to: args.path,
+            });
 
             // UMD builds: non-source CSS (legacy themes) gets injected as <style> tags
             const isUmd = /:(umd|umd:watch)$/.test(process.env.NX_TASK_TARGET_TARGET ?? '');

diff --git a/postcss-plugins.cjs b/postcss-plugins.cjs
@@ -0,0 +1,26 @@
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const postcssImport = require('postcss-import');
+const postcssRtlcss = require('postcss-rtlcss');
+const postcssUrl = require('postcss-url');
+
+module.exports = [
+    postcssImport(),
+    postcssUrl({ url: 'inline' }),
+    autoprefixer(),
+    postcssRtlcss({
+        ltrPrefix: `:where(.ag-ltr)`,
+        rtlPrefix: `:where(.ag-rtl)`,
+        bothPrefix: `:where(.ag-ltr, .ag-rtl)`,
+    }),
+    cssnano({
+        preset: [
+            'default',
+            {
+                discardComments: true,
+                normalizeWhitespace: true,
+                minifySelectors: true,
+            },
+        ],
+    }),
+];
diff --git a/testing/manual/template/src/angular/disabled.html b/testing/manual/template/src/angular/disabled.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>AG Grid Manual Test - Angular (disabled)</title>
+        <link rel="stylesheet" href="../styles.css" />
+        <script src="../menu.js" defer></script>
+    </head>
+    <body>
+        <div style="padding: 40px; font-family: system-ui, sans-serif">
+            <h2>Angular not enabled</h2>
+            <p>The Angular plugin is disabled by default to keep dev server startup fast.</p>
+            <p>Restart with: <code>ANGULAR=1 yarn dev</code></p>
+        </div>
+    </body>
+</html>
diff --git a/testing/manual/template/src/angular/index.html b/testing/manual/template/src/angular/index.html
@@ -9,18 +9,6 @@
     </head>
     <body>
         <app-root></app-root>
-        <div id="angular-disabled" style="display: none; padding: 40px; font-family: system-ui, sans-serif">
-            <h2>Angular not enabled</h2>
-            <p>The Angular plugin is disabled by default to keep dev server startup fast.</p>
-            <p>Restart with: <code>ANGULAR=1 yarn dev</code></p>
-        </div>
-        <script type="module">
-            try {
-                await import('./main.ts');
-            } catch {
-                document.querySelector('app-root').style.display = 'none';
-                document.getElementById('angular-disabled').style.display = 'block';
-            }
-        </script>
+        <script type="module" src="main.ts"></script>
     </body>
 </html>
diff --git a/testing/manual/template/src/config.ts b/testing/manual/template/src/config.ts
@@ -1,10 +1,5 @@
-import {
-    AllCommunityModule,
-    type ColDef,
-    type GridOptions,
-    type GridReadyEvent,
-    ModuleRegistry,
-} from 'ag-grid-community';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
+import type { ColDef, GridOptions, GridReadyEvent } from 'ag-grid-community';
 import { AllEnterpriseModule } from 'ag-grid-enterprise';
 
 ModuleRegistry.registerModules([AllCommunityModule, AllEnterpriseModule]);

diff --git a/testing/manual/template/vite.config.ts b/testing/manual/template/vite.config.ts
@@ -1,15 +1,19 @@
 import react from '@vitejs/plugin-react';
 import vue from '@vitejs/plugin-vue';
+import fs from 'fs';
+import { createRequire } from 'module';
 import path from 'path';
 import { defineConfig } from 'vite';
+import type { Plugin } from 'vite';
+
+const require = createRequire(import.meta.url);
 
 const angularEnabled = !!process.env.ANGULAR;
 
-// Resolve AG Grid packages to source for near-realtime HMR
 const agGridRoot = path.resolve(__dirname, '../../..');
 
 export default defineConfig(async () => {
-    const plugins = [react(), vue()];
+    const plugins = [cssFileDefaultImport(), ...(angularEnabled ? [] : [serveAngularDisabledPage()]), react(), vue()];
     const aliases: Record<string, string> = {
         'ag-grid-community': path.join(agGridRoot, 'packages/ag-grid-community/src/main.ts'),
         'ag-grid-enterprise': path.join(agGridRoot, 'packages/ag-grid-enterprise/src/main.ts'),
@@ -39,15 +43,21 @@ export default defineConfig(async () => {
         console.log('\x1b[33m%s\x1b[0m', 'Angular disabled. Run with ANGULAR=1 yarn dev to enable.');
     }
 
+    const postcssPlugins = require(path.join(agGridRoot, 'postcss-plugins.cjs'));
+
     return {
         plugins,
+        css: { postcss: { plugins: postcssPlugins } },
         resolve: { alias: aliases },
         build: {
             target: 'esnext',
             rollupOptions: {
                 input: {
                     main: path.resolve(__dirname, 'index.html'),
-                    angular: path.resolve(__dirname, 'src/angular/index.html'),
+                    angular: path.resolve(
+                        __dirname,
+                        angularEnabled ? 'src/angular/index.html' : 'src/angular/disabled.html'
+                    ),
                     react: path.resolve(__dirname, 'src/react/index.html'),
                     javascript: path.resolve(__dirname, 'src/javascript/index.html'),
                     vue: path.resolve(__dirname, 'src/vue/index.html'),
@@ -56,3 +66,33 @@ export default defineConfig(async () => {
         },
     };
 });
+
+function serveAngularDisabledPage(): Plugin {
+    return {
+        name: 'serve-angular-disabled-page',
+        transformIndexHtml(html, ctx) {
+            if (ctx.filename.includes('/src/angular/')) {
+                return fs.readFileSync(path.resolve(__dirname, 'src/angular/disabled.html'), 'utf-8');
+            }
+        },
+    };
+}
+
+// AG Grid source uses `import css from './foo.css'` (default imports of CSS
+// strings). Vite requires `?inline` after the CSS file to get this behaviour.
+// This plugin appends ?inline to all imported CSS files.
+function cssFileDefaultImport(): Plugin {
+    const agGridSrc = path.join(agGridRoot, 'packages');
+    return {
+        name: 'ag-grid-css-inline',
+        enforce: 'pre',
+        async resolveId(source, importer) {
+            if (source.endsWith('.css') && importer?.startsWith(agGridSrc)) {
+                const resolved = await this.resolve(source, importer, { skipSelf: true });
+                if (resolved) {
+                    return resolved.id + '?inline';
+                }
+            }
+        },
+    };
+}
diff --git a/utilities/all/project.json b/utilities/all/project.json
@@ -166,12 +166,15 @@
         "commands": ["node external/ag-shared/scripts/watch/watch.js grid", "nx run ag-grid-docs:dev"]
       }
     },
+    "format-write": {
+      "command": "nx format:write --all --sort-root-tsconfig-paths=false"
+    },
     "format-check": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [
           {
-            "command": "nx format:check --all"
+            "command": "nx format:check --all --sort-root-tsconfig-paths=false"
           }
         ]
       }