diff --git a/CHANGELOG.md b/CHANGELOG.md index 24d3e35d0076..3bf9ac67250d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js index bd0115940b9e..f5c73536acdc 100644 --- a/src/util/dataTypes.js +++ b/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)) ) } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 36a032c7f3f0..29de7a50cc59 100644 --- a/tests/arbitrary-values.test.css +++ b/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; } diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index de189af4e145..ca138b510af0 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -60,6 +60,7 @@
+
@@ -280,6 +281,7 @@
+