about dynamic attributify mode

[pawover]

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 ?

[zyyv]

I don't think it's a problem, UnoCSS will extract fixed and relative.
Playground

Of course you can use safelist, you don't have to worry about this problem.

[antfu]

We temporarily close this due to the lack of enough information.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required

[pawover]

fixed and relative has extracted but not working like other attributify

minimal reproduction

[pawover]

It doesn't seem to be antd5 problem either

[pawover]

@zyyv

[zyyv]

This does not affect anything, because unocss is a static analysis, and extracts the token to generate css.

[pawover]

I don't understand how this could be invalid, it's working in windicss..

[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
  },
}],

[pawover]

@sibbng Thank you