Skip to content

React mismatch errors #39

@Aslemammad

Description

@Aslemammad

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. wakujs/waku#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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions