Add color opacity for safelist with regex

[mrinx]

The pattern-based safelisting currently doesn't support colors with opacity (#6770).

This pull request is trying to solve that by adding opacities option in addition to variants.

[adamwathan]

Hey! I think this is a good idea in principle and it's something we talked about before the v3 launch but ultimately decided to skip it because it felt like the API was getting a bit messy and we couldn't decide on a good name for the option.

Thinking about it more though I had this idea for supporting this that I think I like a lot better:

safelist: [
  {
    pattern: [['hover'], /bg-(red)-(100|200)/, ['50']]
  },
],

Basically a tuple where the positions of the different "parts" map to the utility classes using the same overall shape. Then we could deprecate the variants option as well, and maybe even deprecate this entire object syntax thing and just support doing this at the top-level:

safelist: [
  'bg-black',
  /pt-.+/,
  [['hover', 'focus'], /bg-(red)-(100|200)/].
  [['hover', 'focus'], /bg-(blue)-(100|200)/, ['50', '75]],
],

I'm going to close this as I don't want to move forward with this approach and would rather try something like what I've outlined above (while keeping support for what's there currently just for backwards compatibility).

If you wanted to work on a PR for something like what I've described I'd be happy to look at that again but of course no pressure, up to you!

Thanks for the PR regardless, appreciate the contribution and sorry to say no ❤️

[mrinx]

Hey! Thank you for the feedback and suggestions, no hard feelings :)

I'll give the PR you outlined a try 🙂