How to use regex in safelist?

[shiftgeist]

TL;DR: Is there another way to use safelist or is it currently limited to strings?

---

I looked up the purgecss options and found:

type UserDefinedSafelist = StringRegExpArray | ComplexSafelist;

StringRegExpArray beeing Array<RegExp | string> i tried this configuration option:

{
  config: 'tailwind.config.js',
  safelist: [/.+-testing-.+/],
}

HTML:

<div class="bg-testing-colors">hello world</div>

Tailwind config:

module.exports = {
    theme: {
        extend: {
            colors: {
                'testing-colors': 'green',
            }
        }
    }
}

This however throws an error:

Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): TypeError: i.split is not a function
    at /home/fhungenberg/apps/hosting.de/assets/css/shared/alert.css:2:5
    at /home/fhungenberg/apps/hosting.de/node_modules/.pnpm/@windicss/[email protected]/node_modules/@windicss/plugin-utils/dist/index.js:391:92
    at Array.flatMap (<anonymous>)
    at resolveOptions (/home/fhungenberg/apps/hosting.de/node_modules/.pnpm/@windicss/[email protected]/node_modules/@windicss/plugin-utils/dist/index.js:391:75)
    at async init (/home/fhungenberg/apps/hosting.de/node_modules/.pnpm/@windicss/[email protected]/node_modules/@windicss/plugin-utils/dist/index.js:514:15)
    at async Object.ensureInit (/home/fhungenberg/apps/hosting.de/node_modules/.pnpm/@windicss/[email protected]/node_modules/@windicss/plugin-utils/dist/index.js:523:14)
    at async AtRule (/home/fhungenberg/apps/hosting.de/node_modules/.pnpm/[email protected][email protected]/node_modules/postcss-windicss/dist/index.js:113:9)
    at async LazyResult.runAsync (/home/fhungenberg/apps/hosting.de/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:375:15)
    at async Promise.all (index 0) {
  postcssNode: <ref *1> AtRule {
    raws: { before: '\n    ', between: '', afterName: ' ' },
    type: 'atrule',
    name: 'apply',
    parent: Rule {
      raws: [Object],
      type: 'rule',
      nodes: [Array],
      parent: [Root],
      source: [Object],
      selector: '.alert',
      lastEach: 2,
      indexes: [Object],
      [Symbol(isClean)]: true
    },
    source: { start: [Object], input: [Input], end: [Object] },
    params: 'inline-block px-3 py-2 bg-white rounded',
    proxyCache: [Circular *1],
    [Symbol(isClean)]: true
  }
}

Only way I could think of is to place the regex in strings ('/.+-testing-.+/'), but no luck here.

Also tried '/.*-testing-.*/', '/.*\-testing\-.*/', '/-testing-/', '/\-testing\-/'.

The safelist is currently merged with this line (resolveOptions.ts#L113):

const safelist = new Set(mergeArrays(config.safelist, options.safelist).flatMap(i => i.split(' ')))

---

Environment

windicss: 2.5.11
postcss-windicss: 0.0.3

[antfu]

The story of PurgeCSS and on-demand-based are different, since it's on-demand, we actually have infinite many possibilities of classes. So regex can't work well with this in terms of safelist (might work for blocklist tho).

For now, I'd suggest using a function to generate the combinations you think you are going to use https://github.com/windicss/vite-plugin-windicss#safelist