tailwindcss 3.1.8 → 3.2.1

package/lib/util/parseDependency.js

@@ -1,4 +1,11 @@
-"use strict";
+// @ts-check
+/**
+ * @typedef {{type: 'dependency', file: string} | {type: 'dir-dependency', dir: string, glob: string}} Dependency
+ */ /**
+ *
+ * @param {import('../lib/content.js').ContentPath} contentPath
+ * @returns {Dependency[]}
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,61 +13,33 @@ Object.defineProperty(exports, "default", {
     enumerable: true,
     get: ()=>parseDependency
 });
-const _isGlob = /*#__PURE__*/ _interopRequireDefault(require("is-glob"));
-const _globParent = /*#__PURE__*/ _interopRequireDefault(require("glob-parent"));
-const _path = /*#__PURE__*/ _interopRequireDefault(require("path"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-// Based on `glob-base`
-// https://github.com/micromatch/glob-base/blob/master/index.js
-function parseGlob(pattern) {
-    let glob = pattern;
-    let base = (0, _globParent.default)(pattern);
-    if (base !== ".") {
-        glob = pattern.substr(base.length);
-        if (glob.charAt(0) === "/") {
-            glob = glob.substr(1);
-        }
+function parseDependency(contentPath) {
+    if (contentPath.ignore) {
+        return [];
     }
-    if (glob.substr(0, 2) === "./") {
-        glob = glob.substr(2);
+    if (!contentPath.glob) {
+        return [
+            {
+                type: "dependency",
+                file: contentPath.base
+            }
+        ];
     }
-    if (glob.charAt(0) === "/") {
-        glob = glob.substr(1);
-    }
-    return {
-        base,
-        glob
-    };
-}
-function parseDependency(normalizedFileOrGlob) {
-    if (normalizedFileOrGlob.startsWith("!")) {
-        return null;
+    if (process.env.ROLLUP_WATCH === "true") {
+        // rollup-plugin-postcss does not support dir-dependency messages
+        // but directories can be watched in the same way as files
+        return [
+            {
+                type: "dependency",
+                file: contentPath.base
+            }
+        ];
     }
-    let message;
-    if ((0, _isGlob.default)(normalizedFileOrGlob)) {
-        let { base , glob  } = parseGlob(normalizedFileOrGlob);
-        message = {
+    return [
+        {
             type: "dir-dependency",
-            dir: _path.default.resolve(base),
-            glob
-        };
-    } else {
-        message = {
-            type: "dependency",
-            file: _path.default.resolve(normalizedFileOrGlob)
-        };
-    }
-    // rollup-plugin-postcss does not support dir-dependency messages
-    // but directories can be watched in the same way as files
-    if (message.type === "dir-dependency" && process.env.ROLLUP_WATCH === "true") {
-        message = {
-            type: "dependency",
-            file: message.dir
-        };
-    }
-    return message;
+            dir: contentPath.base,
+            glob: contentPath.glob
+        }
+    ];
 }

package/lib/util/parseGlob.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "parseGlob", {
+    enumerable: true,
+    get: ()=>parseGlob
+});
+const _globParent = /*#__PURE__*/ _interopRequireDefault(require("glob-parent"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function parseGlob(pattern) {
+    let glob = pattern;
+    let base = (0, _globParent.default)(pattern);
+    if (base !== ".") {
+        glob = pattern.substr(base.length);
+        if (glob.charAt(0) === "/") {
+            glob = glob.substr(1);
+        }
+    }
+    if (glob.substr(0, 2) === "./") {
+        glob = glob.substr(2);
+    }
+    if (glob.charAt(0) === "/") {
+        glob = glob.substr(1);
+    }
+    return {
+        base,
+        glob
+    };
+}

package/lib/util/parseObjectStyles.js

@@ -26,7 +26,7 @@ function parseObjectStyles(styles) {
                 bubble: [
                     "screen"
                 ]
-            }), 
+            })
         ]).process(style, {
             parser: _postcssJs.default
         }).root.nodes;

package/lib/util/pluginUtils.js

@@ -14,13 +14,17 @@ _export(exports, {
     parseColorFormat: ()=>parseColorFormat,
     asColor: ()=>asColor,
     asLookupValue: ()=>asLookupValue,
-    coerceValue: ()=>coerceValue
+    typeMap: ()=>typeMap,
+    coerceValue: ()=>coerceValue,
+    getMatchingTypes: ()=>getMatchingTypes
 });
 const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
 const _escapeCommas = /*#__PURE__*/ _interopRequireDefault(require("./escapeCommas"));
 const _withAlphaVariable = require("./withAlphaVariable");
 const _dataTypes = require("./dataTypes");
 const _negateValue = /*#__PURE__*/ _interopRequireDefault(require("./negateValue"));
+const _validateFormalSyntax = require("./validateFormalSyntax");
+const _featureFlagsJs = require("../featureFlags.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -76,11 +80,22 @@ function asValue(modifier, options = {}, { validate =()=>true  } = {}) {
 function isArbitraryValue(input) {
     return input.startsWith("[") && input.endsWith("]");
 }
-function splitAlpha(modifier) {
+function splitUtilityModifier(modifier) {
     let slashIdx = modifier.lastIndexOf("/");
     if (slashIdx === -1 || slashIdx === modifier.length - 1) {
         return [
-            modifier
+            modifier,
+            undefined
+        ];
+    }
+    let arbitrary = isArbitraryValue(modifier);
+    // The modifier could be of the form `[foo]/[bar]`
+    // We want to handle this case properly
+    // without affecting `[foo/bar]`
+    if (arbitrary && !modifier.includes("]/[")) {
+        return [
+            modifier,
+            undefined
         ];
     }
     return [
@@ -95,13 +110,15 @@ function parseColorFormat(value) {
     }
     return value;
 }
-function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
+function asColor(_, options = {}, { tailwindConfig ={} , utilityModifier , rawModifier  } = {}) {
     var ref;
-    if (((ref = options.values) === null || ref === void 0 ? void 0 : ref[modifier]) !== undefined) {
+    if (((ref = options.values) === null || ref === void 0 ? void 0 : ref[rawModifier]) !== undefined) {
         var ref1;
-        return parseColorFormat((ref1 = options.values) === null || ref1 === void 0 ? void 0 : ref1[modifier]);
+        return parseColorFormat((ref1 = options.values) === null || ref1 === void 0 ? void 0 : ref1[rawModifier]);
     }
-    let [color, alpha] = splitAlpha(modifier);
+    // TODO: Hoist this up to getMatchingTypes or something
+    // We do this here because we need the alpha value (if any)
+    let [color, alpha] = splitUtilityModifier(rawModifier);
     if (alpha !== undefined) {
         var ref2, ref3, ref4;
         var ref5;
@@ -118,7 +135,9 @@ function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
         }
         return (0, _withAlphaVariable.withAlphaValue)(normalizedColor, tailwindConfig.theme.opacity[alpha]);
     }
-    return asValue(modifier, options, {
+    return asValue(rawModifier, options, {
+        rawModifier,
+        utilityModifier,
         validate: _dataTypes.color
     });
 }
@@ -127,8 +146,9 @@ function asLookupValue(modifier, options = {}) {
     return (ref = options.values) === null || ref === void 0 ? void 0 : ref[modifier];
 }
 function guess(validate) {
-    return (modifier, options)=>{
+    return (modifier, options, extras)=>{
         return asValue(modifier, options, {
+            ...extras,
             validate
         });
     };
@@ -148,7 +168,8 @@ let typeMap = {
     "line-width": guess(_dataTypes.lineWidth),
     "absolute-size": guess(_dataTypes.absoluteSize),
     "relative-size": guess(_dataTypes.relativeSize),
-    shadow: guess(_dataTypes.shadow)
+    shadow: guess(_dataTypes.shadow),
+    size: guess(_validateFormalSyntax.backgroundSize)
 };
 let supportedTypes = Object.keys(typeMap);
 function splitAtFirst(input, delim) {
@@ -177,19 +198,68 @@ function coerceValue(types, modifier, options, tailwindConfig) {
         if (value.length > 0 && supportedTypes.includes(explicitType)) {
             return [
                 asValue(`[${value}]`, options),
-                explicitType
+                explicitType,
+                null
             ];
         }
     }
+    let matches = getMatchingTypes(types, modifier, options, tailwindConfig);
     // Find first matching type
-    for (let type of [].concat(types)){
-        let result = typeMap[type](modifier, options, {
+    for (let match of matches){
+        return match;
+    }
+    return [];
+}
+function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
+    let modifiersEnabled = (0, _featureFlagsJs.flagEnabled)(tailwindConfig, "generalizedModifiers");
+    let [modifier, utilityModifier] = splitUtilityModifier(rawModifier);
+    let canUseUtilityModifier = modifiersEnabled && options.modifiers != null && (options.modifiers === "any" || typeof options.modifiers === "object" && (utilityModifier && isArbitraryValue(utilityModifier) || utilityModifier in options.modifiers));
+    if (!canUseUtilityModifier) {
+        modifier = rawModifier;
+        utilityModifier = undefined;
+    }
+    if (utilityModifier !== undefined && modifier === "") {
+        modifier = "DEFAULT";
+    }
+    // Check the full value first
+    // TODO: Move to asValue… somehow
+    if (utilityModifier !== undefined) {
+        if (typeof options.modifiers === "object") {
+            var ref;
+            var ref1;
+            let configValue = (ref1 = (ref = options.modifiers) === null || ref === void 0 ? void 0 : ref[utilityModifier]) !== null && ref1 !== void 0 ? ref1 : null;
+            if (configValue !== null) {
+                utilityModifier = configValue;
+            } else if (isArbitraryValue(utilityModifier)) {
+                utilityModifier = utilityModifier.slice(1, -1);
+            }
+        }
+        let result = asValue(rawModifier, options, {
+            rawModifier,
+            utilityModifier,
+            tailwindConfig
+        });
+        if (result !== undefined) {
+            yield [
+                result,
+                "any",
+                null
+            ];
+        }
+    }
+    for (const { type  } of types !== null && types !== void 0 ? types : []){
+        let result1 = typeMap[type](modifier, options, {
+            rawModifier,
+            utilityModifier,
             tailwindConfig
         });
-        if (result !== undefined) return [
-            result,
-            type
+        if (result1 === undefined) {
+            continue;
+        }
+        yield [
+            result1,
+            type,
+            utilityModifier !== null && utilityModifier !== void 0 ? utilityModifier : null
         ];
     }
-    return [];
 }

package/lib/util/resolveConfig.js

@@ -37,7 +37,7 @@ function mergeWith(target, ...sources) {
             let merged = customizer(target[k], source[k]);
             if (merged === undefined) {
                 if (isObject(target[k]) && isObject(source[k])) {
-                    target[k] = mergeWith(target[k], source[k], customizer);
+                    target[k] = mergeWith({}, target[k], source[k], customizer);
                 } else {
                     target[k] = source[k];
                 }
@@ -244,7 +244,7 @@ function resolveConfig(configs) {
             important: false,
             separator: ":",
             variantOrder: _defaultConfigStub.default.variantOrder
-        }, 
+        }
     ];
     var ref, ref1;
     return (0, _normalizeConfig.normalizeConfig)((0, _defaults.defaults)({

package/lib/util/splitAtTopLevelOnly.js

@@ -1,4 +1,18 @@
-"use strict";
+/**
+ * This splits a string on a top-level character.
+ *
+ * Regex doesn't support recursion (at least not the JS-flavored version).
+ * So we have to use a tiny state machine to keep track of paren placement.
+ *
+ * Expected behavior using commas:
+ * var(--a, 0 0 1px rgb(0, 0, 0)), 0 0 1px rgb(0, 0, 0)
+ *       ─┬─             ┬  ┬    ┬
+ *        x              x  x    ╰──────── Split because top-level
+ *        ╰──────────────┴──┴───────────── Ignored b/c inside >= 1 levels of parens
+ *
+ * @param {string} input
+ * @param {string} separator
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,88 +20,24 @@ Object.defineProperty(exports, "splitAtTopLevelOnly", {
     enumerable: true,
     get: ()=>splitAtTopLevelOnly
 });
-const _regex = /*#__PURE__*/ _interopRequireWildcard(require("../lib/regex"));
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
+function splitAtTopLevelOnly(input, separator) {
+    let stack = [];
+    let parts = [];
+    let lastPos = 0;
+    for(let idx = 0; idx < input.length; idx++){
+        let char = input[idx];
+        if (stack.length === 0 && char === separator[0]) {
+            if (separator.length === 1 || input.slice(idx, idx + separator.length) === separator) {
+                parts.push(input.slice(lastPos, idx));
+                lastPos = idx + separator.length;
             }
         }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-function* splitAtTopLevelOnly(input, separator) {
-    let SPECIALS = new RegExp(`[(){}\\[\\]${_regex.escape(separator)}]`, "g");
-    let depth = 0;
-    let lastIndex = 0;
-    let found = false;
-    let separatorIndex = 0;
-    let separatorStart = 0;
-    let separatorLength = separator.length;
-    // Find all paren-like things & character
-    // And only split on commas if they're top-level
-    for (let match of input.matchAll(SPECIALS)){
-        let matchesSeparator = match[0] === separator[separatorIndex];
-        let atEndOfSeparator = separatorIndex === separatorLength - 1;
-        let matchesFullSeparator = matchesSeparator && atEndOfSeparator;
-        if (match[0] === "(") depth++;
-        if (match[0] === ")") depth--;
-        if (match[0] === "[") depth++;
-        if (match[0] === "]") depth--;
-        if (match[0] === "{") depth++;
-        if (match[0] === "}") depth--;
-        if (matchesSeparator && depth === 0) {
-            if (separatorStart === 0) {
-                separatorStart = match.index;
-            }
-            separatorIndex++;
-        }
-        if (matchesFullSeparator && depth === 0) {
-            found = true;
-            yield input.substring(lastIndex, separatorStart);
-            lastIndex = separatorStart + separatorLength;
+        if (char === "(" || char === "[" || char === "{") {
+            stack.push(char);
+        } else if (char === ")" && stack[stack.length - 1] === "(" || char === "]" && stack[stack.length - 1] === "[" || char === "}" && stack[stack.length - 1] === "{") {
+            stack.pop();
         }
-        if (separatorIndex === separatorLength) {
-            separatorIndex = 0;
-            separatorStart = 0;
-        }
-    }
-    // Provide the last segment of the string if available
-    // Otherwise the whole string since no `char`s were found
-    // This mirrors the behavior of string.split()
-    if (found) {
-        yield input.substring(lastIndex);
-    } else {
-        yield input;
     }
+    parts.push(input.slice(lastPos));
+    return parts;
 }

package/lib/util/transformThemeValue.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "default", {
     get: ()=>transformThemeValue
 });
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
+const _isPlainObject = /*#__PURE__*/ _interopRequireDefault(require("./isPlainObject"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -23,8 +24,14 @@ function transformThemeValue(themeSection) {
             return value;
         };
     }
+    if (themeSection === "fontFamily") {
+        return (value)=>{
+            if (typeof value === "function") value = value({});
+            let families = Array.isArray(value) && (0, _isPlainObject.default)(value[1]) ? value[0] : value;
+            return Array.isArray(families) ? families.join(", ") : families;
+        };
+    }
     if ([
-        "fontFamily",
         "boxShadow",
         "transitionProperty",
         "transitionDuration",
@@ -34,7 +41,7 @@ function transformThemeValue(themeSection) {
         "backgroundSize",
         "backgroundColor",
         "cursor",
-        "animation", 
+        "animation"
     ].includes(themeSection)) {
         return (value)=>{
             if (typeof value === "function") value = value({});

package/lib/util/validateConfig.js

@@ -17,7 +17,7 @@ function validateConfig(config) {
         _log.default.warn("content-problems", [
             "The `content` option in your Tailwind CSS configuration is missing or empty.",
             "Configure your content sources or your generated CSS will be missing styles.",
-            "https://tailwindcss.com/docs/content-configuration", 
+            "https://tailwindcss.com/docs/content-configuration"
         ]);
     }
     return config;

package/lib/util/validateFormalSyntax.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "backgroundSize", {
+    enumerable: true,
+    get: ()=>backgroundSize
+});
+const _dataTypes = require("./dataTypes");
+const _splitAtTopLevelOnly = require("./splitAtTopLevelOnly");
+function backgroundSize(value) {
+    let keywordValues = [
+        "cover",
+        "contain"
+    ];
+    // the <length-percentage> type will probably be a css function
+    // so we have to use `splitAtTopLevelOnly`
+    return (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(value, ",").every((part)=>{
+        let sizes = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(part, "_").filter(Boolean);
+        if (sizes.length === 1 && keywordValues.includes(sizes[0])) return true;
+        if (sizes.length !== 1 && sizes.length !== 2) return false;
+        return sizes.every((size)=>(0, _dataTypes.length)(size) || (0, _dataTypes.percentage)(size) || size === "auto");
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.1.8",
+  "version": "3.2.1",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -23,10 +23,11 @@
     "test": "jest",
     "test:integrations": "npm run test --prefix ./integrations",
     "install:integrations": "node scripts/install-integrations.js",
-    "posttest": "npm run style",
     "generate:plugin-list": "node -r @swc/register scripts/create-plugin-list.js",
     "generate:types": "node -r @swc/register scripts/generate-types.js",
-    "generate": "npm run generate:plugin-list && npm run generate:types"
+    "generate": "npm run generate:plugin-list && npm run generate:types",
+    "release-channel": "node ./scripts/release-channel.js",
+    "release-notes": "node ./scripts/release-notes.js"
   },
   "files": [
     "src/*",
@@ -43,19 +44,18 @@
   ],
   "devDependencies": {
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.218",
-    "@swc/jest": "^0.2.22",
+    "@swc/core": "^1.3.4",
+    "@swc/jest": "^0.2.23",
     "@swc/register": "^0.1.10",
-    "autoprefixer": "^10.4.8",
-    "cssnano": "^5.1.12",
-    "esbuild": "^0.14.48",
-    "eslint": "^8.20.0",
+    "autoprefixer": "^10.4.12",
+    "cssnano": "^5.1.13",
+    "esbuild": "^0.15.10",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^28.1.3",
     "jest-diff": "^28.1.3",
     "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
     "rimraf": "^3.0.0",
     "source-map-js": "^1.0.2"
   },
@@ -69,18 +69,19 @@
     "detective": "^5.2.1",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
-    "fast-glob": "^3.2.11",
+    "fast-glob": "^3.2.12",
     "glob-parent": "^6.0.2",
     "is-glob": "^4.0.3",
     "lilconfig": "^2.0.6",
+    "micromatch": "^4.0.5",
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.17",
     "postcss-import": "^14.1.0",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.4",
-    "postcss-nested": "5.0.6",
+    "postcss-nested": "6.0.0",
     "postcss-selector-parser": "^6.0.10",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",