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

37
tests/any-type.test.js
View file

@ -577,6 +577,7 @@ test('any types are set on correct plugins', () => {
--tw-text-opacity: var(--any-value);
}
.decoration-\[var\(--any-value\)\] {
-webkit-text-decoration-color: var(--any-value);
text-decoration-color: var(--any-value);
}
.underline-offset-\[var\(--any-value\)\] {
@ -672,6 +673,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-blur-\[var\(--any-value\)\] {
--tw-backdrop-blur: blur(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -679,6 +684,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-brightness-\[var\(--any-value\)\] {
--tw-backdrop-brightness: brightness(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -686,6 +695,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-contrast-\[var\(--any-value\)\] {
--tw-backdrop-contrast: contrast(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -693,6 +706,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-grayscale-\[var\(--any-value\)\] {
--tw-backdrop-grayscale: grayscale(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -700,6 +717,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-hue-rotate-\[var\(--any-value\)\] {
--tw-backdrop-hue-rotate: hue-rotate(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -707,6 +728,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-invert-\[var\(--any-value\)\] {
--tw-backdrop-invert: invert(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -714,6 +739,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-opacity-\[var\(--any-value\)\] {
--tw-backdrop-opacity: opacity(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -721,6 +750,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-saturate-\[var\(--any-value\)\] {
--tw-backdrop-saturate: saturate(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
@ -728,6 +761,10 @@ test('any types are set on correct plugins', () => {
}
.backdrop-sepia-\[var\(--any-value\)\] {
--tw-backdrop-sepia: sepia(var(--any-value));
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)

67
tests/apply.test.js
View file

@ -181,12 +181,12 @@ test('@apply', () => {
.variants:focus {
font-weight: 500;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.variants {
font-weight: 300;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.variants:focus {
font-weight: 900;
}
@ -197,12 +197,12 @@ test('@apply', () => {
.only-variants:focus {
font-weight: 500;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.only-variants {
font-weight: 300;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.only-variants:focus {
font-weight: 900;
}
@ -210,7 +210,7 @@ test('@apply', () => {
.group:hover .apply-group-variant {
text-align: center;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.group:hover .apply-group-variant {
text-align: left;
}
@ -221,7 +221,7 @@ test('@apply', () => {
:is(.dark .apply-dark-variant:hover) {
text-align: right;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
:is(.dark .apply-dark-variant) {
text-align: left;
}
@ -230,12 +230,12 @@ test('@apply', () => {
.apply-custom-utility:hover {
custom: stuff;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.apply-custom-utility {
custom: stuff;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.apply-custom-utility:focus {
custom: stuff;
}
@ -255,7 +255,7 @@ test('@apply', () => {
.selectors-variants:active {
text-align: right;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.multiple-variants:focus,
.selectors-variants:focus {
text-align: left;
@ -265,7 +265,7 @@ test('@apply', () => {
.group:hover .selectors-group {
text-align: center;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.group:hover .multiple-group,
.group:hover .selectors-group {
text-align: left;
@ -321,12 +321,12 @@ test('@apply', () => {
.recursive-apply-a {
font-weight: 900;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.recursive-apply-a {
font-weight: 100;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.recursive-apply-b {
font-weight: 100;
}
@ -334,17 +334,17 @@ test('@apply', () => {
.recursive-apply-b {
font-weight: 600;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.recursive-apply-b {
font-weight: 200;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.recursive-apply-c {
font-weight: 100;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.recursive-apply-c {
font-weight: 200;
}
@ -352,7 +352,7 @@ test('@apply', () => {
.recursive-apply-c {
font-weight: 700;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.recursive-apply-c {
font-weight: 300;
}
@ -369,13 +369,13 @@ test('@apply', () => {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.add-sibling-properties {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.add-sibling-properties:focus {
padding-left: 0.25rem;
padding-right: 0.25rem;
@ -390,13 +390,13 @@ test('@apply', () => {
font-size: 1.5rem;
line-height: 2rem;
}
@media (width >= 640px) {
@media (min-width: 640px) {
h1 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
h1 {
font-size: 1.5rem;
line-height: 2rem;
@ -406,13 +406,13 @@ test('@apply', () => {
font-size: 1.5rem;
line-height: 2rem;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
h2 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
h2 {
font-size: 1.5rem;
line-height: 2rem;
@ -701,27 +701,27 @@ test('@applying classes from outside a @layer respects the source order', async
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -1467,13 +1467,13 @@ describe('multiple instances', () => {
font-size: 1.25rem;
line-height: 1.75rem;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
h2 {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
h2 {
font-size: 1.5rem;
line-height: 2rem;
@ -2021,18 +2021,27 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => {
:is([dir='rtl'] :is(.dark .baz:hover)):before {
background-color: #000;
}
:-webkit-any([dir='rtl'] :-webkit-any(.dark .qux))::-webkit-file-upload-button:hover {
background-color: #000;
}
:is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover {
background-color: #000;
}
:is([dir='rtl'] :is(.dark .steve):hover):before {
background-color: #000;
}
:-webkit-any([dir='rtl'] :-webkit-any(.dark .bob))::-webkit-file-upload-button:hover {
background-color: #000;
}
:is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover {
background-color: #000;
}
:has([dir='rtl'] .foo:hover):before {
background-color: #000;
}
:has([dir='rtl'] .bar)::-webkit-file-upload-button:hover {
background-color: #000;
}
:has([dir='rtl'] .bar)::file-selector-button:hover {
background-color: #000;
}

2
tests/arbitrary-properties.test.js
View file

@ -75,7 +75,7 @@ test('arbitrary properties with modifiers', () => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-color-scheme: dark) {
@media (width >= 1024px) {
@media (min-width: 1024px) {
.dark\:lg\:hover\:\[paint-order\:markers\]:hover {
paint-order: markers;
}

74
tests/arbitrary-values.test.css
View file

@ -134,13 +134,13 @@
min-height: var(--height);
}
.w-\[\'\)\(\)\'\] {
width: ')()';
width: ")()";
}
.w-\[\'\]\[\]\'\] {
width: '][]';
width: "][]";
}
.w-\[\'\}\{\}\'\] {
width: '}{}';
width: "}{}";
}
.w-\[\(\(\)\)\] {
width: (());
@ -176,10 +176,14 @@
width: var(--width, calc(100% + 1rem));
}
.w-\[\{\{\}\}\] {
width: {{}}
width: {
{
}
}
}
.w-\[\{\}\] {
width: {}
width: {
}
}
.min-w-\[3\.23rem\] {
min-width: 3.23rem;
@ -345,10 +349,10 @@
cursor: pointer;
}
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
cursor: url('./path_to_hand.cur') 2 2, pointer;
cursor: url("./path_to_hand.cur") 2 2, pointer;
}
.cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
cursor: url('hand.cur') 2 2, pointer;
cursor: url("hand.cur") 2 2, pointer;
}
.cursor-\[var\(--value\)\] {
cursor: var(--value);
@ -406,13 +410,13 @@
scroll-padding-top: var(--scroll-padding);
}
.list-\[\'\\1f44d\'\] {
list-style-type: '👍';
list-style-type: "👍";
}
.list-\[var\(--value\)\] {
list-style-type: var(--value);
}
.list-image-\[url\(\.\/my-image\.png\)\] {
list-style-image: url('./my-image.png');
list-style-image: url("./my-image.png");
}
.list-image-\[var\(--value\)\] {
list-style-image: var(--value);
@ -685,7 +689,7 @@
background-image: repeating-conic-gradient(#f8f9fa 0% 25%, #fff 0% 50%);
}
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
background-image: url('/path-to-image.png');
background-image: url("/path-to-image.png");
}
.bg-\[url\:var\(--url\)\] {
background-image: var(--url);
@ -735,7 +739,7 @@
fill: #da5b66;
}
.fill-\[url\(\#icon-gradient\)\] {
fill: url('#icon-gradient');
fill: url("#icon-gradient");
}
.fill-\[var\(--value\)\] {
fill: var(--value);
@ -747,7 +751,7 @@
stroke: var(--value);
}
.stroke-\[url\(\#icon-gradient\)\] {
stroke: url('#icon-gradient');
stroke: url("#icon-gradient");
}
.stroke-\[20px\] {
stroke-width: 20px;
@ -809,7 +813,7 @@
font-family: Some Font, sans-serif;
}
.font-\[\'Some_Font\'\,var\(--other-font\)\] {
font-family: 'Some Font', var(--other-font);
font-family: "Some Font", var(--other-font);
}
.font-\[Georgia\,serif\] {
font-family: Georgia, serif;
@ -876,6 +880,7 @@
text-decoration-color: #000;
}
.decoration-\[color\:var\(--color\)\] {
-webkit-text-decoration-color: var(--color);
text-decoration-color: var(--color);
}
.decoration-\[rgb\(123\,123\,123\)\],
@ -1026,54 +1031,90 @@
}
.backdrop-blur-\[11px\] {
--tw-backdrop-blur: blur(11px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-brightness-\[1\.23\] {
--tw-backdrop-brightness: brightness(1.23);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-contrast-\[0\.87\] {
--tw-backdrop-contrast: contrast(0.87);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-grayscale-\[0\.42\] {
--tw-backdrop-grayscale: grayscale(0.42);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-hue-rotate-\[1\.57rad\] {
--tw-backdrop-hue-rotate: hue-rotate(89.9544deg);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-invert-\[0\.66\] {
--tw-backdrop-invert: invert(0.66);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-opacity-\[22\%\] {
--tw-backdrop-opacity: opacity(22%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-saturate-\[144\%\] {
--tw-backdrop-saturate: saturate(144%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-sepia-\[0\.38\] {
--tw-backdrop-sepia: sepia(0.38);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@ -1099,19 +1140,20 @@
will-change: var(--will-change);
}
.content-\[\'\>\'\] {
--tw-content: '>';
--tw-content: ">";
content: var(--tw-content);
}
.content-\[\'hello\'\] {
--tw-content: 'hello';
--tw-content: "hello";
content: var(--tw-content);
}
.content-\[attr\(content-before\)\] {
--tw-content: attr(content-before);
content: var(--tw-content);
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
}
}

8
tests/arbitrary-variants.test.js
View file

@ -65,7 +65,7 @@ test('arbitrary variants with modifiers', () => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
@media (prefers-color-scheme: dark) {
@media (width >= 1024px) {
@media (min-width: 1024px) {
.dark\:lg\:hover\:\[\&\>\*\]\:underline > :hover {
text-decoration-line: underline;
}
@ -121,7 +121,7 @@ test('arbitrary variants are sorted after other variants', () => {
.underline {
text-decoration-line: underline;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:underline {
text-decoration-line: underline;
}
@ -1190,7 +1190,7 @@ it('should output responsive variants + stacked variants in the right order', ()
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 1280px) {
@media (min-width: 1280px) {
.xl\:p-1 {
padding: 0.25rem;
}
@ -1201,7 +1201,7 @@ it('should output responsive variants + stacked variants in the right order', ()
.\[\&_ul\]\:flex-col ul {
flex-direction: column;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:\[\&_ul\]\:flex-row ul {
flex-direction: row;
}

154
tests/basic-usage.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;
@ -53,27 +150,27 @@
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -427,6 +524,7 @@
touch-action: manipulation;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.resize-none {
@ -460,6 +558,7 @@
list-style-image: none;
}
.appearance-none {
-webkit-appearance: none;
appearance: none;
}
.columns-1 {
@ -1020,69 +1119,110 @@
}
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-brightness-50 {
--tw-backdrop-brightness: brightness(0.5);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-contrast-0 {
--tw-backdrop-contrast: contrast(0);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-grayscale {
--tw-backdrop-grayscale: grayscale(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-hue-rotate-90 {
--tw-backdrop-hue-rotate: hue-rotate(90deg);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-invert {
--tw-backdrop-invert: invert(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-opacity-75 {
--tw-backdrop-opacity: opacity(0.75);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-saturate-150 {
--tw-backdrop-saturate: saturate(1.5);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-sepia {
--tw-backdrop-sepia: sepia(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter-none {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

2
tests/blocklist.test.js
View file

@ -27,7 +27,7 @@ it('can block classes matched literally', () => {
.my-custom-class {
color: red;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:hover\:text-sm:hover {
font-size: 0.875rem;
line-height: 1.25rem;

10
tests/collapse-adjacent-rules.test.js
View file

@ -106,7 +106,7 @@ test('collapse adjacent rules', () => {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.some-apply-thing {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@ -114,7 +114,7 @@ test('collapse adjacent rules', () => {
}
}
@supports (foo: bar) {
@media (width >= 768px) {
@media (min-width: 768px) {
.some-apply-thing {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@ -122,7 +122,7 @@ test('collapse adjacent rules', () => {
}
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:text-center {
text-align: center;
}
@ -130,7 +130,7 @@ test('collapse adjacent rules', () => {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:text-center {
text-align: center;
}
@ -138,7 +138,7 @@ test('collapse adjacent rules', () => {
font-weight: 700;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:text-center {
text-align: center;
}

1
tests/collapse-duplicate-declarations.test.js
View file

@ -163,6 +163,7 @@ it('should work on a real world example', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.h-available {
height: 100vh;
height: -webkit-fill-available;
}
`)

60
tests/containerPlugin.test.js
View file

@ -8,27 +8,27 @@ test('options are not required', () => {
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -52,12 +52,12 @@ test('screens can be passed explicitly', () => {
.container {
width: 100%;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.container {
max-width: 400px;
}
}
@media (width >= 500px) {
@media (min-width: 500px) {
.container {
max-width: 500px;
}
@ -81,12 +81,12 @@ test('screens are ordered ascending by min-width', () => {
.container {
width: 100%;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.container {
max-width: 400px;
}
}
@media (width >= 500px) {
@media (min-width: 500px) {
.container {
max-width: 500px;
}
@ -114,12 +114,12 @@ test('screens are deduplicated by min-width', () => {
.container {
width: 100%;
}
@media (width >= 576px) {
@media (min-width: 576px) {
.container {
max-width: 576px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
@ -145,27 +145,27 @@ test('the container can be centered by default', () => {
margin-left: auto;
margin-right: auto;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -191,27 +191,27 @@ test('horizontal padding can be included by default', () => {
padding-left: 2rem;
padding-right: 2rem;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -248,26 +248,26 @@ test('responsive horizontal padding can be included by default', () => {
padding-left: 1rem;
padding-right: 1rem;
}
@media (width >= 576px) {
@media (min-width: 576px) {
.container {
max-width: 576px;
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 992px) {
@media (min-width: 992px) {
.container {
max-width: 992px;
padding-left: 4rem;
padding-right: 4rem;
}
}
@media (width >= 1200px) {
@media (min-width: 1200px) {
.container {
max-width: 1200px;
padding-left: 5rem;
@ -299,12 +299,12 @@ test('setting all options at once', () => {
padding-left: 2rem;
padding-right: 2rem;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.container {
max-width: 400px;
}
}
@media (width >= 500px) {
@media (min-width: 500px) {
.container {
max-width: 500px;
}
@ -325,16 +325,16 @@ test('container can use variants', () => {
return run('@tailwind components', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:hover\:container:hover {
width: 100%;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.lg\:hover\:container:hover {
max-width: 400px;
}
}
@media (width >= 500px) {
@media (min-width: 500px) {
.lg\:hover\:container:hover {
max-width: 500px;
}

34
tests/custom-plugins.test.js
View file

@ -436,17 +436,17 @@ test('plugins can create components with media queries with object syntax', () =
.custom-container {
width: 100%;
}
@media (width >= 100px) {
@media (min-width: 100px) {
.custom-container {
max-width: 100px;
}
}
@media (width >= 200px) {
@media (min-width: 200px) {
.custom-container {
max-width: 200px;
}
}
@media (width >= 300px) {
@media (min-width: 300px) {
.custom-container {
max-width: 300px;
}
@ -497,7 +497,7 @@ test('media queries can be defined multiple times using objects-in-array syntax'
.custom-container {
width: 100%;
}
@media (width >= 100px) {
@media (min-width: 100px) {
.custom-container {
max-width: 100px;
}
@ -506,7 +506,7 @@ test('media queries can be defined multiple times using objects-in-array syntax'
padding: 1rem 0.5rem;
display: block;
}
@media (width >= 100px) {
@media (min-width: 100px) {
.btn {
display: inline-block;
}
@ -557,7 +557,7 @@ test('plugins can create nested rules', () => {
.btn-blue:hover {
background-color: #00008b;
}
@media (width >= 500px) {
@media (min-width: 500px) {
.btn-blue:hover {
background-color: orange;
}
@ -634,22 +634,22 @@ test('plugins can access the current config', () => {
.custom-container {
width: 100%;
}
@media (width >= 576px) {
@media (min-width: 576px) {
.custom-container {
max-width: 576px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.custom-container {
max-width: 768px;
}
}
@media (width >= 992px) {
@media (min-width: 992px) {
.custom-container {
max-width: 992px;
}
}
@media (width >= 1200px) {
@media (min-width: 1200px) {
.custom-container {
max-width: 1200px;
}
@ -1254,7 +1254,7 @@ test('plugins can be created using the `createPlugin` function', () => {
.hover\:test-sm:hover {
test-property: 1rem;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.sm\:test-sm {
test-property: 1rem;
}
@ -1319,7 +1319,7 @@ test('plugins with extra options can be created using the `createPlugin.withOpti
.hover\:banana-sm:hover {
test-property: 1rem;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.sm\:banana-sm {
test-property: 1rem;
}
@ -1356,7 +1356,7 @@ test('plugins should cache correctly', () => {
.banana {
position: absolute;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.sm\:banana {
position: absolute;
}
@ -1367,7 +1367,7 @@ test('plugins should cache correctly', () => {
.apple {
position: absolute;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.sm\:apple {
position: absolute;
}
@ -1436,7 +1436,7 @@ test('plugins created using `createPlugin.withOptions` do not need to be invoked
.hover\:banana-sm:hover {
test-property: 1rem;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.sm\:banana-sm {
test-property: 1rem;
}
@ -1493,7 +1493,7 @@ test('the configFunction parameter is optional when using the `createPlugin.with
.hover\:banana-sm:hover {
test-property: 1px;
}
@media (width >= 400px) {
@media (min-width: 400px) {
.sm\:banana-sm {
test-property: 1px;
}
@ -1534,7 +1534,7 @@ test('keyframes are not escaped', () => {
.foo-\[abc\] {
animation: 1s infinite abc;
}
@media (width >= 768px) {
@media (min-width: 768px) {
@keyframes def {
25.001% {
color: #000;

2
tests/custom-separator.test.js
View file

@ -33,7 +33,7 @@ test('custom separator', () => {
:is(.dark .dark_focus_text-left:focus) {
text-align: left;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md_hover_text-right:hover {
text-align: right;
}

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;
}

2
tests/detect-nesting.test.js
View file

@ -88,7 +88,7 @@ it('should not warn when nesting a single rule inside a media query', () => {
let input = css`
@tailwind utilities;
@media (width >= 768px) {
@media (min-width: 768px) {
.nested {
}
}

4
tests/getVariants.test.js
View file

@ -86,7 +86,7 @@ it('should provide selectors for custom plugins that do a combination of paralle
return [
`
@supports (foo: ${modifier}) {
@media (width <= 400px) {
@media (max-width: 400px) {
&:hover
}
}
@ -103,7 +103,7 @@ it('should provide selectors for custom plugins that do a combination of paralle
let variant = variants.find((v) => v.name === 'foo')
expect(variant.selectors({ modifier: 'bar', value: 'baz' })).toEqual([
'@supports (foo: bar) { @media (width <= 400px) { &:hover } }',
'@supports (foo: bar) { @media (max-width: 400px) { &:hover } }',
'.bar\\/baz &:focus',
])
})

12
tests/import-syntax.test.js
View file

@ -40,27 +40,27 @@ test('using @import instead of @tailwind', () => {
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -72,7 +72,7 @@ test('using @import instead of @tailwind', () => {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:hover\:text-center:hover {
text-align: center;
}

12
tests/important-boolean.test.js
View file

@ -80,27 +80,27 @@ test('important boolean', () => {
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -148,7 +148,7 @@ test('important boolean', () => {
:is(.dark .dark\:focus\:text-left:focus) {
text-align: left !important;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:hover\:text-right:hover {
text-align: right !important;
}

14
tests/important-modifier-prefix.test.js
View file

@ -31,27 +31,27 @@ test('important modifier with prefix', () => {
.\!tw-container {
width: 100% !important;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.\!tw-container {
max-width: 640px !important;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.\!tw-container {
max-width: 768px !important;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.\!tw-container {
max-width: 1024px !important;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.\!tw-container {
max-width: 1280px !important;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.\!tw-container {
max-width: 1536px !important;
}
@ -62,12 +62,12 @@ test('important modifier with prefix', () => {
.hover\:\!tw-text-center:hover {
text-align: center !important;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:\!tw-opacity-50 {
opacity: 0.5 !important;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.xl\:focus\:disabled\:\!tw-float-right:disabled:focus {
float: right !important;
}

14
tests/important-modifier.test.js
View file

@ -53,27 +53,27 @@ test('important modifier', () => {
.\!container {
width: 100% !important;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
@ -94,12 +94,12 @@ test('important modifier', () => {
.hover\:\!text-center:hover {
text-align: center !important;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:\!opacity-50 {
opacity: 0.5 !important;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.xl\:focus\:disabled\:\!float-right:disabled:focus {
float: right !important;
}

21
tests/important-selector.test.js
View file

@ -78,27 +78,27 @@ test('important selector', () => {
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -150,11 +150,18 @@ test('important selector', () => {
#app :is(.dark .dark\:focus\:text-left:focus) {
text-align: left;
}
@media (width >= 768px) {
@media (min-width: 768px) {
#app .md\:hover\:text-right:hover {
text-align: right;
}
}
#app
:-webkit-any(
[dir='rtl']
:-webkit-any(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100)
)::-webkit-file-upload-button:hover {
background-color: #000;
}
#app
:is(
[dir='rtl'] :is(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100)
@ -165,7 +172,7 @@ test('important selector', () => {
})
})
test('pseudo-elements are appended after the `:is()`', () => {
test('pseudo-elements are appended after the `:-webkit-any()`', () => {
let config = {
important: '#app',
darkMode: 'class',

104
tests/kitchen-sink.test.js
View file

@ -243,7 +243,7 @@ test('it works', () => {
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol, Noto Color Emoji;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.screen-test {
color: purple;
}
@ -261,7 +261,7 @@ test('it works', () => {
.apply-test:hover:focus {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.apply-test {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@ -274,27 +274,27 @@ test('it works', () => {
.apply-components {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.apply-components {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.apply-components {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.apply-components {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.apply-components {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.apply-components {
max-width: 1536px;
}
@ -311,7 +311,7 @@ test('it works', () => {
.apply-with-existing:hover {
font-weight: 400;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.apply-with-existing:hover {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@ -344,7 +344,7 @@ test('it works', () => {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
@media (width >= 640px) {
@media (min-width: 640px) {
@media (prefers-reduced-motion: no-preference) {
.group:active .crazy-example:focus {
opacity: 0.1;
@ -365,27 +365,27 @@ test('it works', () => {
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -401,11 +401,22 @@ test('it works', () => {
}
*,
:before,
:after,
:after {
padding: 5px;
}
*,
:before,
:after {
padding: 5px;
}
::-webkit-backdrop {
padding: 5px;
}
::backdrop {
padding: 5px;
}
.foo .bg-black {
-webkit-appearance: none;
appearance: none;
}
.inset-6 {
@ -573,93 +584,103 @@ test('it works', () => {
}
*,
:before,
:after,
:after {
margin: 10px;
}
*,
:before,
:after {
margin: 10px;
}
::-webkit-backdrop {
margin: 10px;
}
::backdrop {
margin: 10px;
}
.hover\:container:hover {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.hover\:container:hover {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.hover\:container:hover {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.hover\:container:hover {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.hover\:container:hover {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.hover\:container:hover {
max-width: 1536px;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.sm\:container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.sm\:container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.sm\:container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.sm\:container {
max-width: 1536px;
}
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.md\:container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.md\:container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.md\:container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.md\:container {
max-width: 1536px;
}
@ -724,7 +745,7 @@ test('it works', () => {
@media (prefers-reduced-motion: no-preference) {
.motion-safe\:transition {
transition-property: color, background-color, border-color, text-decoration-color, fill,
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@ -735,7 +756,7 @@ test('it works', () => {
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:transition {
transition-property: color, background-color, border-color, text-decoration-color, fill,
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@ -743,7 +764,7 @@ test('it works', () => {
:is(.dark .dark\:custom-util) {
background: #abcdef;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:text-center {
text-align: center;
}
@ -761,7 +782,7 @@ test('it works', () => {
}
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:text-center {
text-align: center;
}
@ -783,7 +804,8 @@ test('it works', () => {
@media (prefers-reduced-motion: no-preference) {
.md\:motion-safe\:hover\:transition:hover {
transition-property: color, background-color, border-color, text-decoration-color, fill,
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter,
backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@ -791,18 +813,18 @@ test('it works', () => {
background: #abcdef !important;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.md\:sm\:text-center {
text-align: center;
}
}
}
@media (width >= 1280px) and (width <= 1535px) {
@media (min-width: 1280px) and (max-width: 1535px) {
.range\:text-right {
text-align: right;
}
}
@media (width >= 640px) and (width <= 767px), (width <= 868px) {
@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) {
.multi\:text-left {
text-align: left;
}

2
tests/layer-at-rules.test.js
View file

@ -309,7 +309,7 @@ it('should keep `@supports` rules inside `@layer`s', () => {
.test {
--tw-test: 1;
}
@supports (backdrop-filter: blur(1px)) {
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.test {
--tw-test: 0.9;
}

62
tests/match-variants.test.js
View file

@ -244,12 +244,12 @@ it('should be possible to sort variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 500px) {
@media (min-width: 500px) {
.testmin-\[500px\]\:underline {
text-decoration-line: underline;
}
}
@media (width >= 700px) {
@media (min-width: 700px) {
.testmin-\[700px\]\:italic {
font-style: italic;
}
@ -290,17 +290,17 @@ it('should be possible to compare arbitrary variants and hardcoded variants', ()
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 500px) {
@media (min-width: 500px) {
.testmin-\[500px\]\:italic {
font-style: italic;
}
}
@media (width >= 600px) {
@media (min-width: 600px) {
.testmin-example\:italic {
font-style: italic;
}
}
@media (width >= 700px) {
@media (min-width: 700px) {
.testmin-\[700px\]\:italic {
font-style: italic;
}
@ -351,25 +351,25 @@ it('should be possible to sort stacked arbitrary variants correctly', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 100px) {
@media (width <= 400px) {
@media (min-width: 100px) {
@media (max-width: 400px) {
.testmin-\[100px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
}
@media (width <= 350px) {
@media (max-width: 350px) {
.testmin-\[100px\]\:testmax-\[350px\]\:underline {
text-decoration-line: underline;
}
}
@media (width <= 300px) {
@media (max-width: 300px) {
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
}
}
}
@media (width >= 150px) {
@media (width <= 400px) {
@media (min-width: 150px) {
@media (max-width: 400px) {
.testmin-\[150px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
@ -415,8 +415,8 @@ it('should maintain sort from other variants, if sort functions of arbitrary var
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 100px) {
@media (width <= 200px) {
@media (min-width: 100px) {
@media (max-width: 200px) {
.testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover,
.testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus {
text-decoration-line: underline;
@ -464,25 +464,25 @@ it('should sort arbitrary variants left to right (1)', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 100px) {
@media (width <= 400px) {
@media (min-width: 100px) {
@media (max-width: 400px) {
.testmin-\[100px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
}
@media (width <= 300px) {
@media (max-width: 300px) {
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
}
}
}
@media (width >= 200px) {
@media (width <= 400px) {
@media (min-width: 200px) {
@media (max-width: 400px) {
.testmin-\[200px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
}
@media (width <= 300px) {
@media (max-width: 300px) {
.testmin-\[200px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
}
@ -529,26 +529,26 @@ it('should sort arbitrary variants left to right (2)', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width <= 400px) {
@media (width >= 100px) {
@media (max-width: 400px) {
@media (min-width: 100px) {
.testmax-\[400px\]\:testmin-\[100px\]\:underline {
text-decoration-line: underline;
}
}
@media (width >= 200px) {
@media (min-width: 200px) {
.testmax-\[400px\]\:testmin-\[200px\]\:underline {
text-decoration-line: underline;
}
}
}
@media (width <= 300px) {
@media (width >= 100px) {
@media (max-width: 300px) {
@media (min-width: 100px) {
.testmax-\[300px\]\:testmin-\[100px\]\:underline {
text-decoration-line: underline;
}
}
@media (width >= 200px) {
@media (min-width: 200px) {
.testmax-\[300px\]\:testmin-\[200px\]\:underline {
text-decoration-line: underline;
}
@ -603,28 +603,28 @@ it('should guarantee that we are not passing values from other variants to the w
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 100px) {
@media (width <= 400px) {
@media (min-width: 100px) {
@media (max-width: 400px) {
.testmin-\[100px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
}
@media (width <= 300px) {
@media (max-width: 300px) {
.testmin-\[100px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
}
}
}
@media (width >= 200px) {
@media (width <= 400px) {
@media (min-width: 200px) {
@media (max-width: 400px) {
.testmin-\[200px\]\:testmax-\[400px\]\:underline {
text-decoration-line: underline;
}
}
@media (width <= 300px) {
@media (max-width: 300px) {
.testmin-\[200px\]\:testmax-\[300px\]\:underline {
text-decoration-line: underline;
}

70
tests/min-max-screen-variants.test.js
View file

@ -34,32 +34,32 @@ it('sorts min and max correctly relative to screens and each other', async () =>
.font-bold {
font-weight: 700;
}
@media (width <= 800px) {
@media (max-width: 800px) {
.max-\[800px\]\:font-bold {
font-weight: 700;
}
}
@media (width <= 700px) {
@media (max-width: 700px) {
.max-\[700px\]\:font-bold {
font-weight: 700;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 700px) {
@media (min-width: 700px) {
.min-\[700px\]\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
}
@media (width >= 800px) {
@media (min-width: 800px) {
.min-\[800px\]\:font-bold {
font-weight: 700;
}
@ -95,12 +95,12 @@ it('works when using min variants screens config is empty and variants all use t
.font-bold {
font-weight: 700;
}
@media (width >= 700px) {
@media (min-width: 700px) {
.min-\[700px\]\:font-bold {
font-weight: 700;
}
}
@media (width >= 800px) {
@media (min-width: 800px) {
.min-\[800px\]\:font-bold {
font-weight: 700;
}
@ -136,12 +136,12 @@ it('works when using max variants screens config is empty and variants all use t
.font-bold {
font-weight: 700;
}
@media (width <= 800px) {
@media (max-width: 800px) {
.max-\[800px\]\:font-bold {
font-weight: 700;
}
}
@media (width <= 700px) {
@media (max-width: 700px) {
.max-\[700px\]\:font-bold {
font-weight: 700;
}
@ -176,32 +176,32 @@ it('converts simple min-width screens for max variant', () => {
.font-bold {
font-weight: 700;
}
@media not all and (width >= 1024px) {
@media not all and (min-width: 1024px) {
.max-lg\:font-bold {
font-weight: 700;
}
}
@media (width <= 700px) {
@media (max-width: 700px) {
.max-\[700px\]\:font-bold {
font-weight: 700;
}
}
@media not all and (width >= 640px) {
@media not all and (min-width: 640px) {
.max-sm\:font-bold {
font-weight: 700;
}
}
@media (width <= 300px) {
@media (max-width: 300px) {
.max-\[300px\]\:font-bold {
font-weight: 700;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -236,22 +236,22 @@ it('does not have keyed screens for min variant', () => {
.font-bold {
font-weight: 700;
}
@media (width >= 300px) {
@media (min-width: 300px) {
.min-\[300px\]\:font-bold {
font-weight: 700;
}
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 700px) {
@media (min-width: 700px) {
.min-\[700px\]\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -292,12 +292,12 @@ it('warns when using min variants with complex screen configs', async () => {
.font-bold {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -336,12 +336,12 @@ it('warns when using min variants with simple configs containing mixed units', a
.font-bold {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 48rem) {
@media (min-width: 48rem) {
.md\:font-bold {
font-weight: 700;
}
@ -380,12 +380,12 @@ it('warns when using min variants with mixed units (with screens config)', async
.font-bold {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -422,7 +422,7 @@ it('warns when using min variants with mixed units (with no screens config)', as
.font-bold {
font-weight: 700;
}
@media (width >= 700px) {
@media (min-width: 700px) {
.min-\[700px\]\:font-bold {
font-weight: 700;
}
@ -464,12 +464,12 @@ it('warns when using max variants with complex screen configs', async () => {
.font-bold {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -508,12 +508,12 @@ it('warns when using max variants with simple configs containing mixed units', a
.font-bold {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 48rem) {
@media (min-width: 48rem) {
.md\:font-bold {
font-weight: 700;
}
@ -552,12 +552,12 @@ it('warns when using max variants with mixed units (with screens config)', async
.font-bold {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -594,7 +594,7 @@ it('warns when using max variants with mixed units (with no screens config)', as
.font-bold {
font-weight: 700;
}
@media (width <= 700px) {
@media (max-width: 700px) {
.max-\[700px\]\:font-bold {
font-weight: 700;
}
@ -631,7 +631,7 @@ it('warns when using min and max variants with mixed units (with no screens conf
.font-bold {
font-weight: 700;
}
@media (width <= 700rem) {
@media (max-width: 700rem) {
.max-\[700rem\]\:font-bold {
font-weight: 700;
}

6
tests/modify-selectors.test.js
View file

@ -69,7 +69,7 @@ test('modify selectors', () => {
.foo .foo\:visited\:markdown:visited > p {
margin-top: 12px;
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.foo .lg\:foo\:disabled\:markdown:disabled > p {
margin-top: 12px;
}
@ -78,12 +78,12 @@ test('modify selectors', () => {
.foo .foo\:hover\:font-bold:hover {
font-weight: 700;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.foo .sm\:foo\:font-bold {
font-weight: 700;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.foo .md\:foo\:focus\:font-bold:focus {
font-weight: 700;
}

2
tests/oxide-svelte.test.css
View file

@ -102,7 +102,7 @@
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));

16
tests/parseObjectStyles.test.js
View file

@ -82,7 +82,7 @@ test('it parses nested pseudo-selectors', () => {
test('it parses top-level media queries', () => {
let result = parseObjectStyles({
'@media (width >= 200px)': {
'@media (min-width: 200px)': {
'.foo': {
backgroundColor: 'orange',
},
@ -90,7 +90,7 @@ test('it parses top-level media queries', () => {
})
expect(toCss(result)).toMatchFormattedCss(css`
@media (width >= 200px) {
@media (min-width: 200px) {
.foo {
background-color: orange;
}
@ -104,7 +104,7 @@ test('it parses nested media queries', () => {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@media (width >= 200px)': {
'@media (min-width: 200px)': {
backgroundColor: 'orange',
},
},
@ -116,7 +116,7 @@ test('it parses nested media queries', () => {
color: white;
padding: 1rem;
}
@media (width >= 200px) {
@media (min-width: 200px) {
.foo {
background-color: orange;
}
@ -157,7 +157,7 @@ test('it parses pseudo-selectors in nested media queries', () => {
color: 'white',
padding: '1rem',
'&:hover': {
'@media (width >= 200px)': {
'@media (min-width: 200px)': {
backgroundColor: 'orange',
},
},
@ -170,7 +170,7 @@ test('it parses pseudo-selectors in nested media queries', () => {
color: white;
padding: 1rem;
}
@media (width >= 200px) {
@media (min-width: 200px) {
.foo:hover {
background-color: orange;
}
@ -232,7 +232,7 @@ test('it parses nested multi-class selectors in media queries', () => {
backgroundColor: 'red',
color: 'white',
padding: '1rem',
'@media (width >= 200px)': {
'@media (min-width: 200px)': {
'&.bar': {
backgroundColor: 'orange',
},
@ -246,7 +246,7 @@ test('it parses nested multi-class selectors in media queries', () => {
color: white;
padding: 1rem;
}
@media (width >= 200px) {
@media (min-width: 200px) {
.foo.bar {
background-color: orange;
}

2
tests/plugins/fontSize.test.js
View file

@ -168,7 +168,7 @@ test('font-size utilities can include a line-height modifier', () => {
font-size: 12px;
line-height: 21px;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:text-\[19px\]\/8 {
font-size: 19px;
line-height: 32px;

14
tests/prefix.test.js
View file

@ -94,27 +94,27 @@ test('prefix', () => {
.tw-container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.tw-container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.tw-container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.tw-container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.tw-container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.tw-container {
max-width: 1536px;
}
@ -168,7 +168,7 @@ test('prefix', () => {
:is(.tw-dark .dark\:focus\:tw-text-left:focus) {
text-align: left;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:tw--ml-5 {
margin-left: -1.25rem;
}
@ -440,7 +440,7 @@ test('prefix with negative values and variants in the safelist', async () => {
.hover\:tw--top-1:hover {
top: -0.25rem;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:hover\:-tw-top-1:hover,
.sm\:hover\:tw--top-1:hover {
top: -0.25rem;

55
tests/raw-content.test.css
View file

@ -1,27 +1,27 @@
.container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
@ -265,6 +265,7 @@
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.resize-none {
@ -277,6 +278,7 @@
list-style-type: disc;
}
.appearance-none {
-webkit-appearance: none;
appearance: none;
}
.auto-cols-min {
@ -701,69 +703,110 @@
}
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-brightness-50 {
--tw-backdrop-brightness: brightness(0.5);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-contrast-0 {
--tw-backdrop-contrast: contrast(0);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-grayscale {
--tw-backdrop-grayscale: grayscale(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-hue-rotate-90 {
--tw-backdrop-hue-rotate: hue-rotate(90deg);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-invert {
--tw-backdrop-invert: invert(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-opacity-75 {
--tw-backdrop-opacity: opacity(0.75);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-saturate-150 {
--tw-backdrop-saturate: saturate(1.5);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-sepia {
--tw-backdrop-sepia: sepia(100%);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter-none {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: 0.15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

179
tests/resolve-defaults-at-rules.test.js
View file

@ -16,7 +16,24 @@ test('basic utilities', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -66,7 +83,24 @@ test('with pseudo-class variants', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -114,7 +148,24 @@ test('with pseudo-element variants', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -158,7 +209,24 @@ test('with multi-class variants', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -202,7 +270,24 @@ test('with multi-class pseudo-element variants', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -252,7 +337,24 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -338,7 +440,24 @@ test('with apply', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
@ -374,7 +493,7 @@ test('with apply', async () => {
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
scaleY(var(--tw-scale-y));
}
@media (width >= 768px) {
@media (min-width: 768px) {
.media-queries {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
@ -506,7 +625,7 @@ test('with borders', async () => {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:border-2 {
border-width: 2px;
}
@ -531,7 +650,26 @@ test('with shadows', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
@ -559,7 +697,7 @@ test('with shadows', async () => {
.ring-black\/25 {
--tw-ring-color: #00000040;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:shadow-xl {
--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
@ -588,7 +726,24 @@ test('when no utilities that need the defaults are used', async () => {
expect(result.css).toMatchFormattedCss(css`
*,
:before,
:after,
:after {
--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;
}
::-webkit-backdrop {
--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;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;

2
tests/responsive-and-variants-atrules.test.js
View file

@ -121,7 +121,7 @@ test('responsive and variants atrules', () => {
.both-at-root {
color: pink;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:focus\:responsive-in-components:focus {
color: #00f;
}

442
tests/source-maps.test.js
View file

@ -109,179 +109,279 @@ test('preflight + base have source maps', async () => {
"27:2-11 -> 27:2-11",
"28:0 -> 28:0",
"2:4 -> 30:0",
"31:2-35 -> 31:2-35",
"32:0 -> 32:0",
"2:4 -> 34:0",
"35:2-20 -> 35:2-20",
"36:2-22 -> 36:2-22",
"37:0 -> 37:0",
"2:4 -> 39:0",
"40:2-16 -> 40:2-16",
"41:2-26 -> 41:2-26",
"42:0 -> 42:0",
"2:4 -> 44:0",
"45:2-21 -> 45:2-21",
"46:0 -> 46:0",
"2:4 -> 48:0",
"49:2-109 -> 49:2-109",
"50:2-16 -> 50:2-16",
"51:0 -> 51:0",
"2:4 -> 53:0",
"54:2-16 -> 54:2-16",
"55:0 -> 55:0",
"2:4 -> 57:0",
"58:2-26 -> 58:2-26",
"59:2-16 -> 59:2-16",
"60:2-16 -> 60:2-16",
"61:2-20 -> 61:2-20",
"62:0 -> 62:0",
"2:4 -> 64:0",
"65:2-16 -> 65:2-16",
"66:0 -> 66:0",
"2:4 -> 68:0",
"69:2-12 -> 69:2-12",
"70:0 -> 70:0",
"2:4 -> 72:0",
"73:2-16 -> 73:2-16",
"74:2-23 -> 74:2-23",
"75:2-27 -> 75:2-27",
"76:0 -> 76:0",
"2:4 -> 78:0",
"79:2-32 -> 79:2-32",
"80:2-34 -> 80:2-34",
"81:2-22 -> 81:2-22",
"82:2-17 -> 82:2-17",
"31:2-43 -> 31:2-43",
"32:2-35 -> 32:2-35",
"33:0 -> 33:0",
"2:4 -> 35:0",
"36:2-20 -> 36:2-20",
"37:2-22 -> 37:2-22",
"38:0 -> 38:0",
"2:4 -> 40:0",
"41:2-16 -> 41:2-16",
"42:2-34 -> 42:2-34",
"43:2-26 -> 43:2-26",
"44:0 -> 44:0",
"2:4 -> 46:0",
"47:2-21 -> 47:2-21",
"48:0 -> 48:0",
"2:4 -> 50:0",
"51:2-109 -> 51:2-109",
"52:2-16 -> 52:2-16",
"53:0 -> 53:0",
"2:4 -> 55:0",
"56:2-16 -> 56:2-16",
"57:0 -> 57:0",
"2:4 -> 59:0",
"60:2-26 -> 60:2-26",
"61:2-16 -> 61:2-16",
"62:2-16 -> 62:2-16",
"63:2-20 -> 63:2-20",
"64:0 -> 64:0",
"2:4 -> 66:0",
"67:2-16 -> 67:2-16",
"68:0 -> 68:0",
"2:4 -> 70:0",
"71:2-12 -> 71:2-12",
"72:0 -> 72:0",
"2:4 -> 74:0",
"75:2-16 -> 75:2-16",
"76:2-23 -> 76:2-23",
"77:2-27 -> 77:2-27",
"78:0 -> 78:0",
"2:4 -> 80:0",
"81:2-32 -> 81:2-32",
"82:2-34 -> 82:2-34",
"83:2-22 -> 83:2-22",
"84:2-22 -> 84:2-22",
"85:2-16 -> 85:2-16",
"86:2-11 -> 86:2-11",
"87:2-12 -> 87:2-12",
"88:0 -> 88:0",
"2:4 -> 90:0",
"91:2-22 -> 91:2-22",
"92:0 -> 92:0",
"2:4 -> 94:0",
"95:2-28 -> 95:2-28",
"96:2-25 -> 96:2-25",
"97:2-24 -> 97:2-24",
"98:0 -> 98:0",
"2:4 -> 100:0",
"101:2-15 -> 101:2-15",
"102:0 -> 102:0",
"2:4 -> 104:0",
"105:2-18 -> 105:2-18",
"106:0 -> 106:0",
"2:4 -> 108:0",
"109:2-26 -> 109:2-26",
"110:0 -> 110:0",
"2:4 -> 112:0",
"113:2-14 -> 113:2-14",
"114:0 -> 114:0",
"2:4 -> 116:0",
"117:2-31 -> 117:2-31",
"118:2-22 -> 118:2-22",
"119:0 -> 119:0",
"2:4 -> 121:0",
"122:2-26 -> 122:2-26",
"123:0 -> 123:0",
"2:4 -> 125:0",
"126:2-28 -> 126:2-28",
"127:2-15 -> 127:2-15",
"128:0 -> 128:0",
"2:4 -> 130:0",
"131:2-20 -> 131:2-20",
"132:0 -> 132:0",
"2:4 -> 134:0",
"135:2-11 -> 135:2-11",
"136:0 -> 136:0",
"2:4 -> 138:0",
"139:2-11 -> 139:2-11",
"140:2-12 -> 140:2-12",
"141:0 -> 141:0",
"2:4 -> 143:0",
"144:2-12 -> 144:2-12",
"145:0 -> 145:0",
"2:4 -> 147:0",
"148:2-11 -> 148:2-11",
"149:2-12 -> 149:2-12",
"150:2-18 -> 150:2-18",
"151:0 -> 151:0",
"2:4 -> 153:0",
"154:2-12 -> 154:2-12",
"155:0 -> 155:0",
"2:4 -> 157:0",
"158:2-18 -> 158:2-18",
"159:0 -> 159:0",
"2:4 -> 161:0",
"162:2-12 -> 162:2-12",
"163:2-16 -> 163:2-16",
"164:0 -> 164:0",
"2:4 -> 166:0",
"167:2-17 -> 167:2-17",
"168:0 -> 168:0",
"2:4 -> 170:0",
"171:2-17 -> 171:2-17",
"172:0 -> 172:0",
"2:4 -> 174:0",
"175:2-24 -> 175:2-24",
"176:2-16 -> 176:2-16",
"177:0 -> 177:0",
"2:4 -> 179:0",
"180:2-17 -> 180:2-17",
"181:2-14 -> 181:2-14",
"182:0 -> 182:0",
"2:4 -> 184:0",
"185:2-15 -> 185:2-15",
"186:0 -> 186:0",
"2:4 -> 188:0",
"189:2-26 -> 189:2-26",
"190:2-26 -> 190:2-26",
"191:2-21 -> 191:2-21",
"192:2-21 -> 192:2-21",
"193:2-16 -> 193:2-16",
"194:2-16 -> 194:2-16",
"84:2-17 -> 84:2-17",
"85:2-22 -> 85:2-22",
"86:2-22 -> 86:2-22",
"87:2-16 -> 87:2-16",
"88:2-11 -> 88:2-11",
"89:2-12 -> 89:2-12",
"90:0 -> 90:0",
"2:4 -> 92:0",
"93:2-22 -> 93:2-22",
"94:0 -> 94:0",
"2:4 -> 96:0",
"97:2-28 -> 97:2-28",
"98:2-25 -> 98:2-25",
"99:2-24 -> 99:2-24",
"100:0 -> 100:0",
"2:4 -> 102:0",
"103:2-15 -> 103:2-15",
"104:0 -> 104:0",
"2:4 -> 106:0",
"107:2-18 -> 107:2-18",
"108:0 -> 108:0",
"2:4 -> 110:0",
"111:2-26 -> 111:2-26",
"112:0 -> 112:0",
"2:4 -> 114:0",
"115:2-14 -> 115:2-14",
"116:0 -> 116:0",
"2:4 -> 118:0",
"119:2-31 -> 119:2-31",
"120:2-22 -> 120:2-22",
"121:0 -> 121:0",
"2:4 -> 123:0",
"124:2-26 -> 124:2-26",
"125:0 -> 125:0",
"2:4 -> 127:0",
"128:2-28 -> 128:2-28",
"129:2-15 -> 129:2-15",
"130:0 -> 130:0",
"2:4 -> 132:0",
"133:2-20 -> 133:2-20",
"134:0 -> 134:0",
"2:4 -> 136:0",
"137:2-11 -> 137:2-11",
"138:0 -> 138:0",
"2:4 -> 140:0",
"141:2-11 -> 141:2-11",
"142:2-12 -> 142:2-12",
"143:0 -> 143:0",
"2:4 -> 145:0",
"146:2-12 -> 146:2-12",
"147:0 -> 147:0",
"2:4 -> 149:0",
"150:2-11 -> 150:2-11",
"151:2-12 -> 151:2-12",
"152:2-18 -> 152:2-18",
"153:0 -> 153:0",
"2:4 -> 155:0",
"156:2-12 -> 156:2-12",
"157:0 -> 157:0",
"2:4 -> 159:0",
"160:2-18 -> 160:2-18",
"161:0 -> 161:0",
"2:4 -> 163:0",
"164:2-12 -> 164:2-12",
"165:2-16 -> 165:2-16",
"166:0 -> 166:0",
"2:4 -> 168:0",
"169:2-17 -> 169:2-17",
"170:0 -> 170:0",
"2:4 -> 172:0",
"173:2-17 -> 173:2-17",
"174:0 -> 174:0",
"2:4 -> 176:0",
"177:2-24 -> 177:2-24",
"178:2-16 -> 178:2-16",
"179:0 -> 179:0",
"2:4 -> 181:0",
"182:2-17 -> 182:2-17",
"183:2-14 -> 183:2-14",
"184:0 -> 184:0",
"2:4 -> 186:0",
"187:2-15 -> 187:2-15",
"188:0 -> 188:0",
"2:4 -> 190:0",
"191:2-26 -> 191:2-26",
"192:2-26 -> 192:2-26",
"193:2-21 -> 193:2-21",
"194:2-21 -> 194:2-21",
"195:2-16 -> 195:2-16",
"196:2-17 -> 196:2-17",
"197:2-17 -> 197:2-17",
"198:2-14 -> 198:2-14",
"199:2-14 -> 199:2-14",
"200:2-19 -> 200:2-19",
"201:2-40 -> 201:2-40",
"202:2-31 -> 202:2-31",
"203:2-30 -> 203:2-30",
"204:2-29 -> 204:2-29",
"205:2-16 -> 205:2-16",
"206:2-21 -> 206:2-21",
"207:2-23 -> 207:2-23",
"208:2-24 -> 208:2-24",
"209:2-25 -> 209:2-25",
"210:2-19 -> 210:2-19",
"211:2-29 -> 211:2-29",
"212:2-30 -> 212:2-30",
"213:2-28 -> 213:2-28",
"214:2-36 -> 214:2-36",
"215:2-29 -> 215:2-29",
"216:2-24 -> 216:2-24",
"217:2-32 -> 217:2-32",
"218:2-13 -> 218:2-13",
"219:2-19 -> 219:2-19",
"220:2-17 -> 220:2-17",
"221:2-18 -> 221:2-18",
"222:2-19 -> 222:2-19",
"223:2-15 -> 223:2-15",
"224:2-17 -> 224:2-17",
"225:2-14 -> 225:2-14",
"226:2-20 -> 226:2-20",
"227:2-22 -> 227:2-22",
"228:2-28 -> 228:2-28",
"229:2-26 -> 229:2-26",
"230:2-27 -> 230:2-27",
"231:2-28 -> 231:2-28",
"232:2-24 -> 232:2-24",
"233:2-25 -> 233:2-25",
"234:2-26 -> 234:2-26",
"235:2-23 -> 235:2-23",
"236:0 -> 236:0",
"196:2-16 -> 196:2-16",
"197:2-16 -> 197:2-16",
"198:2-17 -> 198:2-17",
"199:2-17 -> 199:2-17",
"200:2-14 -> 200:2-14",
"201:2-14 -> 201:2-14",
"202:2-19 -> 202:2-19",
"203:2-40 -> 203:2-40",
"204:2-31 -> 204:2-31",
"205:2-30 -> 205:2-30",
"206:2-29 -> 206:2-29",
"207:2-16 -> 207:2-16",
"208:2-21 -> 208:2-21",
"209:2-23 -> 209:2-23",
"210:2-24 -> 210:2-24",
"211:2-25 -> 211:2-25",
"212:2-19 -> 212:2-19",
"213:2-29 -> 213:2-29",
"214:2-30 -> 214:2-30",
"215:2-28 -> 215:2-28",
"216:2-36 -> 216:2-36",
"217:2-29 -> 217:2-29",
"218:2-24 -> 218:2-24",
"219:2-32 -> 219:2-32",
"220:2-13 -> 220:2-13",
"221:2-19 -> 221:2-19",
"222:2-17 -> 222:2-17",
"223:2-18 -> 223:2-18",
"224:2-19 -> 224:2-19",
"225:2-15 -> 225:2-15",
"226:2-17 -> 226:2-17",
"227:2-14 -> 227:2-14",
"228:2-20 -> 228:2-20",
"229:2-22 -> 229:2-22",
"230:2-28 -> 230:2-28",
"231:2-26 -> 231:2-26",
"232:2-27 -> 232:2-27",
"233:2-28 -> 233:2-28",
"234:2-24 -> 234:2-24",
"235:2-25 -> 235:2-25",
"236:2-26 -> 236:2-26",
"237:2-23 -> 237:2-23",
"238:0 -> 238:0",
"2:4 -> 240:0",
"241:2-26 -> 241:2-26",
"242:2-26 -> 242:2-26",
"243:2-21 -> 243:2-21",
"244:2-21 -> 244:2-21",
"245:2-16 -> 245:2-16",
"246:2-16 -> 246:2-16",
"247:2-16 -> 247:2-16",
"248:2-17 -> 248:2-17",
"249:2-17 -> 249:2-17",
"250:2-14 -> 250:2-14",
"251:2-14 -> 251:2-14",
"252:2-19 -> 252:2-19",
"253:2-40 -> 253:2-40",
"254:2-31 -> 254:2-31",
"255:2-30 -> 255:2-30",
"256:2-29 -> 256:2-29",
"257:2-16 -> 257:2-16",
"258:2-21 -> 258:2-21",
"259:2-23 -> 259:2-23",
"260:2-24 -> 260:2-24",
"261:2-25 -> 261:2-25",
"262:2-19 -> 262:2-19",
"263:2-29 -> 263:2-29",
"264:2-30 -> 264:2-30",
"265:2-28 -> 265:2-28",
"266:2-36 -> 266:2-36",
"267:2-29 -> 267:2-29",
"268:2-24 -> 268:2-24",
"269:2-32 -> 269:2-32",
"270:2-13 -> 270:2-13",
"271:2-19 -> 271:2-19",
"272:2-17 -> 272:2-17",
"273:2-18 -> 273:2-18",
"274:2-19 -> 274:2-19",
"275:2-15 -> 275:2-15",
"276:2-17 -> 276:2-17",
"277:2-14 -> 277:2-14",
"278:2-20 -> 278:2-20",
"279:2-22 -> 279:2-22",
"280:2-28 -> 280:2-28",
"281:2-26 -> 281:2-26",
"282:2-27 -> 282:2-27",
"283:2-28 -> 283:2-28",
"284:2-24 -> 284:2-24",
"285:2-25 -> 285:2-25",
"286:2-26 -> 286:2-26",
"287:2-23 -> 287:2-23",
"288:0 -> 288:0",
"2:4 -> 290:0",
"291:2-26 -> 291:2-26",
"292:2-26 -> 292:2-26",
"293:2-21 -> 293:2-21",
"294:2-21 -> 294:2-21",
"295:2-16 -> 295:2-16",
"296:2-16 -> 296:2-16",
"297:2-16 -> 297:2-16",
"298:2-17 -> 298:2-17",
"299:2-17 -> 299:2-17",
"300:2-14 -> 300:2-14",
"301:2-14 -> 301:2-14",
"302:2-19 -> 302:2-19",
"303:2-40 -> 303:2-40",
"304:2-31 -> 304:2-31",
"305:2-30 -> 305:2-30",
"306:2-29 -> 306:2-29",
"307:2-16 -> 307:2-16",
"308:2-21 -> 308:2-21",
"309:2-23 -> 309:2-23",
"310:2-24 -> 310:2-24",
"311:2-25 -> 311:2-25",
"312:2-19 -> 312:2-19",
"313:2-29 -> 313:2-29",
"314:2-30 -> 314:2-30",
"315:2-28 -> 315:2-28",
"316:2-36 -> 316:2-36",
"317:2-29 -> 317:2-29",
"318:2-24 -> 318:2-24",
"319:2-32 -> 319:2-32",
"320:2-13 -> 320:2-13",
"321:2-19 -> 321:2-19",
"322:2-17 -> 322:2-17",
"323:2-18 -> 323:2-18",
"324:2-19 -> 324:2-19",
"325:2-15 -> 325:2-15",
"326:2-17 -> 326:2-17",
"327:2-14 -> 327:2-14",
"328:2-20 -> 328:2-20",
"329:2-22 -> 329:2-22",
"330:2-28 -> 330:2-28",
"331:2-26 -> 331:2-26",
"332:2-27 -> 332:2-27",
"333:2-28 -> 333:2-28",
"334:2-24 -> 334:2-24",
"335:2-25 -> 335:2-25",
"336:2-26 -> 336:2-26",
"337:2-23 -> 337:2-23",
"338:0 -> 338:0",
]
`)
})

4
tests/syntax-svelte.test.js
View file

@ -20,7 +20,7 @@ test('it detects svelte based on the file extension', () => {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@ -66,7 +66,7 @@ test('using raw with svelte extension', () => {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.lg\:hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));

4
tests/tailwind-screens.test.js
View file

@ -19,7 +19,7 @@ test('class variants are inserted at `@tailwind variants`', async () => {
.hover\:font-bold:hover {
font-weight: 700;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
@ -50,7 +50,7 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async ()
.hover\:font-bold:hover {
font-weight: 700;
}
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}

101
tests/util/defaults.js
View file

@ -9,7 +9,106 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) {
return css`
*,
: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: ${defaultRingColor};
--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: ${defaultRingColor};
--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;

10
tests/variant-grouping.test.skip.js
View file

@ -38,7 +38,7 @@ it('should be possible to group variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:\(underline\2c italic\) {
font-style: italic;
text-decoration-line: underline;
@ -97,7 +97,7 @@ it('should be possible to group multiple variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 768px) {
@media (min-width: 768px) {
@media (prefers-color-scheme: dark) {
.md\:dark\:\(underline\2c italic\) {
font-style: italic;
@ -123,7 +123,7 @@ it('should be possible to group nested grouped variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) {
font-style: italic;
text-decoration-line: underline;
@ -155,7 +155,7 @@ it('should be possible to use nested multiple grouped variants', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@ -195,7 +195,7 @@ it('should be possible to mix and match nesting and different variant combinatio
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (width >= 768px) {
@media (min-width: 768px) {
.md\:\[\&\>\*\]\:\(text-black\2c
dark\:\(text-white\2c
hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)

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;
}

40
tests/variants.test.js
View file

@ -37,9 +37,15 @@ test('order matters and produces different behaviour', () => {
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.file\:hover\:\[--value\:2\]:hover::-webkit-file-upload-button {
--value: 2;
}
.file\:hover\:\[--value\:2\]:hover::file-selector-button {
--value: 2;
}
.hover\:file\:\[--value\:1\]::-webkit-file-upload-button:hover {
--value: 1;
}
.hover\:file\:\[--value\:1\]::file-selector-button:hover {
--value: 1;
}
@ -318,7 +324,7 @@ test('custom addVariant with more complex media query params', () => {
return run('@tailwind components;@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media screen and (width <= 600px) {
@media screen and (max-width: 600px) {
.magic\:text-center {
text-align: center;
}
@ -491,7 +497,7 @@ it('should be possible to use responsive modifiers that are defined with special
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width <= 399px) {
@media (max-width: 399px) {
.\<sm\:underline {
text-decoration-line: underline;
}
@ -522,7 +528,7 @@ it('variants for components should not be produced in a file without a component
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:underline {
text-decoration-line: underline;
}
@ -538,31 +544,31 @@ it('variants for utilities should not be produced in a file without a utilities
return run('@tailwind components', config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:container {
width: 100%;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:container {
max-width: 640px;
}
}
@media (width >= 768px) {
@media (min-width: 768px) {
.sm\:container {
max-width: 768px;
}
}
@media (width >= 1024px) {
@media (min-width: 1024px) {
.sm\:container {
max-width: 1024px;
}
}
@media (width >= 1280px) {
@media (min-width: 1280px) {
.sm\:container {
max-width: 1280px;
}
}
@media (width >= 1536px) {
@media (min-width: 1536px) {
.sm\:container {
max-width: 1536px;
}
@ -622,7 +628,7 @@ it('appends variants to the correct place when using postcss documents', () => {
.underline {
text-decoration-line: underline;
}
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:underline {
text-decoration-line: underline;
}
@ -654,7 +660,7 @@ it('variants support multiple, grouped selectors (html)', () => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:base1 .foo,
.sm\:base1 .bar,
.sm\:base2 .bar .base2-foo {
@ -687,7 +693,7 @@ it('variants support multiple, grouped selectors (apply)', () => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width >= 640px) {
@media (min-width: 640px) {
.baz .foo,
.baz .bar {
color: red;
@ -716,7 +722,7 @@ it('variants only picks the used selectors in a group (html)', () => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width >= 640px) {
@media (min-width: 640px) {
.sm\:b {
color: red;
}
@ -747,7 +753,7 @@ it('variants only picks the used selectors in a group (apply)', () => {
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
@media (width >= 640px) {
@media (min-width: 640px) {
.baz {
color: red;
}
@ -915,7 +921,7 @@ test('class inside pseudo-class function :has', () => {
html:has(.hover\:foo:hover) {
color: green;
}
@media (width >= 640px) {
@media (min-width: 640px) {
:where(.sm\:foo) {
color: red;
}
@ -995,7 +1001,7 @@ test('variants with slashes in them work', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (aspect-ratio >= 1 / 10) {
@media (min-aspect-ratio: 1 / 10) {
.ar-1\/10\:flex {
display: flex;
}
@ -1031,7 +1037,7 @@ test('variants with slashes support modifiers', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@media (aspect-ratio >= 1 / 10) and (foo: 20) {
@media (min-aspect-ratio: 1 / 10) and (foo: 20) {
.ar-1\/10\/20\:flex {
display: flex;
}