AI: address review on PR #475

frontend/postcss.config.test.js

@@ -0,0 +1,52 @@
+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'])
+  })
+})