Styled Components - Verify @container w v5 opt in

[halocline]

No description provided.

[taysea]

@halocline @jcfilben Can you review and close out this ticket if all looks good?

Set up

• styled-components v6.0.7
• Modified Box to opt-in to v5 behavior via StyleSheetManager and isPropValid:

<StyleSheetManager shouldForwardProp={isPropValid}>
        <StyledBox
          ...
        >
          <ThemeContext.Provider value={nextTheme}>
            {contents}
          </ThemeContext.Provider>
        </StyledBox>
      </StyleSheetManager>

• Modified Simple Box story

import React from 'react';
import styled, { css } from 'styled-components';

import { Box } from 'grommet';

export const containerStyle = (content) => css`
  @container (min-width: 700px) {
    ${content}
  }
`;

const MyBox = styled(Box)`
  container-type: inline-size;
`;

const MyCard = styled(Box)`
  background: pink;
  ${containerStyle(`background: green;`)}
`;

export const SimpleBox = () => (
  // Uncomment <Grommet> lines when using outside of storybook
  // <Grommet theme={...}>
  <MyBox background="background-back" pad="medium" width="large">
    <MyCard height="medium" flex="grow">
      Hello
    </MyCard>
  </MyBox>
  // </Grommet>
);

SimpleBox.storyName = 'Simple';

export default {
  title: 'Layout/Box/Simple',
};

Outcome

When the container (outer Box) is less than 700px (defined in my containerStyle), the Box renders with background pink. When it is larger, it renders with background green.

Other notes

I also tried the same storybook setup with the current v5 (which is relying on a different version of stylis (@emotion/stylis) and the container query styling does not come through. This confirms that styled-components ^v6 is needed for people to leverage container queries.

[taysea]

Closing @jcfilben and @MikeKingdom have looked at this.