Adding an empty style throws error

[sharifzadesina]

Environment

Doesn't matter.

Reproduction

useHead({
  bodyAttrs: {
    style: ''
  }
});

Describe the bug

Same as the nuxt/nuxt#15488, if you provide an empty string for style property, it throws an error value.split is not a function.

We need to change
for (const c of value.split(';').filter(Boolean))
to
for (const c of (value || '').split(' ').filter(Boolean)) {
Same as class attribute.

Additional context

No response

Logs

No response

[harlan-zw]

Thanks, this should be fixed in 1.8.12

[sharifzadesina]

@harlan-zw
Unfortunately, unlike the case for class attribute, This didn't fix the error for style.
I don't know why but empty style is converted to boolean true somewhere, {class: '', style: true}.
So the code for (const c of (value || '').split(' ').filter(Boolean)) { actually does nothing.

[sharifzadesina]

@harlan-zw I did a bit of debugging, it seems something is wrong inside normalizeTag it converts empty string to boolean true.

[harlan-zw]

Sorry about this, I only had a short amount of time and didn't test the fix properly.

I've now pushed a proper fix and also added support for handling styles similar to classes with minimal runtime overhead.

Meaning, you can now do things like this:

const isNavActive = ref(false)
useHead({
  bodyAttrs: {
    style: {
      'color': 'white',
      // fully reactive styles, empty / falsey values are filtered from markup
      'background-color': () => isNavActive.value ? 'red' : '',
    },
  },
})