feat(): add dot for dynamic classname

A-l-y-l-e · Apr 24, 2022 · d89140c · d89140c
1 parent aee484c
commit d89140c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/lib/src/theme/core-theme.service.ts b/src/lib/src/theme/core-theme.service.ts
@@ -19,6 +19,7 @@ export class CoreTheme {
   private _themeMap = new Map<string, ThemeVariables>();
   private _styleMap = new Map<string, Map<string, DataStyle>>();
   private _document: Document;
+  static classNamePrefix?: string;
   constructor(
     private rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) _document: any,
@@ -28,7 +29,7 @@ export class CoreTheme {
     this._document = _document;
 
     if (!isDevMode() && _classNamePrefix) {
-      this.classNamePrefix = _classNamePrefix;
+      CoreTheme.classNamePrefix = this.classNamePrefix = _classNamePrefix;
     }
 
     if (platform.isBrowser) {

diff --git a/src/lib/src/theme/theme2.service.ts b/src/lib/src/theme/theme2.service.ts
@@ -19,6 +19,7 @@ import { StyleMap5,
 import { Subject } from 'rxjs';
 import { StyleTemplate, StringIdGenerator } from '../parse';
 import { Platform } from '@angular/cdk/platform';
+import { memoize } from '../minimal/memoize';
 
 const REF_REG_EXP = /\{([\w-]+)\}/g;
 
@@ -547,11 +548,15 @@ function groupStyleToString(
       // set new id if not exist
       if (!(key in classesMap)) {
         classesMap[key] = isDevMode()
-          ? `${toValidClassName(name + key)}-${createNextClassId(classNamePrefix)}`
+          ? (key === 'root'
+            ? `${toValidClassName(name)}${createNextClassId(classNamePrefix)}`
+            : `${toValidClassName(name + key)}-${createNextClassId(classNamePrefix)}`)
           : createNextClassId(classNamePrefix);
       }
 
     } else if (typeof value === 'object' || value === null) {
+      // TODO: @deprecated
+      // remove this in the future
       // set new id if not exist
       if (!(key in classesMap)) {
         classesMap[key] = isDevMode()
@@ -813,6 +818,22 @@ function createNextClassId(classNamePrefix?: string) {
     ? `${classNamePrefix}${yClassID.next()}`
     : yClassID.next();
 }
+
+/**
+ * Create next class id from key
+ * @private
+ */
+export const ck = memoize((_key: string) => {
+  return createNextClassId(CoreTheme.classNamePrefix);
+});
+
+/**
+ * Create next selector id from key
+ */
+export const dot = memoize((key: string) => {
+  return `.${ck(key)}`;
+});
+
 function createNextKeyframeId() {
   return `k${(nextKeyFrameId++).toString(36)}`;
 }