bright
bright copied to clipboard
React mismatch errors
Hey, Thank you for the great package! We're using Bright in Waku and we stumbled upon a bug with autoprefixer where the inline styles get prefixed and React on the client side will have a mismatch error.
What renders in the server with no prefixing. This is also the client's result.
<style>
[data-bright-theme] ::selection { background-color: var(--selection-background) }
</style>
Server, but after prefixing.
<style>
[data-bright-theme] ::-moz-selection { background-color: var(--selection-background) }
[data-bright-theme] ::selection { background-color: var(--selection-background) }
</style>
For us, the temporary solution was to disable autoprefixer for the official website. https://github.com/dai-shi/waku/pull/426
What can be done in bright itself, is using control comments https://github.com/postcss/autoprefixer?tab=readme-ov-file#control-comments and disabling autoprefixing for that specific inline style.