-
-
-
-
+it('should be possible to use modifiers and arbitrary groups', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
-
-
+
+
-
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .group\/foo:hover .group-hover\/foo\:underline,
+ .group:hover .group-hover\:underline,
+ .group\/foo:focus .group-\[\&\:focus\]\/foo\:underline,
+ .group:focus .group-\[\&\:focus\]\:underline,
+ .group\/foo[data-open] .group-\[\&\[data-open\]\]\/foo\:underline,
+ .group[data-open] .group-\[\&\[data-open\]\]\:underline,
+ .group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline,
+ .group.in-foo .group-\[\.in-foo\]\:underline,
+ .in-foo .group\/foo .group-\[\.in-foo_\&\]\/foo\:underline,
+ .in-foo .group .group-\[\.in-foo_\&\]\:underline,
+ .group\/foo:hover .group-\[\:hover\]\/foo\:underline,
+ .group:hover .group-\[\:hover\]\:underline,
+ .group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline,
+ .group[data-open] .group-\[\[data-open\]\]\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+})
- let input = css`
- @tailwind utilities;
- `
+it('should be possible to use modifiers and arbitrary peers', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .peer\/foo:hover ~ .peer-hover\/foo\:underline,
- .peer:hover ~ .peer-hover\:underline,
- .peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline,
- .peer:focus ~ .peer-\[\&\:focus\]\:underline,
- .peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline,
- .peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline,
- .peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline,
- .peer.in-foo ~ .peer-\[\.in-foo\]\:underline,
- .in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline,
- .in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline,
- .peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline,
- .peer:hover ~ .peer-\[\:hover\]\:underline,
- .peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline,
- .peer[data-open] ~ .peer-\[\[data-open\]\]\:underline {
- text-decoration-line: underline;
- }
- `)
- })
- })
+
+
- it('Arbitrary variants are ordered alphabetically', () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+
+
+
+
+
- let input = css`
- @tailwind utilities;
- `
+
+
+
+
+
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .\[\&\:\:a\]\:underline::a {
- text-decoration-line: underline;
- }
- .\[\&\:\:b\]\:underline::b {
- text-decoration-line: underline;
- }
- .\[\&\:\:c\]\:underline::c {
- text-decoration-line: underline;
- }
- `)
- })
- })
+
+
+
+
+
- it('Arbitrary variants support multiple attribute selectors', () => {
- let config = {
- content: [
- {
- raw: html`
`,
- },
- ],
- corePlugins: { preflight: false },
- }
+
+
- let input = css`
- @tailwind utilities;
- `
+
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- [data-foo='bar'][data-baz] .\[\[data-foo\=\'bar\'\]\[data-baz\]_\&\]\:underline {
- text-decoration-line: underline;
- }
- `)
- })
- })
+
+
- it('Invalid arbitrary variants selectors should produce nothing instead of failing', () => {
- let config = {
- content: [
- {
- raw: html`
-
+
+
+
+
+
+
`,
- },
- ],
- corePlugins: { preflight: false },
- }
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .peer\/foo:hover ~ .peer-hover\/foo\:underline,
+ .peer:hover ~ .peer-hover\:underline,
+ .peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline,
+ .peer:focus ~ .peer-\[\&\:focus\]\:underline,
+ .peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline,
+ .peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline,
+ .peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline,
+ .peer.in-foo ~ .peer-\[\.in-foo\]\:underline,
+ .in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline,
+ .in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline,
+ .peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline,
+ .peer:hover ~ .peer-\[\:hover\]\:underline,
+ .peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline,
+ .peer[data-open] ~ .peer-\[\[data-open\]\]\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+})
- let input = css`
- @tailwind utilities;
- `
+it('Arbitrary variants are ordered alphabetically', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .\[\&\:\:a\]\:underline::a {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:b\]\:underline::b {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:c\]\:underline::c {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+})
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css``)
- })
+it('Arbitrary variants support multiple attribute selectors', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
`,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ [data-foo='bar'][data-baz] .\[\[data-foo\=\'bar\'\]\[data-baz\]_\&\]\:underline {
+ text-decoration-line: underline;
+ }
+ `)
})
+})
- it('should output responsive variants + stacked variants in the right order', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+it('Invalid arbitrary variants selectors should produce nothing instead of failing', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 1280px) {
- .xl\:p-1 {
- padding: 0.25rem;
- }
- }
- .\[\&_ul\]\:flex ul {
- display: flex;
- }
- .\[\&_ul\]\:flex-col ul {
- flex-direction: column;
- }
- @media (min-width: 768px) {
- .md\:\[\&_ul\]\:flex-row ul {
- flex-direction: row;
- }
- }
- `)
- })
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css``)
})
+})
- it('it should discard arbitrary variants with multiple selectors', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- {
- // escaped commas are a-ok
- // This is separate because prettier complains about `\,` in the template string
- raw: '
',
- },
- ],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .p-1,
- .span\,div .hover\:\[\.span\\\,div_\&\]\:p-1:hover,
- :is(span, div) .hover\:\[\:is\(span\,div\)_\&\]\:p-1:hover,
- div .\[div_\&\]\:p-1,
- div .hover\:\[div_\&\]\:p-1:hover {
+it('should output responsive variants + stacked variants in the right order', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 1280px) {
+ .xl\:p-1 {
padding: 0.25rem;
}
- `)
- })
- })
-
- it('should sort multiple variant fns with normal variants between them', () => {
- /** @type {string[]} */
- let lines = []
-
- for (let a of [1, 2]) {
- for (let b of [2, 1]) {
- for (let c of [1, 2]) {
- for (let d of [2, 1]) {
- for (let e of [1, 2]) {
- lines.push(`
`)
- }
- }
+ }
+ .\[\&_ul\]\:flex ul {
+ display: flex;
+ }
+ .\[\&_ul\]\:flex-col ul {
+ flex-direction: column;
+ }
+ @media (min-width: 768px) {
+ .md\:\[\&_ul\]\:flex-row ul {
+ flex-direction: row;
}
}
- }
-
- // Fisher-Yates shuffle
- for (let i = lines.length - 1; i > 0; i--) {
- let j = Math.floor(Math.random() * i)
- ;[lines[i], lines[j]] = [lines[j], lines[i]]
- }
+ `)
+ })
+})
- let config = {
- content: [
- {
- raw: lines.join('\n'),
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- function ({ addVariant, matchVariant }) {
- addVariant('foo1', "&[data-foo='1']")
- addVariant('foo2', "&[data-foo='2']")
-
- matchVariant('bar', (value) => `&[data-bar='${value}']`, {
- sort: (a, b) => b.value - a.value,
- })
-
- addVariant('baz1', "&[data-baz='1']")
- addVariant('baz2', "&[data-baz='2']")
-
- matchVariant('qux', (value) => `&[data-qux='${value}']`, {
- sort: (a, b) => b.value - a.value,
- })
-
- addVariant('fred1', "&[data-fred='1']")
- addVariant('fred2', "&[data-fred='2']")
- },
- ],
- }
+it('it should discard arbitrary variants with multiple selectors', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ {
+ // escaped commas are a-ok
+ // This is separate because prettier complains about `\,` in the template string
+ raw: '
',
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .p-1,
+ .span\,div .hover\:\[\.span\\\,div_\&\]\:p-1:hover,
+ :is(span, div) .hover\:\[\:is\(span\,div\)_\&\]\:p-1:hover,
+ div .\[div_\&\]\:p-1,
+ div .hover\:\[div_\&\]\:p-1:hover {
+ padding: 0.25rem;
+ }
+ `)
+ })
+})
- let input = css`
- @tailwind utilities;
- `
+it('should sort multiple variant fns with normal variants between them', () => {
+ /** @type {string[]} */
+ let lines = []
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .fred1\:qux-\[2\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'],
- .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'],
- .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='2'],
- .fred2\:qux-\[1\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
+ for (let a of [1, 2]) {
+ for (let b of [2, 1]) {
+ for (let c of [1, 2]) {
+ for (let d of [2, 1]) {
+ for (let e of [1, 2]) {
+ lines.push(`
`)
+ }
}
- `)
- })
+ }
+ }
+ }
+
+ // Fisher-Yates shuffle
+ for (let i = lines.length - 1; i > 0; i--) {
+ let j = Math.floor(Math.random() * i)
+ ;[lines[i], lines[j]] = [lines[j], lines[i]]
+ }
+
+ let config = {
+ content: [
+ {
+ raw: lines.join('\n'),
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ function ({ addVariant, matchVariant }) {
+ addVariant('foo1', "&[data-foo='1']")
+ addVariant('foo2', "&[data-foo='2']")
+
+ matchVariant('bar', (value) => `&[data-bar='${value}']`, {
+ sort: (a, b) => b.value - a.value,
+ })
+
+ addVariant('baz1', "&[data-baz='1']")
+ addVariant('baz2', "&[data-baz='2']")
+
+ matchVariant('qux', (value) => `&[data-qux='${value}']`, {
+ sort: (a, b) => b.value - a.value,
+ })
+
+ addVariant('fred1', "&[data-fred='1']")
+ addVariant('fred2', "&[data-fred='2']")
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .fred1\:qux-\[2\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'],
+ .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'],
+ .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='2'],
+ .fred2\:qux-\[1\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ `)
})
})
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
index 16c6ff771969..bde7df67d93d 100644
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -1,134 +1,133 @@
import fs from 'fs'
import path from 'path'
-import { crosscheck, run, html, css, defaults } from './util/run'
-
-crosscheck(({ stable, oxide, engine }) => {
- test('basic usage', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
{
backdrop-saturate-150
backdrop-sepia
"
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+ >
This should be green text on red background.
- `,
+test('per-plugin colors with the same key can differ when using a custom colors object', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+ This should be green text on red background.
+ `,
+ },
+ ],
+ theme: {
+ // colors & theme MUST be plain objects
+ // If they're functions here the test passes regardless
+ colors: {
+ theme: {
+ bg: 'red',
+ text: 'green',
},
- ],
- theme: {
- // colors & theme MUST be plain objects
- // If they're functions here the test passes regardless
- colors: {
+ },
+ extend: {
+ textColor: {
theme: {
- bg: 'red',
- text: 'green',
+ DEFAULT: 'green',
},
},
- extend: {
- textColor: {
- theme: {
- DEFAULT: 'green',
- },
- },
- backgroundColor: {
- theme: {
- DEFAULT: 'red',
- },
+ backgroundColor: {
+ theme: {
+ DEFAULT: 'red',
},
},
},
- corePlugins: { preflight: false },
- }
+ },
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- stable.expect(result.css).toMatchFormattedCss(css`
- .bg-theme {
- --tw-bg-opacity: 1;
- background-color: rgb(255 0 0 / var(--tw-bg-opacity));
- }
- .text-theme {
- --tw-text-opacity: 1;
- color: rgb(0 128 0 / var(--tw-text-opacity));
- }
- `)
- oxide.expect(result.css).toMatchFormattedCss(css`
- .bg-theme {
- background-color: red;
- }
- .text-theme {
- color: green;
- }
- `)
- })
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-theme {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+ }
+ .text-theme {
+ --tw-text-opacity: 1;
+ color: rgb(0 128 0 / var(--tw-text-opacity));
+ }
+ `)
})
+})
- test('default ring color can be a function', () => {
- function color(variable) {
- return function ({ opacityVariable, opacityValue }) {
- if (opacityValue !== undefined) {
- return `rgba(${variable}, ${opacityValue})`
- }
- if (opacityVariable !== undefined) {
- return `rgba(${variable}, var(${opacityVariable}, 1))`
- }
- return `rgb(${variable})`
+test('default ring color can be a function', () => {
+ function color(variable) {
+ return function ({ opacityVariable, opacityValue }) {
+ if (opacityValue !== undefined) {
+ return `rgba(${variable}, ${opacityValue})`
+ }
+ if (opacityVariable !== undefined) {
+ return `rgba(${variable}, var(${opacityVariable}, 1))`
}
+ return `rgb(${variable})`
}
+ }
- let config = {
- content: [
- {
- raw: html`