diff --git a/src/canvas/model/Frame.ts b/src/canvas/model/Frame.ts index adc6740bb..61532be40 100644 --- a/src/canvas/model/Frame.ts +++ b/src/canvas/model/Frame.ts @@ -1,16 +1,13 @@ -import { result, forEach, isEmpty, isString } from "underscore"; -import CanvasModule from ".."; +import { result, forEach, isEmpty, isString } from 'underscore'; import { Model } from "../../abstract"; -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"; -import FrameView from "../view/FrameView"; -import Frames from "./Frames"; - -const keyAutoW = "__aw"; -const keyAutoH = "__ah"; +import CanvasModule from ".."; +import ComponentWrapper from '../../dom_components/model/ComponentWrapper'; +import { isComponent, isObject } from '../../utils/mixins'; +import FrameView from '../view/FrameView'; +import Frames from './Frames'; + +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. 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/editor/model/Editor.ts b/src/editor/model/Editor.ts index 06816051e..4c70b14fd 100644 --- a/src/editor/model/Editor.ts +++ b/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 || {}; 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 { ); } - 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;}';