From 40b23e3ddb4bf693dd6d502cda0c3282bfd59ac6 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Dec 2021 17:47:00 +0100 Subject: [PATCH 1/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24d3e35d0076..7ad9ca43503c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ 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)) ### Changed From 999c862a742334c6081564b3a5084de34fb5c945 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Dec 2021 17:49:26 +0100 Subject: [PATCH 2/4] add tests to verify that `w-[0]` works --- src/util/dataTypes.js | 4 ++-- tests/arbitrary-values.test.css | 3 +++ tests/arbitrary-values.test.html | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js index bd0115940b9e..0c45d5c5f1ff 100644 --- a/src/util/dataTypes.js +++ b/src/util/dataTypes.js @@ -79,9 +79,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 + new RegExp(`^calc\\(.+?${lengthUnitsPattern}`).test(value) ) } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 36a032c7f3f0..500e21df5c30 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; } diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index de189af4e145..e398e605ece7 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -60,6 +60,7 @@
+
From 82ab9a6e3d69b738a073bfd831b518e8a34d092d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Dec 2021 18:04:07 +0100 Subject: [PATCH 3/4] ensure that `min`, `max` and `clamp` also work with arbitrary values --- src/util/dataTypes.js | 8 +++++--- tests/arbitrary-values.test.css | 3 +++ tests/arbitrary-values.test.html | 1 + 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js index 0c45d5c5f1ff..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 = [ @@ -81,7 +83,7 @@ export function length(value) { return ( value === 0 || new RegExp(`${lengthUnitsPattern}$`).test(value) || - new RegExp(`^calc\\(.+?${lengthUnitsPattern}`).test(value) + cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(value)) ) } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 500e21df5c30..29de7a50cc59 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -770,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 e398e605ece7..ca138b510af0 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -281,6 +281,7 @@
+
From 60082b65d9a4439edb1edb17cb399739409bd2e8 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 3 Dec 2021 18:05:50 +0100 Subject: [PATCH 4/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ad9ca43503c..3bf9ac67250d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 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