ensure that we test every value for the length datatype

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>