tailwindcss 3.1.7 → 3.2.0

package/lib/corePlugins.js

@@ -30,6 +30,7 @@ const _normalizeScreens = require("./util/normalizeScreens");
 const _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 const _removeAlphaVariables = require("./util/removeAlphaVariables");
 const _featureFlags = require("./featureFlags");
+const _dataTypes = require("./util/dataTypes");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -90,7 +91,7 @@ let variantPlugins = {
                     "--tw-text-opacity"
                 ]);
                 return "&::marker";
-            }, 
+            }
         ]);
         addVariant("selection", [
             "& *::selection",
@@ -130,7 +131,7 @@ let variantPlugins = {
             return "&::after";
         });
     },
-    pseudoClassVariants: ({ addVariant , config  })=>{
+    pseudoClassVariants: ({ addVariant , matchVariant , config  })=>{
         let pseudoVariants = [
             // Positional
             [
@@ -163,10 +164,10 @@ let variantPlugins = {
                     (0, _removeAlphaVariables.removeAlphaVariables)(container, [
                         "--tw-text-opacity",
                         "--tw-border-opacity",
-                        "--tw-bg-opacity", 
+                        "--tw-bg-opacity"
                     ]);
                     return "&:visited";
-                }, 
+                }
             ],
             "target",
             [
@@ -192,13 +193,13 @@ let variantPlugins = {
             "focus-within",
             [
                 "hover",
-                !(0, _featureFlags.flagEnabled)(config(), "hoverOnlyWhenSupported") ? "&:hover" : "@media (hover: hover) and (pointer: fine) { &:hover }", 
+                !(0, _featureFlags.flagEnabled)(config(), "hoverOnlyWhenSupported") ? "&:hover" : "@media (hover: hover) and (pointer: fine) { &:hover }"
             ],
             "focus",
             "focus-visible",
             "active",
             "enabled",
-            "disabled", 
+            "disabled"
         ].map((variant)=>Array.isArray(variant) ? variant : [
                 variant,
                 `&:${variant}`
@@ -209,16 +210,30 @@ let variantPlugins = {
                 return result;
             });
         }
-        for (let [variantName1, state1] of pseudoVariants){
-            addVariant(`group-${variantName1}`, (ctx)=>{
-                let result = typeof state1 === "function" ? state1(ctx) : state1;
-                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 result.replace(/&(\S+)/, ":merge(.peer)$1 ~ &");
+        let variants = {
+            group: (_, { modifier  })=>modifier ? [
+                    `:merge(.group\\/${modifier})`,
+                    " &"
+                ] : [
+                    `:merge(.group)`,
+                    " &"
+                ],
+            peer: (_, { modifier  })=>modifier ? [
+                    `:merge(.peer\\/${modifier})`,
+                    " ~ &"
+                ] : [
+                    `:merge(.peer)`,
+                    " ~ &"
+                ]
+        };
+        for (let [name, fn] of Object.entries(variants)){
+            matchVariant(name, (value = "", extra)=>{
+                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);
+            }, {
+                values: Object.fromEntries(pseudoVariants)
             });
         }
     },
@@ -226,14 +241,14 @@ let variantPlugins = {
         addVariant("ltr", ()=>{
             _log.default.warn("rtl-experimental", [
                 "The RTL features in Tailwind CSS are currently in preview.",
-                "Preview features are not covered by semver, and may be improved in breaking ways at any time.", 
+                "Preview features are not covered by semver, and may be improved in breaking ways at any time."
             ]);
             return '[dir="ltr"] &';
         });
         addVariant("rtl", ()=>{
             _log.default.warn("rtl-experimental", [
                 "The RTL features in Tailwind CSS are currently in preview.",
-                "Preview features are not covered by semver, and may be improved in breaking ways at any time.", 
+                "Preview features are not covered by semver, and may be improved in breaking ways at any time."
             ]);
             return '[dir="rtl"] &';
         });
@@ -249,7 +264,7 @@ let variantPlugins = {
             _log.default.warn("darkmode-false", [
                 "The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.",
                 "Change `darkMode` to `media` or remove it entirely.",
-                "https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration", 
+                "https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration"
             ]);
         }
         if (mode === "class") {
@@ -261,11 +276,162 @@ let variantPlugins = {
     printVariant: ({ addVariant  })=>{
         addVariant("print", "@media print");
     },
-    screenVariants: ({ theme , addVariant  })=>{
-        for (let screen of (0, _normalizeScreens.normalizeScreens)(theme("screens"))){
-            let query = (0, _buildMediaQuery.default)(screen);
-            addVariant(screen.name, `@media ${query}`);
+    screenVariants: ({ theme , addVariant , matchVariant  })=>{
+        var ref;
+        let rawScreens = (ref = theme("screens")) !== null && ref !== void 0 ? ref : {};
+        let areSimpleScreens = Object.values(rawScreens).every((v)=>typeof v === "string");
+        let screens = (0, _normalizeScreens.normalizeScreens)(theme("screens"));
+        /** @type {Set<string>} */ let unitCache = new Set([]);
+        /** @param {string} value */ function units(value) {
+            var ref;
+            var ref1;
+            return (ref1 = (ref = value.match(/(\D+)$/)) === null || ref === void 0 ? void 0 : ref[1]) !== null && ref1 !== void 0 ? ref1 : "(none)";
+        }
+        /** @param {string} value */ function recordUnits(value) {
+            if (value !== undefined) {
+                unitCache.add(units(value));
+            }
+        }
+        /** @param {string} value */ function canUseUnits(value) {
+            recordUnits(value);
+            // If the cache was empty it'll become 1 because we've just added the current unit
+            // If the cache was not empty and the units are the same the size doesn't change
+            // Otherwise, if the units are different from what is already known the size will always be > 1
+            return unitCache.size === 1;
+        }
+        for (const screen of screens){
+            for (const value of screen.values){
+                recordUnits(value.min);
+                recordUnits(value.max);
+            }
+        }
+        let screensUseConsistentUnits = unitCache.size <= 1;
+        /**
+     * @typedef {import('./util/normalizeScreens').Screen} Screen
+     */ /**
+     * @param {'min' | 'max'} type
+     * @returns {Record<string, Screen>}
+     */ function buildScreenValues(type) {
+            return Object.fromEntries(screens.filter((screen)=>(0, _normalizeScreens.isScreenSortable)(screen).result).map((screen)=>{
+                let { min , max  } = screen.values[0];
+                if (type === "min" && min !== undefined) {
+                    return screen;
+                } else if (type === "min" && max !== undefined) {
+                    return {
+                        ...screen,
+                        not: !screen.not
+                    };
+                } else if (type === "max" && max !== undefined) {
+                    return screen;
+                } else if (type === "max" && min !== undefined) {
+                    return {
+                        ...screen,
+                        not: !screen.not
+                    };
+                }
+            }).map((screen)=>[
+                    screen.name,
+                    screen
+                ]));
+        }
+        /**
+     * @param {'min' | 'max'} type
+     * @returns {(a: { value: string | Screen }, z: { value: string | Screen }) => number}
+     */ function buildSort(type) {
+            return (a, z)=>(0, _normalizeScreens.compareScreens)(type, a.value, z.value);
         }
+        let maxSort = buildSort("max");
+        let minSort = buildSort("min");
+        /** @param {'min'|'max'} type */ function buildScreenVariant(type) {
+            return (value)=>{
+                if (!areSimpleScreens) {
+                    _log.default.warn("complex-screen-config", [
+                        "The `min-*` and `max-*` variants are not supported with a `screens` configuration containing objects."
+                    ]);
+                    return [];
+                } else if (!screensUseConsistentUnits) {
+                    _log.default.warn("mixed-screen-units", [
+                        "The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units."
+                    ]);
+                    return [];
+                } else if (typeof value === "string" && !canUseUnits(value)) {
+                    _log.default.warn("minmax-have-mixed-units", [
+                        "The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units."
+                    ]);
+                    return [];
+                }
+                return [
+                    `@media ${(0, _buildMediaQuery.default)((0, _normalizeScreens.toScreen)(value, type))}`
+                ];
+            };
+        }
+        matchVariant("max", buildScreenVariant("max"), {
+            sort: maxSort,
+            values: areSimpleScreens ? buildScreenValues("max") : {}
+        });
+        // screens and min-* are sorted together when they can be
+        let id = "min-screens";
+        for (let screen1 of screens){
+            addVariant(screen1.name, `@media ${(0, _buildMediaQuery.default)(screen1)}`, {
+                id,
+                sort: areSimpleScreens && screensUseConsistentUnits ? minSort : undefined,
+                value: screen1
+            });
+        }
+        matchVariant("min", buildScreenVariant("min"), {
+            id,
+            sort: minSort
+        });
+    },
+    supportsVariants: ({ matchVariant , theme  })=>{
+        var ref;
+        matchVariant("supports", (value = "")=>{
+            let check = (0, _dataTypes.normalize)(value);
+            let isRaw = /^\w*\s*\(/.test(check);
+            // Chrome has a bug where `(condtion1)or(condition2)` is not valid
+            // But `(condition1) or (condition2)` is supported.
+            check = isRaw ? check.replace(/\b(and|or|not)\b/g, " $1 ") : check;
+            if (isRaw) {
+                return `@supports ${check}`;
+            }
+            if (!check.includes(":")) {
+                check = `${check}: var(--tw)`;
+            }
+            if (!(check.startsWith("(") && check.endsWith(")"))) {
+                check = `(${check})`;
+            }
+            return `@supports ${check}`;
+        }, {
+            values: (ref = theme("supports")) !== null && ref !== void 0 ? ref : {}
+        });
+    },
+    ariaVariants: ({ matchVariant , theme  })=>{
+        var ref;
+        matchVariant("aria", (value)=>`&[aria-${(0, _dataTypes.normalize)(value)}]`, {
+            values: (ref = theme("aria")) !== null && ref !== void 0 ? ref : {}
+        });
+        var ref1;
+        matchVariant("group-aria", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier})[aria-${(0, _dataTypes.normalize)(value)}] &` : `:merge(.group)[aria-${(0, _dataTypes.normalize)(value)}] &`, {
+            values: (ref1 = theme("aria")) !== null && ref1 !== void 0 ? ref1 : {}
+        });
+        var ref2;
+        matchVariant("peer-aria", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier})[aria-${(0, _dataTypes.normalize)(value)}] ~ &` : `:merge(.peer)[aria-${(0, _dataTypes.normalize)(value)}] ~ &`, {
+            values: (ref2 = theme("aria")) !== null && ref2 !== void 0 ? ref2 : {}
+        });
+    },
+    dataVariants: ({ matchVariant , theme  })=>{
+        var ref;
+        matchVariant("data", (value)=>`&[data-${(0, _dataTypes.normalize)(value)}]`, {
+            values: (ref = theme("data")) !== null && ref !== void 0 ? ref : {}
+        });
+        var ref1;
+        matchVariant("group-data", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier})[data-${(0, _dataTypes.normalize)(value)}] &` : `:merge(.group)[data-${(0, _dataTypes.normalize)(value)}] &`, {
+            values: (ref1 = theme("data")) !== null && ref1 !== void 0 ? ref1 : {}
+        });
+        var ref2;
+        matchVariant("peer-data", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier})[data-${(0, _dataTypes.normalize)(value)}] ~ &` : `:merge(.peer)[data-${(0, _dataTypes.normalize)(value)}] ~ &`, {
+            values: (ref2 = theme("data")) !== null && ref2 !== void 0 ? ref2 : {}
+        });
     },
     orientationVariants: ({ addVariant  })=>{
         addVariant("portrait", "@media (orientation: portrait)");
@@ -282,7 +448,7 @@ let cssTransformValue = [
     "skewX(var(--tw-skew-x))",
     "skewY(var(--tw-skew-y))",
     "scaleX(var(--tw-scale-x))",
-    "scaleY(var(--tw-scale-y))", 
+    "scaleY(var(--tw-scale-y))"
 ].join(" ");
 let cssFilterValue = [
     "var(--tw-blur)",
@@ -293,7 +459,7 @@ let cssFilterValue = [
     "var(--tw-invert)",
     "var(--tw-saturate)",
     "var(--tw-sepia)",
-    "var(--tw-drop-shadow)", 
+    "var(--tw-drop-shadow)"
 ].join(" ");
 let cssBackdropFilterValue = [
     "var(--tw-backdrop-blur)",
@@ -304,7 +470,7 @@ let cssBackdropFilterValue = [
     "var(--tw-backdrop-invert)",
     "var(--tw-backdrop-opacity)",
     "var(--tw-backdrop-saturate)",
-    "var(--tw-backdrop-sepia)", 
+    "var(--tw-backdrop-sepia)"
 ].join(" ");
 let corePlugins = {
     preflight: ({ addBase  })=>{
@@ -313,7 +479,7 @@ let corePlugins = {
             _postcss.default.comment({
                 text: `! tailwindcss v${_packageJson.version} | MIT License | https://tailwindcss.com`
             }),
-            ...preflightStyles.nodes, 
+            ...preflightStyles.nodes
         ]);
     },
     container: (()=>{
@@ -330,7 +496,7 @@ let corePlugins = {
                         screen: "DEFAULT",
                         minWidth: 0,
                         padding: paddings
-                    }, 
+                    }
                 ];
             }
             let mapping = [];
@@ -386,7 +552,7 @@ let corePlugins = {
                         marginLeft: "auto"
                     } : {}, generatePaddingFor(0))
                 },
-                ...atRules, 
+                ...atRules
             ]);
         };
     })(),
@@ -432,6 +598,9 @@ let corePlugins = {
             },
             ".invisible": {
                 visibility: "hidden"
+            },
+            ".collapse": {
+                visibility: "collapse"
             }
         });
     },
@@ -478,7 +647,7 @@ let corePlugins = {
                     "top",
                     "bottom"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -504,8 +673,8 @@ let corePlugins = {
                 [
                     "left"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -630,7 +799,7 @@ let corePlugins = {
                     "margin-top",
                     "margin-bottom"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -656,8 +825,8 @@ let corePlugins = {
                 [
                     "margin-left"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -807,7 +976,7 @@ let corePlugins = {
             [
                 "flex-shrink"
             ]
-        ], 
+        ]
     ]),
     flexGrow: (0, _createUtilityPlugin.default)("flexGrow", [
         [
@@ -821,7 +990,7 @@ let corePlugins = {
             [
                 "flex-grow"
             ]
-        ], 
+        ]
     ]),
     flexBasis: (0, _createUtilityPlugin.default)("flexBasis", [
         [
@@ -905,7 +1074,7 @@ let corePlugins = {
                         "transform",
                         cssTransformValue
                     ]
-                ], 
+                ]
             ],
             [
                 "translate-y",
@@ -919,9 +1088,9 @@ let corePlugins = {
                         "transform",
                         cssTransformValue
                     ]
-                ], 
-            ], 
-        ], 
+                ]
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -972,8 +1141,8 @@ let corePlugins = {
                         cssTransformValue
                     ]
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -990,8 +1159,8 @@ let corePlugins = {
                 [
                     "transform",
                     cssTransformValue
-                ], 
-            ], 
+                ]
+            ]
         ],
         [
             [
@@ -1006,7 +1175,7 @@ let corePlugins = {
                         "transform",
                         cssTransformValue
                     ]
-                ], 
+                ]
             ],
             [
                 "scale-y",
@@ -1020,9 +1189,9 @@ let corePlugins = {
                         "transform",
                         cssTransformValue
                     ]
-                ], 
-            ], 
-        ], 
+                ]
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -1075,7 +1244,7 @@ let corePlugins = {
                             }
                             return value.replace(name, prefixName(name));
                         }).join(", ")
-                    }, 
+                    }
                 ];
             }
         }, {
@@ -1244,7 +1413,7 @@ let corePlugins = {
                     "scroll-margin-top",
                     "scroll-margin-bottom"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -1270,8 +1439,8 @@ let corePlugins = {
                 [
                     "scroll-margin-left"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -1296,7 +1465,7 @@ let corePlugins = {
                     "scroll-padding-top",
                     "scroll-padding-bottom"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -1322,8 +1491,8 @@ let corePlugins = {
                 [
                     "scroll-padding-left"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ]),
     listStylePosition: ({ addUtilities  })=>{
         addUtilities({
@@ -1471,7 +1640,7 @@ let corePlugins = {
             [
                 "gridTemplateColumns"
             ]
-        ], 
+        ]
     ]),
     gridTemplateRows: (0, _createUtilityPlugin.default)("gridTemplateRows", [
         [
@@ -1530,6 +1699,9 @@ let corePlugins = {
             ".place-content-evenly": {
                 "place-content": "space-evenly"
             },
+            ".place-content-baseline": {
+                "place-content": "baseline"
+            },
             ".place-content-stretch": {
                 "place-content": "stretch"
             }
@@ -1546,6 +1718,9 @@ let corePlugins = {
             ".place-items-center": {
                 "place-items": "center"
             },
+            ".place-items-baseline": {
+                "place-items": "baseline"
+            },
             ".place-items-stretch": {
                 "place-items": "stretch"
             }
@@ -1570,6 +1745,9 @@ let corePlugins = {
             },
             ".content-evenly": {
                 "align-content": "space-evenly"
+            },
+            ".content-baseline": {
+                "align-content": "baseline"
             }
         });
     },
@@ -1649,8 +1827,8 @@ let corePlugins = {
                 [
                     "rowGap"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ]),
     space: ({ matchUtilities , addUtilities , theme  })=>{
         matchUtilities({
@@ -1715,7 +1893,8 @@ let corePlugins = {
             values: theme("divideWidth"),
             type: [
                 "line-width",
-                "length"
+                "length",
+                "any"
             ]
         });
         addUtilities({
@@ -1768,7 +1947,10 @@ let corePlugins = {
             }
         }, {
             values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette.default)(theme("divideColor"))),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
     },
     divideOpacity: ({ matchUtilities , theme  })=>{
@@ -1982,6 +2164,9 @@ let corePlugins = {
             },
             ".break-all": {
                 "word-break": "break-all"
+            },
+            ".break-keep": {
+                "word-break": "keep-all"
             }
         });
     },
@@ -2020,7 +2205,7 @@ let corePlugins = {
                     "border-top-left-radius",
                     "border-bottom-left-radius"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -2046,8 +2231,8 @@ let corePlugins = {
                 [
                     "border-bottom-left-radius"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ]),
     borderWidth: (0, _createUtilityPlugin.default)("borderWidth", [
         [
@@ -2082,7 +2267,7 @@ let corePlugins = {
                     "border-top-width",
                     "border-bottom-width"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -2124,8 +2309,8 @@ let corePlugins = {
                     ],
                     "border-left-width"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ], {
         type: [
             "line-width",
@@ -2171,7 +2356,8 @@ let corePlugins = {
         }, {
             values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette.default)(theme("borderColor"))),
             type: [
-                "color"
+                "color",
+                "any"
             ]
         });
         matchUtilities({
@@ -2209,7 +2395,10 @@ let corePlugins = {
             }
         }, {
             values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette.default)(theme("borderColor"))),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
         matchUtilities({
             "border-t": (value)=>{
@@ -2262,7 +2451,10 @@ let corePlugins = {
             }
         }, {
             values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette.default)(theme("borderColor"))),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
     },
     borderOpacity: (0, _createUtilityPlugin.default)("borderOpacity", [
@@ -2271,7 +2463,7 @@ let corePlugins = {
             [
                 "--tw-border-opacity"
             ]
-        ], 
+        ]
     ]),
     backgroundColor: ({ matchUtilities , theme , corePlugins  })=>{
         matchUtilities({
@@ -2289,7 +2481,10 @@ let corePlugins = {
             }
         }, {
             values: (0, _flattenColorPalette.default)(theme("backgroundColor")),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
     },
     backgroundOpacity: (0, _createUtilityPlugin.default)("backgroundOpacity", [
@@ -2298,7 +2493,7 @@ let corePlugins = {
             [
                 "--tw-bg-opacity"
             ]
-        ], 
+        ]
     ]),
     backgroundImage: (0, _createUtilityPlugin.default)("backgroundImage", [
         [
@@ -2379,7 +2574,8 @@ let corePlugins = {
         type: [
             "lookup",
             "length",
-            "percentage"
+            "percentage",
+            "size"
         ]
     }),
     backgroundAttachment: ({ addUtilities  })=>{
@@ -2421,7 +2617,12 @@ let corePlugins = {
     ], {
         type: [
             "lookup",
-            "position"
+            [
+                "position",
+                {
+                    preferOnConflict: true
+                }
+            ]
         ]
     }),
     backgroundRepeat: ({ addUtilities  })=>{
@@ -2485,7 +2686,8 @@ let corePlugins = {
             values: (0, _flattenColorPalette.default)(theme("stroke")),
             type: [
                 "color",
-                "url"
+                "url",
+                "any"
             ]
         });
     },
@@ -2551,7 +2753,7 @@ let corePlugins = {
                     "padding-top",
                     "padding-bottom"
                 ]
-            ], 
+            ]
         ],
         [
             [
@@ -2577,8 +2779,8 @@ let corePlugins = {
                 [
                     "padding-left"
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ]),
     textAlign: ({ addUtilities  })=>{
         addUtilities({
@@ -2645,20 +2847,29 @@ let corePlugins = {
                 })
         });
     },
-    fontFamily: (0, _createUtilityPlugin.default)("fontFamily", [
-        [
-            "font",
-            [
-                "fontFamily"
+    fontFamily: ({ matchUtilities , theme  })=>{
+        matchUtilities({
+            font: (value)=>{
+                let [families, options = {}] = Array.isArray(value) && (0, _isPlainObject.default)(value[1]) ? value : [
+                    value
+                ];
+                let { fontFeatureSettings  } = options;
+                return {
+                    "font-family": Array.isArray(families) ? families.join(", ") : families,
+                    ...fontFeatureSettings === undefined ? {} : {
+                        "font-feature-settings": fontFeatureSettings
+                    }
+                };
+            }
+        }, {
+            values: theme("fontFamily"),
+            type: [
+                "lookup",
+                "generic-name",
+                "family-name"
             ]
-        ]
-    ], {
-        type: [
-            "lookup",
-            "generic-name",
-            "family-name"
-        ]
-    }),
+        });
+    },
     fontSize: ({ matchUtilities , theme  })=>{
         matchUtilities({
             text: (value)=>{
@@ -2701,7 +2912,8 @@ let corePlugins = {
     ], {
         type: [
             "lookup",
-            "number"
+            "number",
+            "any"
         ]
     }),
     textTransform: ({ addUtilities  })=>{
@@ -2819,7 +3031,10 @@ let corePlugins = {
             }
         }, {
             values: (0, _flattenColorPalette.default)(theme("textColor")),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
     },
     textOpacity: (0, _createUtilityPlugin.default)("textOpacity", [
@@ -2856,7 +3071,8 @@ let corePlugins = {
         }, {
             values: (0, _flattenColorPalette.default)(theme("textDecorationColor")),
             type: [
-                "color"
+                "color",
+                "any"
             ]
         });
     },
@@ -2902,7 +3118,8 @@ let corePlugins = {
     ], {
         type: [
             "length",
-            "percentage"
+            "percentage",
+            "any"
         ]
     }),
     fontSmoothing: ({ addUtilities  })=>{
@@ -3106,7 +3323,7 @@ let corePlugins = {
         let defaultBoxShadow = [
             `var(--tw-ring-offset-shadow, 0 0 #0000)`,
             `var(--tw-ring-shadow, 0 0 #0000)`,
-            `var(--tw-shadow)`, 
+            `var(--tw-shadow)`
         ].join(", ");
         return function({ matchUtilities , addDefaults , theme  }) {
             addDefaults(" box-shadow", {
@@ -3152,7 +3369,8 @@ let corePlugins = {
         }, {
             values: (0, _flattenColorPalette.default)(theme("boxShadowColor")),
             type: [
-                "color"
+                "color",
+                "any"
             ]
         });
     },
@@ -3173,9 +3391,6 @@ let corePlugins = {
             },
             ".outline-double": {
                 "outline-style": "double"
-            },
-            ".outline-hidden": {
-                "outline-style": "hidden"
             }
         });
     },
@@ -3204,8 +3419,10 @@ let corePlugins = {
         type: [
             "length",
             "number",
-            "percentage"
-        ]
+            "percentage",
+            "any"
+        ],
+        supportsNegativeValues: true
     }),
     outlineColor: ({ matchUtilities , theme  })=>{
         matchUtilities({
@@ -3217,7 +3434,8 @@ let corePlugins = {
         }, {
             values: (0, _flattenColorPalette.default)(theme("outlineColor")),
             type: [
-                "color"
+                "color",
+                "any"
             ]
         });
     },
@@ -3252,7 +3470,7 @@ let corePlugins = {
                     "box-shadow": [
                         `var(--tw-ring-offset-shadow)`,
                         `var(--tw-ring-shadow)`,
-                        `var(--tw-shadow, 0 0 #0000)`, 
+                        `var(--tw-shadow, 0 0 #0000)`
                     ].join(", ")
                 };
             }
@@ -3283,7 +3501,10 @@ let corePlugins = {
             }
         }, {
             values: Object.fromEntries(Object.entries((0, _flattenColorPalette.default)(theme("ringColor"))).filter(([modifier])=>modifier !== "DEFAULT")),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
     },
     ringOpacity: (helpers)=>{
@@ -3318,7 +3539,10 @@ let corePlugins = {
             }
         }, {
             values: (0, _flattenColorPalette.default)(theme("ringOffsetColor")),
-            type: "color"
+            type: [
+                "color",
+                "any"
+            ]
         });
     },
     blur: ({ matchUtilities , theme  })=>{
@@ -3664,6 +3888,6 @@ let corePlugins = {
                     "var(--tw-content)"
                 ]
             ]
-        ], 
+        ]
     ])
 };