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

16
tests/customConfig.test.js
View file

@ -12,7 +12,7 @@ test('it uses the values from the custom config file', () => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -33,7 +33,7 @@ test('custom config can be passed as an object', () => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -49,7 +49,7 @@ test('custom config path can be passed using `config` property in an object', ()
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -72,7 +72,7 @@ test('custom config can be passed under the `config` property', () => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -97,7 +97,7 @@ test('tailwind.config.cjs is picked up by default', () => {
return run('@tailwind utilities').then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -123,7 +123,7 @@ test('tailwind.config.js is picked up by default', () => {
return run('@tailwind utilities').then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -149,7 +149,7 @@ test('tailwind.config.cjs is picked up by default when passing an empty object',
return run('@tailwind utilities', {}).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}
@ -175,7 +175,7 @@ test('tailwind.config.js is picked up by default when passing an empty object',
return run('@tailwind utilities', {}).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 400px) {
@media (min-width: 400px) {
.mobile\:font-bold {
font-weight: 700;
}