search

Anber / wyw-in-js

MIT License
191 stars 8 forks source link

:global() doesn't work with nested style #42

Closed nihgwu closed 4 months ago

nihgwu commented 5 months ago

Environment

Linaria version: 6 Bundler: Any bundler, tried cli/vite/esbuild

Description

Same issue as here, created a new one as that ticket has been closed

It's a clone of https://github.com/callstack/linaria/issues/1392, the bug is actually in wyw-in-js

import { css } from '@linaria/core'

export const GlobalStyle = css`
  :global() {
    [data-scrollbar='custom'] {
      isolation: isolate;
      overflow: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
`
Failed to match :global() selector in "&
                                        ::-webkit-scrollbar". Please report a bug if it happens.
  Plugin: wyw-in-js

Reproducible Demo

nihgwu commented 5 months ago

My current workaround is transpile the nested style via stylis first

export const GlobalStyle = css`
  :global() {
    ${serialize(compile(cssText), stringify)}
  }
`