Fix StyleManager with componentFirst option and combined classes. Closes #4310

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