tailwindcss 3.0.7 → 3.0.11

package/peers/index.js

@@ -5406,7 +5406,7 @@ var require_processor = __commonJS({
     var Root = require_root();
     var Processor = class {
       constructor(plugins = []) {
-        this.version = "8.4.4";
+        this.version = "8.4.5";
         this.plugins = this.normalize(plugins);
       }
       use(plugin) {
@@ -23880,25 +23880,6 @@ var require_dist2 = __commonJS({
   }
 });
 
-// node_modules/is-resolvable/index.js
-var require_is_resolvable = __commonJS({
-  "node_modules/is-resolvable/index.js"(exports2, module2) {
-    "use strict";
-    var inspect = require("util").inspect;
-    module2.exports = function isResolvable(moduleId, options) {
-      if (typeof moduleId !== "string") {
-        throw new TypeError(inspect(moduleId) + " is not a string. Expected a valid Node.js module identifier (<string>), for example 'eslint', './index.js', './lib'.");
-      }
-      try {
-        require.resolve(moduleId, options);
-        return true;
-      } catch (err) {
-        return false;
-      }
-    };
-  }
-});
-
 // node_modules/timsort/build/timsort.js
 var require_timsort = __commonJS({
   "node_modules/timsort/build/timsort.js"(exports2) {
@@ -29271,7 +29252,7 @@ var require_attributes = __commonJS({
         if (/\s/.test(value)) {
           return boolbase_1.falseFunc;
         }
-        var regex = new RegExp("(?:^|\\s)" + escapeRegex(value) + "(?:$|\\s)", ignoreCase ? "i" : "");
+        var regex = new RegExp("(?:^|\\s)".concat(escapeRegex(value), "(?:$|\\s)"), ignoreCase ? "i" : "");
         return function element(elem) {
           var attr = adapter.getAttributeValue(elem, name);
           return attr != null && attr.length >= value.length && regex.test(attr) && next(elem);
@@ -29520,7 +29501,7 @@ var require_filters = __commonJS({
       },
       "nth-child": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29540,7 +29521,7 @@ var require_filters = __commonJS({
       },
       "nth-last-child": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29560,7 +29541,7 @@ var require_filters = __commonJS({
       },
       "nth-of-type": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29581,7 +29562,7 @@ var require_filters = __commonJS({
       },
       "nth-last-of-type": function(next, rule, _a) {
         var adapter = _a.adapter, equals = _a.equals;
-        var func = nth_check_1.default(rule);
+        var func = (0, nth_check_1.default)(rule);
         if (func === boolbase_1.falseFunc)
           return boolbase_1.falseFunc;
         if (func === boolbase_1.trueFunc)
@@ -29716,10 +29697,10 @@ var require_pseudos = __commonJS({
     function verifyPseudoArgs(func, name, subselect) {
       if (subselect === null) {
         if (func.length > 2) {
-          throw new Error("pseudo-selector :" + name + " requires an argument");
+          throw new Error("pseudo-selector :".concat(name, " requires an argument"));
         }
       } else if (func.length === 2) {
-        throw new Error("pseudo-selector :" + name + " doesn't have any arguments");
+        throw new Error("pseudo-selector :".concat(name, " doesn't have any arguments"));
       }
     }
     exports2.verifyPseudoArgs = verifyPseudoArgs;
@@ -29761,10 +29742,16 @@ var require_aliases = __commonJS({
 var require_subselects = __commonJS({
   "node_modules/css-select/lib/pseudo-selectors/subselects.js"(exports2) {
     "use strict";
-    var __spreadArray = exports2 && exports2.__spreadArray || function(to, from) {
-      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-      return to;
+    var __spreadArray = exports2 && exports2.__spreadArray || function(to, from, pack) {
+      if (pack || arguments.length === 2)
+        for (var i = 0, l = from.length, ar; i < l; i++) {
+          if (ar || !(i in from)) {
+            if (!ar)
+              ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+          }
+        }
+      return to.concat(ar || Array.prototype.slice.call(from));
     };
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.subselects = exports2.getNextSiblings = exports2.ensureIsTag = exports2.PLACEHOLDER_ELEMENT = void 0;
@@ -29803,6 +29790,7 @@ var require_subselects = __commonJS({
     exports2.subselects = {
       is,
       matches: is,
+      where: is,
       not: function(next, token, options, context, compileToken) {
         var opts = {
           xmlMode: !!options.xmlMode,
@@ -29842,7 +29830,7 @@ var require_subselects = __commonJS({
           return function(elem) {
             context[0] = elem;
             var childs = adapter.getChildren(elem);
-            var nextElements = shouldTestNextSiblings ? __spreadArray(__spreadArray([], childs), getNextSiblings(elem, adapter)) : childs;
+            var nextElements = shouldTestNextSiblings ? __spreadArray(__spreadArray([], childs, true), getNextSiblings(elem, adapter), true) : childs;
             return next(elem) && adapter.existsOne(hasElement, nextElements);
           };
         }
@@ -29882,9 +29870,9 @@ var require_pseudo_selectors = __commonJS({
       }
       if (name in aliases_1.aliases) {
         if (data != null) {
-          throw new Error("Pseudo " + name + " doesn't have any arguments");
+          throw new Error("Pseudo ".concat(name, " doesn't have any arguments"));
         }
-        var alias = css_what_1.parse(aliases_1.aliases[name], options);
+        var alias = (0, css_what_1.parse)(aliases_1.aliases[name], options);
         return subselects_1.subselects.is(next, alias, options, context, compileToken);
       }
       if (name in filters_1.filters) {
@@ -29892,14 +29880,14 @@ var require_pseudo_selectors = __commonJS({
       }
       if (name in pseudos_1.pseudos) {
         var pseudo_1 = pseudos_1.pseudos[name];
-        pseudos_1.verifyPseudoArgs(pseudo_1, name, data);
+        (0, pseudos_1.verifyPseudoArgs)(pseudo_1, name, data);
         return pseudo_1 === boolbase_1.falseFunc ? boolbase_1.falseFunc : next === boolbase_1.trueFunc ? function(elem) {
           return pseudo_1(elem, options, data);
         } : function(elem) {
           return pseudo_1(elem, options, data) && next(elem);
         };
       }
-      throw new Error("unmatched pseudo-class :" + name);
+      throw new Error("unmatched pseudo-class :".concat(name));
     }
     exports2.compilePseudoSelector = compilePseudoSelector;
   }
@@ -29921,7 +29909,7 @@ var require_general = __commonJS({
         case "attribute":
           return attributes_1.attributeRules[selector.action](next, selector, options);
         case "pseudo":
-          return pseudo_selectors_1.compilePseudoSelector(next, selector, options, context, compileToken);
+          return (0, pseudo_selectors_1.compilePseudoSelector)(next, selector, options, context, compileToken);
         case "tag":
           return function tag(elem) {
             return adapter.getName(elem) === selector.name && next(elem);
@@ -30023,11 +30011,11 @@ var require_compile2 = __commonJS({
     var subselects_1 = require_subselects();
     function compile(selector, options, context) {
       var next = compileUnsafe(selector, options, context);
-      return subselects_1.ensureIsTag(next, options.adapter);
+      return (0, subselects_1.ensureIsTag)(next, options.adapter);
     }
     exports2.compile = compile;
     function compileUnsafe(selector, options, context) {
-      var token = typeof selector === "string" ? css_what_1.parse(selector, options) : selector;
+      var token = typeof selector === "string" ? (0, css_what_1.parse)(selector, options) : selector;
       return compileToken(token, options, context);
     }
     exports2.compileUnsafe = compileUnsafe;
@@ -30049,7 +30037,7 @@ var require_compile2 = __commonJS({
       }));
       for (var _i = 0, token_1 = token; _i < token_1.length; _i++) {
         var t = token_1[_i];
-        if (t.length > 0 && procedure_1.isTraversal(t[0]) && t[0].type !== "descendant") {
+        if (t.length > 0 && (0, procedure_1.isTraversal)(t[0]) && t[0].type !== "descendant") {
         } else if (hasContext && !t.some(includesScopePseudo)) {
           t.unshift(DESCENDANT_TOKEN);
         } else {
@@ -30088,7 +30076,7 @@ var require_compile2 = __commonJS({
     function compileRules(rules, options, context) {
       var _a;
       return rules.reduce(function(previous, rule) {
-        return previous === boolbase_1.falseFunc ? boolbase_1.falseFunc : general_1.compileGeneralSelector(previous, rule, options, context, compileToken);
+        return previous === boolbase_1.falseFunc ? boolbase_1.falseFunc : (0, general_1.compileGeneralSelector)(previous, rule, options, context, compileToken);
       }, (_a = options.rootFunc) !== null && _a !== void 0 ? _a : boolbase_1.trueFunc);
     }
     function reduceRules(a, b) {
@@ -30170,7 +30158,7 @@ var require_lib9 = __commonJS({
       return function select(query, elements, options) {
         var opts = convertOptionFormats(options);
         if (typeof query !== "function") {
-          query = compile_1.compileUnsafe(query, opts, elements);
+          query = (0, compile_1.compileUnsafe)(query, opts, elements);
         }
         var filteredElements = prepareContext(elements, opts.adapter, query.shouldTestNextSiblings);
         return searchFunc(query, filteredElements, opts);
@@ -30188,8 +30176,9 @@ var require_lib9 = __commonJS({
     exports2.prepareContext = prepareContext;
     function appendNextSiblings(elem, adapter) {
       var elems = Array.isArray(elem) ? elem.slice(0) : [elem];
-      for (var i = 0; i < elems.length; i++) {
-        var nextSiblings = subselects_1.getNextSiblings(elems[i], adapter);
+      var elemsLength = elems.length;
+      for (var i = 0; i < elemsLength; i++) {
+        var nextSiblings = (0, subselects_1.getNextSiblings)(elems[i], adapter);
         elems.push.apply(elems, nextSiblings);
       }
       return elems;
@@ -30202,7 +30191,7 @@ var require_lib9 = __commonJS({
     });
     function is(elem, query, options) {
       var opts = convertOptionFormats(options);
-      return (typeof query === "function" ? query : compile_1.compile(query, opts))(elem);
+      return (typeof query === "function" ? query : (0, compile_1.compile)(query, opts))(elem);
     }
     exports2.is = is;
     exports2.default = exports2.selectAll;
@@ -70088,18 +70077,9 @@ var require_minifyColor = __commonJS({
     }
     (0, _colord.extend)([_names.default, _minify.default]);
     function minifyColor(input, options = {}) {
-      const settings = {
-        supportsAlphaHex: false,
-        supportsTransparent: true,
-        ...options
-      };
       const instance = (0, _colord.colord)(input);
       if (instance.isValid()) {
-        const minified = instance.minify({
-          alphaHex: settings.supportsAlphaHex,
-          transparent: settings.supportsTransparent,
-          name: true
-        });
+        const minified = instance.minify(options);
         return minified.length < input.length ? minified : input.toLowerCase();
       } else {
         return input;
@@ -70205,21 +70185,29 @@ var require_dist13 = __commonJS({
       });
       return parsed.toString();
     }
-    function pluginCreator() {
+    function addPluginDefaults(options, browsers) {
+      const defaults = {
+        transparent: browsers.some(hasTransparentBug) === false,
+        alphaHex: (0, _caniuseApi.isSupported)("css-rrggbbaa", browsers),
+        name: true
+      };
+      return {
+        ...defaults,
+        ...options
+      };
+    }
+    function pluginCreator(config = {}) {
       return {
         postcssPlugin: "postcss-colormin",
         prepare(result) {
-          const resultOpts = result.opts || {};
+          const resultOptions = result.opts || {};
           const browsers = (0, _browserslist.default)(null, {
-            stats: resultOpts.stats,
+            stats: resultOptions.stats,
             path: __dirname,
-            env: resultOpts.env
+            env: resultOptions.env
           });
-          const options = {
-            supportsTransparent: browsers.some(hasTransparentBug) === false,
-            supportsAlphaHex: (0, _caniuseApi.isSupported)("css-rrggbbaa", browsers)
-          };
           const cache = {};
+          const options = addPluginDefaults(config, browsers);
           return {
             OnceExit(css) {
               css.walkDecls((decl) => {
@@ -72142,22 +72130,6 @@ var require_normalize_url = __commonJS({
   }
 });
 
-// node_modules/is-absolute-url/index.js
-var require_is_absolute_url = __commonJS({
-  "node_modules/is-absolute-url/index.js"(exports2, module2) {
-    "use strict";
-    module2.exports = (url) => {
-      if (typeof url !== "string") {
-        throw new TypeError(`Expected a \`string\`, got \`${typeof url}\``);
-      }
-      if (/^[a-zA-Z]:\\/.test(url)) {
-        return false;
-      }
-      return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(url);
-    };
-  }
-});
-
 // node_modules/postcss-normalize-url/dist/index.js
 var require_dist19 = __commonJS({
   "node_modules/postcss-normalize-url/dist/index.js"(exports2, module2) {
@@ -72169,14 +72141,21 @@ var require_dist19 = __commonJS({
     var _path = _interopRequireDefault(require("path"));
     var _postcssValueParser = _interopRequireDefault(require_lib());
     var _normalizeUrl = _interopRequireDefault(require_normalize_url());
-    var _isAbsoluteUrl = _interopRequireDefault(require_is_absolute_url());
     function _interopRequireDefault(obj) {
       return obj && obj.__esModule ? obj : { default: obj };
     }
     var multiline = /\\[\r\n]/;
     var escapeChars = /([\s\(\)"'])/g;
+    var ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
+    var WINDOWS_PATH_REGEX = /^[a-zA-Z]:\\/;
+    function isAbsolute(url) {
+      if (WINDOWS_PATH_REGEX.test(url)) {
+        return false;
+      }
+      return ABSOLUTE_URL_REGEX.test(url);
+    }
     function convert(url, options) {
-      if ((0, _isAbsoluteUrl.default)(url) || url.startsWith("//")) {
+      if (isAbsolute(url) || url.startsWith("//")) {
         let normalizedURL = null;
         try {
           normalizedURL = (0, _normalizeUrl.default)(url, options);
@@ -75970,11 +75949,18 @@ var require_dist35 = __commonJS({
     var _postcss = _interopRequireDefault(require_postcss());
     var _yaml = _interopRequireDefault(require_yaml());
     var _lilconfig = require_dist2();
-    var _isResolvable = _interopRequireDefault(require_is_resolvable());
     function _interopRequireDefault(obj) {
       return obj && obj.__esModule ? obj : { default: obj };
     }
     var cssnano = "cssnano";
+    function isResolvable(moduleId) {
+      try {
+        require.resolve(moduleId);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
     function resolvePreset(preset) {
       let fn, options;
       if (Array.isArray(preset)) {
@@ -75993,11 +75979,11 @@ var require_dist35 = __commonJS({
       if (typeof fn === "function") {
         return fn(options).plugins;
       }
-      if ((0, _isResolvable.default)(fn)) {
+      if (isResolvable(fn)) {
         return require(fn)(options).plugins;
       }
       const sugar = `cssnano-preset-${fn}`;
-      if ((0, _isResolvable.default)(sugar)) {
+      if (isResolvable(sugar)) {
         return require(sugar)(options).plugins;
       }
       throw new Error(`Cannot load preset "${fn}". Please check your configuration for errors and try again.`);
@@ -76035,12 +76021,12 @@ var require_dist35 = __commonJS({
         options.plugins.forEach((plugin) => {
           if (Array.isArray(plugin)) {
             const [pluginDef, opts = {}] = plugin;
-            if (typeof pluginDef === "string" && (0, _isResolvable.default)(pluginDef)) {
+            if (typeof pluginDef === "string" && isResolvable(pluginDef)) {
               options.preset.plugins.push([require(pluginDef), opts]);
             } else {
               options.preset.plugins.push([pluginDef, opts]);
             }
-          } else if (typeof plugin === "string" && (0, _isResolvable.default)(plugin)) {
+          } else if (typeof plugin === "string" && isResolvable(plugin)) {
             options.preset.plugins.push([require(plugin), {}]);
           } else {
             options.preset.plugins.push([plugin, {}]);

package/src/cli.js

@@ -41,6 +41,26 @@ function formatNodes(root) {
   }
 }
 
+async function outputFile(file, contents) {
+  if (fs.existsSync(file) && (await fs.promises.readFile(file, 'utf8')) === contents) {
+    return // Skip writing the file
+  }
+
+  // Write the file
+  await fs.promises.writeFile(file, contents, 'utf8')
+}
+
+function drainStdin() {
+  return new Promise((resolve, reject) => {
+    let result = ''
+    process.stdin.on('data', (chunk) => {
+      result += chunk
+    })
+    process.stdin.on('end', () => resolve(result))
+    process.stdin.on('error', (err) => reject(err))
+  })
+}
+
 function help({ message, usage, commands, options }) {
   let indent = 2
 
@@ -355,7 +375,7 @@ async function build() {
     input = args['--input'] = args['_'][1]
   }
 
-  if (input && !fs.existsSync((input = path.resolve(input)))) {
+  if (input && input !== '-' && !fs.existsSync((input = path.resolve(input)))) {
     console.error(`Specified input file ${args['--input']} does not exist.`)
     process.exit(9)
   }
@@ -534,10 +554,11 @@ async function build() {
           if (!output) {
             return process.stdout.write(result.css)
           }
+
           return Promise.all(
             [
-              fs.promises.writeFile(output, result.css, () => true),
-              result.map && fs.writeFile(output + '.map', result.map.toString(), () => true),
+              outputFile(output, result.css),
+              result.map && outputFile(output + '.map', result.map.toString()),
             ].filter(Boolean)
           )
         })
@@ -548,9 +569,21 @@ async function build() {
         })
     }
 
-    let css = input
-      ? fs.readFileSync(path.resolve(input), 'utf8')
-      : '@tailwind base; @tailwind components; @tailwind utilities'
+    let css = await (() => {
+      // Piping in data, let's drain the stdin
+      if (input === '-') {
+        return drainStdin()
+      }
+
+      // Input file has been provided
+      if (input) {
+        return fs.readFileSync(path.resolve(input), 'utf8')
+      }
+
+      // No input file provided, fallback to default atrules
+      return '@tailwind base; @tailwind components; @tailwind utilities'
+    })()
+
     return processCSS(css)
   }
 
@@ -664,10 +697,10 @@ async function build() {
               return process.stdout.write(result.css)
             }
 
-            await Promise.all(
+            return Promise.all(
               [
-                fs.promises.writeFile(output, result.css, () => true),
-                result.map && fs.writeFile(output + '.map', result.map.toString(), () => true),
+                outputFile(output, result.css),
+                result.map && outputFile(output + '.map', result.map.toString()),
               ].filter(Boolean)
             )
           })
@@ -684,9 +717,21 @@ async function build() {
           })
       }
 
-      let css = input
-        ? fs.readFileSync(path.resolve(input), 'utf8')
-        : '@tailwind base; @tailwind components; @tailwind utilities'
+      let css = await (() => {
+        // Piping in data, let's drain the stdin
+        if (input === '-') {
+          return drainStdin()
+        }
+
+        // Input file has been provided
+        if (input) {
+          return fs.readFileSync(path.resolve(input), 'utf8')
+        }
+
+        // No input file provided, fallback to default atrules
+        return '@tailwind base; @tailwind components; @tailwind utilities'
+      })()
+
       let result = await processCSS(css)
       env.DEBUG && console.timeEnd('Finished in')
       return result

package/src/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 

package/src/index.js

@@ -1,5 +1,4 @@
 import setupTrackingContext from './lib/setupTrackingContext'
-import setupWatchingContext from './lib/setupWatchingContext'
 import processTailwindFeatures from './processTailwindFeatures'
 import { env } from './lib/sharedState'
 
@@ -14,12 +13,7 @@ module.exports = function tailwindcss(configOrPath) {
           return root
         },
       function (root, result) {
-        let setupContext =
-          env.TAILWIND_MODE === 'watch'
-            ? setupWatchingContext(configOrPath)
-            : setupTrackingContext(configOrPath)
-
-        processTailwindFeatures(setupContext)(root, result)
+        processTailwindFeatures(setupTrackingContext(configOrPath))(root, result)
       },
       env.DEBUG &&
         function (root) {

package/src/lib/collapseDuplicateDeclarations.js

@@ -3,6 +3,7 @@ export default function collapseDuplicateDeclarations() {
     root.walkRules((node) => {
       let seen = new Map()
       let droppable = new Set([])
+      let byProperty = new Map()
 
       node.walkDecls((decl) => {
         // This could happen if we have nested selectors. In that case the
@@ -14,15 +15,79 @@ export default function collapseDuplicateDeclarations() {
         }
 
         if (seen.has(decl.prop)) {
-          droppable.add(seen.get(decl.prop))
+          // Exact same value as what we have seen so far
+          if (seen.get(decl.prop).value === decl.value) {
+            // Keep the last one, drop the one we've seen so far
+            droppable.add(seen.get(decl.prop))
+            // Override the existing one with the new value. This is necessary
+            // so that if we happen to have more than one declaration with the
+            // same value, that we keep removing the previous one. Otherwise we
+            // will only remove the *first* one.
+            seen.set(decl.prop, decl)
+            return
+          }
+
+          // Not the same value, so we need to check if we can merge it so
+          // let's collect it first.
+          if (!byProperty.has(decl.prop)) {
+            byProperty.set(decl.prop, new Set())
+          }
+
+          byProperty.get(decl.prop).add(seen.get(decl.prop))
+          byProperty.get(decl.prop).add(decl)
         }
 
         seen.set(decl.prop, decl)
       })
 
+      // Drop all the duplicate declarations with the exact same value we've
+      // already seen so far.
       for (let decl of droppable) {
         decl.remove()
       }
+
+      // Analyze the declarations based on its unit, drop all the declarations
+      // with the same unit but the last one in the list.
+      for (let declarations of byProperty.values()) {
+        let byUnit = new Map()
+
+        for (let decl of declarations) {
+          let unit = resolveUnit(decl.value)
+          if (unit === null) {
+            // We don't have a unit, so should never try and collapse this
+            // value. This is because we can't know how to do it in a correct
+            // way (e.g.: overrides for older browsers)
+            continue
+          }
+
+          if (!byUnit.has(unit)) {
+            byUnit.set(unit, new Set())
+          }
+
+          byUnit.get(unit).add(decl)
+        }
+
+        for (let declarations of byUnit.values()) {
+          // Get all but the last one
+          let removableDeclarations = Array.from(declarations).slice(0, -1)
+
+          for (let decl of removableDeclarations) {
+            decl.remove()
+          }
+        }
+      }
     })
   }
 }
+
+let UNITLESS_NUMBER = Symbol('unitless-number')
+
+function resolveUnit(input) {
+  let result = /^-?\d*.?\d+([\w%]+)?$/g.exec(input)
+
+  if (result) {
+    return result[1] ?? UNITLESS_NUMBER
+  }
+
+  return null
+}

package/src/lib/defaultExtractor.js

@@ -10,10 +10,17 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
   /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
+  /([^"'`\s]*[^<>"'`\s:\\])/.source, //  `<sm:underline`, `md>:font-bold`
   /([^<>"'`\s]*[^"'`\s:\\])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
+
+  // Arbitrary properties
+  // /([^"\s]*\[[^\s]+?\][^"\s]*)/.source,
+  // /([^'\s]*\[[^\s]+?\][^'\s]*)/.source,
+  // /([^`\s]*\[[^\s]+?\][^`\s]*)/.source,
 ].join('|')
 
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
@@ -29,3 +36,13 @@ export function defaultExtractor(content) {
 
   return results
 }
+
+// Regular utilities
+// {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+
+// Arbitrary values
+// {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+// arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+
+// Arbitrary properties
+// {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/src/lib/expandApplyAtRules.js

@@ -297,7 +297,7 @@ function processApply(root, context) {
               // would have replaced this with something that didn't exist and
               // therefore it removed the selector altogether. In this specific
               // case it would result in `{}` instead of `.something-unrelated {}`
-              if (!extractClasses(rule).some((thing) => thing === applyCandidate)) {
+              if (!extractClasses(rule).some((candidate) => candidate === applyCandidate)) {
                 rule.remove()
                 return
               }