@quid/postcss-what-input/index.js

A PostCSS plugin used to make it easy to interact with the npm module "what-input".

// This plugin works together with the what-input module
// it allows to use the `:focus-keyboard` pseudo-selector to style an element
// only when focused by keyboard action and not when focused using mouse
// It will convert `foo:focus-keyboard` to `[data-whatinput="keyboard"] foo:focus`
const postcss = require('postcss');

module.exports = postcss.plugin('postcss-what-input', () => (css) => {
  css.walkRules((rule) => {
    if (rule.selector.indexOf(':focus-keyboard') !== -1) {
      rule.selectors = rule.selectors.map((selector) => {
        if (selector.indexOf(':focus-keyboard') !== -1) {
          return `[data-whatinput="keyboard"] ${selector.replace(':focus-keyboard', ':focus')}`;
        }
        return selector;
      });
    }

    if (rule.selector.indexOf(':focus-mouse') !== -1) {
      rule.selectors = rule.selectors.map((selector) => {
        if (selector.indexOf(':focus-mouse') !== -1) {
          return `[data-whatinput="initial"] ${selector.replace(':focus-mouse', ':focus')}, [data-whatinput="mouse"] ${selector.replace(':focus-mouse', ':focus')}`;
        }
        return selector;
      });
    }
  });
});