escape colons (tailwind plugin)

[saraMElsanan]

I know it's not an issue in Tailwind , but I really need help
I'm new to Tailwind plugins , I made a plugin to custom the scollbar using theme colors , any way
my problem is the ::-webkit-scrollbar-thumb
[.${e(scrollbar-thumb-${element.name}\:\:-webkit-scrollbar-thumb)}]: { 'background': element.color, }

with or with out the escape char , I still get this result
'.scrollbar-track-teal-200\\:\\:-webkit-scrollbar-track': { background: '#b2f5ea' }
I just want to remove these backslashes , Also I know If I cut ::-webkit-scrollbar-thumb and paste it out side ${e()} It will work perfectly but I will Loose the privilege of using variants option
variants: ['responsive', 'hover']
Can You HELP me

[adamwathan]

You want to write it like this so the pseudo-element is not escaped:

return {
  [`.${e(`scrollbar-thumb-${element.name})}::-webkit-scrollbar-thumb`]: {
    background: element.color
  }
};

You should still be able to use variants with it, that's how our placeholder color plugin is written and it works with variants:

https://github.com/tailwindcss/tailwindcss/blob/master/src/plugins/placeholderColor.js