build(*): define the library's minimum browser versions

CHANGELOG.md

@@ -13,6 +13,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxTabsComponent`
     - The selected tab is now rendered correctly in zoneless applications, including the initially selected tab, selection changes made from code, and selection changes after tabs are added or removed.
 
+## 23.0.0
+
+### General
+
+- **Browser support** - The minimum supported browser versions are now documented: Chrome and Edge 131, Firefox 151, and Safari 18 on macOS and iOS. The component styles rely on CSS container style queries and relative colors, so older browsers, including Firefox ESR 140, are not supported. See the [Browser Support](README.md#browser-support) section of the README.
+
 ## 22.2.1
 
 ### New Features

README.md

@@ -75,7 +75,9 @@ The **Theming skill** includes setup instructions for the `igniteui-theming` MCP
 
 | ![chrome][] | ![firefox][] | ![edge][] | ![opera][] | ![safari][] | ![ie][] |
 |:-----------:|:------------:|:---------:|:----------:|:-----------:|:-------:|
-|  Latest ✔   |   Latest ✔   | Latest ✔  |  Latest ✔  |  Latest ✔   |   11*   |
+|    131+     |     151+     |   131+    |  Latest ✔  | 18+ (macOS and iOS) |   11*   |
+
+These are the minimum versions. The component styles rely on CSS container style queries (Firefox 151, Safari 18) and relative colors (Chrome and Edge 131), so older browsers, including Firefox ESR 140, are not supported. Other Chromium-based browsers, such as Opera, are supported from their Chromium 131 release. The same targets are defined in [`projects/igniteui-angular/.browserslistrc`](projects/igniteui-angular/.browserslistrc).
 
 \* *IE 11 is only supported in Ignite UI for Angular < 13.0.0*
 

projects/igniteui-angular/.browserslistrc

@@ -0,0 +1,9 @@
+# Angular's default targets, minus the versions the library's styles can't support:
+# container style queries need Firefox 151 and Safari 18, relative colors need Chrome and Edge 131.
+# Keep the baseline date in sync with Angular's default (BASELINE_DATE in @angular/build).
+baseline widely available on 2026-05-07
+not Chrome < 131
+not Edge < 131
+not Firefox < 151
+not Safari < 18
+not iOS < 18

scripts/sass.mjs

@@ -73,6 +73,7 @@ const stripComments = () => {
 
 stripComments.postcss = true;
 
+// Autoprefixer resolves browserslist from each file's `from` path, i.e. projects/igniteui-angular/.browserslistrc.
 const postProcessor = postcss([
   autoprefixer({
     cascade: false,
@@ -101,7 +102,7 @@ async function buildThemePresets() {
           .replace(/\.scss$/, '.css')
           .replace(THEMES.SRC, '');
 
-        let outCss = stripBom(postProcessor.process(result.css).css);
+        let outCss = stripBom(postProcessor.process(result.css, { from: srcPath, map: false }).css);
 
         const outputFile = DEST_DIR(fileName);
 
@@ -174,7 +175,7 @@ export function createStylesBuilder(compiler) {
 
     trackDeps(result.loadedUrls, srcPath);
 
-    let css = stripBom(postProcessor.process(result.css).css);
+    let css = stripBom(postProcessor.process(result.css, { from: srcPath, map: false }).css);
 
     if (result.sourceMap) {
       const smBase64 = Buffer.from(JSON.stringify(result.sourceMap)).toString('base64');
@@ -188,7 +189,7 @@ export function createStylesBuilder(compiler) {
     const result = await compiler.compileAsync(srcPath, BASE_STYLES.CONFIG);
     trackDeps(result.loadedUrls, srcPath);
 
-    const css = stripBom(postProcessor.process(result.css).css);
+    const css = stripBom(postProcessor.process(result.css, { from: srcPath, map: false }).css);
     const exportName =
       path.basename(srcPath, '.styles.scss').toUpperCase().replace(/-/g, '_') + '_CSS';
     const ts = [