postcss-focus/index.js

PostCSS plugin to add :focus-visible selector to every :hover for keyboard accessibility

function hasAlready(parent, selector) {
  return parent.some(i => {
    return i.type === 'rule' && i.selectors.includes(selector)
  })
}

module.exports = (opts = {}) => {
  let pseudoClass = opts.oldFocus ? ':focus' : ':focus-visible'

  return {
    postcssPlugin: 'postcss-focus',
    Rule: rule => {
      if (rule.selector.includes(':hover')) {
        let focuses = []
        for (let selector of rule.selectors) {
          if (selector.includes(':hover')) {
            let replaced = selector.replace(/:hover/g, pseudoClass)
            if (!hasAlready(rule.parent, replaced)) {
              focuses.push(replaced)
            }
          }
        }
        if (focuses.length) {
          if (opts.splitRules === false) {
            rule.selectors = rule.selectors.concat(focuses)
          } else {
            let clone = rule.cloneAfter()
            clone.selectors = focuses
          }
        }
      }
    }
  }
}
module.exports.postcss = true