123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- import { run, html, css, defaults } from './util/run'
- it('should be possible to use the darkMode "class" mode', () => {
- let config = {
- darkMode: 'class',
- content: [{ raw: html`<div class="dark:font-bold"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults}
- .dark .dark\:font-bold {
- font-weight: 700;
- }
- `)
- })
- })
- it('should be possible to change the class name', () => {
- let config = {
- darkMode: ['class', '.test-dark'],
- content: [{ raw: html`<div class="dark:font-bold"></div>` }],
- corePlugins: { preflight: false },
- }
- let input = css`
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- ${defaults}
- .test-dark .dark\:font-bold {
- font-weight: 700;
- }
- `)
- })
- })
- it('should be possible to use the darkMode "media" mode', () => {
- let config = {
- darkMode: 'media',
- content: [{ raw: html`<div class="dark:font-bold"></div>` }],
- 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-color-scheme: dark) {
- .dark\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- it('should default to the `media` mode when no mode is provided', () => {
- let config = {
- content: [{ raw: html`<div class="dark:font-bold"></div>` }],
- 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-color-scheme: dark) {
- .dark\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
- it('should default to the `media` mode when mode is set to `false`', () => {
- let config = {
- darkMode: false,
- content: [{ raw: html`<div class="dark:font-bold"></div>` }],
- 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-color-scheme: dark) {
- .dark\:font-bold {
- font-weight: 700;
- }
- }
- `)
- })
- })
|