refactor(*): bundle styles with components

.gitignore

@@ -48,6 +48,11 @@ src/**/*.js
 src/**/*.js.map
 src/**/*.css.map
 
+# Artefacts
+projects/igniteui-angular/**/*.component.css
+projects/igniteui-angular/**/*.styles.ts
+
+# Typedoc Theme
 # Typedoc and SassDoc Themes
 extras/sassdoc/**/*
 extras/docs/themes/typedoc/bin

CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes for each version of this project will be documented in this
 
 ## 22.1.0
 
+### New Features
+
+- **Theming**
+    - Component structural styles are now **scoped and tree-shakable** — they ship inside each component's own bundle instead of a single global, all-or-nothing theme stylesheet. An app now pays for CSS only for the components it actually imports.
+    - Design tokens for all four design systems (Material, Bootstrap, Fluent, Indigo) × light/dark are emitted **once per theme** into the global preset (e.g. `igniteui-angular.css`). As a result of those changes, the pre-built theme files are roughly **half the size** (~49% smaller raw, ~58% smaller gzip). 
+    - Finalized the migration to the `tokens()` mixin as the single, universal way to apply a component theme, replacing the individual per-component wrapper mixins (`avatar()`, `dialog()`, `checkbox()`, `tabs()`, etc.) across the rest of the library, following the same pattern already introduced for the Grid family in 22.0.0:
+        ```scss
+        // Before
+        .my-avatar {
+            @include avatar(avatar-theme($background: red));
+        }
+
+        // After
+        .my-avatar {
+            @include tokens(avatar-theme($background: red));
+        }
+        ```
+    - Cascade layering (`ig.base` → `ig.typography` → `ig.material` → `ig.derived`) keeps precedence deterministic between structural styles, typography, design-system overrides, and derived/contextual tokens now that styles are split across component bundles and the global preset.
+
+### Breaking Changes
+
+- The individual per-component Sass theme wrapper mixins (`avatar`, `badge`, `banner`, `bottom-nav`, `button-group`, `calendar`, `card`, `carousel`, `checkbox`, `chip`, `column-actions`, `combo`, `date-picker`, `date-range-picker`, `dialog`, `divider`, `drop-down`, `expansion-panel`, `excel-filtering`, `grid-summary`, `grid-toolbar`, `icon`, `file-input`, `input-group`, `list`, `navbar`, `navdrawer`, `paginator`, `progress-circular`, `progress-linear`, `query-builder`, `radio`, `select`, `slider`, `snackbar`, `splitter`, `stepper`, `switch`, `tabs`, `time-picker`, `toast`, `tree`, and the grid/pivot mixins), which have been marked as deprecated in favor of the generic tokens/css-vars mixins for several major versions, have now been removed. Use the `tokens()` mixin instead. The `ng update` migration for 22.1.0 automatically rewrites existing `@include <component>(<component>-theme(...))` calls to `@include tokens(<component>-theme(...))`.
+- Removed the per-component `-typography` mixins (`badge-typography`, `dialog-typography`, `checkbox-typography`, etc.). Typography is now applied automatically as part of each component's tokens, so these standalone calls are no longer needed. The `ng update` migration deletes existing calls (including multi-line and aliased calls) automatically.
+- Removed the deep Sass imports of per-component structural partials (e.g. `igniteui-angular/lib/core/styles/components/avatar/avatar-component`) and their `component()` mixin calls. Structural styles are no longer optionally-included Sass — they now ship automatically with each component's bundle. The `ng update` migration removes these `@use` statements and matching `component()` calls automatically.
+- `IgxDividerDirective` has been replaced by `IgxDividerComponent` (divider is now a standalone component with its own scoped stylesheet). The `ng update` migration updates existing imports/usages automatically; `IgxDividerModule` is unaffected.
+
 ### General
 
 - **Removed Hammer.js dependency**

Dockerfile.test

@@ -0,0 +1,40 @@
+# Platform is forced via `docker build/run --platform linux/amd64` (see
+# scripts/docker-test/{image,container}.mjs) rather than hardcoded here, to
+# avoid BuildKit's FromPlatformFlagConstDisallowed lint warning.
+#
+# Ubuntu version MUST match `runs-on` in .github/workflows/nodejs.yml.
+# GitHub silently redefines what "ubuntu-latest" means (last moved
+# 22.04 → 24.04 in Jan 2025) — check that workflow whenever bumping this.
+FROM ubuntu:24.04
+
+ENV DEBIAN_FRONTEND=noninteractive
+
+# ── Google Chrome (x86 — best-effort match for CI's ubuntu-latest runner) ────
+# NOTE: this always installs whatever apt's "stable" channel currently
+# resolves to; CI's runner image ships a periodically-frozen Chrome snapshot,
+# so exact version parity is not guaranteed (see justfile / SKILL.md caveat).
+RUN apt-get update \
+ && apt-get install -y curl gnupg ca-certificates \
+ && curl -fsSL https://dl.google.com/linux/linux_signing_key.pub \
+    | gpg --dearmor -o /etc/apt/trusted.gpg.d/google-chrome.gpg \
+ && echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" \
+    > /etc/apt/sources.list.d/google-chrome.list \
+ && apt-get update \
+ && apt-get install -y google-chrome-stable \
+ && rm -rf /var/lib/apt/lists/*
+
+# ── Node 24 ───────────────────────────────────────────────────────────────────
+RUN curl -fsSL https://deb.nodesource.com/setup_24.x | bash - \
+ && apt-get install -y nodejs \
+ && rm -rf /var/lib/apt/lists/*
+
+# ── Chrome wrapper (container-stable flags, no karma config changes needed) ──
+RUN printf '#!/bin/sh\nexec /usr/bin/google-chrome-stable --disable-dev-shm-usage --no-zygote "$@"\n' \
+    > /usr/local/bin/google-chrome-ci \
+ && chmod +x /usr/local/bin/google-chrome-ci
+
+ENV CHROME_BIN=/usr/local/bin/google-chrome-ci \
+    PUPPETEER_SKIP_DOWNLOAD=1 \
+    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
+
+WORKDIR /workspace

angular.json

@@ -45,8 +45,11 @@
             "namedChunks": true,
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
-              ]
+                "node_modules",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             },
             "browser": "./src/main.ts"
           },
@@ -199,13 +202,14 @@
               "src/styles/styles.scss",
               "projects/igniteui-angular/test.css"
             ],
-            "assets": [
-              "projects/igniteui-angular/test-utils/assets"
-            ],
+            "assets": [],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
-              ]
+                "node_modules",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             },
             "tsConfig": "projects/igniteui-angular/tsconfig.spec.json",
             "karmaConfig": "projects/igniteui-angular/karma.conf.js",
@@ -294,8 +298,11 @@
             "stylePreprocessorOptions": {
               "includePaths": [
                 "node_modules",
-                "node_modules/@infragistics"
-              ]
+                "node_modules/@infragistics",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             },
             "tsConfig": "projects/igniteui-angular-extras/tsconfig.spec.json",
             "karmaConfig": "projects/igniteui-angular-extras/karma.conf.js"
@@ -360,8 +367,11 @@
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
-              ]
+                "node_modules",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             },
             "browser": "projects/igniteui-angular-elements/src/main.ts"
           },
@@ -370,8 +380,8 @@
               "budgets": [
                 {
                   "type": "allScript",
-                  "maximumWarning": "2.5mb",
-                  "maximumError": "3.5mb"
+                  "maximumWarning": "6mb",
+                  "maximumError": "7mb"
                 },
                 {
                   "type": "bundle",
@@ -381,8 +391,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "200kb",
+                  "maximumError": "300kb"
                 }
               ],
               "fileReplacements": [
@@ -448,8 +458,11 @@
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
-              ]
+                "node_modules",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             },
             "scripts": []
           }
@@ -486,8 +499,11 @@
             "scripts": [],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
-              ]
+                "node_modules",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             },
             "ssr": {
               "entry": "projects/bundle-test/server.ts"
@@ -510,8 +526,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "200kb",
+                  "maximumError": "300kb"
                 }
               ],
               "outputHashing": "all",
@@ -589,8 +605,11 @@
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "node_modules"
-              ]
+                "node_modules",
+                "projects/igniteui-angular",
+                "projects/igniteui-angular/core/src/core/"
+              ],
+              "sass": { "silenceDeprecations": ["if-function"] }
             }
           },
           "configurations": {
@@ -603,8 +622,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "200kB",
+                  "maximumError": "300kB"
                 }
               ],
               "outputHashing": "all"

justfile

@@ -0,0 +1,43 @@
+# justfile — CI-parity test runner
+#
+# Runs the Ignite UI for Angular test suite inside a Docker container that
+# matches CI exactly (ubuntu:24.04 + Node 24 + Google Chrome), regardless of
+# host OS. All orchestration lives in scripts/docker-test/*.mjs (Node, not
+# shell) so these recipes work unchanged on Windows, macOS, and Linux.
+#
+# Requires: docker, node. Install `just`: https://github.com/casey/just#installation
+#
+# Examples:
+#   just test avatar              # spec suite for one component
+#   just test '**/slider/**/*.spec.ts'
+#   just test                     # CI default: test:lib + test:styles
+#   just run test:lib:others      # any npm script, run inside the container
+#   just build                    # force-rebuild the Docker image
+#   just shell                    # interactive shell in the container
+#   just clean                    # remove the image + node_modules volume
+
+cli := "node scripts/docker-test/cli.mjs"
+
+# List available recipes (default when running bare `just`)
+default:
+    @just --list
+
+# Run one component's specs, an explicit glob, or the CI default suite
+test COMPONENT="":
+    {{ cli }} test "{{ COMPONENT }}"
+
+# Run any npm script (e.g. test:lib, test:lib:others, test:lib:grid) in the container
+run SCRIPT *ARGS:
+    {{ cli }} run "{{ SCRIPT }}" {{ ARGS }}
+
+# (Re)build the CI-parity Docker image; auto-runs anyway when Dockerfile.test changes
+build:
+    {{ cli }} build
+
+# Drop into an interactive shell inside the CI-parity container
+shell:
+    {{ cli }} shell
+
+# Remove the CI-parity image and cached node_modules volume
+clean:
+    {{ cli }} clean