Add css functions to data types (tailwindlabs#6258)

* update changelog

* add tests to verify that `w-[0]` works

* ensure that `min`, `max` and `clamp` also work with arbitrary values

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -20,6 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `portrait` and `landscape` variants ([#6046](https://github.com/tailwindlabs/tailwindcss/pull/6046))
 - Add `text-decoration-style`, `text-decoration-thickness`, and `text-underline-offset` utilities ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
 - Add `menu` reset to preflight ([#6213](https://github.com/tailwindlabs/tailwindcss/pull/6213))
+- Allow `0` as a valid `length` value ([#6233](https://github.com/tailwindlabs/tailwindcss/pull/6233))
+- Add css functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
 
 ### Changed
 

src/util/dataTypes.js

@@ -1,6 +1,8 @@
 import { parseColor } from './color'
 import { parseBoxShadowValue } from './parseBoxShadowValue'
 
+let cssFunctions = ['min', 'max', 'clamp', '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.
@@ -51,11 +53,11 @@ export function url(value) {
 }
 
 export function number(value) {
-  return !isNaN(Number(value))
+  return !isNaN(Number(value)) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?`).test(value))
 }
 
 export function percentage(value) {
-  return /%$/g.test(value) || /^calc\(.+?%\)/g.test(value)
+  return /%$/g.test(value) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?%`).test(value))
 }
 
 let lengthUnits = [
@@ -79,9 +81,9 @@ let lengthUnits = [
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {
   return (
+    value === 0 ||
     new RegExp(`${lengthUnitsPattern}$`).test(value) ||
-    new RegExp(`^calc\\(.+?${lengthUnitsPattern}`).test(value) ||
-    value === 0
+    cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(value))
   )
 }
 

tests/arbitrary-values.test.css

@@ -139,6 +139,9 @@
 .min-h-\[var\(--height\)\] {
   min-height: var(--height);
 }
+.w-\[0\] {
+  width: 0;
+}
 .w-\[3\.23rem\] {
   width: 3.23rem;
 }
@@ -767,6 +770,9 @@
 .text-\[length\:var\(--font-size\)\] {
   font-size: var(--font-size);
 }
+.text-\[min\(10vh\2c 100px\)\] {
+  font-size: min(10vh, 100px);
+}
 .font-\[300\] {
   font-weight: 300;
 }

tests/arbitrary-values.test.html

@@ -60,6 +60,7 @@
     <div class="min-h-[calc(100%+1rem)]"></div>
     <div class="min-h-[var(--height)]"></div>
 
+    <div class="w-[0]"></div>
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
     <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
@@ -280,6 +281,7 @@
     <div class="text-[2.23rem]"></div>
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[angle:var(--angle)]"></div>
+    <div class="text-[min(10vh,100px)]"></div>
 
     <div class="font-[300]"></div>
     <div class="font-[number:lighter]"></div>