useCss !important not possible

[drsag-mgr]

What is the current behavior?
Properties with !important will not be rendered in the generated css class, not even without the !important-flag.

The following Example:

const myComponent = ()=> {
  const styleClass = useCss({
    color: 'red !important',
    padding:5,
  })

  return <div class={styleClass}>TEST</div>
}

RENDERS:

<style>
.react-use-css-1x {
  padding:5px;
}
</style>

<div class="react-use-css-1x">TEST</TEST>

The color-Property is completely ignored and not part of the rendered css, not even without the !important.
Without the !important all functions well.

The expected Result is:

<style>
.react-use-css-1x {
  color: red !important;
  padding:5px;
}
</style>

<div class="react-use-css-1x">TEST</TEST>

A little about versions:

• OS:
• Browser (vendor and version):
• React: 18.2.0
• react-use: 17.6.0
• Did this worked in the previous package version? NO

[DanielDu95]

The issue you're facing with the !important flag not being rendered in the generated CSS class has been solved by patching the nano-css package.
I am now expecting the acceptance of my PR, and I hope this fix helps resolve the issue for others as well. Let me know if you'd like further assistance or need any more information.

[drsag-mgr]

Oh, that's great. Thank you very much!!
I hope that this will lead to a fixed version of react-use in the near future.