123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 |
- import { run, html, css } from './util/run'
- test('experimental universal selector improvements (box-shadow)', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="resize shadow"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .shadow {
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- }
- .resize {
- resize: both;
- }
- .shadow {
- --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
- 0 1px 2px -1px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- }
- `)
- })
- })
- test('experimental universal selector improvements (pseudo hover)', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="resize hover:shadow"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .hover\:shadow {
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- }
- .resize {
- resize: both;
- }
- .hover\:shadow:hover {
- --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
- 0 1px 2px -1px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- }
- `)
- })
- })
- test('experimental universal selector improvements (multiple classes: group)', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="resize group-hover:shadow"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .group-hover\:shadow {
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- }
- .resize {
- resize: both;
- }
- .group:hover .group-hover\:shadow {
- --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
- 0 1px 2px -1px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- }
- `)
- })
- })
- test('experimental universal selector improvements (child selectors: divide-y)', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="resize divide-y"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .resize {
- resize: both;
- }
- .divide-y > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-y-reverse: 0;
- border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
- border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
- }
- `)
- })
- })
- test('experimental universal selector improvements (hover:divide-y)', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="resize hover:divide-y"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .resize {
- resize: both;
- }
- .hover\:divide-y:hover > :not([hidden]) ~ :not([hidden]) {
- --tw-divide-y-reverse: 0;
- border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
- border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
- }
- `)
- })
- })
- test('experimental universal selector improvements (#app important)', () => {
- let config = {
- experimental: 'all',
- important: '#app',
- content: [{ raw: html`<div class="resize divide-y shadow"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .shadow {
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- }
- #app .resize {
- resize: both;
- }
- #app :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
- --tw-divide-y-reverse: 0;
- border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
- border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
- }
- #app .shadow {
- --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
- 0 1px 2px -1px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- }
- `)
- })
- })
|