From ba56e426affd68c37e72ad3583360346c060cdfd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 10 Mar 2023 16:52:08 +0100
Subject: [PATCH] Use `inset` instead of `top`, `right`, `bottom`, and `left`
 properties (#10765)

* use `inset` instead of `top`, `right`, `bottom` and `left` properties

* update changelog
---
 CHANGELOG.md                          |  1 +
 src/corePlugins.js                    |  2 +-
 tests/any-type.test.js                | 10 ++--------
 tests/arbitrary-values.oxide.test.css |  5 +----
 tests/arbitrary-values.test.css       |  5 +----
 5 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51150e083b06..73b0620facdf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Oxide] Disable color opacity plugins by default in the `oxide` engine ([#10618](https://github.com/tailwindlabs/tailwindcss/pull/10618))
 - [Oxide] Enable relative content paths for the `oxide` engine ([#10621](https://github.com/tailwindlabs/tailwindcss/pull/10621))
 - Mark `rtl` and `ltr` variants as stable and remove warnings ([#10764](https://github.com/tailwindlabs/tailwindcss/pull/10764))
+- Use `inset` instead of `top`, `right`, `bottom`, and `left` properties ([#10765](https://github.com/tailwindlabs/tailwindcss/pull/10765))
 
 ## [3.2.7] - 2023-02-16
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index dc73002931e5..4a97713fabe6 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -626,7 +626,7 @@ export let corePlugins = {
   inset: createUtilityPlugin(
     'inset',
     [
-      ['inset', ['top', 'right', 'bottom', 'left']],
+      ['inset', ['inset']],
       [
         ['inset-x', ['left', 'right']],
         ['inset-y', ['top', 'bottom']],
diff --git a/tests/any-type.test.js b/tests/any-type.test.js
index a7e266176828..17b670386bbf 100644
--- a/tests/any-type.test.js
+++ b/tests/any-type.test.js
@@ -187,10 +187,7 @@ crosscheck(({ stable, oxide }) => {
     return run(input, config).then((result) => {
       let oxideExpected = css`
         .inset-\[var\(--any-value\)\] {
-          top: var(--any-value);
-          right: var(--any-value);
-          bottom: var(--any-value);
-          left: var(--any-value);
+          inset: var(--any-value);
         }
         .inset-x-\[var\(--any-value\)\] {
           left: var(--any-value);
@@ -738,10 +735,7 @@ crosscheck(({ stable, oxide }) => {
       `
       let stableExpected = css`
         .inset-\[var\(--any-value\)\] {
-          top: var(--any-value);
-          right: var(--any-value);
-          bottom: var(--any-value);
-          left: var(--any-value);
+          inset: var(--any-value);
         }
         .inset-x-\[var\(--any-value\)\] {
           left: var(--any-value);
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index c8dfb24a7007..411056bb6c4e 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -2,10 +2,7 @@
   inset: 11px;
 }
 .inset-\[var\(--value\)\] {
-  top: var(--value);
-  right: var(--value);
-  bottom: var(--value);
-  left: var(--value);
+  inset: var(--value);
 }
 .inset-x-\[11px\] {
   left: 11px;
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 3c357c605df2..a20e619b53f3 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -2,10 +2,7 @@
   inset: 11px;
 }
 .inset-\[var\(--value\)\] {
-  top: var(--value);
-  right: var(--value);
-  bottom: var(--value);
-  left: var(--value);
+  inset: var(--value);
 }
 .inset-x-\[11px\] {
   left: 11px;