tailwindcss 0.0.0-oxide-insiders.667eac5 → 0.0.0-oxide-insiders.8e60a3c

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/plugin.js

@@ -37,6 +37,56 @@ module.exports = function tailwindcss(configOrPath) {
                 }
                 (0, _processTailwindFeatures.default)(context)(root, result);
             },
+            _sharedState.env.OXIDE && function lightningCssPlugin(_root, result) {
+                let postcss = require("postcss");
+                let lightningcss = require("lightningcss");
+                let browserslist = require("browserslist");
+                try {
+                    let transformed = lightningcss.transform({
+                        filename: result.opts.from,
+                        code: Buffer.from(result.root.toString()),
+                        minify: false,
+                        sourceMap: !!result.map,
+                        inputSourceMap: result.map ? result.map.toString() : undefined,
+                        targets: typeof process !== "undefined" && process.env.JEST_WORKER_ID ? {
+                            chrome: 106 << 16
+                        } : lightningcss.browserslistToTargets(browserslist(require("../package.json").browserslist)),
+                        drafts: {
+                            nesting: true,
+                            customMedia: true
+                        }
+                    });
+                    var _result_map;
+                    result.map = Object.assign((_result_map = result.map) !== null && _result_map !== void 0 ? _result_map : {}, {
+                        toJSON () {
+                            return transformed.map.toJSON();
+                        },
+                        toString () {
+                            return transformed.map.toString();
+                        }
+                    });
+                    result.root = postcss.parse(transformed.code.toString("utf8"));
+                } catch (err) {
+                    if (typeof process !== "undefined" && process.env.JEST_WORKER_ID) {
+                        let lines = err.source.split("\n");
+                        err = new Error([
+                            "Error formatting using Lightning CSS:",
+                            "",
+                            ...[
+                                "```css",
+                                ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line),
+                                " ".repeat(err.loc.column - 1) + "^-- " + err.toString(),
+                                ...lines.slice(err.loc.line, err.loc.line + 2),
+                                "```"
+                            ]
+                        ].join("\n"));
+                    }
+                    if (Error.captureStackTrace) {
+                        Error.captureStackTrace(err, lightningCssPlugin);
+                    }
+                    throw err;
+                }
+            },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd("JIT TOTAL");
                 console.log("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.667eac5",
+  "version": "0.0.0-oxide-insiders.8e60a3c",
   "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.667eac5",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.8e60a3c",
     "arg": "^5.0.2",
     "browserslist": "^4.21.4",
     "chokidar": "^3.5.3",
@@ -81,7 +81,7 @@
     "fast-glob": "^3.2.12",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
-    "lightningcss": "^1.17.1",
+    "lightningcss": "^1.18.0",
     "lilconfig": "^2.0.6",
     "micromatch": "^4.0.5",
     "normalize-path": "^3.0.0",

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/plugin.js

@@ -34,6 +34,66 @@ module.exports = function tailwindcss(configOrPath) {
 
         processTailwindFeatures(context)(root, result)
       },
+      env.OXIDE &&
+        function lightningCssPlugin(_root, result) {
+          let postcss = require('postcss')
+          let lightningcss = require('lightningcss')
+          let browserslist = require('browserslist')
+
+          try {
+            let transformed = lightningcss.transform({
+              filename: result.opts.from,
+              code: Buffer.from(result.root.toString()),
+              minify: false,
+              sourceMap: !!result.map,
+              inputSourceMap: result.map ? result.map.toString() : undefined,
+              targets:
+                typeof process !== 'undefined' && process.env.JEST_WORKER_ID
+                  ? { chrome: 106 << 16 }
+                  : lightningcss.browserslistToTargets(
+                      browserslist(require('../package.json').browserslist)
+                    ),
+
+              drafts: {
+                nesting: true,
+                customMedia: true,
+              },
+            })
+
+            result.map = Object.assign(result.map ?? {}, {
+              toJSON() {
+                return transformed.map.toJSON()
+              },
+              toString() {
+                return transformed.map.toString()
+              },
+            })
+
+            result.root = postcss.parse(transformed.code.toString('utf8'))
+          } catch (err) {
+            if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) {
+              let lines = err.source.split('\n')
+              err = new Error(
+                [
+                  'Error formatting using Lightning CSS:',
+                  '',
+                  ...[
+                    '```css',
+                    ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line),
+                    ' '.repeat(err.loc.column - 1) + '^-- ' + err.toString(),
+                    ...lines.slice(err.loc.line, err.loc.line + 2),
+                    '```',
+                  ],
+                ].join('\n')
+              )
+            }
+
+            if (Error.captureStackTrace) {
+              Error.captureStackTrace(err, lightningCssPlugin)
+            }
+            throw err
+          }
+        },
       env.DEBUG &&
         function (root) {
           console.timeEnd('JIT TOTAL')