rewrite parseCss to support nesting

Author: kof

packages/css-data/src/parse-css.test.ts

@@ -194,7 +194,18 @@ describe("Parse CSS", () => {
     ]);
   });
 
+  test("attribute selector", () => {
+    expect(parseCss(`[class^="a"] { color: #ff0000 }`)).toEqual([
+      {
+        selector: '[class^="a"]',
+        property: "color",
+        value: { alpha: 1, b: 0, g: 0, r: 255, type: "rgb" },
+      },
+    ]);
+  });
+
   test("parse first pseudo class as selector", () => {
+    // E.g. :root
     expect(parseCss(`:first-pseudo:my-state { color: #ff0000 }`)).toEqual([
       {
         selector: ":first-pseudo",
@@ -232,7 +243,7 @@ describe("Parse CSS", () => {
     ]);
   });
 
-  test.only("parse multiple selectors, both with state", () => {
+  test("parse multiple selectors, both with state", () => {
     expect(parseCss(`a:active, a:hover { color: #ff0000 }`)).toEqual([
       {
         selector: "a",

packages/css-data/src/parse-css.ts

@@ -169,43 +169,63 @@ export const parseCss = (css: string, options: ParserOptions = {}) => {
         breakpoint = generated;
       }
     }
-    if (invalidBreakpoint) {
+    if (invalidBreakpoint || this.rule.prelude.type !== "SelectorList") {
       return;
     }
 
     const selectors: Selector[] = [];
-    if (this.rule.prelude.type === "SelectorList") {
-      for (const selector of this.rule.prelude.children) {
-        if (selector.type !== "Selector" || selector.children.size > 2) {
-          continue;
-        }
-        const [nameNode, stateNode] = selector.children;
-        let name;
-        if (
-          nameNode.type === "ClassSelector" ||
-          nameNode.type === "TypeSelector"
-        ) {
-          name = nameNode.name;
-        } else if (nameNode.type === "PseudoClassSelector") {
-          name = `:${nameNode.name}`;
-        } else {
-          continue;
+
+    for (const node of this.rule.prelude.children) {
+      if (node.type !== "Selector") {
+        continue;
+      }
+      let selector: Selector | undefined = undefined;
+      node.children.forEach((node) => {
+        let name: string = "";
+        let state: string | undefined;
+        switch (node.type) {
+          case "TypeSelector":
+            name = node.name;
+            break;
+          case "ClassSelector":
+            // .a {} vs a.b {}
+            name = selector ? `.${node.name}` : node.name;
+            break;
+          case "AttributeSelector":
+            if (node.value) {
+              name = `[${csstree.generate(node.name)}${node.matcher}${csstree.generate(node.value)}]`;
+            }
+            break;
+          case "PseudoClassSelector": {
+            // First pseudo selector is not a state but an element selector, e.g. :root
+            if (selector) {
+              state = `:${node.name}`;
+            } else {
+              name = `:${node.name}`;
+            }
+            break;
+          }
+          case "Combinator":
+            // " " vs " > "
+            name = node.name === " " ? node.name : ` ${node.name} `;
+            break;
+          case "PseudoElementSelector":
+            state = `::${node.name}`;
+            break;
         }
-        if (stateNode?.type === "PseudoClassSelector") {
-          selectors.push({
-            name,
-            state: `:${stateNode.name}`,
-          });
-        } else if (stateNode?.type === "PseudoElementSelector") {
-          selectors.push({
-            name,
-            state: `::${stateNode.name}`,
-          });
-        } else {
-          selectors.push({
-            name,
-          });
+
+        if (selector) {
+          selector.name += name;
+          if (state) {
+            selector.state = state;
+          }
+          return;
         }
+        selector = { name, state };
+      });
+      if (selector) {
+        selectors.push(selector);
+        selector = undefined;
       }
     }