Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dark mode variant #2279

Merged
merged 4 commits into from Sep 1, 2020
Merged

Add dark mode variant #2279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c7fbaf
Initial dark mode prototype
adamwathan Aug 31, 2020
89d03c7
Isolate dark mode logic to config extension
adamwathan Sep 1, 2020
8e2fbf3
Update fixtures
adamwathan Sep 1, 2020
b4ee918
Fix lint warnings
adamwathan Sep 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
240 changes: 240 additions & 0 deletions __tests__/darkMode.test.js
View file
Open in desktop
@@ -0,0 +1,240 @@
import postcss from 'postcss'
import tailwind from '../src/index'

function run(input, config = {}) {
return postcss([tailwind({ experimental: { darkModeVariant: true }, ...config })]).process(
input,
{ from: undefined }
)
}

test('dark mode variants cannot be generated without enabling the dark mode experiment', () => {
const input = `
@variants dark {
.text-red {
color: red;
}
}
`

expect.assertions(1)
return expect(run(input, { experimental: {} })).rejects.toThrow()
})

test('generating dark mode variants uses the media strategy by default', () => {
const input = `
@variants dark {
.text-red {
color: red;
}
}
`

const expected = `
.text-red {
color: red;
}
@media (prefers-color-scheme: dark) {
.dark\\:text-red {
color: red;
}
}
`

expect.assertions(2)

return run(input).then(result => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
})

test('dark mode variants can be generated using the class strategy', () => {
const input = `
@variants dark {
.text-red {
color: red;
}
}
`

const expected = `
.text-red {
color: red;
}
.dark .dark\\:text-red {
color: red;
}
`

expect.assertions(2)

return run(input, { dark: 'class' }).then(result => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
})

test('dark mode variants stack with other variants', () => {
const input = `
@variants responsive, dark, hover, focus {
.text-red {
color: red;
}
}
`

const expected = `
.text-red {
color: red;
}
.hover\\:text-red:hover {
color: red;
}
.focus\\:text-red:focus {
color: red;
}
@media (prefers-color-scheme: dark) {
.dark\\:text-red {
color: red;
}
.dark\\:hover\\:text-red:hover {
color: red;
}
.dark\\:focus\\:text-red:focus {
color: red;
}
}
@media (min-width: 500px) {
.sm\\:text-red {
color: red;
}
.sm\\:hover\\:text-red:hover {
color: red;
}
.sm\\:focus\\:text-red:focus {
color: red;
}
@media (prefers-color-scheme: dark) {
.sm\\:dark\\:text-red {
color: red;
}
.sm\\:dark\\:hover\\:text-red:hover {
color: red;
}
.sm\\:dark\\:focus\\:text-red:focus {
color: red;
}
}
}
@media (min-width: 800px) {
.lg\\:text-red {
color: red;
}
.lg\\:hover\\:text-red:hover {
color: red;
}
.lg\\:focus\\:text-red:focus {
color: red;
}
@media (prefers-color-scheme: dark) {
.lg\\:dark\\:text-red {
color: red;
}
.lg\\:dark\\:hover\\:text-red:hover {
color: red;
}
.lg\\:dark\\:focus\\:text-red:focus {
color: red;
}
}
}
`

expect.assertions(2)

return run(input, { theme: { screens: { sm: '500px', lg: '800px' } } }).then(result => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
})

test('dark mode variants stack with other variants when using the class strategy', () => {
const input = `
@variants responsive, dark, hover, focus {
.text-red {
color: red;
}
}
`

const expected = `
.text-red {
color: red;
}
.hover\\:text-red:hover {
color: red;
}
.focus\\:text-red:focus {
color: red;
}
.dark .dark\\:text-red {
color: red;
}
.dark .dark\\:hover\\:text-red:hover {
color: red;
}
.dark .dark\\:focus\\:text-red:focus {
color: red;
}
@media (min-width: 500px) {
.sm\\:text-red {
color: red;
}
.sm\\:hover\\:text-red:hover {
color: red;
}
.sm\\:focus\\:text-red:focus {
color: red;
}
.dark .sm\\:dark\\:text-red {
color: red;
}
.dark .sm\\:dark\\:hover\\:text-red:hover {
color: red;
}
.dark .sm\\:dark\\:focus\\:text-red:focus {
color: red;
}
}
@media (min-width: 800px) {
.lg\\:text-red {
color: red;
}
.lg\\:hover\\:text-red:hover {
color: red;
}
.lg\\:focus\\:text-red:focus {
color: red;
}
.dark .lg\\:dark\\:text-red {
color: red;
}
.dark .lg\\:dark\\:hover\\:text-red:hover {
color: red;
}
.dark .lg\\:dark\\:focus\\:text-red:focus {
color: red;
}
}
`

expect.assertions(2)

return run(input, { dark: 'class', theme: { screens: { sm: '500px', lg: '800px' } } }).then(
result => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
}
)
})