53 行
2.2 KiB
JavaScript
53 行
2.2 KiB
JavaScript
import postcss from 'postcss'
|
|
import tailwindcss from 'tailwindcss'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { inlineBreakpoints } from './postcss.config.js'
|
|
|
|
describe ('inline breakpoints', () => {
|
|
it ('uses height for vertical menus and width for horizontal menus', async () => {
|
|
const source = `
|
|
@media (min-width: 768px) { .menu, .account { display: flex } }
|
|
@media (min-width: 1024px) { .menu { font-size: 1rem } }
|
|
@media (max-width: 767px) { .mobile { display: block } }
|
|
@media (prefers-reduced-motion: reduce) { .menu { transition: none } }
|
|
`
|
|
const { css } = await postcss ([inlineBreakpoints]).process (
|
|
source, { from: 'menus.css' })
|
|
const rules = []
|
|
postcss.parse (css).walkRules (rule => {
|
|
rules.push ([rule.parent.params, rule.selector])
|
|
})
|
|
|
|
expect (rules).toEqual ([
|
|
['(min-width: 768px)',
|
|
':where(html:not(:lang(mn-Mong))) .menu, '
|
|
+ ':where(html:not(:lang(mn-Mong))) .account'],
|
|
['(min-height: 768px)',
|
|
':where(html:lang(mn-Mong)) .menu, :where(html:lang(mn-Mong)) .account'],
|
|
['(min-width: 1024px)', ':where(html:not(:lang(mn-Mong))) .menu'],
|
|
['(min-height: 1024px)', ':where(html:lang(mn-Mong)) .menu'],
|
|
['(max-width: 767px)', ':where(html:not(:lang(mn-Mong))) .mobile'],
|
|
['(max-height: 767px)', ':where(html:lang(mn-Mong)) .mobile'],
|
|
['(prefers-reduced-motion: reduce)', '.menu']])
|
|
})
|
|
|
|
it ('includes responsive utilities generated by Tailwind', async () => {
|
|
const { css } = await postcss ([tailwindcss ({
|
|
content: [{ raw: '<div class="md:hidden lg:text-base"></div>' }],
|
|
corePlugins: { preflight: false } }), inlineBreakpoints]).process (
|
|
'@tailwind utilities;', { from: 'utilities.css' })
|
|
const rules = []
|
|
postcss.parse (css).walkRules (rule => {
|
|
rules.push ([rule.parent.params, rule.selector])
|
|
})
|
|
|
|
expect (rules).toContainEqual ([
|
|
'(min-width: 768px)', ':where(html:not(:lang(mn-Mong))) .md\\:hidden'])
|
|
expect (rules).toContainEqual ([
|
|
'(min-height: 768px)', ':where(html:lang(mn-Mong)) .md\\:hidden'])
|
|
expect (rules).toContainEqual ([
|
|
'(min-height: 1024px)', ':where(html:lang(mn-Mong)) .lg\\:text-base'])
|
|
})
|
|
})
|