Tailwind plugin adding variants for phx loading events

tailwind-phx-live.plugin.js

const _ = require('lodash');
const plugin = require('tailwindcss/plugin');

module.exports = plugin(({ addVariant, theme, e }) => {
  const events = theme('phxLive.events', []);

  _.forEach(events, (event) => {
    addVariant(`phx-${event}-loading`, ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.${e(`phx-${event}-loading`)}.${e(`${event}-loading${separator}${className}`)}`;
      })
    });
    addVariant(`phx-${event}-loading-group`, ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.${e(`phx-${event}-loading`)} .${e(`${event}-loading${separator}${className}`)}`;
      })
    });
  })
}, {
  theme: {
    phxLive: {
      events: [
        'click',
        'change',
        'submit',
        'focus',
        'blur',
        'keydown',
        'keyup'
      ]
    }
  }
});