Fix custom component related style creation

GrapesJS · Jan 2, 2023 · 235fd01 · 235fd01
1 parent c3da55a
commit 235fd01
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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
@@ -274,7 +274,7 @@ describe('DOM Components', () => {
  });
  });
 
- describe.only('Custom components with styles', () => {
+ describe('Custom components with styles', () => {
  const cmpId = 'cmp-with-style';
 
  beforeEach(() => {