Ensure that we test every value for the length datatype (#6283)

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

* update changelog

Author: RobinMalfait

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
 

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'])

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;
 }

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>