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

Disable dark mode by default, rename config option to darkMode #2631

Merged
merged 2 commits into from Oct 21, 2020
Merged

Disable dark mode by default, rename config option to darkMode #2631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
687264a
Disable dark mode by default, rename config option to `darkMode`
adamwathan Oct 21, 2020
8e93eaa
Rebuild fixtures
adamwathan Oct 21, 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
43 changes: 34 additions & 9 deletions __tests__/darkMode.test.js
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ test('user-defined dark mode variants do not stack', () => {
})
})

test('generating dark mode variants uses the media strategy by default', () => {
test('dark mode variants can be generated using the class strategy', () => {
const input = `
@variants dark {
.text-red {
Expand All @@ -67,7 +67,7 @@ test('generating dark mode variants uses the media strategy by default', () => {

expect.assertions(2)

return run(input).then((result) => {
return run(input, { darkMode: 'media' }).then((result) => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
Expand Down Expand Up @@ -95,7 +95,7 @@ test('dark mode variants can be generated even when the user has their own plugi

expect.assertions(2)

return run(input, { plugins: [] }).then((result) => {
return run(input, { darkMode: 'media', plugins: [] }).then((result) => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
Expand All @@ -121,7 +121,7 @@ test('dark mode variants can be generated using the class strategy', () => {

expect.assertions(2)

return run(input, { dark: 'class' }).then((result) => {
return run(input, { darkMode: 'class' }).then((result) => {
expect(result.css).toMatchCss(expected)
expect(result.warnings().length).toBe(0)
})
Expand Down Expand Up @@ -150,6 +150,29 @@ test('dark mode variants can be disabled', () => {
})
})

test('dark mode variants are disabled by default', () => {
const input = `
@variants dark {
.text-red {
color: red;
}
}
`

const expected = `
.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 stack with other variants', () => {
const input = `
@variants responsive, dark, hover, focus {
Expand Down Expand Up @@ -228,10 +251,12 @@ test('dark mode variants stack with other variants', () => {

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)
})
return run(input, { darkMode: 'media', 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', () => {
Expand Down Expand Up @@ -324,7 +349,7 @@ test('dark mode variants stack with other variants when using the class strategy

expect.assertions(2)

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