Class CssComposer

packages/core/src/css_composer/index.ts:84–649

}

export default class CssComposer extends ItemManagerModule<CssComposerConfig & { pStylePrefix?: string }> {
  classes = {
    CssRule,
    CssRules,
    CssRuleView,
    CssRulesView,
  };
  rules: CssRules;
  rulesView?: CssRulesView;
  events = CssEvents;

  Selectors = Selectors;

  storageKey = 'styles';
  protected _itemCache = new Map<string, CssRule>();
  /**
   * Initializes module. Automatically called with a new instance of the editor
   * @param {Object} config Configurations
   * @private
   */
  constructor(em: EditorModel) {
    super(em, 'CssComposer', null, CssEvents, defConfig());
    const { config } = this;

    const ppfx = config.pStylePrefix;
    if (ppfx) config.stylePrefix = ppfx + config.stylePrefix;

    // @ts-ignore
    config.rules = this.em.config.style || config.rules || '';

    this.rules = new CssRules([], config);
    this.all = this.rules as any;
    this._setupCacheListeners();
  }

  protected override _setupCacheListeners() {
    super._setupCacheListeners();
    this.em.listenTo(this.rules, 'change:selectors change:state change:mediaText', this._onItemKeyChange.bind(this));
  }

  protected _makeCacheKey(rule: CssRule) {
    const atRuleKey = rule.getAtRule();
    const selectorsKey = rule.selectorsToString();
    return `${atRuleKey}__${selectorsKey}`;
  }

  _makeCacheKeyFromProps(ruleProps: CssRuleProperties) {
    const { atRuleType = '', mediaText = '', state = '', selectorsAdd = '', selectors = [] } = ruleProps;

    const selectorsStr = selectors.map((selector) => (isString(selector) ? selector : selector.toString())).join('');

    const selectorsRes = [];
    selectorsStr && selectorsRes.push(`${selectorsStr}${state ? `:${state}` : ''}`);
    selectorsAdd && selectorsRes.push(selectorsAdd);
    const selectorsKey = selectorsRes.join(', ');

    const typeStr = atRuleType ? `@${atRuleType}` : mediaText ? '@media' : '';
    const atRuleKey = typeStr + (mediaText && typeStr ? ` ${mediaText}` : '');