Use inset instead of top, right, bottom, and left properties (#10765)

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

* update changelog

Author: RobinMalfait

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
 

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

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

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;

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;