AI: address review on PR #475

frontend/postcss.config.js

@@ -1,6 +1,29 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+import autoprefixer from 'autoprefixer'
+import tailwindcss from 'tailwindcss'
+
+// Apply the same breakpoints to handwritten CSS and Tailwind utilities.
+export const inlineBreakpoints = {
+  postcssPlugin: 'inline-breakpoints',
+  OnceExit (root) {
+    const queries = []
+    root.walkAtRules ('media', query => {
+      if (/\b(?:min|max)-width\s*:/.test (query.params))
+        queries.push (query)
+    })
+    for (const query of queries) {
+      const vertical = query.cloneAfter ({
+        params: query.params.replace (/\b(min|max)-width(?=\s*:)/g, '$1-height') })
+      for (const [branch, scope] of [
+          [query, ':where(html:not(:lang(mn-Mong)))'],
+          [vertical, ':where(html:lang(mn-Mong))']]) {
+        branch.walkRules (rule => {
+          rule.selectors = rule.selectors.map (selector => `${scope} ${selector}`)
+        })
+      }
+    }
   },
 }
+
+export default {
+  plugins: [tailwindcss (), inlineBreakpoints, autoprefixer ()],
+}