Nested selectors not processed

[goffioul]

In a simple MaterialUI v5 demo app (https://codesandbox.io/s/material-rtl-nested-selector-1qtmo), it seems that nested selectors are not processed by the plugin. Using something like the following snippet, the table element gets flipped CSS, while thead and td/th do not.

const styles = {
  width: 1,
  textAlign: "left",
  "& thead": {
    textAlign: "left"
  },
  "& th, & td": {
    paddingLeft: 1
  }
};

function App() {
  return (
    <Box component="table" sx={styles}>
      <thead>
        <tr>
          <th>Hello TH</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Hello TD</td>
        </tr>
      </tbody>
    </Box>
  );
}

Note: This was initially reported in https://github.com/mui-org/material-ui/issues/24270#issuecomment-754352256

[oliviertassinari]

@goffioul Could you provide a reproduction that doesn't involve MUI?

[goffioul]

https://codesandbox.io/s/emotion-rtl-nested-selector-xcgrm

[goffioul]

This is just a wild guess, but I've done some debugging in the above sandbox. What appears to be happening, is that when function stylisRTLPlugin is called for, let's say, the & thead rule element, the following condition is false:

element.type === KEYFRAMES || (element.type === RULESET && (!element.parent || element.parent.type === MEDIA))

Indeed, even though the element is of type RULESET, it has a non-null parent, which is not of type MEDIA (it's also of type RULESET). Hence CSSJanus transformation is not applied.

[oliviertassinari]

This bug impacts the Grid component too. It can be seen on http://next.material-ui.com/components/grid/#basic-grid. It was first reported in https://github.com/emotion-js/emotion/issues/2156.

[mnajdova]

The bug was fixed by https://github.com/styled-components/stylis-plugin-rtl/pull/21 @probablyup it can probably be closed.