tailwindcss 0.0.0-oxide-insiders.d6121f0 → 0.0.0-oxide-insiders.9bbdd9b

package/lib/lib/generateRules.js

@@ -235,18 +235,21 @@ function applyVariant(variant, matches, context) {
     }
     // Register arbitrary variants
     if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+        let sort = context.offsets.recordVariant(variant);
         let selector = (0, _dataTypes.normalize)(variant.slice(1, -1));
-        if (!(0, _setupContextUtils.isValidVariantFormatString)(selector)) {
+        let selectors = (0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(selector, ",");
+        // We do not support multiple selectors for arbitrary variants
+        if (selectors.length > 1) {
             return [];
         }
-        let fn = (0, _setupContextUtils.parseVariant)(selector);
-        let sort = context.offsets.recordVariant(variant);
-        context.variantMap.set(variant, [
-            [
-                sort,
-                fn
-            ]
-        ]);
+        if (!selectors.every(_setupContextUtils.isValidVariantFormatString)) {
+            return [];
+        }
+        let records = selectors.map((sel, idx)=>[
+                context.offsets.applyParallelOffset(sort, idx),
+                (0, _setupContextUtils.parseVariant)(sel.trim())
+            ]);
+        context.variantMap.set(variant, records);
     }
     if (context.variantMap.has(variant)) {
         let isArbitraryVariant = isArbitraryValue(variant);

package/lib/util/splitAtTopLevelOnly.js

@@ -24,14 +24,20 @@ function splitAtTopLevelOnly(input, separator) {
     let stack = [];
     let parts = [];
     let lastPos = 0;
+    let isEscaped = false;
     for(let idx = 0; idx < input.length; idx++){
         let char = input[idx];
-        if (stack.length === 0 && char === separator[0]) {
+        if (stack.length === 0 && char === separator[0] && !isEscaped) {
             if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
                 parts.push(input.slice(lastPos, idx));
                 lastPos = idx + separator.length;
             }
         }
+        if (isEscaped) {
+            isEscaped = false;
+        } else if (char === "\\") {
+            isEscaped = true;
+        }
         if (char === "(" || char === "[" || char === "{") {
             stack.push(char);
         } else if (char === ")" && stack[stack.length - 1] === "(" || char === "]" && stack[stack.length - 1] === "[" || char === "}" && stack[stack.length - 1] === "{") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.d6121f0",
+  "version": "0.0.0-oxide-insiders.9bbdd9b",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -70,7 +70,7 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@tailwindcss/oxide": "0.0.0-oxide-insiders.d6121f0",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.9bbdd9b",
     "arg": "^5.0.2",
     "browserslist": "^4.21.5",
     "chokidar": "^3.5.3",

package/src/lib/generateRules.js

@@ -205,17 +205,26 @@ function applyVariant(variant, matches, context) {
 
   // Register arbitrary variants
   if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+    let sort = context.offsets.recordVariant(variant)
+
     let selector = normalize(variant.slice(1, -1))
+    let selectors = splitAtTopLevelOnly(selector, ',')
 
-    if (!isValidVariantFormatString(selector)) {
+    // We do not support multiple selectors for arbitrary variants
+    if (selectors.length > 1) {
       return []
     }
 
-    let fn = parseVariant(selector)
+    if (!selectors.every(isValidVariantFormatString)) {
+      return []
+    }
 
-    let sort = context.offsets.recordVariant(variant)
+    let records = selectors.map((sel, idx) => [
+      context.offsets.applyParallelOffset(sort, idx),
+      parseVariant(sel.trim()),
+    ])
 
-    context.variantMap.set(variant, [[sort, fn]])
+    context.variantMap.set(variant, records)
   }
 
   if (context.variantMap.has(variant)) {

package/src/util/splitAtTopLevelOnly.js

@@ -17,17 +17,24 @@ export function splitAtTopLevelOnly(input, separator) {
   let stack = []
   let parts = []
   let lastPos = 0
+  let isEscaped = false
 
   for (let idx = 0; idx < input.length; idx++) {
     let char = input[idx]
 
-    if (stack.length === 0 && char === separator[0]) {
+    if (stack.length === 0 && char === separator[0] && !isEscaped) {
       if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
         parts.push(input.slice(lastPos, idx))
         lastPos = idx + separator.length
       }
     }
 
+    if (isEscaped) {
+      isEscaped = false
+    } else if (char === '\\') {
+      isEscaped = true
+    }
+
     if (char === '(' || char === '[' || char === '{') {
       stack.push(char)
     } else if (