Partially allow complex state in parseSelector

packages/core/src/parser/model/BrowserParserCss.ts

@@ -61,30 +61,35 @@ const SINGLE_AT_RULE_NAMES = SINGLE_AT_RULE_TYPES.map((n) => AT_RULE_NAMES[n]);
  * console.log(res);
  * // { result: [['test1'], ['test1', 'test2']], add: ['.test2 .test3'] }
  */
-export const parseSelector = (str = '') => {
+const parseSelector = (str = '') => {
   const add: string[] = [];
   const result: string[][] = [];
   const sels = str.split(',');
 
-  for (var i = 0, len = sels.length; i < len; i++) {
+  // Will accept only concatenated classes and last
-    var sel = sels[i].trim();
+  // class might be with state (eg. :hover) complex state (:hover:not(.active))
+  // as long as the state does not contain commas.
+  // Can also accept SINGLE ID selectors, eg. `#myid`, `#myid:hover`
+  // Composed are not valid: `#myid.some-class`, `#myid.some-class:hover
 
-    // Will accept only concatenated classes and last
+  const checkForClass =
-    // class might be with state (eg. :hover), nothing else.
+    /^(\.[\w\-]+)+((:{1,2}[\w\-]+)(\([^)]*\))?)*$/;
-    // Can also accept SINGLE ID selectors, eg. `#myid`, `#myid:hover`
+
-    // Composed are not valid: `#myid.some-class`, `#myid.some-class:hover`
+  const checkForId =
-    if (/^(\.{1}[\w\-]+)+(:{1,2}[\w\-()]+)?$/gi.test(sel) || /^(#{1}[\w\-]+){1}(:{1,2}[\w\-()]+)?$/gi.test(sel)) {
+    /^#[\w\-]+((:{1,2}[\w\-]+)(\([^)]*\))?)*$/;
-      var cls = sel.split('.').filter(Boolean);
+
-      result.push(cls);
+  for (let i = 0; i < sels.length; i++) {
+    const sel = sels[i].trim();
+
+    if (checkForClass.test(sel) || checkForId.test(sel)) {
+      const parts = sel.split(/\.(?![^()]*\))/).filter(Boolean);
+      result.push(parts);
     } else {
       add.push(sel);
     }
   }
 
-  return {
+  return { result, add };
-    result,
-    add,
-  };
 };
 
 /**

packages/core/test/specs/parser/model/ParserCss.ts

@@ -63,6 +63,12 @@ describe('ParserCss', () => {
       var result = [['test4', 'test5:hover']];
       expect(parseSelector(str).result).toEqual(result);
     });
+
+    test('Parse selectors with complex state', () => {
+      var str = '.test1. test2, .test2>test3, .test4.test5:hover:not(.active.some-class)';
+      var result = [['test4', 'test5:hover:not(.active.some-class)']];
+      expect(parseSelector(str).result).toEqual(result);
+    });
   });
 
   test('Parse simple rule', () => {