tailwindcss 0.0.0-insiders.86e73b2 → 0.0.0-insiders.8776db7

package/CHANGELOG.md

@@ -9,6 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
+- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
+
+## [3.0.7] - 2021-12-17
+
+### Fixed
+
 - Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
 - Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
 - Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
@@ -1737,8 +1744,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...HEAD
-[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.6
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...HEAD
+[3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7
+[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...v3.0.6
 [3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
 [3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
 [3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3

package/README.md

@@ -1,10 +1,14 @@
 <p>
-    <a href="https://tailwindcss.com/" target="_blank">
-      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo-sticker.svg">
-    </a><br>
-    A utility-first CSS framework for rapidly building custom user interfaces.
+  <a href="https://tailwindcss.com/#gh-light-mode-only" target="_blank">
+    <img src="./.github/logo-light.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
+  <a href="https://tailwindcss.com/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/logo-dark.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
 </p>
 
+A utility-first CSS framework for rapidly building custom user interfaces.
+
 <p>
     <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/workflow/status/tailwindlabs/tailwindcss/Node.js%20CI" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>

package/lib/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 

package/lib/lib/defaultExtractor.js

@@ -18,7 +18,7 @@ const PATTERNS = [
     /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^<>"'`\s]*[^"'`\s:\\])/.source
+    /([^<>"'`\s]*[^"'`\s:\\])/.source, 
 ].join('|');
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
@@ -31,4 +31,10 @@ function defaultExtractor(content) {
     ].flat().filter((v)=>v !== undefined
     );
     return results;
-}
+} // Regular utilities
+ // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+ // Arbitrary values
+ // {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+ // arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+ // Arbitrary properties
+ // {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/lib/lib/expandApplyAtRules.js

@@ -267,7 +267,7 @@ function processApply(root, context) {
                             // would have replaced this with something that didn't exist and
                             // therefore it removed the selector altogether. In this specific
                             // case it would result in `{}` instead of `.something-unrelated {}`
-                            if (!extractClasses(rule).some((thing)=>thing === applyCandidate
+                            if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate
                             )) {
                                 rule.remove();
                                 return;

package/lib/util/color.js

@@ -15,7 +15,8 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
 let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`;
 let SEP = `(?:\\s*,\\s*|\\s+)`;
 let ALPHA_SEP = `\\s*[,/]\\s*`;
-let RGB_HSL = new RegExp(`^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
+let RGB = new RegExp(`^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
+let HSL = new RegExp(`^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
 function parseColor(value) {
     if (typeof value !== 'string') {
         return null;
@@ -62,18 +63,32 @@ function parseColor(value) {
             alpha: hex[4] ? (parseInt(hex[4], 16) / 255).toString() : undefined
         };
     }
-    let match = value.match(RGB_HSL);
-    if (match !== null) {
+    let rgbMatch = value.match(RGB);
+    if (rgbMatch !== null) {
         var ref, ref1;
         return {
-            mode: match[1],
+            mode: 'rgb',
+            color: [
+                rgbMatch[1],
+                rgbMatch[2],
+                rgbMatch[3]
+            ].map((v)=>v.toString()
+            ),
+            alpha: (ref = rgbMatch[4]) === null || ref === void 0 ? void 0 : (ref1 = ref.toString) === null || ref1 === void 0 ? void 0 : ref1.call(ref)
+        };
+    }
+    let hslMatch = value.match(HSL);
+    if (hslMatch !== null) {
+        var ref2, ref3;
+        return {
+            mode: 'hsl',
             color: [
-                match[2],
-                match[3],
-                match[4]
+                hslMatch[1],
+                hslMatch[2],
+                hslMatch[3]
             ].map((v)=>v.toString()
             ),
-            alpha: (ref = match[5]) === null || ref === void 0 ? void 0 : (ref1 = ref.toString) === null || ref1 === void 0 ? void 0 : ref1.call(ref)
+            alpha: (ref2 = hslMatch[4]) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.toString) === null || ref3 === void 0 ? void 0 : ref3.call(ref2)
         };
     }
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.86e73b2",
+  "version": "0.0.0-insiders.8776db7",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,7 +43,7 @@
     "*.js"
   ],
   "devDependencies": {
-    "@swc/cli": "^0.1.52",
+    "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.118",
     "@swc/jest": "^0.2.11",
     "@swc/register": "^0.1.7",
@@ -56,9 +56,9 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.4.3",
     "jest-diff": "^27.4.2",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {

package/peers/index.js

@@ -5406,7 +5406,7 @@ var require_processor = __commonJS({
     var Root = require_root();
     var Processor = class {
       constructor(plugins = []) {
-        this.version = "8.4.4";
+        this.version = "8.4.5";
         this.plugins = this.normalize(plugins);
       }
       use(plugin) {

package/src/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 

package/src/lib/defaultExtractor.js

@@ -14,6 +14,11 @@ const PATTERNS = [
   /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
   /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
   /([^<>"'`\s]*[^"'`\s:\\])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
+
+  // Arbitrary properties
+  // /([^"\s]*\[[^\s]+?\][^"\s]*)/.source,
+  // /([^'\s]*\[[^\s]+?\][^'\s]*)/.source,
+  // /([^`\s]*\[[^\s]+?\][^`\s]*)/.source,
 ].join('|')
 
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
@@ -29,3 +34,13 @@ export function defaultExtractor(content) {
 
   return results
 }
+
+// Regular utilities
+// {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+
+// Arbitrary values
+// {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+// arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+
+// Arbitrary properties
+// {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/src/lib/expandApplyAtRules.js

@@ -297,7 +297,7 @@ function processApply(root, context) {
               // would have replaced this with something that didn't exist and
               // therefore it removed the selector altogether. In this specific
               // case it would result in `{}` instead of `.something-unrelated {}`
-              if (!extractClasses(rule).some((thing) => thing === applyCandidate)) {
+              if (!extractClasses(rule).some((candidate) => candidate === applyCandidate)) {
                 rule.remove()
                 return
               }

package/src/util/color.js

@@ -5,8 +5,11 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
 let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
 let SEP = `(?:\\s*,\\s*|\\s+)`
 let ALPHA_SEP = `\\s*[,/]\\s*`
-let RGB_HSL = new RegExp(
-  `^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+let RGB = new RegExp(
+  `^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+)
+let HSL = new RegExp(
+  `^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
 )
 
 export function parseColor(value) {
@@ -37,13 +40,23 @@ export function parseColor(value) {
     }
   }
 
-  let match = value.match(RGB_HSL)
+  let rgbMatch = value.match(RGB)
+
+  if (rgbMatch !== null) {
+    return {
+      mode: 'rgb',
+      color: [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((v) => v.toString()),
+      alpha: rgbMatch[4]?.toString?.(),
+    }
+  }
+
+  let hslMatch = value.match(HSL)
 
-  if (match !== null) {
+  if (hslMatch !== null) {
     return {
-      mode: match[1],
-      color: [match[2], match[3], match[4]].map((v) => v.toString()),
-      alpha: match[5]?.toString?.(),
+      mode: 'hsl',
+      color: [hslMatch[1], hslMatch[2], hslMatch[3]].map((v) => v.toString()),
+      alpha: hslMatch[4]?.toString?.(),
     }
   }