Description

When a selector (in selectors css prop) contains a , (COMMA), it may be split incorrectly.

Reproduction & Expected behavior

For instance:

1. within attribute selector & quoted

css({
  selectors: {
    '&:[data-list="a,b"]': { color: "green" },
  },
})

It generates:

._cd2tw1:[data-list="a{color:green}
._1xk4x6tb"]{color:green}

2. With escaped COMMA (,) in attribute selector:

css({
  selectors: {
    '&:[data-list=a\\,b]': { color: "green" },
  },
})

It generates:

._5g05z7:[data-list=a\{color:green}
._7eu5q1b]{color:green}._3sn2xs{color:hotpink}

Expected behavior

A selector group should be split correctly. Escaped values are valid in selectors, so a COMMA (,) may appear outside of a quoted value, e.g:

.c[data-value=a\,b] {
  color: red;
}

In:

<h1 class="c" data-value="a,b">
  This is an example
</h1>

Actual behavior

It is split as rule.split(',') which incorrectly splits valid group selectors