-
-
+ it('should be possible to use modifiers and arbitrary groups', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- let expectedPath = env.OXIDE
- ? path.resolve(__dirname, './basic-usage.oxide.test.css')
- : path.resolve(__dirname, './basic-usage.test.css')
- let expected = fs.readFileSync(expectedPath, 'utf8')
-
- expect(result.css).toMatchFormattedCss(expected)
+ return run(input, config).then((result) => {
+ stable
+ .expect(result.css)
+ .toMatchFormattedCss(
+ fs.readFileSync(path.resolve(__dirname, './basic-usage.test.css'), 'utf8')
+ )
+ oxide
+ .expect(result.css)
+ .toMatchFormattedCss(
+ fs.readFileSync(path.resolve(__dirname, './basic-usage.oxide.test.css'), 'utf8')
+ )
+ })
})
-})
-test('all plugins are executed that match a candidate', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- colors: {
- green: {
- light: 'green',
+ test('all plugins are executed that match a candidate', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ colors: {
+ green: {
+ light: 'green',
+ },
},
},
- },
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
-
- .bg-green {
- /* Empty on purpose */
+ corePlugins: { preflight: false },
}
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-green-light {
- --tw-bg-opacity: 1;
- background-color: rgb(0 128 0 / var(--tw-bg-opacity));
- }
+ let input = css`
+ @tailwind utilities;
.bg-green {
/* Empty on purpose */
}
- `)
- })
-})
+ `
-test('per-plugin colors with the same key can differ when using a custom colors object', () => {
- let config = {
- content: [
- {
- raw: html`
-
+
+ `,
+ },
+ ],
+ 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 {
+ text-decoration-line: underline;
+ }
+ .group:hover .group-hover\:underline {
+ text-decoration-line: underline;
+ }
+ .group\/foo:focus .group-\[\&\:focus\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .group:focus .group-\[\&\:focus\]\:underline {
+ text-decoration-line: underline;
+ }
+ .group\/foo[data-open] .group-\[\&\[data-open\]\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .group[data-open] .group-\[\&\[data-open\]\]\:underline {
+ text-decoration-line: underline;
+ }
+ .group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .group.in-foo .group-\[\.in-foo\]\:underline {
+ text-decoration-line: underline;
+ }
+ .in-foo .group\/foo .group-\[\.in-foo_\&\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .in-foo .group .group-\[\.in-foo_\&\]\:underline {
+ text-decoration-line: underline;
+ }
+ .group\/foo:hover .group-\[\:hover\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .group:hover .group-\[\:hover\]\:underline {
+ text-decoration-line: underline;
+ }
+ .group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .group[data-open] .group-\[\[data-open\]\]\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should be possible to use modifiers and arbitrary peers', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ 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 {
+ text-decoration-line: underline;
+ }
+ .peer:hover ~ .peer-hover\:underline {
+ text-decoration-line: underline;
+ }
+ .peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .peer:focus ~ .peer-\[\&\:focus\]\:underline {
+ text-decoration-line: underline;
+ }
+ .peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline {
+ text-decoration-line: underline;
+ }
+ .peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .peer.in-foo ~ .peer-\[\.in-foo\]\:underline {
+ text-decoration-line: underline;
+ }
+ .in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline {
+ text-decoration-line: underline;
+ }
+ .peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline {
+ text-decoration-line: underline;
+ }
+ .peer:hover ~ .peer-\[\:hover\]\:underline {
+ text-decoration-line: underline;
+ }
+ .peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline {
+ text-decoration-line: 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 },
- }
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .group\/foo:hover .group-hover\/foo\:underline {
- text-decoration-line: underline;
- }
- .group:hover .group-hover\:underline {
- text-decoration-line: underline;
- }
- .group\/foo:focus .group-\[\&\:focus\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .group:focus .group-\[\&\:focus\]\:underline {
- text-decoration-line: underline;
- }
- .group\/foo[data-open] .group-\[\&\[data-open\]\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .group[data-open] .group-\[\&\[data-open\]\]\:underline {
- text-decoration-line: underline;
- }
- .group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .group.in-foo .group-\[\.in-foo\]\:underline {
- text-decoration-line: underline;
- }
- .in-foo .group\/foo .group-\[\.in-foo_\&\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .in-foo .group .group-\[\.in-foo_\&\]\:underline {
- text-decoration-line: underline;
- }
- .group\/foo:hover .group-\[\:hover\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .group:hover .group-\[\:hover\]\:underline {
- text-decoration-line: underline;
- }
- .group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .group[data-open] .group-\[\[data-open\]\]\:underline {
- text-decoration-line: underline;
- }
- `)
+ 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('should be possible to use modifiers and arbitrary peers', () => {
- let config = {
- content: [
- {
- raw: html`
-
+
+
+
+
-
-
+ it('Arbitrary variants support multiple attribute selectors', () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
-
-
+ let input = css`
+ @tailwind utilities;
+ `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- 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 {
- text-decoration-line: underline;
- }
- .peer:hover ~ .peer-hover\:underline {
- text-decoration-line: underline;
- }
- .peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .peer:focus ~ .peer-\[\&\:focus\]\:underline {
- text-decoration-line: underline;
- }
- .peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline {
- text-decoration-line: underline;
- }
- .peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .peer.in-foo ~ .peer-\[\.in-foo\]\:underline {
- text-decoration-line: underline;
- }
- .in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline {
- text-decoration-line: underline;
- }
- .peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .peer:hover ~ .peer-\[\:hover\]\:underline {
- text-decoration-line: underline;
- }
- .peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline {
- text-decoration-line: underline;
- }
- .peer[data-open] ~ .peer-\[\[data-open\]\]\:underline {
- text-decoration-line: underline;
- }
- `)
+ 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('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`
+ 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;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css``)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css``)
+ })
})
-})
-it('should output responsive variants + stacked variants in the right order', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+ it('should output responsive variants + stacked variants in the right order', () => {
+ 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;
+ 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;
+ .\[\&_ul\]\:flex ul {
+ display: flex;
}
- }
- `)
+ .\[\&_ul\]\:flex-col ul {
+ flex-direction: column;
+ }
+ @media (min-width: 768px) {
+ .md\:\[\&_ul\]\:flex-row ul {
+ flex-direction: row;
+ }
+ }
+ `)
+ })
})
-})
-it('should sort multiple variant fns with normal variants between them', () => {
- /** @type {string[]} */
- let lines = []
+ 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(``)
+ 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]]
- }
+ // 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]')
+ 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,
- })
+ matchVariant('bar', (value) => `&[data-bar=${value}]`, {
+ sort: (a, b) => b.value - a.value,
+ })
- addVariant('baz1', '&[data-baz=1]')
- addVariant('baz2', '&[data-baz=2]')
+ addVariant('baz1', '&[data-baz=1]')
+ addVariant('baz2', '&[data-baz=2]')
- matchVariant('qux', (value) => `&[data-qux=${value}]`, {
- sort: (a, b) => b.value - a.value,
- })
+ matchVariant('qux', (value) => `&[data-qux=${value}]`, {
+ sort: (a, b) => b.value - a.value,
+ })
- addVariant('fred1', '&[data-fred=1]')
- addVariant('fred2', '&[data-fred=2]')
- },
- ],
- }
+ addVariant('fred1', '&[data-fred=1]')
+ addVariant('fred2', '&[data-fred=2]')
+ },
+ ],
+ }
- let input = css`
- @tailwind utilities;
- `
+ 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'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .fred2\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='2'] {
- padding: 0.25rem;
- }
- .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;
- }
- `)
+ 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'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred1\:qux-\[1\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='1'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[2\]\:baz2\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='2'][data-qux='2'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz1\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='1'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz1\:bar-\[1\]\:foo2\:p-1[data-foo='2'][data-bar='1'][data-baz='1'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo1\:p-1[data-foo='1'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz2\:bar-\[2\]\:foo2\:p-1[data-foo='2'][data-bar='2'][data-baz='2'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .fred2\:qux-\[1\]\:baz2\:bar-\[1\]\:foo1\:p-1[data-foo='1'][data-bar='1'][data-baz='2'][data-qux='1'][data-fred='2'] {
+ padding: 0.25rem;
+ }
+ .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 7a6aba6a1..f71dc9106 100644
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -1,135 +1,132 @@
import fs from 'fs'
import path from 'path'
+import { crosscheck, run, html, css, defaults } from './util/run'
-import { env } from '../src/lib/sharedState'
-import { html, run, css, defaults } from './util/run'
-
-let oxideSkip = env.OXIDE ? test.skip : test
-
-test('basic usage', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {
backdrop-saturate-150
backdrop-sepia
"
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+ >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',
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-green-light {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 128 0 / var(--tw-bg-opacity));
+ }
+
+ .bg-green {
+ /* Empty on purpose */
+ }
+ `)
+ })
+ })
+
+ 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.
+ `,
},
- },
- extend: {
- textColor: {
+ ],
+ theme: {
+ // colors & theme MUST be plain objects
+ // If they're functions here the test passes regardless
+ colors: {
theme: {
- DEFAULT: 'green',
+ bg: 'red',
+ text: 'green',
},
},
- backgroundColor: {
- theme: {
- DEFAULT: 'red',
+ extend: {
+ textColor: {
+ theme: {
+ DEFAULT: 'green',
+ },
+ },
+ backgroundColor: {
+ theme: {
+ DEFAULT: 'red',
+ },
},
},
},
- },
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- 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})`
+ corePlugins: { preflight: false },
}
- }
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
+ let input = css`
+ @tailwind utilities;
+ `
- theme: {
- extend: {
- ringColor: {
- DEFAULT: color('var(--red)'),
+ 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})`
+ }
+ }
+
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+
+ theme: {
+ extend: {
+ ringColor: {
+ DEFAULT: color('var(--red)'),
+ },
},
},
- },
- plugins: [],
- corePlugins: { preflight: false },
- }
+ plugins: [],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: 'rgba(var(--red), 0.5)' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: 'rgba(var(--red), 0.5)' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('falsy config values still work', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- inset: {
- 0: 0,
+ it('falsy config values still work', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ inset: {
+ 0: 0,
+ },
},
- },
- plugins: [],
- corePlugins: { preflight: false },
- }
+ plugins: [],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .inset-0 {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .inset-0 {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+ `)
+ })
})
-})
-it('shadows support values without a leading zero', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- boxShadow: {
- one: '0.5rem 0.5rem 0.5rem #0005',
- two: '.5rem .5rem .5rem #0005',
+ it('shadows support values without a leading zero', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ boxShadow: {
+ one: '0.5rem 0.5rem 0.5rem #0005',
+ two: '.5rem .5rem .5rem #0005',
+ },
},
- },
- plugins: [],
- corePlugins: { preflight: false },
- }
+ plugins: [],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .shadow-one {
- --tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
- --tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- }
- .shadow-two {
- --tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
- --tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
- var(--tw-shadow);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .shadow-one {
+ --tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
+ --tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+ var(--tw-shadow);
+ }
+ .shadow-two {
+ --tw-shadow: 0.5rem 0.5rem 0.5rem #0005;
+ --tw-shadow-colored: 0.5rem 0.5rem 0.5rem var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+ var(--tw-shadow);
+ }
+ `)
+ })
})
-})
-it('can scan extremely long classes without crashing', () => {
- let val = 'cols-' + '-a'.repeat(65536)
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
+ it('can scan extremely long classes without crashing', () => {
+ let val = 'cols-' + '-a'.repeat(65536)
+ 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``)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css``)
+ })
})
-})
-it('does not produce duplicate output when seeing variants preceding a wildcard (*)', () => {
- let config = {
- content: [{ raw: html`underline focus:*` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
-
- * {
- color: red;
+ it('does not produce duplicate output when seeing variants preceding a wildcard (*)', () => {
+ let config = {
+ content: [{ raw: html`underline focus:*` }],
+ corePlugins: { preflight: false },
}
- .combined,
- * {
- text-align: center;
- }
-
- @layer base {
- * {
- color: blue;
- }
-
- .combined,
- * {
- color: red;
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- * {
- color: blue;
- }
-
- .combined,
- * {
- color: red;
- }
-
- ${defaults}
-
- .underline {
- text-decoration-line: underline;
- }
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
* {
color: red;
@@ -494,419 +458,468 @@ it('does not produce duplicate output when seeing variants preceding a wildcard
* {
text-align: center;
}
- `)
- })
-})
-it('can parse box shadows with variables', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- boxShadow: {
- lg: 'var(-a, 0 35px 60px -15px rgba(0, 0, 0)), 0 0 1px rgb(0, 0, 0)',
+ @layer base {
+ * {
+ color: blue;
+ }
+
+ .combined,
+ * {
+ color: red;
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ * {
+ color: blue;
+ }
+
+ .combined,
+ * {
+ color: red;
+ }
+
+ ${defaults}
+
+ .underline {
+ text-decoration-line: underline;
+ }
+
+ * {
+ color: red;
+ }
+
+ .combined,
+ * {
+ text-align: center;
+ }
+ `)
+ })
+ })
+
+ it('can parse box shadows with variables', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ boxShadow: {
+ lg: 'var(-a, 0 35px 60px -15px rgba(0, 0, 0)), 0 0 1px rgb(0, 0, 0)',
+ },
},
- },
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .shadow-lg {
- --tw-shadow: var(-a, 0 35px 60px -15px rgba(0, 0, 0)), 0 0 1px rgb(0, 0, 0);
- --tw-shadow-colored: 0 35px 60px -15px var(--tw-shadow-color),
- 0 0 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);
- }
- `)
- })
-})
-
-it('should generate styles using :not(.unknown-class) even if `.unknown-class` does not exist', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind components;
-
- @layer components {
- div:not(.unknown-class) {
- color: red;
- }
+ corePlugins: { preflight: false },
}
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- div:not(.unknown-class) {
- color: red;
- }
- `)
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .shadow-lg {
+ --tw-shadow: var(-a, 0 35px 60px -15px rgba(0, 0, 0)), 0 0 1px rgb(0, 0, 0);
+ --tw-shadow-colored: 0 35px 60px -15px var(--tw-shadow-color),
+ 0 0 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);
+ }
+ `)
+ })
})
-})
-it('supports multiple backgrounds as arbitrary values even if only some are quoted', () => {
- let config = {
- content: [
- {
- raw: html``,
+ it('should generate styles using :not(.unknown-class) even if `.unknown-class` does not exist', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind components;
+
+ @layer components {
+ div:not(.unknown-class) {
+ color: red;
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ div:not(.unknown-class) {
+ color: red;
+ }
+ `)
+ })
+ })
+
+ it('supports multiple backgrounds as arbitrary values even if only some are quoted', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-\[url\(\'\/images\/one-two-three\.png\'\)\2c
+ linear-gradient\(to_right\2c
+ _\#eeeeee\2c
+ _\#000000\)\] {
+ background-image: url('/images/one-two-three.png'),
+ linear-gradient(to right, #eeeeee, #000000);
+ }
+ `)
+ })
+ })
+
+ it('The "default" ring opacity is used by the default ring color when not using respectDefaultRingColorOpacity (1)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.5)' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
+ })
+
+ it('The "default" ring opacity is used by the default ring color when not using respectDefaultRingColorOpacity (2)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringOpacity: {
+ DEFAULT: 0.75,
+ },
},
- ],
- corePlugins: { preflight: false },
- }
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-\[url\(\'\/images\/one-two-three\.png\'\)\2c
- linear-gradient\(to_right\2c
- _\#eeeeee\2c
- _\#000000\)\] {
- background-image: url('/images/one-two-three.png'),
- linear-gradient(to right, #eeeeee, #000000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.75)' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('The "default" ring opacity is used by the default ring color when not using respectDefaultRingColorOpacity (1)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.5)' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
- })
-})
-
-it('The "default" ring opacity is used by the default ring color when not using respectDefaultRingColorOpacity (2)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringOpacity: {
- DEFAULT: 0.75,
+ it('Customizing the default ring color uses the "default" opacity when not using respectDefaultRingColorOpacity (1)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringColor: {
+ DEFAULT: '#ff7f7f',
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: 'rgb(59 130 246 / 0.75)' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('Customizing the default ring color uses the "default" opacity when not using respectDefaultRingColorOpacity (1)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringColor: {
- DEFAULT: '#ff7f7f',
+ it('Customizing the default ring color uses the "default" opacity when not using respectDefaultRingColorOpacity (2)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringColor: {
+ DEFAULT: '#ff7f7f00',
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('Customizing the default ring color uses the "default" opacity when not using respectDefaultRingColorOpacity (2)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringColor: {
- DEFAULT: '#ff7f7f00',
+ it('The "default" ring color ignores the default opacity when using respectDefaultRingColorOpacity (1)', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: '#3b82f67f' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
+ })
+
+ it('The "default" ring color ignores the default opacity when using respectDefaultRingColorOpacity (2)', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringOpacity: {
+ DEFAULT: 0.75,
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: 'rgb(255 127 127 / 0.5)' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: '#3b82f67f' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('The "default" ring color ignores the default opacity when using respectDefaultRingColorOpacity (1)', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: '#3b82f67f' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
- })
-})
-
-it('The "default" ring color ignores the default opacity when using respectDefaultRingColorOpacity (2)', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringOpacity: {
- DEFAULT: 0.75,
+ it('Customizing the default ring color preserves its opacity when using respectDefaultRingColorOpacity (1)', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringColor: {
+ DEFAULT: '#ff7f7f',
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: '#3b82f67f' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: '#ff7f7f' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('Customizing the default ring color preserves its opacity when using respectDefaultRingColorOpacity (1)', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringColor: {
- DEFAULT: '#ff7f7f',
+ it('Customizing the default ring color preserves its opacity when using respectDefaultRingColorOpacity (2)', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringColor: {
+ DEFAULT: '#ff7f7f00',
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: '#ff7f7f' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults({ defaultRingColor: '#ff7f7f00' })}
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ `)
+ })
})
-})
-it('Customizing the default ring color preserves its opacity when using respectDefaultRingColorOpacity (2)', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringColor: {
- DEFAULT: '#ff7f7f00',
+ it('A bare ring-opacity utility is not supported when not using respectDefaultRingColorOpacity', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringOpacity: {
+ DEFAULT: '0.33',
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults({ defaultRingColor: '#ff7f7f00' })}
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css``)
+ })
})
-})
-it('A bare ring-opacity utility is not supported when not using respectDefaultRingColorOpacity', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringOpacity: {
- DEFAULT: '0.33',
+ it('A bare ring-opacity utility is supported when using respectDefaultRingColorOpacity', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ theme: {
+ ringOpacity: {
+ DEFAULT: '0.33',
+ },
},
- },
- }
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css``)
- })
-})
-
-it('A bare ring-opacity utility is supported when using respectDefaultRingColorOpacity', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- theme: {
- ringOpacity: {
- DEFAULT: '0.33',
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .ring-opacity {
- --tw-ring-opacity: 0.33;
- }
- `)
- })
-})
-
-it('Ring color utilities are generated when using respectDefaultRingColorOpacity', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .ring {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
- }
- .ring-blue-500 {
- --tw-ring-opacity: 1;
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
- }
- `)
- })
-})
-
-oxideSkip('should not crash when group names contain special characters', () => {
- let config = {
- future: { respectDefaultRingColorOpacity: true },
- content: [
- {
- raw: '',
- },
- ],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .group\/\$\{id\}:hover .group-hover\/\$\{id\}\:visible {
- visibility: visible;
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .ring-opacity {
+ --tw-ring-opacity: 0.33;
+ }
+ `)
+ })
+ })
+
+ it('Ring color utilities are generated when using respectDefaultRingColorOpacity', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .ring {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ .ring-blue-500 {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+ }
+ `)
+ })
+ })
+
+ oxide.test.todo('should not crash when group names contain special characters')
+ stable.test('should not crash when group names contain special characters', () => {
+ let config = {
+ future: { respectDefaultRingColorOpacity: true },
+ content: [
+ {
+ raw: '
',
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .group\/\$\{id\}:hover .group-hover\/\$\{id\}\:visible {
+ visibility: visible;
+ }
+ `)
+ })
})
})
diff --git a/tests/blocklist.test.js b/tests/blocklist.test.js
index acd4be359..b9667101c 100644
--- a/tests/blocklist.test.js
+++ b/tests/blocklist.test.js
@@ -1,117 +1,119 @@
-import { run, html, css } from './util/run'
import log from '../src/util/log'
+import { crosscheck, run, html, css } from './util/run'
-let warn
+crosscheck(() => {
+ let warn
-beforeEach(() => {
- warn = jest.spyOn(log, 'warn')
-})
+ beforeEach(() => {
+ warn = jest.spyOn(log, 'warn')
+ })
-afterEach(() => warn.mockClear())
+ afterEach(() => warn.mockClear())
-it('can block classes matched literally', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- blocklist: ['font', 'uppercase', 'hover:text-sm', 'bg-red-500/50', 'my-custom-class'],
- }
-
- let input = css`
- @tailwind utilities;
- .my-custom-class {
- color: red;
+ it('can block classes matched literally', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ blocklist: ['font', 'uppercase', 'hover:text-sm', 'bg-red-500/50', 'my-custom-class'],
}
- `
- return run(input, config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .font-bold {
- font-weight: 700;
- }
+ let input = css`
+ @tailwind utilities;
.my-custom-class {
color: red;
}
- @media (min-width: 640px) {
- .sm\:hover\:text-sm:hover {
- font-size: 0.875rem;
- line-height: 1.25rem;
+ `
+
+ return run(input, config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ .my-custom-class {
+ color: red;
+ }
+ @media (min-width: 640px) {
+ .sm\:hover\:text-sm:hover {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+ }
+ `)
+ })
+ })
+
+ it('can block classes inside @layer', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ blocklist: ['my-custom-class'],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ @layer utilities {
+ .my-custom-class {
+ color: red;
}
}
- `)
+ `
+
+ return run(input, config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ `)
+ })
})
-})
-it('can block classes inside @layer', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- blocklist: ['my-custom-class'],
- }
-
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .my-custom-class {
- color: red;
- }
+ it('blocklists do NOT support regexes', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ blocklist: [/^bg-\[[^]+\]$/],
}
- `
- return run(input, config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .font-bold {
- font-weight: 700;
- }
- `)
- })
-})
+ let result = await run('@tailwind utilities', config)
-it('blocklists do NOT support regexes', async () => {
- let config = {
- content: [{ raw: html`` }],
- blocklist: [/^bg-\[[^]+\]$/],
- }
-
- let result = await run('@tailwind utilities', config)
-
- expect(result.css).toMatchCss(css`
- .bg-\[\#f00d1e\] {
- --tw-bg-opacity: 1;
- background-color: rgb(240 13 30 / var(--tw-bg-opacity));
- }
- .font-bold {
- font-weight: 700;
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['blocklist-invalid'])
-})
-
-it('can block classes generated by the safelist', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [{ pattern: /^bg-red-(400|500)$/ }],
- blocklist: ['bg-red-500'],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .bg-red-400 {
+ expect(result.css).toMatchCss(css`
+ .bg-\[\#f00d1e\] {
--tw-bg-opacity: 1;
- background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+ background-color: rgb(240 13 30 / var(--tw-bg-opacity));
}
.font-bold {
font-weight: 700;
}
`)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['blocklist-invalid'])
+ })
+
+ it('can block classes generated by the safelist', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [{ pattern: /^bg-red-(400|500)$/ }],
+ blocklist: ['bg-red-500'],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+ }
+ .font-bold {
+ font-weight: 700;
+ }
+ `)
+ })
})
})
diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js
index c5f98aad5..6cc817de8 100644
--- a/tests/collapse-adjacent-rules.test.js
+++ b/tests/collapse-adjacent-rules.test.js
@@ -1,85 +1,37 @@
-import { run, html, css, defaults } from './util/run'
+import { crosscheck, run, html, css, defaults } from './util/run'
-test('collapse adjacent rules', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {},
- plugins: [
- function ({ addVariant }) {
- addVariant('foo-bar', '@supports (foo: bar)')
- },
- ],
- }
+crosscheck(() => {
+ test('collapse adjacent rules', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {},
+ plugins: [
+ function ({ addVariant }) {
+ addVariant('foo-bar', '@supports (foo: bar)')
+ },
+ ],
+ }
- let input = css`
- @tailwind base;
- @font-face {
- font-family: 'Inter';
- src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
- }
- @font-face {
- font-family: 'Gilroy';
- src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
- }
- @page {
- margin: 1cm;
- }
- @tailwind components;
- @tailwind utilities;
- @layer base {
- @font-face {
- font-family: 'Poppins';
- src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
- }
- @font-face {
- font-family: 'Proxima Nova';
- src: url('/fonts/ProximaNova.woff2') format('woff2'),
- url('/fonts/ProximaNova.woff') format('woff');
- }
- }
- .foo,
- .bar {
- color: black;
- }
- .foo,
- .bar {
- font-weight: 700;
- }
- .some-apply-thing {
- @apply foo-bar:md:text-black foo-bar:md:font-bold foo-bar:text-black foo-bar:font-bold md:font-bold md:text-black;
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @font-face {
- font-family: 'Poppins';
- src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
- }
- @font-face {
- font-family: 'Proxima Nova';
- src: url('/fonts/ProximaNova.woff2') format('woff2'),
- url('/fonts/ProximaNova.woff') format('woff');
- }
- ${defaults}
+ let input = css`
+ @tailwind base;
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
@@ -91,29 +43,72 @@ test('collapse adjacent rules', () => {
@page {
margin: 1cm;
}
- .font-bold {
- font-weight: 700;
+ @tailwind components;
+ @tailwind utilities;
+ @layer base {
+ @font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins.woff2') format('woff2'),
+ url('/fonts/Poppins.woff') format('woff');
+ }
+ @font-face {
+ font-family: 'Proxima Nova';
+ src: url('/fonts/ProximaNova.woff2') format('woff2'),
+ url('/fonts/ProximaNova.woff') format('woff');
+ }
}
.foo,
.bar {
color: black;
+ }
+ .foo,
+ .bar {
font-weight: 700;
}
- @supports (foo: bar) {
- .some-apply-thing {
- font-weight: 700;
- --tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
- }
+ .some-apply-thing {
+ @apply foo-bar:md:text-black foo-bar:md:font-bold foo-bar:text-black foo-bar:font-bold md:font-bold md:text-black;
}
- @media (min-width: 768px) {
- .some-apply-thing {
- font-weight: 700;
- --tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins.woff2') format('woff2'),
+ url('/fonts/Poppins.woff') format('woff');
+ }
+ @font-face {
+ font-family: 'Proxima Nova';
+ src: url('/fonts/ProximaNova.woff2') format('woff2'),
+ url('/fonts/ProximaNova.woff') format('woff');
+ }
+ ${defaults}
+ @font-face {
+ font-family: 'Inter';
+ src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
+ }
+ @font-face {
+ font-family: 'Gilroy';
+ src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
+ }
+ @page {
+ margin: 1cm;
+ }
+ .font-bold {
+ font-weight: 700;
+ }
+ .foo,
+ .bar {
+ color: black;
+ font-weight: 700;
+ }
+ @supports (foo: bar) {
+ .some-apply-thing {
+ font-weight: 700;
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity));
+ }
}
- }
- @supports (foo: bar) {
@media (min-width: 768px) {
.some-apply-thing {
font-weight: 700;
@@ -121,49 +116,58 @@ test('collapse adjacent rules', () => {
color: rgb(0 0 0 / var(--tw-text-opacity));
}
}
- }
- @media (min-width: 640px) {
- .sm\:text-center {
- text-align: center;
+ @supports (foo: bar) {
+ @media (min-width: 768px) {
+ .some-apply-thing {
+ font-weight: 700;
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity));
+ }
+ }
}
- .sm\:font-bold {
- font-weight: 700;
+ @media (min-width: 640px) {
+ .sm\:text-center {
+ text-align: center;
+ }
+ .sm\:font-bold {
+ font-weight: 700;
+ }
}
- }
- @media (min-width: 768px) {
- .md\:text-center {
- text-align: center;
+ @media (min-width: 768px) {
+ .md\:text-center {
+ text-align: center;
+ }
+ .md\:font-bold {
+ font-weight: 700;
+ }
}
- .md\:font-bold {
- font-weight: 700;
+ @media (min-width: 1024px) {
+ .lg\:text-center {
+ text-align: center;
+ }
+ .lg\:font-bold {
+ font-weight: 700;
+ }
}
- }
- @media (min-width: 1024px) {
- .lg\:text-center {
- text-align: center;
- }
- .lg\:font-bold {
- font-weight: 700;
- }
- }
- `)
+ `)
+ })
})
-})
-test('duplicate url imports does not break rule collapsing', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
+ test('duplicate url imports does not break rule collapsing', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @import url('https://example.com');
- @import url('https://example.com');
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
+ let input = css`
@import url('https://example.com');
- `)
+ @import url('https://example.com');
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @import url('https://example.com');
+ `)
+ })
})
})
diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js
index db1651864..629f35639 100644
--- a/tests/collapse-duplicate-declarations.test.js
+++ b/tests/collapse-duplicate-declarations.test.js
@@ -1,175 +1,177 @@
-import { run, css, html } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-it('should collapse duplicate declarations with the same units (px)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- .example {
- height: 100px;
- height: 200px;
- }
+crosscheck(() => {
+ it('should collapse duplicate declarations with the same units (px)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ plugins: [],
}
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- height: 200px;
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ .example {
+ height: 100px;
+ height: 200px;
+ }
}
- `)
- })
-})
-
-it('should collapse duplicate declarations with the same units (no unit)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- .example {
- line-height: 3;
- line-height: 2;
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- line-height: 2;
- }
- `)
- })
-})
-
-it('should not collapse duplicate declarations with the different units', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- .example {
- height: 100px;
- height: 50%;
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- height: 100px;
- height: 50%;
- }
- `)
- })
-})
-
-it('should collapse the duplicate declarations with the same unit, but leave the ones with different units', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- .example {
- height: 100px;
- height: 50%;
- height: 20vh;
- height: 200px;
- height: 100%;
- height: 30vh;
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- height: 200px;
- height: 100%;
- height: 30vh;
- }
- `)
- })
-})
-
-it('should collapse the duplicate declarations with the exact same value', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- .example {
- height: var(--value);
- color: blue;
- height: var(--value);
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- color: blue;
- height: var(--value);
- }
- `)
- })
-})
-
-it('should work on a real world example', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- .h-available {
- height: 100%;
- height: 100vh;
- height: -webkit-fill-available;
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .h-available {
- height: 100%;
- height: 100vh;
- height: -webkit-fill-available;
- }
- `)
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .example {
+ height: 200px;
+ }
+ `)
+ })
+ })
+
+ it('should collapse duplicate declarations with the same units (no unit)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ .example {
+ line-height: 3;
+ line-height: 2;
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .example {
+ line-height: 2;
+ }
+ `)
+ })
+ })
+
+ it('should not collapse duplicate declarations with the different units', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ .example {
+ height: 100px;
+ height: 50%;
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .example {
+ height: 100px;
+ height: 50%;
+ }
+ `)
+ })
+ })
+
+ it('should collapse the duplicate declarations with the same unit, but leave the ones with different units', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ .example {
+ height: 100px;
+ height: 50%;
+ height: 20vh;
+ height: 200px;
+ height: 100%;
+ height: 30vh;
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .example {
+ height: 200px;
+ height: 100%;
+ height: 30vh;
+ }
+ `)
+ })
+ })
+
+ it('should collapse the duplicate declarations with the exact same value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ .example {
+ height: var(--value);
+ color: blue;
+ height: var(--value);
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .example {
+ color: blue;
+ height: var(--value);
+ }
+ `)
+ })
+ })
+
+ it('should work on a real world example', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ .h-available {
+ height: 100%;
+ height: 100vh;
+ height: -webkit-fill-available;
+ }
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .h-available {
+ height: 100%;
+ height: 100vh;
+ height: -webkit-fill-available;
+ }
+ `)
+ })
})
})
diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
index eb708308f..127e5c7b3 100644
--- a/tests/color-opacity-modifiers.test.js
+++ b/tests/color-opacity-modifiers.test.js
@@ -1,234 +1,236 @@
-import { run, css, html } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('basic color opacity modifier', async () => {
- let config = {
- content: [{ raw: html`` }],
- }
+crosscheck(() => {
+ test('basic color opacity modifier', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-red-500\/50 {
- background-color: rgb(239 68 68 / 0.5);
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-red-500\/50 {
+ background-color: rgb(239 68 68 / 0.5);
+ }
+ `)
+ })
})
-})
-test('colors with slashes are matched first', async () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- extend: {
+ test('colors with slashes are matched first', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ extend: {
+ colors: {
+ 'red-500/50': '#ff0000',
+ },
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-red-500\/50 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+ }
+ `)
+ })
+ })
+
+ test('arbitrary color opacity modifier', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-red-500\/\[var\(--opacity\)\] {
+ background-color: rgb(239 68 68 / var(--opacity));
+ }
+ `)
+ })
+ })
+
+ test('missing alpha generates nothing', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(``)
+ })
+ })
+
+ test('arbitrary color with opacity from scale', async () => {
+ let config = {
+ content: [{ raw: 'bg-[wheat]/50' }],
+ theme: {},
+ plugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-\[wheat\]\/50 {
+ background-color: rgb(245 222 179 / 0.5);
+ }
+ `)
+ })
+ })
+
+ test('arbitrary color with arbitrary opacity', async () => {
+ let config = {
+ content: [{ raw: 'bg-[#bada55]/[0.2]' }],
+ theme: {},
+ plugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-\[\#bada55\]\/\[0\.2\] {
+ background-color: rgb(186 218 85 / 0.2);
+ }
+ `)
+ })
+ })
+
+ test('undefined theme color with opacity from scale', async () => {
+ let config = {
+ content: [{ raw: 'bg-garbage/50' }],
+ theme: {},
+ plugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(``)
+ })
+ })
+
+ test('values not in the opacity config are ignored', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ opacity: {
+ 0: '0',
+ 25: '0.25',
+ 5: '0.5',
+ 75: '0.75',
+ 100: '1',
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(``)
+ })
+ })
+
+ test('function colors are supported', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
colors: {
- 'red-500/50': '#ff0000',
+ blue: ({ opacityValue }) => {
+ return `rgba(var(--colors-blue), ${opacityValue})`
+ },
},
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-red-500\/50 {
- --tw-bg-opacity: 1;
- background-color: rgb(255 0 0 / var(--tw-bg-opacity));
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-blue\/50 {
+ background-color: rgba(var(--colors-blue), 0.5);
+ }
+ `)
+ })
})
-})
-test('arbitrary color opacity modifier', async () => {
- let config = {
- content: [{ raw: html`` }],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-red-500\/\[var\(--opacity\)\] {
- background-color: rgb(239 68 68 / var(--opacity));
- }
- `)
- })
-})
-
-test('missing alpha generates nothing', async () => {
- let config = {
- content: [{ raw: html`` }],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(``)
- })
-})
-
-test('arbitrary color with opacity from scale', async () => {
- let config = {
- content: [{ raw: 'bg-[wheat]/50' }],
- theme: {},
- plugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-\[wheat\]\/50 {
- background-color: rgb(245 222 179 / 0.5);
- }
- `)
- })
-})
-
-test('arbitrary color with arbitrary opacity', async () => {
- let config = {
- content: [{ raw: 'bg-[#bada55]/[0.2]' }],
- theme: {},
- plugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-\[\#bada55\]\/\[0\.2\] {
- background-color: rgb(186 218 85 / 0.2);
- }
- `)
- })
-})
-
-test('undefined theme color with opacity from scale', async () => {
- let config = {
- content: [{ raw: 'bg-garbage/50' }],
- theme: {},
- plugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(``)
- })
-})
-
-test('values not in the opacity config are ignored', async () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- opacity: {
- 0: '0',
- 25: '0.25',
- 5: '0.5',
- 75: '0.75',
- 100: '1',
- },
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(``)
- })
-})
-
-test('function colors are supported', async () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- colors: {
- blue: ({ opacityValue }) => {
- return `rgba(var(--colors-blue), ${opacityValue})`
+ test('utilities that support any type are supported', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ theme: {
+ extend: {
+ fill: (theme) => theme('colors'),
},
},
- },
- }
+ plugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-blue\/50 {
- background-color: rgba(var(--colors-blue), 0.5);
- }
- `)
- })
-})
-
-test('utilities that support any type are supported', async () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- theme: {
- extend: {
- fill: (theme) => theme('colors'),
- },
- },
- plugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .from-red-500\/50 {
- --tw-gradient-from: rgb(239 68 68 / 0.5);
- --tw-gradient-to: rgb(239 68 68 / 0);
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
- }
- .fill-red-500\/25 {
- fill: rgb(239 68 68 / 0.25);
- }
- .placeholder-red-500\/75::placeholder {
- color: rgb(239 68 68 / 0.75);
- }
- `)
- })
-})
-
-test('opacity modifier in combination with partial custom properties', async () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\] {
- --tw-bg-opacity: 1;
- background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
- }
- .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\]\/50 {
- background-color: hsl(123 50% var(--foo) / 0.5);
- }
- .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
- --tw-bg-opacity: 1;
- background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
- }
- .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
- background-color: hsl(123 var(--foo) 50% / 0.5);
- }
- .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
- --tw-bg-opacity: 1;
- background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
- }
- .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
- background-color: hsl(var(--foo) 50% 50% / 0.5);
- }
- .bg-\[hsl\(var\(--foo\)\2c var\(--bar\)\2c var\(--baz\)\)\]\/50 {
- background-color: hsl(var(--foo) var(--bar) var(--baz) / 0.5);
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .from-red-500\/50 {
+ --tw-gradient-from: rgb(239 68 68 / 0.5);
+ --tw-gradient-to: rgb(239 68 68 / 0);
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+ }
+ .fill-red-500\/25 {
+ fill: rgb(239 68 68 / 0.25);
+ }
+ .placeholder-red-500\/75::placeholder {
+ color: rgb(239 68 68 / 0.75);
+ }
+ `)
+ })
+ })
+
+ test('opacity modifier in combination with partial custom properties', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\] {
+ --tw-bg-opacity: 1;
+ background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
+ }
+ .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\]\/50 {
+ background-color: hsl(123 50% var(--foo) / 0.5);
+ }
+ .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
+ --tw-bg-opacity: 1;
+ background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
+ }
+ .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
+ background-color: hsl(123 var(--foo) 50% / 0.5);
+ }
+ .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
+ --tw-bg-opacity: 1;
+ background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
+ }
+ .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
+ background-color: hsl(var(--foo) 50% 50% / 0.5);
+ }
+ .bg-\[hsl\(var\(--foo\)\2c var\(--bar\)\2c var\(--baz\)\)\]\/50 {
+ background-color: hsl(var(--foo) var(--bar) var(--baz) / 0.5);
+ }
+ `)
+ })
})
})
diff --git a/tests/color.test.js b/tests/color.test.js
index 8d4f611c0..0c2c7b409 100644
--- a/tests/color.test.js
+++ b/tests/color.test.js
@@ -1,89 +1,92 @@
import { parseColor, formatColor } from '../src/util/color'
+import { crosscheck } from './util/run'
-describe('parseColor', () => {
- it.each`
- color | output
- ${'black'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
- ${'#0088cc'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
- ${'#08c'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
- ${'#0088cc99'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
- ${'#08c9'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
- ${'rgb(0, 30, 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
- ${'rgba(0, 30, 60, 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
- ${'rgb(0 30 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
- ${'rgb(0 30 60 / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
- ${'rgb(var(--foo), 30, 60)'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
- ${'rgb(0, var(--foo), 60)'} | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
- ${'rgb(0, 30, var(--foo))'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
- ${'rgb(0, 30, var(--foo), 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
- ${'rgb(var(--foo), 30, var(--bar))'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
- ${'rgb(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
- ${'rgb(var(--foo) 30 60)'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
- ${'rgb(0 var(--foo) 60)'} | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
- ${'rgb(0 30 var(--foo))'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
- ${'rgb(0 30 var(--foo) / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
- ${'rgb(var(--foo) 30 var(--bar))'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
- ${'rgb(var(--foo) var(--bar) var(--baz))'} | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
- ${'hsl(0, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
- ${'hsl(0deg, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
- ${'hsl(0rad, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
- ${'hsl(0grad, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
- ${'hsl(0turn, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
- ${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
- ${'hsla(0deg, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
- ${'hsla(0rad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
- ${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
- ${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
- ${'hsl(0 30% 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
- ${'hsl(0deg 30% 60%)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
- ${'hsl(0rad 30% 60%)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
- ${'hsl(0grad 30% 60%)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
- ${'hsl(0turn 30% 60%)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
- ${'hsl(0 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
- ${'hsl(0deg 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
- ${'hsl(0rad 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
- ${'hsl(0grad 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
- ${'hsl(0turn 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
- ${'hsl(var(--foo), 30%, 60%)'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
- ${'hsl(0, var(--foo), 60%)'} | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
- ${'hsl(0, 30%, var(--foo))'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
- ${'hsl(0, 30%, var(--foo), 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
- ${'hsl(var(--foo), 30%, var(--bar))'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
- ${'hsl(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
- ${'hsl(var(--foo) 30% 60%)'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
- ${'hsl(0 var(--foo) 60%)'} | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
- ${'hsl(0 30% var(--foo))'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
- ${'hsl(0 30% var(--foo) / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
- ${'hsl(var(--foo) 30% var(--bar))'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
- ${'hsl(var(--foo) var(--bar) var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
- ${'transparent'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
- `('should parse "$color" to the correct value', ({ color, output }) => {
- expect(parseColor(color)).toEqual(output)
+crosscheck(() => {
+ describe('parseColor', () => {
+ it.each`
+ color | output
+ ${'black'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
+ ${'#0088cc'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+ ${'#08c'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+ ${'#0088cc99'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+ ${'#08c9'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+ ${'rgb(0, 30, 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+ ${'rgba(0, 30, 60, 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+ ${'rgb(0 30 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+ ${'rgb(0 30 60 / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+ ${'rgb(var(--foo), 30, 60)'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
+ ${'rgb(0, var(--foo), 60)'} | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
+ ${'rgb(0, 30, var(--foo))'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
+ ${'rgb(0, 30, var(--foo), 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
+ ${'rgb(var(--foo), 30, var(--bar))'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
+ ${'rgb(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+ ${'rgb(var(--foo) 30 60)'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
+ ${'rgb(0 var(--foo) 60)'} | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
+ ${'rgb(0 30 var(--foo))'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
+ ${'rgb(0 30 var(--foo) / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
+ ${'rgb(var(--foo) 30 var(--bar))'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
+ ${'rgb(var(--foo) var(--bar) var(--baz))'} | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+ ${'hsl(0, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0deg, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0rad, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0grad, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0turn, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+ ${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+ ${'hsla(0deg, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+ ${'hsla(0rad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+ ${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+ ${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+ ${'hsl(0 30% 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0deg 30% 60%)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0rad 30% 60%)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0grad 30% 60%)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0turn 30% 60%)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+ ${'hsl(0deg 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+ ${'hsl(0rad 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+ ${'hsl(0grad 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+ ${'hsl(0turn 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+ ${'hsl(var(--foo), 30%, 60%)'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0, var(--foo), 60%)'} | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
+ ${'hsl(0, 30%, var(--foo))'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
+ ${'hsl(0, 30%, var(--foo), 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
+ ${'hsl(var(--foo), 30%, var(--bar))'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
+ ${'hsl(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+ ${'hsl(var(--foo) 30% 60%)'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
+ ${'hsl(0 var(--foo) 60%)'} | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
+ ${'hsl(0 30% var(--foo))'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
+ ${'hsl(0 30% var(--foo) / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
+ ${'hsl(var(--foo) 30% var(--bar))'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
+ ${'hsl(var(--foo) var(--bar) var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+ ${'transparent'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
+ `('should parse "$color" to the correct value', ({ color, output }) => {
+ expect(parseColor(color)).toEqual(output)
+ })
+
+ it.each`
+ color
+ ${'var(--my-color)'}
+ ${'currentColor'}
+ ${'inherit'}
+ ${'initial'}
+ ${'revert'}
+ ${'unset'}
+ `('should return `null` for unparseable color "$color"', ({ color }) => {
+ expect(parseColor(color)).toBe(null)
+ })
})
- it.each`
- color
- ${'var(--my-color)'}
- ${'currentColor'}
- ${'inherit'}
- ${'initial'}
- ${'revert'}
- ${'unset'}
- `('should return `null` for unparseable color "$color"', ({ color }) => {
- expect(parseColor(color)).toBe(null)
- })
-})
-
-describe('formatColor', () => {
- it.each`
- color | output
- ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }} | ${'rgb(0 0 0)'}
- ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }} | ${'rgb(0 136 204)'}
- ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }} | ${'rgb(0 136 204 / 0.6)'}
- ${{ mode: 'hsl', color: ['0', '0%', '0%'], alpha: undefined }} | ${'hsl(0 0% 0%)'}
- ${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: undefined }} | ${'hsl(0 136% 204%)'}
- ${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: '0.6' }} | ${'hsl(0 136% 204% / 0.6)'}
- `('should format the color pieces into a proper "$output"', ({ color, output }) => {
- expect(formatColor(color)).toEqual(output)
+ describe('formatColor', () => {
+ it.each`
+ color | output
+ ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }} | ${'rgb(0 0 0)'}
+ ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }} | ${'rgb(0 136 204)'}
+ ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }} | ${'rgb(0 136 204 / 0.6)'}
+ ${{ mode: 'hsl', color: ['0', '0%', '0%'], alpha: undefined }} | ${'hsl(0 0% 0%)'}
+ ${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: undefined }} | ${'hsl(0 136% 204%)'}
+ ${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: '0.6' }} | ${'hsl(0 136% 204% / 0.6)'}
+ `('should format the color pieces into a proper "$output"', ({ color, output }) => {
+ expect(formatColor(color)).toEqual(output)
+ })
})
})
diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js
index 585bea11e..263be2c72 100644
--- a/tests/combined-selectors.test.js
+++ b/tests/combined-selectors.test.js
@@ -1,81 +1,83 @@
-import { run, html, css, defaults } from './util/run'
+import { crosscheck, run, html, css, defaults } from './util/run'
-it('should generate the partial selector, if only a partial is used (base layer)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
-
- @layer base {
- :root {
- font-weight: bold;
- }
-
- /* --- */
-
- :root,
- .a {
- color: black;
- }
+crosscheck(() => {
+ it('should generate the partial selector, if only a partial is used (base layer)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
}
- `
- return run(input, config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- :root {
- font-weight: bold;
+ let input = css`
+ @tailwind base;
+
+ @layer base {
+ :root {
+ font-weight: bold;
+ }
+
+ /* --- */
+
+ :root,
+ .a {
+ color: black;
+ }
}
+ `
- /* --- */
+ return run(input, config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ :root {
+ font-weight: bold;
+ }
- :root,
- .a {
- color: black;
+ /* --- */
+
+ :root,
+ .a {
+ color: black;
+ }
+
+ ${defaults}
+ `)
+ })
+ })
+
+ it('should generate the partial selector, if only a partial is used (utilities layer)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+
+ @layer utilities {
+ :root {
+ font-weight: bold;
+ }
+
+ /* --- */
+
+ :root,
+ .a {
+ color: black;
+ }
}
+ `
- ${defaults}
- `)
- })
-})
-
-it('should generate the partial selector, if only a partial is used (utilities layer)', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
-
- @layer utilities {
- :root {
- font-weight: bold;
- }
-
- /* --- */
-
- :root,
- .a {
- color: black;
- }
- }
- `
-
- return run(input, config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- :root {
- font-weight: bold;
- }
-
- /* --- */
-
- :root,
- .a {
- color: black;
- }
- `)
+ return run(input, config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ :root {
+ font-weight: bold;
+ }
+
+ /* --- */
+
+ :root,
+ .a {
+ color: black;
+ }
+ `)
+ })
})
})
diff --git a/tests/configurePlugins.test.js b/tests/configurePlugins.test.js
index 490cddc03..367ab223f 100644
--- a/tests/configurePlugins.test.js
+++ b/tests/configurePlugins.test.js
@@ -1,25 +1,28 @@
import configurePlugins from '../src/util/configurePlugins'
+import { crosscheck } from './util/run'
-test('setting a plugin to false removes it', () => {
- const plugins = ['fontSize', 'display', 'backgroundPosition']
+crosscheck(() => {
+ test('setting a plugin to false removes it', () => {
+ const plugins = ['fontSize', 'display', 'backgroundPosition']
- const configuredPlugins = configurePlugins({ display: false }, plugins)
+ const configuredPlugins = configurePlugins({ display: false }, plugins)
- expect(configuredPlugins).toEqual(['fontSize', 'backgroundPosition'])
-})
-
-test('passing only false removes all plugins', () => {
- const plugins = ['fontSize', 'display', 'backgroundPosition']
-
- const configuredPlugins = configurePlugins(false, plugins)
-
- expect(configuredPlugins).toEqual([])
-})
-
-test('passing an array safelists plugins', () => {
- const plugins = ['fontSize', 'display', 'backgroundPosition']
-
- const configuredPlugins = configurePlugins(['display'], plugins)
-
- expect(configuredPlugins).toEqual(['display'])
+ expect(configuredPlugins).toEqual(['fontSize', 'backgroundPosition'])
+ })
+
+ test('passing only false removes all plugins', () => {
+ const plugins = ['fontSize', 'display', 'backgroundPosition']
+
+ const configuredPlugins = configurePlugins(false, plugins)
+
+ expect(configuredPlugins).toEqual([])
+ })
+
+ test('passing an array safelists plugins', () => {
+ const plugins = ['fontSize', 'display', 'backgroundPosition']
+
+ const configuredPlugins = configurePlugins(['display'], plugins)
+
+ expect(configuredPlugins).toEqual(['display'])
+ })
})
diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js
index 51b7093b9..d92fb5384 100644
--- a/tests/containerPlugin.test.js
+++ b/tests/containerPlugin.test.js
@@ -1,345 +1,347 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('options are not required', () => {
- let config = { content: [{ raw: html`` }] }
+crosscheck(({}) => {
+ test('options are not required', () => {
+ let config = { content: [{ raw: html`` }] }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- }
- @media (min-width: 640px) {
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
.container {
- max-width: 640px;
+ width: 100%;
}
- }
- @media (min-width: 768px) {
- .container {
- max-width: 768px;
+ @media (min-width: 640px) {
+ .container {
+ max-width: 640px;
+ }
}
- }
- @media (min-width: 1024px) {
- .container {
- max-width: 1024px;
+ @media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
}
- }
- @media (min-width: 1280px) {
- .container {
- max-width: 1280px;
+ @media (min-width: 1024px) {
+ .container {
+ max-width: 1024px;
+ }
}
- }
- @media (min-width: 1536px) {
- .container {
- max-width: 1536px;
+ @media (min-width: 1280px) {
+ .container {
+ max-width: 1280px;
+ }
}
- }
- `)
+ @media (min-width: 1536px) {
+ .container {
+ max-width: 1536px;
+ }
+ }
+ `)
+ })
})
-})
-test('screens can be passed explicitly', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- screens: ['400px', '500px'],
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- }
- @media (min-width: 400px) {
- .container {
- max-width: 400px;
- }
- }
- @media (min-width: 500px) {
- .container {
- max-width: 500px;
- }
- }
- `)
- })
-})
-
-test('screens are ordered ascending by min-width', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- screens: ['500px', '400px'],
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- }
- @media (min-width: 400px) {
- .container {
- max-width: 400px;
- }
- }
- @media (min-width: 500px) {
- .container {
- max-width: 500px;
- }
- }
- `)
- })
-})
-
-test('screens are deduplicated by min-width', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- screens: {
- sm: '576px',
- md: '768px',
- 'sm-only': { min: '576px', max: '767px' },
+ test('screens can be passed explicitly', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ screens: ['400px', '500px'],
},
},
- },
- }
+ }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- }
- @media (min-width: 576px) {
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
.container {
- max-width: 576px;
- }
- }
- @media (min-width: 768px) {
- .container {
- max-width: 768px;
- }
- }
- `)
- })
-})
-
-test('the container can be centered by default', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- center: true,
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- margin-right: auto;
- margin-left: auto;
- }
- @media (min-width: 640px) {
- .container {
- max-width: 640px;
- }
- }
- @media (min-width: 768px) {
- .container {
- max-width: 768px;
- }
- }
- @media (min-width: 1024px) {
- .container {
- max-width: 1024px;
- }
- }
- @media (min-width: 1280px) {
- .container {
- max-width: 1280px;
- }
- }
- @media (min-width: 1536px) {
- .container {
- max-width: 1536px;
- }
- }
- `)
- })
-})
-
-test('horizontal padding can be included by default', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- padding: '2rem',
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- padding-right: 2rem;
- padding-left: 2rem;
- }
- @media (min-width: 640px) {
- .container {
- max-width: 640px;
- }
- }
- @media (min-width: 768px) {
- .container {
- max-width: 768px;
- }
- }
- @media (min-width: 1024px) {
- .container {
- max-width: 1024px;
- }
- }
- @media (min-width: 1280px) {
- .container {
- max-width: 1280px;
- }
- }
- @media (min-width: 1536px) {
- .container {
- max-width: 1536px;
- }
- }
- `)
- })
-})
-
-test('responsive horizontal padding can be included by default', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- screens: {
- sm: '576px',
- md: { min: '768px' },
- lg: { 'min-width': '992px' },
- xl: { min: '1200px', max: '1600px' },
- },
- container: {
- padding: {
- DEFAULT: '1rem',
- sm: '2rem',
- lg: '4rem',
- xl: '5rem',
- },
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- padding-right: 1rem;
- padding-left: 1rem;
- }
- @media (min-width: 576px) {
- .container {
- max-width: 576px;
- padding-right: 2rem;
- padding-left: 2rem;
- }
- }
- @media (min-width: 768px) {
- .container {
- max-width: 768px;
- }
- }
- @media (min-width: 992px) {
- .container {
- max-width: 992px;
- padding-right: 4rem;
- padding-left: 4rem;
- }
- }
- @media (min-width: 1200px) {
- .container {
- max-width: 1200px;
- padding-right: 5rem;
- padding-left: 5rem;
- }
- }
- `)
- })
-})
-
-test('setting all options at once', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- screens: ['400px', '500px'],
- center: true,
- padding: '2rem',
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .container {
- width: 100%;
- margin-right: auto;
- margin-left: auto;
- padding-right: 2rem;
- padding-left: 2rem;
- }
- @media (min-width: 400px) {
- .container {
- max-width: 400px;
- }
- }
- @media (min-width: 500px) {
- .container {
- max-width: 500px;
- }
- }
- `)
- })
-})
-
-test('container can use variants', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- container: {
- screens: ['400px', '500px'],
- },
- },
- }
-
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 1024px) {
- .lg\:hover\:container:hover {
width: 100%;
}
@media (min-width: 400px) {
- .lg\:hover\:container:hover {
+ .container {
max-width: 400px;
}
}
@media (min-width: 500px) {
- .lg\:hover\:container:hover {
+ .container {
max-width: 500px;
}
}
- }
- `)
+ `)
+ })
+ })
+
+ test('screens are ordered ascending by min-width', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ screens: ['500px', '400px'],
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .container {
+ width: 100%;
+ }
+ @media (min-width: 400px) {
+ .container {
+ max-width: 400px;
+ }
+ }
+ @media (min-width: 500px) {
+ .container {
+ max-width: 500px;
+ }
+ }
+ `)
+ })
+ })
+
+ test('screens are deduplicated by min-width', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ screens: {
+ sm: '576px',
+ md: '768px',
+ 'sm-only': { min: '576px', max: '767px' },
+ },
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .container {
+ width: 100%;
+ }
+ @media (min-width: 576px) {
+ .container {
+ max-width: 576px;
+ }
+ }
+ @media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+ }
+ `)
+ })
+ })
+
+ test('the container can be centered by default', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ center: true,
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .container {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ }
+ @media (min-width: 640px) {
+ .container {
+ max-width: 640px;
+ }
+ }
+ @media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+ }
+ @media (min-width: 1024px) {
+ .container {
+ max-width: 1024px;
+ }
+ }
+ @media (min-width: 1280px) {
+ .container {
+ max-width: 1280px;
+ }
+ }
+ @media (min-width: 1536px) {
+ .container {
+ max-width: 1536px;
+ }
+ }
+ `)
+ })
+ })
+
+ test('horizontal padding can be included by default', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ padding: '2rem',
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .container {
+ width: 100%;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ }
+ @media (min-width: 640px) {
+ .container {
+ max-width: 640px;
+ }
+ }
+ @media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+ }
+ @media (min-width: 1024px) {
+ .container {
+ max-width: 1024px;
+ }
+ }
+ @media (min-width: 1280px) {
+ .container {
+ max-width: 1280px;
+ }
+ }
+ @media (min-width: 1536px) {
+ .container {
+ max-width: 1536px;
+ }
+ }
+ `)
+ })
+ })
+
+ test('responsive horizontal padding can be included by default', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ screens: {
+ sm: '576px',
+ md: { min: '768px' },
+ lg: { 'min-width': '992px' },
+ xl: { min: '1200px', max: '1600px' },
+ },
+ container: {
+ padding: {
+ DEFAULT: '1rem',
+ sm: '2rem',
+ lg: '4rem',
+ xl: '5rem',
+ },
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .container {
+ width: 100%;
+ padding-right: 1rem;
+ padding-left: 1rem;
+ }
+ @media (min-width: 576px) {
+ .container {
+ max-width: 576px;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ }
+ }
+ @media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+ }
+ @media (min-width: 992px) {
+ .container {
+ max-width: 992px;
+ padding-right: 4rem;
+ padding-left: 4rem;
+ }
+ }
+ @media (min-width: 1200px) {
+ .container {
+ max-width: 1200px;
+ padding-right: 5rem;
+ padding-left: 5rem;
+ }
+ }
+ `)
+ })
+ })
+
+ test('setting all options at once', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ screens: ['400px', '500px'],
+ center: true,
+ padding: '2rem',
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .container {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ }
+ @media (min-width: 400px) {
+ .container {
+ max-width: 400px;
+ }
+ }
+ @media (min-width: 500px) {
+ .container {
+ max-width: 500px;
+ }
+ }
+ `)
+ })
+ })
+
+ test('container can use variants', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ container: {
+ screens: ['400px', '500px'],
+ },
+ },
+ }
+
+ return run('@tailwind components', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 1024px) {
+ .lg\:hover\:container:hover {
+ width: 100%;
+ }
+ @media (min-width: 400px) {
+ .lg\:hover\:container:hover {
+ max-width: 400px;
+ }
+ }
+ @media (min-width: 500px) {
+ .lg\:hover\:container:hover {
+ max-width: 500px;
+ }
+ }
+ }
+ `)
+ })
})
})
diff --git a/tests/context-reuse.test.js b/tests/context-reuse.test.js
index 0846975ef..942138205 100644
--- a/tests/context-reuse.test.js
+++ b/tests/context-reuse.test.js
@@ -1,127 +1,132 @@
+import { crosscheck, css } from './util/run'
+
const fs = require('fs')
const path = require('path')
const postcss = require('postcss')
const tailwind = require('../src/index.js')
const sharedState = require('../src/lib/sharedState.js')
const configPath = path.resolve(__dirname, './context-reuse.tailwind.config.js')
-const { css } = require('./util/run.js')
-function run(input, config = {}, from = null) {
- let { currentTestName } = expect.getState()
+crosscheck(({ stable, oxide }) => {
+ function run(input, config = {}, from = null) {
+ let { currentTestName } = expect.getState()
- from = `${path.resolve(__filename)}?test=${currentTestName}&${from}`
+ from = `${path.resolve(__filename)}?test=${currentTestName}&${from}`
- return postcss(tailwind(config)).process(input, { from })
-}
-
-beforeEach(async () => {
- let config = {
- content: [path.resolve(__dirname, './context-reuse.test.html')],
- corePlugins: { preflight: false },
+ return postcss(tailwind(config)).process(input, { from })
}
- await fs.promises.writeFile(configPath, `module.exports = ${JSON.stringify(config)};`)
-})
+ beforeEach(async () => {
+ let config = {
+ content: [path.resolve(__dirname, './context-reuse.test.html')],
+ corePlugins: { preflight: false },
+ }
-afterEach(async () => {
- await fs.promises.unlink(configPath)
-})
-
-it('re-uses the context across multiple files with the same config', async () => {
- let results = [
- await run(`@tailwind utilities;`, configPath, `id=1`),
-
- // Using @apply directives should still re-use the context
- // They depend on the config but do not the other way around
- await run(`body { @apply bg-blue-400; }`, configPath, `id=2`),
- await run(`body { @apply text-red-400; }`, configPath, `id=3`),
- await run(`body { @apply mb-4; }`, configPath, `id=4`),
- ]
-
- let dependencies = results.map((result) => {
- return result.messages
- .filter((message) => message.type === 'dependency')
- .map((message) => message.file)
+ await fs.promises.writeFile(configPath, `module.exports = ${JSON.stringify(config)};`)
})
- // The content files don't have any utilities in them so this should be empty
- expect(results[0].css).toMatchFormattedCss(css``)
+ afterEach(async () => {
+ await fs.promises.unlink(configPath)
+ })
- // However, @apply is being used so we want to verify that they're being inlined into the CSS rules
- expect(results[1].css).toMatchFormattedCss(css`
- body {
- --tw-bg-opacity: 1;
- background-color: rgb(96 165 250 / var(--tw-bg-opacity));
- }
- `)
+ oxide.test.todo('re-uses the context across multiple files with the same config')
+ stable.test('re-uses the context across multiple files with the same config', async () => {
+ let results = [
+ await run(`@tailwind utilities;`, configPath, `id=1`),
- expect(results[2].css).toMatchFormattedCss(css`
- body {
- --tw-text-opacity: 1;
- color: rgb(248 113 113 / var(--tw-text-opacity));
- }
- `)
+ // Using @apply directives should still re-use the context
+ // They depend on the config but do not the other way around
+ await run(`body { @apply bg-blue-400; }`, configPath, `id=2`),
+ await run(`body { @apply text-red-400; }`, configPath, `id=3`),
+ await run(`body { @apply mb-4; }`, configPath, `id=4`),
+ ]
- expect(results[3].css).toMatchFormattedCss(css`
- body {
- margin-bottom: 1rem;
- }
- `)
+ let dependencies = results.map((result) => {
+ return result.messages
+ .filter((message) => message.type === 'dependency')
+ .map((message) => message.file)
+ })
- // Files with @tailwind directives depends on the PostCSS tree, config, AND any content files
- expect(dependencies[0]).toEqual([
- path.resolve(__dirname, 'context-reuse.test.html'),
- path.resolve(__dirname, 'context-reuse.tailwind.config.js'),
- ])
+ // The content files don't have any utilities in them so this should be empty
+ expect(results[0].css).toMatchFormattedCss(css``)
- // @apply depends only on the containing PostCSS tree *and* the config file but no content files
- // as they cannot affect the outcome of the @apply directives
- expect(dependencies[1]).toEqual([path.resolve(__dirname, 'context-reuse.tailwind.config.js')])
+ // However, @apply is being used so we want to verify that they're being inlined into the CSS rules
+ expect(results[1].css).toMatchFormattedCss(css`
+ body {
+ --tw-bg-opacity: 1;
+ background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+ }
+ `)
- expect(dependencies[2]).toEqual([path.resolve(__dirname, 'context-reuse.tailwind.config.js')])
+ expect(results[2].css).toMatchFormattedCss(css`
+ body {
+ --tw-text-opacity: 1;
+ color: rgb(248 113 113 / var(--tw-text-opacity));
+ }
+ `)
- expect(dependencies[3]).toEqual([path.resolve(__dirname, 'context-reuse.tailwind.config.js')])
+ expect(results[3].css).toMatchFormattedCss(css`
+ body {
+ margin-bottom: 1rem;
+ }
+ `)
- // And none of this should have resulted in multiple contexts being created
- expect(sharedState.contextSourcesMap.size).toBe(1)
-})
+ // Files with @tailwind directives depends on the PostCSS tree, config, AND any content files
+ expect(dependencies[0]).toEqual([
+ path.resolve(__dirname, 'context-reuse.test.html'),
+ path.resolve(__dirname, 'context-reuse.tailwind.config.js'),
+ ])
-it('updates layers when any CSS containing @tailwind directives changes', async () => {
- let result
+ // @apply depends only on the containing PostCSS tree *and* the config file but no content files
+ // as they cannot affect the outcome of the @apply directives
+ expect(dependencies[1]).toEqual([path.resolve(__dirname, 'context-reuse.tailwind.config.js')])
- // Compile the initial version once
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .custom-utility {
+ expect(dependencies[2]).toEqual([path.resolve(__dirname, 'context-reuse.tailwind.config.js')])
+
+ expect(dependencies[3]).toEqual([path.resolve(__dirname, 'context-reuse.tailwind.config.js')])
+
+ // And none of this should have resulted in multiple contexts being created
+ expect(sharedState.contextSourcesMap.size).toBe(1)
+ })
+
+ oxide.test.todo('updates layers when any CSS containing @tailwind directives changes')
+ stable.test('updates layers when any CSS containing @tailwind directives changes', async () => {
+ let result
+
+ // Compile the initial version once
+ let input = css`
+ @tailwind utilities;
+ @layer utilities {
+ .custom-utility {
+ color: orange;
+ }
+ }
+ `
+
+ result = await run(input, configPath, `id=1`)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .only\:custom-utility:only-child {
color: orange;
}
- }
- `
+ `)
- result = await run(input, configPath, `id=1`)
+ // Save the file with a change
+ input = css`
+ @tailwind utilities;
+ @layer utilities {
+ .custom-utility {
+ color: blue;
+ }
+ }
+ `
- expect(result.css).toMatchFormattedCss(css`
- .only\:custom-utility:only-child {
- color: orange;
- }
- `)
+ result = await run(input, configPath, `id=1`)
- // Save the file with a change
- input = css`
- @tailwind utilities;
- @layer utilities {
- .custom-utility {
+ expect(result.css).toMatchFormattedCss(css`
+ .only\:custom-utility:only-child {
color: blue;
}
- }
- `
-
- result = await run(input, configPath, `id=1`)
-
- expect(result.css).toMatchFormattedCss(css`
- .only\:custom-utility:only-child {
- color: blue;
- }
- `)
+ `)
+ })
})
diff --git a/tests/custom-extractors.test.js b/tests/custom-extractors.test.js
index 54e7aa61a..089084e77 100644
--- a/tests/custom-extractors.test.js
+++ b/tests/custom-extractors.test.js
@@ -1,5 +1,4 @@
-import { run, html, css } from './util/run'
-import { env } from '../src/lib/sharedState'
+import { crosscheck, run, html, css } from './util/run'
function customExtractor(content) {
let matches = content.match(/class="([^"]+)"/)
@@ -22,111 +21,117 @@ let expected = css`
}
`
-let group = env.OXIDE ? describe.skip : describe
-
-group('modern', () => {
- test('extract.DEFAULT', () => {
- let config = {
- content: {
- files: [{ raw: sharedHtml }],
- extract: {
- DEFAULT: customExtractor,
- },
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(expected)
- })
- })
-
- test('extract.{extension}', () => {
- let config = {
- content: {
- files: [{ raw: sharedHtml }],
- extract: {
- html: customExtractor,
- },
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(expected)
- })
- })
-
- test('extract function', () => {
- let config = {
- content: {
- files: [{ raw: sharedHtml }],
- extract: customExtractor,
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(expected)
- })
- })
-
- test('raw content with extension', () => {
- let config = {
- content: {
- files: [
- {
- raw: sharedHtml,
- extension: 'html',
+crosscheck(({ stable, oxide }) => {
+ describe('modern', () => {
+ oxide.test.todo('extract.DEFAULT')
+ stable.test('extract.DEFAULT', () => {
+ let config = {
+ content: {
+ files: [{ raw: sharedHtml }],
+ extract: {
+ DEFAULT: customExtractor,
},
- ],
- extract: {
- html: () => ['invisible'],
},
- },
- corePlugins: { preflight: false },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .invisible {
- visibility: hidden;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(expected)
+ })
})
- })
-})
-group('legacy', () => {
- test('defaultExtractor', () => {
- let config = {
- content: {
- files: [{ raw: sharedHtml }],
- options: {
- defaultExtractor: customExtractor,
+ oxide.test.todo('extract.{extension}')
+ stable.test('extract.{extension}', () => {
+ let config = {
+ content: {
+ files: [{ raw: sharedHtml }],
+ extract: {
+ html: customExtractor,
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(expected)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(expected)
+ })
})
- })
- test('extractors array', () => {
- let config = {
- content: {
- files: [{ raw: sharedHtml }],
- options: {
- extractors: [
+ oxide.test.todo('extract function')
+ stable.test('extract function', () => {
+ let config = {
+ content: {
+ files: [{ raw: sharedHtml }],
+ extract: customExtractor,
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(expected)
+ })
+ })
+
+ oxide.test.todo('raw content with extension')
+ stable.test('raw content with extension', () => {
+ let config = {
+ content: {
+ files: [
{
- extractor: customExtractor,
- extensions: ['html'],
+ raw: sharedHtml,
+ extension: 'html',
},
],
+ extract: {
+ html: () => ['invisible'],
+ },
},
- },
- }
+ corePlugins: { preflight: false },
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(expected)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .invisible {
+ visibility: hidden;
+ }
+ `)
+ })
+ })
+ })
+
+ describe('legacy', () => {
+ oxide.test.todo('defaultExtractor')
+ stable.test('defaultExtractor', () => {
+ let config = {
+ content: {
+ files: [{ raw: sharedHtml }],
+ options: {
+ defaultExtractor: customExtractor,
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(expected)
+ })
+ })
+
+ oxide.test.todo('extractors array')
+ stable.test('extractors array', () => {
+ let config = {
+ content: {
+ files: [{ raw: sharedHtml }],
+ options: {
+ extractors: [
+ {
+ extractor: customExtractor,
+ extensions: ['html'],
+ },
+ ],
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(expected)
+ })
})
})
})
diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js
index c3e7a3916..29ff0a340 100644
--- a/tests/custom-plugins.test.js
+++ b/tests/custom-plugins.test.js
@@ -1,56 +1,19 @@
import createPlugin from '../src/public/create-plugin'
-import { run, html, css, defaults } from './util/run'
+import { crosscheck, run, html, css, defaults } from './util/run'
-test('plugins can create utilities with object syntax', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- plugins: [
- function ({ addUtilities }) {
- addUtilities({
- '.custom-object-fill': {
- 'object-fit': 'fill',
- },
- '.custom-object-contain': {
- 'object-fit': 'contain',
- },
- '.custom-object-cover': {
- 'object-fit': 'cover',
- },
- })
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
-})
-
-test('plugins can create utilities with arrays of objects', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- plugins: [
- function ({ addUtilities }) {
- addUtilities([
- {
+crosscheck(() => {
+ test('plugins can create utilities with object syntax', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ plugins: [
+ function ({ addUtilities }) {
+ addUtilities({
'.custom-object-fill': {
'object-fit': 'fill',
},
@@ -60,414 +23,401 @@ test('plugins can create utilities with arrays of objects', () => {
'.custom-object-cover': {
'object-fit': 'cover',
},
- },
- ])
- },
- ],
- }
+ })
+ },
+ ],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .custom-object-fill {
+ object-fit: fill;
+ }
+ .custom-object-contain {
+ object-fit: contain;
+ }
+ .custom-object-cover {
+ object-fit: cover;
+ }
+ `)
+ })
})
-})
-test('plugins can create utilities with raw PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- plugins: [
- function ({ addUtilities, postcss }) {
- addUtilities([
- postcss.rule({ selector: '.custom-object-fill' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'fill',
- }),
- ]),
- postcss.rule({ selector: '.custom-object-contain' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'contain',
- }),
- ]),
- postcss.rule({ selector: '.custom-object-cover' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'cover',
- }),
- ]),
- ])
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
- })
-})
-
-test('plugins can create utilities with mixed object styles and PostCSS nodes', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- plugins: [
- function ({ addUtilities, postcss }) {
- addUtilities([
- {
- '.custom-object-fill': {
- objectFit: 'fill',
+ test('plugins can create utilities with arrays of objects', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ plugins: [
+ function ({ addUtilities }) {
+ addUtilities([
+ {
+ '.custom-object-fill': {
+ 'object-fit': 'fill',
+ },
+ '.custom-object-contain': {
+ 'object-fit': 'contain',
+ },
+ '.custom-object-cover': {
+ 'object-fit': 'cover',
+ },
},
- },
- postcss.rule({ selector: '.custom-object-contain' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'contain',
- }),
- ]),
- postcss.rule({ selector: '.custom-object-cover' }).append([
- postcss.decl({
- prop: 'object-fit',
- value: 'cover',
- }),
- ]),
- ])
- },
- ],
- }
+ ])
+ },
+ ],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .custom-object-fill {
- object-fit: fill;
- }
- .custom-object-contain {
- object-fit: contain;
- }
- .custom-object-cover {
- object-fit: cover;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .custom-object-fill {
+ object-fit: fill;
+ }
+ .custom-object-contain {
+ object-fit: contain;
+ }
+ .custom-object-cover {
+ object-fit: cover;
+ }
+ `)
+ })
})
-})
-test('plugins can create components with object syntax', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- plugins: [
- function ({ addComponents }) {
- addComponents({
- '.btn-blue': {
- backgroundColor: 'blue',
- color: 'white',
- padding: '.5rem 1rem',
- borderRadius: '.25rem',
- },
- '.btn-blue:hover': {
- backgroundColor: 'darkblue',
- },
- })
- },
- ],
- }
+ test('plugins can create utilities with raw PostCSS nodes', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ plugins: [
+ function ({ addUtilities, postcss }) {
+ addUtilities([
+ postcss.rule({ selector: '.custom-object-fill' }).append([
+ postcss.decl({
+ prop: 'object-fit',
+ value: 'fill',
+ }),
+ ]),
+ postcss.rule({ selector: '.custom-object-contain' }).append([
+ postcss.decl({
+ prop: 'object-fit',
+ value: 'contain',
+ }),
+ ]),
+ postcss.rule({ selector: '.custom-object-cover' }).append([
+ postcss.decl({
+ prop: 'object-fit',
+ value: 'cover',
+ }),
+ ]),
+ ])
+ },
+ ],
+ }
- return run('@tailwind components', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .btn-blue {
- background-color: blue;
- color: white;
- padding: 0.5rem 1rem;
- border-radius: 0.25rem;
- }
- .btn-blue:hover {
- background-color: darkblue;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .custom-object-fill {
+ object-fit: fill;
+ }
+ .custom-object-contain {
+ object-fit: contain;
+ }
+ .custom-object-cover {
+ object-fit: cover;
+ }
+ `)
+ })
})
-})
-test('plugins can add base styles with object syntax', () => {
- let config = {
- content: [
- {
- raw: html`
">Hello world
` }, - ], - } +crosscheck(() => { + test('PHP arrays', async () => { + let config = { + content: [ + { + raw: html`">Hello world
`, + }, + ], + } - return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .max-w-\[16rem\] { - max-width: 16rem; - } - `) - }) -}) - -test('arbitrary values with quotes', async () => { - let config = { content: [{ raw: html`` }] } - - return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .content-\[\'hello\]\'\] { - --tw-content: 'hello]'; - content: var(--tw-content); - } - `) + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .max-w-\[16rem\] { + max-width: 16rem; + } + `) + }) + }) + + test('arbitrary values with quotes', async () => { + let config = { content: [{ raw: html`` }] } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .content-\[\'hello\]\'\] { + --tw-content: 'hello]'; + content: var(--tw-content); + } + `) + }) }) }) diff --git a/tests/flattenColorPalette.test.js b/tests/flattenColorPalette.test.js index e8edcd9aa..dae66e806 100644 --- a/tests/flattenColorPalette.test.js +++ b/tests/flattenColorPalette.test.js @@ -1,81 +1,84 @@ +import { crosscheck } from './util/run' import flattenColorPalette from '../src/util/flattenColorPalette' -test('it flattens nested color objects', () => { - expect( - flattenColorPalette({ +crosscheck(() => { + test('it flattens nested color objects', () => { + expect( + flattenColorPalette({ + purple: 'purple', + white: { + 25: 'rgba(255,255,255,.25)', + 50: 'rgba(255,255,255,.5)', + 75: 'rgba(255,255,255,.75)', + DEFAULT: '#fff', + }, + red: { + 1: 'rgb(33,0,0)', + 2: 'rgb(67,0,0)', + 3: 'rgb(100,0,0)', + }, + green: { + 1: 'rgb(0,33,0)', + 2: 'rgb(0,67,0)', + 3: 'rgb(0,100,0)', + }, + blue: { + 1: 'rgb(0,0,33)', + 2: 'rgb(0,0,67)', + 3: 'rgb(0,0,100)', + }, + }) + ).toEqual({ purple: 'purple', - white: { - 25: 'rgba(255,255,255,.25)', - 50: 'rgba(255,255,255,.5)', - 75: 'rgba(255,255,255,.75)', - DEFAULT: '#fff', - }, - red: { - 1: 'rgb(33,0,0)', - 2: 'rgb(67,0,0)', - 3: 'rgb(100,0,0)', - }, - green: { - 1: 'rgb(0,33,0)', - 2: 'rgb(0,67,0)', - 3: 'rgb(0,100,0)', - }, - blue: { - 1: 'rgb(0,0,33)', - 2: 'rgb(0,0,67)', - 3: 'rgb(0,0,100)', - }, + 'white-25': 'rgba(255,255,255,.25)', + 'white-50': 'rgba(255,255,255,.5)', + 'white-75': 'rgba(255,255,255,.75)', + white: '#fff', + 'red-1': 'rgb(33,0,0)', + 'red-2': 'rgb(67,0,0)', + 'red-3': 'rgb(100,0,0)', + 'green-1': 'rgb(0,33,0)', + 'green-2': 'rgb(0,67,0)', + 'green-3': 'rgb(0,100,0)', + 'blue-1': 'rgb(0,0,33)', + 'blue-2': 'rgb(0,0,67)', + 'blue-3': 'rgb(0,0,100)', }) - ).toEqual({ - purple: 'purple', - 'white-25': 'rgba(255,255,255,.25)', - 'white-50': 'rgba(255,255,255,.5)', - 'white-75': 'rgba(255,255,255,.75)', - white: '#fff', - 'red-1': 'rgb(33,0,0)', - 'red-2': 'rgb(67,0,0)', - 'red-3': 'rgb(100,0,0)', - 'green-1': 'rgb(0,33,0)', - 'green-2': 'rgb(0,67,0)', - 'green-3': 'rgb(0,100,0)', - 'blue-1': 'rgb(0,0,33)', - 'blue-2': 'rgb(0,0,67)', - 'blue-3': 'rgb(0,0,100)', }) -}) -test('it flattens deeply nested color objects', () => { - expect( - flattenColorPalette({ - primary: 'purple', - secondary: { - DEFAULT: 'blue', - hover: 'cyan', - focus: 'red', - }, - button: { - primary: { - DEFAULT: 'magenta', - hover: 'green', - focus: { - DEFAULT: 'yellow', - variant: 'orange', + test('it flattens deeply nested color objects', () => { + expect( + flattenColorPalette({ + primary: 'purple', + secondary: { + DEFAULT: 'blue', + hover: 'cyan', + focus: 'red', + }, + button: { + primary: { + DEFAULT: 'magenta', + hover: 'green', + focus: { + DEFAULT: 'yellow', + variant: 'orange', + }, }, }, - }, + }) + ).toEqual({ + primary: 'purple', + secondary: 'blue', + 'secondary-hover': 'cyan', + 'secondary-focus': 'red', + 'button-primary': 'magenta', + 'button-primary-hover': 'green', + 'button-primary-focus': 'yellow', + 'button-primary-focus-variant': 'orange', }) - ).toEqual({ - primary: 'purple', - secondary: 'blue', - 'secondary-hover': 'cyan', - 'secondary-focus': 'red', - 'button-primary': 'magenta', - 'button-primary-hover': 'green', - 'button-primary-focus': 'yellow', - 'button-primary-focus-variant': 'orange', + }) + + test('it handles empty objects', () => { + expect(flattenColorPalette({})).toEqual({}) }) }) - -test('it handles empty objects', () => { - expect(flattenColorPalette({})).toEqual({}) -}) diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js index 91bff419d..b752a1cab 100644 --- a/tests/format-variant-selector.test.js +++ b/tests/format-variant-selector.test.js @@ -1,356 +1,359 @@ import { finalizeSelector } from '../src/util/formatVariantSelector' +import { crosscheck } from './util/run' -it('should be possible to add a simple variant to a simple selector', () => { - let selector = '.text-center' - let candidate = 'hover:text-center' +crosscheck(() => { + it('should be possible to add a simple variant to a simple selector', () => { + let selector = '.text-center' + let candidate = 'hover:text-center' - let formats = [{ format: '&:hover', isArbitraryVariant: false }] + let formats = [{ format: '&:hover', isArbitraryVariant: false }] - expect(finalizeSelector(selector, formats, { candidate })).toEqual('.hover\\:text-center:hover') -}) + expect(finalizeSelector(selector, formats, { candidate })).toEqual('.hover\\:text-center:hover') + }) -it('should be possible to add a multiple simple variants to a simple selector', () => { - let selector = '.text-center' - let candidate = 'focus:hover:text-center' + it('should be possible to add a multiple simple variants to a simple selector', () => { + let selector = '.text-center' + let candidate = 'focus:hover:text-center' - let formats = [ - { format: '&:hover', isArbitraryVariant: false }, - { format: '&:focus', isArbitraryVariant: false }, - ] + let formats = [ + { format: '&:hover', isArbitraryVariant: false }, + { format: '&:focus', isArbitraryVariant: false }, + ] - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.focus\\:hover\\:text-center:hover:focus' - ) -}) + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.focus\\:hover\\:text-center:hover:focus' + ) + }) -it('should be possible to add a simple variant to a selector containing escaped parts', () => { - let selector = '.bg-\\[rgba\\(0\\,0\\,0\\)\\]' - let candidate = 'hover:bg-[rgba(0,0,0)]' - - let formats = [{ format: '&:hover', isArbitraryVariant: false }] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.hover\\:bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]:hover' - ) -}) - -it('should be possible to add a simple variant to a selector containing escaped parts (escape is slightly different)', () => { - let selector = '.bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]' - let candidate = 'hover:bg-[rgba(0,0,0)]' - - let formats = [{ format: '&:hover', isArbitraryVariant: false }] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.hover\\:bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]:hover' - ) -}) - -it('should be possible to add a simple variant to a more complex selector', () => { - let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' - let candidate = 'hover:space-x-4' - - let formats = [{ format: '&:hover', isArbitraryVariant: false }] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.hover\\:space-x-4:hover > :not([hidden]) ~ :not([hidden])' - ) -}) - -it('should be possible to add multiple simple variants to a more complex selector', () => { - let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' - let candidate = 'disabled:focus:hover:space-x-4' - - let formats = [ - { format: '&:hover', isArbitraryVariant: false }, - { format: '&:focus', isArbitraryVariant: false }, - { format: '&:disabled', isArbitraryVariant: false }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.disabled\\:focus\\:hover\\:space-x-4:hover:focus:disabled > :not([hidden]) ~ :not([hidden])' - ) -}) - -it('should be possible to add a single merge variant to a simple selector', () => { - let selector = '.text-center' - let candidate = 'group-hover:text-center' - - let formats = [{ format: ':merge(.group):hover &', isArbitraryVariant: false }] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover .group-hover\\:text-center' - ) -}) - -it('should be possible to add multiple merge variants to a simple selector', () => { - let selector = '.text-center' - let candidate = 'group-focus:group-hover:text-center' - - let formats = [ - { format: ':merge(.group):hover &', isArbitraryVariant: false }, - { format: ':merge(.group):focus &', isArbitraryVariant: false }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:focus:hover .group-focus\\:group-hover\\:text-center' - ) -}) - -it('should be possible to add a single merge variant to a more complex selector', () => { - let selector = '.space-x-4 ~ :not([hidden]) ~ :not([hidden])' - let candidate = 'group-hover:space-x-4' - - let formats = [{ format: ':merge(.group):hover &', isArbitraryVariant: false }] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover .group-hover\\:space-x-4 ~ :not([hidden]) ~ :not([hidden])' - ) -}) - -it('should be possible to add multiple merge variants to a more complex selector', () => { - let selector = '.space-x-4 ~ :not([hidden]) ~ :not([hidden])' - let candidate = 'group-focus:group-hover:space-x-4' - - let formats = [ - { format: ':merge(.group):hover &', isArbitraryVariant: false }, - { format: ':merge(.group):focus &', isArbitraryVariant: false }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:focus:hover .group-focus\\:group-hover\\:space-x-4 ~ :not([hidden]) ~ :not([hidden])' - ) -}) - -it('should be possible to add multiple unique merge variants to a simple selector', () => { - let selector = '.text-center' - let candidate = 'peer-focus:group-hover:text-center' - - let formats = [ - { format: ':merge(.group):hover &', isArbitraryVariant: false }, - { format: ':merge(.peer):focus ~ &' }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.peer:focus ~ .group:hover .peer-focus\\:group-hover\\:text-center' - ) -}) - -it('should be possible to add multiple unique merge variants to a simple selector', () => { - let selector = '.text-center' - let candidate = 'group-hover:peer-focus:text-center' - - let formats = [ - { format: ':merge(.peer):focus ~ &', isArbitraryVariant: false }, - { format: ':merge(.group):hover &', isArbitraryVariant: false }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover .peer:focus ~ .group-hover\\:peer-focus\\:text-center' - ) -}) - -it('should be possible to use multiple :merge() calls with different "arguments"', () => { - let selector = '.foo' - let candidate = 'peer-focus:group-focus:peer-hover:group-hover:foo' - - let formats = [ - { format: ':merge(.group):hover &', isArbitraryVariant: false }, - { format: ':merge(.peer):hover ~ &', isArbitraryVariant: false }, - { format: ':merge(.group):focus &', isArbitraryVariant: false }, - { format: ':merge(.peer):focus ~ &', isArbitraryVariant: false }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.peer:focus:hover ~ .group:focus:hover .peer-focus\\:group-focus\\:peer-hover\\:group-hover\\:foo' - ) -}) - -it('group hover and prose headings combination', () => { - let selector = '.text-center' - let candidate = 'group-hover:prose-headings:text-center' - let formats = [ - { format: ':where(&) :is(h1, h2, h3, h4)', isArbitraryVariant: false }, // Prose Headings - { format: ':merge(.group):hover &', isArbitraryVariant: false }, // Group Hover - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover :where(.group-hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4)' - ) -}) - -it('group hover and prose headings combination flipped', () => { - let selector = '.text-center' - let candidate = 'prose-headings:group-hover:text-center' - let formats = [ - { format: ':merge(.group):hover &', isArbitraryVariant: false }, // Group Hover - { format: ':where(&) :is(h1, h2, h3, h4)', isArbitraryVariant: false }, // Prose Headings - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - ':where(.group:hover .prose-headings\\:group-hover\\:text-center) :is(h1, h2, h3, h4)' - ) -}) - -it('should be possible to handle a complex utility', () => { - let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' - let candidate = 'peer-disabled:peer-first-child:group-hover:group-focus:focus:hover:space-x-4' - let formats = [ - { format: '&:hover', isArbitraryVariant: false }, // Hover - { format: '&:focus', isArbitraryVariant: false }, // Focus - { format: ':merge(.group):focus &', isArbitraryVariant: false }, // Group focus - { format: ':merge(.group):hover &', isArbitraryVariant: false }, // Group hover - { format: ':merge(.peer):first-child ~ &', isArbitraryVariant: false }, // Peer first-child - { format: ':merge(.peer):disabled ~ &', isArbitraryVariant: false }, // Peer disabled - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.peer:disabled:first-child ~ .group:hover:focus .peer-disabled\\:peer-first-child\\:group-hover\\:group-focus\\:focus\\:hover\\:space-x-4:hover:focus > :not([hidden]) ~ :not([hidden])' - ) -}) - -it('should match base utilities that are prefixed', () => { - let context = { tailwindConfig: { prefix: 'tw-' } } - let selector = '.tw-text-center' - let candidate = 'tw-text-center' - let formats = [] - - expect(finalizeSelector(selector, formats, { candidate, context })).toEqual('.tw-text-center') -}) - -it('should prefix classes from variants', () => { - let context = { tailwindConfig: { prefix: 'tw-' } } - let selector = '.tw-text-center' - let candidate = 'foo:tw-text-center' - let formats = [{ format: '.foo &', isArbitraryVariant: false }] - - expect(finalizeSelector(selector, formats, { candidate, context })).toEqual( - '.tw-foo .foo\\:tw-text-center' - ) -}) - -it('should not prefix classes from arbitrary variants', () => { - let context = { tailwindConfig: { prefix: 'tw-' } } - let selector = '.tw-text-center' - let candidate = '[.foo_&]:tw-text-center' - let formats = [{ format: '.foo &', isArbitraryVariant: true }] - - expect(finalizeSelector(selector, formats, { candidate, context })).toEqual( - '.foo .\\[\\.foo_\\&\\]\\:tw-text-center' - ) -}) - -it('Merged selectors with mixed combinators uses the first one', () => { - // This isn't explicitly specced behavior but it is how it works today - - let selector = '.text-center' - let candidate = 'text-center' - let formats = [ - { format: ':merge(.group):focus > &', isArbitraryVariant: true }, - { format: ':merge(.group):hover &', isArbitraryVariant: true }, - ] - - expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover:focus > .text-center' - ) -}) - -describe('real examples', () => { - it('example a', () => { - let selector = '.placeholder-red-500::placeholder' - let candidate = 'hover:placeholder-red-500' + it('should be possible to add a simple variant to a selector containing escaped parts', () => { + let selector = '.bg-\\[rgba\\(0\\,0\\,0\\)\\]' + let candidate = 'hover:bg-[rgba(0,0,0)]' let formats = [{ format: '&:hover', isArbitraryVariant: false }] expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.hover\\:placeholder-red-500:hover::placeholder' + '.hover\\:bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]:hover' ) }) - it('example b', () => { + it('should be possible to add a simple variant to a selector containing escaped parts (escape is slightly different)', () => { + let selector = '.bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]' + let candidate = 'hover:bg-[rgba(0,0,0)]' + + let formats = [{ format: '&:hover', isArbitraryVariant: false }] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.hover\\:bg-\\[rgba\\(0\\2c 0\\2c 0\\)\\]:hover' + ) + }) + + it('should be possible to add a simple variant to a more complex selector', () => { let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' - let candidate = 'group-hover:hover:space-x-4' + let candidate = 'hover:space-x-4' + + let formats = [{ format: '&:hover', isArbitraryVariant: false }] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.hover\\:space-x-4:hover > :not([hidden]) ~ :not([hidden])' + ) + }) + + it('should be possible to add multiple simple variants to a more complex selector', () => { + let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' + let candidate = 'disabled:focus:hover:space-x-4' let formats = [ { format: '&:hover', isArbitraryVariant: false }, - { format: ':merge(.group):hover &', isArbitraryVariant: false }, + { format: '&:focus', isArbitraryVariant: false }, + { format: '&:disabled', isArbitraryVariant: false }, ] expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover .group-hover\\:hover\\:space-x-4:hover > :not([hidden]) ~ :not([hidden])' + '.disabled\\:focus\\:hover\\:space-x-4:hover:focus:disabled > :not([hidden]) ~ :not([hidden])' ) }) - it('should work for group-hover and class dark mode combinations', () => { + it('should be possible to add a single merge variant to a simple selector', () => { let selector = '.text-center' - let candidate = 'dark:group-hover:text-center' + let candidate = 'group-hover:text-center' + + let formats = [{ format: ':merge(.group):hover &', isArbitraryVariant: false }] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.group:hover .group-hover\\:text-center' + ) + }) + + it('should be possible to add multiple merge variants to a simple selector', () => { + let selector = '.text-center' + let candidate = 'group-focus:group-hover:text-center' let formats = [ { format: ':merge(.group):hover &', isArbitraryVariant: false }, - { format: '.dark &', isArbitraryVariant: false }, + { format: ':merge(.group):focus &', isArbitraryVariant: false }, ] expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.dark .group:hover .dark\\:group-hover\\:text-center' + '.group:focus:hover .group-focus\\:group-hover\\:text-center' ) }) - it('should work for group-hover and class dark mode combinations (reversed)', () => { - let selector = '.text-center' - let candidate = 'group-hover:dark:text-center' + it('should be possible to add a single merge variant to a more complex selector', () => { + let selector = '.space-x-4 ~ :not([hidden]) ~ :not([hidden])' + let candidate = 'group-hover:space-x-4' + + let formats = [{ format: ':merge(.group):hover &', isArbitraryVariant: false }] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.group:hover .group-hover\\:space-x-4 ~ :not([hidden]) ~ :not([hidden])' + ) + }) + + it('should be possible to add multiple merge variants to a more complex selector', () => { + let selector = '.space-x-4 ~ :not([hidden]) ~ :not([hidden])' + let candidate = 'group-focus:group-hover:space-x-4' let formats = [ - { format: '.dark &' }, + { format: ':merge(.group):hover &', isArbitraryVariant: false }, + { format: ':merge(.group):focus &', isArbitraryVariant: false }, + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.group:focus:hover .group-focus\\:group-hover\\:space-x-4 ~ :not([hidden]) ~ :not([hidden])' + ) + }) + + it('should be possible to add multiple unique merge variants to a simple selector', () => { + let selector = '.text-center' + let candidate = 'peer-focus:group-hover:text-center' + + let formats = [ + { format: ':merge(.group):hover &', isArbitraryVariant: false }, + { format: ':merge(.peer):focus ~ &' }, + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.peer:focus ~ .group:hover .peer-focus\\:group-hover\\:text-center' + ) + }) + + it('should be possible to add multiple unique merge variants to a simple selector', () => { + let selector = '.text-center' + let candidate = 'group-hover:peer-focus:text-center' + + let formats = [ + { format: ':merge(.peer):focus ~ &', isArbitraryVariant: false }, { format: ':merge(.group):hover &', isArbitraryVariant: false }, ] expect(finalizeSelector(selector, formats, { candidate })).toEqual( - '.group:hover .dark .group-hover\\:dark\\:text-center' + '.group:hover .peer:focus ~ .group-hover\\:peer-focus\\:text-center' ) }) - describe('prose-headings', () => { - it('should be possible to use hover:prose-headings:text-center', () => { - let selector = '.text-center' - let candidate = 'hover:prose-headings:text-center' + it('should be possible to use multiple :merge() calls with different "arguments"', () => { + let selector = '.foo' + let candidate = 'peer-focus:group-focus:peer-hover:group-hover:foo' - let formats = [{ format: ':where(&) :is(h1, h2, h3, h4)' }, { format: '&:hover' }] + let formats = [ + { format: ':merge(.group):hover &', isArbitraryVariant: false }, + { format: ':merge(.peer):hover ~ &', isArbitraryVariant: false }, + { format: ':merge(.group):focus &', isArbitraryVariant: false }, + { format: ':merge(.peer):focus ~ &', isArbitraryVariant: false }, + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.peer:focus:hover ~ .group:focus:hover .peer-focus\\:group-focus\\:peer-hover\\:group-hover\\:foo' + ) + }) + + it('group hover and prose headings combination', () => { + let selector = '.text-center' + let candidate = 'group-hover:prose-headings:text-center' + let formats = [ + { format: ':where(&) :is(h1, h2, h3, h4)', isArbitraryVariant: false }, // Prose Headings + { format: ':merge(.group):hover &', isArbitraryVariant: false }, // Group Hover + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.group:hover :where(.group-hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4)' + ) + }) + + it('group hover and prose headings combination flipped', () => { + let selector = '.text-center' + let candidate = 'prose-headings:group-hover:text-center' + let formats = [ + { format: ':merge(.group):hover &', isArbitraryVariant: false }, // Group Hover + { format: ':where(&) :is(h1, h2, h3, h4)', isArbitraryVariant: false }, // Prose Headings + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + ':where(.group:hover .prose-headings\\:group-hover\\:text-center) :is(h1, h2, h3, h4)' + ) + }) + + it('should be possible to handle a complex utility', () => { + let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' + let candidate = 'peer-disabled:peer-first-child:group-hover:group-focus:focus:hover:space-x-4' + let formats = [ + { format: '&:hover', isArbitraryVariant: false }, // Hover + { format: '&:focus', isArbitraryVariant: false }, // Focus + { format: ':merge(.group):focus &', isArbitraryVariant: false }, // Group focus + { format: ':merge(.group):hover &', isArbitraryVariant: false }, // Group hover + { format: ':merge(.peer):first-child ~ &', isArbitraryVariant: false }, // Peer first-child + { format: ':merge(.peer):disabled ~ &', isArbitraryVariant: false }, // Peer disabled + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.peer:disabled:first-child ~ .group:hover:focus .peer-disabled\\:peer-first-child\\:group-hover\\:group-focus\\:focus\\:hover\\:space-x-4:hover:focus > :not([hidden]) ~ :not([hidden])' + ) + }) + + it('should match base utilities that are prefixed', () => { + let context = { tailwindConfig: { prefix: 'tw-' } } + let selector = '.tw-text-center' + let candidate = 'tw-text-center' + let formats = [] + + expect(finalizeSelector(selector, formats, { candidate, context })).toEqual('.tw-text-center') + }) + + it('should prefix classes from variants', () => { + let context = { tailwindConfig: { prefix: 'tw-' } } + let selector = '.tw-text-center' + let candidate = 'foo:tw-text-center' + let formats = [{ format: '.foo &', isArbitraryVariant: false }] + + expect(finalizeSelector(selector, formats, { candidate, context })).toEqual( + '.tw-foo .foo\\:tw-text-center' + ) + }) + + it('should not prefix classes from arbitrary variants', () => { + let context = { tailwindConfig: { prefix: 'tw-' } } + let selector = '.tw-text-center' + let candidate = '[.foo_&]:tw-text-center' + let formats = [{ format: '.foo &', isArbitraryVariant: true }] + + expect(finalizeSelector(selector, formats, { candidate, context })).toEqual( + '.foo .\\[\\.foo_\\&\\]\\:tw-text-center' + ) + }) + + it('Merged selectors with mixed combinators uses the first one', () => { + // This isn't explicitly specced behavior but it is how it works today + + let selector = '.text-center' + let candidate = 'text-center' + let formats = [ + { format: ':merge(.group):focus > &', isArbitraryVariant: true }, + { format: ':merge(.group):hover &', isArbitraryVariant: true }, + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.group:hover:focus > .text-center' + ) + }) + + describe('real examples', () => { + it('example a', () => { + let selector = '.placeholder-red-500::placeholder' + let candidate = 'hover:placeholder-red-500' + + let formats = [{ format: '&:hover', isArbitraryVariant: false }] expect(finalizeSelector(selector, formats, { candidate })).toEqual( - ':where(.hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4):hover' + '.hover\\:placeholder-red-500:hover::placeholder' ) }) - it('should be possible to use prose-headings:hover:text-center', () => { - let selector = '.text-center' - let candidate = 'prose-headings:hover:text-center' + it('example b', () => { + let selector = '.space-x-4 > :not([hidden]) ~ :not([hidden])' + let candidate = 'group-hover:hover:space-x-4' - let formats = [{ format: '&:hover' }, { format: ':where(&) :is(h1, h2, h3, h4)' }] + let formats = [ + { format: '&:hover', isArbitraryVariant: false }, + { format: ':merge(.group):hover &', isArbitraryVariant: false }, + ] expect(finalizeSelector(selector, formats, { candidate })).toEqual( - ':where(.prose-headings\\:hover\\:text-center:hover) :is(h1, h2, h3, h4)' + '.group:hover .group-hover\\:hover\\:space-x-4:hover > :not([hidden]) ~ :not([hidden])' ) }) - }) -}) -describe('pseudo elements', () => { - it.each` - before | after - ${'&::before'} | ${'&::before'} - ${'&::before:hover'} | ${'&:hover::before'} - ${'&:before:hover'} | ${'&:hover:before'} - ${'&::file-selector-button:hover'} | ${'&::file-selector-button:hover'} - ${'&:hover::file-selector-button'} | ${'&:hover::file-selector-button'} - ${'.parent:hover &'} | ${'.parent:hover &'} - ${'.parent::before &'} | ${'.parent &::before'} - ${'.parent::before &:hover'} | ${'.parent &:hover::before'} - ${':where(&::before) :is(h1, h2, h3, h4)'} | ${':where(&) :is(h1, h2, h3, h4)::before'} - ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} - `('should translate "$before" into "$after"', ({ before, after }) => { - let result = finalizeSelector('.a', [{ format: before, isArbitraryVariant: false }], { - candidate: 'a', + it('should work for group-hover and class dark mode combinations', () => { + let selector = '.text-center' + let candidate = 'dark:group-hover:text-center' + + let formats = [ + { format: ':merge(.group):hover &', isArbitraryVariant: false }, + { format: '.dark &', isArbitraryVariant: false }, + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.dark .group:hover .dark\\:group-hover\\:text-center' + ) }) - expect(result).toEqual(after.replace('&', '.a')) + it('should work for group-hover and class dark mode combinations (reversed)', () => { + let selector = '.text-center' + let candidate = 'group-hover:dark:text-center' + + let formats = [ + { format: '.dark &' }, + { format: ':merge(.group):hover &', isArbitraryVariant: false }, + ] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + '.group:hover .dark .group-hover\\:dark\\:text-center' + ) + }) + + describe('prose-headings', () => { + it('should be possible to use hover:prose-headings:text-center', () => { + let selector = '.text-center' + let candidate = 'hover:prose-headings:text-center' + + let formats = [{ format: ':where(&) :is(h1, h2, h3, h4)' }, { format: '&:hover' }] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + ':where(.hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4):hover' + ) + }) + + it('should be possible to use prose-headings:hover:text-center', () => { + let selector = '.text-center' + let candidate = 'prose-headings:hover:text-center' + + let formats = [{ format: '&:hover' }, { format: ':where(&) :is(h1, h2, h3, h4)' }] + + expect(finalizeSelector(selector, formats, { candidate })).toEqual( + ':where(.prose-headings\\:hover\\:text-center:hover) :is(h1, h2, h3, h4)' + ) + }) + }) + }) + + describe('pseudo elements', () => { + it.each` + before | after + ${'&::before'} | ${'&::before'} + ${'&::before:hover'} | ${'&:hover::before'} + ${'&:before:hover'} | ${'&:hover:before'} + ${'&::file-selector-button:hover'} | ${'&::file-selector-button:hover'} + ${'&:hover::file-selector-button'} | ${'&:hover::file-selector-button'} + ${'.parent:hover &'} | ${'.parent:hover &'} + ${'.parent::before &'} | ${'.parent &::before'} + ${'.parent::before &:hover'} | ${'.parent &:hover::before'} + ${':where(&::before) :is(h1, h2, h3, h4)'} | ${':where(&) :is(h1, h2, h3, h4)::before'} + ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} + `('should translate "$before" into "$after"', ({ before, after }) => { + let result = finalizeSelector('.a', [{ format: before, isArbitraryVariant: false }], { + candidate: 'a', + }) + + expect(result).toEqual(after.replace('&', '.a')) + }) }) }) diff --git a/tests/generate-rules.test.js b/tests/generate-rules.test.js index a997a46cd..3aa8592bc 100644 --- a/tests/generate-rules.test.js +++ b/tests/generate-rules.test.js @@ -1,47 +1,48 @@ -import { css } from './util/run' - import { generateRules } from '../src/lib/generateRules' import resolveConfig from '../src/public/resolve-config' import { createContext } from '../src/lib/setupContextUtils' +import { crosscheck, css } from './util/run' -it('should not generate rules that are incorrect', () => { - let config = { - plugins: [ - ({ matchVariant }) => { - matchVariant('@', (value) => `@container (min-width: ${value})`) - }, - ], - } - let context = createContext(resolveConfig(config)) - let rules = generateRules( - new Set([ - // Invalid, missing `-` - 'group[:hover]:underline', - - // Invalid, `-` should not be there - '@-[200px]:underline', - - // Valid - 'group-[:hover]:underline', - '@[200px]:underline', - ]), - context - ) - - // Ensure we only have 2 valid rules - expect(rules).toHaveLength(2) - - // Ensure we have the correct values - expect(rules[0][1].toString()).toMatchFormattedCss(css` - .group:hover .group-\[\:hover\]\:underline { - text-decoration-line: underline; +crosscheck(() => { + it('should not generate rules that are incorrect', () => { + let config = { + plugins: [ + ({ matchVariant }) => { + matchVariant('@', (value) => `@container (min-width: ${value})`) + }, + ], } - `) - expect(rules[1][1].toString()).toMatchFormattedCss(css` - @container (min-width: 200px) { - .\@\[200px\]\:underline { + let context = createContext(resolveConfig(config)) + let rules = generateRules( + new Set([ + // Invalid, missing `-` + 'group[:hover]:underline', + + // Invalid, `-` should not be there + '@-[200px]:underline', + + // Valid + 'group-[:hover]:underline', + '@[200px]:underline', + ]), + context + ) + + // Ensure we only have 2 valid rules + expect(rules).toHaveLength(2) + + // Ensure we have the correct values + expect(rules[0][1].toString()).toMatchFormattedCss(css` + .group:hover .group-\[\:hover\]\:underline { text-decoration-line: underline; } - } - `) + `) + expect(rules[1][1].toString()).toMatchFormattedCss(css` + @container (min-width: 200px) { + .\@\[200px\]\:underline { + text-decoration-line: underline; + } + } + `) + }) }) diff --git a/tests/getClassList.test.js b/tests/getClassList.test.js index 8fd2df6f1..adeb4f659 100644 --- a/tests/getClassList.test.js +++ b/tests/getClassList.test.js @@ -1,119 +1,122 @@ import resolveConfig from '../src/public/resolve-config' import { createContext } from '../src/lib/setupContextUtils' +import { crosscheck } from './util/run' -it('should generate every possible class, without variants', () => { - let config = {} +crosscheck(() => { + it('should generate every possible class, without variants', () => { + let config = {} - let context = createContext(resolveConfig(config)) - let classes = context.getClassList() - expect(classes).toBeInstanceOf(Array) + let context = createContext(resolveConfig(config)) + let classes = context.getClassList() + expect(classes).toBeInstanceOf(Array) - // Verify we have a `container` for the 'components' section. - expect(classes).toContain('container') + // Verify we have a `container` for the 'components' section. + expect(classes).toContain('container') - // Verify we handle the DEFAULT case correctly - expect(classes).toContain('border') + // Verify we handle the DEFAULT case correctly + expect(classes).toContain('border') - // Verify we handle negative values correctly - expect(classes).toContain('-inset-1/4') - expect(classes).toContain('-m-0') - expect(classes).not.toContain('-uppercase') - expect(classes).not.toContain('-opacity-50') + // Verify we handle negative values correctly + expect(classes).toContain('-inset-1/4') + expect(classes).toContain('-m-0') + expect(classes).not.toContain('-uppercase') + expect(classes).not.toContain('-opacity-50') - config = { theme: { extend: { margin: { DEFAULT: '5px' } } } } - context = createContext(resolveConfig(config)) - classes = context.getClassList() + config = { theme: { extend: { margin: { DEFAULT: '5px' } } } } + context = createContext(resolveConfig(config)) + classes = context.getClassList() - expect(classes).not.toContain('-m-DEFAULT') -}) + expect(classes).not.toContain('-m-DEFAULT') + }) -it('should generate every possible class while handling negatives and prefixes', () => { - let config = { prefix: 'tw-' } - let context = createContext(resolveConfig(config)) - let classes = context.getClassList() - expect(classes).toBeInstanceOf(Array) + it('should generate every possible class while handling negatives and prefixes', () => { + let config = { prefix: 'tw-' } + let context = createContext(resolveConfig(config)) + let classes = context.getClassList() + expect(classes).toBeInstanceOf(Array) - // Verify we have a `container` for the 'components' section. - expect(classes).toContain('tw-container') + // Verify we have a `container` for the 'components' section. + expect(classes).toContain('tw-container') - // Verify we handle the DEFAULT case correctly - expect(classes).toContain('tw-border') + // Verify we handle the DEFAULT case correctly + expect(classes).toContain('tw-border') - // Verify we handle negative values correctly - expect(classes).toContain('-tw-inset-1/4') - expect(classes).toContain('-tw-m-0') - expect(classes).not.toContain('-tw-uppercase') - expect(classes).not.toContain('-tw-opacity-50') + // Verify we handle negative values correctly + expect(classes).toContain('-tw-inset-1/4') + expect(classes).toContain('-tw-m-0') + expect(classes).not.toContain('-tw-uppercase') + expect(classes).not.toContain('-tw-opacity-50') - // These utilities do work but there's no reason to generate - // them alongside the `-{prefix}-{utility}` versions - expect(classes).not.toContain('tw--inset-1/4') - expect(classes).not.toContain('tw--m-0') + // These utilities do work but there's no reason to generate + // them alongside the `-{prefix}-{utility}` versions + expect(classes).not.toContain('tw--inset-1/4') + expect(classes).not.toContain('tw--m-0') - config = { - prefix: 'tw-', - theme: { extend: { margin: { DEFAULT: '5px' } } }, - } - context = createContext(resolveConfig(config)) - classes = context.getClassList() + config = { + prefix: 'tw-', + theme: { extend: { margin: { DEFAULT: '5px' } } }, + } + context = createContext(resolveConfig(config)) + classes = context.getClassList() - expect(classes).not.toContain('-tw-m-DEFAULT') -}) + expect(classes).not.toContain('-tw-m-DEFAULT') + }) -it('should not generate utilities with opacity by default', () => { - let config = {} - let context = createContext(resolveConfig(config)) - let classes = context.getClassList() + it('should not generate utilities with opacity by default', () => { + let config = {} + let context = createContext(resolveConfig(config)) + let classes = context.getClassList() - expect(classes).not.toContain('bg-red-500/50') -}) + expect(classes).not.toContain('bg-red-500/50') + }) -it('should not generate utilities with opacity even if safe-listed', () => { - let config = { - safelist: [ - { - pattern: /^bg-red-(400|500)(\/(40|50))?$/, - }, - ], - } + it('should not generate utilities with opacity even if safe-listed', () => { + let config = { + safelist: [ + { + pattern: /^bg-red-(400|500)(\/(40|50))?$/, + }, + ], + } - let context = createContext(resolveConfig(config)) - let classes = context.getClassList() + let context = createContext(resolveConfig(config)) + let classes = context.getClassList() - expect(classes).not.toContain('bg-red-500/50') -}) + expect(classes).not.toContain('bg-red-500/50') + }) -it('should not generate utilities that are set to undefined or null to so that they are removed', () => { - let config = { - theme: { - extend: { - colors: { - red: null, - green: undefined, - blue: { - 100: null, - 200: undefined, + it('should not generate utilities that are set to undefined or null to so that they are removed', () => { + let config = { + theme: { + extend: { + colors: { + red: null, + green: undefined, + blue: { + 100: null, + 200: undefined, + }, }, }, }, - }, - safelist: [ - { - pattern: /^bg-(red|green|blue)-.*$/, - }, - ], - } + safelist: [ + { + pattern: /^bg-(red|green|blue)-.*$/, + }, + ], + } - let context = createContext(resolveConfig(config)) - let classes = context.getClassList() + let context = createContext(resolveConfig(config)) + let classes = context.getClassList() - expect(classes).not.toContain('bg-red-100') // Red is `null` + expect(classes).not.toContain('bg-red-100') // Red is `null` - expect(classes).not.toContain('bg-green-100') // Green is `undefined` + expect(classes).not.toContain('bg-green-100') // Green is `undefined` - expect(classes).not.toContain('bg-blue-100') // Blue.100 is `null` - expect(classes).not.toContain('bg-blue-200') // Blue.200 is `undefined` + expect(classes).not.toContain('bg-blue-100') // Blue.100 is `null` + expect(classes).not.toContain('bg-blue-200') // Blue.200 is `undefined` - expect(classes).toContain('bg-blue-50') - expect(classes).toContain('bg-blue-300') + expect(classes).toContain('bg-blue-50') + expect(classes).toContain('bg-blue-300') + }) }) diff --git a/tests/getSortOrder.test.js b/tests/getSortOrder.test.js index b036273e1..c65df3b6b 100644 --- a/tests/getSortOrder.test.js +++ b/tests/getSortOrder.test.js @@ -1,6 +1,7 @@ import resolveConfig from '../src/public/resolve-config' import { createContext } from '../src/lib/setupContextUtils' import bigSign from '../src/util/bigSign' +import { crosscheck } from './util/run' /** * This is a function that the prettier-plugin-tailwindcss would use. It would @@ -24,92 +25,94 @@ function defaultSort(arrayOfTuples) { .join(' ') } -it('should return a list of tuples with the sort order', () => { - let input = 'font-bold underline hover:font-medium unknown' - let config = {} - let context = createContext(resolveConfig(config)) - expect(context.getClassOrder(input.split(' '))).toEqual([ - ['font-bold', expect.any(BigInt)], - ['underline', expect.any(BigInt)], - ['hover:font-medium', expect.any(BigInt)], +crosscheck(() => { + it('should return a list of tuples with the sort order', () => { + let input = 'font-bold underline hover:font-medium unknown' + let config = {} + let context = createContext(resolveConfig(config)) + expect(context.getClassOrder(input.split(' '))).toEqual([ + ['font-bold', expect.any(BigInt)], + ['underline', expect.any(BigInt)], + ['hover:font-medium', expect.any(BigInt)], - // Unknown values receive `null` - ['unknown', null], - ]) -}) + // Unknown values receive `null` + ['unknown', null], + ]) + }) -it.each([ - // Utitlies - ['px-3 p-1 py-3', 'p-1 px-3 py-3'], + it.each([ + // Utitlies + ['px-3 p-1 py-3', 'p-1 px-3 py-3'], - // Utitlies and components - ['px-4 container', 'container px-4'], + // Utitlies and components + ['px-4 container', 'container px-4'], - // Utilities with variants - ['px-3 focus:hover:p-3 hover:p-1 py-3', 'px-3 py-3 hover:p-1 focus:hover:p-3'], + // Utilities with variants + ['px-3 focus:hover:p-3 hover:p-1 py-3', 'px-3 py-3 hover:p-1 focus:hover:p-3'], - // Utitlies with important - ['px-3 !py-4', 'px-3 !py-4'], - ['!py-4 px-3', '!py-4 px-3'], + // Utitlies with important + ['px-3 !py-4', 'px-3 !py-4'], + ['!py-4 px-3', '!py-4 px-3'], - // Components with variants - ['hover:container container', 'container hover:container'], + // Components with variants + ['hover:container container', 'container hover:container'], - // Components and utilities with variants - [ - 'focus:hover:container hover:underline hover:container p-1', - 'p-1 hover:container hover:underline focus:hover:container', - ], + // Components and utilities with variants + [ + 'focus:hover:container hover:underline hover:container p-1', + 'p-1 hover:container hover:underline focus:hover:container', + ], - // Leave user css order alone, and move to the front - ['b p-1 a', 'b a p-1'], - ['hover:b focus:p-1 a', 'hover:b a focus:p-1'], + // Leave user css order alone, and move to the front + ['b p-1 a', 'b a p-1'], + ['hover:b focus:p-1 a', 'hover:b a focus:p-1'], - // Add special treatment for `group` and `peer` - ['a peer container underline', 'a peer container underline'], -])('should sort "%s" based on the order we generate them in to "%s"', (input, output) => { - let config = {} - let context = createContext(resolveConfig(config)) - expect(defaultSort(context.getClassOrder(input.split(' ')))).toEqual(output) -}) - -it.each([ - // Utitlies - ['tw-px-3 tw-p-1 tw-py-3', 'tw-p-1 tw-px-3 tw-py-3'], - - // Utitlies and components - ['tw-px-4 tw-container', 'tw-container tw-px-4'], - - // Utilities with variants - [ - 'tw-px-3 focus:hover:tw-p-3 hover:tw-p-1 tw-py-3', - 'tw-px-3 tw-py-3 hover:tw-p-1 focus:hover:tw-p-3', - ], - - // Utitlies with important - ['tw-px-3 !tw-py-4', 'tw-px-3 !tw-py-4'], - ['!tw-py-4 tw-px-3', '!tw-py-4 tw-px-3'], - - // Components with variants - ['hover:tw-container tw-container', 'tw-container hover:tw-container'], - - // Components and utilities with variants - [ - 'focus:hover:tw-container hover:tw-underline hover:tw-container tw-p-1', - 'tw-p-1 hover:tw-container hover:tw-underline focus:hover:tw-container', - ], - - // Leave user css order alone, and move to the front - ['b tw-p-1 a', 'b a tw-p-1'], - ['hover:b focus:tw-p-1 a', 'hover:b a focus:tw-p-1'], - - // Add special treatment for `group` and `peer` - ['a tw-peer tw-container tw-underline', 'a tw-peer tw-container tw-underline'], -])( - 'should sort "%s" with prefixex based on the order we generate them in to "%s"', - (input, output) => { - let config = { prefix: 'tw-' } + // Add special treatment for `group` and `peer` + ['a peer container underline', 'a peer container underline'], + ])('should sort "%s" based on the order we generate them in to "%s"', (input, output) => { + let config = {} let context = createContext(resolveConfig(config)) expect(defaultSort(context.getClassOrder(input.split(' ')))).toEqual(output) - } -) + }) + + it.each([ + // Utitlies + ['tw-px-3 tw-p-1 tw-py-3', 'tw-p-1 tw-px-3 tw-py-3'], + + // Utitlies and components + ['tw-px-4 tw-container', 'tw-container tw-px-4'], + + // Utilities with variants + [ + 'tw-px-3 focus:hover:tw-p-3 hover:tw-p-1 tw-py-3', + 'tw-px-3 tw-py-3 hover:tw-p-1 focus:hover:tw-p-3', + ], + + // Utitlies with important + ['tw-px-3 !tw-py-4', 'tw-px-3 !tw-py-4'], + ['!tw-py-4 tw-px-3', '!tw-py-4 tw-px-3'], + + // Components with variants + ['hover:tw-container tw-container', 'tw-container hover:tw-container'], + + // Components and utilities with variants + [ + 'focus:hover:tw-container hover:tw-underline hover:tw-container tw-p-1', + 'tw-p-1 hover:tw-container hover:tw-underline focus:hover:tw-container', + ], + + // Leave user css order alone, and move to the front + ['b tw-p-1 a', 'b a tw-p-1'], + ['hover:b focus:tw-p-1 a', 'hover:b a focus:tw-p-1'], + + // Add special treatment for `group` and `peer` + ['a tw-peer tw-container tw-underline', 'a tw-peer tw-container tw-underline'], + ])( + 'should sort "%s" with prefixex based on the order we generate them in to "%s"', + (input, output) => { + let config = { prefix: 'tw-' } + let context = createContext(resolveConfig(config)) + expect(defaultSort(context.getClassOrder(input.split(' ')))).toEqual(output) + } + ) +}) diff --git a/tests/getVariants.test.js b/tests/getVariants.test.js index af34fd0e3..8d79f8243 100644 --- a/tests/getVariants.test.js +++ b/tests/getVariants.test.js @@ -2,185 +2,188 @@ import postcss from 'postcss' import selectorParser from 'postcss-selector-parser' import resolveConfig from '../src/public/resolve-config' import { createContext } from '../src/lib/setupContextUtils' +import { crosscheck } from './util/run' -it('should return a list of variants with meta information about the variant', () => { - let config = {} - let context = createContext(resolveConfig(config)) +crosscheck(() => { + it('should return a list of variants with meta information about the variant', () => { + let config = {} + let context = createContext(resolveConfig(config)) - let variants = context.getVariants() + let variants = context.getVariants() - expect(variants).toContainEqual({ - name: 'hover', - isArbitrary: false, - hasDash: true, - values: [], - selectors: expect.any(Function), + expect(variants).toContainEqual({ + name: 'hover', + isArbitrary: false, + hasDash: true, + values: [], + selectors: expect.any(Function), + }) + + expect(variants).toContainEqual({ + name: 'group', + isArbitrary: true, + hasDash: true, + values: expect.any(Array), + selectors: expect.any(Function), + }) + + // `group-hover` now belongs to the `group` variant. The information exposed for the `group` + // variant is all you need. + expect(variants.find((v) => v.name === 'group-hover')).toBeUndefined() }) - expect(variants).toContainEqual({ - name: 'group', - isArbitrary: true, - hasDash: true, - values: expect.any(Array), - selectors: expect.any(Function), + it('should provide selectors for simple variants', () => { + let config = {} + let context = createContext(resolveConfig(config)) + + let variants = context.getVariants() + + let variant = variants.find((v) => v.name === 'hover') + expect(variant.selectors()).toEqual(['&:hover']) }) - // `group-hover` now belongs to the `group` variant. The information exposed for the `group` - // variant is all you need. - expect(variants.find((v) => v.name === 'group-hover')).toBeUndefined() -}) + it('should provide selectors for parallel variants', () => { + let config = {} + let context = createContext(resolveConfig(config)) -it('should provide selectors for simple variants', () => { - let config = {} - let context = createContext(resolveConfig(config)) + let variants = context.getVariants() - let variants = context.getVariants() + let variant = variants.find((v) => v.name === 'marker') + expect(variant.selectors()).toEqual(['& *::marker', '&::marker']) + }) - let variant = variants.find((v) => v.name === 'hover') - expect(variant.selectors()).toEqual(['&:hover']) -}) + it('should provide selectors for complex matchVariant variants like `group`', () => { + let config = {} + let context = createContext(resolveConfig(config)) -it('should provide selectors for parallel variants', () => { - let config = {} - let context = createContext(resolveConfig(config)) + let variants = context.getVariants() - let variants = context.getVariants() + let variant = variants.find((v) => v.name === 'group') + expect(variant.selectors()).toEqual(['.group &']) + expect(variant.selectors({})).toEqual(['.group &']) + expect(variant.selectors({ value: 'hover' })).toEqual(['.group:hover &']) + expect(variant.selectors({ value: '.foo_&' })).toEqual(['.foo .group &']) + expect(variant.selectors({ modifier: 'foo', value: 'hover' })).toEqual(['.group\\/foo:hover &']) + expect(variant.selectors({ modifier: 'foo', value: '.foo_&' })).toEqual(['.foo .group\\/foo &']) + }) - let variant = variants.find((v) => v.name === 'marker') - expect(variant.selectors()).toEqual(['& *::marker', '&::marker']) -}) + it('should provide selectors for variants with atrules', () => { + let config = {} + let context = createContext(resolveConfig(config)) -it('should provide selectors for complex matchVariant variants like `group`', () => { - let config = {} - let context = createContext(resolveConfig(config)) + let variants = context.getVariants() - let variants = context.getVariants() + let variant = variants.find((v) => v.name === 'supports') + expect(variant.selectors({ value: 'display:grid' })).toEqual(['@supports (display:grid)']) + expect(variant.selectors({ value: 'aspect-ratio' })).toEqual([ + '@supports (aspect-ratio: var(--tw))', + ]) + }) - let variant = variants.find((v) => v.name === 'group') - expect(variant.selectors()).toEqual(['.group &']) - expect(variant.selectors({})).toEqual(['.group &']) - expect(variant.selectors({ value: 'hover' })).toEqual(['.group:hover &']) - expect(variant.selectors({ value: '.foo_&' })).toEqual(['.foo .group &']) - expect(variant.selectors({ modifier: 'foo', value: 'hover' })).toEqual(['.group\\/foo:hover &']) - expect(variant.selectors({ modifier: 'foo', value: '.foo_&' })).toEqual(['.foo .group\\/foo &']) -}) - -it('should provide selectors for variants with atrules', () => { - let config = {} - let context = createContext(resolveConfig(config)) - - let variants = context.getVariants() - - let variant = variants.find((v) => v.name === 'supports') - expect(variant.selectors({ value: 'display:grid' })).toEqual(['@supports (display:grid)']) - expect(variant.selectors({ value: 'aspect-ratio' })).toEqual([ - '@supports (aspect-ratio: var(--tw))', - ]) -}) - -it('should provide selectors for custom plugins that do a combination of parallel variants with modifiers with arbitrary values and with atrules', () => { - let config = { - plugins: [ - function ({ matchVariant }) { - matchVariant('foo', (value, { modifier }) => { - return [ - ` + it('should provide selectors for custom plugins that do a combination of parallel variants with modifiers with arbitrary values and with atrules', () => { + let config = { + plugins: [ + function ({ matchVariant }) { + matchVariant('foo', (value, { modifier }) => { + return [ + ` @supports (foo: ${modifier}) { @media (width <= 400px) { &:hover } } `, - `.${modifier}\\/${value} &:focus`, - ] - }) - }, - ], - } - let context = createContext(resolveConfig(config)) - - let variants = context.getVariants() - - let variant = variants.find((v) => v.name === 'foo') - expect(variant.selectors({ modifier: 'bar', value: 'baz' })).toEqual([ - '@supports (foo: bar) { @media (width <= 400px) { &:hover } }', - '.bar\\/baz &:focus', - ]) -}) - -it('should work for plugins that still use the modifySelectors API', () => { - let config = { - plugins: [ - function ({ addVariant }) { - addVariant('foo', ({ modifySelectors, container }) => { - // Manually mutating the selector - modifySelectors(({ selector }) => { - return selectorParser((selectors) => { - selectors.walkClasses((classNode) => { - classNode.value = `foo:${classNode.value}` - classNode.parent.insertBefore(classNode, selectorParser().astSync(`.foo `)) - }) - }).processSync(selector) + `.${modifier}\\/${value} &:focus`, + ] }) + }, + ], + } + let context = createContext(resolveConfig(config)) - // Manually wrap in supports query - let wrapper = postcss.atRule({ name: 'supports', params: 'display: grid' }) - let nodes = container.nodes - container.removeAll() - wrapper.append(nodes) - container.append(wrapper) - }) - }, - ], - } - let context = createContext(resolveConfig(config)) + let variants = context.getVariants() - let variants = context.getVariants() - - let variant = variants.find((v) => v.name === 'foo') - expect(variant.selectors({})).toEqual(['@supports (display: grid) { .foo .foo\\:& }']) -}) - -it('should special case the `@`', () => { - let config = { - plugins: [ - ({ matchVariant }) => { - matchVariant( - '@', - (value, { modifier }) => `@container ${modifier ?? ''} (min-width: ${value})`, - { - modifiers: 'any', - values: { - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - '7xl': '80rem', - }, - } - ) - }, - ], - } - let context = createContext(resolveConfig(config)) - - let variants = context.getVariants() - - let variant = variants.find((v) => v.name === '@') - expect(variant).toEqual({ - name: '@', - isArbitrary: true, - hasDash: false, - values: expect.any(Array), - selectors: expect.any(Function), + let variant = variants.find((v) => v.name === 'foo') + expect(variant.selectors({ modifier: 'bar', value: 'baz' })).toEqual([ + '@supports (foo: bar) { @media (width <= 400px) { &:hover } }', + '.bar\\/baz &:focus', + ]) + }) + + it('should work for plugins that still use the modifySelectors API', () => { + let config = { + plugins: [ + function ({ addVariant }) { + addVariant('foo', ({ modifySelectors, container }) => { + // Manually mutating the selector + modifySelectors(({ selector }) => { + return selectorParser((selectors) => { + selectors.walkClasses((classNode) => { + classNode.value = `foo:${classNode.value}` + classNode.parent.insertBefore(classNode, selectorParser().astSync(`.foo `)) + }) + }).processSync(selector) + }) + + // Manually wrap in supports query + let wrapper = postcss.atRule({ name: 'supports', params: 'display: grid' }) + let nodes = container.nodes + container.removeAll() + wrapper.append(nodes) + container.append(wrapper) + }) + }, + ], + } + let context = createContext(resolveConfig(config)) + + let variants = context.getVariants() + + let variant = variants.find((v) => v.name === 'foo') + expect(variant.selectors({})).toEqual(['@supports (display: grid) { .foo .foo\\:& }']) + }) + + it('should special case the `@`', () => { + let config = { + plugins: [ + ({ matchVariant }) => { + matchVariant( + '@', + (value, { modifier }) => `@container ${modifier ?? ''} (min-width: ${value})`, + { + modifiers: 'any', + values: { + xs: '20rem', + sm: '24rem', + md: '28rem', + lg: '32rem', + xl: '36rem', + '2xl': '42rem', + '3xl': '48rem', + '4xl': '56rem', + '5xl': '64rem', + '6xl': '72rem', + '7xl': '80rem', + }, + } + ) + }, + ], + } + let context = createContext(resolveConfig(config)) + + let variants = context.getVariants() + + let variant = variants.find((v) => v.name === '@') + expect(variant).toEqual({ + name: '@', + isArbitrary: true, + hasDash: false, + values: expect.any(Array), + selectors: expect.any(Function), + }) + expect(variant.selectors({ value: 'xs', modifier: 'foo' })).toEqual([ + '@container foo (min-width: 20rem)', + ]) }) - expect(variant.selectors({ value: 'xs', modifier: 'foo' })).toEqual([ - '@container foo (min-width: 20rem)', - ]) }) diff --git a/tests/import-syntax.test.js b/tests/import-syntax.test.js index 99f5163f7..c10d8b142 100644 --- a/tests/import-syntax.test.js +++ b/tests/import-syntax.test.js @@ -1,82 +1,84 @@ -import { run, html, css, defaults } from './util/run' +import { crosscheck, run, html, css, defaults } from './util/run' -test('using @import instead of @tailwind', () => { - let config = { - content: [ - { - raw: html` -Hello world!
- - - - - `, - }, - ], - corePlugins: { preflight: false }, - plugins: [ - function ({ addBase }) { - addBase({ - h1: { - fontSize: '32px', - }, - }) - }, - ], - } +crosscheck(() => { + test('using @import instead of @tailwind', () => { + let config = { + content: [ + { + raw: html` +Hello world!
+ + + + + `, + }, + ], + corePlugins: { preflight: false }, + plugins: [ + function ({ addBase }) { + addBase({ + h1: { + fontSize: '32px', + }, + }) + }, + ], + } - let input = css` - @import 'tailwindcss/base'; - @import 'tailwindcss/components'; - @import 'tailwindcss/utilities'; - ` + let input = css` + @import 'tailwindcss/base'; + @import 'tailwindcss/components'; + @import 'tailwindcss/utilities'; + ` - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - h1 { - font-size: 32px; - } - ${defaults} - .container { - width: 100%; - } - @media (min-width: 640px) { + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + h1 { + font-size: 32px; + } + ${defaults} .container { - max-width: 640px; + width: 100%; } - } - @media (min-width: 768px) { - .container { - max-width: 768px; + @media (min-width: 640px) { + .container { + max-width: 640px; + } } - } - @media (min-width: 1024px) { - .container { - max-width: 1024px; + @media (min-width: 768px) { + .container { + max-width: 768px; + } } - } - @media (min-width: 1280px) { - .container { - max-width: 1280px; + @media (min-width: 1024px) { + .container { + max-width: 1024px; + } } - } - @media (min-width: 1536px) { - .container { - max-width: 1536px; + @media (min-width: 1280px) { + .container { + max-width: 1280px; + } } - } - .mt-6 { - margin-top: 1.5rem; - } - .bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - } - @media (min-width: 768px) { - .md\:hover\:text-center:hover { - text-align: center; + @media (min-width: 1536px) { + .container { + max-width: 1536px; + } } - } - `) + .mt-6 { + margin-top: 1.5rem; + } + .bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + @media (min-width: 768px) { + .md\:hover\:text-center:hover { + text-align: center; + } + } + `) + }) }) }) diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index 209707f42..48fa4e894 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -2,228 +2,230 @@ import fs from 'fs' import path from 'path' import * as sharedState from '../src/lib/sharedState' -import { run, css, html, defaults } from './util/run' +import { crosscheck, run, html, css, defaults } from './util/run' -test('important boolean', () => { - let config = { - important: true, - darkMode: 'class', - content: [ - { - raw: html` - - - - - - - - - - - - - `, - }, - ], - corePlugins: { preflight: false }, - plugins: [ - function ({ addComponents, addUtilities }) { - addComponents( - { - '.btn': { - button: 'yes', - }, - }, - { respectImportant: true } - ) - addComponents( - { - '@font-face': { - 'font-family': 'Inter', - }, - '@page': { - margin: '1cm', - }, - }, - { respectImportant: true } - ) - addUtilities( - { - '.custom-util': { - button: 'no', - }, - }, - { respectImportant: false } - ) - }, - ], - } - - let input = css` - @tailwind base; - @tailwind components; - @layer components { - .custom-component { - @apply font-bold; - } - .custom-important-component { - @apply text-center !important; - } - } - @tailwind utilities; - ` - - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - ${defaults} - .container { - width: 100%; - } - @media (min-width: 640px) { - .container { - max-width: 640px; - } - } - @media (min-width: 768px) { - .container { - max-width: 768px; - } - } - @media (min-width: 1024px) { - .container { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .container { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .container { - max-width: 1536px; - } - } - .btn { - button: yes !important; - } - @font-face { - font-family: Inter; - } - @page { - margin: 1cm; - } - .custom-component { - font-weight: 700; - } - .custom-important-component { - text-align: center !important; - } - @keyframes spin { - to { - transform: rotate(360deg); - } - } - .animate-spin { - animation: spin 1s linear infinite !important; - } - .font-bold { - font-weight: 700 !important; - } - .custom-util { - button: no; - } - .group:hover .group-hover\:focus-within\:text-left:focus-within { - text-align: left !important; - } - [dir='rtl'] .rtl\:active\:text-center:active { - text-align: center !important; - } - @media (prefers-reduced-motion: no-preference) { - .motion-safe\:hover\:text-center:hover { - text-align: center !important; - } - } - .dark .dark\:focus\:text-left:focus { - text-align: left !important; - } - @media (min-width: 768px) { - .md\:hover\:text-right:hover { - text-align: right !important; - } - } - `) - }) -}) - -// This is in a describe block so we can use `afterEach` :) -describe('duplicate elision', () => { - let filePath = path.resolve(__dirname, './important-boolean-duplicates.test.html') - - afterEach(async () => await fs.promises.unlink(filePath)) - - test('important rules are not duplicated when rebuilding', async () => { +crosscheck(() => { + test('important boolean', () => { let config = { important: true, - content: [filePath], + darkMode: 'class', + content: [ + { + raw: html` + + + + + + + + + + + + + `, + }, + ], + corePlugins: { preflight: false }, + plugins: [ + function ({ addComponents, addUtilities }) { + addComponents( + { + '.btn': { + button: 'yes', + }, + }, + { respectImportant: true } + ) + addComponents( + { + '@font-face': { + 'font-family': 'Inter', + }, + '@page': { + margin: '1cm', + }, + }, + { respectImportant: true } + ) + addUtilities( + { + '.custom-util': { + button: 'no', + }, + }, + { respectImportant: false } + ) + }, + ], } - await fs.promises.writeFile( - config.content[0], - html` - - - ` - ) - let input = css` + @tailwind base; + @tailwind components; + @layer components { + .custom-component { + @apply font-bold; + } + .custom-important-component { + @apply text-center !important; + } + } @tailwind utilities; ` - let result = await run(input, config) - let allContexts = Array.from(sharedState.contextMap.values()) + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} + .container { + width: 100%; + } + @media (min-width: 640px) { + .container { + max-width: 640px; + } + } + @media (min-width: 768px) { + .container { + max-width: 768px; + } + } + @media (min-width: 1024px) { + .container { + max-width: 1024px; + } + } + @media (min-width: 1280px) { + .container { + max-width: 1280px; + } + } + @media (min-width: 1536px) { + .container { + max-width: 1536px; + } + } + .btn { + button: yes !important; + } + @font-face { + font-family: Inter; + } + @page { + margin: 1cm; + } + .custom-component { + font-weight: 700; + } + .custom-important-component { + text-align: center !important; + } + @keyframes spin { + to { + transform: rotate(360deg); + } + } + .animate-spin { + animation: spin 1s linear infinite !important; + } + .font-bold { + font-weight: 700 !important; + } + .custom-util { + button: no; + } + .group:hover .group-hover\:focus-within\:text-left:focus-within { + text-align: left !important; + } + [dir='rtl'] .rtl\:active\:text-center:active { + text-align: center !important; + } + @media (prefers-reduced-motion: no-preference) { + .motion-safe\:hover\:text-center:hover { + text-align: center !important; + } + } + .dark .dark\:focus\:text-left:focus { + text-align: left !important; + } + @media (min-width: 768px) { + .md\:hover\:text-right:hover { + text-align: right !important; + } + } + `) + }) + }) - let context = allContexts[allContexts.length - 1] + // This is in a describe block so we can use `afterEach` :) + describe('duplicate elision', () => { + let filePath = path.resolve(__dirname, './important-boolean-duplicates.test.html') - let ruleCacheSize1 = context.ruleCache.size + afterEach(async () => await fs.promises.unlink(filePath)) - expect(result.css).toMatchFormattedCss(css` - .ml-2 { - margin-left: 0.5rem !important; + test('important rules are not duplicated when rebuilding', async () => { + let config = { + important: true, + content: [filePath], } - .ml-4 { - margin-left: 1rem !important; - } - `) - await fs.promises.writeFile( - config.content[0], - html` - - + await fs.promises.writeFile( + config.content[0], + html` + + + ` + ) + + let input = css` + @tailwind utilities; ` - ) - result = await run(input, config) + let result = await run(input, config) + let allContexts = Array.from(sharedState.contextMap.values()) - let ruleCacheSize2 = context.ruleCache.size + let context = allContexts[allContexts.length - 1] - expect(result.css).toMatchFormattedCss(css` - .ml-2 { - margin-left: 0.5rem !important; - } - .ml-4 { - margin-left: 1rem !important; - } - .ml-6 { - margin-left: 1.5rem !important; - } - `) + let ruleCacheSize1 = context.ruleCache.size - // The rule cache was effectively doubling in size previously - // because the rule cache was never de-duped - // This ensures this behavior doesn't return - expect(ruleCacheSize2 - ruleCacheSize1).toBeLessThan(10) + expect(result.css).toMatchFormattedCss(css` + .ml-2 { + margin-left: 0.5rem !important; + } + .ml-4 { + margin-left: 1rem !important; + } + `) + + await fs.promises.writeFile( + config.content[0], + html` + + + ` + ) + + result = await run(input, config) + + let ruleCacheSize2 = context.ruleCache.size + + expect(result.css).toMatchFormattedCss(css` + .ml-2 { + margin-left: 0.5rem !important; + } + .ml-4 { + margin-left: 1rem !important; + } + .ml-6 { + margin-left: 1.5rem !important; + } + `) + + // The rule cache was effectively doubling in size previously + // because the rule cache was never de-duped + // This ensures this behavior doesn't return + expect(ruleCacheSize2 - ruleCacheSize1).toBeLessThan(10) + }) }) }) diff --git a/tests/important-modifier-prefix.test.js b/tests/important-modifier-prefix.test.js index 2c6a8bb62..782ec809e 100644 --- a/tests/important-modifier-prefix.test.js +++ b/tests/important-modifier-prefix.test.js @@ -1,77 +1,79 @@ -import { run, html, css, defaults } from './util/run' +import { crosscheck, run, html, css, defaults } from './util/run' -test('important modifier with prefix', () => { - let config = { - important: false, - prefix: 'tw-', - darkMode: 'class', - content: [ - { - raw: html` - - - - - - `, - }, - ], - corePlugins: { preflight: false }, - } +crosscheck(() => { + test('important modifier with prefix', () => { + let config = { + important: false, + prefix: 'tw-', + darkMode: 'class', + content: [ + { + raw: html` + + + + + + `, + }, + ], + corePlugins: { preflight: false }, + } - let input = css` - @tailwind base; - @tailwind components; - @tailwind utilities; - ` + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - ${defaults} - .\!tw-container { - width: 100% !important; - } - @media (min-width: 640px) { + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} .\!tw-container { - max-width: 640px !important; + width: 100% !important; } - } - @media (min-width: 768px) { - .\!tw-container { - max-width: 768px !important; + @media (min-width: 640px) { + .\!tw-container { + max-width: 640px !important; + } } - } - @media (min-width: 1024px) { - .\!tw-container { - max-width: 1024px !important; + @media (min-width: 768px) { + .\!tw-container { + max-width: 768px !important; + } } - } - @media (min-width: 1280px) { - .\!tw-container { - max-width: 1280px !important; + @media (min-width: 1024px) { + .\!tw-container { + max-width: 1024px !important; + } } - } - @media (min-width: 1536px) { - .\!tw-container { - max-width: 1536px !important; + @media (min-width: 1280px) { + .\!tw-container { + max-width: 1280px !important; + } } - } - .\!tw-font-bold { - font-weight: 700 !important; - } - .hover\:\!tw-text-center:hover { - text-align: center !important; - } - @media (min-width: 1024px) { - .lg\:\!tw-opacity-50 { - opacity: 0.5 !important; + @media (min-width: 1536px) { + .\!tw-container { + max-width: 1536px !important; + } } - } - @media (min-width: 1280px) { - .xl\:focus\:disabled\:\!tw-float-right:disabled:focus { - float: right !important; + .\!tw-font-bold { + font-weight: 700 !important; } - } - `) + .hover\:\!tw-text-center:hover { + text-align: center !important; + } + @media (min-width: 1024px) { + .lg\:\!tw-opacity-50 { + opacity: 0.5 !important; + } + } + @media (min-width: 1280px) { + .xl\:focus\:disabled\:\!tw-float-right:disabled:focus { + float: right !important; + } + } + `) + }) }) }) diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js index f6fd5f822..bde7eee2e 100644 --- a/tests/important-modifier.test.js +++ b/tests/important-modifier.test.js @@ -1,109 +1,111 @@ -import { run, css, html } from './util/run' +import { crosscheck, run, html, css } from './util/run' -test('important modifier', () => { - let config = { - important: false, - darkMode: 'class', - content: [ - { - raw: html` - - - - - - - - `, - }, - ], - corePlugins: { preflight: false }, - plugins: [ - function ({ theme, matchUtilities, addComponents }) { - matchUtilities( - { - 'custom-parent': (value) => { - return { - '.custom-child': { - margin: value, - }, - } +crosscheck(() => { + test('important modifier', () => { + let config = { + important: false, + darkMode: 'class', + content: [ + { + raw: html` + + + + + + + + `, + }, + ], + corePlugins: { preflight: false }, + plugins: [ + function ({ theme, matchUtilities, addComponents }) { + matchUtilities( + { + 'custom-parent': (value) => { + return { + '.custom-child': { + margin: value, + }, + } + }, }, - }, - { values: theme('spacing') } - ) - addComponents({ - '.btn': { - '&.disabled, &:disabled': { - color: 'gray', + { values: theme('spacing') } + ) + addComponents({ + '.btn': { + '&.disabled, &:disabled': { + color: 'gray', + }, }, - }, - }) - }, - ], - } + }) + }, + ], + } - let input = css` - @tailwind components; - @tailwind utilities; - ` + let input = css` + @tailwind components; + @tailwind utilities; + ` - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .\!container { - width: 100% !important; - } - @media (min-width: 640px) { + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` .\!container { - max-width: 640px !important; + width: 100% !important; } - } - @media (min-width: 768px) { - .\!container { - max-width: 768px !important; + @media (min-width: 640px) { + .\!container { + max-width: 640px !important; + } } - } - @media (min-width: 1024px) { - .\!container { - max-width: 1024px !important; + @media (min-width: 768px) { + .\!container { + max-width: 768px !important; + } } - } - @media (min-width: 1280px) { - .\!container { - max-width: 1280px !important; + @media (min-width: 1024px) { + .\!container { + max-width: 1024px !important; + } } - } - @media (min-width: 1536px) { - .\!container { - max-width: 1536px !important; + @media (min-width: 1280px) { + .\!container { + max-width: 1280px !important; + } } - } - .btn.disabled, - .btn:disabled { - color: gray; - } - .btn.\!disabled { - color: gray !important; - } - .\!font-bold { - font-weight: 700 !important; - } - .\!custom-parent-5 .custom-child { - margin: 1.25rem !important; - } - .hover\:\!text-center:hover { - text-align: center !important; - } - @media (min-width: 1024px) { - .lg\:\!opacity-50 { - opacity: 0.5 !important; + @media (min-width: 1536px) { + .\!container { + max-width: 1536px !important; + } } - } - @media (min-width: 1280px) { - .xl\:focus\:disabled\:\!float-right:disabled:focus { - float: right !important; + .btn.disabled, + .btn:disabled { + color: gray; } - } - `) + .btn.\!disabled { + color: gray !important; + } + .\!font-bold { + font-weight: 700 !important; + } + .\!custom-parent-5 .custom-child { + margin: 1.25rem !important; + } + .hover\:\!text-center:hover { + text-align: center !important; + } + @media (min-width: 1024px) { + .lg\:\!opacity-50 { + opacity: 0.5 !important; + } + } + @media (min-width: 1280px) { + .xl\:focus\:disabled\:\!float-right:disabled:focus { + float: right !important; + } + } + `) + }) }) }) diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index de7f8d271..bd0b1b11b 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -1,154 +1,156 @@ -import { run, html, css, defaults } from './util/run' +import { crosscheck, run, html, css, defaults } from './util/run' -test('important selector', () => { - let config = { - important: '#app', - darkMode: 'class', - content: [ - { - raw: html` - - - - - - - - - - - - - `, - }, - ], - corePlugins: { preflight: false }, - plugins: [ - function ({ addComponents, addUtilities }) { - addComponents( - { - '.btn': { - button: 'yes', +crosscheck(() => { + test('important selector', () => { + let config = { + important: '#app', + darkMode: 'class', + content: [ + { + raw: html` + + + + + + + + + + + + + `, + }, + ], + corePlugins: { preflight: false }, + plugins: [ + function ({ addComponents, addUtilities }) { + addComponents( + { + '.btn': { + button: 'yes', + }, }, - }, - { respectImportant: true } - ) - addComponents( - { - '@font-face': { - 'font-family': 'Inter', + { respectImportant: true } + ) + addComponents( + { + '@font-face': { + 'font-family': 'Inter', + }, + '@page': { + margin: '1cm', + }, }, - '@page': { - margin: '1cm', + { respectImportant: true } + ) + addUtilities( + { + '.custom-util': { + button: 'no', + }, }, - }, - { respectImportant: true } - ) - addUtilities( - { - '.custom-util': { - button: 'no', - }, - }, - { respectImportant: false } - ) - }, - ], - } - - let input = css` - @tailwind base; - @tailwind components; - @layer components { - .custom-component { - @apply font-bold; - } - .custom-important-component { - @apply text-center !important; - } + { respectImportant: false } + ) + }, + ], } - @tailwind utilities; - ` - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - ${defaults} - .container { - width: 100%; + let input = css` + @tailwind base; + @tailwind components; + @layer components { + .custom-component { + @apply font-bold; + } + .custom-important-component { + @apply text-center !important; + } } - @media (min-width: 640px) { + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { - max-width: 640px; + width: 100%; } - } - @media (min-width: 768px) { - .container { - max-width: 768px; + @media (min-width: 640px) { + .container { + max-width: 640px; + } } - } - @media (min-width: 1024px) { - .container { - max-width: 1024px; + @media (min-width: 768px) { + .container { + max-width: 768px; + } } - } - @media (min-width: 1280px) { - .container { - max-width: 1280px; + @media (min-width: 1024px) { + .container { + max-width: 1024px; + } } - } - @media (min-width: 1536px) { - .container { - max-width: 1536px; + @media (min-width: 1280px) { + .container { + max-width: 1280px; + } } - } - #app .btn { - button: yes; - } - @font-face { - font-family: Inter; - } - @page { - margin: 1cm; - } - .custom-component { - font-weight: 700; - } - .custom-important-component { - text-align: center !important; - } - @keyframes spin { - to { - transform: rotate(360deg); + @media (min-width: 1536px) { + .container { + max-width: 1536px; + } } - } - #app .animate-spin { - animation: spin 1s linear infinite; - } - #app .font-bold { - font-weight: 700; - } - .custom-util { - button: no; - } - #app .group:hover .group-hover\:focus-within\:text-left:focus-within { - text-align: left; - } - #app [dir='rtl'] .rtl\:active\:text-center:active { - text-align: center; - } - @media (prefers-reduced-motion: no-preference) { - #app .motion-safe\:hover\:text-center:hover { + #app .btn { + button: yes; + } + @font-face { + font-family: Inter; + } + @page { + margin: 1cm; + } + .custom-component { + font-weight: 700; + } + .custom-important-component { + text-align: center !important; + } + @keyframes spin { + to { + transform: rotate(360deg); + } + } + #app .animate-spin { + animation: spin 1s linear infinite; + } + #app .font-bold { + font-weight: 700; + } + .custom-util { + button: no; + } + #app .group:hover .group-hover\:focus-within\:text-left:focus-within { + text-align: left; + } + #app [dir='rtl'] .rtl\:active\:text-center:active { text-align: center; } - } - #app .dark .dark\:focus\:text-left:focus { - text-align: left; - } - @media (min-width: 768px) { - #app .md\:hover\:text-right:hover { - text-align: right; + @media (prefers-reduced-motion: no-preference) { + #app .motion-safe\:hover\:text-center:hover { + text-align: center; + } } - } - `) + #app .dark .dark\:focus\:text-left:focus { + text-align: left; + } + @media (min-width: 768px) { + #app .md\:hover\:text-right:hover { + text-align: right; + } + } + `) + }) }) }) diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 7c340da58..9fe307d74 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -1,901 +1,896 @@ -import { env } from '../src/lib/sharedState' -import { run, html, css } from './util/run' +import { crosscheck, run, html, css } from './util/run' -afterEach(() => { - env.OXIDE = false -}) +crosscheck(() => { + test('it works', () => { + let config = { + darkMode: 'class', + content: [ + { + raw: html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -let cases = env.ENGINE === 'oxide' ? [[true], [false]] : [[false]] -test.each(cases)('it works (using Rust: %p)', (useOxide) => { - env.OXIDE = useOxide - - let config = { - darkMode: 'class', - content: [ - { - raw: html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - }, - ], - corePlugins: { preflight: false }, - theme: { - extend: { - screens: { - range: { min: '1280px', max: '1535px' }, - multi: [{ min: '640px', max: '767px' }, { max: '868px' }], - }, - gradientColorStops: { - foo: '#bada55', - }, - backgroundImage: { - 'hero--home-1': "url('/images/homepage-1.jpg')", - }, - }, - }, - plugins: [ - function ({ addVariant }) { - addVariant( - 'foo', - ({ container }) => { - container.walkRules((rule) => { - rule.selector = `.foo\\:${rule.selector.slice(1)}` - rule.walkDecls((decl) => { - decl.important = true }) - }) + + `, + }, + ], + corePlugins: { preflight: false }, + theme: { + extend: { + screens: { + range: { min: '1280px', max: '1535px' }, + multi: [{ min: '640px', max: '767px' }, { max: '868px' }], }, - { before: 'sm' } - ) + gradientColorStops: { + foo: '#bada55', + }, + backgroundImage: { + 'hero--home-1': "url('/images/homepage-1.jpg')", + }, + }, }, - function ({ addUtilities, addBase, theme }) { - addBase({ - h1: { - fontSize: theme('fontSize.2xl'), - fontWeight: theme('fontWeight.bold'), - '&:first-child': { - marginTop: '0px', + plugins: [ + function ({ addVariant }) { + addVariant( + 'foo', + ({ container }) => { + container.walkRules((rule) => { + rule.selector = `.foo\\:${rule.selector.slice(1)}` + rule.walkDecls((decl) => { + decl.important = true + }) + }) }, - }, - }) - addUtilities( - { - '.magic-none': { - magic: 'none', + { before: 'sm' } + ) + }, + function ({ addUtilities, addBase, theme }) { + addBase({ + h1: { + fontSize: theme('fontSize.2xl'), + fontWeight: theme('fontWeight.bold'), + '&:first-child': { + marginTop: '0px', + }, }, - '.magic-tons': { - magic: 'tons', + }) + addUtilities( + { + '.magic-none': { + magic: 'none', + }, + '.magic-tons': { + magic: 'tons', + }, }, - }, - ['responsive', 'hover'] - ) - }, - ], - } + ['responsive', 'hover'] + ) + }, + ], + } - let input = css` - @layer utilities { - .custom-util { - background: #abcdef; + let input = css` + @layer utilities { + .custom-util { + background: #abcdef; + } + *, + ::before, + ::after, + ::backdrop { + margin: 10px; + } } - *, - ::before, - ::after, - ::backdrop { - margin: 10px; + @layer components { + .test-apply-font-variant { + @apply ordinal tabular-nums; + } + .custom-component { + background: #123456; + } + *, + ::before, + ::after, + ::backdrop { + padding: 5px; + } + .foo .bg-black { + appearance: none; + } } - } - @layer components { - .test-apply-font-variant { - @apply ordinal tabular-nums; + @layer base { + div { + background: #654321; + } } - .custom-component { - background: #123456; - } - *, - ::before, - ::after, - ::backdrop { - padding: 5px; - } - .foo .bg-black { - appearance: none; - } - } - @layer base { - div { - background: #654321; - } - } - .theme-test { - font-family: theme('fontFamily.sans'); - color: theme('colors.blue.500'); - } - @screen lg { - .screen-test { - color: purple; - } - } - .apply-1 { - @apply mt-6; - } - .apply-2 { - @apply mt-6; - } - .apply-test { - @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200; - } - .apply-components { - @apply container mx-auto; - } - .drop-empty-rules { - @apply hover:font-bold; - } - .apply-group { - @apply group-hover:font-bold; - } - .apply-dark-mode { - @apply dark:font-bold; - } - .apply-with-existing:hover { - @apply font-normal sm:bg-green-500; - } - .multiple, - .selectors { - @apply font-bold group-hover:font-normal; - } - .list { - @apply space-y-4; - } - .nested { - .example { - @apply font-bold hover:font-normal; - } - } - .apply-order-a { - @apply m-5 mt-6; - } - .apply-order-b { - @apply m-5 mt-6; - } - .apply-dark-group-example-a { - @apply dark:group-hover:bg-green-500; - } - .crazy-example { - @apply sm:motion-safe:group-active:focus:opacity-10; - } - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` .theme-test { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - color: #3b82f6; + font-family: theme('fontFamily.sans'); + color: theme('colors.blue.500'); } - @media (min-width: 1024px) { + @screen lg { .screen-test { color: purple; } } .apply-1 { - margin-top: 1.5rem; + @apply mt-6; } .apply-2 { - margin-top: 1.5rem; + @apply mt-6; } .apply-test { - margin-top: 1.5rem; - --tw-bg-opacity: 1; - background-color: rgb(236 72 153 / var(--tw-bg-opacity)); - } - .apply-test:hover { - font-weight: 700; - } - .apply-test:hover:focus { - font-weight: 700; - } - @media (min-width: 640px) { - .apply-test { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } - .apply-test:nth-child(even):focus { - --tw-bg-opacity: 1; - background-color: rgb(251 207 232 / var(--tw-bg-opacity)); - } + @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200; } .apply-components { - width: 100%; + @apply container mx-auto; } - @media (min-width: 640px) { - .apply-components { - max-width: 640px; - } + .drop-empty-rules { + @apply hover:font-bold; } - @media (min-width: 768px) { - .apply-components { - max-width: 768px; - } + .apply-group { + @apply group-hover:font-bold; } - @media (min-width: 1024px) { - .apply-components { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .apply-components { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .apply-components { - max-width: 1536px; - } - } - .apply-components { - margin-left: auto; - margin-right: auto; - } - .drop-empty-rules:hover { - font-weight: 700; - } - .group:hover .apply-group { - font-weight: 700; - } - .dark .apply-dark-mode { - font-weight: 700; + .apply-dark-mode { + @apply dark:font-bold; } .apply-with-existing:hover { - font-weight: 400; - } - @media (min-width: 640px) { - .apply-with-existing:hover { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } + @apply font-normal sm:bg-green-500; } .multiple, .selectors { - font-weight: 700; + @apply font-bold group-hover:font-normal; } - .group:hover .multiple, - .group:hover .selectors { - font-weight: 400; - } - .list > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); + .list { + @apply space-y-4; } .nested { .example { - font-weight: 700; - } - .example:hover { - font-weight: 400; + @apply font-bold hover:font-normal; } } .apply-order-a { - margin: 1.25rem; - margin-top: 1.5rem; + @apply m-5 mt-6; } .apply-order-b { - margin: 1.25rem; - margin-top: 1.5rem; + @apply m-5 mt-6; } - .dark .group:hover .apply-dark-group-example-a { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + .apply-dark-group-example-a { + @apply dark:group-hover:bg-green-500; } - @media (min-width: 640px) { - @media (prefers-reduced-motion: no-preference) { - .group:active .crazy-example:focus { - opacity: 0.1; + .crazy-example { + @apply sm:motion-safe:group-active:focus:opacity-10; + } + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .theme-test { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + color: #3b82f6; + } + @media (min-width: 1024px) { + .screen-test { + color: purple; } } - } - h1 { - font-size: 1.5rem; - font-weight: 700; - } - h1:first-child { - margin-top: 0px; - } - div { - background: #654321; - } - *, - ::before, - ::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-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: rgb(59 130 246 / 0.5); - --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; - --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-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: rgb(59 130 246 / 0.5); - --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: ; - } - .container { - width: 100%; - } - @media (min-width: 640px) { - .container { - max-width: 640px; + .apply-1 { + margin-top: 1.5rem; } - } - @media (min-width: 768px) { - .container { - max-width: 768px; + .apply-2 { + margin-top: 1.5rem; } - } - @media (min-width: 1024px) { - .container { - max-width: 1024px; + .apply-test { + margin-top: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(236 72 153 / var(--tw-bg-opacity)); } - } - @media (min-width: 1280px) { - .container { - max-width: 1280px; + .apply-test:hover { + font-weight: 700; } - } - @media (min-width: 1536px) { - .container { - max-width: 1536px; + .apply-test:hover:focus { + font-weight: 700; } - } - .test-apply-font-variant { - --tw-ordinal: ordinal; - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); - } - .custom-component { - background: #123456; - } - *, - ::before, - ::after, - ::backdrop { - padding: 5px; - } - .foo .bg-black { - appearance: none; - } - .inset-6 { - top: 1.5rem; - right: 1.5rem; - bottom: 1.5rem; - left: 1.5rem; - } - .inset-x-1 { - left: 0.25rem; - right: 0.25rem; - } - .end-8 { - inset-inline-end: 2rem; - } - .start-4 { - inset-inline-start: 1rem; - } - .mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; - } - .me-8 { - margin-inline-end: 2rem; - } - .ms-4 { - margin-inline-start: 1rem; - } - .mt-6 { - margin-top: 1.5rem; - } - .scale-50 { - --tw-scale-x: 0.5; - --tw-scale-y: 0.5; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { - grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; - } - .rounded-e { - border-start-end-radius: 0.25rem; - border-end-end-radius: 0.25rem; - } - .rounded-s { - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; - } - .rounded-es { - border-end-start-radius: 0.25rem; - } - .rounded-ss { - border-start-start-radius: 0.25rem; - } - .border-2 { - border-width: 2px; - } - .border-e-4 { - border-inline-end-width: 4px; - } - .border-s-0 { - border-inline-start-width: 0px; - } - .border-black { - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); - } - .border-e-red-400 { - --tw-border-opacity: 1; - border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); - } - .border-s-green-500 { - --tw-border-opacity: 1; - border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); - } - .bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - } - .bg-green-500 { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } - .bg-opacity-50 { - --tw-bg-opacity: 0.5; - } - .bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); - } - .bg-hero--home-1 { - background-image: url('/images/homepage-1.jpg'); - } - .from-foo { - --tw-gradient-from: #bada55; - --tw-gradient-to: rgb(186 218 85 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - } - .px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; - } - .pe-8 { - padding-inline-end: 2rem; - } - .ps-4 { - padding-inline-start: 1rem; - } - .pt-6 { - padding-top: 1.5rem; - } - .text-center { - text-align: center; - } - .font-medium { - font-weight: 500; - } - .shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), - 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); - } - .shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); - } - .magic-none { - magic: none; - } - .magic-tons { - magic: tons; - } - .custom-util { - background: #abcdef; - } - *, - ::before, - ::after, - ::backdrop { - margin: 10px; - } - .first\:pt-0:first-child { - padding-top: 0px; - } - .hover\:container:hover { - width: 100%; - } - @media (min-width: 640px) { - .hover\:container:hover { - max-width: 640px; + @media (min-width: 640px) { + .apply-test { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + } + .apply-test:nth-child(even):focus { + --tw-bg-opacity: 1; + background-color: rgb(251 207 232 / var(--tw-bg-opacity)); + } } - } - @media (min-width: 768px) { - .hover\:container:hover { - max-width: 768px; - } - } - @media (min-width: 1024px) { - .hover\:container:hover { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .hover\:container:hover { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .hover\:container:hover { - max-width: 1536px; - } - } - .hover\:scale-75:hover { - --tw-scale-x: 0.75; - --tw-scale-y: 0.75; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .hover\:font-bold:hover { - font-weight: 700; - } - .hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), - 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); - } - .hover\:custom-util:hover { - background: #abcdef; - } - .focus\:font-normal:focus { - font-weight: 400; - } - .focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) - var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) - var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); - } - .focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); - } - .focus\:hover\:font-light:hover:focus { - font-weight: 300; - } - .disabled\:font-bold:disabled { - font-weight: 700; - } - .group:hover .group-hover\:opacity-100 { - opacity: 1; - } - .group:hover .group-hover\:custom-util { - background: #abcdef; - } - .group:active .group-active\:opacity-10 { - opacity: 0.1; - } - .foo\:custom-util { - background: #abcdef !important; - } - .foo\:hover\:custom-util:hover { - background: #abcdef !important; - } - @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; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .motion-safe\:custom-util { - background: #abcdef; - } - } - @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; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - } - .dark .dark\:custom-util { - background: #abcdef; - } - @media (min-width: 640px) { - .sm\:container { + .apply-components { width: 100%; } @media (min-width: 640px) { - .sm\:container { + .apply-components { max-width: 640px; } } @media (min-width: 768px) { - .sm\:container { + .apply-components { max-width: 768px; } } @media (min-width: 1024px) { - .sm\:container { + .apply-components { max-width: 1024px; } } @media (min-width: 1280px) { - .sm\:container { + .apply-components { max-width: 1280px; } } @media (min-width: 1536px) { - .sm\:container { + .apply-components { max-width: 1536px; } } - .sm\:text-center { - text-align: center; + .apply-components { + margin-left: auto; + margin-right: auto; } - .sm\:tabular-nums { + .drop-empty-rules:hover { + font-weight: 700; + } + .group:hover .apply-group { + font-weight: 700; + } + .dark .apply-dark-mode { + font-weight: 700; + } + .apply-with-existing:hover { + font-weight: 400; + } + @media (min-width: 640px) { + .apply-with-existing:hover { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + } + } + .multiple, + .selectors { + font-weight: 700; + } + .group:hover .multiple, + .group:hover .selectors { + font-weight: 400; + } + .list > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); + } + .nested { + .example { + font-weight: 700; + } + .example:hover { + font-weight: 400; + } + } + .apply-order-a { + margin: 1.25rem; + margin-top: 1.5rem; + } + .apply-order-b { + margin: 1.25rem; + margin-top: 1.5rem; + } + .dark .group:hover .apply-dark-group-example-a { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + } + @media (min-width: 640px) { + @media (prefers-reduced-motion: no-preference) { + .group:active .crazy-example:focus { + opacity: 0.1; + } + } + } + h1 { + font-size: 1.5rem; + font-weight: 700; + } + h1:first-child { + margin-top: 0px; + } + div { + background: #654321; + } + *, + ::before, + ::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-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: rgb(59 130 246 / 0.5); + --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; + --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-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: rgb(59 130 246 / 0.5); + --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: ; + } + .container { + width: 100%; + } + @media (min-width: 640px) { + .container { + max-width: 640px; + } + } + @media (min-width: 768px) { + .container { + max-width: 768px; + } + } + @media (min-width: 1024px) { + .container { + max-width: 1024px; + } + } + @media (min-width: 1280px) { + .container { + max-width: 1280px; + } + } + @media (min-width: 1536px) { + .container { + max-width: 1536px; + } + } + .test-apply-font-variant { + --tw-ordinal: ordinal; --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } - .sm\:custom-util { - background: #abcdef; + .custom-component { + background: #123456; } - @media (prefers-reduced-motion: no-preference) { - .group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus { - opacity: 0.1; - } + *, + ::before, + ::after, + ::backdrop { + padding: 5px; } - } - @media (min-width: 768px) { - .md\:container { - width: 100%; + .foo .bg-black { + appearance: none; } - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } + .inset-6 { + top: 1.5rem; + right: 1.5rem; + bottom: 1.5rem; + left: 1.5rem; } - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } + .inset-x-1 { + left: 0.25rem; + right: 0.25rem; } - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } + .end-8 { + inset-inline-end: 2rem; } - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } + .start-4 { + inset-inline-start: 1rem; } - @media (min-width: 1536px) { - .md\:container { - max-width: 1536px; - } + .mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; } - .md\:text-center { + .me-8 { + margin-inline-end: 2rem; + } + .ms-4 { + margin-inline-start: 1rem; + } + .mt-6 { + margin-top: 1.5rem; + } + .scale-50 { + --tw-scale-x: 0.5; + --tw-scale-y: 0.5; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] { + grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; + } + .rounded-e { + border-start-end-radius: 0.25rem; + border-end-end-radius: 0.25rem; + } + .rounded-s { + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; + } + .rounded-es { + border-end-start-radius: 0.25rem; + } + .rounded-ss { + border-start-start-radius: 0.25rem; + } + .border-2 { + border-width: 2px; + } + .border-e-4 { + border-inline-end-width: 4px; + } + .border-s-0 { + border-inline-start-width: 0px; + } + .border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + } + .border-e-red-400 { + --tw-border-opacity: 1; + border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); + } + .border-s-green-500 { + --tw-border-opacity: 1; + border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); + } + .bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + .bg-green-500 { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + } + .bg-opacity-50 { + --tw-bg-opacity: 0.5; + } + .bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); + } + .bg-hero--home-1 { + background-image: url('/images/homepage-1.jpg'); + } + .from-foo { + --tw-gradient-from: #bada55; + --tw-gradient-to: rgb(186 218 85 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + } + .px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; + } + .pe-8 { + padding-inline-end: 2rem; + } + .ps-4 { + padding-inline-start: 1rem; + } + .pt-6 { + padding-top: 1.5rem; + } + .text-center { text-align: center; } - .md\:opacity-50 { - opacity: 0.5; + .font-medium { + font-weight: 500; } - .md\:shadow-sm { + .shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .md\:hover\:border-r-blue-500\/30:hover { - border-right-color: rgb(59 130 246 / 0.3); + .magic-none { + magic: none; } - .md\:hover\:opacity-20:hover { - opacity: 0.2; + .magic-tons { + magic: tons; + } + .custom-util { + background: #abcdef; + } + *, + ::before, + ::after, + ::backdrop { + margin: 10px; + } + .first\:pt-0:first-child { + padding-top: 0px; + } + .hover\:container:hover { + width: 100%; + } + @media (min-width: 640px) { + .hover\:container:hover { + max-width: 640px; + } + } + @media (min-width: 768px) { + .hover\:container:hover { + max-width: 768px; + } + } + @media (min-width: 1024px) { + .hover\:container:hover { + max-width: 1024px; + } + } + @media (min-width: 1280px) { + .hover\:container:hover { + max-width: 1280px; + } + } + @media (min-width: 1536px) { + .hover\:container:hover { + max-width: 1536px; + } + } + .hover\:scale-75:hover { + --tw-scale-x: 0.75; + --tw-scale-y: 0.75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .hover\:font-bold:hover { + font-weight: 700; + } + .hover\:shadow-lg:hover { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + .hover\:custom-util:hover { + background: #abcdef; + } + .focus\:font-normal:focus { + font-weight: 400; + } + .focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); + } + .focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); + } + .focus\:hover\:font-light:hover:focus { + font-weight: 300; + } + .disabled\:font-bold:disabled { + font-weight: 700; + } + .group:hover .group-hover\:opacity-100 { + opacity: 1; + } + .group:hover .group-hover\:custom-util { + background: #abcdef; + } + .group:active .group-active\:opacity-10 { + opacity: 0.1; + } + .foo\:custom-util { + background: #abcdef !important; + } + .foo\:hover\:custom-util:hover { + background: #abcdef !important; } @media (prefers-reduced-motion: no-preference) { - .md\:motion-safe\:hover\:transition:hover { + .motion-safe\:transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active { - background: #abcdef !important; + .motion-safe\:custom-util { + background: #abcdef; } } + @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; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + } + .dark .dark\:custom-util { + background: #abcdef; + } @media (min-width: 640px) { - .md\:sm\:text-center { + .sm\:container { + width: 100%; + } + @media (min-width: 640px) { + .sm\:container { + max-width: 640px; + } + } + @media (min-width: 768px) { + .sm\:container { + max-width: 768px; + } + } + @media (min-width: 1024px) { + .sm\:container { + max-width: 1024px; + } + } + @media (min-width: 1280px) { + .sm\:container { + max-width: 1280px; + } + } + @media (min-width: 1536px) { + .sm\:container { + max-width: 1536px; + } + } + .sm\:text-center { text-align: center; } + .sm\:tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); + } + .sm\:custom-util { + background: #abcdef; + } + @media (prefers-reduced-motion: no-preference) { + .group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus { + opacity: 0.1; + } + } } - } - @media (min-width: 1280px) and (max-width: 1535px) { - .range\:text-right { - text-align: right; + @media (min-width: 768px) { + .md\:container { + width: 100%; + } + @media (min-width: 640px) { + .md\:container { + max-width: 640px; + } + } + @media (min-width: 768px) { + .md\:container { + max-width: 768px; + } + } + @media (min-width: 1024px) { + .md\:container { + max-width: 1024px; + } + } + @media (min-width: 1280px) { + .md\:container { + max-width: 1280px; + } + } + @media (min-width: 1536px) { + .md\:container { + max-width: 1536px; + } + } + .md\:text-center { + text-align: center; + } + .md\:opacity-50 { + opacity: 0.5; + } + .md\:shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + .md\:hover\:border-r-blue-500\/30:hover { + border-right-color: rgb(59 130 246 / 0.3); + } + .md\:hover\:opacity-20:hover { + opacity: 0.2; + } + @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; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active { + background: #abcdef !important; + } + } + @media (min-width: 640px) { + .md\:sm\:text-center { + text-align: center; + } + } } - } - @media (min-width: 640px) and (max-width: 767px), (max-width: 868px) { - .multi\:text-left { - text-align: left; + @media (min-width: 1280px) and (max-width: 1535px) { + .range\:text-right { + text-align: right; + } } - } - `) + @media (min-width: 640px) and (max-width: 767px), (max-width: 868px) { + .multi\:text-left { + text-align: left; + } + } + `) + }) }) }) diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index a0404cbf6..a894d22e9 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -1,302 +1,249 @@ -import { run, html, css, defaults } from './util/run' +import { crosscheck, run, html, css, defaults } from './util/run' -test('custom user-land utilities', () => { - let config = { - content: [ - { - raw: html``, - }, - ], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let input = css` - @layer utilities { - .align-banana { - text-align: banana; - } +crosscheck(() => { + test('custom user-land utilities', () => { + let config = { + content: [ + { + raw: html``, + }, + ], + corePlugins: { preflight: false }, + theme: {}, + plugins: [], } - @tailwind base; - @tailwind components; - @tailwind utilities; + let input = css` + @layer utilities { + .align-banana { + text-align: banana; + } + } - @layer utilities { - .align-chocolate { - text-align: chocolate; - } - } - ` + @tailwind base; + @tailwind components; + @tailwind utilities; - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - ${defaults} + @layer utilities { + .align-chocolate { + text-align: chocolate; + } + } + ` - .uppercase { - text-transform: uppercase; - } - .align-banana { - text-align: banana; - } - .hover\:align-banana:hover { - text-align: banana; - } - .focus\:hover\:align-chocolate:hover:focus { - text-align: chocolate; - } - `) + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} + + .uppercase { + text-transform: uppercase; + } + .align-banana { + text-align: banana; + } + .hover\:align-banana:hover { + text-align: banana; + } + .focus\:hover\:align-chocolate:hover:focus { + text-align: chocolate; + } + `) + }) }) -}) -test('comments can be used inside layers without crashing', () => { - let config = { - content: [ - { - raw: html``, - }, - ], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let input = css` - @tailwind base; - @tailwind components; - @tailwind utilities; - - @layer base { - /* Important base */ - div { - background-color: #bada55; - } + test('comments can be used inside layers without crashing', () => { + let config = { + content: [ + { + raw: html``, + }, + ], + corePlugins: { preflight: false }, + theme: {}, + plugins: [], } - @layer utilities { - /* Important utility */ - .important-utility { - text-align: banana; - } - } + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - /* Important component */ + @layer base { + /* Important base */ + div { + background-color: #bada55; + } + } + + @layer utilities { + /* Important utility */ + .important-utility { + text-align: banana; + } + } + + @layer components { + /* Important component */ + .important-component { + text-align: banana; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + /* Important base */ + div { + background-color: #bada55; + } + + ${defaults} + + /* Important component */ .important-component { - text-align: banana; - } - } - ` + text-align: banana; + } - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - /* Important base */ - div { - background-color: #bada55; - } - - ${defaults} - - /* Important component */ - .important-component { - text-align: banana; - } - - /* Important utility */ - .important-utility { - text-align: banana; - } - `) + /* Important utility */ + .important-utility { + text-align: banana; + } + `) + }) }) -}) -test('comments can be used inside layers (with important) without crashing', () => { - let config = { - important: true, - content: [ - { - raw: html``, - }, - ], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let input = css` - @tailwind base; - @tailwind components; - @tailwind utilities; - - @layer base { - /* Important base */ - div { - background-color: #bada55; - } + test('comments can be used inside layers (with important) without crashing', () => { + let config = { + important: true, + content: [ + { + raw: html``, + }, + ], + corePlugins: { preflight: false }, + theme: {}, + plugins: [], } - @layer utilities { - /* Important utility */ - .important-utility { - text-align: banana; - } - } + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - /* Important component */ + @layer base { + /* Important base */ + div { + background-color: #bada55; + } + } + + @layer utilities { + /* Important utility */ + .important-utility { + text-align: banana; + } + } + + @layer components { + /* Important component */ + .important-component { + text-align: banana; + } + } + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + /* Important base */ + div { + background-color: #bada55; + } + + ${defaults} + + /* Important component */ .important-component { - text-align: banana; - } - } - ` + text-align: banana; + } - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - /* Important base */ - div { - background-color: #bada55; - } - - ${defaults} - - /* Important component */ - .important-component { - text-align: banana; - } - - /* Important utility */ - .important-utility { - text-align: banana !important; - } - `) + /* Important utility */ + .important-utility { + text-align: banana !important; + } + `) + }) }) -}) -test('layers are grouped and inserted at the matching @tailwind rule', () => { - let config = { - content: [ - { raw: html`` }, - ], - plugins: [ - function ({ addBase, addComponents, addUtilities }) { - addBase({ body: { margin: 0 } }) + test('layers are grouped and inserted at the matching @tailwind rule', () => { + let config = { + content: [ + { + raw: html``, + }, + ], + plugins: [ + function ({ addBase, addComponents, addUtilities }) { + addBase({ body: { margin: 0 } }) - addComponents({ - '.input': { background: 'white' }, - }) + addComponents({ + '.input': { background: 'white' }, + }) - addUtilities({ - '.float-squirrel': { float: 'squirrel' }, - }) - }, - ], - corePlugins: { preflight: false }, - } - - let input = css` - @layer vanilla { - strong { - font-weight: medium; - } + addUtilities({ + '.float-squirrel': { float: 'squirrel' }, + }) + }, + ], + corePlugins: { preflight: false }, } - @tailwind base; - @tailwind components; - @tailwind utilities; - - @layer components { - .btn { - background: blue; - } - } - - @layer utilities { - .align-banana { - text-align: banana; - } - } - - @layer base { - h1 { - font-weight: bold; - } - } - - @layer components { - .card { - border-radius: 12px; - } - } - - @layer base { - p { - font-weight: normal; - } - } - - @layer utilities { - .align-sandwich { - text-align: sandwich; - } - } - - @layer chocolate { - a { - text-decoration: underline; - } - } - ` - - expect.assertions(2) - - return run(input, config).then((result) => { - expect(result.warnings().length).toBe(0) - expect(result.css).toMatchFormattedCss(css` + let input = css` @layer vanilla { strong { font-weight: medium; } } - body { - margin: 0; + @tailwind base; + @tailwind components; + @tailwind utilities; + + @layer components { + .btn { + background: blue; + } } - h1 { - font-weight: bold; + @layer utilities { + .align-banana { + text-align: banana; + } } - p { - font-weight: normal; + @layer base { + h1 { + font-weight: bold; + } } - ${defaults} - - .input { - background: white; + @layer components { + .card { + border-radius: 12px; + } } - .btn { - background: blue; + @layer base { + p { + font-weight: normal; + } } - .card { - border-radius: 12px; - } - - .float-squirrel { - float: squirrel; - } - - .align-banana { - text-align: banana; - } - - .align-sandwich { - text-align: sandwich; + @layer utilities { + .align-sandwich { + text-align: sandwich; + } } @layer chocolate { @@ -304,43 +251,100 @@ test('layers are grouped and inserted at the matching @tailwind rule', () => { text-decoration: underline; } } - `) - }) -}) + ` -it('should keep `@supports` rules inside `@layer`s', () => { - let config = { - content: [{ raw: html`` }], - plugins: [], - } + expect.assertions(2) - let input = css` - @tailwind utilities; - - @layer utilities { - .test { - --tw-test: 1; - } - - @supports (backdrop-filter: blur(1px)) { - .test { - --tw-test: 0.9; + return run(input, config).then((result) => { + expect(result.warnings().length).toBe(0) + expect(result.css).toMatchFormattedCss(css` + @layer vanilla { + strong { + font-weight: medium; + } } - } + + body { + margin: 0; + } + + h1 { + font-weight: bold; + } + + p { + font-weight: normal; + } + + ${defaults} + + .input { + background: white; + } + + .btn { + background: blue; + } + + .card { + border-radius: 12px; + } + + .float-squirrel { + float: squirrel; + } + + .align-banana { + text-align: banana; + } + + .align-sandwich { + text-align: sandwich; + } + + @layer chocolate { + a { + text-decoration: underline; + } + } + `) + }) + }) + + it('should keep `@supports` rules inside `@layer`s', () => { + let config = { + content: [{ raw: html`` }], + plugins: [], } - ` - return run(input, config).then((result) => { - return expect(result.css).toMatchFormattedCss(css` - .test { - --tw-test: 1; - } + let input = css` + @tailwind utilities; - @supports (backdrop-filter: blur(1px)) { + @layer utilities { .test { - --tw-test: 0.9; + --tw-test: 1; + } + + @supports (backdrop-filter: blur(1px)) { + .test { + --tw-test: 0.9; + } } } - `) + ` + + return run(input, config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + .test { + --tw-test: 1; + } + + @supports (backdrop-filter: blur(1px)) { + .test { + --tw-test: 0.9; + } + } + `) + }) }) }) diff --git a/tests/layer-without-tailwind.test.js b/tests/layer-without-tailwind.test.js index 231f7a150..2e1e4dd82 100644 --- a/tests/layer-without-tailwind.test.js +++ b/tests/layer-without-tailwind.test.js @@ -1,79 +1,81 @@ -import { run, html, css } from './util/run' +import { crosscheck, run, html, css } from './util/run' -test('using @layer without @tailwind', async () => { - let config = { - content: [{ raw: html`` }], - } - - let input = css` - @layer components { - .foo { - color: black; - } +crosscheck(() => { + test('using @layer without @tailwind', async () => { + let config = { + content: [{ raw: html`` }], } - ` - await expect(run(input, config)).rejects.toThrowError( - '`@layer components` is used but no matching `@tailwind components` directive is present.' - ) -}) - -test('using @responsive without @tailwind', async () => { - let config = { - content: [{ raw: html`` }], - } - - let input = css` - @responsive { - .foo { - color: black; + let input = css` + @layer components { + .foo { + color: black; + } } + ` + + await expect(run(input, config)).rejects.toThrowError( + '`@layer components` is used but no matching `@tailwind components` directive is present.' + ) + }) + + test('using @responsive without @tailwind', async () => { + let config = { + content: [{ raw: html`` }], } - ` - await expect(run(input, config)).rejects.toThrowError( - '`@responsive` is used but `@tailwind utilities` is missing.' - ) -}) - -test('using @variants without @tailwind', async () => { - let config = { - content: [{ raw: html`` }], - } - - let input = css` - @variants hover { - .foo { - color: black; + let input = css` + @responsive { + .foo { + color: black; + } } + ` + + await expect(run(input, config)).rejects.toThrowError( + '`@responsive` is used but `@tailwind utilities` is missing.' + ) + }) + + test('using @variants without @tailwind', async () => { + let config = { + content: [{ raw: html`` }], } - ` - await expect(run(input, config)).rejects.toThrowError( - '`@variants` is used but `@tailwind utilities` is missing.' - ) -}) - -test('non-Tailwind @layer rules are okay', async () => { - let config = { - content: [{ raw: html`` }], - } - - let input = css` - @layer custom { - .foo { - color: black; + let input = css` + @variants hover { + .foo { + color: black; + } } - } - ` + ` - return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` + await expect(run(input, config)).rejects.toThrowError( + '`@variants` is used but `@tailwind utilities` is missing.' + ) + }) + + test('non-Tailwind @layer rules are okay', async () => { + let config = { + content: [{ raw: html`` }], + } + + let input = css` @layer custom { .foo { color: black; } } - `) + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + @layer custom { + .foo { + color: black; + } + } + `) + }) }) }) diff --git a/tests/match-components.test.js b/tests/match-components.test.js index 04ec0ee63..f1801857d 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -1,91 +1,95 @@ -import { run, html, css, defaults } from './util/run' +import { crosscheck, run, html, css, defaults } from './util/run' -it('should be possible to matchComponents', () => { - let config = { - content: [ - { - raw: html`
-
-
-
-
`,
+crosscheck(() => {
+ it('should be possible to matchComponents', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
`,
+ },
+ ],
+ corePlugins: {
+ preflight: false,
},
- ],
- corePlugins: {
- preflight: false,
- },
- plugins: [
- function ({ matchComponents }) {
- matchComponents({
- card: (value) => {
- return [
- { color: value },
- {
- '.card-header': {
- borderTopWidth: 3,
- borderTopColor: value,
+ plugins: [
+ function ({ matchComponents }) {
+ matchComponents({
+ card: (value) => {
+ return [
+ { color: value },
+ {
+ '.card-header': {
+ borderTopWidth: 3,
+ borderTopColor: value,
+ },
},
- },
- {
- '.card-footer': {
- borderBottomWidth: 3,
- borderBottomColor: value,
+ {
+ '.card-footer': {
+ borderBottomWidth: 3,
+ borderBottomColor: value,
+ },
},
- },
- ]
- },
- })
- },
- ],
- }
+ ]
+ },
+ })
+ },
+ ],
+ }
- return run('@tailwind base; @tailwind components; @tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- ${defaults}
+ return run('@tailwind base; @tailwind components; @tailwind utilities', config).then(
+ (result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ ${defaults}
- .card-\[\#0088cc\] {
- color: #0088cc;
+ .card-\[\#0088cc\] {
+ color: #0088cc;
+ }
+
+ .card-\[\#0088cc\] .card-header {
+ border-top-width: 3px;
+ border-top-color: #0088cc;
+ }
+
+ .card-\[\#0088cc\] .card-footer {
+ border-bottom-width: 3px;
+ border-bottom-color: #0088cc;
+ }
+
+ .text-center {
+ text-align: center;
+ }
+
+ .font-bold {
+ font-weight: 700;
+ }
+
+ .shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --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);
+ }
+
+ .hover\:card-\[\#f0f\]:hover {
+ color: #f0f;
+ }
+
+ .hover\:card-\[\#f0f\]:hover .card-header {
+ border-top-width: 3px;
+ border-top-color: #f0f;
+ }
+
+ .hover\:card-\[\#f0f\]:hover .card-footer {
+ border-bottom-width: 3px;
+ border-bottom-color: #f0f;
+ }
+ `)
}
-
- .card-\[\#0088cc\] .card-header {
- border-top-width: 3px;
- border-top-color: #0088cc;
- }
-
- .card-\[\#0088cc\] .card-footer {
- border-bottom-width: 3px;
- border-bottom-color: #0088cc;
- }
-
- .text-center {
- text-align: center;
- }
-
- .font-bold {
- font-weight: 700;
- }
-
- .shadow {
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
- --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);
- }
-
- .hover\:card-\[\#f0f\]:hover {
- color: #f0f;
- }
-
- .hover\:card-\[\#f0f\]:hover .card-header {
- border-top-width: 3px;
- border-top-color: #f0f;
- }
-
- .hover\:card-\[\#f0f\]:hover .card-footer {
- border-bottom-width: 3px;
- border-bottom-color: #f0f;
- }
- `)
+ )
})
})
diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js
index 41ef29a29..9b3cd4c56 100644
--- a/tests/match-utilities.test.js
+++ b/tests/match-utilities.test.js
@@ -1,573 +1,575 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('match utilities with modifiers', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
+crosscheck(() => {
+ test('match utilities with modifiers', async () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
- plugins: [
- ({ matchUtilities }) => {
- matchUtilities(
- {
- test: (value, { modifier }) => ({
- color: `${value}_${modifier}`,
- }),
- },
- {
- values: {
- DEFAULT: 'default',
- bar: 'bar',
- '1': 'one',
- '2': 'two',
- '1/foo': 'onefoo',
- '[8]/[9]': 'eightnine',
+ plugins: [
+ ({ matchUtilities }) => {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({
+ color: `${value}_${modifier}`,
+ }),
},
- modifiers: 'any',
- }
- )
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .test {
- color: default_null;
+ {
+ values: {
+ DEFAULT: 'default',
+ bar: 'bar',
+ '1': 'one',
+ '2': 'two',
+ '1/foo': 'onefoo',
+ '[8]/[9]': 'eightnine',
+ },
+ modifiers: 'any',
+ }
+ )
+ },
+ ],
}
- .test-1\/\[foo\] {
- color: one_[foo];
- }
- .test-1\/foo {
- color: onefoo_null;
- }
- .test-2\/foo {
- color: two_foo;
- }
- .test-\[8\]\/\[9\] {
- color: eightnine_null;
- }
- .test\/\[foo\] {
- color: default_[foo];
- }
- .test\/foo {
- color: default_foo;
- }
- `)
-})
-test('match utilities with modifiers in the config', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
+ let input = css`
+ @tailwind utilities;
+ `
- plugins: [
- ({ matchUtilities }) => {
- matchUtilities(
- {
- test: (value, { modifier }) => ({
- color: `${value}_${modifier}`,
- }),
- },
- {
- values: {
- DEFAULT: 'default',
- bar: 'bar',
- '1': 'one',
- },
- modifiers: {
- foo: 'mewtwo',
- },
- }
- )
- },
- ],
- }
+ let result = await run(input, config)
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .test {
- color: default_null;
- }
- .test-1\/\[bar\] {
- color: one_bar;
- }
- .test-1\/foo {
- color: one_mewtwo;
- }
- .test\/\[bar\] {
- color: default_bar;
- }
- .test\/foo {
- color: default_mewtwo;
- }
- `)
-})
-
-test('match utilities can omit utilities by returning null', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
-
- plugins: [
- ({ matchUtilities }) => {
- matchUtilities(
- {
- test: (value, { modifier }) =>
- modifier === 'bad'
- ? null
- : {
- color: `${value}_${modifier}`,
- },
- },
- {
- values: {
- DEFAULT: 'default',
- bar: 'bar',
- '1': 'one',
- },
- modifiers: 'any',
- }
- )
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .test {
- color: default_null;
- }
- .test\/good {
- color: default_good;
- }
- `)
-})
-
-test('matching utilities with a basic configured value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value) => ({ value }),
- },
- {
- values: {
- foo: 'value_foo',
- },
- }
- )
- },
- ],
- corePlugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-foo {
- value: value_foo;
+ expect(result.css).toMatchFormattedCss(css`
+ .test {
+ color: default_null;
+ }
+ .test-1\/\[foo\] {
+ color: one_[foo];
+ }
+ .test-1\/foo {
+ color: onefoo_null;
+ }
+ .test-2\/foo {
+ color: two_foo;
+ }
+ .test-\[8\]\/\[9\] {
+ color: eightnine_null;
+ }
+ .test\/\[foo\] {
+ color: default_[foo];
+ }
+ .test\/foo {
+ color: default_foo;
}
`)
})
-})
-test('matching utilities with an arbitrary value and configured modifier', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- modifiers: {
- bar: 'configured_bar',
+ test('match utilities with modifiers in the config', async () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
+
+ plugins: [
+ ({ matchUtilities }) => {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({
+ color: `${value}_${modifier}`,
+ }),
},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ DEFAULT: 'default',
+ bar: 'bar',
+ '1': 'one',
+ },
+ modifiers: {
+ foo: 'mewtwo',
+ },
+ }
+ )
+ },
+ ],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/bar {
- value: foo;
- modifier: configured_bar;
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .test {
+ color: default_null;
+ }
+ .test-1\/\[bar\] {
+ color: one_bar;
+ }
+ .test-1\/foo {
+ color: one_mewtwo;
+ }
+ .test\/\[bar\] {
+ color: default_bar;
+ }
+ .test\/foo {
+ color: default_mewtwo;
}
`)
})
-})
-test('matching utilities with an configured value and an arbitrary modifier (raw)', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'configured_foo',
+ test('match utilities can omit utilities by returning null', async () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
+
+ plugins: [
+ ({ matchUtilities }) => {
+ matchUtilities(
+ {
+ test: (value, { modifier }) =>
+ modifier === 'bad'
+ ? null
+ : {
+ color: `${value}_${modifier}`,
+ },
},
- modifiers: 'any', // Raw `[value]`
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ DEFAULT: 'default',
+ bar: 'bar',
+ '1': 'one',
+ },
+ modifiers: 'any',
+ }
+ )
+ },
+ ],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-foo\/\[bar\] {
- value: configured_foo;
- modifier: [bar];
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .test {
+ color: default_null;
+ }
+ .test\/good {
+ color: default_good;
}
`)
})
-})
-test('matching utilities with an configured value and an arbitrary modifier (non-raw)', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'configured_foo',
+ test('matching utilities with a basic configured value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value) => ({ value }),
},
- modifiers: {},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ foo: 'value_foo',
+ },
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-foo\/\[bar\] {
- value: configured_foo;
- modifier: bar;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-foo {
+ value: value_foo;
+ }
+ `)
+ })
})
-})
-test('matching utilities with an configured value and a configured modifier', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'configured_foo',
+ test('matching utilities with an arbitrary value and configured modifier', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- modifiers: {
- bar: 'configured_bar',
+ {
+ modifiers: {
+ bar: 'configured_bar',
+ },
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/bar {
+ value: foo;
+ modifier: configured_bar;
+ }
+ `)
+ })
+ })
+
+ test('matching utilities with an configured value and an arbitrary modifier (raw)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ foo: 'configured_foo',
+ },
+ modifiers: 'any', // Raw `[value]`
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-foo\/bar {
- value: configured_foo;
- modifier: configured_bar;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-foo\/\[bar\] {
+ value: configured_foo;
+ modifier: [bar];
+ }
+ `)
+ })
})
-})
-test('matching utilities with an arbitrary value and an arbitrary modifier (raw)', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- modifiers: 'any',
- }
- )
- },
- ],
- corePlugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/\[bar\] {
- value: foo;
- modifier: [bar];
- }
- `)
- })
-})
-
-test('matching utilities with an arbitrary value and an arbitrary modifier (non-raw)', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- modifiers: {},
- }
- )
- },
- ],
- corePlugins: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/\[bar\] {
- value: foo;
- modifier: bar;
- }
- `)
- })
-})
-
-test('matching utilities with a lookup value that looks like an arbitrary value and modifier', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/[bar]': 'hello',
+ test('matching utilities with an configured value and an arbitrary modifier (non-raw)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ foo: 'configured_foo',
+ },
+ modifiers: {},
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/\[bar\] {
- value: hello;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-foo\/\[bar\] {
+ value: configured_foo;
+ modifier: bar;
+ }
+ `)
+ })
})
-})
-test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = any)', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/[bar]': 'hello',
+ test('matching utilities with an configured value and a configured modifier', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- modifiers: 'any',
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ foo: 'configured_foo',
+ },
+ modifiers: {
+ bar: 'configured_bar',
+ },
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/\[bar\] {
- value: hello;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-foo\/bar {
+ value: configured_foo;
+ modifier: configured_bar;
+ }
+ `)
+ })
})
-})
-test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = {})', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/[bar]': 'hello',
+ test('matching utilities with an arbitrary value and an arbitrary modifier (raw)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- modifiers: {},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ modifiers: 'any',
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/\[bar\] {
- value: hello;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/\[bar\] {
+ value: foo;
+ modifier: [bar];
+ }
+ `)
+ })
})
-})
-test('matching utilities with a lookup value that looks like an arbitrary value and a configured modifier', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- '[foo]/bar': 'hello',
+ test('matching utilities with an arbitrary value and an arbitrary modifier (non-raw)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ modifiers: {},
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-\[foo\]\/bar {
- value: hello;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/\[bar\] {
+ value: foo;
+ modifier: bar;
+ }
+ `)
+ })
})
-})
-test('matching utilities with a lookup value that looks like a configured value and an arbitrary modifier', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- 'foo/[bar]': 'hello',
+ test('matching utilities with a lookup value that looks like an arbitrary value and modifier', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ '[foo]/[bar]': 'hello',
+ },
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-foo\/\[bar\] {
- value: hello;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/\[bar\] {
+ value: hello;
+ }
+ `)
+ })
})
-})
-test('matching utilities with a lookup value that does not match the configured type', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {},
- plugins: [
- function ({ matchUtilities }) {
- matchUtilities(
- {
- test: (value, { modifier }) => ({ value, modifier }),
- },
- {
- values: {
- foo: 'not-a-percentage',
+ test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = any)', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
},
- type: ['percentage'],
- }
- )
- },
- ],
- corePlugins: [],
- }
+ {
+ values: {
+ '[foo]/[bar]': 'hello',
+ },
+ modifiers: 'any',
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .test-foo {
- value: not-a-percentage;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/\[bar\] {
+ value: hello;
+ }
+ `)
+ })
+ })
+
+ test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = {})', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
+ },
+ {
+ values: {
+ '[foo]/[bar]': 'hello',
+ },
+ modifiers: {},
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/\[bar\] {
+ value: hello;
+ }
+ `)
+ })
+ })
+
+ test('matching utilities with a lookup value that looks like an arbitrary value and a configured modifier', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
+ },
+ {
+ values: {
+ '[foo]/bar': 'hello',
+ },
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-\[foo\]\/bar {
+ value: hello;
+ }
+ `)
+ })
+ })
+
+ test('matching utilities with a lookup value that looks like a configured value and an arbitrary modifier', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
+ },
+ {
+ values: {
+ 'foo/[bar]': 'hello',
+ },
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-foo\/\[bar\] {
+ value: hello;
+ }
+ `)
+ })
+ })
+
+ test('matching utilities with a lookup value that does not match the configured type', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {},
+ plugins: [
+ function ({ matchUtilities }) {
+ matchUtilities(
+ {
+ test: (value, { modifier }) => ({ value, modifier }),
+ },
+ {
+ values: {
+ foo: 'not-a-percentage',
+ },
+ type: ['percentage'],
+ }
+ )
+ },
+ ],
+ corePlugins: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .test-foo {
+ value: not-a-percentage;
+ }
+ `)
+ })
})
})
diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js
index ad08042af..41e7ca509 100644
--- a/tests/match-variants.test.js
+++ b/tests/match-variants.test.js
@@ -1,846 +1,850 @@
import resolveConfig from '../src/public/resolve-config'
import { createContext } from '../src/lib/setupContextUtils'
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('partial arbitrary variants', () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('potato', (flavor) => `.potato-${flavor} &`)
- },
- ],
- }
+crosscheck(() => {
+ test('partial arbitrary variants', () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('potato', (flavor) => `.potato-${flavor} &`)
+ },
+ ],
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .potato-baked .potato-\[baked\]\:w-3 {
- width: 0.75rem;
- }
-
- .potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 240 138 / var(--tw-bg-opacity));
- }
- `)
- })
-})
-
-test('partial arbitrary variants with at-rules', () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('potato', (flavor) => `@media (potato: ${flavor})`)
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (potato: baked) {
- .potato-\[baked\]\:w-3 {
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .potato-baked .potato-\[baked\]\:w-3 {
width: 0.75rem;
}
- }
- @media (potato: yellow) {
- .potato-\[yellow\]\:bg-yellow-200 {
+
+ .potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
}
- }
- `)
+ `)
+ })
})
-})
-test('partial arbitrary variants with at-rules and placeholder', () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('potato', (flavor) => `@media (potato: ${flavor}) { &:potato }`)
- },
- ],
- }
+ test('partial arbitrary variants with at-rules', () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('potato', (flavor) => `@media (potato: ${flavor})`)
+ },
+ ],
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (potato: baked) {
- .potato-\[baked\]\:w-3:potato {
- width: 0.75rem;
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (potato: baked) {
+ .potato-\[baked\]\:w-3 {
+ width: 0.75rem;
+ }
}
- }
- @media (potato: yellow) {
- .potato-\[yellow\]\:bg-yellow-200:potato {
- --tw-bg-opacity: 1;
- background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+ @media (potato: yellow) {
+ .potato-\[yellow\]\:bg-yellow-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+ }
}
- }
- `)
+ `)
+ })
})
-})
-test('partial arbitrary variants with default values', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('tooltip', (side) => `&${side}`, {
- values: {
- bottom: '[data-location="bottom"]',
- top: '[data-location="top"]',
- },
- })
- },
- ],
- }
+ test('partial arbitrary variants with at-rules and placeholder', () => {
+ let config = {
+ content: [
+ {
+ raw: html` `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('potato', (flavor) => `@media (potato: ${flavor}) { &:potato }`)
+ },
+ ],
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .tooltip-bottom\:mt-2[data-location='bottom'] {
- margin-top: 0.5rem;
- }
-
- .tooltip-top\:mb-2[data-location='top'] {
- margin-bottom: 0.5rem;
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (potato: baked) {
+ .potato-\[baked\]\:w-3:potato {
+ width: 0.75rem;
+ }
+ }
+ @media (potato: yellow) {
+ .potato-\[yellow\]\:bg-yellow-200:potato {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+ }
+ }
+ `)
+ })
})
-})
-test('matched variant values maintain the sort order they are registered in', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('alphabet', (side) => `&${side}`, {
- values: {
- a: '[data-value="a"]',
- b: '[data-value="b"]',
- c: '[data-value="c"]',
- d: '[data-value="d"]',
- },
- })
- },
- ],
- }
+ test('partial arbitrary variants with default values', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('tooltip', (side) => `&${side}`, {
+ values: {
+ bottom: '[data-location="bottom"]',
+ top: '[data-location="top"]',
+ },
+ })
+ },
+ ],
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .alphabet-a\:underline[data-value='a'] {
- text-decoration-line: underline;
- }
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .tooltip-bottom\:mt-2[data-location='bottom'] {
+ margin-top: 0.5rem;
+ }
- .alphabet-b\:underline[data-value='b'] {
- text-decoration-line: underline;
- }
-
- .alphabet-c\:underline[data-value='c'] {
- text-decoration-line: underline;
- }
-
- .alphabet-d\:underline[data-value='d'] {
- text-decoration-line: underline;
- }
- `)
+ .tooltip-top\:mb-2[data-location='top'] {
+ margin-bottom: 0.5rem;
+ }
+ `)
+ })
})
-})
-test('matchVariant can return an array of format strings from the function', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('test', (selector) =>
- selector.split(',').map((selector) => `&.${selector} > *`)
- )
- },
- ],
- }
+ test('matched variant values maintain the sort order they are registered in', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('alphabet', (side) => `&${side}`, {
+ values: {
+ a: '[data-value="a"]',
+ b: '[data-value="b"]',
+ c: '[data-value="c"]',
+ d: '[data-value="d"]',
+ },
+ })
+ },
+ ],
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .test-\[a\2c b\2c c\]\:underline.a > * {
- text-decoration-line: underline;
- }
-
- .test-\[a\2c b\2c c\]\:underline.b > * {
- text-decoration-line: underline;
- }
-
- .test-\[a\2c b\2c c\]\:underline.c > * {
- text-decoration-line: underline;
- }
- `)
- })
-})
-
-it('should be possible to sort variants', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- sort(a, z) {
- return parseInt(a.value) - parseInt(z.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 500px) {
- .testmin-\[500px\]\:underline {
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .alphabet-a\:underline[data-value='a'] {
text-decoration-line: underline;
}
- }
- @media (min-width: 700px) {
- .testmin-\[700px\]\:italic {
- font-style: italic;
- }
- }
- `)
- })
-})
-
-it('should be possible to compare arbitrary variants and hardcoded variants', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- values: {
- example: '600px',
- },
- sort(a, z) {
- return parseInt(a.value) - parseInt(z.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 500px) {
- .testmin-\[500px\]\:italic {
- font-style: italic;
- }
- }
-
- @media (min-width: 600px) {
- .testmin-example\:italic {
- font-style: italic;
- }
- }
-
- @media (min-width: 700px) {
- .testmin-\[700px\]\:italic {
- font-style: italic;
- }
- }
- `)
- })
-})
-
-it('should be possible to sort stacked arbitrary variants correctly', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- sort(a, z) {
- return parseInt(a.value) - parseInt(z.value)
- },
- })
-
- matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
- sort(a, z) {
- return parseInt(z.value) - parseInt(a.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 100px) {
- @media (max-width: 400px) {
- .testmin-\[100px\]\:testmax-\[400px\]\:underline {
- text-decoration-line: underline;
- }
- }
- @media (max-width: 350px) {
- .testmin-\[100px\]\:testmax-\[350px\]\:underline {
- text-decoration-line: underline;
- }
- }
- @media (max-width: 300px) {
- .testmin-\[100px\]\:testmax-\[300px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
-
- @media (min-width: 150px) {
- @media (max-width: 400px) {
- .testmin-\[150px\]\:testmax-\[400px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
- `)
- })
-})
-
-it('should maintain sort from other variants, if sort functions of arbitrary variants return 0', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- sort(a, z) {
- return parseInt(a.value) - parseInt(z.value)
- },
- })
-
- matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
- sort(a, z) {
- return parseInt(z.value) - parseInt(a.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 100px) {
- @media (max-width: 200px) {
- .testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover {
- text-decoration-line: underline;
- }
- .testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus {
- text-decoration-line: underline;
- }
- }
- }
- `)
- })
-})
-
-it('should sort arbitrary variants left to right (1)', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- sort(a, z) {
- return parseInt(a.value) - parseInt(z.value)
- },
- })
- matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
- sort(a, z) {
- return parseInt(z.value) - parseInt(a.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 100px) {
- @media (max-width: 400px) {
- .testmin-\[100px\]\:testmax-\[400px\]\:underline {
- text-decoration-line: underline;
- }
+ .alphabet-b\:underline[data-value='b'] {
+ text-decoration-line: underline;
}
- @media (max-width: 300px) {
- .testmin-\[100px\]\:testmax-\[300px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
-
- @media (min-width: 200px) {
- @media (max-width: 400px) {
- .testmin-\[200px\]\:testmax-\[400px\]\:underline {
- text-decoration-line: underline;
- }
+ .alphabet-c\:underline[data-value='c'] {
+ text-decoration-line: underline;
}
- @media (max-width: 300px) {
- .testmin-\[200px\]\:testmax-\[300px\]\:underline {
- text-decoration-line: underline;
- }
+ .alphabet-d\:underline[data-value='d'] {
+ text-decoration-line: underline;
}
- }
- `)
- })
-})
-
-it('should sort arbitrary variants left to right (2)', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- sort(a, z) {
- return parseInt(a.value) - parseInt(z.value)
- },
- })
- matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
- sort(a, z) {
- return parseInt(z.value) - parseInt(a.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (max-width: 400px) {
- @media (min-width: 100px) {
- .testmax-\[400px\]\:testmin-\[100px\]\:underline {
- text-decoration-line: underline;
- }
- }
- @media (min-width: 200px) {
- .testmax-\[400px\]\:testmin-\[200px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
-
- @media (max-width: 300px) {
- @media (min-width: 100px) {
- .testmax-\[300px\]\:testmin-\[100px\]\:underline {
- text-decoration-line: underline;
- }
- }
- @media (min-width: 200px) {
- .testmax-\[300px\]\:testmin-\[200px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
- `)
- })
-})
-
-it('should guarantee that we are not passing values from other variants to the wrong function', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
- sort(a, z) {
- let lookup = ['100px', '200px']
- if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
- throw new Error('We are seeing values that should not be there!')
- }
- return lookup.indexOf(a.value) - lookup.indexOf(z.value)
- },
- })
- matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
- sort(a, z) {
- let lookup = ['300px', '400px']
- if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
- throw new Error('We are seeing values that should not be there!')
- }
- return lookup.indexOf(z.value) - lookup.indexOf(a.value)
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-width: 100px) {
- @media (max-width: 400px) {
- .testmin-\[100px\]\:testmax-\[400px\]\:underline {
- text-decoration-line: underline;
- }
- }
-
- @media (max-width: 300px) {
- .testmin-\[100px\]\:testmax-\[300px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
-
- @media (min-width: 200px) {
- @media (max-width: 400px) {
- .testmin-\[200px\]\:testmax-\[400px\]\:underline {
- text-decoration-line: underline;
- }
- }
-
- @media (max-width: 300px) {
- .testmin-\[200px\]\:testmax-\[300px\]\:underline {
- text-decoration-line: underline;
- }
- }
- }
- `)
- })
-})
-
-it('should default to the DEFAULT value for variants', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('foo', (value) => `.foo${value} &`, {
- values: {
- DEFAULT: '.bar',
- },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo.bar .foo\:underline {
- text-decoration-line: underline;
- }
- `)
- })
-})
-
-it('should not generate anything if the matchVariant does not have a DEFAULT value configured', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('foo', (value) => `.foo${value} &`)
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css``)
- })
-})
-
-it('should be possible to use `null` as a DEFAULT value', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
- values: { DEFAULT: null },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo-good .foo\:underline {
- text-decoration-line: underline;
- }
- `)
- })
-})
-
-it('should be possible to use `undefined` as a DEFAULT value', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
- values: { DEFAULT: undefined },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo-good .foo\:underline {
- text-decoration-line: underline;
- }
- `)
- })
-})
-
-it('should be possible to use `undefined` as a DEFAULT value', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- ({ matchVariant }) => {
- matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
- values: { DEFAULT: undefined },
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo-good .foo\:underline {
- text-decoration-line: underline;
- }
- `)
- })
-})
-
-it('should not break things', () => {
- let config = {}
-
- let context = createContext(resolveConfig(config))
- let [[, fn]] = context.variantMap.get('group')
-
- let format
-
- expect(
- fn({
- format(input) {
- format = input
- },
+ `)
})
- ).toBe(undefined)
+ })
- expect(format).toBe(':merge(.group) &')
+ test('matchVariant can return an array of format strings from the function', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('test', (selector) =>
+ selector.split(',').map((selector) => `&.${selector} > *`)
+ )
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .test-\[a\2c b\2c c\]\:underline.a > * {
+ text-decoration-line: underline;
+ }
+
+ .test-\[a\2c b\2c c\]\:underline.b > * {
+ text-decoration-line: underline;
+ }
+
+ .test-\[a\2c b\2c c\]\:underline.c > * {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should be possible to sort variants', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(a.value) - parseInt(z.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 500px) {
+ .testmin-\[500px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+
+ @media (min-width: 700px) {
+ .testmin-\[700px\]\:italic {
+ font-style: italic;
+ }
+ }
+ `)
+ })
+ })
+
+ it('should be possible to compare arbitrary variants and hardcoded variants', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ values: {
+ example: '600px',
+ },
+ sort(a, z) {
+ return parseInt(a.value) - parseInt(z.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 500px) {
+ .testmin-\[500px\]\:italic {
+ font-style: italic;
+ }
+ }
+
+ @media (min-width: 600px) {
+ .testmin-example\:italic {
+ font-style: italic;
+ }
+ }
+
+ @media (min-width: 700px) {
+ .testmin-\[700px\]\:italic {
+ font-style: italic;
+ }
+ }
+ `)
+ })
+ })
+
+ it('should be possible to sort stacked arbitrary variants correctly', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(a.value) - parseInt(z.value)
+ },
+ })
+
+ matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(z.value) - parseInt(a.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 100px) {
+ @media (max-width: 400px) {
+ .testmin-\[100px\]\:testmax-\[400px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ @media (max-width: 350px) {
+ .testmin-\[100px\]\:testmax-\[350px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ @media (max-width: 300px) {
+ .testmin-\[100px\]\:testmax-\[300px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+
+ @media (min-width: 150px) {
+ @media (max-width: 400px) {
+ .testmin-\[150px\]\:testmax-\[400px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+ `)
+ })
+ })
+
+ it('should maintain sort from other variants, if sort functions of arbitrary variants return 0', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(a.value) - parseInt(z.value)
+ },
+ })
+
+ matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(z.value) - parseInt(a.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 100px) {
+ @media (max-width: 200px) {
+ .testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover {
+ text-decoration-line: underline;
+ }
+ .testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus {
+ text-decoration-line: underline;
+ }
+ }
+ }
+ `)
+ })
+ })
+
+ it('should sort arbitrary variants left to right (1)', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(a.value) - parseInt(z.value)
+ },
+ })
+ matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(z.value) - parseInt(a.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 100px) {
+ @media (max-width: 400px) {
+ .testmin-\[100px\]\:testmax-\[400px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+
+ @media (max-width: 300px) {
+ .testmin-\[100px\]\:testmax-\[300px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+
+ @media (min-width: 200px) {
+ @media (max-width: 400px) {
+ .testmin-\[200px\]\:testmax-\[400px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+
+ @media (max-width: 300px) {
+ .testmin-\[200px\]\:testmax-\[300px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+ `)
+ })
+ })
+
+ it('should sort arbitrary variants left to right (2)', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(a.value) - parseInt(z.value)
+ },
+ })
+ matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+ sort(a, z) {
+ return parseInt(z.value) - parseInt(a.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (max-width: 400px) {
+ @media (min-width: 100px) {
+ .testmax-\[400px\]\:testmin-\[100px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ @media (min-width: 200px) {
+ .testmax-\[400px\]\:testmin-\[200px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+
+ @media (max-width: 300px) {
+ @media (min-width: 100px) {
+ .testmax-\[300px\]\:testmin-\[100px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ @media (min-width: 200px) {
+ .testmax-\[300px\]\:testmin-\[200px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+ `)
+ })
+ })
+
+ it('should guarantee that we are not passing values from other variants to the wrong function', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
+ sort(a, z) {
+ let lookup = ['100px', '200px']
+ if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
+ throw new Error('We are seeing values that should not be there!')
+ }
+ return lookup.indexOf(a.value) - lookup.indexOf(z.value)
+ },
+ })
+ matchVariant('testmax', (value) => `@media (max-width: ${value})`, {
+ sort(a, z) {
+ let lookup = ['300px', '400px']
+ if (lookup.indexOf(a.value) === -1 || lookup.indexOf(z.value) === -1) {
+ throw new Error('We are seeing values that should not be there!')
+ }
+ return lookup.indexOf(z.value) - lookup.indexOf(a.value)
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-width: 100px) {
+ @media (max-width: 400px) {
+ .testmin-\[100px\]\:testmax-\[400px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+
+ @media (max-width: 300px) {
+ .testmin-\[100px\]\:testmax-\[300px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+
+ @media (min-width: 200px) {
+ @media (max-width: 400px) {
+ .testmin-\[200px\]\:testmax-\[400px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+
+ @media (max-width: 300px) {
+ .testmin-\[200px\]\:testmax-\[300px\]\:underline {
+ text-decoration-line: underline;
+ }
+ }
+ }
+ `)
+ })
+ })
+
+ it('should default to the DEFAULT value for variants', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('foo', (value) => `.foo${value} &`, {
+ values: {
+ DEFAULT: '.bar',
+ },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .foo.bar .foo\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should not generate anything if the matchVariant does not have a DEFAULT value configured', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('foo', (value) => `.foo${value} &`)
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css``)
+ })
+ })
+
+ it('should be possible to use `null` as a DEFAULT value', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
+ values: { DEFAULT: null },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .foo-good .foo\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should be possible to use `undefined` as a DEFAULT value', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
+ values: { DEFAULT: undefined },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .foo-good .foo\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should be possible to use `undefined` as a DEFAULT value', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ ({ matchVariant }) => {
+ matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
+ values: { DEFAULT: undefined },
+ })
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .foo-good .foo\:underline {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should not break things', () => {
+ let config = {}
+
+ let context = createContext(resolveConfig(config))
+ let [[, fn]] = context.variantMap.get('group')
+
+ let format
+
+ expect(
+ fn({
+ format(input) {
+ format = input
+ },
+ })
+ ).toBe(undefined)
+
+ expect(format).toBe(':merge(.group) &')
+ })
})
diff --git a/tests/min-max-screen-variants.test.js b/tests/min-max-screen-variants.test.js
index 0a6a5fc7f..f55789aa7 100644
--- a/tests/min-max-screen-variants.test.js
+++ b/tests/min-max-screen-variants.test.js
@@ -1,212 +1,311 @@
-import { run, css, html } from './util/run'
import log from '../src/util/log'
+import { crosscheck, run, html, css } from './util/run'
-let warn
+crosscheck(() => {
+ let warn
-beforeEach(() => {
- warn = jest.spyOn(log, 'warn')
-})
+ beforeEach(() => {
+ warn = jest.spyOn(log, 'warn')
+ })
-afterEach(() => {
- warn.mockClear()
-})
+ afterEach(() => {
+ warn.mockClear()
+ })
-let defaultScreens = {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
-}
-
-it('sorts min and max correctly relative to screens and each other', async () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: defaultScreens,
- },
+ let defaultScreens = {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
}
- let input = css`
- @tailwind utilities;
- `
+ it('sorts min and max correctly relative to screens and each other', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: defaultScreens,
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (max-width: 800px) {
+ .max-\[800px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (max-width: 700px) {
+ .max-\[700px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 700px) {
+ .min-\[700px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 768px) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 800px) {
+ .min-\[800px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+ })
+ })
+
+ it('works when using min variants screens config is empty and variants all use the same unit', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {},
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
- return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
- @media (max-width: 800px) {
- .max-\[800px\]\:font-bold {
- font-weight: 700;
- }
- }
- @media (max-width: 700px) {
- .max-\[700px\]\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
@media (min-width: 700px) {
.min-\[700px\]\:font-bold {
font-weight: 700;
}
}
- @media (min-width: 768px) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
@media (min-width: 800px) {
.min-\[800px\]\:font-bold {
font-weight: 700;
}
}
`)
+
+ expect(warn).toHaveBeenCalledTimes(0)
})
-})
-it('works when using min variants screens config is empty and variants all use the same unit', async () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
+ it('works when using max variants screens config is empty and variants all use the same unit', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {},
},
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {},
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
}
- @media (min-width: 700px) {
- .min-\[700px\]\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 800px) {
- .min-\[800px\]\:font-bold {
- font-weight: 700;
- }
- }
- `)
- expect(warn).toHaveBeenCalledTimes(0)
-})
+ let input = css`
+ @tailwind utilities;
+ `
-it('works when using max variants screens config is empty and variants all use the same unit', () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (max-width: 800px) {
+ .max-\[800px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (max-width: 700px) {
+ .max-\[700px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+ })
+ })
+
+ it('converts simple min-width screens for max variant', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: defaultScreens,
},
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {},
- },
- }
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media not all and (min-width: 1024px) {
+ .max-lg\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (max-width: 700px) {
+ .max-\[700px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media not all and (min-width: 640px) {
+ .max-sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (max-width: 300px) {
+ .max-\[300px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 768px) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+ })
+ })
+
+ it('does not have keyed screens for min variant', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: defaultScreens,
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (min-width: 300px) {
+ .min-\[300px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 700px) {
+ .min-\[700px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 768px) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+ })
+ })
+
+ it('warns when using min variants with complex screen configs', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+
+ // Any presence of an object makes it complex
+ yodawg: { min: '700px' },
+ },
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
- return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
- @media (max-width: 800px) {
- .max-\[800px\]\:font-bold {
- font-weight: 700;
- }
- }
- @media (max-width: 700px) {
- .max-\[700px\]\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
-})
-
-it('converts simple min-width screens for max variant', () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: defaultScreens,
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media not all and (min-width: 1024px) {
- .max-lg\:font-bold {
- font-weight: 700;
- }
- }
- @media (max-width: 700px) {
- .max-\[700px\]\:font-bold {
- font-weight: 700;
- }
- }
- @media not all and (min-width: 640px) {
- .max-sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (max-width: 300px) {
- .max-\[300px\]\:font-bold {
- font-weight: 700;
- }
- }
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
@@ -218,445 +317,360 @@ it('converts simple min-width screens for max variant', () => {
}
}
`)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['complex-screen-config'])
})
-})
-it('does not have keyed screens for min variant', () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
+ it('warns when using min variants with simple configs containing mixed units', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '48rem',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+ },
},
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: defaultScreens,
- },
- }
+ }
- let input = css`
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
- return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.font-bold {
font-weight: 700;
}
- @media (min-width: 300px) {
- .min-\[300px\]\:font-bold {
- font-weight: 700;
- }
- }
@media (min-width: 640px) {
.sm\:font-bold {
font-weight: 700;
}
}
+ @media (min-width: 48rem) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['mixed-screen-units'])
+ })
+
+ it('warns when using min variants with mixed units (with screens config)', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+ },
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 768px) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
+ })
+
+ it('warns when using min variants with mixed units (with no screens config)', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {},
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
@media (min-width: 700px) {
.min-\[700px\]\:font-bold {
font-weight: 700;
}
}
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
+ })
+
+ it('warns when using max variants with complex screen configs', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+
+ // Any presence of an object makes it complex
+ yodawg: { min: '700px' },
+ },
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
@media (min-width: 768px) {
.md\:font-bold {
font-weight: 700;
}
}
`)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['complex-screen-config'])
+ })
+
+ it('warns when using max variants with simple configs containing mixed units', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '48rem',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+ },
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 48rem) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['mixed-screen-units'])
+ })
+
+ it('warns when using max variants with mixed units (with screens config)', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+ },
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (min-width: 640px) {
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 768px) {
+ .md\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
+ })
+
+ it('warns when using max variants with mixed units (with no screens config)', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {},
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (max-width: 700px) {
+ .max-\[700px\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
+ })
+
+ it('warns when using min and max variants with mixed units (with no screens config)', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {
+ screens: {},
+ },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ @media (max-width: 700rem) {
+ .max-\[700rem\]\:font-bold {
+ font-weight: 700;
+ }
+ }
+ `)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
})
})
-
-it('warns when using min variants with complex screen configs', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
-
- // Any presence of an object makes it complex
- yodawg: { min: '700px' },
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 768px) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['complex-screen-config'])
-})
-
-it('warns when using min variants with simple configs containing mixed units', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {
- sm: '640px',
- md: '48rem',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 48rem) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['mixed-screen-units'])
-})
-
-it('warns when using min variants with mixed units (with screens config)', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 768px) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
-})
-
-it('warns when using min variants with mixed units (with no screens config)', async () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {},
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 700px) {
- .min-\[700px\]\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
-})
-
-it('warns when using max variants with complex screen configs', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
-
- // Any presence of an object makes it complex
- yodawg: { min: '700px' },
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 768px) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['complex-screen-config'])
-})
-
-it('warns when using max variants with simple configs containing mixed units', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {
- sm: '640px',
- md: '48rem',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 48rem) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['mixed-screen-units'])
-})
-
-it('warns when using max variants with mixed units (with screens config)', async () => {
- let config = {
- content: [
- {
- raw: html` `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
- },
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .sm\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 768px) {
- .md\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
-})
-
-it('warns when using max variants with mixed units (with no screens config)', async () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {},
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (max-width: 700px) {
- .max-\[700px\]\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
-})
-
-it('warns when using min and max variants with mixed units (with no screens config)', async () => {
- let config = {
- content: [
- {
- raw: html`
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {
- screens: {},
- },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- @media (max-width: 700rem) {
- .max-\[700rem\]\:font-bold {
- font-weight: 700;
- }
- }
- `)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['minmax-have-mixed-units'])
-})
diff --git a/tests/minimum-impact-selector.test.js b/tests/minimum-impact-selector.test.js
index d8292e467..ed2fad914 100644
--- a/tests/minimum-impact-selector.test.js
+++ b/tests/minimum-impact-selector.test.js
@@ -1,29 +1,32 @@
import { elementSelectorParser } from '../src/lib/resolveDefaultsAtRules'
+import { crosscheck } from './util/run'
-it.each`
- before | after
- ${'*'} | ${'*'}
- ${'*:hover'} | ${'*'}
- ${'* > *'} | ${'* > *'}
- ${'.foo'} | ${'.foo'}
- ${'.foo:hover'} | ${'.foo'}
- ${'.foo:focus:hover'} | ${'.foo'}
- ${'li:first-child'} | ${'li'}
- ${'li:before'} | ${'li:before'}
- ${'li::before'} | ${'li::before'}
- ${'#app .foo'} | ${'.foo'}
- ${'#app'} | ${'[id=app]'}
- ${'#app.other'} | ${'.other'}
- ${'input[type="text"]'} | ${'[type="text"]'}
- ${'input[type="text"].foo'} | ${'.foo'}
- ${'.group .group\\:foo'} | ${'.group\\:foo'}
- ${'.group:hover .group-hover\\:foo'} | ${'.group-hover\\:foo'}
- ${'.owl > * + *'} | ${'.owl > *'}
- ${'.owl > :not([hidden]) + :not([hidden])'} | ${'.owl > *'}
- ${'.group:hover .group-hover\\:owl > :not([hidden]) + :not([hidden])'} | ${'.group-hover\\:owl > *'}
- ${'.peer:first-child ~ .peer-first\\:shadow-md'} | ${'.peer-first\\:shadow-md'}
- ${'.whats ~ .next > span:hover'} | ${'span'}
- ${'.foo .bar ~ .baz > .next > span > article:hover'} | ${'article'}
-`('should generate "$after" from "$before"', ({ before, after }) => {
- expect(elementSelectorParser.transformSync(before).join(', ')).toEqual(after)
+crosscheck(() => {
+ it.each`
+ before | after
+ ${'*'} | ${'*'}
+ ${'*:hover'} | ${'*'}
+ ${'* > *'} | ${'* > *'}
+ ${'.foo'} | ${'.foo'}
+ ${'.foo:hover'} | ${'.foo'}
+ ${'.foo:focus:hover'} | ${'.foo'}
+ ${'li:first-child'} | ${'li'}
+ ${'li:before'} | ${'li:before'}
+ ${'li::before'} | ${'li::before'}
+ ${'#app .foo'} | ${'.foo'}
+ ${'#app'} | ${'[id=app]'}
+ ${'#app.other'} | ${'.other'}
+ ${'input[type="text"]'} | ${'[type="text"]'}
+ ${'input[type="text"].foo'} | ${'.foo'}
+ ${'.group .group\\:foo'} | ${'.group\\:foo'}
+ ${'.group:hover .group-hover\\:foo'} | ${'.group-hover\\:foo'}
+ ${'.owl > * + *'} | ${'.owl > *'}
+ ${'.owl > :not([hidden]) + :not([hidden])'} | ${'.owl > *'}
+ ${'.group:hover .group-hover\\:owl > :not([hidden]) + :not([hidden])'} | ${'.group-hover\\:owl > *'}
+ ${'.peer:first-child ~ .peer-first\\:shadow-md'} | ${'.peer-first\\:shadow-md'}
+ ${'.whats ~ .next > span:hover'} | ${'span'}
+ ${'.foo .bar ~ .baz > .next > span > article:hover'} | ${'article'}
+ `('should generate "$after" from "$before"', ({ before, after }) => {
+ expect(elementSelectorParser.transformSync(before).join(', ')).toEqual(after)
+ })
})
diff --git a/tests/modify-selectors.test.js b/tests/modify-selectors.test.js
index c440fab3f..a5e3ffaae 100644
--- a/tests/modify-selectors.test.js
+++ b/tests/modify-selectors.test.js
@@ -1,97 +1,99 @@
import selectorParser from 'postcss-selector-parser'
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('modify selectors', () => {
- let config = {
- darkMode: 'class',
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet...
-
-
- Lorem ipsum dolor sit amet...
-
-
- Lorem ipsum dolor sit amet...
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- theme: {},
- plugins: [
- function ({ addVariant }) {
- addVariant('foo', ({ modifySelectors, separator }) => {
- modifySelectors(({ selector }) => {
- return selectorParser((selectors) => {
- selectors.walkClasses((classNode) => {
- classNode.value = `foo${separator}${classNode.value}`
- classNode.parent.insertBefore(classNode, selectorParser().astSync(`.foo `))
- })
- }).processSync(selector)
+crosscheck(() => {
+ test('modify selectors', () => {
+ let config = {
+ darkMode: 'class',
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+ Lorem ipsum dolor sit amet...
-
+
+ Lorem ipsum dolor sit amet...
+
+
+ Lorem ipsum dolor sit amet...
+
+
+ Lorem ipsum dolor sit amet...
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ theme: {},
+ plugins: [
+ function ({ addVariant }) {
+ addVariant('foo', ({ modifySelectors, separator }) => {
+ modifySelectors(({ selector }) => {
+ return selectorParser((selectors) => {
+ selectors.walkClasses((classNode) => {
+ classNode.value = `foo${separator}${classNode.value}`
+ classNode.parent.insertBefore(classNode, selectorParser().astSync(`.foo `))
+ })
+ }).processSync(selector)
+ })
})
- })
- },
- ],
- }
-
- let input = css`
- @tailwind components;
- @tailwind utilities;
-
- @layer components {
- .markdown > p {
- margin-top: 12px;
- }
+ },
+ ],
}
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .markdown > p {
- margin-top: 12px;
- }
- .font-bold {
- font-weight: 700;
- }
- .foo .foo\:markdown > p {
- margin-top: 12px;
- }
- .foo .foo\:font-bold {
- font-weight: 700;
- }
- .foo .foo\:visited\:markdown:visited > p {
- margin-top: 12px;
- }
- .foo .foo\:hover\:font-bold:hover {
- font-weight: 700;
- }
- @media (min-width: 640px) {
- .foo .sm\:foo\:font-bold {
- font-weight: 700;
- }
- }
- @media (min-width: 768px) {
- .foo .md\:foo\:focus\:font-bold:focus {
- font-weight: 700;
- }
- }
- @media (min-width: 1024px) {
- .foo .lg\:foo\:disabled\:markdown:disabled > p {
+ let input = css`
+ @tailwind components;
+ @tailwind utilities;
+
+ @layer components {
+ .markdown > p {
margin-top: 12px;
}
}
- `)
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .markdown > p {
+ margin-top: 12px;
+ }
+ .font-bold {
+ font-weight: 700;
+ }
+ .foo .foo\:markdown > p {
+ margin-top: 12px;
+ }
+ .foo .foo\:font-bold {
+ font-weight: 700;
+ }
+ .foo .foo\:visited\:markdown:visited > p {
+ margin-top: 12px;
+ }
+ .foo .foo\:hover\:font-bold:hover {
+ font-weight: 700;
+ }
+ @media (min-width: 640px) {
+ .foo .sm\:foo\:font-bold {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 768px) {
+ .foo .md\:foo\:focus\:font-bold:focus {
+ font-weight: 700;
+ }
+ }
+ @media (min-width: 1024px) {
+ .foo .lg\:foo\:disabled\:markdown:disabled > p {
+ margin-top: 12px;
+ }
+ }
+ `)
+ })
})
})
diff --git a/tests/mutable.test.js b/tests/mutable.test.js
index 5c3f9a487..45419380f 100644
--- a/tests/mutable.test.js
+++ b/tests/mutable.test.js
@@ -1,52 +1,54 @@
import path from 'path'
import postcss from 'postcss'
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-function pluginThatMutatesRules() {
- return (root) => {
- root.walkRules((rule) => {
- rule.nodes
- .filter((node) => node.prop === 'background-image')
- .forEach((node) => {
- node.value = 'url("./bar.png")'
- })
+crosscheck(() => {
+ function pluginThatMutatesRules() {
+ return (root) => {
+ root.walkRules((rule) => {
+ rule.nodes
+ .filter((node) => node.prop === 'background-image')
+ .forEach((node) => {
+ node.value = 'url("./bar.png")'
+ })
- return rule
- })
+ return rule
+ })
+ }
}
-}
-test('plugins mutating rules after tailwind doesnt break it', async () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- backgroundImage: {
- foo: 'url("./foo.png")',
+ test('plugins mutating rules after tailwind doesnt break it', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ backgroundImage: {
+ foo: 'url("./foo.png")',
+ },
},
- },
- plugins: [],
- }
+ plugins: [],
+ }
- function checkResult(result) {
- expect(result.css).toMatchFormattedCss(css`
- .bg-foo {
- background-image: url('./foo.png');
- }
- `)
- }
+ function checkResult(result) {
+ expect(result.css).toMatchFormattedCss(css`
+ .bg-foo {
+ background-image: url('./foo.png');
+ }
+ `)
+ }
- // Verify the first run produces the expected result
- let firstRun = await run('@tailwind utilities', config)
- checkResult(firstRun)
+ // Verify the first run produces the expected result
+ let firstRun = await run('@tailwind utilities', config)
+ checkResult(firstRun)
- // Outside of the context of tailwind jit more postcss plugins may operate on the AST:
- // In this case we have a plugin that mutates rules directly
- await postcss([pluginThatMutatesRules()]).process(firstRun, {
- from: path.resolve(__filename),
+ // Outside of the context of tailwind jit more postcss plugins may operate on the AST:
+ // In this case we have a plugin that mutates rules directly
+ await postcss([pluginThatMutatesRules()]).process(firstRun, {
+ from: path.resolve(__filename),
+ })
+
+ // Verify subsequent runs don't produce mutated rules
+ let secondRun = await run('@tailwind utilities', config)
+ checkResult(secondRun)
})
-
- // Verify subsequent runs don't produce mutated rules
- let secondRun = await run('@tailwind utilities', config)
- checkResult(secondRun)
})
diff --git a/tests/negateValue.test.js b/tests/negateValue.test.js
index c31741d48..052132f91 100644
--- a/tests/negateValue.test.js
+++ b/tests/negateValue.test.js
@@ -1,14 +1,17 @@
import negateValue from '../src/util/negateValue'
+import { crosscheck } from './util/run'
-test('it negates numeric CSS values', () => {
- expect(negateValue('5')).toEqual('-5')
- expect(negateValue('10px')).toEqual('-10px')
- expect(negateValue('18rem')).toEqual('-18rem')
- expect(negateValue('-10')).toEqual('10')
- expect(negateValue('-7ch')).toEqual('7ch')
-})
+crosscheck(() => {
+ test('it negates numeric CSS values', () => {
+ expect(negateValue('5')).toEqual('-5')
+ expect(negateValue('10px')).toEqual('-10px')
+ expect(negateValue('18rem')).toEqual('-18rem')
+ expect(negateValue('-10')).toEqual('10')
+ expect(negateValue('-7ch')).toEqual('7ch')
+ })
-test('values that cannot be negated become undefined', () => {
- expect(negateValue('auto')).toBeUndefined()
- expect(negateValue('cover')).toBeUndefined()
+ test('values that cannot be negated become undefined', () => {
+ expect(negateValue('auto')).toBeUndefined()
+ expect(negateValue('cover')).toBeUndefined()
+ })
})
diff --git a/tests/negated-content.test.js b/tests/negated-content.test.js
index 6d46e3a8d..66e231946 100644
--- a/tests/negated-content.test.js
+++ b/tests/negated-content.test.js
@@ -1,27 +1,29 @@
import * as path from 'path'
-import { run, css, defaults } from './util/run'
+import { crosscheck, run, css, defaults } from './util/run'
-it('should be possible to use negated content patterns', () => {
- let config = {
- content: [
- path.resolve(__dirname, './negated-content-*.test.html'),
- '!' + path.resolve(__dirname, './negated-content-ignore.test.html'),
- ],
- corePlugins: { preflight: false },
- }
+crosscheck(() => {
+ it('should be possible to use negated content patterns', () => {
+ let config = {
+ content: [
+ path.resolve(__dirname, './negated-content-*.test.html'),
+ '!' + path.resolve(__dirname, './negated-content-ignore.test.html'),
+ ],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults}
- .uppercase {
- text-transform: uppercase;
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults}
+ .uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
})
})
diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js
index d28a6496e..af4196397 100644
--- a/tests/negative-prefix.test.js
+++ b/tests/negative-prefix.test.js
@@ -1,344 +1,348 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('using a negative prefix with a negative scale value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- 2: '8px',
- '-2': '-4px',
+crosscheck(() => {
+ test('using a negative prefix with a negative scale value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ 2: '8px',
+ '-2': '-4px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-2 {
- margin-top: -4px;
- }
- .mt-2 {
- margin-top: 8px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-2 {
+ margin-top: -4px;
+ }
+ .mt-2 {
+ margin-top: 8px;
+ }
+ `)
+ })
})
-})
-test('using a negative scale value with a plugin that does not support dynamic negative values', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- opacity: {
- '-50': '0.5',
+ test('using a negative scale value with a plugin that does not support dynamic negative values', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ opacity: {
+ '-50': '0.5',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-opacity-50 {
- opacity: 0.5;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-opacity-50 {
+ opacity: 0.5;
+ }
+ `)
+ })
})
-})
-test('using a negative prefix without a negative scale value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- 5: '20px',
+ test('using a negative prefix without a negative scale value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ 5: '20px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-5 {
- margin-top: -20px;
- }
- .mt-5 {
- margin-top: 20px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-5 {
+ margin-top: -20px;
+ }
+ .mt-5 {
+ margin-top: 20px;
+ }
+ `)
+ })
})
-})
-test('being an asshole', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- '-[10px]': '55px',
+ test('being an asshole', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ '-[10px]': '55px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-\[10px\] {
- margin-top: 55px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-\[10px\] {
+ margin-top: 55px;
+ }
+ `)
+ })
})
-})
-test('being a real asshole', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- '[10px]': '55px',
+ test('being a real asshole', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ '[10px]': '55px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-\[10px\] {
- margin-top: -55px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-\[10px\] {
+ margin-top: -55px;
+ }
+ `)
+ })
})
-})
-test('a value that includes a variable', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- 5: 'var(--sizing-5)',
+ test('a value that includes a variable', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ 5: 'var(--sizing-5)',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-5 {
- margin-top: calc(var(--sizing-5) * -1);
- }
- .mt-5 {
- margin-top: var(--sizing-5);
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-5 {
+ margin-top: calc(var(--sizing-5) * -1);
+ }
+ .mt-5 {
+ margin-top: var(--sizing-5);
+ }
+ `)
+ })
})
-})
-test('a value that includes a calc', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- 5: 'calc(52px * -3)',
+ test('a value that includes a calc', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ 5: 'calc(52px * -3)',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-5 {
- margin-top: calc(calc(52px * -3) * -1);
- }
- .mt-5 {
- margin-top: calc(52px * -3);
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-5 {
+ margin-top: calc(calc(52px * -3) * -1);
+ }
+ .mt-5 {
+ margin-top: calc(52px * -3);
+ }
+ `)
+ })
})
-})
-test('a value that includes min/max/clamp functions', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- min: 'min(100vmin, 3rem)',
- max: 'max(100vmax, 3rem)',
- clamp: 'clamp(1rem, 100vh, 3rem)',
+ test('a value that includes min/max/clamp functions', () => {
+ let config = {
+ content: [
+ { raw: html`` },
+ ],
+ theme: {
+ margin: {
+ min: 'min(100vmin, 3rem)',
+ max: 'max(100vmax, 3rem)',
+ clamp: 'clamp(1rem, 100vh, 3rem)',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-clamp {
- margin-top: calc(clamp(1rem, 100vh, 3rem) * -1);
- }
- .-mt-max {
- margin-top: calc(max(100vmax, 3rem) * -1);
- }
- .-mt-min {
- margin-top: calc(min(100vmin, 3rem) * -1);
- }
- .mt-clamp {
- margin-top: clamp(1rem, 100vh, 3rem);
- }
- .mt-max {
- margin-top: max(100vmax, 3rem);
- }
- .mt-min {
- margin-top: min(100vmin, 3rem);
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-clamp {
+ margin-top: calc(clamp(1rem, 100vh, 3rem) * -1);
+ }
+ .-mt-max {
+ margin-top: calc(max(100vmax, 3rem) * -1);
+ }
+ .-mt-min {
+ margin-top: calc(min(100vmin, 3rem) * -1);
+ }
+ .mt-clamp {
+ margin-top: clamp(1rem, 100vh, 3rem);
+ }
+ .mt-max {
+ margin-top: max(100vmax, 3rem);
+ }
+ .mt-min {
+ margin-top: min(100vmin, 3rem);
+ }
+ `)
+ })
})
-})
-test('a keyword value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- auto: 'auto',
+ test('a keyword value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ auto: 'auto',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .mt-auto {
- margin-top: auto;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .mt-auto {
+ margin-top: auto;
+ }
+ `)
+ })
})
-})
-test('a zero value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- 0: '0',
+ test('a zero value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ 0: '0',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-0 {
- margin-top: 0;
- }
- .mt-0 {
- margin-top: 0;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-0 {
+ margin-top: 0;
+ }
+ .mt-0 {
+ margin-top: 0;
+ }
+ `)
+ })
})
-})
-test('a color', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- colors: {
- red: 'red',
+ test('a color', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ colors: {
+ red: 'red',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css``)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css``)
+ })
})
-})
-test('arbitrary values', () => {
- let config = {
- content: [{ raw: html`` }],
- }
+ test('arbitrary values', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-\[10px\] {
- margin-top: -10px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-\[10px\] {
+ margin-top: -10px;
+ }
+ `)
+ })
})
-})
-test('negating a negative scale value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- weird: '-15px',
+ test('negating a negative scale value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ weird: '-15px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt-weird {
- margin-top: 15px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt-weird {
+ margin-top: 15px;
+ }
+ `)
+ })
})
-})
-test('negating a default value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- DEFAULT: '15px',
+ test('negating a default value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ DEFAULT: '15px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt {
- margin-top: -15px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt {
+ margin-top: -15px;
+ }
+ `)
+ })
})
-})
-test('using a negative prefix with a negative default scale value', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- margin: {
- DEFAULT: '8px',
- '-DEFAULT': '-4px',
+ test('using a negative prefix with a negative default scale value', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ DEFAULT: '8px',
+ '-DEFAULT': '-4px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-mt {
- margin-top: -4px;
- }
- .mt {
- margin-top: 8px;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-mt {
+ margin-top: -4px;
+ }
+ .mt {
+ margin-top: 8px;
+ }
+ `)
+ })
})
-})
-test('negating a default value with a configured prefix', () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`` }],
- theme: {
- margin: {
- DEFAULT: '15px',
+ test('negating a default value with a configured prefix', () => {
+ let config = {
+ prefix: 'tw-',
+ content: [{ raw: html`` }],
+ theme: {
+ margin: {
+ DEFAULT: '15px',
+ },
},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .tw--mt {
- margin-top: -15px;
- }
- `)
- })
-})
-
-test('arbitrary value keywords should be ignored', () => {
- let config = {
- content: [{ raw: html`` }],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css``)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .tw--mt {
+ margin-top: -15px;
+ }
+ `)
+ })
+ })
+
+ test('arbitrary value keywords should be ignored', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css``)
+ })
})
})
diff --git a/tests/normalize-config.test.js b/tests/normalize-config.test.js
index 8b21b2e64..6edb6f626 100644
--- a/tests/normalize-config.test.js
+++ b/tests/normalize-config.test.js
@@ -1,42 +1,41 @@
import { normalizeConfig } from '../src/util/normalizeConfig'
-import { run, css } from './util/run'
import resolveConfig from '../src/public/resolve-config'
-import { env } from '../src/lib/sharedState'
import log from '../src/util/log'
+import { crosscheck, run, css } from './util/run'
-let t = env.OXIDE ? test.skip : test
-
-it.each`
- config
- ${{ purge: [{ raw: 'text-center' }] }}
- ${{ purge: { content: [{ raw: 'text-center' }] } }}
- ${{ content: { content: [{ raw: 'text-center' }] } }}
-`('should normalize content $config', ({ config }) => {
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- .text-center {
- text-align: center;
- }
- `)
+crosscheck(({ stable, oxide }) => {
+ it.each`
+ config
+ ${{ purge: [{ raw: 'text-center' }] }}
+ ${{ purge: { content: [{ raw: 'text-center' }] } }}
+ ${{ content: { content: [{ raw: 'text-center' }] } }}
+ `('should normalize content $config', ({ config }) => {
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ .text-center {
+ text-align: center;
+ }
+ `)
+ })
})
-})
-it.each`
- config
- ${{ purge: { safelist: ['text-center'] } }}
- ${{ purge: { options: { safelist: ['text-center'] } } }}
- ${{ content: { safelist: ['text-center'] } }}
-`('should normalize safelist $config', ({ config }) => {
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- .text-center {
- text-align: center;
- }
- `)
+ it.each`
+ config
+ ${{ purge: { safelist: ['text-center'] } }}
+ ${{ purge: { options: { safelist: ['text-center'] } } }}
+ ${{ content: { safelist: ['text-center'] } }}
+ `('should normalize safelist $config', ({ config }) => {
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ .text-center {
+ text-align: center;
+ }
+ `)
+ })
})
-})
-t.each`
+ oxide.test.todo('should normalize extractors')
+ stable.test.each`
config
${{ content: [{ raw: 'text-center' }], purge: { extract: () => ['font-bold'] } }}
${{ content: [{ raw: 'text-center' }], purge: { extract: { DEFAULT: () => ['font-bold'] } } }}
@@ -50,103 +49,104 @@ t.each`
}}
${{ content: [{ raw: 'text-center' }], purge: { extract: { html: () => ['font-bold'] } } }}
`('should normalize extractors $config', ({ config }) => {
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- .font-bold {
- font-weight: 700;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ `)
+ })
})
-})
-t('should still be possible to use the "old" v2 config', () => {
- let config = {
- purge: {
+ oxide.test.todo('should still be possible to use the "old" v2 config')
+ stable.test('should still be possible to use the "old" v2 config', () => {
+ let config = {
+ purge: {
+ content: [
+ { raw: 'text-svelte', extension: 'svelte' },
+ { raw: '# My Big Heading', extension: 'md' },
+ ],
+ options: {
+ defaultExtractor(content) {
+ return content.split(' ').concat(['font-bold'])
+ },
+ },
+ extract: {
+ svelte(content) {
+ return content.replace('svelte', 'center').split(' ')
+ },
+ },
+ transform: {
+ md() {
+ return 'text-4xl'
+ },
+ },
+ },
+ theme: {
+ extends: {},
+ },
+ variants: {
+ extends: {},
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ .text-center {
+ text-align: center;
+ }
+
+ .text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+
+ .font-bold {
+ font-weight: 700;
+ }
+ `)
+ })
+ })
+
+ it('should keep content files with globs', () => {
+ let config = {
+ content: ['./example-folder/**/*.{html,js}'],
+ }
+
+ expect(normalizeConfig(resolveConfig(config)).content).toEqual({
+ files: ['./example-folder/**/*.{html,js}'],
+ relative: false,
+ extract: {},
+ transform: {},
+ })
+ })
+
+ it('should warn when we detect invalid globs with incorrect brace expansion', () => {
+ let spy = jest.spyOn(log, 'warn')
+
+ let config = {
content: [
- { raw: 'text-svelte', extension: 'svelte' },
- { raw: '# My Big Heading', extension: 'md' },
+ './{example-folder}/**/*.{html,js}',
+ './{example-folder}/**/*.{html}',
+ './example-folder/**/*.{html}',
],
- options: {
- defaultExtractor(content) {
- return content.split(' ').concat(['font-bold'])
- },
- },
- extract: {
- svelte(content) {
- return content.replace('svelte', 'center').split(' ')
- },
- },
- transform: {
- md() {
- return 'text-4xl'
- },
- },
- },
- theme: {
- extends: {},
- },
- variants: {
- extends: {},
- },
- }
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- .text-center {
- text-align: center;
- }
+ // No rewrite happens
+ expect(normalizeConfig(resolveConfig(config)).content).toEqual({
+ files: [
+ './{example-folder}/**/*.{html,js}',
+ './{example-folder}/**/*.{html}',
+ './example-folder/**/*.{html}',
+ ],
+ relative: false,
+ extract: {},
+ transform: {},
+ })
- .text-4xl {
- font-size: 2.25rem;
- line-height: 2.5rem;
- }
-
- .font-bold {
- font-weight: 700;
- }
- `)
+ // But a warning should happen
+ expect(spy).toHaveBeenCalledTimes(2)
+ expect(spy.mock.calls.map((x) => x[0])).toEqual(['invalid-glob-braces', 'invalid-glob-braces'])
+ spy.mockRestore()
})
})
-
-it('should keep content files with globs', () => {
- let config = {
- content: ['./example-folder/**/*.{html,js}'],
- }
-
- expect(normalizeConfig(resolveConfig(config)).content).toEqual({
- files: ['./example-folder/**/*.{html,js}'],
- relative: false,
- extract: {},
- transform: {},
- })
-})
-
-it('should warn when we detect invalid globs with incorrect brace expansion', () => {
- let spy = jest.spyOn(log, 'warn')
-
- let config = {
- content: [
- './{example-folder}/**/*.{html,js}',
- './{example-folder}/**/*.{html}',
- './example-folder/**/*.{html}',
- ],
- }
-
- // No rewrite happens
- expect(normalizeConfig(resolveConfig(config)).content).toEqual({
- files: [
- './{example-folder}/**/*.{html,js}',
- './{example-folder}/**/*.{html}',
- './example-folder/**/*.{html}',
- ],
- relative: false,
- extract: {},
- transform: {},
- })
-
- // But a warning should happen
- expect(spy).toHaveBeenCalledTimes(2)
- expect(spy.mock.calls.map((x) => x[0])).toEqual(['invalid-glob-braces', 'invalid-glob-braces'])
-
- spy.mockClear()
-})
diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js
index d99ce1c18..eff2fa677 100644
--- a/tests/normalize-data-types.test.js
+++ b/tests/normalize-data-types.test.js
@@ -1,4 +1,5 @@
import { normalize } from '../src/util/dataTypes'
+import { crosscheck } from './util/run'
let table = [
['foo', 'foo'],
@@ -46,6 +47,8 @@ let table = [
['color(0_0_0_/_1.0)', 'color(0 0 0 / 1.0)'],
]
-it.each(table)('normalize data: %s', (input, output) => {
- expect(normalize(input)).toBe(output)
+crosscheck(() => {
+ it.each(table)('normalize data: %s', (input, output) => {
+ expect(normalize(input)).toBe(output)
+ })
})
diff --git a/tests/normalize-screens.test.js b/tests/normalize-screens.test.js
index da31c50d3..464623f9f 100644
--- a/tests/normalize-screens.test.js
+++ b/tests/normalize-screens.test.js
@@ -1,63 +1,66 @@
import { normalizeScreens } from '../src/util/normalizeScreens'
+import { crosscheck } from './util/run'
-it('should normalize an array of string values', () => {
- let screens = ['768px', '1200px']
+crosscheck(() => {
+ it('should normalize an array of string values', () => {
+ let screens = ['768px', '1200px']
- expect(normalizeScreens(screens)).toEqual([
- { name: '768px', not: false, values: [{ min: '768px', max: undefined }] },
- { name: '1200px', not: false, values: [{ min: '1200px', max: undefined }] },
- ])
-})
-
-it('should normalize an object with string values', () => {
- let screens = {
- a: '768px',
- b: '1200px',
- }
-
- expect(normalizeScreens(screens)).toEqual([
- { name: 'a', not: false, values: [{ min: '768px', max: undefined }] },
- { name: 'b', not: false, values: [{ min: '1200px', max: undefined }] },
- ])
-})
-
-it('should normalize an object with object values', () => {
- let screens = {
- a: { min: '768px' },
- b: { max: '1200px' },
- }
-
- expect(normalizeScreens(screens)).toEqual([
- { name: 'a', not: false, values: [{ min: '768px', max: undefined }] },
- { name: 'b', not: false, values: [{ min: undefined, max: '1200px' }] },
- ])
-})
-
-it('should normalize an object with multiple object values', () => {
- let screens = {
- a: [{ min: '768px' }, { max: '1200px' }],
- }
-
- expect(normalizeScreens(screens)).toEqual([
- {
- name: 'a',
- not: false,
- values: [
- { max: undefined, min: '768px', raw: undefined },
- { max: '1200px', min: undefined, raw: undefined },
- ],
- },
- ])
-})
-
-it('should normalize an object with object values (min-width normalized to width)', () => {
- let screens = {
- a: { 'min-width': '768px' },
- b: { max: '1200px' },
- }
-
- expect(normalizeScreens(screens)).toEqual([
- { name: 'a', not: false, values: [{ min: '768px', max: undefined }] },
- { name: 'b', not: false, values: [{ min: undefined, max: '1200px' }] },
- ])
+ expect(normalizeScreens(screens)).toEqual([
+ { name: '768px', not: false, values: [{ min: '768px', max: undefined }] },
+ { name: '1200px', not: false, values: [{ min: '1200px', max: undefined }] },
+ ])
+ })
+
+ it('should normalize an object with string values', () => {
+ let screens = {
+ a: '768px',
+ b: '1200px',
+ }
+
+ expect(normalizeScreens(screens)).toEqual([
+ { name: 'a', not: false, values: [{ min: '768px', max: undefined }] },
+ { name: 'b', not: false, values: [{ min: '1200px', max: undefined }] },
+ ])
+ })
+
+ it('should normalize an object with object values', () => {
+ let screens = {
+ a: { min: '768px' },
+ b: { max: '1200px' },
+ }
+
+ expect(normalizeScreens(screens)).toEqual([
+ { name: 'a', not: false, values: [{ min: '768px', max: undefined }] },
+ { name: 'b', not: false, values: [{ min: undefined, max: '1200px' }] },
+ ])
+ })
+
+ it('should normalize an object with multiple object values', () => {
+ let screens = {
+ a: [{ min: '768px' }, { max: '1200px' }],
+ }
+
+ expect(normalizeScreens(screens)).toEqual([
+ {
+ name: 'a',
+ not: false,
+ values: [
+ { max: undefined, min: '768px', raw: undefined },
+ { max: '1200px', min: undefined, raw: undefined },
+ ],
+ },
+ ])
+ })
+
+ it('should normalize an object with object values (min-width normalized to width)', () => {
+ let screens = {
+ a: { 'min-width': '768px' },
+ b: { max: '1200px' },
+ }
+
+ expect(normalizeScreens(screens)).toEqual([
+ { name: 'a', not: false, values: [{ min: '768px', max: undefined }] },
+ { name: 'b', not: false, values: [{ min: undefined, max: '1200px' }] },
+ ])
+ })
})
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
index c456a4087..f31981a43 100644
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -1,1032 +1,1034 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('opacity', () => {
- let config = {
- darkMode: 'class',
- content: [
- {
- raw: html`
-
-
-
-
-
- `,
+crosscheck(() => {
+ test('opacity', () => {
+ let config = {
+ darkMode: 'class',
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: {
+ backgroundOpacity: false,
+ borderOpacity: false,
+ divideOpacity: false,
+ placeholderOpacity: false,
+ textOpacity: false,
},
- ],
- corePlugins: {
- backgroundOpacity: false,
- borderOpacity: false,
- divideOpacity: false,
- placeholderOpacity: false,
- textOpacity: false,
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .divide-black > :not([hidden]) ~ :not([hidden]) {
- border-color: #000;
- }
- .border-black {
- border-color: #000;
- }
- .bg-black {
- background-color: #000;
- }
- .text-black {
- color: #000;
- }
- .placeholder-black::placeholder {
- color: #000;
- }
- `)
- })
-})
-
-test('colors defined as functions work when opacity plugins are disabled', () => {
- let config = {
- darkMode: 'class',
- content: [
- {
- raw: html`
-
-
-
-
-
- `,
- },
- ],
- theme: {
- colors: {
- primary: ({ opacityValue }) =>
- opacityValue === undefined
- ? 'rgb(var(--color-primary))'
- : `rgb(var(--color-primary) / ${opacityValue})`,
- },
- },
- corePlugins: {
- backgroundOpacity: false,
- borderOpacity: false,
- divideOpacity: false,
- placeholderOpacity: false,
- textOpacity: false,
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .divide-primary > :not([hidden]) ~ :not([hidden]) {
- border-color: rgb(var(--color-primary));
- }
- .border-primary {
- border-color: rgb(var(--color-primary));
- }
- .bg-primary {
- background-color: rgb(var(--color-primary));
- }
- .text-primary {
- color: rgb(var(--color-primary));
- }
- .placeholder-primary::placeholder {
- color: rgb(var(--color-primary));
- }
- `)
- })
-})
-
-it('can use Lorem ipsum dolor sit amet...
+
-
-
-
-
-
-
`,
- },
- ],
- theme: {
- fontSize: {
- sm: ['12px', '20px'],
- base: ['16px', '24px'],
- },
- lineHeight: {
- 6: '24px',
- 7: '28px',
- 8: '32px',
- },
- },
- }
-
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchCss(css`
- .text-\[13px\]\/6 {
- font-size: 13px;
- line-height: 24px;
- }
- .text-\[17px\]\/\[23px\] {
- font-size: 17px;
- line-height: 23px;
- }
- .text-sm {
- font-size: 12px;
- line-height: 20px;
- }
- .text-sm\/6 {
- font-size: 12px;
- line-height: 24px;
- }
- .text-sm\/\[21px\] {
- font-size: 12px;
- line-height: 21px;
- }
- @media (min-width: 768px) {
- .md\:text-\[19px\]\/8 {
- font-size: 19px;
- line-height: 32px;
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-lg {
+ font-size: 20px;
+ line-height: 28px;
}
- .md\:text-\[21px\]\/\[29px\] {
- font-size: 21px;
- line-height: 29px;
- }
- .md\:text-base {
+ .text-md {
font-size: 16px;
line-height: 24px;
}
- .md\:text-base\/7 {
+ .text-sm {
+ font-size: 12px;
+ }
+ `)
+ })
+ })
+
+ test('font-size utilities can include a default letter-spacing', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ fontSize: {
+ sm: '12px',
+ md: ['16px', { letterSpacing: '-0.01em' }],
+ lg: ['20px', { letterSpacing: '-0.02em' }],
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-lg {
+ font-size: 20px;
+ letter-spacing: -0.02em;
+ }
+ .text-md {
font-size: 16px;
+ letter-spacing: -0.01em;
+ }
+ .text-sm {
+ font-size: 12px;
+ }
+ `)
+ })
+ })
+
+ test('font-size utilities can include a default line-height and letter-spacing', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ fontSize: {
+ sm: '12px',
+ md: ['16px', { lineHeight: '24px', letterSpacing: '-0.01em' }],
+ lg: ['20px', { lineHeight: '28px', letterSpacing: '-0.02em' }],
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-lg {
+ font-size: 20px;
line-height: 28px;
+ letter-spacing: -0.02em;
}
- .md\:text-base\/\[33px\] {
+ .text-md {
font-size: 16px;
- line-height: 33px;
+ line-height: 24px;
+ letter-spacing: -0.01em;
}
- }
- `)
+ .text-sm {
+ font-size: 12px;
+ }
+ `)
+ })
+ })
+
+ test('font-size utilities can include a font-weight', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ fontSize: {
+ sm: '12px',
+ md: ['16px', { lineHeight: '24px', fontWeight: 500 }],
+ lg: ['20px', { lineHeight: '28px', fontWeight: 'bold' }],
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-lg {
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: bold;
+ }
+ .text-md {
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 500;
+ }
+ .text-sm {
+ font-size: 12px;
+ }
+ `)
+ })
+ })
+
+ test('font-size utilities can include a line-height modifier', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
`,
+ },
+ ],
+ theme: {
+ fontSize: {
+ sm: ['12px', '20px'],
+ base: ['16px', '24px'],
+ },
+ lineHeight: {
+ 6: '24px',
+ 7: '28px',
+ 8: '32px',
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-\[13px\]\/6 {
+ font-size: 13px;
+ line-height: 24px;
+ }
+ .text-\[17px\]\/\[23px\] {
+ font-size: 17px;
+ line-height: 23px;
+ }
+ .text-sm {
+ font-size: 12px;
+ line-height: 20px;
+ }
+ .text-sm\/6 {
+ font-size: 12px;
+ line-height: 24px;
+ }
+ .text-sm\/\[21px\] {
+ font-size: 12px;
+ line-height: 21px;
+ }
+ @media (min-width: 768px) {
+ .md\:text-\[19px\]\/8 {
+ font-size: 19px;
+ line-height: 32px;
+ }
+ .md\:text-\[21px\]\/\[29px\] {
+ font-size: 21px;
+ line-height: 29px;
+ }
+ .md\:text-base {
+ font-size: 16px;
+ line-height: 24px;
+ }
+ .md\:text-base\/7 {
+ font-size: 16px;
+ line-height: 28px;
+ }
+ .md\:text-base\/\[33px\] {
+ font-size: 16px;
+ line-height: 33px;
+ }
+ }
+ `)
+ })
})
})
diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js
index a650a6955..c44678007 100644
--- a/tests/plugins/gradientColorStops.test.js
+++ b/tests/plugins/gradientColorStops.test.js
@@ -1,72 +1,74 @@
-import { run, html, css } from '../util/run'
+import { crosscheck, run, html, css } from '../util/run'
-test('opacity variables are given to colors defined as closures', () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- theme: {
- colors: {
- primary: ({ opacityVariable, opacityValue }) => {
- if (opacityValue !== undefined) {
- return `rgba(31,31,31,${opacityValue})`
- }
-
- if (opacityVariable !== undefined) {
- return `rgba(31,31,31,var(${opacityVariable},1))`
- }
-
- return `rgb(31,31,31)`
+crosscheck(() => {
+ test('opacity variables are given to colors defined as closures', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
},
- secondary: 'hsl(10, 50%, 50%)',
- },
- opacity: {
- 50: '0.5',
- },
- },
- }
+ ],
+ theme: {
+ colors: {
+ primary: ({ opacityVariable, opacityValue }) => {
+ if (opacityValue !== undefined) {
+ return `rgba(31,31,31,${opacityValue})`
+ }
- return run('@tailwind utilities', config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .from-primary {
- --tw-gradient-from: rgb(31, 31, 31);
- --tw-gradient-to: rgba(31, 31, 31, 0);
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
- }
- .from-secondary {
- --tw-gradient-from: hsl(10, 50%, 50%);
- --tw-gradient-to: hsl(10 50% 50% / 0);
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
- }
- .via-primary {
- --tw-gradient-to: rgba(31, 31, 31, 0);
- --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), var(--tw-gradient-to);
- }
- .via-secondary {
- --tw-gradient-to: hsl(10 50% 50% / 0);
- --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), var(--tw-gradient-to);
- }
- .to-primary {
- --tw-gradient-to: rgb(31, 31, 31);
- }
- .to-secondary {
- --tw-gradient-to: hsl(10, 50%, 50%);
- }
- .text-primary {
- --tw-text-opacity: 1;
- color: rgba(31, 31, 31, var(--tw-text-opacity));
- }
- .text-secondary {
- --tw-text-opacity: 1;
- color: hsl(10 50% 50% / var(--tw-text-opacity));
- }
- .text-opacity-50 {
- --tw-text-opacity: 0.5;
- }
- `)
+ if (opacityVariable !== undefined) {
+ return `rgba(31,31,31,var(${opacityVariable},1))`
+ }
+
+ return `rgb(31,31,31)`
+ },
+ secondary: 'hsl(10, 50%, 50%)',
+ },
+ opacity: {
+ 50: '0.5',
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .from-primary {
+ --tw-gradient-from: rgb(31, 31, 31);
+ --tw-gradient-to: rgba(31, 31, 31, 0);
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+ }
+ .from-secondary {
+ --tw-gradient-from: hsl(10, 50%, 50%);
+ --tw-gradient-to: hsl(10 50% 50% / 0);
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+ }
+ .via-primary {
+ --tw-gradient-to: rgba(31, 31, 31, 0);
+ --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), var(--tw-gradient-to);
+ }
+ .via-secondary {
+ --tw-gradient-to: hsl(10 50% 50% / 0);
+ --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), var(--tw-gradient-to);
+ }
+ .to-primary {
+ --tw-gradient-to: rgb(31, 31, 31);
+ }
+ .to-secondary {
+ --tw-gradient-to: hsl(10, 50%, 50%);
+ }
+ .text-primary {
+ --tw-text-opacity: 1;
+ color: rgba(31, 31, 31, var(--tw-text-opacity));
+ }
+ .text-secondary {
+ --tw-text-opacity: 1;
+ color: hsl(10 50% 50% / var(--tw-text-opacity));
+ }
+ .text-opacity-50 {
+ --tw-text-opacity: 0.5;
+ }
+ `)
+ })
})
})
diff --git a/tests/prefers-contrast.test.js b/tests/prefers-contrast.test.js
index 362096078..8e1ecd25c 100644
--- a/tests/prefers-contrast.test.js
+++ b/tests/prefers-contrast.test.js
@@ -1,74 +1,78 @@
-import { run, html, css, defaults } from './util/run'
+import { crosscheck, run, html, css, defaults } from './util/run'
-it('should be possible to use contrast-more and contrast-less variants', () => {
- let config = {
- content: [
- { raw: html`` },
- ],
- corePlugins: { preflight: false },
- }
+crosscheck(() => {
+ it('should be possible to use contrast-more and contrast-less variants', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults}
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults}
- .bg-white {
- --tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
- }
-
- @media (prefers-contrast: more) {
- .contrast-more\:bg-pink-500 {
- --tw-bg-opacity: 1;
- background-color: rgb(236 72 153 / var(--tw-bg-opacity));
- }
- }
-
- @media (prefers-contrast: less) {
- .contrast-less\:bg-black {
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- }
- }
- `)
- })
-})
-
-it('dark mode should appear after the contrast variants', () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults}
-
- @media (prefers-contrast: more) {
- .contrast-more\:bg-black {
- --tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
- }
- }
-
- @media (prefers-color-scheme: dark) {
- .dark\:bg-white {
+ .bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
- }
- `)
+
+ @media (prefers-contrast: more) {
+ .contrast-more\:bg-pink-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(236 72 153 / var(--tw-bg-opacity));
+ }
+ }
+
+ @media (prefers-contrast: less) {
+ .contrast-less\:bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ }
+ }
+ `)
+ })
+ })
+
+ it('dark mode should appear after the contrast variants', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ ${defaults}
+
+ @media (prefers-contrast: more) {
+ .contrast-more\:bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ }
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .dark\:bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ }
+ }
+ `)
+ })
})
})
diff --git a/tests/prefix.test.js b/tests/prefix.test.js
index 53b1a4448..bfb4bbf2c 100644
--- a/tests/prefix.test.js
+++ b/tests/prefix.test.js
@@ -1,10 +1,8 @@
-import { run, html, css, defaults } from './util/run'
-import { env } from '../src/lib/sharedState'
+import { crosscheck, run, html, css, defaults } from './util/run'
-let group = env.OXIDE ? describe.skip : describe
-
-group('prefix', () => {
- test('prefix', () => {
+crosscheck(({ stable, oxide }) => {
+ oxide.test.todo('prefix')
+ stable.test('prefix', () => {
let config = {
prefix: 'tw-',
darkMode: 'class',
@@ -191,7 +189,8 @@ group('prefix', () => {
})
})
- it('negative values: marker before prefix', async () => {
+ oxide.test.todo('negative values: marker before prefix')
+ stable.test('negative values: marker before prefix', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`` }],
@@ -213,7 +212,8 @@ group('prefix', () => {
`)
})
- it('negative values: marker after prefix', async () => {
+ oxide.test.todo('negative values: marker after prefix')
+ stable.test('negative values: marker after prefix', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`` }],
@@ -235,7 +235,8 @@ group('prefix', () => {
`)
})
- it('negative values: marker before prefix and arbitrary value', async () => {
+ oxide.test.todo('negative values: marker before prefix and arbitrary value')
+ stable.test('negative values: marker before prefix and arbitrary value', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`` }],
@@ -257,7 +258,8 @@ group('prefix', () => {
`)
})
- it('negative values: marker after prefix and arbitrary value', async () => {
+ oxide.test.todo('negative values: marker after prefix and arbitrary value')
+ stable.test('negative values: marker after prefix and arbitrary value', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`` }],
@@ -279,7 +281,8 @@ group('prefix', () => {
`)
})
- it('negative values: no marker and arbitrary value', async () => {
+ oxide.test.todo('negative values: no marker and arbitrary value')
+ stable.test('negative values: no marker and arbitrary value', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`` }],
@@ -301,7 +304,8 @@ group('prefix', () => {
`)
})
- it('negative values: variant versions', async () => {
+ oxide.test.todo('negative values: variant versions')
+ stable.test('negative values: variant versions', async () => {
let config = {
prefix: 'tw-',
content: [
@@ -346,7 +350,8 @@ group('prefix', () => {
`)
})
- it('negative values: prefix and apply', async () => {
+ oxide.test.todo('negative values: prefix and apply')
+ stable.test('negative values: prefix and apply', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`` }],
@@ -396,7 +401,8 @@ group('prefix', () => {
`)
})
- it('negative values: prefix in the safelist', async () => {
+ oxide.test.todo('negative values: prefix in the safelist')
+ stable.test('negative values: prefix in the safelist', async () => {
let config = {
prefix: 'tw-',
safelist: [{ pattern: /-tw-top-1/g }, { pattern: /tw--top-1/g }],
@@ -427,7 +433,8 @@ group('prefix', () => {
`)
})
- it('prefix with negative values and variants in the safelist', async () => {
+ oxide.test.todo('prefix with negative values and variants in the safelist')
+ stable.test('prefix with negative values and variants in the safelist', async () => {
let config = {
prefix: 'tw-',
safelist: [
@@ -476,7 +483,8 @@ group('prefix', () => {
`)
})
- it('prefix does not detect and generate unnecessary classes', async () => {
+ oxide.test.todo('prefix does not detect and generate unnecessary classes')
+ stable.test('prefix does not detect and generate unnecessary classes', async () => {
let config = {
prefix: 'tw-_',
content: [{ raw: html`-aaa-filter aaaa-table aaaa-hidden` }],
@@ -492,7 +500,8 @@ group('prefix', () => {
expect(result.css).toMatchFormattedCss(css``)
})
- it('supports prefixed utilities using arbitrary values', async () => {
+ oxide.test.todo('supports prefixed utilities using arbitrary values')
+ stable.test('supports prefixed utilities using arbitrary values', async () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`foo` }],
@@ -518,7 +527,8 @@ group('prefix', () => {
`)
})
- it('supports non-word prefixes (1)', async () => {
+ oxide.test.todo('supports non-word prefixes (1)')
+ stable.test('supports non-word prefixes (1)', async () => {
let config = {
prefix: '@',
content: [
@@ -577,7 +587,8 @@ group('prefix', () => {
`)
})
- it('supports non-word prefixes (2)', async () => {
+ oxide.test.todo('supports non-word prefixes (2)')
+ stable.test('supports non-word prefixes (2)', async () => {
let config = {
prefix: '@]$',
content: [
diff --git a/tests/prefixSelector.test.js b/tests/prefixSelector.test.js
index 92fd6194f..c7db08d03 100644
--- a/tests/prefixSelector.test.js
+++ b/tests/prefixSelector.test.js
@@ -1,17 +1,20 @@
import prefix from '../src/util/prefixSelector'
+import { crosscheck } from './util/run'
-test('it prefixes classes with the provided prefix', () => {
- expect(prefix('tw-', '.foo')).toEqual('.tw-foo')
-})
+crosscheck(() => {
+ test('it prefixes classes with the provided prefix', () => {
+ expect(prefix('tw-', '.foo')).toEqual('.tw-foo')
+ })
-test('it properly prefixes selectors with non-standard characters', () => {
- expect(prefix('tw-', '.hello\\:world')).toEqual('.tw-hello\\:world')
- expect(prefix('tw-', '.foo\\/bar')).toEqual('.tw-foo\\/bar')
- expect(prefix('tw-', '.wew\\.lad')).toEqual('.tw-wew\\.lad')
-})
+ test('it properly prefixes selectors with non-standard characters', () => {
+ expect(prefix('tw-', '.hello\\:world')).toEqual('.tw-hello\\:world')
+ expect(prefix('tw-', '.foo\\/bar')).toEqual('.tw-foo\\/bar')
+ expect(prefix('tw-', '.wew\\.lad')).toEqual('.tw-wew\\.lad')
+ })
-test('it prefixes all classes in a selector', () => {
- expect(prefix('tw-', '.btn-blue .w-1\\/4 > h1.text-xl + a .bar')).toEqual(
- '.tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar'
- )
+ test('it prefixes all classes in a selector', () => {
+ expect(prefix('tw-', '.btn-blue .w-1\\/4 > h1.text-xl + a .bar')).toEqual(
+ '.tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar'
+ )
+ })
})
diff --git a/tests/preflight.test.js b/tests/preflight.test.js
index 7ba5d3f9f..76b5ab93a 100644
--- a/tests/preflight.test.js
+++ b/tests/preflight.test.js
@@ -1,21 +1,23 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-it('preflight has a correct border color fallback', () => {
- let config = {
- content: [{ raw: html`` }],
- theme: {
- borderColor: ({ theme }) => theme('colors'),
- },
- plugins: [],
- corePlugins: { preflight: true },
- }
+crosscheck(() => {
+ it('preflight has a correct border color fallback', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ theme: {
+ borderColor: ({ theme }) => theme('colors'),
+ },
+ plugins: [],
+ corePlugins: { preflight: true },
+ }
- let input = css`
- @tailwind base;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toContain(`border-color: currentColor;`)
+ return run(input, config).then((result) => {
+ expect(result.css).toContain(`border-color: currentColor;`)
+ })
})
})
diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js
index 76fc1e89a..127a5d48a 100644
--- a/tests/raw-content.test.js
+++ b/tests/raw-content.test.js
@@ -1,167 +1,171 @@
import fs from 'fs'
import path from 'path'
+import { crosscheck, run, html, css } from './util/run'
-import { run, html, css } from './util/run'
-import { env } from '../src/lib/sharedState'
+crosscheck(({ stable, oxide }) => {
+ it('raw content', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
-it('raw content', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+ let input = css`
+ @tailwind components;
+ @tailwind utilities;
+ `
- let input = css`
- @tailwind components;
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- let expectedPath = env.OXIDE
- ? path.resolve(__dirname, './raw-content.oxide.test.css')
- : path.resolve(__dirname, './raw-content.test.css')
- let expected = fs.readFileSync(expectedPath, 'utf8')
-
- expect(result.css).toMatchFormattedCss(expected)
+ return run(input, config).then((result) => {
+ stable
+ .expect(result.css)
+ .toMatchFormattedCss(
+ fs.readFileSync(path.resolve(__dirname, './raw-content.test.css'), 'utf8')
+ )
+ oxide
+ .expect(result.css)
+ .toMatchFormattedCss(
+ fs.readFileSync(path.resolve(__dirname, './raw-content.oxide.test.css'), 'utf8')
+ )
+ })
})
})
diff --git a/tests/relative-purge-paths.test.js b/tests/relative-purge-paths.test.js
index 0e7e5feed..95fbe7bad 100644
--- a/tests/relative-purge-paths.test.js
+++ b/tests/relative-purge-paths.test.js
@@ -1,22 +1,24 @@
-import { run, css } from './util/run'
+import { crosscheck, run, css } from './util/run'
-test('relative purge paths', () => {
- let config = {
- content: ['./tests/relative-purge-paths.test.html'],
- corePlugins: { preflight: false },
- }
+crosscheck(() => {
+ test('relative purge paths', () => {
+ let config = {
+ content: ['./tests/relative-purge-paths.test.html'],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
+ let input = css`
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
+ `
- return run(input, config).then((result) => {
- expect(result.css).toIncludeCss(css`
- .font-bold {
- font-weight: 700;
- }
- `)
+ return run(input, config).then((result) => {
+ expect(result.css).toIncludeCss(css`
+ .font-bold {
+ font-weight: 700;
+ }
+ `)
+ })
})
})
diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js
index 45f9872a0..56a423587 100644
--- a/tests/resolve-defaults-at-rules.test.js
+++ b/tests/resolve-defaults-at-rules.test.js
@@ -1,874 +1,877 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('basic utilities', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+crosscheck(() => {
+ test('basic utilities', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .rotate-3 {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .skew-y-6 {
- --tw-skew-y: 6deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .scale-x-110 {
- --tw-scale-x: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .rotate-3 {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .skew-y-6 {
+ --tw-skew-y: 6deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .scale-x-110 {
+ --tw-scale-x: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with pseudo-class variants', async () => {
- let config = {
- content: [
- { raw: html`` },
- ],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+ test('with pseudo-class variants', async () => {
+ let config = {
+ content: [
+ { raw: html`` },
+ ],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .hover\:scale-x-110:hover {
- --tw-scale-x: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .focus\:rotate-3:focus {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .hover\:focus\:skew-y-6:focus:hover {
- --tw-skew-y: 6deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .hover\:scale-x-110:hover {
+ --tw-scale-x: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .focus\:rotate-3:focus {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .hover\:focus\:skew-y-6:focus:hover {
+ --tw-skew-y: 6deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with pseudo-element variants', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+ test('with pseudo-element variants', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .before\:scale-x-110::before {
- content: var(--tw-content);
- --tw-scale-x: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .after\:rotate-3::after {
- content: var(--tw-content);
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .before\:scale-x-110::before {
+ content: var(--tw-content);
+ --tw-scale-x: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .after\:rotate-3::after {
+ content: var(--tw-content);
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with multi-class variants', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+ test('with multi-class variants', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .group:hover .group-hover\:scale-x-110 {
- --tw-scale-x: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .peer:focus ~ .peer-focus\:rotate-3 {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .group:hover .group-hover\:scale-x-110 {
+ --tw-scale-x: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .peer:focus ~ .peer-focus\:rotate-3 {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with multi-class pseudo-element variants', async () => {
- let config = {
- content: [
- { raw: html`` },
- ],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+ test('with multi-class pseudo-element variants', async () => {
+ let config = {
+ content: [
+ { raw: html`` },
+ ],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .group:hover .group-hover\:before\:scale-x-110::before {
- content: var(--tw-content);
- --tw-scale-x: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .peer:focus ~ .peer-focus\:after\:rotate-3::after {
- content: var(--tw-content);
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .group:hover .group-hover\:before\:scale-x-110::before {
+ content: var(--tw-content);
+ --tw-scale-x: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .peer:focus ~ .peer-focus\:after\:rotate-3::after {
+ content: var(--tw-content);
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with multi-class pseudo-element and pseudo-class variants', async () => {
- let config = {
- content: [
- {
- raw: html``,
- },
- ],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+ test('with multi-class pseudo-element and pseudo-class variants', async () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .group:hover .group-hover\:hover\:before\:scale-x-110:hover::before {
- content: var(--tw-content);
- --tw-scale-x: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus::after {
- content: var(--tw-content);
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .group:hover .group-hover\:hover\:before\:scale-x-110:hover::before {
+ content: var(--tw-content);
+ --tw-scale-x: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus::after {
+ content: var(--tw-content);
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with apply', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
-
- @layer utilities {
- .foo {
- @apply rotate-3;
- }
+ test('with apply', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
- .bar {
- @apply before:scale-110;
- }
-
- .baz::before {
- @apply rotate-45;
- }
-
- .whats ~ .next > span:hover {
- @apply skew-x-6;
- }
-
- .media-queries {
- @apply md:rotate-45;
- }
-
- .a,
- .b,
- .c {
- @apply skew-y-3;
- }
-
- .a,
- .b {
- @apply rotate-45;
- }
-
- .a::before,
- .b::after {
- @apply rotate-90;
- }
-
- .recursive {
- @apply foo;
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
-
+ let input = css`
+ @tailwind base;
/* --- */
- .foo {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
+ @tailwind utilities;
+
+ @layer utilities {
+ .foo {
+ @apply rotate-3;
+ }
}
- .bar::before {
- content: var(--tw-content);
- --tw-scale-x: 1.1;
- --tw-scale-y: 1.1;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
+
+ .bar {
+ @apply before:scale-110;
}
+
.baz::before {
- --tw-rotate: 45deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
+ @apply rotate-45;
}
+
.whats ~ .next > span:hover {
- --tw-skew-x: 6deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
+ @apply skew-x-6;
}
- @media (min-width: 768px) {
- .media-queries {
+
+ .media-queries {
+ @apply md:rotate-45;
+ }
+
+ .a,
+ .b,
+ .c {
+ @apply skew-y-3;
+ }
+
+ .a,
+ .b {
+ @apply rotate-45;
+ }
+
+ .a::before,
+ .b::after {
+ @apply rotate-90;
+ }
+
+ .recursive {
+ @apply foo;
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ .foo {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .bar::before {
+ content: var(--tw-content);
+ --tw-scale-x: 1.1;
+ --tw-scale-y: 1.1;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .baz::before {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
- }
- .a,
- .b,
- .c {
- --tw-skew-y: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .a,
- .b {
- --tw-rotate: 45deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .a::before,
- .b::after {
- --tw-rotate: 90deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .recursive {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
- })
-})
-
-test('legacy pseudo-element syntax is supported', async () => {
- let config = {
- experimental: { optimizeUniversalDefaults: true },
- content: [{ raw: html`` }],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
-
- .a:before {
- @apply rotate-45;
- }
-
- .b:after {
- @apply rotate-3;
- }
-
- .c:first-line {
- @apply rotate-1;
- }
-
- .d:first-letter {
- @apply rotate-6;
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .a:before,
- .b:after,
- .c:first-line,
- .d:first-letter {
- --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;
- }
- /* --- */
- .a:before {
- --tw-rotate: 45deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .b:after {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .c:first-line {
- --tw-rotate: 1deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- .d:first-letter {
- --tw-rotate: 6deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
- })
-})
-
-test('with borders', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- /* --- */
- .border {
- border-width: 1px;
- }
- .border-red-500 {
- --tw-border-opacity: 1;
- border-color: rgb(239 68 68 / var(--tw-border-opacity));
- }
- @media (min-width: 768px) {
- .md\:border-2 {
- border-width: 2px;
+ .whats ~ .next > span:hover {
+ --tw-skew-x: 6deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
- }
- `)
+ @media (min-width: 768px) {
+ .media-queries {
+ --tw-rotate: 45deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ }
+ .a,
+ .b,
+ .c {
+ --tw-skew-y: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .a,
+ .b {
+ --tw-rotate: 45deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .a::before,
+ .b::after {
+ --tw-rotate: 90deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .recursive {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('with shadows', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::after {
- --tw-ring-inset: ;
- --tw-ring-offset-width: 0px;
- --tw-ring-offset-color: #fff;
- --tw-ring-color: rgb(59 130 246 / 0.5);
- --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;
- --tw-ring-offset-color: #fff;
- --tw-ring-color: rgb(59 130 246 / 0.5);
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- }
+ test('legacy pseudo-element syntax is supported', async () => {
+ let config = {
+ experimental: { optimizeUniversalDefaults: true },
+ content: [{ raw: html`` }],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- .shadow {
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
- --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);
+ @tailwind utilities;
+
+ .a:before {
+ @apply rotate-45;
}
- .ring-1 {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
- var(--tw-ring-offset-color);
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
- var(--tw-ring-color);
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+
+ .b:after {
+ @apply rotate-3;
}
- .ring-black\/25 {
- --tw-ring-color: rgb(0 0 0 / 0.25);
+
+ .c:first-line {
+ @apply rotate-1;
}
- @media (min-width: 768px) {
- .md\:shadow-xl {
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
- 0 8px 10px -6px var(--tw-shadow-color);
+
+ .d:first-letter {
+ @apply rotate-6;
+ }
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .a:before,
+ .b:after,
+ .c:first-line,
+ .d:first-letter {
+ --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;
+ }
+ /* --- */
+ .a:before {
+ --tw-rotate: 45deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .b:after {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .c:first-line {
+ --tw-rotate: 1deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ .d:first-letter {
+ --tw-rotate: 6deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
+ })
+
+ test('with borders', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
+ }
+
+ let input = css`
+ @tailwind base;
+ /* --- */
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ /* --- */
+ .border {
+ border-width: 1px;
+ }
+ .border-red-500 {
+ --tw-border-opacity: 1;
+ border-color: rgb(239 68 68 / var(--tw-border-opacity));
+ }
+ @media (min-width: 768px) {
+ .md\:border-2 {
+ border-width: 2px;
+ }
+ }
+ `)
+ })
+ })
+
+ test('with shadows', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
+ }
+
+ let input = css`
+ @tailwind base;
+ /* --- */
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::after {
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --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;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ }
+
+ /* --- */
+ .shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --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);
}
- }
- `)
+ .ring-1 {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+ var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+ var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+ var(--tw-shadow, 0 0 #0000);
+ }
+ .ring-black\/25 {
+ --tw-ring-color: rgb(0 0 0 / 0.25);
+ }
+ @media (min-width: 768px) {
+ .md\:shadow-xl {
+ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+ 0 8px 10px -6px 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('when no utilities that need the defaults are used', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['transform', 'scale', 'rotate', 'skew'],
- }
-
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- *,
- ::before,
- ::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;
- }
- ::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;
- }
+ test('when no utilities that need the defaults are used', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+ }
+ let input = css`
+ @tailwind base;
/* --- */
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ *,
+ ::before,
+ ::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;
+ }
+ ::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;
+ }
+
+ /* --- */
+ `)
+ })
})
-})
-test('when a utility uses defaults but they do not exist', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: ['rotate'],
- }
+ test('when a utility uses defaults but they do not exist', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: ['rotate'],
+ }
- let input = css`
- @tailwind base;
- /* --- */
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
+ let input = css`
+ @tailwind base;
/* --- */
- .rotate-3 {
- --tw-rotate: 3deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ /* --- */
+ .rotate-3 {
+ --tw-rotate: 3deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
-})
-test('selectors are reduced to the lowest possible specificity', async () => {
- let config = {
- experimental: { optimizeUniversalDefaults: true },
- content: [{ raw: html`` }],
- corePlugins: [],
- }
-
- let input = css`
- @defaults test {
- --color: black;
+ test('selectors are reduced to the lowest possible specificity', async () => {
+ let config = {
+ experimental: { optimizeUniversalDefaults: true },
+ content: [{ raw: html`` }],
+ corePlugins: [],
}
- /* --- */
-
- .foo {
- @defaults test;
- background-color: var(--color);
- }
-
- #app {
- @defaults test;
- border-color: var(--color);
- }
-
- span#page {
- @defaults test;
- color: var(--color);
- }
-
- div[data-foo='bar']#other {
- @defaults test;
- fill: var(--color);
- }
-
- div[data-bar='baz'] {
- @defaults test;
- stroke: var(--color);
- }
-
- article {
- @defaults test;
- --article: var(--color);
- }
-
- div[data-foo='bar']#another::before {
- @defaults test;
- fill: var(--color);
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .foo,
- [id='app'],
- [id='page'],
- [id='other'],
- [data-bar='baz'],
- article,
- [id='another']::before {
+ let input = css`
+ @defaults test {
--color: black;
}
/* --- */
.foo {
+ @defaults test;
background-color: var(--color);
}
#app {
+ @defaults test;
border-color: var(--color);
}
span#page {
+ @defaults test;
color: var(--color);
}
div[data-foo='bar']#other {
+ @defaults test;
fill: var(--color);
}
div[data-bar='baz'] {
+ @defaults test;
stroke: var(--color);
}
article {
+ @defaults test;
--article: var(--color);
}
div[data-foo='bar']#another::before {
+ @defaults test;
fill: var(--color);
}
- `)
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .foo,
+ [id='app'],
+ [id='page'],
+ [id='other'],
+ [data-bar='baz'],
+ article,
+ [id='another']::before {
+ --color: black;
+ }
+
+ /* --- */
+
+ .foo {
+ background-color: var(--color);
+ }
+
+ #app {
+ border-color: var(--color);
+ }
+
+ span#page {
+ color: var(--color);
+ }
+
+ div[data-foo='bar']#other {
+ fill: var(--color);
+ }
+
+ div[data-bar='baz'] {
+ stroke: var(--color);
+ }
+
+ article {
+ --article: var(--color);
+ }
+
+ div[data-foo='bar']#another::before {
+ fill: var(--color);
+ }
+ `)
+ })
})
-})
-test('No defaults without @tailwind base', () => {
- let config = {
- experimental: { optimizeUniversalDefaults: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- // Optimize universal defaults doesn't work well with isolated modules
- // We require you to use @tailwind base to inject the defaults
- let input = css`
- @tailwind components;
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
- .scale-150 {
- --tw-scale-x: 1.5;
- --tw-scale-y: 1.5;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
- }
- `)
- })
-})
-
-test('no defaults and apply without @tailwind base', () => {
- let config = {
- experimental: { optimizeUniversalDefaults: true },
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- // Optimize universal defaults doesn't work well with isolated modules
- // We require you to use @tailwind base to inject the defaults
- let input = css`
- @tailwind components;
- @tailwind utilities;
-
- .my-card {
- @apply scale-150;
+ test('No defaults without @tailwind base', () => {
+ let config = {
+ experimental: { optimizeUniversalDefaults: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
}
- `
- return run(input, config).then((result) => {
- return expect(result.css).toMatchFormattedCss(css`
+ // Optimize universal defaults doesn't work well with isolated modules
+ // We require you to use @tailwind base to inject the defaults
+ let input = css`
+ @tailwind components;
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ .scale-150 {
+ --tw-scale-x: 1.5;
+ --tw-scale-y: 1.5;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
+ })
+
+ test('no defaults and apply without @tailwind base', () => {
+ let config = {
+ experimental: { optimizeUniversalDefaults: true },
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ // Optimize universal defaults doesn't work well with isolated modules
+ // We require you to use @tailwind base to inject the defaults
+ let input = css`
+ @tailwind components;
+ @tailwind utilities;
+
.my-card {
- --tw-scale-x: 1.5;
- --tw-scale-y: 1.5;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
- skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
- scaleY(var(--tw-scale-y));
+ @apply scale-150;
}
- `)
+ `
+
+ return run(input, config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(css`
+ .my-card {
+ --tw-scale-x: 1.5;
+ --tw-scale-y: 1.5;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ }
+ `)
+ })
})
})
diff --git a/tests/resolveConfig.test.js b/tests/resolveConfig.test.js
index 954c40659..c99a986de 100644
--- a/tests/resolveConfig.test.js
+++ b/tests/resolveConfig.test.js
@@ -1,1794 +1,1797 @@
import resolveConfig from '../src/util/resolveConfig'
import corePluginList from '../src/corePluginList'
+import { crosscheck } from './util/run'
-test('prefix key overrides default prefix', () => {
- const userConfig = {
- prefix: 'tw-',
- }
+crosscheck(() => {
+ test('prefix key overrides default prefix', () => {
+ const userConfig = {
+ prefix: 'tw-',
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: 'tw-',
- important: false,
- separator: ':',
- theme: {
- screens: {
- mobile: '400px',
+ expect(result).toMatchObject({
+ prefix: 'tw-',
+ important: false,
+ separator: ':',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
+ })
})
-})
-test('important key overrides default important', () => {
- const userConfig = {
- important: true,
- }
+ test('important key overrides default important', () => {
+ const userConfig = {
+ important: true,
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: '',
- important: true,
- separator: ':',
- theme: {
- screens: {
- mobile: '400px',
+ expect(result).toMatchObject({
+ prefix: '',
+ important: true,
+ separator: ':',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
+ })
})
-})
-test('important (selector) key overrides default important', () => {
- const userConfig = {
- important: '#app',
- }
+ test('important (selector) key overrides default important', () => {
+ const userConfig = {
+ important: '#app',
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: '',
- important: '#app',
- separator: ':',
- theme: {
- screens: {
- mobile: '400px',
+ expect(result).toMatchObject({
+ prefix: '',
+ important: '#app',
+ separator: ':',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
+ })
})
-})
-test('separator key overrides default separator', () => {
- const userConfig = {
- separator: '__',
- }
+ test('separator key overrides default separator', () => {
+ const userConfig = {
+ separator: '__',
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: '',
- important: false,
- separator: '__',
- theme: {
- screens: {
- mobile: '400px',
+ expect(result).toMatchObject({
+ prefix: '',
+ important: false,
+ separator: '__',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
+ })
})
-})
-test('theme key is merged instead of replaced', () => {
- const userConfig = {
- theme: {
- screens: {
- mobile: '400px',
+ test('theme key is merged instead of replaced', () => {
+ const userConfig = {
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- 'grey-darker': '#606f7b',
- 'grey-dark': '#8795a1',
- grey: '#b8c2cc',
- 'grey-light': '#dae1e7',
- 'grey-lighter': '#f1f5f8',
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ 'grey-darker': '#606f7b',
+ 'grey-dark': '#8795a1',
+ grey: '#b8c2cc',
+ 'grey-light': '#dae1e7',
+ 'grey-lighter': '#f1f5f8',
+ },
+ fonts: {
+ sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
+ serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
+ },
+ screens: {
+ sm: '500px',
+ md: '750px',
+ lg: '1000px',
+ },
},
- fonts: {
- sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
- serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
- },
- screens: {
- sm: '500px',
- md: '750px',
- lg: '1000px',
- },
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- 'grey-darker': '#606f7b',
- 'grey-dark': '#8795a1',
- grey: '#b8c2cc',
- 'grey-light': '#dae1e7',
- 'grey-lighter': '#f1f5f8',
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ 'grey-darker': '#606f7b',
+ 'grey-dark': '#8795a1',
+ grey: '#b8c2cc',
+ 'grey-light': '#dae1e7',
+ 'grey-lighter': '#f1f5f8',
+ },
+ fonts: {
+ sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
+ serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
+ },
+ screens: {
+ mobile: '400px',
+ },
},
- fonts: {
- sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
- serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
- },
- screens: {
- mobile: '400px',
- },
- },
+ })
})
-})
-test('theme key is deeply merged instead of replaced', () => {
- const userConfig = {
- theme: {
- extend: {
+ test('theme key is deeply merged instead of replaced', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ colors: {
+ grey: {
+ darker: '#606f7b',
+ dark: '#8795a1',
+ },
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ grey: {
+ grey: '#b8c2cc',
+ light: '#dae1e7',
+ lighter: '#f1f5f8',
+ },
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
colors: {
grey: {
darker: '#606f7b',
dark: '#8795a1',
+ grey: '#b8c2cc',
+ light: '#dae1e7',
+ lighter: '#f1f5f8',
},
},
},
- },
- }
+ })
+ })
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- grey: {
- grey: '#b8c2cc',
- light: '#dae1e7',
- lighter: '#f1f5f8',
+ test('missing top level keys are pulled from the default config', () => {
+ const userConfig = {}
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: { green: '#00ff00' },
+ screens: {
+ mobile: '400px',
},
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- grey: {
- darker: '#606f7b',
- dark: '#8795a1',
- grey: '#b8c2cc',
- light: '#dae1e7',
- lighter: '#f1f5f8',
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: { green: '#00ff00' },
+ screens: {
+ mobile: '400px',
},
},
- },
+ })
})
-})
-test('missing top level keys are pulled from the default config', () => {
- const userConfig = {}
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: { green: '#00ff00' },
- screens: {
- mobile: '400px',
- },
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: { green: '#00ff00' },
- screens: {
- mobile: '400px',
- },
- },
- })
-})
-
-test('functions in the default theme section are lazily evaluated', () => {
- const userConfig = {
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- backgroundColors: (theme) => theme('colors'),
- textColors: (theme) => theme('colors'),
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- backgroundColors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- textColors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
- })
-})
-
-test('functions in the user theme section are lazily evaluated', () => {
- const userConfig = {
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- backgroundColors: (theme) => ({
- ...theme('colors'),
- customBackground: '#bada55',
- }),
- textColors: (theme) => ({
- ...theme('colors'),
- customText: '#facade',
- }),
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- backgroundColors: ({ colors }) => colors,
- textColors: ({ colors }) => colors,
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- backgroundColors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- customBackground: '#bada55',
- },
- textColors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- customText: '#facade',
- },
- },
- })
-})
-
-test('theme values in the extend section extend the existing theme', () => {
- const userConfig = {
- theme: {
- extend: {
- opacity: {
- 25: '25',
- 75: '.75',
- },
- backgroundColors: {
- customBackground: '#bada55',
+ test('functions in the default theme section are lazily evaluated', () => {
+ const userConfig = {
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
},
},
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- opacity: {
- 0: '0',
- 50: '.5',
- 100: '1',
- },
- backgroundColors: (theme) => theme('colors'),
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- opacity: {
- 0: '0',
- 50: '.5',
- 100: '1',
- 25: '25',
- 75: '.75',
- },
- backgroundColors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- customBackground: '#bada55',
- },
- },
- })
-})
-
-test('theme values in the extend section extend the user theme', () => {
- const userConfig = {
- theme: {
- opacity: {
- 0: '0',
- 20: '.2',
- 40: '.4',
- },
- height: (theme) => theme('width'),
- extend: {
- opacity: {
- 60: '.6',
- 80: '.8',
- 100: '1',
- },
- height: {
- customHeight: '500vh',
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
},
+ backgroundColors: (theme) => theme('colors'),
+ textColors: (theme) => theme('colors'),
},
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- opacity: {
- 0: '0',
- 50: '.5',
- 100: '1',
- },
- height: {
- 0: 0,
- full: '100%',
- },
- width: {
- 0: 0,
- 1: '.25rem',
- 2: '.5rem',
- 3: '.75rem',
- 4: '1rem',
- },
- },
- }
+ const result = resolveConfig([userConfig, defaultConfig])
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- opacity: {
- 0: '0',
- 20: '.2',
- 40: '.4',
- 60: '.6',
- 80: '.8',
- 100: '1',
- },
- height: {
- 0: 0,
- 1: '.25rem',
- 2: '.5rem',
- 3: '.75rem',
- 4: '1rem',
- customHeight: '500vh',
- },
- width: {
- 0: 0,
- 1: '.25rem',
- 2: '.5rem',
- 3: '.75rem',
- 4: '1rem',
- },
- },
- })
-})
-
-test('theme values in the extend section can extend values that are depended on lazily', () => {
- const userConfig = {
- theme: {
- extend: {
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
colors: {
red: 'red',
green: 'green',
blue: 'blue',
},
backgroundColors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ textColors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ },
+ })
+ })
+
+ test('functions in the user theme section are lazily evaluated', () => {
+ const userConfig = {
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ backgroundColors: (theme) => ({
+ ...theme('colors'),
+ customBackground: '#bada55',
+ }),
+ textColors: (theme) => ({
+ ...theme('colors'),
+ customText: '#facade',
+ }),
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ },
+ backgroundColors: ({ colors }) => colors,
+ textColors: ({ colors }) => colors,
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ backgroundColors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ customBackground: '#bada55',
+ },
+ textColors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ customText: '#facade',
+ },
+ },
+ })
+ })
+
+ test('theme values in the extend section extend the existing theme', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ opacity: {
+ 25: '25',
+ 75: '.75',
+ },
+ backgroundColors: {
+ customBackground: '#bada55',
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ },
+ opacity: {
+ 0: '0',
+ 50: '.5',
+ 100: '1',
+ },
+ backgroundColors: (theme) => theme('colors'),
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ },
+ opacity: {
+ 0: '0',
+ 50: '.5',
+ 100: '1',
+ 25: '25',
+ 75: '.75',
+ },
+ backgroundColors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
customBackground: '#bada55',
},
},
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- backgroundColors: (theme) => theme('colors'),
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- backgroundColors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- red: 'red',
- green: 'green',
- blue: 'blue',
- customBackground: '#bada55',
- },
- },
+ })
})
-})
-test('theme values in the extend section are not deeply merged when they are simple arrays', () => {
- const userConfig = {
- theme: {
- extend: {
+ test('theme values in the extend section extend the user theme', () => {
+ const userConfig = {
+ theme: {
+ opacity: {
+ 0: '0',
+ 20: '.2',
+ 40: '.4',
+ },
+ height: (theme) => theme('width'),
+ extend: {
+ opacity: {
+ 60: '.6',
+ 80: '.8',
+ 100: '1',
+ },
+ height: {
+ customHeight: '500vh',
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ opacity: {
+ 0: '0',
+ 50: '.5',
+ 100: '1',
+ },
+ height: {
+ 0: 0,
+ full: '100%',
+ },
+ width: {
+ 0: 0,
+ 1: '.25rem',
+ 2: '.5rem',
+ 3: '.75rem',
+ 4: '1rem',
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ opacity: {
+ 0: '0',
+ 20: '.2',
+ 40: '.4',
+ 60: '.6',
+ 80: '.8',
+ 100: '1',
+ },
+ height: {
+ 0: 0,
+ 1: '.25rem',
+ 2: '.5rem',
+ 3: '.75rem',
+ 4: '1rem',
+ customHeight: '500vh',
+ },
+ width: {
+ 0: 0,
+ 1: '.25rem',
+ 2: '.5rem',
+ 3: '.75rem',
+ 4: '1rem',
+ },
+ },
+ })
+ })
+
+ test('theme values in the extend section can extend values that are depended on lazily', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ backgroundColors: {
+ customBackground: '#bada55',
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ },
+ backgroundColors: (theme) => theme('colors'),
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ backgroundColors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ customBackground: '#bada55',
+ },
+ },
+ })
+ })
+
+ test('theme values in the extend section are not deeply merged when they are simple arrays', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ fonts: {
+ sans: ['Comic Sans'],
+ serif: ['Papyrus', { fontFeatureSettings: '"cv11"' }],
+ mono: [['Lobster', 'Papyrus'], { fontFeatureSettings: '"cv11"' }],
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ fonts: {
+ sans: ['system-ui', 'Helvetica Neue', 'sans-serif'],
+ serif: ['Constantia', 'Georgia', 'serif'],
+ mono: ['Menlo', 'Courier New', 'monospace'],
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
fonts: {
sans: ['Comic Sans'],
serif: ['Papyrus', { fontFeatureSettings: '"cv11"' }],
mono: [['Lobster', 'Papyrus'], { fontFeatureSettings: '"cv11"' }],
},
},
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- fonts: {
- sans: ['system-ui', 'Helvetica Neue', 'sans-serif'],
- serif: ['Constantia', 'Georgia', 'serif'],
- mono: ['Menlo', 'Courier New', 'monospace'],
- },
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- fonts: {
- sans: ['Comic Sans'],
- serif: ['Papyrus', { fontFeatureSettings: '"cv11"' }],
- mono: [['Lobster', 'Papyrus'], { fontFeatureSettings: '"cv11"' }],
- },
- },
+ })
})
-})
-test('theme values in the extend section are deeply merged, when they are arrays of objects', () => {
- const userConfig = {
- theme: {
- extend: {
+ test('theme values in the extend section are deeply merged, when they are arrays of objects', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ typography: {
+ ArrayArray: {
+ css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+ },
+ ObjectArray: {
+ css: { a: { backgroundColor: 'red' } },
+ },
+ ArrayObject: {
+ css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+ },
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
typography: {
ArrayArray: {
- css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+ css: [{ a: { underline: 'none' } }],
},
ObjectArray: {
- css: { a: { backgroundColor: 'red' } },
+ css: [{ a: { underline: 'none' } }],
},
ArrayObject: {
- css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+ css: { a: { underline: 'none' } },
},
},
},
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- typography: {
- ArrayArray: {
- css: [{ a: { underline: 'none' } }],
- },
- ObjectArray: {
- css: [{ a: { underline: 'none' } }],
- },
- ArrayObject: {
- css: { a: { underline: 'none' } },
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ typography: {
+ ArrayArray: {
+ css: [
+ { a: { underline: 'none' } },
+ { a: { backgroundColor: 'red' } },
+ { a: { color: 'green' } },
+ ],
+ },
+ ObjectArray: {
+ css: [{ a: { underline: 'none' } }, { a: { backgroundColor: 'red' } }],
+ },
+ ArrayObject: {
+ css: [
+ { a: { underline: 'none' } },
+ { a: { backgroundColor: 'red' } },
+ { a: { color: 'green' } },
+ ],
+ },
},
},
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- typography: {
- ArrayArray: {
- css: [
- { a: { underline: 'none' } },
- { a: { backgroundColor: 'red' } },
- { a: { color: 'green' } },
- ],
- },
- ObjectArray: {
- css: [{ a: { underline: 'none' } }, { a: { backgroundColor: 'red' } }],
- },
- ArrayObject: {
- css: [
- { a: { underline: 'none' } },
- { a: { backgroundColor: 'red' } },
- { a: { color: 'green' } },
- ],
- },
- },
- },
+ })
})
-})
-test('the theme function can use a default value if the key is missing', () => {
- const userConfig = {
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- borderColor: (theme) => ({
- default: theme('colors.gray', 'currentColor'),
- ...theme('colors'),
- }),
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- borderColor: {
- default: 'currentColor',
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
- })
-})
-
-test('the theme function can resolve function values', () => {
- const userConfig = {
- theme: {
- textColor: (theme) => ({
- lime: 'lime',
- ...theme('colors'),
- }),
- backgroundColor: (theme) => ({
- orange: 'orange',
- ...theme('textColor'),
- }),
- borderColor: (theme) => theme('backgroundColor'),
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- textColor: {
- lime: 'lime',
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- backgroundColor: {
- lime: 'lime',
- orange: 'orange',
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- borderColor: {
- lime: 'lime',
- orange: 'orange',
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
- })
-})
-
-test('the theme function can resolve deep function values', () => {
- const userConfig = {
- theme: {
- minWidth: (theme) => ({
- '1/3': theme('width.1/3'),
- }),
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- spacing: {
- 0: '0',
- },
- width: (theme) => ({
- ...theme('spacing'),
- '1/3': '33.33333%',
- }),
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- spacing: {
- 0: '0',
- },
- width: {
- 0: '0',
- '1/3': '33.33333%',
- },
- minWidth: {
- '1/3': '33.33333%',
- },
- },
- })
-})
-
-test('theme values in the extend section are lazily evaluated', () => {
- const userConfig = {
- theme: {
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- extend: {
+ test('the theme function can use a default value if the key is missing', () => {
+ const userConfig = {
+ theme: {
colors: {
- orange: 'orange',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
},
borderColor: (theme) => ({
- foo: theme('colors.orange'),
- bar: theme('colors.red'),
+ default: theme('colors.gray', 'currentColor'),
+ ...theme('colors'),
}),
},
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- borderColor: (theme) => ({
- default: theme('colors.yellow', 'currentColor'),
- ...theme('colors'),
- }),
- },
- }
+ const result = resolveConfig([userConfig, defaultConfig])
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- colors: {
- orange: 'orange',
- red: 'red',
- green: 'green',
- blue: 'blue',
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ borderColor: {
+ default: 'currentColor',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
},
- borderColor: {
- default: 'currentColor',
- foo: 'orange',
- bar: 'red',
- orange: 'orange',
- red: 'red',
- green: 'green',
- blue: 'blue',
- },
- },
+ })
})
-})
-test('lazily evaluated values have access to the config utils', () => {
- const userConfig = {
- theme: {
- inset: (theme) => theme('margin'),
- shift: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- extend: {
- nudge: (theme, { negative }) => ({
+ test('the theme function can resolve function values', () => {
+ const userConfig = {
+ theme: {
+ textColor: (theme) => ({
+ lime: 'lime',
+ ...theme('colors'),
+ }),
+ backgroundColor: (theme) => ({
+ orange: 'orange',
+ ...theme('textColor'),
+ }),
+ borderColor: (theme) => theme('backgroundColor'),
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ textColor: {
+ lime: 'lime',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ backgroundColor: {
+ lime: 'lime',
+ orange: 'orange',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ borderColor: {
+ lime: 'lime',
+ orange: 'orange',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ },
+ })
+ })
+
+ test('the theme function can resolve deep function values', () => {
+ const userConfig = {
+ theme: {
+ minWidth: (theme) => ({
+ '1/3': theme('width.1/3'),
+ }),
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ spacing: {
+ 0: '0',
+ },
+ width: (theme) => ({
+ ...theme('spacing'),
+ '1/3': '33.33333%',
+ }),
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ spacing: {
+ 0: '0',
+ },
+ width: {
+ 0: '0',
+ '1/3': '33.33333%',
+ },
+ minWidth: {
+ '1/3': '33.33333%',
+ },
+ },
+ })
+ })
+
+ test('theme values in the extend section are lazily evaluated', () => {
+ const userConfig = {
+ theme: {
+ colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ extend: {
+ colors: {
+ orange: 'orange',
+ },
+ borderColor: (theme) => ({
+ foo: theme('colors.orange'),
+ bar: theme('colors.red'),
+ }),
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ },
+ borderColor: (theme) => ({
+ default: theme('colors.yellow', 'currentColor'),
+ ...theme('colors'),
+ }),
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ colors: {
+ orange: 'orange',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ borderColor: {
+ default: 'currentColor',
+ foo: 'orange',
+ bar: 'red',
+ orange: 'orange',
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ },
+ },
+ })
+ })
+
+ test('lazily evaluated values have access to the config utils', () => {
+ const userConfig = {
+ theme: {
+ inset: (theme) => theme('margin'),
+ shift: (theme, { negative }) => ({
+ ...theme('spacing'),
+ ...negative(theme('spacing')),
+ }),
+ extend: {
+ nudge: (theme, { negative }) => ({
+ ...theme('spacing'),
+ ...negative(theme('spacing')),
+ }),
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ spacing: {
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ },
+ margin: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
}),
},
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- spacing: {
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- margin: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- },
- }
+ const result = resolveConfig([userConfig, defaultConfig])
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- spacing: {
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- inset: {
- '-1': '-1px',
- '-2': '-2px',
- '-3': '-3px',
- '-4': '-4px',
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- margin: {
- '-1': '-1px',
- '-2': '-2px',
- '-3': '-3px',
- '-4': '-4px',
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- shift: {
- '-1': '-1px',
- '-2': '-2px',
- '-3': '-3px',
- '-4': '-4px',
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- nudge: {
- '-1': '-1px',
- '-2': '-2px',
- '-3': '-3px',
- '-4': '-4px',
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- },
- })
-})
-
-test('the original theme is not mutated', () => {
- const userConfig = {
- theme: {
- extend: {
- colors: {
- orange: 'orange',
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ spacing: {
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ },
+ inset: {
+ '-1': '-1px',
+ '-2': '-2px',
+ '-3': '-3px',
+ '-4': '-4px',
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ },
+ margin: {
+ '-1': '-1px',
+ '-2': '-2px',
+ '-3': '-3px',
+ '-4': '-4px',
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ },
+ shift: {
+ '-1': '-1px',
+ '-2': '-2px',
+ '-3': '-3px',
+ '-4': '-4px',
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ },
+ nudge: {
+ '-1': '-1px',
+ '-2': '-2px',
+ '-3': '-3px',
+ '-4': '-4px',
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
},
},
- },
- }
+ })
+ })
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- colors: {
- cyan: 'cyan',
- magenta: 'magenta',
- yellow: 'yellow',
- },
- },
- }
-
- resolveConfig([userConfig, defaultConfig])
-
- expect(userConfig).toEqual({
- theme: {
- extend: {
- colors: {
- orange: 'orange',
+ test('the original theme is not mutated', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ colors: {
+ orange: 'orange',
+ },
},
},
- },
- })
-})
+ }
-test('custom properties are multiplied by -1 for negative values', () => {
- const userConfig = {
- theme: {
- spacing: {
- 0: 0,
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- auto: 'auto',
- foo: 'var(--foo)',
- bar: 'var(--bar, 500px)',
- baz: 'calc(50% - 10px)',
- qux: '10poops',
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ colors: {
+ cyan: 'cyan',
+ magenta: 'magenta',
+ yellow: 'yellow',
+ },
},
- margin: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- },
- }
+ }
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {},
- }
+ resolveConfig([userConfig, defaultConfig])
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result.theme.spacing).toEqual({
- 0: 0,
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- auto: 'auto',
- foo: 'var(--foo)',
- bar: 'var(--bar, 500px)',
- baz: 'calc(50% - 10px)',
- qux: '10poops',
+ expect(userConfig).toEqual({
+ theme: {
+ extend: {
+ colors: {
+ orange: 'orange',
+ },
+ },
+ },
+ })
})
- expect(result.theme.margin).toEqual({
- 0: 0,
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- auto: 'auto',
- foo: 'var(--foo)',
- bar: 'var(--bar, 500px)',
- baz: 'calc(50% - 10px)',
- qux: '10poops',
- '-0': '0',
- '-1': '-1px',
- '-2': '-2px',
- '-3': '-3px',
- '-4': '-4px',
- '-foo': 'calc(var(--foo) * -1)',
- '-bar': 'calc(var(--bar, 500px) * -1)',
- '-baz': 'calc(calc(50% - 10px) * -1)',
- '-qux': '-10poops',
- })
-})
-test('more than two config objects can be resolved', () => {
- const firstConfig = {
- theme: {
- extend: {
- fontFamily: () => ({
- code: ['Menlo', 'monospace'],
+ test('custom properties are multiplied by -1 for negative values', () => {
+ const userConfig = {
+ theme: {
+ spacing: {
+ 0: 0,
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ auto: 'auto',
+ foo: 'var(--foo)',
+ bar: 'var(--bar, 500px)',
+ baz: 'calc(50% - 10px)',
+ qux: '10poops',
+ },
+ margin: (theme, { negative }) => ({
+ ...theme('spacing'),
+ ...negative(theme('spacing')),
}),
- colors: {
- red: 'red',
- },
- backgroundColor: {
- customBackgroundOne: '#bada55',
- },
- textDecorationColor: {
- orange: 'orange',
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {},
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result.theme.spacing).toEqual({
+ 0: 0,
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ auto: 'auto',
+ foo: 'var(--foo)',
+ bar: 'var(--bar, 500px)',
+ baz: 'calc(50% - 10px)',
+ qux: '10poops',
+ })
+ expect(result.theme.margin).toEqual({
+ 0: 0,
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ auto: 'auto',
+ foo: 'var(--foo)',
+ bar: 'var(--bar, 500px)',
+ baz: 'calc(50% - 10px)',
+ qux: '10poops',
+ '-0': '0',
+ '-1': '-1px',
+ '-2': '-2px',
+ '-3': '-3px',
+ '-4': '-4px',
+ '-foo': 'calc(var(--foo) * -1)',
+ '-bar': 'calc(var(--bar, 500px) * -1)',
+ '-baz': 'calc(calc(50% - 10px) * -1)',
+ '-qux': '-10poops',
+ })
+ })
+
+ test('more than two config objects can be resolved', () => {
+ const firstConfig = {
+ theme: {
+ extend: {
+ fontFamily: () => ({
+ code: ['Menlo', 'monospace'],
+ }),
+ colors: {
+ red: 'red',
+ },
+ backgroundColor: {
+ customBackgroundOne: '#bada55',
+ },
+ textDecorationColor: {
+ orange: 'orange',
+ },
},
},
- },
- }
+ }
- const secondConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- extend: {
+ const secondConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ extend: {
+ fontFamily: {
+ quote: ['Helvetica', 'serif'],
+ },
+ colors: {
+ green: 'green',
+ },
+ backgroundColor: {
+ customBackgroundTwo: '#facade',
+ },
+ textDecorationColor: (theme) => theme('colors'),
+ },
+ },
+ }
+
+ const thirdConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ extend: {
+ fontFamily: {
+ hero: ['Futura', 'sans-serif'],
+ },
+ colors: {
+ pink: 'pink',
+ },
+ backgroundColor: () => ({
+ customBackgroundThree: '#c0ffee',
+ }),
+ textDecorationColor: {
+ lime: 'lime',
+ },
+ },
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
fontFamily: {
+ body: ['Arial', 'sans-serif'],
+ display: ['Georgia', 'serif'],
+ },
+ colors: {
+ blue: 'blue',
+ },
+ backgroundColor: (theme) => theme('colors'),
+ },
+ }
+
+ const result = resolveConfig([firstConfig, secondConfig, thirdConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ fontFamily: {
+ body: ['Arial', 'sans-serif'],
+ display: ['Georgia', 'serif'],
+ code: ['Menlo', 'monospace'],
quote: ['Helvetica', 'serif'],
- },
- colors: {
- green: 'green',
- },
- backgroundColor: {
- customBackgroundTwo: '#facade',
- },
- textDecorationColor: (theme) => theme('colors'),
- },
- },
- }
-
- const thirdConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- extend: {
- fontFamily: {
hero: ['Futura', 'sans-serif'],
},
colors: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
pink: 'pink',
},
- backgroundColor: () => ({
+ backgroundColor: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ pink: 'pink',
+ customBackgroundOne: '#bada55',
+ customBackgroundTwo: '#facade',
customBackgroundThree: '#c0ffee',
- }),
+ },
textDecorationColor: {
+ red: 'red',
+ green: 'green',
+ blue: 'blue',
+ pink: 'pink',
+ orange: 'orange',
lime: 'lime',
},
},
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- fontFamily: {
- body: ['Arial', 'sans-serif'],
- display: ['Georgia', 'serif'],
- },
- colors: {
- blue: 'blue',
- },
- backgroundColor: (theme) => theme('colors'),
- },
- }
-
- const result = resolveConfig([firstConfig, secondConfig, thirdConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- fontFamily: {
- body: ['Arial', 'sans-serif'],
- display: ['Georgia', 'serif'],
- code: ['Menlo', 'monospace'],
- quote: ['Helvetica', 'serif'],
- hero: ['Futura', 'sans-serif'],
- },
- colors: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- pink: 'pink',
- },
- backgroundColor: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- pink: 'pink',
- customBackgroundOne: '#bada55',
- customBackgroundTwo: '#facade',
- customBackgroundThree: '#c0ffee',
- },
- textDecorationColor: {
- red: 'red',
- green: 'green',
- blue: 'blue',
- pink: 'pink',
- orange: 'orange',
- lime: 'lime',
- },
- },
+ })
})
-})
-test('plugin config modifications are applied', () => {
- const userConfig = {
- plugins: [
- {
- config: {
- prefix: 'tw-',
+ test('plugin config modifications are applied', () => {
+ const userConfig = {
+ plugins: [
+ {
+ config: {
+ prefix: 'tw-',
+ },
+ },
+ ],
+ }
+
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
},
},
- ],
- }
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }
+ const result = resolveConfig([userConfig, defaultConfig])
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: 'tw-',
- important: false,
- separator: ':',
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- plugins: userConfig.plugins,
- })
-})
-
-test('user config takes precedence over plugin config modifications', () => {
- const userConfig = {
- prefix: 'user-',
- plugins: [
- {
- config: {
- prefix: 'tw-',
+ expect(result).toMatchObject({
+ prefix: 'tw-',
+ important: false,
+ separator: ':',
+ theme: {
+ screens: {
+ mobile: '400px',
},
},
- ],
- }
-
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: 'user-',
- important: false,
- separator: ':',
- theme: {
- screens: {
- mobile: '400px',
- },
- },
- plugins: userConfig.plugins,
+ plugins: userConfig.plugins,
+ })
})
-})
-test('plugin config can register plugins that also have config', () => {
- const userConfig = {
- plugins: [
- {
- config: {
- prefix: 'tw-',
- plugins: [
- {
- config: {
- important: true,
+ test('user config takes precedence over plugin config modifications', () => {
+ const userConfig = {
+ prefix: 'user-',
+ plugins: [
+ {
+ config: {
+ prefix: 'tw-',
+ },
+ },
+ ],
+ }
+
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: 'user-',
+ important: false,
+ separator: ':',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
+ },
+ plugins: userConfig.plugins,
+ })
+ })
+
+ test('plugin config can register plugins that also have config', () => {
+ const userConfig = {
+ plugins: [
+ {
+ config: {
+ prefix: 'tw-',
+ plugins: [
+ {
+ config: {
+ important: true,
+ },
},
- },
- {
- config: {
- separator: '__',
+ {
+ config: {
+ separator: '__',
+ },
},
- },
- ],
+ ],
+ },
+ handler() {},
},
- handler() {},
- },
- ],
- }
+ ],
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: 'tw-',
- important: true,
- separator: '__',
- theme: {
- screens: {
- mobile: '400px',
+ expect(result).toMatchObject({
+ prefix: 'tw-',
+ important: true,
+ separator: '__',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- plugins: userConfig.plugins,
+ plugins: userConfig.plugins,
+ })
})
-})
-test('plugin configs take precedence over plugin configs registered by that plugin', () => {
- const userConfig = {
- plugins: [
- {
- config: {
- prefix: 'outer-',
- plugins: [
- {
- config: {
- prefix: 'inner-',
+ test('plugin configs take precedence over plugin configs registered by that plugin', () => {
+ const userConfig = {
+ plugins: [
+ {
+ config: {
+ prefix: 'outer-',
+ plugins: [
+ {
+ config: {
+ prefix: 'inner-',
+ },
},
- },
- ],
+ ],
+ },
+ handler() {},
},
- handler() {},
- },
- ],
- }
+ ],
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- mobile: '400px',
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
+ const result = resolveConfig([userConfig, defaultConfig])
- expect(result).toMatchObject({
- prefix: 'outer-',
- important: false,
- separator: ':',
- theme: {
- screens: {
- mobile: '400px',
+ expect(result).toMatchObject({
+ prefix: 'outer-',
+ important: false,
+ separator: ':',
+ theme: {
+ screens: {
+ mobile: '400px',
+ },
},
- },
- plugins: userConfig.plugins,
+ plugins: userConfig.plugins,
+ })
})
-})
-test('plugin theme extensions are added even if user overrides top-level theme config', () => {
- const userConfig = {
- theme: {
- width: {
- '1px': '1px',
+ test('plugin theme extensions are added even if user overrides top-level theme config', () => {
+ const userConfig = {
+ theme: {
+ width: {
+ '1px': '1px',
+ },
},
- },
- plugins: [
- {
- config: {
- theme: {
- extend: {
- width: {
- '2px': '2px',
- '3px': '3px',
+ plugins: [
+ {
+ config: {
+ theme: {
+ extend: {
+ width: {
+ '2px': '2px',
+ '3px': '3px',
+ },
},
},
},
+ handler() {},
},
- handler() {},
- },
- ],
- }
+ ],
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- width: {
- sm: '1rem',
- md: '2rem',
- lg: '3rem',
- },
- screens: {
- mobile: '400px',
- },
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '',
- important: false,
- separator: ':',
- theme: {
- width: {
- '1px': '1px',
- '2px': '2px',
- '3px': '3px',
- },
- screens: {
- mobile: '400px',
- },
- },
- plugins: userConfig.plugins,
- })
-})
-
-test('user theme extensions take precedence over plugin theme extensions with the same key', () => {
- const userConfig = {
- theme: {
- extend: {
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
width: {
+ sm: '1rem',
+ md: '2rem',
+ lg: '3rem',
+ },
+ screens: {
+ mobile: '400px',
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '',
+ important: false,
+ separator: ':',
+ theme: {
+ width: {
+ '1px': '1px',
+ '2px': '2px',
+ '3px': '3px',
+ },
+ screens: {
+ mobile: '400px',
+ },
+ },
+ plugins: userConfig.plugins,
+ })
+ })
+
+ test('user theme extensions take precedence over plugin theme extensions with the same key', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ width: {
+ xl: '6rem',
+ },
+ },
+ },
+ plugins: [
+ {
+ config: {
+ theme: {
+ extend: {
+ width: {
+ xl: '4rem',
+ },
+ },
+ },
+ },
+ handler() {},
+ },
+ ],
+ }
+
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ width: {
+ sm: '1rem',
+ md: '2rem',
+ lg: '3rem',
+ },
+ screens: {
+ mobile: '400px',
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '',
+ important: false,
+ separator: ':',
+ theme: {
+ width: {
+ sm: '1rem',
+ md: '2rem',
+ lg: '3rem',
xl: '6rem',
},
+ screens: {
+ mobile: '400px',
+ },
},
- },
- plugins: [
- {
- config: {
- theme: {
- extend: {
- width: {
- xl: '4rem',
- },
+ plugins: userConfig.plugins,
+ })
+ })
+
+ test('extensions are applied in the right order', () => {
+ const userConfig = {
+ theme: {
+ extend: {
+ colors: {
+ grey: {
+ light: '#eee',
},
},
},
- handler() {},
},
- ],
- }
+ }
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {
- width: {
- sm: '1rem',
- md: '2rem',
- lg: '3rem',
+ const otherConfig = {
+ theme: {
+ extend: {
+ colors: {
+ grey: {
+ light: '#ddd',
+ darker: '#111',
+ },
+ },
+ },
},
- screens: {
- mobile: '400px',
- },
- },
- }
+ }
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '',
- important: false,
- separator: ':',
- theme: {
- width: {
- sm: '1rem',
- md: '2rem',
- lg: '3rem',
- xl: '6rem',
+ const anotherConfig = {
+ theme: {
+ extend: {
+ colors: {
+ grey: {
+ darker: '#222',
+ },
+ },
+ },
},
- screens: {
- mobile: '400px',
- },
- },
- plugins: userConfig.plugins,
- })
-})
+ }
-test('extensions are applied in the right order', () => {
- const userConfig = {
- theme: {
- extend: {
+ const defaultConfig = {
+ content: [],
+ theme: {
+ colors: {
+ grey: {
+ light: '#ccc',
+ dark: '#333',
+ },
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, otherConfig, anotherConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ theme: {
colors: {
grey: {
light: '#eee',
- },
- },
- },
- },
- }
-
- const otherConfig = {
- theme: {
- extend: {
- colors: {
- grey: {
- light: '#ddd',
+ dark: '#333',
darker: '#111',
},
},
},
- },
- }
+ })
+ })
- const anotherConfig = {
- theme: {
- extend: {
- colors: {
- grey: {
- darker: '#222',
+ test('core plugin configuration builds on the default list when starting with an empty object', () => {
+ const userConfig = {
+ corePlugins: { display: false },
+ }
+
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {},
+ corePlugins: {},
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '',
+ important: false,
+ separator: ':',
+ theme: {},
+ corePlugins: corePluginList.filter((c) => c !== 'display'),
+ })
+ })
+
+ test('core plugins that are disabled by default can be enabled', () => {
+ const userConfig = {
+ corePlugins: { display: true },
+ }
+
+ const defaultConfig = {
+ presets: [],
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {},
+ corePlugins: { display: false },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+ expect(result.corePlugins).toContain('display')
+ })
+
+ test('core plugin configurations stack', () => {
+ const userConfig = {
+ corePlugins: { display: false },
+ }
+
+ const otherConfig = {
+ corePlugins: ({ corePlugins }) => {
+ return [...corePlugins, 'margin']
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {},
+ corePlugins: ['float', 'display', 'padding'],
+ }
+
+ const result = resolveConfig([userConfig, otherConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '',
+ important: false,
+ separator: ':',
+ theme: {},
+ corePlugins: ['float', 'padding', 'margin'],
+ })
+ })
+
+ test('plugins are merged', () => {
+ const userConfig = {
+ plugins: ['3'],
+ }
+
+ const otherConfig = {
+ plugins: ['2'],
+ }
+
+ const defaultConfig = {
+ plugins: ['1'],
+ prefix: '',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {},
+ }
+
+ const result = resolveConfig([userConfig, otherConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '',
+ important: false,
+ separator: ':',
+ theme: {},
+ plugins: ['1', '2', '3'],
+ })
+ })
+
+ test('all helpers can be destructured from the first function argument', () => {
+ const userConfig = {
+ theme: {
+ example: ({ theme, colors, negative, breakpoints }) => ({
+ weight: theme('fontWeight.bold'),
+ black: colors.black,
+ white: colors.white,
+ ...negative(theme('spacing')),
+ ...breakpoints(theme('screens')),
+ }),
+ },
+ }
+
+ const defaultConfig = {
+ prefix: '-',
+ important: false,
+ separator: ':',
+ content: [],
+ theme: {
+ screens: {
+ sm: '640px',
+ md: '768px',
+ },
+ fontWeight: {
+ bold: 700,
+ },
+ spacing: {
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ },
+ },
+ }
+
+ const result = resolveConfig([userConfig, defaultConfig])
+
+ expect(result).toMatchObject({
+ prefix: '-',
+ important: false,
+ separator: ':',
+ theme: {
+ example: {
+ weight: 700,
+ black: '#000',
+ white: '#fff',
+ '-1': '-1px',
+ '-2': '-2px',
+ '-3': '-3px',
+ '-4': '-4px',
+ 'screen-sm': '640px',
+ 'screen-md': '768px',
+ },
+ },
+ })
+ })
+
+ test('does not duplicate extended configs every time resolveConfig is called', () => {
+ let shared = {
+ foo: { bar: { baz: [{ color: 'red' }] } },
+ }
+
+ const createConfig = (color) =>
+ resolveConfig([
+ {
+ theme: {
+ foo: shared.foo,
+ extend: {
+ foo: { bar: { baz: { color } } },
+ },
},
},
- },
- },
- }
+ ])
- const defaultConfig = {
- content: [],
- theme: {
- colors: {
- grey: {
- light: '#ccc',
- dark: '#333',
- },
- },
- },
- }
+ createConfig('orange')
+ createConfig('yellow')
+ createConfig('green')
- const result = resolveConfig([userConfig, otherConfig, anotherConfig, defaultConfig])
+ const result = createConfig('blue')
- expect(result).toMatchObject({
- theme: {
- colors: {
- grey: {
- light: '#eee',
- dark: '#333',
- darker: '#111',
- },
- },
- },
+ expect(shared.foo.bar.baz).toMatchObject([{ color: 'red' }])
+ expect(result.theme.foo.bar.baz).toMatchObject([{ color: 'red' }, { color: 'blue' }])
})
})
-
-test('core plugin configuration builds on the default list when starting with an empty object', () => {
- const userConfig = {
- corePlugins: { display: false },
- }
-
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {},
- corePlugins: {},
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '',
- important: false,
- separator: ':',
- theme: {},
- corePlugins: corePluginList.filter((c) => c !== 'display'),
- })
-})
-
-test('core plugins that are disabled by default can be enabled', () => {
- const userConfig = {
- corePlugins: { display: true },
- }
-
- const defaultConfig = {
- presets: [],
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {},
- corePlugins: { display: false },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
- expect(result.corePlugins).toContain('display')
-})
-
-test('core plugin configurations stack', () => {
- const userConfig = {
- corePlugins: { display: false },
- }
-
- const otherConfig = {
- corePlugins: ({ corePlugins }) => {
- return [...corePlugins, 'margin']
- },
- }
-
- const defaultConfig = {
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {},
- corePlugins: ['float', 'display', 'padding'],
- }
-
- const result = resolveConfig([userConfig, otherConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '',
- important: false,
- separator: ':',
- theme: {},
- corePlugins: ['float', 'padding', 'margin'],
- })
-})
-
-test('plugins are merged', () => {
- const userConfig = {
- plugins: ['3'],
- }
-
- const otherConfig = {
- plugins: ['2'],
- }
-
- const defaultConfig = {
- plugins: ['1'],
- prefix: '',
- important: false,
- separator: ':',
- content: [],
- theme: {},
- }
-
- const result = resolveConfig([userConfig, otherConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '',
- important: false,
- separator: ':',
- theme: {},
- plugins: ['1', '2', '3'],
- })
-})
-
-test('all helpers can be destructured from the first function argument', () => {
- const userConfig = {
- theme: {
- example: ({ theme, colors, negative, breakpoints }) => ({
- weight: theme('fontWeight.bold'),
- black: colors.black,
- white: colors.white,
- ...negative(theme('spacing')),
- ...breakpoints(theme('screens')),
- }),
- },
- }
-
- const defaultConfig = {
- prefix: '-',
- important: false,
- separator: ':',
- content: [],
- theme: {
- screens: {
- sm: '640px',
- md: '768px',
- },
- fontWeight: {
- bold: 700,
- },
- spacing: {
- 0: '0px',
- 1: '1px',
- 2: '2px',
- 3: '3px',
- 4: '4px',
- },
- },
- }
-
- const result = resolveConfig([userConfig, defaultConfig])
-
- expect(result).toMatchObject({
- prefix: '-',
- important: false,
- separator: ':',
- theme: {
- example: {
- weight: 700,
- black: '#000',
- white: '#fff',
- '-1': '-1px',
- '-2': '-2px',
- '-3': '-3px',
- '-4': '-4px',
- 'screen-sm': '640px',
- 'screen-md': '768px',
- },
- },
- })
-})
-
-test('does not duplicate extended configs every time resolveConfig is called', () => {
- let shared = {
- foo: { bar: { baz: [{ color: 'red' }] } },
- }
-
- const createConfig = (color) =>
- resolveConfig([
- {
- theme: {
- foo: shared.foo,
- extend: {
- foo: { bar: { baz: { color } } },
- },
- },
- },
- ])
-
- createConfig('orange')
- createConfig('yellow')
- createConfig('green')
-
- const result = createConfig('blue')
-
- expect(shared.foo.bar.baz).toMatchObject([{ color: 'red' }])
- expect(result.theme.foo.bar.baz).toMatchObject([{ color: 'red' }, { color: 'blue' }])
-})
diff --git a/tests/responsive-and-variants-atrules.test.js b/tests/responsive-and-variants-atrules.test.js
index 5abc5b167..a825dc333 100644
--- a/tests/responsive-and-variants-atrules.test.js
+++ b/tests/responsive-and-variants-atrules.test.js
@@ -1,155 +1,157 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-test('responsive and variants atrules', () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
+crosscheck(() => {
+ test('responsive and variants atrules', () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
- let input = css`
- @tailwind components;
- @tailwind utilities;
+ let input = css`
+ @tailwind components;
+ @tailwind utilities;
+
+ @layer utilities {
+ @responsive {
+ .responsive-in-utilities {
+ color: blue;
+ }
+ }
+ @variants {
+ .variants-in-utilities {
+ color: red;
+ }
+ }
+ @responsive {
+ @variants {
+ .both-in-utilities {
+ color: green;
+ }
+ }
+ }
+ }
- @layer utilities {
@responsive {
- .responsive-in-utilities {
- color: blue;
+ .responsive-at-root {
+ color: white;
}
}
@variants {
- .variants-in-utilities {
- color: red;
+ .variants-at-root {
+ color: orange;
}
}
@responsive {
@variants {
- .both-in-utilities {
- color: green;
+ .both-at-root {
+ color: pink;
}
}
}
- }
- @responsive {
- .responsive-at-root {
- color: white;
- }
- }
- @variants {
- .variants-at-root {
- color: orange;
- }
- }
- @responsive {
- @variants {
- .both-at-root {
- color: pink;
+ @layer components {
+ @responsive {
+ .responsive-in-components {
+ color: blue;
+ }
+ }
+ @variants {
+ .variants-in-components {
+ color: red;
+ }
+ }
+ @responsive {
+ @variants {
+ .both-in-components {
+ color: green;
+ }
+ }
}
}
- }
+ `
- @layer components {
- @responsive {
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
.responsive-in-components {
color: blue;
}
- }
- @variants {
.variants-in-components {
color: red;
}
- }
- @responsive {
- @variants {
- .both-in-components {
- color: green;
- }
- }
- }
- }
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .responsive-in-components {
- color: blue;
- }
- .variants-in-components {
- color: red;
- }
- .both-in-components {
- color: green;
- }
- .responsive-in-utilities {
- color: blue;
- }
- .variants-in-utilities {
- color: red;
- }
- .both-in-utilities {
- color: green;
- }
- .responsive-at-root {
- color: white;
- }
- .variants-at-root {
- color: orange;
- }
- .both-at-root {
- color: pink;
- }
- @media (min-width: 768px) {
- .md\:focus\:responsive-in-components:focus {
- color: blue;
- }
- .md\:focus\:variants-in-components:focus {
- color: red;
- }
- .md\:focus\:both-in-components:focus {
+ .both-in-components {
color: green;
}
- .md\:focus\:responsive-in-utilities:focus {
+ .responsive-in-utilities {
color: blue;
}
- .md\:focus\:variants-in-utilities:focus {
+ .variants-in-utilities {
color: red;
}
- .md\:focus\:both-in-utilities:focus {
+ .both-in-utilities {
color: green;
}
- .md\:focus\:responsive-at-root:focus {
+ .responsive-at-root {
color: white;
}
- .md\:focus\:variants-at-root:focus {
+ .variants-at-root {
color: orange;
}
- .md\:focus\:both-at-root:focus {
+ .both-at-root {
color: pink;
}
- }
- `)
+ @media (min-width: 768px) {
+ .md\:focus\:responsive-in-components:focus {
+ color: blue;
+ }
+ .md\:focus\:variants-in-components:focus {
+ color: red;
+ }
+ .md\:focus\:both-in-components:focus {
+ color: green;
+ }
+ .md\:focus\:responsive-in-utilities:focus {
+ color: blue;
+ }
+ .md\:focus\:variants-in-utilities:focus {
+ color: red;
+ }
+ .md\:focus\:both-in-utilities:focus {
+ color: green;
+ }
+ .md\:focus\:responsive-at-root:focus {
+ color: white;
+ }
+ .md\:focus\:variants-at-root:focus {
+ color: orange;
+ }
+ .md\:focus\:both-at-root:focus {
+ color: pink;
+ }
+ }
+ `)
+ })
})
})
diff --git a/tests/safelist.test.js b/tests/safelist.test.js
index 3aab69d13..a8404e634 100644
--- a/tests/safelist.test.js
+++ b/tests/safelist.test.js
@@ -1,534 +1,536 @@
-import { run, html, css } from './util/run'
+import { crosscheck, run, html, css } from './util/run'
-it('should not safelist anything', () => {
- let config = {
- content: [{ raw: html`` }],
- }
+crosscheck(() => {
+ it('should not safelist anything', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ }
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should safelist strings', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: ['mt-[20px]', 'font-bold', 'text-gray-200', 'hover:underline'],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .mt-\[20px\] {
- margin-top: 20px;
- }
-
- .font-bold {
- font-weight: 700;
- }
-
- .uppercase {
- text-transform: uppercase;
- }
-
- .text-gray-200 {
- --tw-text-opacity: 1;
- color: rgb(229 231 235 / var(--tw-text-opacity));
- }
-
- .hover\:underline:hover {
- text-decoration-line: underline;
- }
- `)
- })
-})
-
-it('should safelist based on a pattern regex', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^bg-(red)-(100|200)$/,
- variants: ['hover'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .bg-red-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
- }
-
- .bg-red-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
- }
-
- .uppercase {
- text-transform: uppercase;
- }
-
- .hover\:bg-red-100:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
- }
-
- .hover\:bg-red-200:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
- }
- `)
- })
-})
-
-it('should not generate duplicates', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- 'uppercase',
- {
- pattern: /^bg-(red)-(100|200)$/,
- variants: ['hover'],
- },
- {
- pattern: /^bg-(red)-(100|200)$/,
- variants: ['hover'],
- },
- {
- pattern: /^bg-(red)-(100|200)$/,
- variants: ['hover'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .bg-red-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
- }
-
- .bg-red-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
- }
-
- .uppercase {
- text-transform: uppercase;
- }
-
- .hover\:bg-red-100:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
- }
-
- .hover\:bg-red-200:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
- }
- `)
- })
-})
-
-it('should safelist when using a custom prefix', () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^tw-bg-red-(100|200)$/g,
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .tw-bg-red-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
- }
-
- .tw-bg-red-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
- }
-
- .tw-uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should not safelist when an empty list is provided', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should not safelist when an sparse/holey list is provided', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [, , ,],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should not safelist any invalid variants if provided', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^bg-(red)-(100|200)$/,
- variants: ['foo', 'bar'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .bg-red-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
- }
- .bg-red-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
- }
-
- .uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should safelist negatives based on a pattern regex', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^-top-1$/,
- variants: ['hover'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .-top-1 {
- top: -0.25rem;
- }
-
- .uppercase {
- text-transform: uppercase;
- }
-
- .hover\:-top-1:hover {
- top: -0.25rem;
- }
- `)
- })
-})
-
-it('should safelist negatives based on a pattern regex', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^bg-red-(400|500)(\/(40|50))?$/,
- variants: ['hover'],
- },
- {
- pattern: /^(fill|ring|text)-red-200\/50$/,
- variants: ['hover'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .bg-red-400 {
- --tw-bg-opacity: 1;
- background-color: rgb(248 113 113 / var(--tw-bg-opacity));
- }
- .bg-red-400\/40 {
- background-color: rgb(248 113 113 / 0.4);
- }
- .bg-red-400\/50 {
- background-color: rgb(248 113 113 / 0.5);
- }
- .bg-red-500 {
- --tw-bg-opacity: 1;
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
- }
- .bg-red-500\/40 {
- background-color: rgb(239 68 68 / 0.4);
- }
- .bg-red-500\/50 {
- background-color: rgb(239 68 68 / 0.5);
- }
- .fill-red-200\/50 {
- fill: rgb(254 202 202 / 0.5);
- }
- .uppercase {
- text-transform: uppercase;
- }
- .text-red-200\/50 {
- color: rgb(254 202 202 / 0.5);
- }
- .ring-red-200\/50 {
- --tw-ring-color: rgb(254 202 202 / 0.5);
- }
- .hover\:bg-red-400:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(248 113 113 / var(--tw-bg-opacity));
- }
- .hover\:bg-red-400\/40:hover {
- background-color: rgb(248 113 113 / 0.4);
- }
- .hover\:bg-red-400\/50:hover {
- background-color: rgb(248 113 113 / 0.5);
- }
- .hover\:bg-red-500:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
- }
- .hover\:bg-red-500\/40:hover {
- background-color: rgb(239 68 68 / 0.4);
- }
- .hover\:bg-red-500\/50:hover {
- background-color: rgb(239 68 68 / 0.5);
- }
- .hover\:fill-red-200\/50:hover {
- fill: rgb(254 202 202 / 0.5);
- }
- .hover\:text-red-200\/50:hover {
- color: rgb(254 202 202 / 0.5);
- }
- .hover\:ring-red-200\/50:hover {
- --tw-ring-color: rgb(254 202 202 / 0.5);
- }
- `)
- })
-})
-
-it('should safelist pattern regex with !important selector', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [{ pattern: /^!grid-cols-(4|5|6)$/ }],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .\!grid-cols-4 {
- grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
- }
-
- .\!grid-cols-5 {
- grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
- }
-
- .\!grid-cols-6 {
- grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
- }
-
- .uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should safelist pattern regex with custom prefix along with !important selector', () => {
- let config = {
- prefix: 'tw-',
- content: [{ raw: html`` }],
- safelist: [{ pattern: /^!tw-grid-cols-(4|5|6)$/ }],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .\!tw-grid-cols-4 {
- grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
- }
-
- .\!tw-grid-cols-5 {
- grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
- }
-
- .\!tw-grid-cols-6 {
- grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
- }
-
- .tw-uppercase {
- text-transform: uppercase;
- }
- `)
- })
-})
-
-it('should safelist pattern regex having !important selector with variants', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^!bg-gray-(500|600|700|800)$/,
- variants: ['hover'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .\!bg-gray-500 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
- }
-
- .\!bg-gray-600 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
- }
-
- .\!bg-gray-700 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
- }
-
- .\!bg-gray-800 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
- }
-
- .uppercase {
- text-transform: uppercase;
- }
-
- .hover\:\!bg-gray-500:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
- }
-
- .hover\:\!bg-gray-600:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
- }
-
- .hover\:\!bg-gray-700:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
- }
-
- .hover\:\!bg-gray-800:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
- }
- `)
- })
-})
-
-it('should safelist multiple patterns with !important selector', () => {
- let config = {
- content: [{ raw: html`` }],
- safelist: [
- {
- pattern: /^!text-gray-(700|800|900)$/,
- variants: ['hover'],
- },
- {
- pattern: /^!bg-gray-(200|300|400)$/,
- variants: ['hover'],
- },
- ],
- }
-
- return run('@tailwind utilities', config).then((result) => {
- return expect(result.css).toMatchCss(css`
- .\!bg-gray-200 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
- }
-
- .\!bg-gray-300 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
- }
-
- .\!bg-gray-400 {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
- }
-
- .uppercase {
- text-transform: uppercase;
- }
-
- .\!text-gray-700 {
- --tw-text-opacity: 1 !important;
- color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
- }
-
- .\!text-gray-800 {
- --tw-text-opacity: 1 !important;
- color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
- }
-
- .\!text-gray-900 {
- --tw-text-opacity: 1 !important;
- color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
- }
-
- .hover\:\!bg-gray-200:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
- }
-
- .hover\:\!bg-gray-300:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
- }
-
- .hover\:\!bg-gray-400:hover {
- --tw-bg-opacity: 1 !important;
- background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
- }
-
- .hover\:\!text-gray-700:hover {
- --tw-text-opacity: 1 !important;
- color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
- }
-
- .hover\:\!text-gray-800:hover {
- --tw-text-opacity: 1 !important;
- color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
- }
-
- .hover\:\!text-gray-900:hover {
- --tw-text-opacity: 1 !important;
- color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
- }
- `)
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should safelist strings', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: ['mt-[20px]', 'font-bold', 'text-gray-200', 'hover:underline'],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .mt-\[20px\] {
+ margin-top: 20px;
+ }
+
+ .font-bold {
+ font-weight: 700;
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+
+ .text-gray-200 {
+ --tw-text-opacity: 1;
+ color: rgb(229 231 235 / var(--tw-text-opacity));
+ }
+
+ .hover\:underline:hover {
+ text-decoration-line: underline;
+ }
+ `)
+ })
+ })
+
+ it('should safelist based on a pattern regex', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^bg-(red)-(100|200)$/,
+ variants: ['hover'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .bg-red-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ }
+
+ .bg-red-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+
+ .hover\:bg-red-100:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ }
+
+ .hover\:bg-red-200:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+ `)
+ })
+ })
+
+ it('should not generate duplicates', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ 'uppercase',
+ {
+ pattern: /^bg-(red)-(100|200)$/,
+ variants: ['hover'],
+ },
+ {
+ pattern: /^bg-(red)-(100|200)$/,
+ variants: ['hover'],
+ },
+ {
+ pattern: /^bg-(red)-(100|200)$/,
+ variants: ['hover'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .bg-red-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ }
+
+ .bg-red-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+
+ .hover\:bg-red-100:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ }
+
+ .hover\:bg-red-200:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+ `)
+ })
+ })
+
+ it('should safelist when using a custom prefix', () => {
+ let config = {
+ prefix: 'tw-',
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^tw-bg-red-(100|200)$/g,
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .tw-bg-red-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ }
+
+ .tw-bg-red-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+
+ .tw-uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should not safelist when an empty list is provided', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should not safelist when an sparse/holey list is provided', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [, , ,],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should not safelist any invalid variants if provided', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^bg-(red)-(100|200)$/,
+ variants: ['foo', 'bar'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .bg-red-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ }
+ .bg-red-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should safelist negatives based on a pattern regex', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^-top-1$/,
+ variants: ['hover'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .-top-1 {
+ top: -0.25rem;
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+
+ .hover\:-top-1:hover {
+ top: -0.25rem;
+ }
+ `)
+ })
+ })
+
+ it('should safelist negatives based on a pattern regex', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^bg-red-(400|500)(\/(40|50))?$/,
+ variants: ['hover'],
+ },
+ {
+ pattern: /^(fill|ring|text)-red-200\/50$/,
+ variants: ['hover'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .bg-red-400 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+ }
+ .bg-red-400\/40 {
+ background-color: rgb(248 113 113 / 0.4);
+ }
+ .bg-red-400\/50 {
+ background-color: rgb(248 113 113 / 0.5);
+ }
+ .bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+ }
+ .bg-red-500\/40 {
+ background-color: rgb(239 68 68 / 0.4);
+ }
+ .bg-red-500\/50 {
+ background-color: rgb(239 68 68 / 0.5);
+ }
+ .fill-red-200\/50 {
+ fill: rgb(254 202 202 / 0.5);
+ }
+ .uppercase {
+ text-transform: uppercase;
+ }
+ .text-red-200\/50 {
+ color: rgb(254 202 202 / 0.5);
+ }
+ .ring-red-200\/50 {
+ --tw-ring-color: rgb(254 202 202 / 0.5);
+ }
+ .hover\:bg-red-400:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+ }
+ .hover\:bg-red-400\/40:hover {
+ background-color: rgb(248 113 113 / 0.4);
+ }
+ .hover\:bg-red-400\/50:hover {
+ background-color: rgb(248 113 113 / 0.5);
+ }
+ .hover\:bg-red-500:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+ }
+ .hover\:bg-red-500\/40:hover {
+ background-color: rgb(239 68 68 / 0.4);
+ }
+ .hover\:bg-red-500\/50:hover {
+ background-color: rgb(239 68 68 / 0.5);
+ }
+ .hover\:fill-red-200\/50:hover {
+ fill: rgb(254 202 202 / 0.5);
+ }
+ .hover\:text-red-200\/50:hover {
+ color: rgb(254 202 202 / 0.5);
+ }
+ .hover\:ring-red-200\/50:hover {
+ --tw-ring-color: rgb(254 202 202 / 0.5);
+ }
+ `)
+ })
+ })
+
+ it('should safelist pattern regex with !important selector', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [{ pattern: /^!grid-cols-(4|5|6)$/ }],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .\!grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+ }
+
+ .\!grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
+ }
+
+ .\!grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should safelist pattern regex with custom prefix along with !important selector', () => {
+ let config = {
+ prefix: 'tw-',
+ content: [{ raw: html`` }],
+ safelist: [{ pattern: /^!tw-grid-cols-(4|5|6)$/ }],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .\!tw-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+ }
+
+ .\!tw-grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
+ }
+
+ .\!tw-grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+ }
+
+ .tw-uppercase {
+ text-transform: uppercase;
+ }
+ `)
+ })
+ })
+
+ it('should safelist pattern regex having !important selector with variants', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^!bg-gray-(500|600|700|800)$/,
+ variants: ['hover'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .\!bg-gray-500 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
+ }
+
+ .\!bg-gray-600 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
+ }
+
+ .\!bg-gray-700 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
+ }
+
+ .\!bg-gray-800 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+
+ .hover\:\!bg-gray-500:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
+ }
+
+ .hover\:\!bg-gray-600:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
+ }
+
+ .hover\:\!bg-gray-700:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
+ }
+
+ .hover\:\!bg-gray-800:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
+ }
+ `)
+ })
+ })
+
+ it('should safelist multiple patterns with !important selector', () => {
+ let config = {
+ content: [{ raw: html`` }],
+ safelist: [
+ {
+ pattern: /^!text-gray-(700|800|900)$/,
+ variants: ['hover'],
+ },
+ {
+ pattern: /^!bg-gray-(200|300|400)$/,
+ variants: ['hover'],
+ },
+ ],
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchCss(css`
+ .\!bg-gray-200 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
+ }
+
+ .\!bg-gray-300 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
+ }
+
+ .\!bg-gray-400 {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
+ }
+
+ .uppercase {
+ text-transform: uppercase;
+ }
+
+ .\!text-gray-700 {
+ --tw-text-opacity: 1 !important;
+ color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
+ }
+
+ .\!text-gray-800 {
+ --tw-text-opacity: 1 !important;
+ color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
+ }
+
+ .\!text-gray-900 {
+ --tw-text-opacity: 1 !important;
+ color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+ }
+
+ .hover\:\!bg-gray-200:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
+ }
+
+ .hover\:\!bg-gray-300:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
+ }
+
+ .hover\:\!bg-gray-400:hover {
+ --tw-bg-opacity: 1 !important;
+ background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
+ }
+
+ .hover\:\!text-gray-700:hover {
+ --tw-text-opacity: 1 !important;
+ color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
+ }
+
+ .hover\:\!text-gray-800:hover {
+ --tw-text-opacity: 1 !important;
+ color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
+ }
+
+ .hover\:\!text-gray-900:hover {
+ --tw-text-opacity: 1 !important;
+ color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+ }
+ `)
+ })
})
})
diff --git a/tests/screenAtRule.test.js b/tests/screenAtRule.test.js
index 01071c526..8bda65c94 100644
--- a/tests/screenAtRule.test.js
+++ b/tests/screenAtRule.test.js
@@ -1,13 +1,15 @@
import postcss from 'postcss'
import plugin from '../src/lib/substituteScreenAtRules'
import config from '../stubs/defaultConfig.stub.js'
+import { crosscheck } from './util/run'
function run(input, opts = config) {
return postcss([plugin({ tailwindConfig: opts })]).process(input, { from: undefined })
}
-test('it can generate media queries from configured screen sizes', () => {
- const input = `
+crosscheck(() => {
+ test('it can generate media queries from configured screen sizes', () => {
+ const input = `
@screen sm {
.banana { color: yellow; }
}
@@ -19,7 +21,7 @@ test('it can generate media queries from configured screen sizes', () => {
}
`
- const output = `
+ const output = `
@media (min-width: 500px) {
.banana { color: yellow; }
}
@@ -31,17 +33,18 @@ test('it can generate media queries from configured screen sizes', () => {
}
`
- return run(input, {
- theme: {
- screens: {
- sm: '500px',
- md: '750px',
- lg: '1000px',
+ return run(input, {
+ theme: {
+ screens: {
+ sm: '500px',
+ md: '750px',
+ lg: '1000px',
+ },
},
- },
- separator: ':',
- }).then((result) => {
- expect(result.css).toMatchCss(output)
- expect(result.warnings().length).toBe(0)
+ separator: ':',
+ }).then((result) => {
+ expect(result.css).toMatchCss(output)
+ expect(result.warnings().length).toBe(0)
+ })
})
})
diff --git a/tests/shared-state.test.js b/tests/shared-state.test.js
index a3a9f2870..4791d07dc 100644
--- a/tests/shared-state.test.js
+++ b/tests/shared-state.test.js
@@ -1,20 +1,23 @@
import { resolveDebug } from '../src/lib/sharedState'
+import { crosscheck } from './util/run'
-it.each`
- value | expected
- ${'true'} | ${true}
- ${'1'} | ${true}
- ${'false'} | ${false}
- ${'0'} | ${false}
- ${'*'} | ${true}
- ${'tailwindcss'} | ${true}
- ${'tailwindcss:*'} | ${true}
- ${'other,tailwindcss'} | ${true}
- ${'other,tailwindcss:*'} | ${true}
- ${'other,-tailwindcss'} | ${false}
- ${'other,-tailwindcss:*'} | ${false}
- ${'-tailwindcss'} | ${false}
- ${'-tailwindcss:*'} | ${false}
-`('should resolve the debug ($value) flag correctly ($expected)', ({ value, expected }) => {
- expect(resolveDebug(value)).toBe(expected)
+crosscheck(() => {
+ it.each`
+ value | expected
+ ${'true'} | ${true}
+ ${'1'} | ${true}
+ ${'false'} | ${false}
+ ${'0'} | ${false}
+ ${'*'} | ${true}
+ ${'tailwindcss'} | ${true}
+ ${'tailwindcss:*'} | ${true}
+ ${'other,tailwindcss'} | ${true}
+ ${'other,tailwindcss:*'} | ${true}
+ ${'other,-tailwindcss'} | ${false}
+ ${'other,-tailwindcss:*'} | ${false}
+ ${'-tailwindcss'} | ${false}
+ ${'-tailwindcss:*'} | ${false}
+ `('should resolve the debug ($value) flag correctly ($expected)', ({ value, expected }) => {
+ expect(resolveDebug(value)).toBe(expected)
+ })
})
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
index 04892c5ce..39ce7555c 100644
--- a/tests/source-maps.test.js
+++ b/tests/source-maps.test.js
@@ -1,149 +1,517 @@
import postcss from 'postcss'
-import { runWithSourceMaps as run, html, css, map } from './util/run'
import { parseSourceMaps } from './util/source-maps'
+import { crosscheck, runWithSourceMaps as run, html, css, map } from './util/run'
-it('apply generates source maps', async () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- .with-declaration {
- background-color: red;
- @apply h-4 w-4 bg-green-500;
+crosscheck(() => {
+ it('apply generates source maps', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
}
- .with-comment {
- /* sourcemap will work here too */
- @apply h-4 w-4 bg-red-500;
- }
-
- .just-apply {
- @apply h-4 w-4 bg-black;
- }
- `
-
- let result = await run(input, config)
- let { sources, annotations } = parseSourceMaps(result)
-
- // All CSS generated by Tailwind CSS should be annotated with source maps
- // And always be able to point to the original source file
- expect(sources).not.toContain('ar-1/10
`,
+ },
+ ],
+ theme: {
+ extend: {
+ screens: {
+ 'ar-1/10': { raw: '(min-aspect-ratio: 1/10)' },
},
- })
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- @media (test) {
- .test\:foo {
- display: grid;
- }
- .test\:foo > * {
- grid-column: span 2;
- }
- }
- `)
-})
-
-test('variants with slashes in them work', () => {
- let config = {
- content: [
- {
- raw: html` ar-1/10
`,
- },
- ],
- theme: {
- extend: {
- screens: {
- 'ar-1/10': { raw: '(min-aspect-ratio: 1/10)' },
},
},
- },
- corePlugins: { preflight: false },
- }
+ 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-aspect-ratio: 1/10) {
- .ar-1\/10\:text-red-500 {
- --tw-text-opacity: 1;
- color: rgb(239 68 68 / var(--tw-text-opacity));
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-aspect-ratio: 1/10) {
+ .ar-1\/10\:text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgb(239 68 68 / var(--tw-text-opacity));
+ }
}
+ `)
+ })
+ })
+
+ test('variants with slashes suspport modifiers', () => {
+ let config = {
+ content: [
+ {
+ raw: html` ar-1/10
`,
+ },
+ ],
+ corePlugins: { preflight: false },
+ plugins: [
+ function ({ matchVariant }) {
+ matchVariant(
+ 'ar',
+ (value, { modifier }) => {
+ return [`@media (min-aspect-ratio: ${value}) and (foo: ${modifier})`]
+ },
+ { values: { '1/10': '1/10' } }
+ )
+ },
+ ],
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ @media (min-aspect-ratio: 1/10) and (foo: 20) {
+ .ar-1\/10\/20\:text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgb(239 68 68 / var(--tw-text-opacity));
+ }
+ }
+ `)
+ })
+ })
+
+ test('arbitrary variant selectors should not re-order scrollbar pseudo classes', async () => {
+ let config = {
+ content: [
+ {
+ raw: html`
+
+
+
+
+
+
+
+ `,
+ },
+ ],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ let result = await run(input, config)
+
+ expect(result.css).toMatchFormattedCss(css`
+ .\[\&\:\:-webkit-resizer\:hover\]\:underline::-webkit-resizer:hover {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:-webkit-scrollbar-button\:hover\]\:underline::-webkit-scrollbar-button:hover {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:-webkit-scrollbar-corner\:hover\]\:underline::-webkit-scrollbar-corner:hover {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:underline::-webkit-scrollbar-thumb:hover {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:-webkit-scrollbar-track-piece\:hover\]\:underline::-webkit-scrollbar-track-piece:hover {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:-webkit-scrollbar-track\:hover\]\:underline::-webkit-scrollbar-track:hover {
+ text-decoration-line: underline;
+ }
+ .\[\&\:\:-webkit-scrollbar\:hover\]\:underline::-webkit-scrollbar:hover {
+ text-decoration-line: underline;
}
`)
})
})
-
-test('variants with slashes suspport modifiers', () => {
- let config = {
- content: [
- {
- raw: html` ar-1/10
`,
- },
- ],
- corePlugins: { preflight: false },
- plugins: [
- function ({ matchVariant }) {
- matchVariant(
- 'ar',
- (value, { modifier }) => {
- return [`@media (min-aspect-ratio: ${value}) and (foo: ${modifier})`]
- },
- { values: { '1/10': '1/10' } }
- )
- },
- ],
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- @media (min-aspect-ratio: 1/10) and (foo: 20) {
- .ar-1\/10\/20\:text-red-500 {
- --tw-text-opacity: 1;
- color: rgb(239 68 68 / var(--tw-text-opacity));
- }
- }
- `)
- })
-})
-
-test('arbitrary variant selectors should not re-order scrollbar pseudo classes', async () => {
- let config = {
- content: [
- {
- raw: html`
-
-
-
-
-
-
-
- `,
- },
- ],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- let result = await run(input, config)
-
- expect(result.css).toMatchFormattedCss(css`
- .\[\&\:\:-webkit-resizer\:hover\]\:underline::-webkit-resizer:hover {
- text-decoration-line: underline;
- }
- .\[\&\:\:-webkit-scrollbar-button\:hover\]\:underline::-webkit-scrollbar-button:hover {
- text-decoration-line: underline;
- }
- .\[\&\:\:-webkit-scrollbar-corner\:hover\]\:underline::-webkit-scrollbar-corner:hover {
- text-decoration-line: underline;
- }
- .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:underline::-webkit-scrollbar-thumb:hover {
- text-decoration-line: underline;
- }
- .\[\&\:\:-webkit-scrollbar-track-piece\:hover\]\:underline::-webkit-scrollbar-track-piece:hover {
- text-decoration-line: underline;
- }
- .\[\&\:\:-webkit-scrollbar-track\:hover\]\:underline::-webkit-scrollbar-track:hover {
- text-decoration-line: underline;
- }
- .\[\&\:\:-webkit-scrollbar\:hover\]\:underline::-webkit-scrollbar:hover {
- text-decoration-line: underline;
- }
- `)
-})
diff --git a/tests/warnings.test.js b/tests/warnings.test.js
index 5e8a106a0..d288a282a 100644
--- a/tests/warnings.test.js
+++ b/tests/warnings.test.js
@@ -1,74 +1,76 @@
-import { html, run, css } from './util/run'
import log from '../src/util/log'
+import { crosscheck, run, html, css } from './util/run'
-let warn
+crosscheck(() => {
+ let warn
-beforeEach(() => {
- warn = jest.spyOn(log, 'warn')
-})
-
-afterEach(() => {
- warn.mockClear()
-})
-
-test('it warns when there is no content key', async () => {
- let config = {
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
- `
-
- await run(input, config)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
-})
-
-test('it warns when there is an empty content key', async () => {
- let config = {
- content: [],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind base;
- `
-
- await run(input, config)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
-})
-
-test('it warns when there are no utilities generated', async () => {
- let config = {
- content: [{ raw: html`nothing here matching a utility` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- await run(input, config)
-
- expect(warn).toHaveBeenCalledTimes(1)
- expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
-})
-
-it('warnings are not thrown when only variant utilities are generated', async () => {
- let config = {
- content: [{ raw: html`` }],
- corePlugins: { preflight: false },
- }
-
- let input = css`
- @tailwind utilities;
- `
-
- await run(input, config)
-
- expect(warn).toHaveBeenCalledTimes(0)
+ beforeEach(() => {
+ warn = jest.spyOn(log, 'warn')
+ })
+
+ afterEach(() => {
+ warn.mockClear()
+ })
+
+ test('it warns when there is no content key', async () => {
+ let config = {
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind base;
+ `
+
+ await run(input, config)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
+ })
+
+ test('it warns when there is an empty content key', async () => {
+ let config = {
+ content: [],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind base;
+ `
+
+ await run(input, config)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
+ })
+
+ test('it warns when there are no utilities generated', async () => {
+ let config = {
+ content: [{ raw: html`nothing here matching a utility` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ await run(input, config)
+
+ expect(warn).toHaveBeenCalledTimes(1)
+ expect(warn.mock.calls.map((x) => x[0])).toEqual(['content-problems'])
+ })
+
+ it('warnings are not thrown when only variant utilities are generated', async () => {
+ let config = {
+ content: [{ raw: html`` }],
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind utilities;
+ `
+
+ await run(input, config)
+
+ expect(warn).toHaveBeenCalledTimes(0)
+ })
})
diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js
index d543dfc6e..29d39c7aa 100644
--- a/tests/withAlphaVariable.test.js
+++ b/tests/withAlphaVariable.test.js
@@ -1,240 +1,243 @@
import withAlphaVariable from '../src/util/withAlphaVariable'
+import { crosscheck } from './util/run'
-test('it adds the right custom property', () => {
- expect(
- withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--tw-text-opacity' })
- ).toEqual({
- '--tw-text-opacity': '1',
- color: 'rgb(255 0 0 / var(--tw-text-opacity))',
- })
- expect(
- withAlphaVariable({
- color: 'hsl(240 100% 50%)',
- property: 'color',
- variable: '--tw-text-opacity',
+crosscheck(() => {
+ test('it adds the right custom property', () => {
+ expect(
+ withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--tw-text-opacity' })
+ ).toEqual({
+ '--tw-text-opacity': '1',
+ color: 'rgb(255 0 0 / var(--tw-text-opacity))',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'hsl(240 100% 50%)',
+ property: 'color',
+ variable: '--tw-text-opacity',
+ })
+ ).toEqual({
+ '--tw-text-opacity': '1',
+ color: 'hsl(240 100% 50% / var(--tw-text-opacity))',
+ })
+ })
+
+ test('it ignores colors that cannot be parsed', () => {
+ expect(
+ withAlphaVariable({
+ color: 'currentColor',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'currentColor',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgb(255, 0)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgb(255, 0)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgb(255)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgb(255)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgb(255, 0, 0, 255)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgb(255, 0, 0, 255)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgb(var(--color))',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgb(var(--color))',
+ })
+ })
+
+ test('it ignores colors that already have an alpha channel', () => {
+ expect(
+ withAlphaVariable({
+ color: '#ff0000ff',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': '#ff0000ff',
+ })
+ expect(
+ withAlphaVariable({
+ color: '#ff000080',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': '#ff000080',
+ })
+ expect(
+ withAlphaVariable({
+ color: '#f00a',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': '#f00a',
+ })
+ expect(
+ withAlphaVariable({
+ color: '#f00f',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': '#f00f',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgba(255, 255, 255, 1)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgba(255, 255, 255, 1)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgba(255, 255, 255, 0.5)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgba(255, 255, 255, 0.5)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgba(255 255 255 / 0.5)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'rgba(255 255 255 / 0.5)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'hsla(240, 100%, 50%, 1)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'hsla(240, 100%, 50%, 1)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'hsla(240, 100%, 50%, 0.5)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'hsla(240, 100%, 50%, 0.5)',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'hsl(240 100% 50% / 0.5)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ 'background-color': 'hsl(240 100% 50% / 0.5)',
+ })
+ })
+
+ test('it allows a closure to be passed', () => {
+ expect(
+ withAlphaVariable({
+ color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
+ })
+ expect(
+ withAlphaVariable({
+ color: ({ opacityValue }) => `rgba(0, 0, 0, ${opacityValue})`,
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
+ })
+ })
+
+ test('it transforms rgb and hsl to space-separated rgb and hsl', () => {
+ expect(
+ withAlphaVariable({
+ color: 'rgb(50, 50, 50)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'rgb(50 50 50)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'hsl(50, 50%, 50%)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))',
+ })
+ expect(
+ withAlphaVariable({
+ color: 'hsl(50 50% 50%)',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))',
+ })
+ })
+
+ test('it transforms named colors to rgb', () => {
+ expect(
+ withAlphaVariable({
+ color: 'red',
+ property: 'background-color',
+ variable: '--tw-bg-opacity',
+ })
+ ).toEqual({
+ '--tw-bg-opacity': '1',
+ 'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity))',
})
- ).toEqual({
- '--tw-text-opacity': '1',
- color: 'hsl(240 100% 50% / var(--tw-text-opacity))',
- })
-})
-
-test('it ignores colors that cannot be parsed', () => {
- expect(
- withAlphaVariable({
- color: 'currentColor',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'currentColor',
- })
- expect(
- withAlphaVariable({
- color: 'rgb(255, 0)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgb(255, 0)',
- })
- expect(
- withAlphaVariable({
- color: 'rgb(255)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgb(255)',
- })
- expect(
- withAlphaVariable({
- color: 'rgb(255, 0, 0, 255)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgb(255, 0, 0, 255)',
- })
- expect(
- withAlphaVariable({
- color: 'rgb(var(--color))',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgb(var(--color))',
- })
-})
-
-test('it ignores colors that already have an alpha channel', () => {
- expect(
- withAlphaVariable({
- color: '#ff0000ff',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': '#ff0000ff',
- })
- expect(
- withAlphaVariable({
- color: '#ff000080',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': '#ff000080',
- })
- expect(
- withAlphaVariable({
- color: '#f00a',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': '#f00a',
- })
- expect(
- withAlphaVariable({
- color: '#f00f',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': '#f00f',
- })
- expect(
- withAlphaVariable({
- color: 'rgba(255, 255, 255, 1)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgba(255, 255, 255, 1)',
- })
- expect(
- withAlphaVariable({
- color: 'rgba(255, 255, 255, 0.5)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgba(255, 255, 255, 0.5)',
- })
- expect(
- withAlphaVariable({
- color: 'rgba(255 255 255 / 0.5)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'rgba(255 255 255 / 0.5)',
- })
- expect(
- withAlphaVariable({
- color: 'hsla(240, 100%, 50%, 1)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'hsla(240, 100%, 50%, 1)',
- })
- expect(
- withAlphaVariable({
- color: 'hsla(240, 100%, 50%, 0.5)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'hsla(240, 100%, 50%, 0.5)',
- })
- expect(
- withAlphaVariable({
- color: 'hsl(240 100% 50% / 0.5)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- 'background-color': 'hsl(240 100% 50% / 0.5)',
- })
-})
-
-test('it allows a closure to be passed', () => {
- expect(
- withAlphaVariable({
- color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
- })
- expect(
- withAlphaVariable({
- color: ({ opacityValue }) => `rgba(0, 0, 0, ${opacityValue})`,
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
- })
-})
-
-test('it transforms rgb and hsl to space-separated rgb and hsl', () => {
- expect(
- withAlphaVariable({
- color: 'rgb(50, 50, 50)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))',
- })
- expect(
- withAlphaVariable({
- color: 'rgb(50 50 50)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))',
- })
- expect(
- withAlphaVariable({
- color: 'hsl(50, 50%, 50%)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))',
- })
- expect(
- withAlphaVariable({
- color: 'hsl(50 50% 50%)',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))',
- })
-})
-
-test('it transforms named colors to rgb', () => {
- expect(
- withAlphaVariable({
- color: 'red',
- property: 'background-color',
- variable: '--tw-bg-opacity',
- })
- ).toEqual({
- '--tw-bg-opacity': '1',
- 'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity))',
})
})