From 04906c847e03f51ce345150d022b04d9fac29edd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 31 May 2024 17:42:27 +0200
Subject: [PATCH] Use `length` data type for `background-size` instead of
 `background-position` (#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
---
 CHANGELOG.md                               | 4 +++-
 packages/tailwindcss/src/utilities.test.ts | 4 +++-
 packages/tailwindcss/src/utilities.ts      | 8 ++++----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a84f326b1..d36544f29 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 058b477dc..55e224817 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/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;
     }
 
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 473dc4e23..a5b9da862 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/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':