Use length data type for background-size instead of background-position (tailwindlabs#13771)

* move `length` data type from `background-position` to `background-size`

This way it's backwards compatible with v3.

* sort data types

* update changelog

* make sure `length` is inferred later

Otherwise `bg-[120px]` would be inferred as `length` instead of
`position`.

In v3 this maps to `position` instead of `length`.
```css
.bg-\[120px\] {
  background-position: 120px;
}
```

* add explicit test cases for `length` and `size` data types

Author: RobinMalfait

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771))
 
 ## [4.0.0-alpha.15] - 2024-05-08
 

packages/tailwindcss/src/utilities.test.ts

@@ -7710,7 +7710,9 @@ test('bg', () => {
         'bg-[50%]',
         'bg-[120px]',
         'bg-[120px_120px]',
+        'bg-[length:120px_120px]',
         'bg-[position:120px_120px]',
+        'bg-[size:120px_120px]',
 
         // background-repeat
         'bg-repeat',
@@ -7834,7 +7836,7 @@ test('bg', () => {
       background-size: cover;
     }
 
-    .bg-\\[size\\:120px_120px\\] {
+    .bg-\\[length\\:120px_120px\\], .bg-\\[size\\:120px_120px\\] {
       background-size: 120px 120px;
     }
 

packages/tailwindcss/src/utilities.ts

@@ -2502,21 +2502,21 @@ export function createUtilities(theme: Theme) {
         inferDataType(value, [
           'image',
           'color',
-          'length',
           'percentage',
           'position',
           'bg-size',
+          'length',
           'url',
         ])
 
       switch (type) {
-        case 'length':
         case 'percentage':
         case 'position': {
           return [decl('background-position', value)]
         }
-        case 'size':
-        case 'bg-size': {
+        case 'bg-size':
+        case 'length':
+        case 'size': {
           return [decl('background-size', value)]
         }
         case 'image':