tailwindcss 3.2.7 → 3.3.1

package/lib/corePlugins.js

@@ -15,6 +15,7 @@ _export(exports, {
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireWildcard(require("path"));
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
+const _sharedState = require("./lib/sharedState");
 const _createUtilityPlugin = /*#__PURE__*/ _interopRequireDefault(require("./util/createUtilityPlugin"));
 const _buildMediaQuery = /*#__PURE__*/ _interopRequireDefault(require("./util/buildMediaQuery"));
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("./util/escapeClassName"));
@@ -256,20 +257,8 @@ let variantPlugins = {
         }
     },
     directionVariants: ({ addVariant  })=>{
-        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."
-            ]);
-            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."
-            ]);
-            return '[dir="rtl"] &';
-        });
+        addVariant("ltr", ':is([dir="ltr"] &)');
+        addVariant("rtl", ':is([dir="rtl"] &)');
     },
     reducedMotionVariants: ({ addVariant  })=>{
         addVariant("motion-safe", "@media (prefers-reduced-motion: no-preference)");
@@ -286,7 +275,7 @@ let variantPlugins = {
             ]);
         }
         if (mode === "class") {
-            addVariant("dark", `${className} &`);
+            addVariant("dark", `:is(${className} &)`);
         } else if (mode === "media") {
             addVariant("dark", "@media (prefers-color-scheme: dark)");
         }
@@ -645,10 +634,7 @@ let corePlugins = {
         [
             "inset",
             [
-                "top",
-                "right",
-                "bottom",
-                "left"
+                "inset"
             ]
         ],
         [
@@ -668,6 +654,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "start",
+                [
+                    "inset-inline-start"
+                ]
+            ],
+            [
+                "end",
+                [
+                    "inset-inline-end"
+                ]
+            ],
             [
                 "top",
                 [
@@ -820,6 +818,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "ms",
+                [
+                    "margin-inline-start"
+                ]
+            ],
+            [
+                "me",
+                [
+                    "margin-inline-end"
+                ]
+            ],
             [
                 "mt",
                 [
@@ -858,6 +868,26 @@ let corePlugins = {
             }
         });
     },
+    lineClamp: ({ matchUtilities , addUtilities , theme  })=>{
+        matchUtilities({
+            "line-clamp": (value)=>({
+                    overflow: "hidden",
+                    display: "-webkit-box",
+                    "-webkit-box-orient": "vertical",
+                    "-webkit-line-clamp": `${value}`
+                })
+        }, {
+            values: theme("lineClamp")
+        });
+        addUtilities({
+            ".line-clamp-none": {
+                overflow: "visible",
+                display: "block",
+                "-webkit-box-orient": "horizontal",
+                "-webkit-line-clamp": "none"
+            }
+        });
+    },
     display: ({ addUtilities  })=>{
         addUtilities({
             ".block": {
@@ -1028,6 +1058,16 @@ let corePlugins = {
             }
         });
     },
+    captionSide: ({ addUtilities  })=>{
+        addUtilities({
+            ".caption-top": {
+                "caption-side": "top"
+            },
+            ".caption-bottom": {
+                "caption-side": "bottom"
+            }
+        });
+    },
     borderCollapse: ({ addUtilities  })=>{
         addUtilities({
             ".border-collapse": {
@@ -1434,6 +1474,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "scroll-ms",
+                [
+                    "scroll-margin-inline-start"
+                ]
+            ],
+            [
+                "scroll-me",
+                [
+                    "scroll-margin-inline-end"
+                ]
+            ],
             [
                 "scroll-mt",
                 [
@@ -1486,6 +1538,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "scroll-ps",
+                [
+                    "scroll-padding-inline-start"
+                ]
+            ],
+            [
+                "scroll-pe",
+                [
+                    "scroll-padding-inline-end"
+                ]
+            ],
             [
                 "scroll-pt",
                 [
@@ -1530,6 +1594,14 @@ let corePlugins = {
             ]
         ]
     ]),
+    listStyleImage: (0, _createUtilityPlugin.default)("listStyleImage", [
+        [
+            "list-image",
+            [
+                "listStyleImage"
+            ]
+        ]
+    ]),
     appearance: ({ addUtilities  })=>{
         addUtilities({
             ".appearance-none": {
@@ -1746,6 +1818,9 @@ let corePlugins = {
     },
     alignContent: ({ addUtilities  })=>{
         addUtilities({
+            ".content-normal": {
+                "align-content": "normal"
+            },
             ".content-center": {
                 "align-content": "center"
             },
@@ -1766,6 +1841,9 @@ let corePlugins = {
             },
             ".content-baseline": {
                 "align-content": "baseline"
+            },
+            ".content-stretch": {
+                "align-content": "stretch"
             }
         });
     },
@@ -1790,6 +1868,9 @@ let corePlugins = {
     },
     justifyContent: ({ addUtilities  })=>{
         addUtilities({
+            ".justify-normal": {
+                "justify-content": "normal"
+            },
             ".justify-start": {
                 "justify-content": "flex-start"
             },
@@ -1807,6 +1888,9 @@ let corePlugins = {
             },
             ".justify-evenly": {
                 "justify-content": "space-evenly"
+            },
+            ".justify-stretch": {
+                "justify-content": "stretch"
             }
         });
     },
@@ -1852,6 +1936,15 @@ let corePlugins = {
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
+                if (_sharedState.env.OXIDE) {
+                    return {
+                        "& > :not([hidden]) ~ :not([hidden])": {
+                            "--tw-space-x-reverse": "0",
+                            "margin-inline-end": `calc(${value} * var(--tw-space-x-reverse))`,
+                            "margin-inline-start": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`
+                        }
+                    };
+                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "--tw-space-x-reverse": "0",
@@ -1887,6 +1980,16 @@ let corePlugins = {
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
+                if (_sharedState.env.OXIDE) {
+                    return {
+                        "& > :not([hidden]) ~ :not([hidden])": {
+                            "@defaults border-width": {},
+                            "--tw-divide-x-reverse": "0",
+                            "border-inline-end-width": `calc(${value} * var(--tw-divide-x-reverse))`,
+                            "border-inline-start-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
+                        }
+                    };
+                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "@defaults border-width": {},
@@ -2152,6 +2255,19 @@ let corePlugins = {
             }
         });
     },
+    hyphens: ({ addUtilities  })=>{
+        addUtilities({
+            ".hyphens-none": {
+                hyphens: "none"
+            },
+            ".hyphens-manual": {
+                hyphens: "manual"
+            },
+            ".hyphens-auto": {
+                hyphens: "auto"
+            }
+        });
+    },
     whitespace: ({ addUtilities  })=>{
         addUtilities({
             ".whitespace-normal": {
@@ -2168,6 +2284,9 @@ let corePlugins = {
             },
             ".whitespace-pre-wrap": {
                 "white-space": "pre-wrap"
+            },
+            ".whitespace-break-spaces": {
+                "white-space": "break-spaces"
             }
         });
     },
@@ -2196,6 +2315,20 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "rounded-s",
+                [
+                    "border-start-start-radius",
+                    "border-end-start-radius"
+                ]
+            ],
+            [
+                "rounded-e",
+                [
+                    "border-start-end-radius",
+                    "border-end-end-radius"
+                ]
+            ],
             [
                 "rounded-t",
                 [
@@ -2226,6 +2359,30 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "rounded-ss",
+                [
+                    "border-start-start-radius"
+                ]
+            ],
+            [
+                "rounded-se",
+                [
+                    "border-start-end-radius"
+                ]
+            ],
+            [
+                "rounded-ee",
+                [
+                    "border-end-end-radius"
+                ]
+            ],
+            [
+                "rounded-es",
+                [
+                    "border-end-start-radius"
+                ]
+            ],
             [
                 "rounded-tl",
                 [
@@ -2288,6 +2445,26 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "border-s",
+                [
+                    [
+                        "@defaults border-width",
+                        {}
+                    ],
+                    "border-inline-start-width"
+                ]
+            ],
+            [
+                "border-e",
+                [
+                    [
+                        "@defaults border-width",
+                        {}
+                    ],
+                    "border-inline-end-width"
+                ]
+            ],
             [
                 "border-t",
                 [
@@ -2419,6 +2596,30 @@ let corePlugins = {
             ]
         });
         matchUtilities({
+            "border-s": (value)=>{
+                if (!corePlugins("borderOpacity")) {
+                    return {
+                        "border-inline-start-color": (0, _toColorValue.default)(value)
+                    };
+                }
+                return (0, _withAlphaVariable.default)({
+                    color: value,
+                    property: "border-inline-start-color",
+                    variable: "--tw-border-opacity"
+                });
+            },
+            "border-e": (value)=>{
+                if (!corePlugins("borderOpacity")) {
+                    return {
+                        "border-inline-end-color": (0, _toColorValue.default)(value)
+                    };
+                }
+                return (0, _withAlphaVariable.default)({
+                    color: value,
+                    property: "border-inline-end-color",
+                    variable: "--tw-border-opacity"
+                });
+            },
             "border-t": (value)=>{
                 if (!corePlugins("borderOpacity")) {
                     return {
@@ -2539,30 +2740,63 @@ let corePlugins = {
                     "any"
                 ]
             };
+            let positionOptions = {
+                values: theme("gradientColorStopPositions"),
+                type: [
+                    "length",
+                    "percentage"
+                ]
+            };
             matchUtilities({
                 from: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-from": (0, _toColorValue.default)(value, "from"),
-                        "--tw-gradient-to": transparentToValue,
+                        "--tw-gradient-from": `${(0, _toColorValue.default)(value, "from")} var(--tw-gradient-from-position)`,
+                        "--tw-gradient-from-position": " ",
+                        "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-from-position)`,
+                        "--tw-gradient-to-position": " ",
                         "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to)`
                     };
                 }
             }, options);
+            matchUtilities({
+                from: (value)=>{
+                    return {
+                        "--tw-gradient-from-position": value
+                    };
+                }
+            }, positionOptions);
             matchUtilities({
                 via: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-to": transparentToValue,
-                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue.default)(value, "via")}, var(--tw-gradient-to)`
+                        "--tw-gradient-via-position": " ",
+                        "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-to-position)`,
+                        "--tw-gradient-to-position": " ",
+                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue.default)(value, "via")} var(--tw-gradient-via-position), var(--tw-gradient-to)`
                     };
                 }
             }, options);
+            matchUtilities({
+                via: (value)=>{
+                    return {
+                        "--tw-gradient-via-position": value
+                    };
+                }
+            }, positionOptions);
             matchUtilities({
                 to: (value)=>({
-                        "--tw-gradient-to": (0, _toColorValue.default)(value, "to")
+                        "--tw-gradient-to": `${(0, _toColorValue.default)(value, "to")} var(--tw-gradient-to-position)`,
+                        "--tw-gradient-to-position": " "
                     })
             }, options);
+            matchUtilities({
+                to: (value)=>{
+                    return {
+                        "--tw-gradient-to-position": value
+                    };
+                }
+            }, positionOptions);
         };
     })(),
     boxDecorationBreak: ({ addUtilities  })=>{
@@ -2774,6 +3008,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "ps",
+                [
+                    "padding-inline-start"
+                ]
+            ],
+            [
+                "pe",
+                [
+                    "padding-inline-end"
+                ]
+            ],
             [
                 "pt",
                 [
@@ -2871,11 +3117,14 @@ let corePlugins = {
                 let [families, options = {}] = Array.isArray(value) && (0, _isPlainObject.default)(value[1]) ? value : [
                     value
                 ];
-                let { fontFeatureSettings  } = options;
+                let { fontFeatureSettings , fontVariationSettings  } = options;
                 return {
                     "font-family": Array.isArray(families) ? families.join(", ") : families,
                     ...fontFeatureSettings === undefined ? {} : {
                         "font-feature-settings": fontFeatureSettings
+                    },
+                    ...fontVariationSettings === undefined ? {} : {
+                        "font-variation-settings": fontVariationSettings
                     }
                 };
             }
@@ -2890,10 +3139,16 @@ let corePlugins = {
     },
     fontSize: ({ matchUtilities , theme  })=>{
         matchUtilities({
-            text: (value)=>{
+            text: (value, { modifier  })=>{
                 let [fontSize, options] = Array.isArray(value) ? value : [
                     value
                 ];
+                if (modifier) {
+                    return {
+                        "font-size": fontSize,
+                        "line-height": modifier
+                    };
+                }
                 let { lineHeight , letterSpacing , fontWeight  } = (0, _isPlainObject.default)(options) ? options : {
                     lineHeight: options
                 };
@@ -2912,6 +3167,7 @@ let corePlugins = {
             }
         }, {
             values: theme("fontSize"),
+            modifiers: theme("lineHeight"),
             type: [
                 "absolute-size",
                 "relative-size",

package/lib/css/preflight.css

@@ -23,6 +23,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -32,6 +33,7 @@ html {
   tab-size: 4; /* 3 */
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+  font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
 }
 
 /*

package/lib/featureFlags.js

@@ -15,6 +15,7 @@ _export(exports, {
 });
 const _picocolors = /*#__PURE__*/ _interopRequireDefault(require("picocolors"));
 const _log = /*#__PURE__*/ _interopRequireDefault(require("./util/log"));
+const _sharedState = require("./lib/sharedState");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -22,7 +23,13 @@ function _interopRequireDefault(obj) {
 }
 let defaults = {
     optimizeUniversalDefaults: false,
-    generalizedModifiers: true
+    generalizedModifiers: true,
+    get disableColorOpacityUtilitiesByDefault () {
+        return _sharedState.env.OXIDE;
+    },
+    get relativeContentPathsByDefault () {
+        return _sharedState.env.OXIDE;
+    }
 };
 let featureFlags = {
     future: [

package/lib/lib/expandApplyAtRules.js

@@ -10,6 +10,8 @@ const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
 const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
 const _generateRules = require("./generateRules");
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
+const _applyImportantSelector = require("../util/applyImportantSelector");
+const _formatVariantSelectorJs = require("../util/formatVariantSelector.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -481,11 +483,20 @@ function processApply(root, context, localCache) {
                         rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate1);
                         // And then re-add it if it was removed
                         if (importantSelector && parentSelector !== parent.selector) {
-                            rule.selector = `${importantSelector} ${rule.selector}`;
+                            rule.selector = (0, _applyImportantSelector.applyImportantSelector)(rule.selector, importantSelector);
                         }
                         rule.walkDecls((d)=>{
                             d.important = meta.important || important1;
                         });
+                        // Move pseudo elements to the end of the selector (if necessary)
+                        let selector = (0, _postcssSelectorParser.default)().astSync(rule.selector);
+                        selector.each((sel)=>{
+                            let [pseudoElements] = (0, _formatVariantSelectorJs.collectPseudoElements)(sel);
+                            if (pseudoElements.length > 0) {
+                                sel.nodes.push(...pseudoElements.sort(_formatVariantSelectorJs.sortSelector));
+                            }
+                        });
+                        rule.selector = selector.toString();
                     });
                 }
                 // It could be that the node we were inserted was removed because the class didn't match

package/lib/lib/generateRules.js

@@ -28,6 +28,7 @@ const _setupContextUtils = require("./setupContextUtils");
 const _isSyntacticallyValidPropertyValue = /*#__PURE__*/ _interopRequireDefault(require("../util/isSyntacticallyValidPropertyValue"));
 const _splitAtTopLevelOnlyJs = require("../util/splitAtTopLevelOnly.js");
 const _featureFlags = require("../featureFlags");
+const _applyImportantSelector = require("../util/applyImportantSelector");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -235,18 +236,21 @@ function applyVariant(variant, matches, context) {
     }
     // Register arbitrary variants
     if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+        let sort = context.offsets.recordVariant(variant);
         let selector = (0, _dataTypes.normalize)(variant.slice(1, -1));
-        if (!(0, _setupContextUtils.isValidVariantFormatString)(selector)) {
+        let selectors = (0, _splitAtTopLevelOnlyJs.splitAtTopLevelOnly)(selector, ",");
+        // We do not support multiple selectors for arbitrary variants
+        if (selectors.length > 1) {
             return [];
         }
-        let fn = (0, _setupContextUtils.parseVariant)(selector);
-        let sort = context.offsets.recordVariant(variant);
-        context.variantMap.set(variant, [
-            [
-                sort,
-                fn
-            ]
-        ]);
+        if (!selectors.every(_setupContextUtils.isValidVariantFormatString)) {
+            return [];
+        }
+        let records = selectors.map((sel, idx)=>[
+                context.offsets.applyParallelOffset(sort, idx),
+                (0, _setupContextUtils.parseVariant)(sel.trim())
+            ]);
+        context.variantMap.set(variant, records);
     }
     if (context.variantMap.has(variant)) {
         let isArbitraryVariant = isArbitraryValue(variant);
@@ -820,7 +824,7 @@ function getImportantStrategy(important) {
                 return;
             }
             rule.selectors = rule.selectors.map((selector)=>{
-                return `${important} ${selector}`;
+                return (0, _applyImportantSelector.applyImportantSelector)(selector, important);
             });
         };
     }