tailwindcss 0.0.0-oxide-insiders.937ac13 → 0.0.0-oxide-insiders.f821c71

package/lib/corePlugins.js

@@ -232,7 +232,25 @@ let variantPlugins = {
                 let result = (0, _dataTypes.normalize)(typeof value === "function" ? value(extra) : value);
                 if (!result.includes("&")) result = "&" + result;
                 let [a, b] = fn("", extra);
-                return result.replace(/&(\S+)?/g, (_, pseudo = "")=>a + pseudo + b);
+                let start = null;
+                let end = null;
+                let quotes = 0;
+                for(let i = 0; i < result.length; ++i){
+                    let c = result[i];
+                    if (c === "&") {
+                        start = i;
+                    } else if (c === "'" || c === '"') {
+                        quotes += 1;
+                    } else if (start !== null && c === " " && !quotes) {
+                        end = i;
+                    }
+                }
+                if (start !== null && end === null) {
+                    end = result.length;
+                }
+                // Basically this but can handle quotes:
+                // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+                return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end);
             }, {
                 values: Object.fromEntries(pseudoVariants)
             });

package/lib/lib/generateRules.js

@@ -198,10 +198,16 @@ function applyVariant(variant, matches, context) {
     };
     // Retrieve "modifier"
     {
-        let match = /(.*)\/(.*)$/g.exec(variant);
-        if (match && !context.variantMap.has(variant)) {
-            variant = match[1];
-            args.modifier = match[2];
+        let [baseVariant, ...modifiers] = (0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(variant, "/");
+        // This is a hack to support variants with `/` in them, like `ar-1/10/20:text-red-500`
+        // In this case 1/10 is a value but /20 is a modifier
+        if (modifiers.length > 1) {
+            baseVariant = baseVariant + "/" + modifiers.slice(0, -1).join("/");
+            modifiers = modifiers.slice(-1);
+        }
+        if (modifiers.length && !context.variantMap.has(variant)) {
+            variant = baseVariant;
+            args.modifier = modifiers[0];
             if (!(0, _featureFlags.flagEnabled)(context.tailwindConfig, "generalizedModifiers")) {
                 return [];
             }

package/lib/util/formatVariantSelector.js

@@ -192,7 +192,7 @@ function finalizeSelector(current, formats, { context , candidate , base  }) {
         parent.insertBefore(simpleSelector[0], simpleStart);
         parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd);
         for (let child of formatNodes){
-            parent.insertBefore(simpleSelector[0], child);
+            parent.insertBefore(simpleSelector[0], child.clone());
         }
         node.remove();
         // Re-sort the simple selector to ensure it's in the correct order

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.937ac13",
+  "version": "0.0.0-oxide-insiders.f821c71",
   "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.937ac13",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.f821c71",
     "arg": "^5.0.2",
     "browserslist": "^4.21.4",
     "chokidar": "^3.5.3",

package/src/corePlugins.js

@@ -168,7 +168,30 @@ export let variantPlugins = {
           if (!result.includes('&')) result = '&' + result
 
           let [a, b] = fn('', extra)
-          return result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+
+          let start = null
+          let end = null
+          let quotes = 0
+
+          for (let i = 0; i < result.length; ++i) {
+            let c = result[i]
+            if (c === '&') {
+              start = i
+            } else if (c === "'" || c === '"') {
+              quotes += 1
+            } else if (start !== null && c === ' ' && !quotes) {
+              end = i
+            }
+          }
+
+          if (start !== null && end === null) {
+            end = result.length
+          }
+
+          // Basically this but can handle quotes:
+          // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
+
+          return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
         },
         { values: Object.fromEntries(pseudoVariants) }
       )

package/src/lib/generateRules.js

@@ -152,10 +152,18 @@ function applyVariant(variant, matches, context) {
 
   // Retrieve "modifier"
   {
-    let match = /(.*)\/(.*)$/g.exec(variant)
-    if (match && !context.variantMap.has(variant)) {
-      variant = match[1]
-      args.modifier = match[2]
+    let [baseVariant, ...modifiers] = splitAtTopLevelOnly(variant, '/')
+
+    // This is a hack to support variants with `/` in them, like `ar-1/10/20:text-red-500`
+    // In this case 1/10 is a value but /20 is a modifier
+    if (modifiers.length > 1) {
+      baseVariant = baseVariant + '/' + modifiers.slice(0, -1).join('/')
+      modifiers = modifiers.slice(-1)
+    }
+
+    if (modifiers.length && !context.variantMap.has(variant)) {
+      variant = baseVariant
+      args.modifier = modifiers[0]
 
       if (!flagEnabled(context.tailwindConfig, 'generalizedModifiers')) {
         return []

package/src/util/formatVariantSelector.js

@@ -218,7 +218,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
     parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd)
 
     for (let child of formatNodes) {
-      parent.insertBefore(simpleSelector[0], child)
+      parent.insertBefore(simpleSelector[0], child.clone())
     }
 
     node.remove()