From b857d80e945a7f1d87239e7f20cc5685bbe70984 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 6 Dec 2021 20:19:45 +0100
Subject: [PATCH] Ensure that we test every value for the `length` datatype
 (#6283)

* ensure that we test every value for the `length` datatype

* update changelog
---
 CHANGELOG.md                     |  1 +
 src/util/dataTypes.js            | 12 +++++++-----
 tests/arbitrary-values.test.css  |  3 +++
 tests/arbitrary-values.test.html |  1 +
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25d802c693ca..ac40c6b3b2e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CSS functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
 - Add CSS functions to data types ([#6258](https://github.com/tailwindlabs/tailwindcss/pull/6258))
 - Support negative values for `scale-*` utilities ([c48e629](https://github.com/tailwindlabs/tailwindcss/commit/c48e629955585ad18dadba9f470fda59cc448ab7))
+- Improve `length` data type, by validating each value individually ([#6283](https://github.com/tailwindlabs/tailwindcss/pull/6283))
 
 ### Changed
 
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 1838be619d47..a5c502b424b7 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -80,11 +80,13 @@ let lengthUnits = [
 ]
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {
-  return (
-    value === '0' ||
-    new RegExp(`${lengthUnitsPattern}$`).test(value) ||
-    cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(value))
-  )
+  return value.split(UNDERSCORE).every((part) => {
+    return (
+      part === '0' ||
+      new RegExp(`${lengthUnitsPattern}$`).test(part) ||
+      cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(part))
+    )
+  })
 }
 
 let lineWidths = new Set(['thin', 'medium', 'thick'])
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 4a53a5f5dc1e..ffa4d3cf8a91 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -666,6 +666,9 @@
 .bg-\[length\:var\(--value\)\] {
   background-size: var(--value);
 }
+.bg-\[center_top_1rem\] {
+  background-position: center top 1rem;
+}
 .bg-\[position\:200px_100px\] {
   background-position: 200px 100px;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 4e38751cddf8..af75a3254c27 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -236,6 +236,7 @@
     <div class="bg-[length:200px_100px]"></div>
     <div class="bg-[length:var(--value)]"></div>
 
+    <div class="bg-[center_top_1rem]"></div>
     <div class="bg-[position:200px_100px]"></div>
     <div class="bg-[position:var(--value)]"></div>