tailwindcss 3.0.0-alpha.2 → 3.0.0

package/lib/corePlugins.js

@@ -16,6 +16,7 @@ var _isPlainObject = _interopRequireDefault(require("./util/isPlainObject"));
 var _transformThemeValue = _interopRequireDefault(require("./util/transformThemeValue"));
 var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
+var _normalizeScreens = require("./util/normalizeScreens");
 var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -58,6 +59,7 @@ let variantPlugins = {
             '&::selection'
         ]);
         addVariant('file', '&::file-selector-button');
+        addVariant('placeholder', '&::placeholder');
         addVariant('before', ({ container  })=>{
             container.walkRules((rule)=>{
                 let foundContent = false;
@@ -197,15 +199,18 @@ let variantPlugins = {
         addVariant('print', '@media print');
     },
     screenVariants: ({ theme , addVariant  })=>{
-        for(let screen in theme('screens')){
-            let size = theme('screens')[screen];
-            let query = (0, _buildMediaQuery).default(size);
-            addVariant(screen, `@media ${query}`);
+        for (let screen of (0, _normalizeScreens).normalizeScreens(theme('screens'))){
+            let query = (0, _buildMediaQuery).default(screen);
+            addVariant(screen.name, `@media ${query}`);
         }
+    },
+    orientationVariants: ({ addVariant  })=>{
+        addVariant('portrait', '@media (orientation: portrait)');
+        addVariant('landscape', '@media (orientation: landscape)');
     }
 };
 exports.variantPlugins = variantPlugins;
-let corePlugins1 = {
+let corePlugins = {
     preflight: ({ addBase  })=>{
         let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8'));
         addBase([
@@ -216,27 +221,11 @@ let corePlugins1 = {
         ]);
     },
     container: (()=>{
-        function extractMinWidths(breakpoints1) {
-            return Object.values(breakpoints1 !== null && breakpoints1 !== void 0 ? breakpoints1 : {
-            }).flatMap((breakpoints)=>{
-                if (typeof breakpoints === 'string') {
-                    breakpoints = {
-                        min: breakpoints
-                    };
-                }
-                if (!Array.isArray(breakpoints)) {
-                    breakpoints = [
-                        breakpoints
-                    ];
-                }
-                return breakpoints.filter((breakpoint)=>{
-                    var ref;
-                    return (breakpoint === null || breakpoint === void 0 ? void 0 : (ref = breakpoint.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(breakpoint, 'min')) || (breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.hasOwnProperty('min-width'));
-                }).map((breakpoint)=>{
-                    var ref;
-                    return (ref = breakpoint['min-width']) !== null && ref !== void 0 ? ref : breakpoint.min;
-                });
-            });
+        function extractMinWidths(breakpoints = []) {
+            return breakpoints.flatMap((breakpoint1)=>breakpoint1.values.map((breakpoint)=>breakpoint.min
+                )
+            ).filter((v)=>v !== undefined
+            );
         }
         function mapMinWidthsToPadding(minWidths, screens, paddings) {
             if (typeof paddings === 'undefined') {
@@ -260,25 +249,25 @@ let corePlugins1 = {
                 });
             }
             for (let minWidth of minWidths){
-                for (let [screen, value] of Object.entries(screens)){
-                    let screenMinWidth = typeof value === 'object' && value !== null ? value.min || value['min-width'] : value;
-                    if (`${screenMinWidth}` === `${minWidth}`) {
-                        mapping.push({
-                            screen,
-                            minWidth,
-                            padding: paddings[screen]
-                        });
+                for (let screen of screens){
+                    for (let { min  } of screen.values){
+                        if (min === minWidth) {
+                            mapping.push({
+                                minWidth,
+                                padding: paddings[screen.name]
+                            });
+                        }
                     }
                 }
             }
             return mapping;
         }
         return function({ addComponents , theme  }) {
-            let screens = theme('container.screens', theme('screens'));
+            let screens = (0, _normalizeScreens).normalizeScreens(theme('container.screens', theme('screens')));
             let minWidths = extractMinWidths(screens);
             let paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'));
             let generatePaddingFor = (minWidth)=>{
-                let paddingConfig = paddings.find((padding)=>`${padding.minWidth}` === `${minWidth}`
+                let paddingConfig = paddings.find((padding)=>padding.minWidth === minWidth
                 );
                 if (!paddingConfig) {
                     return {
@@ -922,7 +911,9 @@ let corePlugins1 = {
                 ], 
             ], 
         ], 
-    ]),
+    ], {
+        supportsNegativeValues: true
+    }),
     transform: ({ addBase , addUtilities  })=>{
         addBase({
             '@defaults transform': {
@@ -1010,7 +1001,15 @@ let corePlugins1 = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('cursor'),
-    touchAction: ({ addUtilities  })=>{
+    touchAction: ({ addBase , addUtilities  })=>{
+        addBase({
+            '@defaults touch-action': {
+                '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
+            }
+        });
         addUtilities({
             '.touch-auto': {
                 'touch-action': 'auto'
@@ -1019,25 +1018,46 @@ let corePlugins1 = {
                 'touch-action': 'none'
             },
             '.touch-pan-x': {
-                'touch-action': 'pan-x'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-x',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-left': {
-                'touch-action': 'pan-left'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-left',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-right': {
-                'touch-action': 'pan-right'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-right',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-y': {
-                'touch-action': 'pan-y'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-y',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-up': {
-                'touch-action': 'pan-up'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-up',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-down': {
-                'touch-action': 'pan-down'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-down',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pinch-zoom': {
-                'touch-action': 'pinch-zoom'
+                '@defaults touch-action': {
+                },
+                '--tw-pinch-zoom': 'pinch-zoom',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-manipulation': {
                 'touch-action': 'manipulation'
@@ -1661,10 +1681,10 @@ let corePlugins1 = {
             }
         });
     },
-    divideColor: ({ matchUtilities , theme , corePlugins  })=>{
+    divideColor: ({ matchUtilities , theme , corePlugins: corePlugins1  })=>{
         matchUtilities({
             divide: (value)=>{
-                if (!corePlugins('divideOpacity')) {
+                if (!corePlugins1('divideOpacity')) {
                     return {
                         ['& > :not([hidden]) ~ :not([hidden])']: {
                             'border-color': (0, _toColorValue).default(value)
@@ -2075,8 +2095,8 @@ let corePlugins1 = {
             }
         });
     },
-    borderColor: ({ addBase , matchUtilities , theme , corePlugins  })=>{
-        if (!corePlugins('borderOpacity')) {
+    borderColor: ({ addBase , matchUtilities , theme , corePlugins: corePlugins2  })=>{
+        if (!corePlugins2('borderOpacity')) {
             let value = theme('borderColor.DEFAULT', 'currentColor');
             addBase({
                 '@defaults border-width': {
@@ -2094,7 +2114,7 @@ let corePlugins1 = {
         }
         matchUtilities({
             border: (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-color': (0, _toColorValue).default(value)
                     };
@@ -2114,7 +2134,7 @@ let corePlugins1 = {
         });
         matchUtilities({
             'border-x': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value),
                         'border-right-color': (0, _toColorValue).default(value)
@@ -2130,7 +2150,7 @@ let corePlugins1 = {
                 });
             },
             'border-y': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value),
                         'border-bottom-color': (0, _toColorValue).default(value)
@@ -2152,7 +2172,7 @@ let corePlugins1 = {
         });
         matchUtilities({
             'border-t': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value)
                     };
@@ -2164,7 +2184,7 @@ let corePlugins1 = {
                 });
             },
             'border-r': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-right-color': (0, _toColorValue).default(value)
                     };
@@ -2176,7 +2196,7 @@ let corePlugins1 = {
                 });
             },
             'border-b': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-bottom-color': (0, _toColorValue).default(value)
                     };
@@ -2188,7 +2208,7 @@ let corePlugins1 = {
                 });
             },
             'border-l': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value)
                     };
@@ -2213,10 +2233,10 @@ let corePlugins1 = {
             ]
         ], 
     ]),
-    backgroundColor: ({ matchUtilities , theme , corePlugins  })=>{
+    backgroundColor: ({ matchUtilities , theme , corePlugins: corePlugins3  })=>{
         matchUtilities({
             bg: (value)=>{
-                if (!corePlugins('backgroundOpacity')) {
+                if (!corePlugins3('backgroundOpacity')) {
                     return {
                         'background-color': (0, _toColorValue).default(value)
                     };
@@ -2297,6 +2317,12 @@ let corePlugins1 = {
             },
             '.decoration-clone': {
                 'box-decoration-break': 'clone'
+            },
+            '.box-decoration-slice': {
+                'box-decoration-break': 'slice'
+            },
+            '.box-decoration-clone': {
+                'box-decoration-break': 'clone'
             }
         });
     },
@@ -2736,10 +2762,10 @@ let corePlugins1 = {
     ], {
         supportsNegativeValues: true
     }),
-    textColor: ({ matchUtilities , theme , corePlugins  })=>{
+    textColor: ({ matchUtilities , theme , corePlugins: corePlugins4  })=>{
         matchUtilities({
             text: (value)=>{
-                if (!corePlugins('textOpacity')) {
+                if (!corePlugins4('textOpacity')) {
                     return {
                         color: (0, _toColorValue).default(value)
                     };
@@ -2768,6 +2794,9 @@ let corePlugins1 = {
             '.underline': {
                 'text-decoration': 'underline'
             },
+            '.overline': {
+                'text-decoration': 'overline'
+            },
             '.line-through': {
                 'text-decoration': 'line-through'
             },
@@ -2786,11 +2815,55 @@ let corePlugins1 = {
         }, {
             values: (0, _flattenColorPalette).default(theme('textDecorationColor')),
             type: [
-                'color',
-                'any'
+                'color'
             ]
         });
     },
+    textDecorationStyle: ({ addUtilities  })=>{
+        addUtilities({
+            '.decoration-solid': {
+                'text-decoration-style': 'solid'
+            },
+            '.decoration-double': {
+                'text-decoration-style': 'double'
+            },
+            '.decoration-dotted': {
+                'text-decoration-style': 'dotted'
+            },
+            '.decoration-dashed': {
+                'text-decoration-style': 'dashed'
+            },
+            '.decoration-wavy': {
+                'text-decoration-style': 'wavy'
+            }
+        });
+    },
+    textDecorationThickness: (0, _createUtilityPlugin).default('textDecorationThickness', [
+        [
+            'decoration',
+            [
+                'text-decoration-thickness'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
+    textUnderlineOffset: (0, _createUtilityPlugin).default('textUnderlineOffset', [
+        [
+            'underline-offset',
+            [
+                'text-underline-offset'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
     fontSmoothing: ({ addUtilities  })=>{
         addUtilities({
             '.antialiased': {
@@ -2803,10 +2876,10 @@ let corePlugins1 = {
             }
         });
     },
-    placeholderColor: ({ matchUtilities , theme , corePlugins  })=>{
+    placeholderColor: ({ matchUtilities , theme , corePlugins: corePlugins5  })=>{
         matchUtilities({
             placeholder: (value)=>{
-                if (!corePlugins('placeholderOpacity')) {
+                if (!corePlugins5('placeholderOpacity')) {
                     return {
                         '&::placeholder': {
                             color: (0, _toColorValue).default(value)
@@ -3589,4 +3662,4 @@ let corePlugins1 = {
         ], 
     ])
 };
-exports.corePlugins = corePlugins1;
+exports.corePlugins = corePlugins;

package/lib/css/preflight.css

@@ -288,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;

package/lib/lib/detectNesting.js

@@ -6,12 +6,27 @@ exports.default = _default;
 function _default(_context) {
     return (root, result)=>{
         let found = false;
+        root.walkAtRules('tailwind', (node)=>{
+            if (found) return false;
+            if (node.parent && node.parent.type !== 'root') {
+                found = true;
+                node.warn(result, [
+                    'Nested @tailwind rules were detected, but are not supported.',
+                    "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+                    'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy', 
+                ].join('\n'));
+                return false;
+            }
+        });
         root.walkRules((rule)=>{
             if (found) return false;
             rule.walkRules((nestedRule)=>{
                 found = true;
-                nestedRule.warn(result, // TODO: Improve this warning message
-                'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting');
+                nestedRule.warn(result, [
+                    'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+                    'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+                    'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting', 
+                ].join('\n'));
                 return false;
             });
         });

package/lib/lib/evaluateTailwindFunctions.js

@@ -7,6 +7,7 @@ var _dlv = _interopRequireDefault(require("dlv"));
 var _didyoumean = _interopRequireDefault(require("didyoumean"));
 var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 var _toPath = require("../util/toPath");
 function _interopRequireDefault(obj) {
@@ -149,10 +150,13 @@ function _default({ tailwindConfig: config  }) {
         },
         screen: (node, screen)=>{
             screen = screen.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
-            if (config.theme.screens[screen] === undefined) {
+            let screens = (0, _normalizeScreens).normalizeScreens(config.theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen
+            );
+            if (!screenDefinition) {
                 throw node.error(`The '${screen}' screen does not exist in your theme.`);
             }
-            return (0, _buildMediaQuery).default(config.theme.screens[screen]);
+            return (0, _buildMediaQuery).default(screenDefinition);
         }
     };
     return (root)=>{

package/lib/lib/expandApplyAtRules.js

@@ -12,9 +12,9 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function prefix1(context, selector) {
-    let prefix = context.tailwindConfig.prefix;
-    return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
+function prefix(context, selector) {
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
 }
 function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
@@ -156,7 +156,7 @@ function processApply(root, context) {
             }
             for (let applyCandidate of applyCandidates){
                 if (!applyClassCache.has(applyCandidate)) {
-                    if (applyCandidate === prefix1(context, 'group')) {
+                    if (applyCandidate === prefix(context, 'group')) {
                         // TODO: Link to specific documentation page with error code.
                         throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`);
                     }

package/lib/lib/expandTailwindAtRules.js

@@ -46,6 +46,8 @@ const PATTERNS = [
     /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
     /([^<>"'`\s]*[^"'`\s:])/.source
 ].join('|');

package/lib/lib/generateRules.js

@@ -11,6 +11,9 @@ var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
 var _pluginUtils = require("../util/pluginUtils");
 var _log = _interopRequireDefault(require("../util/log"));
 var _formatVariantSelector = require("../util/formatVariantSelector");
+var _nameClass = require("../util/nameClass");
+var _dataTypes = require("../util/dataTypes");
+var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -250,6 +253,31 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+function extractArbitraryProperty(classCandidate, context) {
+    var ref;
+    let [, property, value] = (ref = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && ref !== void 0 ? ref : [];
+    if (value === undefined) {
+        return null;
+    }
+    let normalized = (0, _dataTypes).normalize(value);
+    if (!(0, _isValidArbitraryValue).default(normalized)) {
+        return null;
+    }
+    return [
+        [
+            {
+                sort: context.arbitraryPropertiesSort,
+                layer: 'utilities'
+            },
+            ()=>({
+                    [(0, _nameClass).asClass(classCandidate)]: {
+                        [property]: normalized
+                    }
+                })
+            , 
+        ], 
+    ];
+}
 function* resolveMatchedPlugins(classCandidate, context) {
     if (context.candidateRuleMap.has(classCandidate)) {
         yield [
@@ -257,6 +285,14 @@ function* resolveMatchedPlugins(classCandidate, context) {
             'DEFAULT'
         ];
     }
+    yield* (function*(arbitraryPropertyRule) {
+        if (arbitraryPropertyRule !== null) {
+            yield [
+                arbitraryPropertyRule,
+                'DEFAULT'
+            ];
+        }
+    })(extractArbitraryProperty(classCandidate, context));
     let candidatePrefix = classCandidate;
     let negative = false;
     const twConfigPrefix = context.tailwindConfig.prefix;

package/lib/lib/setupContextUtils.js

@@ -23,6 +23,7 @@ var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
 var _negateValue = _interopRequireDefault(require("../util/negateValue"));
+var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -160,68 +161,6 @@ function withIdentifiers(styles) {
         });
     });
 }
-let matchingBrackets = new Map([
-    [
-        '{',
-        '}'
-    ],
-    [
-        '[',
-        ']'
-    ],
-    [
-        '(',
-        ')'
-    ], 
-]);
-let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
-        v,
-        k
-    ]
-));
-let quotes = new Set([
-    '"',
-    "'",
-    '`'
-]);
-// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
-// values don't count, and brackets inside quotes also don't count.
-//
-// E.g.: w-[this-is]w-[weird-and-invalid]
-// E.g.: w-[this-is\\]w-\\[weird-but-valid]
-// E.g.: content-['this-is-also-valid]-weirdly-enough']
-function isValidArbitraryValue(value) {
-    let stack = [];
-    let inQuotes = false;
-    for(let i = 0; i < value.length; i++){
-        let char = value[i];
-        // Non-escaped quotes allow us to "allow" anything in between
-        if (quotes.has(char) && value[i - 1] !== '\\') {
-            inQuotes = !inQuotes;
-        }
-        if (inQuotes) continue;
-        if (value[i - 1] === '\\') continue; // Escaped
-        if (matchingBrackets.has(char)) {
-            stack.push(char);
-        } else if (inverseMatchingBrackets.has(char)) {
-            let inverse = inverseMatchingBrackets.get(char);
-            // Nothing to pop from, therefore it is unbalanced
-            if (stack.length <= 0) {
-                return false;
-            }
-            // Popped value must match the inverse value, otherwise it is unbalanced
-            if (stack.pop() !== inverse) {
-                return false;
-            }
-        }
-    }
-    // If there is still something on the stack, it is also unbalanced
-    if (stack.length > 0) {
-        return false;
-    }
-    // All good, totally balanced!
-    return true;
-}
 function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv).default(tailwindConfig, path, defaultValue) : tailwindConfig;
@@ -409,7 +348,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     if (!type.includes(coercedType) && !isOnlyPlugin) {
                         return [];
                     }
-                    if (!isValidArbitraryValue(value)) {
+                    if (!(0, _isValidArbitraryValue).default(value)) {
                         return [];
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
@@ -466,7 +405,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                             return [];
                         }
                     }
-                    if (!isValidArbitraryValue(value)) {
+                    if (!(0, _isValidArbitraryValue).default(value)) {
                         return [];
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
@@ -608,7 +547,8 @@ function resolvePlugins(context, root) {
         _corePlugins.variantPlugins['reducedMotionVariants'],
         _corePlugins.variantPlugins['darkVariants'],
         _corePlugins.variantPlugins['printVariant'],
-        _corePlugins.variantPlugins['screenVariants'], 
+        _corePlugins.variantPlugins['screenVariants'],
+        _corePlugins.variantPlugins['orientationVariants'], 
     ];
     return [
         ...corePluginList,
@@ -652,6 +592,9 @@ function registerPlugins(plugins, context) {
         offsets.user, 
     ]);
     let reservedBits = BigInt(highestOffset.toString(2).length);
+    // A number one less than the top range of the highest offset area
+    // so arbitrary properties are always sorted at the end.
+    context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
     context.layerOrder = {
         base: 1n << reservedBits << 0n,
         components: 1n << reservedBits << 1n,