fix: multiple selector replacement with arbitrary values

tw-in-js · Mar 20, 2021 · b37b074 · b37b074
1 parent 7f48c59
commit b37b074
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/__tests__/api.json b/src/__tests__/api.json
@@ -868,5 +868,6 @@
   ],
   "duration-[2s]": ".duration-\\[2s\\]{transition-duration:2s}",
   "text-[2.23rem]": ".text-\\[2\\.23rem\\]{font-size:2.23rem}",
+  "hover:text-[rgba(23,83,43,.8)]": ".hover\\:text-\\[rgba\\(23\\,83\\,43\\,\\.8\\)\\]:hover{color:rgba(23,83,43,.8)}",
   "text-[tomato]": ".text-\\[tomato\\]{color:tomato}"
 }
diff --git a/src/twind/serialize.ts b/src/twind/serialize.ts
@@ -220,14 +220,20 @@ export const serialize = (
             // - replace `&` with the current selector
             selector
               ? // Go over the selector and replace the matching selectors respecting multiple selectors
-                selector.replace(/([^,])+/g, (selectorPart) =>
-                  // Same for the key
-                  key.replace(/([^,])+/g, (keyPart) =>
-                    // If the current part has a nested selector replace it
-                    includes(keyPart, '&')
-                      ? keyPart.replace(/&/g, selectorPart)
-                      : (selectorPart && selectorPart + ' ') + keyPart,
+                join(
+                  selector.split(/,(?![^[]*])/g).map((selectorPart) =>
+                    // Same for the key
+                    join(
+                      key.split(/,(?![^[]*])/g).map((keyPart) =>
+                        // If the current part has a nested selector replace it
+                        includes(keyPart, '&')
+                          ? keyPart.replace(/&/g, selectorPart)
+                          : (selectorPart && selectorPart + ' ') + keyPart,
+                      ),
+                      ',',
+                    ),
                   ),
+                  ',',
                 )
               : key,
             presedence,