bright icon indicating copy to clipboard operation
bright copied to clipboard

React mismatch errors

Open Aslemammad opened this issue 1 year ago • 0 comments

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.

Aslemammad avatar Jan 25 '24 16:01 Aslemammad