From 981bc7012c90d7b19785414c220b31e2ae7481dc Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 6 May 2022 15:53:03 +0200
Subject: [PATCH 1/2] Fix TS

---
 src/canvas/model/Frame.ts  | 2 --
 src/editor/model/Editor.ts | 2 +-
 src/pages/model/Page.ts    | 5 +----
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts
index d21ba29b5..b3e9824f5 100644
--- a/src/canvas/model/Frame.ts
+++ b/src/canvas/model/Frame.ts
@@ -1,7 +1,5 @@
 import { result, forEach, isEmpty, isString } from 'underscore';
 import { Model } from '../../common';
-import { Component } from '../../dom_components/model/Component';
-import Components from '../../dom_components/model/Components';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import EditorModel from '../../editor/model/Editor';
 import { isComponent, isObject } from '../../utils/mixins';
diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts
index 30008da67..ed12e06d5 100644
--- a/src/editor/model/Editor.ts
+++ b/src/editor/model/Editor.ts
@@ -401,7 +401,7 @@ export default class EditorModel extends Model {
    * @param  {Object} [opts={}] Options, optional
    * @public
    */
-  setSelected(el: any | any[], opts: any = {}) {
+  setSelected(el?: any | any[], opts: any = {}) {
     const { event } = opts;
     const ctrlKey = event && (event.ctrlKey || event.metaKey);
     const { shiftKey } = event || {};
diff --git a/src/pages/model/Page.ts b/src/pages/model/Page.ts
index c5f072dd8..adde8ed0e 100644
--- a/src/pages/model/Page.ts
+++ b/src/pages/model/Page.ts
@@ -25,10 +25,7 @@ export default class Page extends Model {
       ['component', 'styles'].map((i) => this.unset(i));
     }
     const frms: any[] = props.frames || [defFrame];
-    const frames = new Frames(
-      frms?.map((model) => new Frame(model, opts)),
-      opts
-    );
+    const frames = new Frames(frms?.map((model) => new Frame(model, opts)));
     frames.page = this;
     this.set('frames', frames);
     !this.getId() && this.set('id', em?.get('PageManager')._createId());

From c531a11d4ab765e7485476f59a0a4e3726d3e392 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 6 May 2022 17:00:00 +0200
Subject: [PATCH 2/2] Fix StyleManager with componentFirst option and combined
 classes. Closes #4310

---
 src/css_composer/index.js               |  3 ++-
 src/selector_manager/model/Selectors.ts |  3 ++-
 test/specs/css_composer/index.js        | 17 +++++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/css_composer/index.js b/src/css_composer/index.js
index c627d3be4..729b5d7a7 100644
--- a/src/css_composer/index.js
+++ b/src/css_composer/index.js
@@ -324,8 +324,9 @@ export default class CssComposer extends Module {
   getRules(selector) {
     const rules = this.getAll();
     if (!selector) return [...rules.models];
+    const optRuleSel = { sort: true };
     const sels = isString(selector) ? selector.split(',').map(s => s.trim()) : selector;
-    const result = rules.filter(r => sels.indexOf(r.getSelectors().getFullString()) >= 0);
+    const result = rules.filter(r => sels.indexOf(r.getSelectors().getFullString(null, optRuleSel)) >= 0);
     return result;
   }
 
diff --git a/src/selector_manager/model/Selectors.ts b/src/selector_manager/model/Selectors.ts
index 270130a04..add8d633f 100644
--- a/src/selector_manager/model/Selectors.ts
+++ b/src/selector_manager/model/Selectors.ts
@@ -29,10 +29,11 @@ export default class Selectors extends Collection<Selector> {
     );
   }
 
-  getFullString(collection: Selector[], opts = {}) {
+  getFullString(collection?: Selector[] | null, opts: { sort?: boolean } = {}) {
     const result: string[] = [];
     const coll = collection || this;
     coll.forEach((selector) => result.push(selector.getFullName(opts)));
+    opts.sort && result.sort();
     return result.join('').trim();
   }
 
diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js
index cf6271067..4ced705b5 100644
--- a/test/specs/css_composer/index.js
+++ b/test/specs/css_composer/index.js
@@ -324,6 +324,23 @@ describe('Css Composer', () => {
       expect(obj.get(ruleId.getSelectors())).toBe(ruleId);
     });
 
+    describe('getRules', () => {
+      test('Get rule by class selectors', () => {
+        obj.addCollection(`
+          .aaa.bbb {
+            display:flex;
+            padding: 10px 0;
+            background:green;
+          }
+        `);
+        const [result] = obj.getRules('.aaa.bbb');
+        expect(result.selectorsToString()).toBe('.aaa.bbb');
+        // TODO The order of classes should not matter
+        // const [result2] = obj.getRules('.bbb.aaa');
+        // expect(result2.selectorsToString()).toBe('.aaa.bbb');
+      });
+    });
+
     describe('Collections', () => {
       test('Add a single rule as CSS string', () => {
         const cssRule = '.test-rule{color:red;}';