tailwindcss 3.1.3 → 3.1.4

package/CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.1.4] - 2022-06-21
+
+### Fixed
+
+- Provide default to `<alpha-value>` when using `theme()` ([#8652](https://github.com/tailwindlabs/tailwindcss/pull/8652))
+- Detect arbitrary variants with quotes ([#8687](https://github.com/tailwindlabs/tailwindcss/pull/8687))
+- Don’t add spaces around raw `/` that are preceded by numbers ([#8688](https://github.com/tailwindlabs/tailwindcss/pull/8688))
+
 ## [3.1.3] - 2022-06-14
 
 ### Fixed
@@ -1981,7 +1989,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.3...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.4...HEAD
+[3.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.3...v3.1.4
 [3.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.2...v3.1.3
 [3.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.1...v3.1.2
 [3.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.0...v3.1.1

package/lib/lib/defaultExtractor.js

@@ -93,9 +93,8 @@ function* buildRegExps(context) {
             ])), 
         ]), 
     ]);
-    yield regex.pattern([
-        // Variants
-        "((?=((",
+    let variantPatterns = [
+        // Without quotes
         regex.any([
             regex.pattern([
                 /([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/,
@@ -105,25 +104,43 @@ function* buildRegExps(context) {
                 /[^\s"'`\[\\]+/,
                 separator
             ]), 
-        ], true),
-        ")+))\\2)?",
-        // Important (optional)
-        /!?/,
-        variantGroupingEnabled ? regex.any([
-            // Or any of those things but grouped separated by commas
+        ]),
+        // With quotes allowed
+        regex.any([
             regex.pattern([
-                /\(/,
-                utility,
-                regex.zeroOrMore([
-                    /,/,
-                    utility
-                ]),
-                /\)/
+                /([^\s"'`\[\\]+-)?\[[^\s`]+\]/,
+                separator
             ]),
-            // Arbitrary properties, constrained utilities, arbitrary values, etc…
-            utility, 
-        ]) : utility, 
-    ]);
+            regex.pattern([
+                /[^\s`\[\\]+/,
+                separator
+            ]), 
+        ]), 
+    ];
+    for (const variantPattern of variantPatterns){
+        yield regex.pattern([
+            // Variants
+            "((?=((",
+            variantPattern,
+            ")+))\\2)?",
+            // Important (optional)
+            /!?/,
+            variantGroupingEnabled ? regex.any([
+                // Or any of those things but grouped separated by commas
+                regex.pattern([
+                    /\(/,
+                    utility,
+                    regex.zeroOrMore([
+                        /,/,
+                        utility
+                    ]),
+                    /\)/
+                ]),
+                // Arbitrary properties, constrained utilities, arbitrary values, etc…
+                utility, 
+            ]) : utility, 
+        ]);
+    }
     // 5. Inner matches
     yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
 }

package/lib/lib/evaluateTailwindFunctions.js

@@ -155,9 +155,13 @@ function _default({ tailwindConfig: config  }) {
             if (!isValid) {
                 throw node.error(error);
             }
-            if (alpha !== undefined) {
-                value = (0, _pluginUtils).parseColorFormat(value);
-                value = (0, _withAlphaVariable).withAlphaValue(value, alpha, value);
+            let maybeColor = (0, _pluginUtils).parseColorFormat(value);
+            let isColorFunction = maybeColor !== undefined && typeof maybeColor === "function";
+            if (alpha !== undefined || isColorFunction) {
+                if (alpha === undefined) {
+                    alpha = 1.0;
+                }
+                value = (0, _withAlphaVariable).withAlphaValue(maybeColor, alpha, maybeColor);
             }
             return value;
         },

package/lib/util/dataTypes.js

@@ -51,9 +51,7 @@ function normalize(value, isRoot = true) {
     value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{
         return match.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ");
     });
-    // Add spaces around some operators not inside calc() that do not follow an operator
-    // or '('.
-    return value.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([\/])/g, "$1 $2 ");
+    return value;
 }
 function url(value) {
     return value.startsWith("url(");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -47,14 +47,14 @@
     "@swc/jest": "^0.2.21",
     "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.9",
-    "esbuild": "^0.14.39",
+    "cssnano": "^5.1.11",
+    "esbuild": "^0.14.43",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^28.1.1",
     "jest-diff": "^28.1.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
     "rimraf": "^3.0.0",
     "source-map-js": "^1.0.2"

package/peers/index.js

@@ -25862,6 +25862,155 @@ var require_main = __commonJS({
         "background-attachment",
         "background-color"
       ],
+      "columns": [
+        "column-width",
+        "column-count"
+      ],
+      "column-rule": [
+        "column-rule-width",
+        "column-rule-style",
+        "column-rule-color"
+      ],
+      "flex": [
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis"
+      ],
+      "flex-flow": [
+        "flex-direction",
+        "flex-wrap"
+      ],
+      "font": [
+        "font-style",
+        "font-variant",
+        "font-weight",
+        "font-stretch",
+        "font-size",
+        "font-family",
+        "line-height"
+      ],
+      "grid": [
+        "grid-template-rows",
+        "grid-template-columns",
+        "grid-template-areas",
+        "grid-auto-rows",
+        "grid-auto-columns",
+        "grid-auto-flow",
+        "column-gap",
+        "row-gap"
+      ],
+      "grid-area": [
+        "grid-row-start",
+        "grid-column-start",
+        "grid-row-end",
+        "grid-column-end"
+      ],
+      "grid-column": [
+        "grid-column-start",
+        "grid-column-end"
+      ],
+      "grid-row": [
+        "grid-row-start",
+        "grid-row-end"
+      ],
+      "grid-template": [
+        "grid-template-columns",
+        "grid-template-rows",
+        "grid-template-areas"
+      ],
+      "list-style": [
+        "list-style-type",
+        "list-style-position",
+        "list-style-image"
+      ],
+      "padding": [
+        "padding-block",
+        "padding-block-start",
+        "padding-block-end",
+        "padding-inline",
+        "padding-inline-start",
+        "padding-inline-end",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left"
+      ],
+      "padding-block": [
+        "padding-block-start",
+        "padding-block-end",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left"
+      ],
+      "padding-block-start": [
+        "padding-top",
+        "padding-right",
+        "padding-left"
+      ],
+      "padding-block-end": [
+        "padding-right",
+        "padding-bottom",
+        "padding-left"
+      ],
+      "padding-inline": [
+        "padding-inline-start",
+        "padding-inline-end",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left"
+      ],
+      "padding-inline-start": [
+        "padding-top",
+        "padding-right",
+        "padding-left"
+      ],
+      "padding-inline-end": [
+        "padding-right",
+        "padding-bottom",
+        "padding-left"
+      ],
+      "margin": [
+        "margin-block",
+        "margin-block-start",
+        "margin-block-end",
+        "margin-inline",
+        "margin-inline-start",
+        "margin-inline-end",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left"
+      ],
+      "margin-block": [
+        "margin-block-start",
+        "margin-block-end",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left"
+      ],
+      "margin-inline": [
+        "margin-inline-start",
+        "margin-inline-end",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left"
+      ],
+      "margin-inline-start": [
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left"
+      ],
+      "margin-inline-end": [
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left"
+      ],
       "border": [
         "border-top",
         "border-right",
@@ -25881,7 +26030,19 @@ var require_main = __commonJS({
         "border-top-color",
         "border-right-color",
         "border-bottom-color",
-        "border-left-color"
+        "border-left-color",
+        "border-block",
+        "border-block-start",
+        "border-block-end",
+        "border-block-width",
+        "border-block-style",
+        "border-block-color",
+        "border-inline",
+        "border-inline-start",
+        "border-inline-end",
+        "border-inline-width",
+        "border-inline-style",
+        "border-inline-color"
       ],
       "border-top": [
         "border-width",
@@ -25939,99 +26100,64 @@ var require_main = __commonJS({
         "border-bottom-right-radius",
         "border-bottom-left-radius"
       ],
+      "border-block": [
+        "border-block-start",
+        "border-block-end",
+        "border-block-width",
+        "border-width",
+        "border-block-style",
+        "border-style",
+        "border-block-color",
+        "border-color"
+      ],
       "border-block-start": [
         "border-block-start-width",
+        "border-width",
         "border-block-start-style",
-        "border-block-start-color"
+        "border-style",
+        "border-block-start-color",
+        "border-color"
       ],
       "border-block-end": [
         "border-block-end-width",
+        "border-width",
         "border-block-end-style",
-        "border-block-end-color"
+        "border-style",
+        "border-block-end-color",
+        "border-color"
       ],
-      "border-image": [
-        "border-image-source",
-        "border-image-slice",
-        "border-image-width",
-        "border-image-outset",
-        "border-image-repeat"
+      "border-inline": [
+        "border-inline-start",
+        "border-inline-end",
+        "border-inline-width",
+        "border-width",
+        "border-inline-style",
+        "border-style",
+        "border-inline-color",
+        "border-color"
       ],
       "border-inline-start": [
         "border-inline-start-width",
+        "border-width",
         "border-inline-start-style",
-        "border-inline-start-color"
+        "border-style",
+        "border-inline-start-color",
+        "border-color"
       ],
       "border-inline-end": [
         "border-inline-end-width",
+        "border-width",
         "border-inline-end-style",
-        "border-inline-end-color"
-      ],
-      "columns": [
-        "column-width",
-        "column-count"
-      ],
-      "column-rule": [
-        "column-rule-width",
-        "column-rule-style",
-        "column-rule-color"
-      ],
-      "flex": [
-        "flex-grow",
-        "flex-shrink",
-        "flex-basis"
-      ],
-      "flex-flow": [
-        "flex-direction",
-        "flex-wrap"
-      ],
-      "font": [
-        "font-style",
-        "font-variant",
-        "font-weight",
-        "font-stretch",
-        "font-size",
-        "font-family",
-        "line-height"
-      ],
-      "grid": [
-        "grid-template-rows",
-        "grid-template-columns",
-        "grid-template-areas",
-        "grid-auto-rows",
-        "grid-auto-columns",
-        "grid-auto-flow",
-        "column-gap",
-        "row-gap"
-      ],
-      "grid-area": [
-        "grid-row-start",
-        "grid-column-start",
-        "grid-row-end",
-        "grid-column-end"
-      ],
-      "grid-column": [
-        "grid-column-start",
-        "grid-column-end"
-      ],
-      "grid-row": [
-        "grid-row-start",
-        "grid-row-end"
-      ],
-      "grid-template": [
-        "grid-template-columns",
-        "grid-template-rows",
-        "grid-template-areas"
-      ],
-      "list-style": [
-        "list-style-type",
-        "list-style-position",
-        "list-style-image"
+        "border-style",
+        "border-inline-end-color",
+        "border-color"
       ],
-      "margin": [
-        "margin-top",
-        "margin-right",
-        "margin-bottom",
-        "margin-left"
+      "border-image": [
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat"
       ],
       "mask": [
         "mask-image",
@@ -26043,6 +26169,50 @@ var require_main = __commonJS({
         "mask-clip",
         "mask-composite"
       ],
+      "inline-size": [
+        "width",
+        "height"
+      ],
+      "block-size": [
+        "width",
+        "height"
+      ],
+      "max-inline-size": [
+        "max-width",
+        "max-height"
+      ],
+      "max-block-size": [
+        "max-width",
+        "max-height"
+      ],
+      "inset": [
+        "inset-block",
+        "inset-block-start",
+        "inset-block-end",
+        "inset-inline",
+        "inset-inline-start",
+        "inset-inline-end",
+        "top",
+        "right",
+        "bottom",
+        "left"
+      ],
+      "inset-block": [
+        "inset-block-start",
+        "inset-block-end",
+        "top",
+        "right",
+        "bottom",
+        "left"
+      ],
+      "inset-inline": [
+        "inset-inline-start",
+        "inset-inline-end",
+        "top",
+        "right",
+        "bottom",
+        "left"
+      ],
       "outline": [
         "outline-color",
         "outline-style",
@@ -26052,28 +26222,6 @@ var require_main = __commonJS({
         "overflow-x",
         "overflow-y"
       ],
-      "padding": [
-        "padding-top",
-        "padding-right",
-        "padding-bottom",
-        "padding-left"
-      ],
-      "padding-inline": [
-        "padding-inline-start",
-        "padding-inline-end"
-      ],
-      "padding-inline-start": [
-        "padding-top",
-        "padding-right",
-        "padding-bottom",
-        "padding-left"
-      ],
-      "padding-inline-end": [
-        "padding-top",
-        "padding-right",
-        "padding-bottom",
-        "padding-left"
-      ],
       "place-content": [
         "align-content",
         "justify-content"
@@ -26355,6 +26503,7 @@ var require_main = __commonJS({
       "columns",
       "contain",
       "content",
+      "content-visibility",
       "counter-increment",
       "counter-reset",
       "counter-set",
@@ -26413,6 +26562,7 @@ var require_main = __commonJS({
       "height",
       "hyphenate-character",
       "hyphens",
+      "image-orientation",
       "image-rendering",
       "inline-size",
       "inset",
@@ -26699,6 +26849,7 @@ var require_main = __commonJS({
       "perspective-origin",
       "appearance",
       "visibility",
+      "content-visibility",
       "opacity",
       "z-index",
       "paint-order",
@@ -26853,6 +27004,7 @@ var require_main = __commonJS({
       "padding-block",
       "padding-block-start",
       "padding-block-end",
+      "image-orientation",
       "image-rendering",
       "aspect-ratio",
       "width",
@@ -27004,6 +27156,7 @@ var require_main = __commonJS({
       "display",
       "appearance",
       "visibility",
+      "content-visibility",
       "z-index",
       "paint-order",
       "position",
@@ -27303,6 +27456,7 @@ var require_main = __commonJS({
       "cursor",
       "empty-cells",
       "filter",
+      "image-orientation",
       "image-rendering",
       "mask",
       "mask-border",
@@ -27484,7 +27638,7 @@ var require_src2 = __commonJS({
               node.remove();
               return;
             }
-            if (node.raws.between) {
+            if (typeof node.raws.between === "string") {
               node.raws.between = replaceComments(node.raws.between, list.space);
             }
             if (node.type === "decl") {
@@ -73219,7 +73373,7 @@ var require_src11 = __commonJS({
       if (node.type !== "function") {
         return false;
       }
-      return ["var", "env"].includes(node.value.toLowerCase());
+      return ["var", "env", "constant"].includes(node.value.toLowerCase());
     }
     function shouldAbort(parsed) {
       let abort = false;
@@ -73386,15 +73540,17 @@ var require_src12 = __commonJS({
         }
         return;
       }
-      const uniques = /* @__PURE__ */ new Set();
       selector.walk((child) => {
-        if (child.type === "selector") {
-          const childStr = String(child);
-          if (!uniques.has(childStr)) {
-            uniques.add(childStr);
-          } else {
-            child.remove();
-          }
+        if (child.type === "selector" && child.parent) {
+          const uniques = /* @__PURE__ */ new Set();
+          child.parent.each((sibling) => {
+            const siblingStr = String(sibling);
+            if (!uniques.has(siblingStr)) {
+              uniques.add(siblingStr);
+            } else {
+              sibling.remove();
+            }
+          });
         }
       });
       if (pseudoElements.has(value)) {
@@ -76531,7 +76687,7 @@ var require_src22 = __commonJS({
     }
     function intersect(a, b, not) {
       return a.filter((c) => {
-        const index = ~indexOfDeclaration(b, c);
+        const index = indexOfDeclaration(b, c) !== -1;
         return not ? !index : index;
       });
     }
@@ -76549,14 +76705,16 @@ var require_src22 = __commonJS({
         return false;
       }
       const parent = sameParent(ruleA, ruleB);
-      const { name } = ruleA.parent;
-      if (parent && name && name.includes("keyframes")) {
+      if (parent && ruleA.parent && ruleA.parent.type === "atrule" && ruleA.parent.name.includes("keyframes")) {
         return false;
       }
       return parent && (selectors.every(noVendor) || sameVendor(a, b));
     }
+    function isDeclaration(node) {
+      return node.type === "decl";
+    }
     function getDecls(rule) {
-      return rule.nodes.filter((node) => node.type === "decl");
+      return rule.nodes.filter(isDeclaration);
     }
     var joinSelectors = (...rules) => rules.map((s) => s.selector).join();
     function ruleLength(...rules) {
@@ -76673,7 +76831,7 @@ var require_src22 = __commonJS({
       const secondClone = second.clone();
       function moveDecl(callback) {
         return (decl) => {
-          if (~indexOfDeclaration(intersection, decl)) {
+          if (indexOfDeclaration(intersection, decl) !== -1) {
             callback.call(this, decl);
           }
         };
@@ -76722,12 +76880,12 @@ var require_src22 = __commonJS({
         }
         if (cache.selector === rule.selector) {
           const cached = getDecls(cache);
-          rule.walk((decl) => {
-            if (~indexOfDeclaration(cached, decl)) {
-              decl.remove();
+          rule.walk((node) => {
+            if (node.type === "decl" && indexOfDeclaration(cached, node) !== -1) {
+              node.remove();
               return;
             }
-            cache.append(decl);
+            cache.append(node);
           });
           rule.remove();
           return;

package/src/lib/defaultExtractor.js

@@ -64,31 +64,41 @@ function* buildRegExps(context) {
     ]),
   ])
 
-  yield regex.pattern([
-    // Variants
-    '((?=((',
-    regex.any(
-      [
-        regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
-        regex.pattern([/[^\s"'`\[\\]+/, separator]),
-      ],
-      true
-    ),
-    ')+))\\2)?',
-
-    // Important (optional)
-    /!?/,
-
-    variantGroupingEnabled
-      ? regex.any([
-          // Or any of those things but grouped separated by commas
-          regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
-
-          // Arbitrary properties, constrained utilities, arbitrary values, etc…
-          utility,
-        ])
-      : utility,
-  ])
+  let variantPatterns = [
+    // Without quotes
+    regex.any([
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
+      regex.pattern([/[^\s"'`\[\\]+/, separator]),
+    ]),
+
+    // With quotes allowed
+    regex.any([
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]/, separator]),
+      regex.pattern([/[^\s`\[\\]+/, separator]),
+    ]),
+  ]
+
+  for (const variantPattern of variantPatterns) {
+    yield regex.pattern([
+      // Variants
+      '((?=((',
+      variantPattern,
+      ')+))\\2)?',
+
+      // Important (optional)
+      /!?/,
+
+      variantGroupingEnabled
+        ? regex.any([
+            // Or any of those things but grouped separated by commas
+            regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
+
+            // Arbitrary properties, constrained utilities, arbitrary values, etc…
+            utility,
+          ])
+        : utility,
+    ])
+  }
 
   // 5. Inner matches
   yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g

package/src/lib/evaluateTailwindFunctions.js

@@ -183,9 +183,15 @@ export default function ({ tailwindConfig: config }) {
         throw node.error(error)
       }
 
-      if (alpha !== undefined) {
-        value = parseColorFormat(value)
-        value = withAlphaValue(value, alpha, value)
+      let maybeColor = parseColorFormat(value)
+      let isColorFunction = maybeColor !== undefined && typeof maybeColor === 'function'
+
+      if (alpha !== undefined || isColorFunction) {
+        if (alpha === undefined) {
+          alpha = 1.0
+        }
+
+        value = withAlphaValue(maybeColor, alpha, maybeColor)
       }
 
       return value

package/src/util/dataTypes.js

@@ -49,9 +49,7 @@ export function normalize(value, isRoot = true) {
     )
   })
 
-  // Add spaces around some operators not inside calc() that do not follow an operator
-  // or '('.
-  return value.replace(/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([\/])/g, '$1 $2 ')
+  return value
 }
 
 export function url(value) {