Merge branch 'main' into fix-wf-paste

Author: kof

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

@@ -5,7 +5,7 @@ describe("Parse CSS", () => {
   test("longhand property name with keyword value", () => {
     expect(parseCss(`.test { background-color: red }`)).toEqual([
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundColor",
         value: { type: "keyword", value: "red" },
       },
@@ -15,7 +15,7 @@ describe("Parse CSS", () => {
   test("one class selector rules", () => {
     expect(parseCss(`.test { color: #ff0000 }`)).toEqual([
       {
-        selector: "test",
+        selector: ".test",
         property: "color",
         value: { alpha: 1, b: 0, g: 0, r: 255, type: "rgb" },
       },
@@ -30,7 +30,7 @@ describe("Parse CSS", () => {
     `;
     expect(parseCss(css)).toEqual([
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundImage",
         value: {
           type: "layers",
@@ -45,7 +45,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundPositionX",
         value: {
           type: "layers",
@@ -56,7 +56,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundPositionY",
         value: {
           type: "layers",
@@ -67,7 +67,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundSize",
         value: {
           type: "layers",
@@ -90,7 +90,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundRepeat",
         value: {
           type: "layers",
@@ -101,7 +101,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundAttachment",
         value: {
           type: "layers",
@@ -112,7 +112,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundOrigin",
         value: {
           type: "layers",
@@ -123,7 +123,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundClip",
         value: {
           type: "layers",
@@ -134,7 +134,7 @@ describe("Parse CSS", () => {
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundColor",
         value: { alpha: 1, b: 252, g: 255, r: 235, type: "rgb" },
       },
@@ -149,31 +149,31 @@ describe("Parse CSS", () => {
     `;
     expect(parseCss(css)).toEqual([
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundImage",
         value: {
           type: "layers",
           value: [{ type: "keyword", value: "none" }],
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundPositionX",
         value: {
           type: "layers",
           value: [{ type: "unit", unit: "px", value: 0 }],
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundPositionY",
         value: {
           type: "layers",
           value: [{ type: "unit", unit: "px", value: 0 }],
         },
       },
       {
-        selector: "test",
+        selector: ".test",
         property: "backgroundSize",
         value: {
           type: "layers",
@@ -494,7 +494,7 @@ describe("Parse CSS", () => {
   test("parse space combinator", () => {
     expect(parseCss(`.a b { color: #ff0000 }`)).toEqual([
       {
-        selector: "a b",
+        selector: ".a b",
         property: "color",
         value: { alpha: 1, b: 0, g: 0, r: 255, type: "rgb" },
       },

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

@@ -180,37 +180,35 @@ export const parseCss = (css: string, options: ParserOptions = {}) => {
         continue;
       }
       let selector: Selector | undefined = undefined;
-      node.children.forEach((node) => {
+      for (const childNode of node.children) {
         let name: string = "";
         let state: string | undefined;
-        switch (node.type) {
+        switch (childNode.type) {
           case "TypeSelector":
-            name = node.name;
+            name = childNode.name;
             break;
           case "ClassSelector":
-            // .a {} vs a.b {}
-            name = selector ? `.${node.name}` : node.name;
+            name = `.${childNode.name}`;
             break;
           case "AttributeSelector":
-            if (node.value) {
-              name = `[${csstree.generate(node.name)}${node.matcher}${csstree.generate(node.value)}]`;
-            }
+            name = csstree.generate(childNode);
             break;
           case "PseudoClassSelector": {
             // First pseudo selector is not a state but an element selector, e.g. :root
             if (selector) {
-              state = `:${node.name}`;
+              state = `:${childNode.name}`;
             } else {
-              name = `:${node.name}`;
+              name = `:${childNode.name}`;
             }
             break;
           }
+          case "PseudoElementSelector":
+            state = `::${childNode.name}`;
+            break;
           case "Combinator":
             // " " vs " > "
-            name = node.name === " " ? node.name : ` ${node.name} `;
-            break;
-          case "PseudoElementSelector":
-            state = `::${node.name}`;
+            name =
+              childNode.name === " " ? childNode.name : ` ${childNode.name} `;
             break;
         }
 
@@ -219,10 +217,10 @@ export const parseCss = (css: string, options: ParserOptions = {}) => {
           if (state) {
             selector.state = state;
           }
-          return;
+        } else {
+          selector = { name, state };
         }
-        selector = { name, state };
-      });
+      }
       if (selector) {
         selectors.push(selector);
         selector = undefined;