feat(core): simplify getting selectors inside a lyl style

src/app/app.component.ts

@@ -24,7 +24,7 @@ const STYLES = (theme: ThemeVariables & CustomMinimaLight & CustomMinimaDark, re
   const classes = ref.selectorsOf(STYLES);
   const { before } = theme;
   return {
-    $name: 'app',
+    $name: AppComponent.name,
     $global: lyl `{
       body {
         background-color: ${theme.background.default}

src/app/docs/components/button-demo/icon-label-buttons/icon-label-buttons.component.ts

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
-import { StyleRenderer, lyl, ThemeVariables, ThemeRef } from '@alyle/ui';
+import { StyleRenderer, lyl, ThemeVariables, ThemeRef, SelectorsFn } from '@alyle/ui';
 import { STYLES as STYLES_BUTTON } from '@alyle/ui/button';
 
-const STYLES = (theme: ThemeVariables, ref: ThemeRef) => {
-  // Make sure button styles have been rendered
-  ref.renderStyleSheet(STYLES_BUTTON);
-  // Get selectors
-  const button = ref.selectorsOf(STYLES_BUTTON);
+const STYLES = (theme: ThemeVariables, _ref: ThemeRef, selectors: SelectorsFn) => {
+  // Get button component selectors
+  const button = selectors(STYLES_BUTTON);
   const { after } = theme;
   return {
     root: lyl `{

src/lib/src/theme/style.ts

@@ -76,7 +76,7 @@ export interface LyStyleGroup {
  */
 export type StyleDeclarationsBlock = ((T: any, theme: any) => StyleContainer | string) | StyleContainer | string | null | undefined;
 
-export type LyStyles = ((T: any, theme: any) => LyStyleGroup) | undefined | null;
+export type LyStyles = ((T: any, theme: any, selectors: any) => LyStyleGroup) | undefined | null;
 export type Styles = (((T: any, theme: any) => StyleGroup) | StyleGroup | undefined | null) | LyStyles;
 
 export interface KeyframesDeprecated {
@@ -88,13 +88,16 @@ export interface KeyframesDeprecated {
 type LyClassesProperties<T> = {
   [
     P in keyof (
-      T extends ((theme: any, ref?: any) => infer R) ? R : T
+      T extends ((theme: any, ref?: any, selectors?: any) => infer R) ? R : T
     )
   ]: string;
 };
 
 // Convert all properties to `string` type, and exclude properties that not is class name
 export type LyClasses<T> = Omit<LyClassesProperties<T>, '$name' | '$keyframes' | '@global' | '$priority' | '$global'>;
+export type LySelectors<T> = {
+  [P in keyof LyClasses<T>]: `.${string}`
+};
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
@@ -109,3 +112,6 @@ export interface LyComponentStyle<COMPONENT, INPUTS extends keyof COMPONENT> {
 export const getThemeNameForSelectors = memoize((themeId: string) => {
   return `${themeId}<~(selectors)`;
 });
+
+export type SelectorsFn = <T>(styles: T) => LySelectors<T>;
+

src/lib/src/theme/theme2.service.ts

@@ -15,7 +15,8 @@ import { StyleMap5,
   KeyframesDeprecated,
   LyClasses,
   getThemeNameForSelectors,
-  LyStyles } from './style';
+  LyStyles,
+  LySelectors} from './style';
 import { Subject } from 'rxjs';
 import { StyleTemplate, StringIdGenerator } from '../parse';
 import { Platform } from '@angular/cdk/platform';
@@ -297,7 +298,7 @@ export class LyTheme2 {
    * ```
    * @param styles id
    */
-  selectorsOf<T>(styles: T): LyClasses<T> {
+  selectorsOf<T>(styles: T): LySelectors<T> {
     const themeName = this.initialTheme;
     if (!_STYLE_MAP.has(styles)) {
       _STYLE_MAP.set(styles, {
@@ -314,6 +315,15 @@ export class LyTheme2 {
     return classesMap;
   }
 
+  private _selectors(currentStyles: any) {
+    return (externalStyle: any) => {
+      if (currentStyles !== externalStyle) {
+        this.renderStyleSheet(externalStyle);
+      }
+      return this.selectorsOf(externalStyle);
+    };
+  }
+
   selectorOf(styles: string | StyleTemplate): string {
     const themeName = this.initialTheme;
     const styleMap = _STYLE_MAP.get(styles)!;
@@ -327,7 +337,7 @@ export class LyTheme2 {
   _createStyleContent2(
     styles: Styles
       | StyleDeclarationsBlock
-      | ((theme: any, ref: ThemeRef) => StyleTemplate),
+      | ((theme: any, ref: ThemeRef, currentSelectors: any) => StyleTemplate),
     id: string | null,
     priority: number | undefined | null,
     type: TypeStyle,
@@ -360,9 +370,9 @@ export class LyTheme2 {
         css = type === TypeStyle.LylStyle
           ? createLylStyle(
               styleMap,
-              (styles as ((theme: any, ref: ThemeRef) => StyleTemplate))(config, this),
+              (styles as ((theme: any, ref: ThemeRef, currentSelectors: any) => StyleTemplate))(config, this, null),
               themeName, this.core.classNamePrefix)
-          : groupStyleToString(styleMap, styles(config, this) as StyleGroup, themeName, id, type, config, this.core.classNamePrefix);
+          : groupStyleToString(styleMap, styles(config, this, this._selectors(styles)) as StyleGroup, themeName, id, type, config, this.core.classNamePrefix);
         if (!forChangeTheme) {
           styleMap.css[themeName] = css;
         }