Feature: add Mantine support

[manazoid]

Is your feature request related to a problem? Please describe.
I have been using react ui kit called mantine.dev and it's hard to cut all variables with that setup

pluginPurgeCss({
    variables: true,
})

I losing all variables because it's using that syntax:

          <Button
            disabled={disabled}
            variant={'subtle'}
            mt={'xs'}
            type={'submit'}
          >
            Add
          </Button>

and like this

<Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
    Mantine
</Text>

Describe the solution you'd like
A single dependency that calculate all variables in final bundle like that:

    pluginPurgeCss({
      variables: true,
      content: ['dist/**/*.{js,css,html}', 'src/**/*.{js,jsx,ts,tsx,css,scss,sass}'],
      safelist: {
        standard: [
          /dark:/, // this is only for tailwind, not mantine
          /is\(\[data-mantine-color-scheme=dark\].*\)/, // this is only for tailwind, not mantine
        ],
        variables: [
          variablePattern() // this is for mantine 
        ],
      },
    })

Describe alternatives you've considered
I can import every style in component. It's too hard to see unused in build bundle

Additional context
I tried disable variables flag in options and have >50 kb css, but when I manually cut it and safelist variables for gradient (subtle does not working) - it's < 27 kb css

DevTools:

Following code find all color using for gradient text, but only for gradient, I need following preset for all variables that exists in mantine. Is it possible?

const fs = require('fs');
const glob = require('glob');

/* Regular expression for gradient search

for example we are looking at this code
gradient={{from:"pink",to:"yellow"}} // or gradient={{ to:"yellow", from:"pink", }}

but after vite build it would be minified to this code
gradient:{from:'pink',to:'yellow'}
 */
const gradientRegex =
  /gradient[:=]\s*{+\s*(from\s*:\s*['"]([^'"]*)['"]|to\s*:\s*['"]([^'"]*)['"]),\s*(from\s*:\s*['"]([^'"]*)['"]|to\s*:\s*['"]([^'"]*)['"])(.*)\s*}+/g;

// Set for storing Mantine variables
const mantineColorVariables = new Set();

// Function for file processing
// Get the list of files matching the template
const files = glob.sync('src/**/*.{js,jsx,ts,tsx}');
for (const file of files) {
  // Read the contents of the file
  const content = fs.readFileSync(file, 'utf-8');

  let match;
  // Look for matches with the regular expression
  while ((match = gradientRegex.exec(content)) !== null) {
    const color1 = match[2] || match[3]; // first color
    const color2 = match[6] || match[5]; // second color
    mantineColorVariables.add(color1);
    mantineColorVariables.add(color2);
  }
}

function createRegexFromParams(params) {
  if (!Array.isArray(params) || params.length === 0) return
  const escapedParams = params.map((param) => escapeRegExp(param));
  const colors = escapedParams.join('|')
  // filled is basic var utilises 8 for dark and 6 for light version of website. It's not hard coded, u can change theme
  return new RegExp(`--mantine-color-(${colors})-(8|6|filled)`);
}

// Function for escaping special characters in a string for use in a regular expression
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Shielding special characters
}

const mantineColorVariablesRegexp = () => createRegexFromParams(Array.from(mantineColorVariables))
// Export result regexp
module.exports = {
  mantineColorVariablesRegexp, // if found pink and yellow you got `/--mantine-color-(pink|yellow)-(8|6|filled)/`
};