Add !important to [hidden]

[muan]

Reference #467.

While the issue with .d-* styles need to be sorted out, having this !important now would help us with the many cases that we have already encountered with .btn[hidden], where display: inline-block takes precedence over [hidden].

---

Related but I don't want this to be a blocker – what do y'all think about just duplicating [hidden] {display: none !important;} at the end of visibility-display.scss? Considering these packages can be used separately and this is just one line of code 🤷🏻 IMO it's not horrible. 😬

https://github.com/primer/primer/blob/efddb570a8623458b2ca10da6c7bbfd965712c2b/modules/primer-utilities/lib/visibility-display.scss#L30

[shawnbot]

I'm a huge fan of this. It makes showing and hiding things (in JS just setting element.hidden) so much simpler. This might need to be part of v11, though, since it's technically a breaking change.

[jonrohan]

Thanks @muan, I'm scheduling this for 10.9.0