styled-email-components

styled-email-components copied to clipboard

It seems like pseudoelements/pseudoselectors/nesting are not supported, ie. styles are not inlined for nested rules. https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

For instance, this:

const MyElement = styled.div`
  color: blue;

  & p {
    color: red;
  }
`;

...

return (
  <MyElement>
    <p>Some text</p>
  </MyElement>
);

... will output:

<div style="color: blue;"><p>Some text</p></div>

Is this possible to implement?

hey @idmadj, good suggestion! i'm considering adding :hover/:before/:after/etc. support which needs mixed inline and classic styles; as for nested rules it's tricky and probably won't be supported for the time being