fix(themes): angular element styles don't work

Scope the CSS variables to a dynamic selector based on the prefix
metadata stored in the component theme schema.

Author: simeonoff

package-lock.json

@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^20.0.0",
+    "igniteui-theming": "^21.0.0-beta.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -29,9 +29,9 @@ $elements-selector-prefix: 'igc';
     $prefix: 'ig';
     $result: $theme_schema;
 
-    @if map.has-key($theme_schema, "name") {
-        $name: map.get($theme_schema, "name");
-        $selector: map.get($theme_schema, "selector") or $name;
+    @if map.has-key($theme_schema, 'name') {
+        $name: map.get($theme_schema, 'name');
+        $element-prefix: map.get($theme_schema, '_meta', 'element-prefix');
         $modified: ();
 
         // @debug "name: #{$name}";
@@ -40,29 +40,54 @@ $elements-selector-prefix: 'igc';
             $name: list.nth(string.split($name, 'igx-'), -1);
             $name: '#{$elements-var-prefix}-#{$name}';
             // @debug "name after: #{$name}";
-            $modified: map.merge($modified, (name: $name));
+            $modified: map.merge(
+                $modified,
+                (
+                    name: $name,
+                )
+            );
         }
 
         // For exposed components also modify selector with updated element prefix:
-        @if list.index(vars.$allowed, map.get($theme_schema, "name")) {
-            // @debug "selector before: #{$selector}";
-            $selector: updateSelectors($selector);
-            // @debug "selector after: #{$selector}";
+        @if list.index(vars.$allowed, map.get($theme_schema, 'name')) {
+            // @debug "selector before: #{$element-prefix}";
+            $element-prefix: $elements-selector-prefix;
+            // @debug "selector after: #{$element-prefix}";
         }
 
-        $modified: map.merge($modified, (selector: $selector));
+        $modified: map.merge(
+            $modified,
+            (
+                _meta: map.merge(
+                    map.get($theme_schema, '_meta'),
+                    (
+                        'element-prefix': $element-prefix,
+                    )
+                ),
+            )
+        );
 
         @if map.has-key($theme_schema, 'themes') {
             $themes: map.get($theme_schema, 'themes');
             $newThemes: ();
             @each $name, $sub_schema in $themes {
-                $newThemes: map.set($newThemes, $name, updateElementName($sub_schema));
+                $newThemes: map.set(
+                    $newThemes,
+                    $name,
+                    updateElementName($sub_schema)
+                );
             }
-            $modified: map.merge($modified, (themes: $newThemes));
+            $modified: map.merge(
+                $modified,
+                (
+                    themes: $newThemes,
+                )
+            );
         }
 
         $result: map.merge($result, $modified);
     }
+
     @return $result;
 }
 
@@ -72,9 +97,9 @@ $elements-selector-prefix: 'igc';
 /// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
 @function updateSelectors($selector) {
     $result: ();
-    $selectors: string.split($selector, ", ");
+    // $selectors: string.split($selector, ", ");
 
-    @each $sel in $selectors {
+    @each $sel in $selector {
         $result: list.append($result, $sel, comma);
 
         @if string.index($sel, 'igx-') == 1 {
@@ -84,7 +109,7 @@ $elements-selector-prefix: 'igc';
         }
     }
 
-    @return "#{$result}";
+    @return '#{$result}';
 }
 
 /// Generates an Ignite UI for Angular Elements global theme.
@@ -109,6 +134,6 @@ $elements-selector-prefix: 'igc';
         $palette: $palette,
         $exclude: $exclude,
         $schema: $schema,
-        $theme-handler: meta.get-function("updateElementName")
+        $theme-handler: meta.get-function('updateElementName')
     );
 }

projects/igniteui-angular-elements/src/themes/_util.scss

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^20.0.0",
+        "igniteui-theming": "^21.0.0-beta.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -63,3 +63,12 @@
     }
     @return $items;
 }
+
+/// Prefixes a CSS selector with the given string.
+/// @access private
+/// @param {String} $prefix - The prefix to add.
+/// @param {String} $selector - The selector to be prefixed.
+/// @return {String} - The prefixed selector.
+@function prefix-selector($prefix, $selector) {
+    @return string.insert($selector, #{$prefix}-, 1);
+}

projects/igniteui-angular/src/lib/core/styles/base/_functions.scss

@@ -6,7 +6,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
-    @include css-vars($theme, 'igx-avatar');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'avatar'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
 

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -5,7 +5,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
-    @include css-vars($theme, 'igx-badge');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'badge'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
 

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -5,7 +5,14 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
-    @include css-vars($theme, 'igx-banner, .igx-banner');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'banner'),
+        #{'.' + prefix-selector($prefix, 'banner')},
+    );
+
+
+    @include css-vars($theme, $selectors);
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-banner-host {

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -6,7 +6,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin bottom-nav($theme) {
-    @include css-vars($theme, 'igx-bottom-nav');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'bottom-nav'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $variant: map.get($theme, '_meta', 'theme');
     $menu-height: rem(56px);

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -6,7 +6,12 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button-group($theme) {
-    @include css-vars($theme, 'igx-buttongroup');
+    $prefix: map.get($theme, '_meta', 'element-prefix');
+    $selectors: (
+        prefix-selector($prefix, 'buttongroup'),
+    );
+
+    @include css-vars($theme, $selectors);
 
     $group-item-border-thickness: rem(1px);
     $group-items-margin: rem(10px, 16px);