tailwindcss 0.0.0-insiders.fc25299 → 0.0.0-insiders.fca7085

package/CHANGELOG.md

@@ -23,14 +23,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Move `important` selector to the front when `@apply`-ing selector-modifying variants in custom utilities ([#8313](https://github.com/tailwindlabs/tailwindcss/pull/8313))
 - Error when registering an invalid custom variant ([#8345](https://github.com/tailwindlabs/tailwindcss/pull/8345))
 - Create tailwind.config.cjs file in ESM package when running init ([#8363](https://github.com/tailwindlabs/tailwindcss/pull/8363))
+- Fix `matchVariants` that use at-rules and placeholders ([#8392](https://github.com/tailwindlabs/tailwindcss/pull/8392))
+- Improve types of the `tailwindcss/plugin` ([#8400](https://github.com/tailwindlabs/tailwindcss/pull/8400))
+- Allow returning parallel variants from `addVariant` or `matchVariant` callback functions ([#8455](https://github.com/tailwindlabs/tailwindcss/pull/8455))
+- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
+- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
 
 ### Changed
 
-- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
+- Only apply hover styles when supported (future) ([#8394](https://github.com/tailwindlabs/tailwindcss/pull/8394))
+- Respect default ring color opacity (future) ([#8448](https://github.com/tailwindlabs/tailwindcss/pull/8448), [3f4005e](https://github.com/tailwindlabs/tailwindcss/commit/3f4005e833445f7549219eb5ae89728cbb3a2630))
 
 ### Added
 
-- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
 - Add `rgb` and `hsl` color helpers for CSS variables ([#7665](https://github.com/tailwindlabs/tailwindcss/pull/7665))
 - Support PostCSS `Document` nodes ([#7291](https://github.com/tailwindlabs/tailwindcss/pull/7291))
 - Add `text-start` and `text-end` utilities ([#6656](https://github.com/tailwindlabs/tailwindcss/pull/6656))
@@ -43,7 +48,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `grid-flow-dense` utility ([#8193](https://github.com/tailwindlabs/tailwindcss/pull/8193))
 - Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288))
 - Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299))
-- Add `matchVariant` API ([#8310](https://github.com/tailwindlabs/tailwindcss/pull/8310))
+- Add experimental `matchVariant` API ([#8310](https://github.com/tailwindlabs/tailwindcss/pull/8310), [34fd0fb8](https://github.com/tailwindlabs/tailwindcss/commit/34fd0fb82aa574cddc5c7aa3ad7d1af5e3735e5d))
+- Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410))
+- Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
+- Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
+- Add `optional` variant ([#8486](https://github.com/tailwindlabs/tailwindcss/pull/8486))
 
 ## [3.0.24] - 2022-04-12
 

package/lib/cli-peer-dependencies.js

@@ -3,11 +3,15 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.lazyPostcss = lazyPostcss;
+exports.lazyPostcssImport = lazyPostcssImport;
 exports.lazyAutoprefixer = lazyAutoprefixer;
 exports.lazyCssnano = lazyCssnano;
 function lazyPostcss() {
     return require("postcss");
 }
+function lazyPostcssImport() {
+    return require("postcss-import");
+}
 function lazyAutoprefixer() {
     return require("autoprefixer");
 }

package/lib/cli.js

@@ -523,9 +523,16 @@ async function build() {
         };
         tailwindPlugin.postcss = true;
         let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() : [
+            [
+                (()=>{
+                    try {
+                        return require("postcss-import");
+                    } catch  {}
+                    return (0, _indexJs).lazyPostcssImport();
+                })(), 
+            ],
             [],
-            [],
-            {}
+            {}, 
         ];
         let plugins = [
             ...beforePlugins,

package/lib/corePlugins.js

@@ -19,6 +19,7 @@ var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
 var _normalizeScreens = require("./util/normalizeScreens");
 var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
+var _featureFlags = require("./featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -91,28 +92,28 @@ let variantPlugins = {
             return "&::after";
         });
     },
-    pseudoClassVariants: ({ addVariant  })=>{
+    pseudoClassVariants: ({ addVariant , config  })=>{
         let pseudoVariants = [
             // Positional
             [
                 "first",
-                ":first-child"
+                "&:first-child"
             ],
             [
                 "last",
-                ":last-child"
+                "&:last-child"
             ],
             [
                 "only",
-                ":only-child"
+                "&:only-child"
             ],
             [
                 "odd",
-                ":nth-child(odd)"
+                "&:nth-child(odd)"
             ],
             [
                 "even",
-                ":nth-child(even)"
+                "&:nth-child(even)"
             ],
             "first-of-type",
             "last-of-type",
@@ -137,13 +138,13 @@ let variantPlugins = {
                             }
                         }
                     });
-                    return ":visited";
+                    return "&:visited";
                 }, 
             ],
             "target",
             [
                 "open",
-                "[open]"
+                "&[open]"
             ],
             // Forms
             "default",
@@ -151,6 +152,7 @@ let variantPlugins = {
             "indeterminate",
             "placeholder-shown",
             "autofill",
+            "optional",
             "required",
             "valid",
             "invalid",
@@ -161,7 +163,10 @@ let variantPlugins = {
             "empty",
             // Interactive
             "focus-within",
-            "hover",
+            [
+                "hover",
+                !(0, _featureFlags).flagEnabled(config(), "hoverOnlyWhenSupported") ? "&:hover" : "@media (hover: hover) and (pointer: fine) { &:hover }", 
+            ],
             "focus",
             "focus-visible",
             "active",
@@ -169,25 +174,25 @@ let variantPlugins = {
             "disabled", 
         ].map((variant)=>Array.isArray(variant) ? variant : [
                 variant,
-                `:${variant}`
+                `&:${variant}`
             ]
         );
         for (let [variantName, state] of pseudoVariants){
             addVariant(variantName, (ctx)=>{
                 let result = typeof state === "function" ? state(ctx) : state;
-                return `&${result}`;
+                return result;
             });
         }
         for (let [variantName1, state1] of pseudoVariants){
             addVariant(`group-${variantName1}`, (ctx)=>{
                 let result = typeof state1 === "function" ? state1(ctx) : state1;
-                return `:merge(.group)${result} &`;
+                return result.replace(/&(\S+)/, ":merge(.group)$1 &");
             });
         }
         for (let [variantName2, state2] of pseudoVariants){
             addVariant(`peer-${variantName2}`, (ctx)=>{
                 let result = typeof state2 === "function" ? state2(ctx) : state2;
-                return `:merge(.peer)${result} ~ &`;
+                return result.replace(/&(\S+)/, ":merge(.peer)$1 ~ &");
             });
         }
     },
@@ -239,6 +244,10 @@ let variantPlugins = {
     orientationVariants: ({ addVariant  })=>{
         addVariant("portrait", "@media (orientation: portrait)");
         addVariant("landscape", "@media (orientation: landscape)");
+    },
+    prefersContrastVariants: ({ addVariant  })=>{
+        addVariant("contrast-more", "@media (prefers-contrast: more)");
+        addVariant("contrast-less", "@media (prefers-contrast: less)");
     }
 };
 exports.variantPlugins = variantPlugins;
@@ -3194,10 +3203,15 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
-        var ref;
-        let ringOpacityDefault = theme("ringOpacity.DEFAULT", "0.5");
-        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue((ref = theme("ringColor")) === null || ref === void 0 ? void 0 : ref.DEFAULT, ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
+    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme , config  })=>{
+        let ringColorDefault = (()=>{
+            var ref;
+            if ((0, _featureFlags).flagEnabled(config(), "respectDefaultRingColorOpacity")) {
+                return theme("ringColor.DEFAULT");
+            }
+            let ringOpacityDefault = theme("ringOpacity.DEFAULT", "0.5");
+            return (0, _withAlphaVariable).withAlphaValue((ref = theme("ringColor")) === null || ref === void 0 ? void 0 : ref.DEFAULT, ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
+        })();
         addDefaults("ring-width", {
             "--tw-ring-inset": " ",
             "--tw-ring-offset-width": theme("ringOffsetWidth.DEFAULT", "0px"),
@@ -3252,16 +3266,19 @@ let corePlugins = {
             type: "color"
         });
     },
-    ringOpacity: (0, _createUtilityPlugin).default("ringOpacity", [
-        [
-            "ring-opacity",
+    ringOpacity: (helpers)=>{
+        let { config  } = helpers;
+        return (0, _createUtilityPlugin).default("ringOpacity", [
             [
-                "--tw-ring-opacity"
+                "ring-opacity",
+                [
+                    "--tw-ring-opacity"
+                ]
             ]
-        ]
-    ], {
-        filterDefault: true
-    }),
+        ], {
+            filterDefault: !(0, _featureFlags).flagEnabled(config(), "respectDefaultRingColorOpacity")
+        })(helpers);
+    },
     ringOffsetWidth: (0, _createUtilityPlugin).default("ringOffsetWidth", [
         [
             "ring-offset",

package/lib/featureFlags.js

@@ -16,9 +16,13 @@ let defaults = {
     optimizeUniversalDefaults: false
 };
 let featureFlags = {
-    future: [],
+    future: [
+        "hoverOnlyWhenSupported",
+        "respectDefaultRingColorOpacity"
+    ],
     experimental: [
-        "optimizeUniversalDefaults"
+        "optimizeUniversalDefaults",
+        "matchVariant" /* , 'variantGrouping' */ 
     ]
 };
 function flagEnabled(config, flag) {

package/lib/lib/defaultExtractor.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.defaultExtractor = defaultExtractor;
+var _featureFlagsJs = require("../featureFlags.js");
 var regex = _interopRequireWildcard(require("./regex"));
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
@@ -41,6 +42,37 @@ function defaultExtractor(context) {
 }
 function* buildRegExps(context) {
     let separator = context.tailwindConfig.separator;
+    let variantGroupingEnabled = (0, _featureFlagsJs).flagEnabled(context.tailwindConfig, "variantGrouping");
+    let utility = regex.any([
+        // Arbitrary properties
+        /\[[^\s:'"]+:[^\s\]]+\]/,
+        // Utilities
+        regex.pattern([
+            // Utility Name / Group Name
+            /-?(?:\w+)/,
+            // Normal/Arbitrary values
+            regex.optional(regex.any([
+                regex.pattern([
+                    // Arbitrary values
+                    /-\[[^\s:]+\]/,
+                    // Not immediately followed by an `{[(`
+                    /(?![{([]])/,
+                    // optionally followed by an opacity modifier
+                    /(?:\/[^\s'"\\$]*)?/, 
+                ]),
+                regex.pattern([
+                    // Arbitrary values
+                    /-\[[^\s]+\]/,
+                    // Not immediately followed by an `{[(`
+                    /(?![{([]])/,
+                    // optionally followed by an opacity modifier
+                    /(?:\/[^\s'"\\$]*)?/, 
+                ]),
+                // Normal values w/o quotes — may include an opacity modifier
+                /[-\/][^\s'"\\$={]*/, 
+            ])), 
+        ]), 
+    ]);
     yield regex.pattern([
         // Variants
         "((?=((",
@@ -57,36 +89,20 @@ function* buildRegExps(context) {
         ")+))\\2)?",
         // Important (optional)
         /!?/,
-        regex.any([
-            // Arbitrary properties
-            /\[[^\s:'"]+:[^\s\]]+\]/,
-            // Utilities
+        variantGroupingEnabled ? regex.any([
+            // Or any of those things but grouped separated by commas
             regex.pattern([
-                // Utility Name / Group Name
-                /-?(?:\w+)/,
-                // Normal/Arbitrary values
-                regex.optional(regex.any([
-                    regex.pattern([
-                        // Arbitrary values
-                        /-\[[^\s:]+\]/,
-                        // Not immediately followed by an `{[(`
-                        /(?![{([]])/,
-                        // optionally followed by an opacity modifier
-                        /(?:\/[^\s'"\\$]*)?/, 
-                    ]),
-                    regex.pattern([
-                        // Arbitrary values
-                        /-\[[^\s]+\]/,
-                        // Not immediately followed by an `{[(`
-                        /(?![{([]])/,
-                        // optionally followed by an opacity modifier
-                        /(?:\/[^\s'"\\$]*)?/, 
-                    ]),
-                    // Normal values w/o quotes — may include an opacity modifier
-                    /[-\/][^\s'"\\$={]*/, 
-                ])), 
-            ]), 
-        ]), 
+                /\(/,
+                utility,
+                regex.zeroOrMore([
+                    /,/,
+                    utility
+                ]),
+                /\)/
+            ]),
+            // Arbitrary properties, constrained utilities, arbitrary values, etc…
+            utility, 
+        ]) : utility, 
     ]);
 // 5. Inner matches
 // yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g

package/lib/lib/evaluateTailwindFunctions.js

@@ -10,6 +10,7 @@ var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser")
 var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 var _toPath = require("../util/toPath");
+var _withAlphaVariable = require("../util/withAlphaVariable");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -40,7 +41,7 @@ function list(items) {
 function listKeys(obj) {
     return list(Object.keys(obj));
 }
-function validatePath(config, path, defaultValue) {
+function validatePath(config, path, defaultValue, themeOpts = {}) {
     const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, "").replace(/['"]+$/g, "");
     const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
     const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
@@ -104,7 +105,7 @@ function validatePath(config, path, defaultValue) {
     const [themeSection] = pathSegments;
     return {
         isValid: true,
-        value: (0, _transformThemeValue).default(themeSection)(value)
+        value: (0, _transformThemeValue).default(themeSection)(value, themeOpts)
     };
 }
 function extractArgs(node, vNodes, functions) {
@@ -142,10 +143,21 @@ let nodeTypePropertyMap = {
 function _default({ tailwindConfig: config  }) {
     let functions = {
         theme: (node, path, ...defaultValue)=>{
-            const { isValid , value , error  } = validatePath(config, path, defaultValue.length ? defaultValue : undefined);
+            let matches = path.match(/^([^\/\s]+)(?:\s*\/\s*([^\/\s]+))$/);
+            let alpha = undefined;
+            if (matches) {
+                path = matches[1];
+                alpha = matches[2];
+            }
+            let { isValid , value , error  } = validatePath(config, path, defaultValue.length ? defaultValue : undefined, {
+                opacityValue: alpha
+            });
             if (!isValid) {
                 throw node.error(error);
             }
+            if (alpha !== undefined) {
+                value = (0, _withAlphaVariable).withAlphaValue(value, alpha, value);
+            }
             return value;
         },
         screen: (node, screen)=>{

package/lib/lib/generateRules.js

@@ -17,6 +17,7 @@ var _dataTypes = require("../util/dataTypes");
 var _setupContextUtils = require("./setupContextUtils");
 var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 var _splitAtTopLevelOnlyJs = require("../util/splitAtTopLevelOnly.js");
+var _featureFlags = require("../featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -176,7 +177,7 @@ function applyVariant(variant, matches, context) {
         context.variantOrder.set(variant, sort);
     }
     if (context.variantMap.has(variant)) {
-        let variantFunctionTuples = context.variantMap.get(variant);
+        let variantFunctionTuples = context.variantMap.get(variant).slice();
         let result = [];
         for (let [meta, rule1] of matches){
             // Don't generate variants for user css
@@ -234,6 +235,25 @@ function applyVariant(variant, matches, context) {
                     },
                     args
                 });
+                // It can happen that a list of format strings is returned from within the function. In that
+                // case, we have to process them as well. We can use the existing `variantSort`.
+                if (Array.isArray(ruleWithVariant)) {
+                    for (let [idx, variantFunction] of ruleWithVariant.entries()){
+                        // This is a little bit scary since we are pushing to an array of items that we are
+                        // currently looping over. However, you can also think of it like a processing queue
+                        // where you keep handling jobs until everything is done and each job can queue more
+                        // jobs if needed.
+                        variantFunctionTuples.push([
+                            // TODO: This could have potential bugs if we shift the sort order from variant A far
+                            // enough into the sort space of variant B. The chances are low, but if this happens
+                            // then this might be the place too look at. One potential solution to this problem is
+                            // reserving additional X places for these 'unknown' variants in between.
+                            variantSort | BigInt(idx << ruleWithVariant.length),
+                            variantFunction, 
+                        ]);
+                    }
+                    continue;
+                }
                 if (typeof ruleWithVariant === "string") {
                     collectedFormats.push(ruleWithVariant);
                 }
@@ -452,7 +472,7 @@ function* recordCandidates(matches, classCandidate) {
         yield match;
     }
 }
-function* resolveMatches(candidate, context) {
+function* resolveMatches(candidate, context, original = candidate) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
     let important = false;
@@ -460,6 +480,14 @@ function* resolveMatches(candidate, context) {
         important = true;
         classCandidate = classCandidate.slice(1);
     }
+    if ((0, _featureFlags).flagEnabled(context.tailwindConfig, "variantGrouping")) {
+        if (classCandidate.startsWith("(") && classCandidate.endsWith(")")) {
+            let base = variants.slice().reverse().join(separator);
+            for (let part of (0, _splitAtTopLevelOnlyJs).splitAtTopLevelOnly(classCandidate.slice(1, -1), ",")){
+                yield* resolveMatches(base + separator + part, context, original);
+            }
+        }
+    }
     // TODO: Reintroduce this in ways that doesn't break on false positives
     // function sortAgainst(toSort, against) {
     //   return toSort.slice().sort((a, z) => {
@@ -589,10 +617,13 @@ function* resolveMatches(candidate, context) {
                     ]
                 });
                 container.walkRules((rule)=>{
+                    var ref;
                     if (inKeyframes(rule)) return;
+                    var ref2;
                     rule.selector = (0, _formatVariantSelector).finalizeSelector(finalFormat, {
                         selector: rule.selector,
-                        candidate,
+                        candidate: original,
+                        base: candidate.split(new RegExp(`\\${(ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ":"}(?![^[]*\\])`)).pop(),
                         context
                     });
                 });

package/lib/lib/setupContextUtils.js

@@ -12,6 +12,7 @@ var _url = _interopRequireDefault(require("url"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _dlv = _interopRequireDefault(require("dlv"));
 var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
+var _featureFlagsJs = require("../featureFlags.js");
 var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
 var _parseObjectStyles = _interopRequireDefault(require("../util/parseObjectStyles"));
 var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
@@ -225,48 +226,27 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
         }
         return context.tailwindConfig.prefix + identifier;
     }
-    let api = {
-        addVariant (variantName, variantFunctions, options = {}) {
-            variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
-                if (typeof variantFunction !== "string") {
-                    // Safelist public API functions
-                    return ({ args , modifySelectors , container , separator , wrap , format  })=>{
-                        let result = variantFunction(Object.assign({
-                            modifySelectors,
-                            container,
-                            separator
-                        }, variantFunction[MATCH_VARIANT] && {
-                            args,
-                            wrap,
-                            format
-                        }));
-                        if (typeof result === "string" && !isValidVariantFormatString(result)) {
-                            throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
-                        }
-                        return result;
-                    };
-                }
-                if (!isValidVariantFormatString(variantFunction)) {
-                    throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
-                }
-                return parseVariant(variantFunction);
-            });
-            insertInto(variantList, variantName, options);
-            variantMap.set(variantName, variantFunctions);
-        },
+    function resolveThemeValue(path, defaultValue, opts = {}) {
+        const [pathRoot, ...subPaths] = (0, _toPath).toPath(path);
+        const value = getConfigValue([
+            "theme",
+            pathRoot,
+            ...subPaths
+        ], defaultValue);
+        return (0, _transformThemeValue).default(pathRoot)(value, opts);
+    }
+    const theme = Object.assign((path, defaultValue = undefined)=>resolveThemeValue(path, defaultValue)
+    , {
+        withAlpha: (path, opacityValue)=>resolveThemeValue(path, undefined, {
+                opacityValue
+            })
+    });
+    let api1 = {
         postcss: _postcss.default,
         prefix: applyConfiguredPrefix,
         e: _escapeClassName.default,
         config: getConfigValue,
-        theme (path, defaultValue) {
-            const [pathRoot, ...subPaths] = (0, _toPath).toPath(path);
-            const value = getConfigValue([
-                "theme",
-                pathRoot,
-                ...subPaths
-            ], defaultValue);
-            return (0, _transformThemeValue).default(pathRoot)(value);
-        },
+        theme,
         corePlugins: (path)=>{
             if (Array.isArray(tailwindConfig.corePlugins)) {
                 return tailwindConfig.corePlugins.includes(path);
@@ -468,30 +448,56 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 context.candidateRuleMap.get(prefixedIdentifier).push(withOffsets);
             }
         },
-        matchVariant: function(variants, options) {
+        addVariant (variantName, variantFunctions, options = {}) {
+            variantFunctions = [].concat(variantFunctions).map((variantFunction)=>{
+                if (typeof variantFunction !== "string") {
+                    // Safelist public API functions
+                    return (api)=>{
+                        let { args , modifySelectors , container , separator , wrap , format  } = api;
+                        let result = variantFunction(Object.assign({
+                            modifySelectors,
+                            container,
+                            separator
+                        }, variantFunction[MATCH_VARIANT] && {
+                            args,
+                            wrap,
+                            format
+                        }));
+                        if (typeof result === "string" && !isValidVariantFormatString(result)) {
+                            throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
+                        }
+                        if (Array.isArray(result)) {
+                            return result.map((variant)=>parseVariant(variant)
+                            );
+                        }
+                        // result may be undefined with legacy variants that use APIs like `modifySelectors`
+                        return result && parseVariant(result)(api);
+                    };
+                }
+                if (!isValidVariantFormatString(variantFunction)) {
+                    throw new Error(`Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`);
+                }
+                return parseVariant(variantFunction);
+            });
+            insertInto(variantList, variantName, options);
+            variantMap.set(variantName, variantFunctions);
+        }
+    };
+    if ((0, _featureFlagsJs).flagEnabled(tailwindConfig, "matchVariant")) {
+        api1.matchVariant = function(variants, options) {
             for(let variant in variants){
                 var ref;
                 for (let [k, v] of Object.entries((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {})){
-                    api.addVariant(`${variant}-${k}`, variants[variant](v));
+                    api1.addVariant(`${variant}-${k}`, variants[variant](v));
                 }
-                api.addVariant(variant, Object.assign(({ args , wrap  })=>{
-                    let formatString = variants[variant](args);
-                    if (!formatString) return null;
-                    if (!formatString.startsWith("@")) {
-                        return formatString;
-                    }
-                    let [, name, params] = /@(.*?)( .+|[({].*)/g.exec(formatString);
-                    return wrap(_postcss.default.atRule({
-                        name,
-                        params: params.trim()
-                    }));
-                }, {
+                api1.addVariant(variant, Object.assign(({ args  })=>variants[variant](args)
+                , {
                     [MATCH_VARIANT]: true
                 }), options);
             }
-        }
-    };
-    return api;
+        };
+    }
+    return api1;
 }
 let fileModifiedMapCache = new WeakMap();
 function getFileModifiedMap(context) {
@@ -604,6 +610,7 @@ function resolvePlugins(context, root) {
     let afterVariants = [
         _corePlugins.variantPlugins["directionVariants"],
         _corePlugins.variantPlugins["reducedMotionVariants"],
+        _corePlugins.variantPlugins["prefersContrastVariants"],
         _corePlugins.variantPlugins["darkVariants"],
         _corePlugins.variantPlugins["printVariant"],
         _corePlugins.variantPlugins["screenVariants"],