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 ()],
}