@global is not working

[caub]

demo: https://codesandbox.io/s/async-sky-5xyhv

body doesn't have a lightblue background as expected

import React from "react";
import ReactDOM from "react-dom";

import styled from 'styled-jss';

function App(props) {
  return (
    <div {...props}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const StyledApp = styled(App)({
  border: '1px solid red',
  '@global': {
    body: {
      backgroundColor: 'lightblue'
    }
  }
})

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

styled-jss: 2.2.3

[caub]

@lttb Excuse me to ping you directly, as you're a maintainer, do you have an idea for this issue?

styled-jss uses jss-preset-default which itself uses jss-plugin-global https://github.com/cssinjs/jss/blob/master/packages/jss-preset-default/src/index.js#L25

So I wonder what makes things break, maybe updating dependencies will fix this issue

Thanks

[HenriBeck]

See the second css rule object. It creates a local selector with body as a children selector.

[caub]

Ah yes indeed, thanks is it expected or a bug?

[caub]

@HenriBeck do you want me to try to push a fix or is it an intended behavior (I don't think so)?