add a test for nested styles

[steve8708]

we should probably doc that all of this is possible with css={{}} if we haven't

e.g. this

   <div
      css={{
        display: 'flex',
        foo: 'var(--bar)',
        '@media (max-width: env(--mobile))': {
          display: 'block',
        },
        '&:hover': {
          display: 'flex',
        },
        '.nested-selector': {
          display: 'grid',
        },
      }}
    >
      Hello world
    </div>

becomes:

 .div {
    display: flex;
    foo: var(--bar);
  }
  @media (max-width: env(--mobile)) {
    .div {
      display: block;
    }
  }
  .div:hover {
    display: flex;
  }
  .div .nested-selector {
    display: grid;
  }

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
mitosis-fiddle	✅ Ready (Inspect)	Visit Preview	Aug 16, 2022 at 7:06PM (UTC)

[samijaber]

I'd love to also see this new test component in an e2e test to check that the nested styles actually do work as expected in every framework.