wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist (#11402)

Browse source 
* exclude `Features.LogicalProperties` lightningcss feature

We don't want this to automatically apply since we have dedicated
logical property based utilities already.

We also have a feature flag to toggle some utilities to make use of
logical property based ones.

This feature should be opt-in to prevent backwards compatibility (e.g.:
RTL sites that _did_ use a mr-4 explicitly).

* update default browserslist

* explicitly include/exclude Lightning CSS features

* update tests based on new browserslist and include/exclude features from Lightning CSS

* update integration tests

* prefer user browserslist, fallback to built-in browserslist

* always include Nesting

If a custom browserslist config is used, then we don't explicitly set
the include/exclude features from Lightning CSS (except for nesting, we
always want to process nesting)

* ensure to fallback to the current working directory

* update changelog
This commit is contained in:
Robin Malfait 2023-06-09 20:37:36 +02:00 • committed by GitHub
parent ea3d9cd57a
commit ef2ebb28d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1367 additions and 556 deletions
Download patch file Download diff file Expand all files Collapse all files

146
tests/variants.test.css
View file

@ -1,6 +1,103 @@
*,
:before,
:after,
:after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::-webkit-backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #3b82f680;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@ -51,17 +148,31 @@
--tw-backdrop-sepia: ;
}
.first-letter\:flex:first-letter,
.first-line\:flex:first-line,
.marker\:flex ::marker,
.marker\:flex::marker,
.first-line\:flex:first-line {
display: flex;
}
.marker\:flex ::marker {
display: flex;
}
.marker\:flex::marker {
display: flex;
}
.selection\:flex ::selection,
.selection\:flex::selection {
display: flex;
}
.file\:flex::-webkit-file-upload-button {
display: flex;
}
.file\:flex::file-selector-button {
display: flex;
}
.placeholder\:flex::placeholder,
.placeholder\:flex::placeholder {
display: flex;
}
.backdrop\:flex::-webkit-backdrop {
display: flex;
}
.backdrop\:flex::backdrop {
display: flex;
}
@ -105,13 +216,20 @@
.hover\:flex:hover {
display: flex;
}
.file\:hover\:flex:hover::-webkit-file-upload-button {
display: flex;
}
.file\:hover\:flex:hover::file-selector-button {
display: flex;
}
.open\:hover\:flex:hover[open],
.focus\:flex:focus,
.focus\:hover\:flex:hover:focus,
.focus-visible\:flex:focus-visible,
.focus\:hover\:flex:hover:focus {
display: flex;
}
.focus-visible\:flex:focus-visible {
display: flex;
}
.active\:flex:active,
.enabled\:flex:enabled,
.disabled\:flex:disabled,
@ -189,10 +307,6 @@
:-webkit-any([dir='rtl'] .rtl\:flex) {
display: flex;
}
.open\:hover\:flex:hover[open],
.focus\:flex:focus,
.focus\:hover\:flex:hover:focus,
.focus-visible\:flex:focus-visible,
.active\:flex:active,
.enabled\:flex:enabled,
.disabled\:flex:disabled,
@ -300,31 +414,31 @@
display: flex;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:flex,
.sm\:active\:flex:active {
display: flex;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:flex,
.group:focus .md\:group-focus\:flex {
display: flex;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:flex,
:is(.dark .lg\:dark\:flex) {
display: flex;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.xl\:flex,
:is(.dark .xl\:dark\:disabled\:flex:disabled) {
display: flex;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.\32 xl\:flex {
display: flex;
}