Skip to content

Commit

Permalink
Improve CSS output in tests to better reflect reality (tailwindlabs#1…
Browse files Browse the repository at this point in the history 
…0454)

* 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!
  • Loading branch information
@RobinMalfait
RobinMalfait authored Jan 31, 2023
1 parent afd159d commit a4f1ff9
Show file tree
Hide file tree
Showing 55 changed files with 1,134 additions and 3,145 deletions.
4 changes: 2 additions & 2 deletions jest/customMatchers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ function toMatchFormattedCss(received = '', argument = '') {
)
}
: () => {
let actual = formatPrettier(formattedReceived)
let expected = formatPrettier(formattedArgument)
let actual = formatPrettier(formattedReceived).replace(/\n\n/g, '\n')
let expected = formatPrettier(formattedArgument).replace(/\n\n/g, '\n')

let diffString = diff(expected, actual, {
expand: this.expand,
Expand Down
32 changes: 16 additions & 16 deletions tests/animations.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,31 @@ crosscheck(() => {
}
}
.animate-spin {
animation: spin 1s linear infinite;
animation: 1s linear infinite spin;
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
transform: scale(2);
}
}
.hover\:animate-ping:hover {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation: 1s cubic-bezier(0, 0, 0.2, 1) infinite ping;
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
transform: translateY(-25%);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
transform: none;
}
}
.group:hover .group-hover\:animate-bounce {
animation: bounce 1s infinite;
animation: 1s infinite bounce;
}
`)
})
Expand Down Expand Up @@ -75,7 +75,7 @@ crosscheck(() => {
}
}
.animate-one {
animation: one 2s;
animation: 2s one;
}
`)
})
Expand Down Expand Up @@ -105,7 +105,7 @@ crosscheck(() => {
}
}
.tw-animate-one {
animation: tw-one 2s;
animation: 2s tw-one;
}
`)
})
Expand All @@ -128,12 +128,12 @@ crosscheck(() => {
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
transform: translateY(-25%);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
transform: none;
}
}
@keyframes pulse {
Expand All @@ -142,7 +142,7 @@ crosscheck(() => {
}
}
.animate-multiple {
animation: bounce 2s linear, pulse 3s ease-in;
animation: 2s linear bounce, 3s ease-in pulse;
}
`)
})
Expand Down Expand Up @@ -177,7 +177,7 @@ crosscheck(() => {
}
}
.animate-multiple {
animation: one 2s, two 3s;
animation: 2s one, 3s two;
}
`)
})
Expand Down Expand Up @@ -215,15 +215,15 @@ crosscheck(() => {
}
}
.animate-zoom-\.5 {
animation: zoom-\.5 2s;
animation: 2s zoom-\.5;
}
@keyframes zoom-1\.5 {
to {
transform: scale(1.5);
}
}
.animate-zoom-1\.5 {
animation: zoom-1\.5 2s;
animation: 2s zoom-1\.5;
}
`)
})
Expand Down Expand Up @@ -262,15 +262,15 @@ crosscheck(() => {
}
}
.tw-animate-zoom-\.5 {
animation: tw-zoom-\.5 2s;
animation: 2s tw-zoom-\.5;
}
@keyframes tw-zoom-1\.5 {
to {
transform: scale(1.5);
}
}
.tw-animate-zoom-1\.5 {
animation: tw-zoom-1\.5 2s;
animation: 2s tw-zoom-1\.5;
}
`)
})
Expand Down
33 changes: 14 additions & 19 deletions tests/any-type.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,15 +283,11 @@ crosscheck(({ stable, oxide }) => {
.flex-\[var\(--any-value\)\] {
flex: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\],
.shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\],
.grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
Expand Down Expand Up @@ -432,8 +428,8 @@ crosscheck(({ stable, oxide }) => {
}
.space-x-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse));
margin-inline-start: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse)));
margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse));
}
.space-y-\[var\(--any-value\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
Expand Down Expand Up @@ -516,11 +512,11 @@ crosscheck(({ stable, oxide }) => {
}
.from-\[var\(--any-value\)\] {
--tw-gradient-from: var(--any-value);
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[var\(--any-value\)\] {
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to);
}
.to-\[var\(--any-value\)\] {
Expand Down Expand Up @@ -738,21 +734,24 @@ crosscheck(({ stable, oxide }) => {
}
.transition-\[var\(--any-value\)\] {
transition-property: var(--any-value);
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-\[var\(--any-value\)\] {
transition-delay: var(--any-value);
}
.duration-\[var\(--any-value\)\] {
transition-duration: var(--any-value);
}
.ease-\[var\(--any-value\)\] {
transition-timing-function: var(--any-value);
}
.will-change-\[var\(--any-value\)\] {
will-change: var(--any-value);
}
.content-\[var\(--any-value\)\] {
--tw-content: var(--any-value);
content: var(--tw-content);
Expand Down Expand Up @@ -856,15 +855,11 @@ crosscheck(({ stable, oxide }) => {
.flex-\[var\(--any-value\)\] {
flex: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-shrink-\[var\(--any-value\)\],
.shrink-\[var\(--any-value\)\] {
flex-shrink: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
.flex-grow-\[var\(--any-value\)\],
.grow-\[var\(--any-value\)\] {
flex-grow: var(--any-value);
}
Expand Down Expand Up @@ -1089,11 +1084,11 @@ crosscheck(({ stable, oxide }) => {
}
.from-\[var\(--any-value\)\] {
--tw-gradient-from: var(--any-value);
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[var\(--any-value\)\] {
--tw-gradient-to: rgb(255 255 255 / 0);
--tw-gradient-to: #fff0;
--tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to);
}
.to-\[var\(--any-value\)\] {
Expand Down Expand Up @@ -1311,8 +1306,8 @@ crosscheck(({ stable, oxide }) => {
}
.transition-\[var\(--any-value\)\] {
transition-property: var(--any-value);
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.delay-\[var\(--any-value\)\] {
transition-delay: var(--any-value);
Expand Down
Loading

0 comments on commit a4f1ff9

Please sign in to comment.