Negative classes not matched by pattern safelisting #6476
Description
What version of Tailwind CSS are you using?
v3.0.2
What build tool (or framework if it abstracts the build tool) are you using?
postcss-cli 9.1.0
What version of Node.js are you using?
v14.16.1
What browser are you using?
n/a
What operating system are you using?
Windows 10
Reproduction URL
n/a
Describe your issue
Pattern safelisting, introduced in #5511, allows you to use regular expressions to match classes to whitelist. E.g. an overly simple regex to match the "top-1" class:
{
pattern: /^top-1$/,
}
This will produce a css file with the "top-1" class, as expected. However, I cannot get this to work with negative values.
{
pattern: /^-top-1$/,
}
This should produce a css file with the "-top-1" class, but this class is not in the resulting css file. It works fine, however, when not using pattern safelisting:
safelist: [
"-top-1",
{
pattern: /-top-2/,
}
]
The above produces a css file with the "-top-1" class, but not the "-top-2" class.
I wondered if it could be a variant, but the documentation for variants is particularly sparse so I also tried the below with no success.
{
pattern: /^top-1$/,
variants: ['-'],
}
{
pattern: /^top-1$/,
variants: ['negative'],
}