mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
d497777202
* WIP * WIP * Finish combining JIT and AOT plugins Still lots of clean up that can be done in some of the more complex ones, but at least it's one file per plugin now. * Remove unused import * Fix AOT generation bugs * Move corePlugins/index.js to corePlugins.js * Convert JIT files to ESM * Move tests * Reorder core plugins to match JIT order * Update AOT apply tests * Unify utils * Combine plugin lists to one single source of truth * Finish resolving merge conflicts, fix tests Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
132 lines
3.2 KiB
JavaScript
132 lines
3.2 KiB
JavaScript
import postcss from 'postcss'
|
|
import processPlugins from '../../src/util/processPlugins'
|
|
import plugin from '../../src/plugins/animation'
|
|
|
|
function css(nodes) {
|
|
return postcss.root({ nodes }).toString()
|
|
}
|
|
|
|
test('defining animation and keyframes', () => {
|
|
const config = {
|
|
theme: {
|
|
animation: {
|
|
none: 'none',
|
|
spin: 'spin 1s linear infinite',
|
|
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
spin: { to: { transform: 'rotate(360deg)' } },
|
|
ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
|
|
},
|
|
},
|
|
variants: {
|
|
animation: [],
|
|
},
|
|
}
|
|
|
|
const { utilities } = processPlugins([plugin()], config)
|
|
|
|
expect(css(utilities)).toMatchCss(`
|
|
@layer utilities {
|
|
@variants {
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes ping {
|
|
75%, 100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
@variants {
|
|
.animate-none { animation: none; }
|
|
.animate-spin { animation: spin 1s linear infinite; }
|
|
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
|
|
test('defining animation and keyframes with prefix', () => {
|
|
const config = {
|
|
prefix: 'tw-',
|
|
theme: {
|
|
animation: {
|
|
none: 'none',
|
|
spin: 'spin 1s linear infinite',
|
|
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
spin: { to: { transform: 'rotate(360deg)' } },
|
|
ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
|
|
},
|
|
},
|
|
variants: {
|
|
animation: [],
|
|
},
|
|
}
|
|
|
|
const { utilities } = processPlugins([plugin()], config)
|
|
|
|
expect(css(utilities)).toMatchCss(`
|
|
@layer utilities {
|
|
@variants {
|
|
@keyframes tw-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes tw-ping {
|
|
75%, 100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
@variants {
|
|
.tw-animate-none { animation: none; }
|
|
.tw-animate-spin { animation: tw-spin 1s linear infinite; }
|
|
.tw-animate-ping { animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
|
|
test('defining animation and keyframes with prefix (skip undefined animations)', () => {
|
|
const config = {
|
|
prefix: 'tw-',
|
|
theme: {
|
|
animation: {
|
|
none: 'none',
|
|
spin: 'spin 1s linear infinite',
|
|
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
spin: { to: { transform: 'rotate(360deg)' } },
|
|
},
|
|
},
|
|
variants: {
|
|
animation: [],
|
|
},
|
|
}
|
|
|
|
const { utilities } = processPlugins([plugin()], config)
|
|
|
|
expect(css(utilities)).toMatchCss(`
|
|
@layer utilities {
|
|
@variants {
|
|
@keyframes tw-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
@variants {
|
|
.tw-animate-none { animation: none; }
|
|
.tw-animate-spin { animation: tw-spin 1s linear infinite; }
|
|
.tw-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
|
|
}
|
|
}
|
|
`)
|
|
})
|