Custom variant has invalid format string

[cossssmin]

I register this variant in the tailwindcss-email-variants plugin:

const get = require('lodash.get')
const plugin = require('tailwindcss/plugin')

module.exports = plugin.withOptions(
  function (options) {
    addVariant('outlook-web', ctx => {
      const foo = get(ctx.container.nodes[0], 'raws.tailwind.classCandidate', '&')
      return `[class~="x_outlook-web\\:${foo}"]`
    })
  }
)

So that for example outlook-web:hidden would result in this selector: [class~="x_outlook-web\:hidden"]

Worked fine with 3.0.x, but now with latest 3.1.x I'm getting this error:

Your custom variant `outlook-web` has an invalid format string. Make sure it's an at-rule or contains a `&` placeholder.

You may see the (now failing) test here:

Test: https://github.com/maizzle/tailwindcss-email-variants/blob/a2998eabc2cf47dde3768993f2138a36790b8ca2/src/index.test.js#L114-L126

CI run: https://github.com/maizzle/tailwindcss-email-variants/runs/6900405408?check_suite_focus=true

The plugin also offers the ability to register your own variants, that you may pass as an options object, so this is also failing now:

https://github.com/maizzle/tailwindcss-email-variants/blob/a2998eabc2cf47dde3768993f2138a36790b8ca2/src/index.test.js#L156-L165

Is there any way to get those working again?

[huyenltnguyen]

Would it work if you add a & prefix to the class?

module.exports = plugin.withOptions(
  function (options) {
    addVariant('outlook-web', ctx => {
      const foo = get(ctx.container.nodes[0], 'raws.tailwind.classCandidate', '&')
-      return `[class~="x_outlook-web\\:${foo}"]`
+      return `[class~="[&x_outlook-web\\]:${foo}"]` 
    })
  }
)

[cossssmin]

No because that'd output [class~=".outlook-web\:hiddenx_outlook-web\:hidden"].

Closest I could get was [class~="x_&"], but that still outputs the dot i.e. [class~="x_.outlook-web\:hidden"]

[cossssmin]

And that still doesn't solve the user-defined variants that I was registering with:

// User-defined variants
Object.keys(userVariants).forEach(key => {
  addVariant(key, userVariants[key])
})