Update list of length units (tailwindlabs#10100)

* Update length units

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Prevent invalid arbitrary variant selectors from failing the build ([#10059](https://github.com/tailwindlabs/tailwindcss/pull/10059))
 - Properly handle subtraction followed by a variable ([#10074](https://github.com/tailwindlabs/tailwindcss/pull/10074))
 - Fix missing `string[]` in the `theme.dropShadow` types ([#10072](https://github.com/tailwindlabs/tailwindcss/pull/10072))
+- Update list of length units ([#10100](https://github.com/tailwindlabs/tailwindcss/pull/10100))
 
 ### Changed
 

src/util/dataTypes.js

@@ -77,6 +77,9 @@ export function percentage(value) {
   return (value.endsWith('%') && number(value.slice(0, -1))) || isCSSFunction(value)
 }
 
+// Please refer to MDN when updating this list:
+// https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units
 let lengthUnits = [
   'cm',
   'mm',
@@ -90,10 +93,25 @@ let lengthUnits = [
   'ch',
   'rem',
   'lh',
+  'rlh',
   'vw',
   'vh',
   'vmin',
   'vmax',
+  'vb',
+  'vi',
+  'svw',
+  'svh',
+  'lvw',
+  'lvh',
+  'dvw',
+  'dvh',
+  'cqw',
+  'cqh',
+  'cqi',
+  'cqb',
+  'cqmin',
+  'cqmax',
 ]
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {

tests/arbitrary-values.test.css

@@ -843,6 +843,9 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.text-\[4cqw\] {
+  font-size: 4cqw;
+}
 .text-\[length\:var\(--font-size\)\] {
   font-size: var(--font-size);
 }

tests/arbitrary-values.test.html

@@ -284,6 +284,7 @@
 
     <div class="text-[0]"></div>
     <div class="text-[2.23rem]"></div>
+    <div class="text-[4cqw]"></div>
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[angle:var(--angle)]"></div>
     <div class="text-[min(10vh,100px)]"></div>