-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use inset
instead of top
, right
, bottom
, and left
properties
#10765
Conversation
inset
instead of top
, right
, bottom
and left
propertiesinset
instead of top
, right
, bottom
, and left
properties
f4aeffe
to
31e77fc
Compare
This breaks browser support for Safari <14.1. I was able to bring back support for older Safari versions by implementing a PostCSS plugin which converts |
hello @hivokas |
@Myckkah here is the plugin: function postcssInset() {
return {
postcssPlugin: 'postcss-inset',
Declaration: {
inset: (decl, { list }) => {
const values = list.space(decl.value);
decl.cloneBefore({
prop: 'top',
value: values[0],
});
decl.cloneBefore({
prop: 'right',
value: values[1] ?? values[0],
});
decl.cloneBefore({
prop: 'bottom',
value: values[2] ?? values[0],
});
decl.cloneBefore({
prop: 'left',
value: values[3] ?? values[1] ?? values[0],
});
decl.remove();
},
},
};
} You should then add it like that: postcss: {
plugins: [
postcssImport,
tailwindNesting,
tailwindCss(),
postcssColorFunction,
autoprefixer,
postcssInset(), // here
],
}, |
thx @hivokas |
It breaks enterily the modal component https://headlessui.com/vue/dialog in Safari 14 (this version is not so old, end-2020 when Apple introduces M1 chips + Big Sur), which heavily depends on inset-0. https://tailwindui.com looks totally broken too. |
This change broke a lot of desktop and mainly mobile browsers! Many Android 8 and 9 mobiles still use the 2020 Android WebView version. Also, for iOS, as stated by @jenjen75, this change breaks even bearly new Apple devices. https://developer.mozilla.org/en-US/docs/Web/CSS/Inset @RobinMalfait Can you please take a look at this? |
Bump to tailwind 3.3.3 so that we can use .ts config files. Does not include breaking changes. Some things of note: [This change](tailwindlabs/tailwindcss#10765) seems to have caused some problems for users using Safari <14.1 and some mobile browsers. More on tailwind changes can be found [here](https://tailwindcss.com/blog/tailwindcss-v3-3), and the commit changes can be found [here](tailwindlabs/tailwindcss@v3.2.7...v3.3.3). Prettier was also bumped to 2.8.1 (only the test site was on an old version, 2.7.1). This is because the auto-generated `tailwind.config.ts` file makes use of the new [`satisfies` keyword which is not supported until Prettier 2.8.1](prettier/prettier#13951). This broke our linking workflow. J=SLAP-2820
If you need the old corePlugins: {
inset: false, // Disabled because it breaks old browsers. See: https://caniuse.com/mdn-css_properties_inset
},
// ...
plugins: [
function ({ matchUtilities, theme }) {
const config = {
values: theme('inset'),
supportsNegativeValues: true,
};
function matchUtility(cssProps) {
return (value) => {
const result = {};
for (const cssProp of cssProps) {
result[cssProp] = value;
}
return result;
};
}
matchUtilities({inset: matchUtility(['top', 'right', 'bottom', 'left'])}, config);
matchUtilities({
'inset-x': matchUtility(['left', 'right']),
'inset-y': matchUtility(['top', 'bottom']),
}, config);
// Must come after inset utilities so that left, right, top, and bottom take precedence.
matchUtilities({
left: matchUtility(['left']),
right: matchUtility(['right']),
top: matchUtility(['top']),
bottom: matchUtility(['bottom']),
start: matchUtility(['inset-inline-start']),
end: matchUtility(['inset-inline-end']),
}, config);
},
], |
or this one: const { default: createUtilityPlugin } = require('tailwindcss/lib/util/createUtilityPlugin');
module.exports = {
corePlugins: {
inset: false,
},
plugins: [
createUtilityPlugin(
'inset',
[
['inset', ['top', 'right', 'bottom', 'left']],
[
['inset-x', ['left', 'right']],
['inset-y', ['top', 'bottom']],
],
[
['start', ['inset-inline-start']],
['end', ['inset-inline-end']],
['top', ['top']],
['right', ['right']],
['bottom', ['bottom']],
['left', ['left']],
],
],
{ supportsNegativeValues: true },
),
],
}; |
This PR improves the
inset
utility by using theinset
property instead of thetop
,right
,bottom
andleft
properties.