refactor(*): bundle styles with components

.gitignore

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

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open --hmr",
+    "start": "concurrently -r \"npm run build:styles:components\" \"npm run watch:styles\" \"ng serve --open --hmr\"",
     "start:elements": "ng serve --project igniteui-angular-elements",
     "start:performance": "ng serve --project igniteui-angular-performance",
     "build": "ng build --configuration production",
@@ -23,8 +23,10 @@
     "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.mjs",
     "test:elements": "ng test igniteui-angular-elements --watch=false --no-progress --code-coverage --source-map=false",
     "test:elements:watch": "ng test igniteui-angular-elements",
-    "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles",
-    "build:styles": "node scripts/build-styles.mjs",
+    "build:lib": "npm run build:styles:components && ng build igniteui-angular --configuration production && npm run build:styles",
+    "build:styles": "node scripts/build-theme-styles.mjs",
+    "build:styles:components": "node scripts/build-component-styles.mjs",
+    "watch:styles": "node scripts/watch-styles.mjs",
     "build:migrations": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",
     "build:schematics": "gulp copySchematics && tsc --listEmittedFiles --project ./projects/igniteui-angular/schematics/tsconfig.json",
     "build:docs": "npm run build:typedoc:en:production && npm run build:sassdoc:en:production",
@@ -75,7 +77,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^20.0.0",
+    "igniteui-theming": "^22.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
@@ -106,6 +108,7 @@
     "@typescript-eslint/eslint-plugin": "^8.33.1",
     "@typescript-eslint/parser": "^8.33.1",
     "autoprefixer": "^10.4.16",
+    "concurrently": "^9.1.2",
     "del": "^6.0.0",
     "eslint": "^9.28.0",
     "fs-extra": "^11.3.0",
@@ -133,6 +136,7 @@
     "karma-spec-reporter": "^0.0.36",
     "lit-html": "^3.2.1",
     "ng-packagr": "^20.0.0",
+    "node-watch": "^0.7.4",
     "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",

projects/igniteui-angular/src/lib/action-strip/action-strip.component.scss

@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';

projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

@@ -7,7 +7,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxIconComponent } from '../icon/icon.component';
 
 const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
-const DROP_DOWN_LIST = 'igx-drop-down__list';
+const DROP_DOWN_LIST = 'igx-drop-down';
 
 describe('igxActionStrip', () => {
     let fixture;

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -13,7 +13,8 @@ import {
     ChangeDetectorRef,
     AfterViewInit,
     ElementRef,
-    booleanAttribute
+    booleanAttribute,
+    ViewEncapsulation
 } from '@angular/core';
 import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
@@ -73,6 +74,8 @@ export class IgxActionStripMenuItemDirective {
 @Component({
     selector: 'igx-action-strip',
     templateUrl: 'action-strip.component.html',
+    styleUrl: 'action-strip.component.css',
+    encapsulation: ViewEncapsulation.None,
     imports: [
         NgTemplateOutlet,
         IgxIconButtonDirective,