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

Improve CSS output in tests to better reflect reality (#10454)

Browse source 
* drop empty lines when diffing output

* replace expected css with optimized lightningcss output

Lightning CSS generates a more optimal CSS output.

Right now the tests are setup in a way that both the generated css and
expected css are run through `lightningcss` to make sure that the output
is concistent for the `stable` and `oxide` engines. But this also means
that the expected output _could_ be larger (aka not optimized) and still
matches (after it runs through lightningcss).

By replacing this with the more optimal output we achieve a few things:

1. This better reflects reality since we will be using `lightningcss`.
2. This gets rid of unnecessary css.
3. Removed code!
This commit is contained in:
Robin Malfait 2023-01-31 15:37:49 +01:00 • committed by GitHub
parent afd159dd8d
commit a4f1ff9052
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 1134 additions and 3145 deletions
Download patch file Download diff file Expand all files Collapse all files

41
tests/basic-usage.test.js
View file

@ -248,10 +248,6 @@ crosscheck(({ stable, oxide }) => {
--tw-bg-opacity: 1;
background-color: rgb(0 128 0 / var(--tw-bg-opacity));
}
.bg-green {
/* Empty on purpose */
}
`)
})
})
@ -379,10 +375,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
`)
})
@ -407,12 +400,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.shadow-one {
--tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
--tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-one,
.shadow-two {
--tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
--tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
@ -474,24 +462,19 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
* {
color: blue;
color: #00f;
}
.combined,
* {
color: red;
}
${defaults}
.underline {
text-decoration-line: underline;
}
* {
color: red;
}
.combined,
* {
text-align: center;
@ -518,7 +501,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.shadow-lg {
--tw-shadow: var(--a, 0 35px 60px -15px rgba(0, 0, 0)), 0 0 1px rgb(0, 0, 0);
--tw-shadow: var(--a, 0 35px 60px -15px #000), 0 0 1px #000;
--tw-shadow-colored: 0 35px 60px -15px var(--tw-shadow-color),
0 0 1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@ -591,7 +574,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.5)' })}
${defaults({ defaultRingColor: '#3b82f680' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@ -622,7 +605,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.75)' })}
${defaults({ defaultRingColor: '#3b82f6bf' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@ -653,7 +636,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
${defaults({ defaultRingColor: '#ff7f7f80' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@ -684,7 +667,7 @@ crosscheck(({ stable, oxide }) => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
${defaults({ defaultRingColor: '#ff7f7f80' })}
.ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
@ -968,9 +951,7 @@ crosscheck(({ stable, oxide }) => {
`)
stable.expect(result.css).toMatchFormattedCss(css`
.hidden {
display: none;
}
.hidden,
.group[href^='/'] .group-\[\[href\^\=\'\/\'\]\]\:hidden {
display: none;
}
@ -999,9 +980,7 @@ crosscheck(({ stable, oxide }) => {
`)
stable.expect(result.css).toMatchFormattedCss(css`
.hidden {
display: none;
}
.hidden,
.group[href^=' bar'] .group-\[\[href\^\=\'_bar\'\]\]\:hidden {
display: none;
}