Fix #77: Regression in selector parsing: Attribute selectors not pars…

…ed correctly

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/css-tools",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "CSS parser / stringifier",
   "main": "dist/umd/cssTools.js",
   "module": "dist/cjs/cssTools.js",

src/parse/index.ts

@@ -222,21 +222,16 @@ export const parse = (
          * div:matches(.toto, .titi:matches(.toto, .titi))
          *
          * Regex logic:
-         *  ("|')(?:\\\1|.)*?,(?:\\\1|.)*?\1 => Handle the " and '
-         *  \(.*?,.*?\)  => Handle the ()
-         *
-         * Optimization 0:
-         * No greedy capture (see docs about the difference between .* and .*?)
+         *  ("|')(?:\\\1|.)*?\1 => Handle the " and '
+         *  \(.*?\)  => Handle the ()
          *
          * Optimization 1:
-         *  \(.*?,.*?\) instead of \(.*?\) to limit the number of replace (don't need to replace if , is not in the string)
+         * No greedy capture (see docs about the difference between .* and .*?)
          *
          * Optimization 2:
-         * ("|')(?:\\\1|.)*?,(?:\\\1|.)*?\1 this use reference to capture group, it work faster.
+         * ("|')(?:\\\1|.)*?\1 this use reference to capture group, it work faster.
          */
-        .replace(/("|')(?:\\\1|.)*?,(?:\\\1|.)*?\1|\(.*?,.*?\)/g, m =>
-          m.replace(/,/g, '\u200C')
-        )
+        .replace(/("|')(?:\\\1|.)*?\1|\(.*?\)/g, m => m.replace(/,/g, '\u200C'))
         // Split the selector by ','
         .split(',')
         // Replace back \u200C by ','

test/cases/selectors-attributes/ast.json

@@ -0,0 +1,43 @@
+{
+  "type": "stylesheet",
+  "stylesheet": {
+    "rules": [
+      {
+        "type": "rule",
+        "selectors": [
+          "div[data-value='foo']",
+          "div[data-value='bar']"
+        ],
+        "declarations": [
+          {
+            "type": "declaration",
+            "property": "color",
+            "value": "'black'",
+            "position": {
+              "start": {
+                "line": 2,
+                "column": 3
+              },
+              "end": {
+                "line": 2,
+                "column": 17
+              },
+              "source": "input.css"
+            }
+          }
+        ],
+        "position": {
+          "start": {
+            "line": 1,
+            "column": 1
+          },
+          "end": {
+            "line": 3,
+            "column": 2
+          },
+          "source": "input.css"
+        }
+      }
+    ]
+  }
+}

test/cases/selectors-attributes/compressed.css

@@ -0,0 +1 @@
+div[data-value='foo'],div[data-value='bar']{color:'black';}

test/cases/selectors-attributes/input.css

@@ -0,0 +1,3 @@
+div[data-value='foo'],div[data-value='bar'] {
+  color: 'black';
+}

test/cases/selectors-attributes/output.css

@@ -0,0 +1,4 @@
+div[data-value='foo'],
+div[data-value='bar'] {
+  color: 'black';
+}