123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- import { run, html, css } from './util/run'
- // TODO: Remove this once we enable this by default
- it('should not generate nested selectors if the feature flag is not enabled', () => {
- let config = {
- content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .italic {
- font-style: italic;
- }
- .underline {
- text-decoration-line: underline;
- }
- `)
- })
- })
- it('should be possible to group variants', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="md:(underline,italic)"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 768px) {
- .md\:\(underline\2c italic\) {
- font-style: italic;
- text-decoration-line: underline;
- }
- }
- `)
- })
- })
- it('should be possible to group using constrained and arbitrary variants together', () => {
- let config = {
- experimental: 'all',
- content: [
- {
- raw: html`<div
- class="dark:[@supports(hover:hover)]:hover:[&>*]:([--potato:baked],bg-[#0088cc])"
- ></div>`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (prefers-color-scheme: dark) {
- @supports (hover: hover) {
- .dark\:\[\@supports\(hover\:hover\)\]\:hover\:\[\&\>\*\]\:\(\[--potato\:baked\]\2c
- bg-\[\#0088cc\]\)
- > *:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(0 136 204 / var(--tw-bg-opacity));
- --potato: baked;
- }
- }
- }
- `)
- })
- })
- it('should be possible to group multiple variants', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="md:dark:(underline,italic)"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 768px) {
- @media (prefers-color-scheme: dark) {
- .md\:dark\:\(underline\2c italic\) {
- font-style: italic;
- text-decoration-line: underline;
- }
- }
- }
- `)
- })
- })
- it('should be possible to group nested grouped variants', () => {
- let config = {
- experimental: 'all',
- content: [{ raw: html`<div class="md:(underline,italic,hover:(uppercase,font-bold))"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 768px) {
- .md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) {
- font-style: italic;
- text-decoration-line: underline;
- }
- .md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\):hover {
- font-weight: 700;
- text-transform: uppercase;
- }
- }
- `)
- })
- })
- it('should be possible to use nested multiple grouped variants', () => {
- let config = {
- experimental: 'all',
- content: [
- {
- raw: html`<div class="md:(text-black,dark:(text-white,hover:focus:text-gray-100))"></div>`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @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));
- }
- @media (prefers-color-scheme: dark) {
- .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) {
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
- .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\):focus:hover {
- --tw-text-opacity: 1;
- color: rgb(243 244 246 / var(--tw-text-opacity));
- }
- }
- }
- `)
- })
- })
- it('should be possible to mix and match nesting and different variant combinations', () => {
- let config = {
- experimental: 'all',
- content: [
- {
- raw: html`<div
- class="md:[&>*]:(text-black,dark:(text-white,hover:[@supports(color:green)]:[&:nth-child(2n=1)]:text-gray-100))"
- ></div>`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 768px) {
- .md\:\[\&\>\*\]\:\(text-black\2c
- dark\:\(text-white\2c
- hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
- > * {
- --tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
- }
- @media (prefers-color-scheme: dark) {
- .md\:\[\&\>\*\]\:\(text-black\2c
- dark\:\(text-white\2c
- hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\)
- > * {
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
- @supports (color: green) {
- .md\:\[\&\>\*\]\:\(text-black\2c
- dark\:\(text-white\2c
- hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\):nth-child(2n=1):hover
- > * {
- --tw-text-opacity: 1;
- color: rgb(243 244 246 / var(--tw-text-opacity));
- }
- }
- }
- }
- `)
- })
- })
- it('should group with variants defined in external plugins', () => {
- let config = {
- experimental: 'all',
- content: [
- {
- raw: html`
- <div class="ui-active:(bg-black,text-white) ui-selected:(bg-indigo-500,underline)"></div>
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ addVariant }) => {
- addVariant('ui-active', ['&[data-ui-state~="active"]', '[data-ui-state~="active"] &'])
- addVariant('ui-selected', ['&[data-ui-state~="selected"]', '[data-ui-state~="selected"] &'])
- },
- ],
- }
- let input = css`
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .ui-active\:\(bg-black\2c text-white\)[data-ui-state~='active'] {
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
- [data-ui-state~='active'] .ui-active\:\(bg-black\2c text-white\) {
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
- .ui-selected\:\(bg-indigo-500\2c underline\)[data-ui-state~='selected'] {
- --tw-bg-opacity: 1;
- background-color: rgb(99 102 241 / var(--tw-bg-opacity));
- text-decoration-line: underline;
- }
- [data-ui-state~='selected'] .ui-selected\:\(bg-indigo-500\2c underline\) {
- --tw-bg-opacity: 1;
- background-color: rgb(99 102 241 / var(--tw-bg-opacity));
- text-decoration-line: underline;
- }
- `)
- })
- })
|