tailwindcss 3.0.0-alpha.2 → 3.0.3

package/lib/css/preflight.css

@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -288,7 +288,9 @@ legend {
 }
 
 ol,
-ul {
+ul,
+li,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -309,7 +311,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/lib/featureFlags.js

@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) {
     };
 }
 let defaults = {
-    optimizeUniversalDefaults: true
+    // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+    // the default.
+    optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false
 };
 let featureFlags = {
     future: [],

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = expandApplyAtRules;
 var _postcss = _interopRequireDefault(require("postcss"));
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
@@ -12,9 +13,21 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function prefix1(context, selector) {
-    let prefix = context.tailwindConfig.prefix;
-    return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
+function containsBase(selector, classCandidateBase, separator) {
+    return (0, _postcssSelectorParser).default((selectors)=>{
+        let contains = false;
+        selectors.walkClasses((classSelector)=>{
+            if (classSelector.value.split(separator).pop() === classCandidateBase) {
+                contains = true;
+                return false;
+            }
+        });
+        return contains;
+    }).transformSync(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){
@@ -127,8 +140,8 @@ function processApply(root, context) {
      */ // TODO: Should we use postcss-selector-parser for this instead?
         function replaceSelector(selector, utilitySelectors, candidate) {
             let needle = `.${(0, _escapeClassName).default(candidate)}`;
-            let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g);
-            return selector.split(/\s*,\s*/g).map((s)=>{
+            let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g);
+            return selector.split(/\s*\,(?![^(]*\))\s*/g).map((s)=>{
                 let replaced = [];
                 for (let utilitySelector of utilitySelectorsList){
                     let replacedSelector = utilitySelector.replace(needle, s);
@@ -156,7 +169,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`);
                     }
@@ -173,7 +186,11 @@ function processApply(root, context) {
         for (const [parent, candidates] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
+                let base = applyCandidate.split(context.tailwindConfig.separator).pop();
                 for (let [meta, node] of rules){
+                    if (containsBase(parent.selector, base, context.tailwindConfig.separator) && containsBase(node.selector, base, context.tailwindConfig.separator)) {
+                        throw node.error(`Circular dependency detected when using: \`@apply ${applyCandidate}\``);
+                    }
                     let root = _postcss.default.root({
                         nodes: [
                             node.clone()

package/lib/lib/expandTailwindAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = expandTailwindAtRules;
+exports.DEFAULTS_LAYER = void 0;
 var _quickLru = _interopRequireDefault(require("quick-lru"));
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
@@ -46,6 +47,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('|');
@@ -110,6 +113,7 @@ function buildStylesheet(rules, context) {
     );
     let returnValue = {
         base: new Set(),
+        defaults: new Set(),
         components: new Set(),
         utilities: new Set(),
         variants: new Set(),
@@ -132,6 +136,10 @@ function buildStylesheet(rules, context) {
             returnValue.base.add(rule);
             continue;
         }
+        if (sort & context.layerOrder.defaults) {
+            returnValue.defaults.add(rule);
+            continue;
+        }
         if (sort & context.layerOrder.components) {
             returnValue.components.add(rule);
             continue;
@@ -147,6 +155,8 @@ function buildStylesheet(rules, context) {
     }
     return returnValue;
 }
+const DEFAULTS_LAYER = Symbol('defaults-layer');
+exports.DEFAULTS_LAYER = DEFAULTS_LAYER;
 function expandTailwindAtRules(context) {
     return (root)=>{
         let layerNodes = {
@@ -197,9 +207,17 @@ function expandTailwindAtRules(context) {
             ], context);
         }
         env.DEBUG && console.timeEnd('Build stylesheet');
-        let { base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
+        let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
         // ---
         // Replace any Tailwind directives with generated CSS
+        // @defaults rules are unconditionally added first to ensure that
+        // using any utility that relies on defaults will work even when
+        // compiled in an isolated environment like CSS modules
+        if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
+            root.prepend((0, _cloneNodes).default([
+                ...defaultNodes
+            ], root.source));
+        }
         if (layerNodes.base) {
             layerNodes.base.before((0, _cloneNodes).default([
                 ...baseNodes

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,49 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
+function isValidPropName(name) {
+    return IS_VALID_PROPERTY_NAME.test(name);
+}
+function isParsableCssValue(property, value) {
+    try {
+        _postcss.default.parse(`a{${property}:${value}}`).toResult();
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
+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;
+    }
+    if (!isValidPropName(property)) {
+        return null;
+    }
+    if (!(0, _isValidArbitraryValue).default(value)) {
+        return null;
+    }
+    let normalized = (0, _dataTypes).normalize(value);
+    if (!isParsableCssValue(property, 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 +303,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/resolveDefaultsAtRules.js

@@ -79,7 +79,7 @@ function extractElementSelector(selector) {
 function resolveDefaultsAtRules({ tailwindConfig  }) {
     return (root)=>{
         let variableNodeMap = new Map();
-        let universals = new Set();
+        /** @type {Set<import('postcss').AtRule>} */ let universals = new Set();
         root.walkAtRules('defaults', (rule)=>{
             if (rule.nodes && rule.nodes.length > 0) {
                 universals.add(rule);
@@ -93,32 +93,46 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
             rule.remove();
         });
         for (let universal of universals){
-            let selectors = new Set();
+            /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
             var ref;
             let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
             for (let rule of rules){
                 for (let selector of extractElementSelector(rule.selector)){
+                    // If selector contains a vendor prefix after a pseudo element or class,
+                    // we consider them separately because merging the declarations into
+                    // a single rule will cause browsers that do not understand the
+                    // vendor prefix to throw out the whole rule
+                    let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__';
+                    var ref1;
+                    let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
+                    selectorGroups.set(selectorGroupName, selectors);
                     selectors.add(selector);
                 }
             }
-            if (selectors.size === 0) {
+            if (selectorGroups.size === 0) {
                 universal.remove();
                 continue;
             }
-            let universalRule = _postcss.default.rule();
             if ((0, _featureFlags).flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-                universalRule.selectors = [
-                    ...selectors
-                ];
+                for (let [, selectors] of selectorGroups){
+                    let universalRule = _postcss.default.rule();
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()
+                    ));
+                    universal.before(universalRule);
+                }
             } else {
+                let universalRule = _postcss.default.rule();
                 universalRule.selectors = [
                     '*',
                     '::before',
                     '::after'
                 ];
+                universalRule.append(universal.nodes);
+                universal.before(universalRule);
             }
-            universalRule.append(universal.nodes);
-            universal.before(universalRule);
             universal.remove();
         }
     };

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;
@@ -332,6 +271,29 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 ]);
             }
         },
+        /**
+     * @param {string} group
+     * @param {Record<string, string | string[]>} declarations
+     */ addDefaults (group, declarations) {
+            const groups = {
+                [`@defaults ${group}`]: declarations
+            };
+            for (let [identifier, rule] of withIdentifiers(groups)){
+                let prefixedIdentifier = prefixIdentifier(identifier, {
+                });
+                let offset = offsets.base++;
+                if (!context.candidateRuleMap.has(prefixedIdentifier)) {
+                    context.candidateRuleMap.set(prefixedIdentifier, []);
+                }
+                context.candidateRuleMap.get(prefixedIdentifier).push([
+                    {
+                        sort: offset,
+                        layer: 'defaults'
+                    },
+                    rule
+                ]);
+            }
+        },
         addComponents (components, options) {
             let defaultOptions = {
                 respectPrefix: true,
@@ -409,7 +371,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 +428,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 +570,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,
@@ -622,6 +585,7 @@ function registerPlugins(plugins, context) {
     let variantList = [];
     let variantMap = new Map();
     let offsets = {
+        defaults: 0n,
         base: 0n,
         components: 0n,
         utilities: 0n,
@@ -647,18 +611,23 @@ function registerPlugins(plugins, context) {
         )
     )([
         offsets.base,
+        offsets.defaults,
         offsets.components,
         offsets.utilities,
         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,
-        utilities: 1n << reservedBits << 2n,
-        user: 1n << reservedBits << 3n
+        defaults: 1n << reservedBits << 0n,
+        base: 1n << reservedBits << 1n,
+        components: 1n << reservedBits << 2n,
+        utilities: 1n << reservedBits << 3n,
+        user: 1n << reservedBits << 4n
     };
-    reservedBits += 4n;
+    reservedBits += 5n;
     let offset = 0;
     context.variantOrder = new Map(variantList.map((variant, i)=>{
         let variantFunctions = variantMap.get(variant).length;
@@ -709,9 +678,17 @@ function registerPlugins(plugins, context) {
                 let utils = Array.isArray(util) ? (()=>{
                     let [utilName, options] = util;
                     var ref;
-                    return Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
+                    let classes = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
                     }).map((value)=>(0, _nameClass).formatClass(utilName, value)
                     );
+                    if (options === null || options === void 0 ? void 0 : options.supportsNegativeValues) {
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>'-' + cls
+                            )
+                        ];
+                    }
+                    return classes;
                 })() : [
                     util
                 ];

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(', ');
 }

package/lib/util/dataTypes.js

@@ -19,6 +19,12 @@ exports.absoluteSize = absoluteSize;
 exports.relativeSize = relativeSize;
 var _color = require("./color");
 var _parseBoxShadowValue = require("./parseBoxShadowValue");
+let cssFunctions = [
+    'min',
+    'max',
+    'clamp',
+    'calc'
+];
 // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
 let COMMA = /,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 ;
@@ -49,10 +55,12 @@ function url(value) {
     return value.startsWith('url(');
 }
 function number(value) {
-    return !isNaN(Number(value));
+    return !isNaN(Number(value)) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?`).test(value)
+    );
 }
 function percentage(value) {
-    return /%$/g.test(value) || /^calc\(.+?%\)/g.test(value);
+    return /%$/g.test(value) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?%`).test(value)
+    );
 }
 let lengthUnits = [
     'cm',
@@ -74,7 +82,10 @@ let lengthUnits = [
 ];
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`;
 function length(value) {
-    return new RegExp(`${lengthUnitsPattern}$`).test(value) || new RegExp(`^calc\\(.+?${lengthUnitsPattern}`).test(value);
+    return value.split(UNDERSCORE).every((part)=>{
+        return part === '0' || new RegExp(`${lengthUnitsPattern}$`).test(part) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(part)
+        );
+    });
 }
 let lineWidths = new Set([
     'thin',