Merge remote-tracking branch 'origin/dev' into ts-base

src/canvas/model/Frame.ts

@@ -1,16 +1,13 @@
-import { result, forEach, isEmpty, isString } from "underscore";
+import { result, forEach, isEmpty, isString } from 'underscore';
-import CanvasModule from "..";
 import { Model } from "../../abstract";
-import Component from "../../dom_components/model/Component";
+import CanvasModule from "..";
-import Components from "../../dom_components/model/Components";
+import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
-import ComponentWrapper from "../../dom_components/model/ComponentWrapper";
+import { isComponent, isObject } from '../../utils/mixins';
-import EditorModel from "../../editor/model/Editor";
+import FrameView from '../view/FrameView';
-import { isComponent, isObject } from "../../utils/mixins";
+import Frames from './Frames';
-import FrameView from "../view/FrameView";
+
-import Frames from "./Frames";
+const keyAutoW = '__aw';
-
+const keyAutoH = '__ah';
-const keyAutoW = "__aw";
-const keyAutoH = "__ah";
 
 /**
  * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.

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;
   }
 

src/editor/model/Editor.ts

@@ -400,7 +400,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 || {};

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();
   }
 

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;}';