Fix: CSS - Work comma selector with parens

Author: black7375

.changeset/twenty-laws-create.md

@@ -0,0 +1,6 @@
+---
+"@mincho-js/transform-to-vanilla": patch
+---
+
+**Nested Selector with commas and parens**
+- Fixes an error that occurs when parentheses are present.

packages/transform-to-vanilla/src/transform-keys/complex-selectors.ts

@@ -16,7 +16,7 @@ export function isSimpleSelectorKey(key: string) {
 }
 
 export function nestedSelectorKey(key: string, context: TransformContext) {
-  const parentSelectors = context.parentSelector.split(",");
+  const parentSelectors = splitSelector(context.parentSelector);
   const result = [];
 
   const parentSelectorsLength = parentSelectors.length;
@@ -29,6 +29,58 @@ export function nestedSelectorKey(key: string, context: TransformContext) {
   return result.join(", ");
 }
 
+function splitSelector(selector: string): string[] {
+  if (!selector.includes(",")) {
+    return [selector];
+  }
+
+  const result = [];
+  let currentSelector = "";
+  let parenLevel = 0;
+  let bracketLevel = 0;
+
+  const selectorLength = selector.length;
+  for (let i = 0; i < selectorLength; i++) {
+    const char = selector[i];
+
+    switch (char) {
+      case "(":
+        parenLevel++;
+        currentSelector += char;
+        break;
+      case ")":
+        parenLevel--;
+        currentSelector += char;
+        break;
+      case "[":
+        bracketLevel++;
+        currentSelector += char;
+        break;
+      case "]":
+        bracketLevel--;
+        currentSelector += char;
+        break;
+      case ",":
+        if (parenLevel === 0 && bracketLevel === 0) {
+          result.push(currentSelector);
+          currentSelector = "";
+        } else {
+          currentSelector += char;
+        }
+        break;
+      default:
+        currentSelector += char;
+        break;
+    }
+  }
+
+  if (currentSelector.trim() !== "") {
+    result.push(currentSelector);
+  }
+
+  return result;
+}
+
 // == Tests ====================================================================
 // Ignore errors when compiling to CommonJS.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -88,5 +140,18 @@ if (import.meta.vitest) {
         ":root[dir=rtl] nav li > &, :root[dir=rtl] .myClass > &[data-attr-value]"
       );
     });
+
+    it("Complex Nested Selectors", () => {
+      const context: TransformContext = {
+        ...structuredClone(initTransformContext),
+        parentSelector: `nav li > &:hover:not(:active, :disabled, [data-list="a, b, c"]), .myClass > &[data-attr-value]:where(:has(> :hover, + :focus), :active)`
+      };
+      expect(nestedSelectorKey("&::before", context)).toBe(
+        `nav li > &:hover:not(:active, :disabled, [data-list="a, b, c"])::before, .myClass > &[data-attr-value]:where(:has(> :hover, + :focus), :active)::before`
+      );
+      expect(nestedSelectorKey(":root[dir=rtl] &", context)).toBe(
+        `:root[dir=rtl] nav li > &:hover:not(:active, :disabled, [data-list="a, b, c"]), :root[dir=rtl] .myClass > &[data-attr-value]:where(:has(> :hover, + :focus), :active)`
+      );
+    });
   });
 }