Improve [0] arbitrary value support (#6259)

* test `text-[0]` instead of `w-[0]` * update changelog
tailwindlabs · Dec 3, 2021 · ea139f2 · ea139f2
1 parent 078186a
commit ea139f2
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,7 +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))
+- Allow `0` as a valid `length` value ([#6233](https://github.com/tailwindlabs/tailwindcss/pull/6233), [#6259](https://github.com/tailwindlabs/tailwindcss/pull/6259))
 - 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
@@ -81,7 +81,7 @@ let lengthUnits = [
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {
   return (
-    value === 0 ||
+    value === '0' ||
     new RegExp(`${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
@@ -764,6 +764,9 @@
 .font-\[\'Some_Font\'\2c var\(--other-font\)\] {
   font-family: 'Some Font', var(--other-font);
 }
+.text-\[0\] {
+  font-size: 0;
+}
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }

diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
@@ -278,6 +278,7 @@
     <div class="font-[var(--font1),var(--font2)]"></div>
     <div class="font-[invalid_font_because_spaces]"></div>
 
+    <div class="text-[0]"></div>
     <div class="text-[2.23rem]"></div>
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[angle:var(--angle)]"></div>