Using `!important` in TypeScript

[ankon]

This works:

{
  className: {
    textDecoration: 'underline!important'
  }
}

textDecoration is effectively a string as per https://github.com/frenic/csstype/blob/1bb6cbb1f3e55220952caa52e6f37c54b4a50f54/index.d.ts#L18853-L18871

But this one doesn't, because fontWeight really specifies a specific data model:

{
  className: {
    fontWeight: 'bold!important'
  }
}

https://github.com/frenic/csstype/blob/1bb6cbb1f3e55220952caa52e6f37c54b4a50f54/index.d.ts#L18430

There is also another FontWeight that does allow strings in the AtRule namespace: https://github.com/frenic/csstype/blob/1bb6cbb1f3e55220952caa52e6f37c54b4a50f54/index.d.ts#L19641

What is the best practice for defining "important" styles in TypeScript? Should I explicitly use the [... as any] syntax?

[frenic]

You can cast the value and in that way you preserve type checking

{ fontWeight: 'bold !important' as 'bold' }

[ankon]

Thanks, this looks fairly ok to me (compared to the as any alternative, definitely!)

[joshhunt]

As a slightly better work around you can use [string] syntax:

css({
   ['z-index']: `3 !important`,
})

You lose the type safety (which you want to ignore anyway...), but you don't have to as type-assertion :)