Styles passed from parent using resolve not overwriting local styles

[louis-cf-lin]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

Styles passed from a parent component using resolve are not overwriting styles defined in the child component.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

I have a component MyButton:

interface Props {
  className: string
}

const MyButton = (props: Props) => {
  return (
    <button className={props.className}>
      <style>{`button { background: red; }`}</style>
    </button>
  )
}

export default MyButton

I use this component in MyWrapper:

import MyButton from "./MyButton.tsx"
import css from "styled-jsx/css"

const {className: myButtonClassName, styles: myButtonStyles} = css.resolve`
  button {
    background: blue;
  }
`

const myWrapper = () => {
  return (
    <div>
      <MyButton className={myButtonClassName} />
      {myButtonStyles}
    </div>
  )
}

The background color for MyButton is still red.

What is the expected behavior?

I'd expect MyButton is blue instead of red. According to the resolve section in the docs, it seems like this should work but instead the local styles are overwriting the parent styles. For reference, the style from MyWrapper is being applied correctly, but just overwritten.

Environment (include versions)

• Version of styled-jsx (or next.js if it's being used): [email protected] and [email protected]
• Browser: Chrome
• OS: Windows

Did this work in previous versions?

N/A

Extra notes

I know I can add a .button class to MyButton then use it in the resolve or use the :global selector but I was wondering if the child style being prioritised is the intended behaviour.