tailwindcss 0.0.0-insiders.a6bcd22 → 0.0.0-insiders.a6f7a72

package/CHANGELOG.md

@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Enforce the order of some variants (like `before` and `after`) ([#6018](https://github.com/tailwindlabs/tailwindcss/pull/6018))
+
+### Added
+
+- Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
+- Add tuple syntax for configuring screens while guaranteeing order ([#5956](https://github.com/tailwindlabs/tailwindcss/pull/5956))
+- Add composable `touch-action` utilities ([#6115](https://github.com/tailwindlabs/tailwindcss/pull/6115))
+- Add support for "arbitrary properties" ([#6161](https://github.com/tailwindlabs/tailwindcss/pull/6161))
+- Add `portrait` and `landscape` variants ([#6046](https://github.com/tailwindlabs/tailwindcss/pull/6046))
+- Add `text-decoration-style`, `text-decoration-thickness`, and `text-underline-offset` utilities ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
+- Add `menu` reset to preflight ([#6213](https://github.com/tailwindlabs/tailwindcss/pull/6213))
+- Allow `0` as a valid `length` value ([#6233](https://github.com/tailwindlabs/tailwindcss/pull/6233), [#6259](https://github.com/tailwindlabs/tailwindcss/pull/6259))
+- Add CSS functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
+- Add CSS functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
+- Support negative values for `scale-*` utilities ([c48e629](https://github.com/tailwindlabs/tailwindcss/commit/c48e629955585ad18dadba9f470fda59cc448ab7))
+- Improve `length` data type, by validating each value individually ([#6283](https://github.com/tailwindlabs/tailwindcss/pull/6283))
+
+### Changed
+
+- Deprecate `decoration-slice` and `decoration-break` in favor `box-decoration-slice` and `box-decoration-break` _(non-breaking)_ ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
+
+## [3.0.0-alpha.2] - 2021-11-08
+
 ### Changed
 
 - Don't use pointer cursor on disabled buttons by default ([#5772](https://github.com/tailwindlabs/tailwindcss/pull/5772))
@@ -1653,7 +1678,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...HEAD
+[3.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...v3.0.0-alpha.2
 [3.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.19...v3.0.0-alpha.1
 [2.2.19]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.18...v2.2.19
 [2.2.18]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.17...v2.2.18

package/lib/corePluginList.js

@@ -126,6 +126,9 @@ var _default = [
     "textOpacity",
     "textDecoration",
     "textDecorationColor",
+    "textDecorationStyle",
+    "textDecorationThickness",
+    "textUnderlineOffset",
     "fontSmoothing",
     "placeholderColor",
     "placeholderOpacity",

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,11 +199,14 @@ 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;
@@ -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'
@@ -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'
             }
         });
     },
@@ -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': {

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/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,

package/lib/lib/substituteScreenAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = _default;
+var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -12,13 +13,15 @@ function _interopRequireDefault(obj) {
 function _default({ tailwindConfig: { theme  }  }) {
     return function(css) {
         css.walkAtRules('screen', (atRule)=>{
-            var ref, ref1;
-            const screen = atRule.params;
-            if (!((ref = theme.screens) === null || ref === void 0 ? void 0 : (ref1 = ref.hasOwnProperty) === null || ref1 === void 0 ? void 0 : ref1.call(ref, screen))) {
+            let screen = atRule.params;
+            let screens = (0, _normalizeScreens).normalizeScreens(theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen
+            );
+            if (!screenDefinition) {
                 throw atRule.error(`No \`${screen}\` screen found.`);
             }
             atRule.name = 'media';
-            atRule.params = (0, _buildMediaQuery).default(theme.screens[screen]);
+            atRule.params = (0, _buildMediaQuery).default(screenDefinition);
         });
     };
 }

package/lib/util/buildMediaQuery.js

@@ -4,28 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = buildMediaQuery;
 function buildMediaQuery(screens) {
-    if (typeof screens === 'string') {
-        screens = {
-            min: screens
-        };
-    }
-    if (!Array.isArray(screens)) {
-        screens = [
-            screens
-        ];
-    }
-    return screens.map((screen)=>{
-        var ref;
-        if (screen === null || screen === void 0 ? void 0 : (ref = screen.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(screen, 'raw')) {
-            return screen.raw;
-        }
-        return Object.entries(screen).map(([feature, value])=>{
-            var _feature;
-            feature = (_feature = ({
-                min: 'min-width',
-                max: 'max-width'
-            })[feature]) !== null && _feature !== void 0 ? _feature : feature;
-            return `(${feature}: ${value})`;
-        }).join(' and ');
-    }).join(', ');
+    screens = Array.isArray(screens) ? screens : [
+        screens
+    ];
+    return screens.map((screen1)=>screen1.values.map((screen)=>{
+            if (screen.raw !== undefined) {
+                return screen.raw;
+            }
+            return [
+                screen.min && `(min-width: ${screen.min})`,
+                screen.max && `(max-width: ${screen.max})`, 
+            ].filter(Boolean).join(' and ');
+        })
+    ).join(', ');
 }