From 74054df4586abf765509a3f976b7ce421b1c7715 Mon Sep 17 00:00:00 2001
From: Stephen Cooper <scooperdev@gmail.com>
Date: Wed, 11 Mar 2026 10:32:07 +0000
Subject: [PATCH 1/3] AG-13677 AG-16877 Note CellStyleModule required for
 provided column types (#13274)

---
 .../src/content/docs/column-definitions/index.mdoc            | 4 ++++
 1 file changed, 4 insertions(+)

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
index 0cac4483176..dbcabd2297b 100644
--- 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.

From 734012677067455d239c5c791a402bf7240e456e Mon Sep 17 00:00:00 2001
From: Bernie Sumption <bernie@berniecode.com>
Date: Wed, 11 Mar 2026 11:12:22 +0000
Subject: [PATCH 2/3] AG-16859 Update manual testing template for esbuild/CSS
 changes (#13275)

---
 esbuild.config.cjs                            | 30 ++----------
 postcss-plugins.cjs                           | 26 +++++++++++
 .../manual/template/src/angular/disabled.html | 17 +++++++
 .../manual/template/src/angular/index.html    | 14 +-----
 testing/manual/template/src/config.ts         |  9 +---
 testing/manual/template/vite.config.ts        | 46 +++++++++++++++++--
 6 files changed, 94 insertions(+), 48 deletions(-)
 create mode 100644 postcss-plugins.cjs
 create mode 100644 testing/manual/template/src/angular/disabled.html

diff --git a/esbuild.config.cjs b/esbuild.config.cjs
index 4d57cc268c4..6cf4ee5dfc5 100644
--- a/esbuild.config.cjs
+++ b/esbuild.config.cjs
@@ -3,11 +3,7 @@ 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 = {
@@ -15,26 +11,10 @@ const cssPlugin = {
     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
new file mode 100644
index 00000000000..f5809bf1df7
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..3a0db58c549
--- /dev/null
+++ 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
index 01728dc6a69..b1d4951624f 100644
--- 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
index 10ed5ba8b70..46c09fd9753 100644
--- 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
index 0456564c830..64d47e4ac83 100644
--- 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';
+                }
+            }
+        },
+    };
+}

From 7a92a0803c95771e2694d650045e783cb1f93872 Mon Sep 17 00:00:00 2001
From: Stephen Cooper <scooperdev@gmail.com>
Date: Wed, 11 Mar 2026 13:33:13 +0000
Subject: [PATCH 3/3] Disable sort-root-tsconfig-paths in nx format commands
 (#13278)

* Disable sort-root-tsconfig-paths in nx format commands

* Apply suggestion from @StephenCooper
---
 utilities/all/project.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/utilities/all/project.json b/utilities/all/project.json
index b4be90871e4..fea7446b741 100644
--- 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"
           }
         ]
       }