tailwindcss 3.1.8 → 3.2.1

package/lib/lib/setupTrackingContext.js

@@ -11,18 +11,15 @@ Object.defineProperty(exports, // DISABLE_TOUCH = TRUE
     get: ()=>setupTrackingContext
 });
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
-const _path = /*#__PURE__*/ _interopRequireDefault(require("path"));
-const _fastGlob = /*#__PURE__*/ _interopRequireDefault(require("fast-glob"));
 const _quickLru = /*#__PURE__*/ _interopRequireDefault(require("quick-lru"));
-const _normalizePath = /*#__PURE__*/ _interopRequireDefault(require("normalize-path"));
 const _hashConfig = /*#__PURE__*/ _interopRequireDefault(require("../util/hashConfig"));
 const _getModuleDependencies = /*#__PURE__*/ _interopRequireDefault(require("../lib/getModuleDependencies"));
 const _resolveConfig = /*#__PURE__*/ _interopRequireDefault(require("../public/resolve-config"));
 const _resolveConfigPath = /*#__PURE__*/ _interopRequireDefault(require("../util/resolveConfigPath"));
-const _sharedState = require("./sharedState");
 const _setupContextUtils = require("./setupContextUtils");
 const _parseDependency = /*#__PURE__*/ _interopRequireDefault(require("../util/parseDependency"));
 const _validateConfigJs = require("../util/validateConfig.js");
+const _contentJs = require("./content.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -36,7 +33,7 @@ function getCandidateFiles(context, tailwindConfig) {
     if (candidateFilesCache.has(context)) {
         return candidateFilesCache.get(context);
     }
-    let candidateFiles = tailwindConfig.content.files.filter((item)=>typeof item === "string").map((contentPath)=>(0, _normalizePath.default)(contentPath));
+    let candidateFiles = (0, _contentJs.parseCandidateFiles)(context, tailwindConfig);
     return candidateFilesCache.set(context, candidateFiles).get(context);
 }
 // Get the config object based on a path
@@ -93,36 +90,6 @@ function getTailwindConfig(configOrPath) {
         []
     ];
 }
-function resolvedChangedContent(context, candidateFiles, fileModifiedMap) {
-    let changedContent = context.tailwindConfig.content.files.filter((item)=>typeof item.raw === "string").map(({ raw , extension ="html"  })=>({
-            content: raw,
-            extension
-        }));
-    for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)){
-        let content = _fs.default.readFileSync(changedFile, "utf8");
-        let extension = _path.default.extname(changedFile).slice(1);
-        changedContent.push({
-            content,
-            extension
-        });
-    }
-    return changedContent;
-}
-function resolveChangedFiles(candidateFiles, fileModifiedMap) {
-    let changedFiles = new Set();
-    _sharedState.env.DEBUG && console.time("Finding changed files");
-    let files = _fastGlob.default.sync(candidateFiles);
-    for (let file of files){
-        let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity;
-        let modified = _fs.default.statSync(file).mtimeMs;
-        if (modified > prevModified) {
-            changedFiles.add(file);
-            fileModifiedMap.set(file, modified);
-        }
-    }
-    _sharedState.env.DEBUG && console.timeEnd("Finding changed files");
-    return changedFiles;
-}
 function setupTrackingContext(configOrPath) {
     return ({ tailwindDirectives , registerDependency  })=>{
         return (root, result)=>{
@@ -154,13 +121,12 @@ function setupTrackingContext(configOrPath) {
             if (tailwindDirectives.size > 0) {
                 let fileModifiedMap = (0, _setupContextUtils.getFileModifiedMap)(context);
                 // Add template paths as postcss dependencies.
-                for (let fileOrGlob of candidateFiles){
-                    let dependency = (0, _parseDependency.default)(fileOrGlob);
-                    if (dependency) {
+                for (let contentPath of candidateFiles){
+                    for (let dependency of (0, _parseDependency.default)(contentPath)){
                         registerDependency(dependency);
                     }
                 }
-                for (let changedContent of resolvedChangedContent(context, candidateFiles, fileModifiedMap)){
+                for (let changedContent of (0, _contentJs.resolvedChangedContent)(context, candidateFiles, fileModifiedMap)){
                     context.changedContent.push(changedContent);
                 }
             }

package/lib/lib/sharedState.js

@@ -15,6 +15,7 @@ _export(exports, {
     contextSourcesMap: ()=>contextSourcesMap,
     sourceHashMap: ()=>sourceHashMap,
     NOT_ON_DEMAND: ()=>NOT_ON_DEMAND,
+    NONE: ()=>NONE,
     resolveDebug: ()=>resolveDebug
 });
 const env = {
@@ -26,6 +27,7 @@ const configContextMap = new Map();
 const contextSourcesMap = new Map();
 const sourceHashMap = new Map();
 const NOT_ON_DEMAND = new String("*");
+const NONE = Symbol("__NONE__");
 function resolveDebug(debug) {
     if (debug === undefined) {
         return false;

package/lib/public/colors.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) {
 function warn({ version , from , to  }) {
     _log.default.warn(`${from}-color-renamed`, [
         `As of Tailwind CSS ${version}, \`${from}\` has been renamed to \`${to}\`.`,
-        "Update your configuration file to silence this warning.", 
+        "Update your configuration file to silence this warning."
     ]);
 }
 const _default = {

package/lib/util/buildMediaQuery.js

@@ -10,13 +10,16 @@ function buildMediaQuery(screens) {
     screens = Array.isArray(screens) ? screens : [
         screens
     ];
-    return screens.map((screen)=>screen.values.map((screen)=>{
+    return screens.map((screen)=>{
+        let values = screen.values.map((screen)=>{
             if (screen.raw !== undefined) {
                 return screen.raw;
             }
             return [
                 screen.min && `(min-width: ${screen.min})`,
-                screen.max && `(max-width: ${screen.max})`, 
+                screen.max && `(max-width: ${screen.max})`
             ].filter(Boolean).join(" and ");
-        })).join(", ");
+        });
+        return screen.not ? `not all and ${values}` : values;
+    }).join(", ");
 }

package/lib/util/configurePlugins.js

@@ -15,7 +15,7 @@ function _default(pluginConfig, plugins) {
             return pluginConfig !== false && pluginConfig[pluginName] !== false;
         }).concat(Object.keys(pluginConfig).filter((pluginName)=>{
             return pluginConfig[pluginName] !== false;
-        }))), 
+        })))
     ];
     return pluginNames;
 }

package/lib/util/dataTypes.js

@@ -27,6 +27,7 @@ _export(exports, {
 });
 const _color = require("./color");
 const _parseBoxShadowValue = require("./parseBoxShadowValue");
+const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
 let cssFunctions = [
     "min",
     "max",
@@ -34,10 +35,9 @@ let cssFunctions = [
     "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.
-;
-let UNDERSCORE = /_(?![^(]*\))/g // Underscore separator that is not located between brackets. E.g.: `rgba(255,_255,_255)_black` these don't count.
-;
+function isCSSFunction(value) {
+    return cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.*\\)`).test(value));
+}
 function normalize(value, isRoot = true) {
     // Keep raw strings if it starts with `url(`
     if (value.includes("url(")) {
@@ -65,12 +65,10 @@ function url(value) {
     return value.startsWith("url(");
 }
 function number(value) {
-    return !isNaN(Number(value)) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?`).test(value));
+    return !isNaN(Number(value)) || isCSSFunction(value);
 }
 function percentage(value) {
-    return value.split(UNDERSCORE).every((part)=>{
-        return /%$/g.test(part) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?%`).test(part));
-    });
+    return value.endsWith("%") && number(value.slice(0, -1)) || isCSSFunction(value);
 }
 let lengthUnits = [
     "cm",
@@ -88,13 +86,11 @@ let lengthUnits = [
     "vw",
     "vh",
     "vmin",
-    "vmax", 
+    "vmax"
 ];
 let lengthUnitsPattern = `(?:${lengthUnits.join("|")})`;
 function length(value) {
-    return value.split(UNDERSCORE).every((part)=>{
-        return part === "0" || new RegExp(`${lengthUnitsPattern}$`).test(part) || cssFunctions.some((fn)=>new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(part));
-    });
+    return value === "0" || new RegExp(`^[+-]?[0-9]*\.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`).test(value) || isCSSFunction(value);
 }
 let lineWidths = new Set([
     "thin",
@@ -115,7 +111,7 @@ function shadow(value) {
 }
 function color(value) {
     let colors = 0;
-    let result = value.split(UNDERSCORE).every((part)=>{
+    let result = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(value, "_").every((part)=>{
         part = normalize(part);
         if (part.startsWith("var(")) return true;
         if ((0, _color.parseColor)(part, {
@@ -128,7 +124,7 @@ function color(value) {
 }
 function image(value) {
     let images = 0;
-    let result = value.split(COMMA).every((part)=>{
+    let result = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(value, ",").every((part)=>{
         part = normalize(part);
         if (part.startsWith("var(")) return true;
         if (url(part) || gradient(part) || [
@@ -150,7 +146,7 @@ let gradientTypes = new Set([
     "radial-gradient",
     "repeating-linear-gradient",
     "repeating-radial-gradient",
-    "conic-gradient", 
+    "conic-gradient"
 ]);
 function gradient(value) {
     value = normalize(value);
@@ -170,7 +166,7 @@ let validPositions = new Set([
 ]);
 function position(value) {
     let positions = 0;
-    let result = value.split(UNDERSCORE).every((part)=>{
+    let result = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(value, "_").every((part)=>{
         part = normalize(part);
         if (part.startsWith("var(")) return true;
         if (validPositions.has(part) || length(part) || percentage(part)) {
@@ -184,7 +180,7 @@ function position(value) {
 }
 function familyName(value) {
     let fonts = 0;
-    let result = value.split(COMMA).every((part)=>{
+    let result = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(value, ",").every((part)=>{
         part = normalize(part);
         if (part.startsWith("var(")) return true;
         // If it contains spaces, then it should be quoted
@@ -216,7 +212,7 @@ let genericNames = new Set([
     "ui-rounded",
     "math",
     "emoji",
-    "fangsong", 
+    "fangsong"
 ]);
 function genericName(value) {
     return genericNames.has(value);
@@ -229,7 +225,7 @@ let absoluteSizes = new Set([
     "large",
     "x-large",
     "x-large",
-    "xxx-large", 
+    "xxx-large"
 ]);
 function absoluteSize(value) {
     return absoluteSizes.has(value);

package/lib/util/formatVariantSelector.js

@@ -45,6 +45,67 @@ function formatVariantSelector(current, ...others) {
     }
     return current;
 }
+/**
+ * Given any node in a selector this gets the "simple" selector it's a part of
+ * A simple selector is just a list of nodes without any combinators
+ * Technically :is(), :not(), :has(), etc… can have combinators but those are nested
+ * inside the relevant node and won't be picked up so they're fine to ignore
+ *
+ * @param {import('postcss-selector-parser').Node} node
+ * @returns {import('postcss-selector-parser').Node[]}
+ **/ function simpleSelectorForNode(node) {
+    /** @type {import('postcss-selector-parser').Node[]} */ let nodes = [];
+    // Walk backwards until we hit a combinator node (or the start)
+    while(node.prev() && node.prev().type !== "combinator"){
+        node = node.prev();
+    }
+    // Now record all non-combinator nodes until we hit one (or the end)
+    while(node && node.type !== "combinator"){
+        nodes.push(node);
+        node = node.next();
+    }
+    return nodes;
+}
+/**
+ * Resorts the nodes in a selector to ensure they're in the correct order
+ * Tags go before classes, and pseudo classes go after classes
+ *
+ * @param {import('postcss-selector-parser').Selector} sel
+ * @returns {import('postcss-selector-parser').Selector}
+ **/ function resortSelector(sel) {
+    sel.sort((a, b)=>{
+        if (a.type === "tag" && b.type === "class") {
+            return -1;
+        } else if (a.type === "class" && b.type === "tag") {
+            return 1;
+        } else if (a.type === "class" && b.type === "pseudo" && b.value !== ":merge") {
+            return -1;
+        } else if (a.type === "pseudo" && a.value !== ":merge" && b.type === "class") {
+            return 1;
+        }
+        return sel.index(a) - sel.index(b);
+    });
+    return sel;
+}
+function eliminateIrrelevantSelectors(sel, base) {
+    let hasClassesMatchingCandidate = false;
+    sel.walk((child)=>{
+        if (child.type === "class" && child.value === base) {
+            hasClassesMatchingCandidate = true;
+            return false // Stop walking
+            ;
+        }
+    });
+    if (!hasClassesMatchingCandidate) {
+        sel.remove();
+    }
+// We do NOT recursively eliminate sub selectors that don't have the base class
+// as this is NOT a safe operation. For example, if we have:
+// `.space-x-2 > :not([hidden]) ~ :not([hidden])`
+// We cannot remove the [hidden] from the :not() because it would change the
+// meaning of the selector.
+// TODO: Can we do this for :matches, :is, and :where?
+}
 var ref1;
 function finalizeSelector(format, { selector , candidate , context , isArbitraryVariant , // Split by the separator, but ignore the separator inside square brackets:
 //
@@ -65,12 +126,7 @@ base =candidate.split(new RegExp(`\\${(ref1 = context === null || context === vo
     // Remove extraneous selectors that do not include the base class/candidate being matched against
     // For example if we have a utility defined `.a, .b { color: red}`
     // And the formatted variant is sm:b then we want the final selector to be `.sm\:b` and not `.a, .sm\:b`
-    ast.each((node)=>{
-        let hasClassesMatchingCandidate = node.some((n)=>n.type === "class" && n.value === base);
-        if (!hasClassesMatchingCandidate) {
-            node.remove();
-        }
-    });
+    ast.each((sel)=>eliminateIrrelevantSelectors(sel, base));
     // Normalize escaped classes, e.g.:
     //
     // The idea would be to replace the escaped `base` in the selector with the
@@ -87,12 +143,40 @@ base =candidate.split(new RegExp(`\\${(ref1 = context === null || context === vo
             node.raws.value = (0, _escapeClassName.default)((0, _unesc.default)(node.raws.value));
         }
     });
+    let simpleStart = _postcssSelectorParser.default.comment({
+        value: "/*__simple__*/"
+    });
+    let simpleEnd = _postcssSelectorParser.default.comment({
+        value: "/*__simple__*/"
+    });
     // We can safely replace the escaped base now, since the `base` section is
     // now in a normalized escaped value.
     ast.walkClasses((node)=>{
-        if (node.value === base) {
-            node.replaceWith(...formatAst.nodes);
+        if (node.value !== base) {
+            return;
+        }
+        let parent = node.parent;
+        let formatNodes = formatAst.nodes[0].nodes;
+        // Perf optimization: if the parent is a single class we can just replace it and be done
+        if (parent.nodes.length === 1) {
+            node.replaceWith(...formatNodes);
+            return;
+        }
+        let simpleSelector = simpleSelectorForNode(node);
+        parent.insertBefore(simpleSelector[0], simpleStart);
+        parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd);
+        for (let child of formatNodes){
+            parent.insertBefore(simpleSelector[0], child);
         }
+        node.remove();
+        // Re-sort the simple selector to ensure it's in the correct order
+        simpleSelector = simpleSelectorForNode(simpleStart);
+        let firstNode = parent.index(simpleStart);
+        parent.nodes.splice(firstNode, simpleSelector.length, ...resortSelector(_postcssSelectorParser.default.selector({
+            nodes: simpleSelector
+        })).nodes);
+        simpleStart.remove();
+        simpleEnd.remove();
     });
     // This will make sure to move pseudo's to the correct spot (the end for
     // pseudo elements) because otherwise the selector will never work

package/lib/util/getAllConfigs.js

@@ -22,9 +22,20 @@ function getAllConfigs(config) {
         // Add experimental configs here...
         respectDefaultRingColorOpacity: {
             theme: {
-                ringColor: {
-                    DEFAULT: "#3b82f67f"
-                }
+                ringColor: ({ theme  })=>({
+                        DEFAULT: "#3b82f67f",
+                        ...theme("colors")
+                    })
+            }
+        },
+        disableColorOpacityUtilitiesByDefault: {
+            corePlugins: {
+                backgroundOpacity: false,
+                borderOpacity: false,
+                divideOpacity: false,
+                placeholderOpacity: false,
+                ringOpacity: false,
+                textOpacity: false
             }
         }
     };

package/lib/util/isValidArbitraryValue.js

@@ -24,7 +24,7 @@ let matchingBrackets = new Map([
     [
         "(",
         ")"
-    ], 
+    ]
 ]);
 let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
         v,

package/lib/util/nameClass.js

@@ -36,5 +36,8 @@ function formatClass(classPrefix, key) {
     if (key.startsWith("-")) {
         return `-${classPrefix}${key}`;
     }
+    if (key.startsWith("/")) {
+        return `${classPrefix}${key}`;
+    }
     return `${classPrefix}-${key}`;
 }

package/lib/util/negateValue.js

@@ -15,7 +15,20 @@ function _default(value) {
     if (/^[+-]?(\d+|\d*\.\d+)(e[+-]?\d+)?(%|\w+)?$/.test(value)) {
         return value.replace(/^[+-]?/, (sign)=>sign === "-" ? "" : "-");
     }
-    if (value.includes("var(") || value.includes("calc(")) {
-        return `calc(${value} * -1)`;
+    // What functions we support negating numeric values for
+    // var() isn't inherently a numeric function but we support it anyway
+    // The trigonometric functions are omitted because you'll need to use calc(…) with them _anyway_
+    // to produce generally useful results and that will be covered already
+    let numericFunctions = [
+        "var",
+        "calc",
+        "min",
+        "max",
+        "clamp"
+    ];
+    for (const fn of numericFunctions){
+        if (value.includes(`${fn}(`)) {
+            return `calc(${value} * -1)`;
+        }
     }
 }

package/lib/util/normalizeConfig.js

@@ -91,9 +91,10 @@ function normalizeConfig(config) {
         }
         // When `config.content` is an object
         if (typeof config.content === "object" && config.content !== null) {
-            // Only `files`, `extract` and `transform` can exist in `config.content`
+            // Only `files`, `relative`, `extract`, and `transform` can exist in `config.content`
             if (Object.keys(config.content).some((key)=>![
                     "files",
+                    "relative",
                     "extract",
                     "transform"
                 ].includes(key))) {
@@ -135,6 +136,10 @@ function normalizeConfig(config) {
                 } else if (!(config.content.transform === undefined || typeof config.content.transform === "function")) {
                     return false;
                 }
+                // `config.content.relative` is optional and can be a boolean
+                if (typeof config.content.relative !== "boolean" && typeof config.content.relative !== "undefined") {
+                    return false;
+                }
             }
             return true;
         }
@@ -144,7 +149,7 @@ function normalizeConfig(config) {
         _log.default.warn("purge-deprecation", [
             "The `purge`/`content` options have changed in Tailwind CSS v3.0.",
             "Update your configuration file to eliminate this warning.",
-            "https://tailwindcss.com/docs/upgrade-guide#configure-content-sources", 
+            "https://tailwindcss.com/docs/upgrade-guide#configure-content-sources"
         ]);
     }
     // Normalize the `safelist`
@@ -162,7 +167,7 @@ function normalizeConfig(config) {
         _log.default.warn("prefix-function", [
             "As of Tailwind CSS v3.0, `prefix` cannot be a function.",
             "Update `prefix` in your configuration to be a string to eliminate this warning.",
-            "https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function", 
+            "https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function"
         ]);
         config.prefix = "";
     } else {
@@ -171,6 +176,15 @@ function normalizeConfig(config) {
     }
     // Normalize the `content`
     config.content = {
+        relative: (()=>{
+            var ref;
+            let { content  } = config;
+            if (content === null || content === void 0 ? void 0 : content.relative) {
+                return content.relative;
+            }
+            var ref1;
+            return (ref1 = (ref = config.future) === null || ref === void 0 ? void 0 : ref.relativeContentPathsByDefault) !== null && ref1 !== void 0 ? ref1 : false;
+        })(),
         files: (()=>{
             let { content , purge  } = config;
             if (Array.isArray(purge)) return purge;

package/lib/util/normalizeScreens.js

@@ -1,4 +1,14 @@
 /**
+ * @typedef {object} ScreenValue
+ * @property {number|undefined} min
+ * @property {number|undefined} max
+ * @property {string|undefined} raw
+ */ /**
+ * @typedef {object} Screen
+ * @property {string} name
+ * @property {boolean} not
+ * @property {ScreenValue[]} values
+ */ /**
  * A function that normalizes the various forms that the screens object can be
  * provided in.
  *
@@ -10,13 +20,23 @@
  *
  * Output(s):
  *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
+ *
+ * @returns {Screen[]}
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "normalizeScreens", {
-    enumerable: true,
-    get: ()=>normalizeScreens
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    normalizeScreens: ()=>normalizeScreens,
+    isScreenSortable: ()=>isScreenSortable,
+    compareScreens: ()=>compareScreens,
+    toScreen: ()=>toScreen
 });
 function normalizeScreens(screens, root = true) {
     if (Array.isArray(screens)) {
@@ -27,6 +47,7 @@ function normalizeScreens(screens, root = true) {
             if (typeof screen === "string") {
                 return {
                     name: screen.toString(),
+                    not: false,
                     values: [
                         {
                             min: screen,
@@ -40,6 +61,7 @@ function normalizeScreens(screens, root = true) {
             if (typeof options === "string") {
                 return {
                     name,
+                    not: false,
                     values: [
                         {
                             min: options,
@@ -51,11 +73,13 @@ function normalizeScreens(screens, root = true) {
             if (Array.isArray(options)) {
                 return {
                     name,
+                    not: false,
                     values: options.map((option)=>resolveValue(option))
                 };
             }
             return {
                 name,
+                not: false,
                 values: [
                     resolveValue(options)
                 ]
@@ -64,6 +88,79 @@ function normalizeScreens(screens, root = true) {
     }
     return normalizeScreens(Object.entries(screens !== null && screens !== void 0 ? screens : {}), false);
 }
+function isScreenSortable(screen) {
+    if (screen.values.length !== 1) {
+        return {
+            result: false,
+            reason: "multiple-values"
+        };
+    } else if (screen.values[0].raw !== undefined) {
+        return {
+            result: false,
+            reason: "raw-values"
+        };
+    } else if (screen.values[0].min !== undefined && screen.values[0].max !== undefined) {
+        return {
+            result: false,
+            reason: "min-and-max"
+        };
+    }
+    return {
+        result: true,
+        reason: null
+    };
+}
+function compareScreens(type, a, z) {
+    let aScreen = toScreen(a, type);
+    let zScreen = toScreen(z, type);
+    let aSorting = isScreenSortable(aScreen);
+    let bSorting = isScreenSortable(zScreen);
+    // These cases should never happen and indicate a bug in Tailwind CSS itself
+    if (aSorting.reason === "multiple-values" || bSorting.reason === "multiple-values") {
+        throw new Error("Attempted to sort a screen with multiple values. This should never happen. Please open a bug report.");
+    } else if (aSorting.reason === "raw-values" || bSorting.reason === "raw-values") {
+        throw new Error("Attempted to sort a screen with raw values. This should never happen. Please open a bug report.");
+    } else if (aSorting.reason === "min-and-max" || bSorting.reason === "min-and-max") {
+        throw new Error("Attempted to sort a screen with both min and max values. This should never happen. Please open a bug report.");
+    }
+    // Let the sorting begin
+    let { min: aMin , max: aMax  } = aScreen.values[0];
+    let { min: zMin , max: zMax  } = zScreen.values[0];
+    // Negating screens flip their behavior. Basically `not min-width` is `max-width`
+    if (a.not) [aMin, aMax] = [
+        aMax,
+        aMin
+    ];
+    if (z.not) [zMin, zMax] = [
+        zMax,
+        zMin
+    ];
+    aMin = aMin === undefined ? aMin : parseFloat(aMin);
+    aMax = aMax === undefined ? aMax : parseFloat(aMax);
+    zMin = zMin === undefined ? zMin : parseFloat(zMin);
+    zMax = zMax === undefined ? zMax : parseFloat(zMax);
+    let [aValue, zValue] = type === "min" ? [
+        aMin,
+        zMin
+    ] : [
+        zMax,
+        aMax
+    ];
+    return aValue - zValue;
+}
+function toScreen(value, type) {
+    if (typeof value === "object") {
+        return value;
+    }
+    return {
+        name: "arbitrary-screen",
+        values: [
+            {
+                [type]: value
+            }
+        ]
+    };
+}
 function resolveValue({ "min-width": _minWidth , min =_minWidth , max , raw  } = {}) {
     return {
         min,

package/lib/util/parseAnimationValue.js

@@ -32,7 +32,7 @@ const TIMINGS = new Set([
     "ease-out",
     "ease-in-out",
     "step-start",
-    "step-end", 
+    "step-end"
 ]);
 const TIMING_FNS = [
     "cubic-bezier",

package/lib/util/parseBoxShadowValue.js

@@ -24,7 +24,7 @@ let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces inste
 ;
 let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g;
 function parseBoxShadowValue(input) {
-    let shadows = Array.from((0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(input, ","));
+    let shadows = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(input, ",");
     return shadows.map((shadow)=>{
         let value = shadow.trim();
         let result = {