refactor(*): depend on element selector being present in theming package

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": "^21.0.0-beta.2",
+    "igniteui-theming": "^21.0.0-beta.3",
     "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');
-        $element-prefix: map.get($theme_schema, '_meta', 'element-prefix');
+    @if map.has-key($theme_schema, "name") {
+        $name: map.get($theme_schema, "name");
+        $selector: map.get($theme_schema, "selector") or $name;
         $modified: ();
 
         // @debug "name: #{$name}";
@@ -40,54 +40,29 @@ $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: #{$element-prefix}";
-            $element-prefix: $elements-selector-prefix;
-            // @debug "selector after: #{$element-prefix}";
+        @if list.index(vars.$allowed, map.get($theme_schema, "name")) {
+            // @debug "selector before: #{$selector}";
+            $selector: updateSelectors($selector);
+            // @debug "selector after: #{$selector}";
         }
 
-        $modified: map.merge(
-            $modified,
-            (
-                _meta: map.merge(
-                    map.get($theme_schema, '_meta'),
-                    (
-                        'element-prefix': $element-prefix,
-                    )
-                ),
-            )
-        );
+        $modified: map.merge($modified, (selector: $selector));
 
         @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;
 }
 
@@ -97,7 +72,6 @@ $elements-selector-prefix: 'igc';
 /// @return {String} - Updated selector(s) with `igc-` prefixed equivalents
 @function updateSelectors($selector) {
     $result: ();
-    // $selectors: string.split($selector, ", ");
 
     @each $sel in $selector {
         $result: list.append($result, $sel, comma);
@@ -109,7 +83,7 @@ $elements-selector-prefix: 'igc';
         }
     }
 
-    @return '#{$result}';
+    @return "#{$result}";
 }
 
 /// Generates an Ignite UI for Angular Elements global theme.
@@ -134,6 +108,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": "^21.0.0-beta.2",
+        "igniteui-theming": "^21.0.0-beta.3",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

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

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

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

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

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

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

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