From 235fd0162b9330399a96deb1a945eb7e55252510 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 2 Jan 2023 15:29:06 +0400
Subject: [PATCH] Fix custom component related style creation

---
 src/css_composer/index.ts             | 6 ++++--
 src/dom_components/model/Component.js | 4 ++--
 test/specs/dom_components/index.ts    | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts
index 3997582a8..53b4ff54e 100644
--- a/src/css_composer/index.ts
+++ b/src/css_composer/index.ts
@@ -193,10 +193,11 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * @private
    */
   addCollection(data: string | CssRuleProperties[], opts: Record<string, any> = {}, props = {}) {
+    const { em } = this;
     const result: CssRule[] = [];
 
     if (isString(data)) {
-      data = this.em.get('Parser').parseCss(data);
+      data = em.Parser.parseCss(data);
     }
 
     const d = data instanceof Array ? data : [data];
@@ -205,13 +206,14 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
       const rule = (d[i] || {}) as CssRuleProperties;
       if (!rule.selectors) continue;
 
-      const sm = this.em?.get('SelectorManager');
+      const sm = em?.Selectors;
       if (!sm) console.warn('Selector Manager not found');
       const sl = rule.selectors;
       const sels = sl instanceof Array ? sl : [sl];
       const newSels = [];
 
       for (let j = 0, le = sels.length; j < le; j++) {
+        // @ts-ignore
         const selec = sm.add(sels[j]);
         newSels.push(selec);
       }
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 6f46b8a5e..322d6d712 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -213,10 +213,10 @@ export default class Component extends StyleableModel {
 
     if (!opt.temporary) {
       // Add component styles
-      const cssc = em && em.get('CssComposer');
+      const cssc = em && em.Css;
       const { styles, type } = this.attributes;
       if (styles && cssc) {
-        cssc.addCollection(styles, {}, { group: `cmp:${type}` });
+        cssc.addCollection(styles, { avoidUpdateStyle: true }, { group: `cmp:${type}` });
       }
 
       this.__postAdd();
diff --git a/test/specs/dom_components/index.ts b/test/specs/dom_components/index.ts
index 235c43e9f..58ea6ac9d 100644
--- a/test/specs/dom_components/index.ts
+++ b/test/specs/dom_components/index.ts
@@ -274,7 +274,7 @@ describe('DOM Components', () => {
       });
     });
 
-    describe.only('Custom components with styles', () => {
+    describe('Custom components with styles', () => {
       const cmpId = 'cmp-with-style';
 
       beforeEach(() => {