about dynamic attributify mode

Hello guys,

I have a class need to use attributify mode,

pos="!fixed" it’s working

pos={isSideFixed ? '!fixed' : 'relative'} it’s not working

How do I get the corresponding css generated in advance? using the safelist ?

[sibbng]

@Handpear I made a PR to fix this issue: #1921

In the meantime, you could use this roughly written extractor:

Test it in playground

export default defineConfig({
  extractors: [{
  name: 'ternary-extractor',
  extract(ctx) {
    let s = ctx.code
    const results = []
    const re = /<[\w.]+[^>]*?:?(?:([\w-]+)=[{'"](.+?(?:.)*?\?+(?:.)*?(?:['"]([^'"]+)['"]?(?:.)*?:(?:.)*?['"]([^'"]+)['"]?))[}'"](?:.)*?)+/gms
    let match
    while (match = re.exec(s)) {
      s = s.replace(match[2], '')
      re.lastIndex = 0
      const attr = match[1]
      if(attr === 'class' || attr === 'className') continue
      const left = match[3]
      left.split(' ').forEach(i => results.push(`[${attr}~="${i}"]`))
      const right = match[4]
      right.split(' ').forEach(i => results.push(`[${attr}~="${i}"]`))
      console.log(results)
    }
    return results
  },
}],

[Handpear]

@sibbng Thank you