Skip to content

Commit

Permalink
Use inset instead of top, right, bottom, and left properties (
Browse files Browse the repository at this point in the history 
#10765)

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

* update changelog
  • Loading branch information
@RobinMalfait
RobinMalfait authored Mar 10, 2023
1 parent c7d605f commit ba56e42
Show file tree
Hide file tree
Showing 5 changed files with 6 additions and 17 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/corePlugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']],
Expand Down
10 changes: 2 additions & 8 deletions tests/any-type.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
5 changes: 1 addition & 4 deletions tests/arbitrary-values.oxide.test.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 1 addition & 4 deletions tests/arbitrary-values.test.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

1 comment on commit ba56e42

@MichaelAllenWarner
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a lot of devs who still have to support Safari 13 (mainly on mobile), and this change is going to quietly introduce bugs for us.

Can I suggest throwing this behind an opt-in future flag for now, like was done for hoverOnlyWhenSupported? Or simply holding off on this for a year or two?

Please sign in to comment.