Add `addStyles` option to `editor.Css.setRule`. Closes #5173

src/css_composer/index.ts

@@ -40,10 +40,22 @@ import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
 import { ObjectAny } from '../common';
 
-type RuleOptions = {
+interface RuleOptions {
+  /**
+   * At-rule type, eg. `media`
+   */
   atRuleType?: string;
+  /**
+   * At-rule parameters, eg. `(min-width: 500px)`
+   */
   atRuleParams?: string;
-};
+}
+interface SetRuleOptions extends RuleOptions {
+  /**
+   * If the rule exists already, merge passed styles instead of replacing them.
+   */
+  addStyles?: boolean;
+}
 
 type CssRuleStyle = Required<CssRuleProperties>['style'];
 
@@ -260,6 +272,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * @param {Object} [opts={}]  Additional properties
    * @param {String} [opts.atRuleType='']  At-rule type, eg. `media`
    * @param {String} [opts.atRuleParams='']  At-rule parameters, eg. `(min-width: 500px)`
+   * @param {Boolean} [opts.addStyles=false] If the rule exists already, merge passed styles instead of replacing them.
    * @returns {[CssRule]} The new/updated CssRule
    * @example
    * // Simple class-based rule
@@ -275,7 +288,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * });
    * // output: @media (min-width: 500px) { .class1:hover { color: red } }
    */
-  setRule(selectors: any, style: CssRuleProperties['style'] = {}, opts: RuleOptions = {}) {
+  setRule(selectors: any, style: CssRuleProperties['style'] = {}, opts: SetRuleOptions = {}) {
     const { atRuleType, atRuleParams } = opts;
     const node = this.em.Parser.parserCss.checkNode({
       selectors,
@@ -288,7 +301,13 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
       selectorsAdd,
       atRule: atRuleType,
     });
-    rule.setStyle(style, opts);
+
+    if (opts.addStyles) {
+      rule.addStyle(style, opts);
+    } else {
+      rule.setStyle(style, opts);
+    }
+
     return rule;
   }
 

src/domain_abstract/model/StyleableModel.ts

@@ -82,7 +82,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * this.addStyle({color: 'red'});
    * this.addStyle('color', 'blue');
    */
-  addStyle(prop: string | ObjectAny, value = '', opts = {}) {
+  addStyle(prop: string | ObjectAny, value: any = '', opts: ObjectAny = {}) {
     if (typeof prop == 'string') {
       prop = {
         [prop]: value,

test/specs/css_composer/index.ts

@@ -216,7 +216,7 @@ describe('Css Composer', () => {
     describe('setRule/getRule', () => {
       test('Create a simple class-based rule', () => {
         const selector = '.test';
-        const result = obj.setRule(selector, { color: 'red' });
+        obj.setRule(selector, { color: 'red' });
         expect(obj.getAll().length).toEqual(1);
         const rule = obj.getRule(selector)!;
         expect(rule.selectorsToString()).toEqual(selector);
@@ -225,7 +225,7 @@ describe('Css Composer', () => {
 
       test('Avoid creating multiple rules with the same selector', () => {
         const selector = '.test';
-        obj.setRule(selector, { color: 'red' });
+        obj.setRule(selector, { color: 'red', background: 'red' });
         obj.setRule(selector, { color: 'blue' });
         expect(obj.getAll().length).toEqual(1);
         const rule = obj.getRule(selector)!;
@@ -233,9 +233,17 @@ describe('Css Composer', () => {
         expect(rule.styleToString()).toEqual('color:blue;');
       });
 
+      test('Update rule with addStyles option', () => {
+        const selector = '.test';
+        obj.setRule(selector, { color: 'red', background: 'red' });
+        obj.setRule(selector, { color: 'blue' }, { addStyles: true });
+        const rule = obj.getRule(selector)!;
+        expect(rule.styleToString()).toEqual('color:blue;background:red;');
+      });
+
       test('Create a class-based rule', () => {
         const selector = '.test.test2';
-        const result = obj.setRule(selector, { color: 'red' });
+        obj.setRule(selector, { color: 'red' });
         expect(obj.getAll().length).toEqual(1);
         const rule = obj.getRule(selector)!;
         expect(rule.selectorsToString()).toEqual(selector);
@@ -244,7 +252,7 @@ describe('Css Composer', () => {
 
       test('Create a class-based rule with a state', () => {
         const selector = '.test.test2:hover';
-        const result = obj.setRule(selector, { color: 'red' });
+        obj.setRule(selector, { color: 'red' });
         expect(obj.getAll().length).toEqual(1);
         const rule = obj.getRule(selector)!;
         expect(rule.selectorsToString()).toEqual(selector);