Styles not applied since 0.51.6 (#2529) with Attributify enabled

[mwohlan]

UnoCSS version

0.51.12

Describe the bug

Since 0.51.6, specifically #2529, attributify styles are not being applied for some reason. The attributes are there:

But only some styles are being applied:

Downgrading to 0.51.5 works and afaik I am not using ternaries mentioned in #2529

Reproduction

I was not able to provide a minimal reproduction as of now. My current project is quite big and not open source. But maybe through some discussion and help I can get there

System Info

• Operating System: Linux
• Node Version: v18.15.0
• Nuxt Version: 3.5.0-28066965.d077c10c
• Nitro Version: 2.5.0-28064672.742dc3f
• Package Manager: pnpm@7.17.0
• Builder: vite
• User Config: modules, imports, build, fontMetrics, ssr, experimental, nitro, routeRules, unocss, typescript, headlessui, css, runtimeConfig, supabase, app
• Runtime Modules: @vueuse/nuxt@10.1.2, @unocss/nuxt@0.51.12, @pinia/nuxt@0.4.10, @nuxtjs/supabase@0.3.5, nuxt-headlessui@1.1.4, @nuxtjs/fontaine@0.2.5, @nuxt/devtools@0.4.6-28063770.3b99477
• Build Modules: -

Unocss config

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
        mulish: {
          name: 'Mulish',
          weights: [200, 300, 400, 500, 600, 700, 800, 900],
        },
        inter: {
          name: 'Inter',
          weights: [200, 300, 400, 500, 600, 700, 800, 900],
        },
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[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

[mwohlan]

Coming back to this. Feel free to close it again right away, but I dont really know how I can solve this issue for my project. Looking at the inspector with 0.52.7, styles are definitely being generated as before.

They are just not being applied. When turning off attributify with 0.52.7, all styles that are written within the class attribute are being applied.

When reverting the fix #2529 (while still using 0.52.7)

All the styles are working again. Pretty sure I am not using ternaries with attributify. And even then It shouldn't break everything, right ? Maybe there is something else in the regex that breaks the styles completely in some edge case.

A solution would be to refactor from attributify to class only. But maybe someone has an idea on how to look into this.

[mwohlan]

@antfu : Reproduction: Stackblitz

I found the cause. The :display-value prop is matched by unocss and it breaks the entire css of the project silently. Is this behavior as expected since it kind of is a ternary expression ? But I still would prefer an error message of some sort.