The style is `.css-4oa7uv-Header.Space` rather than `.css-4oa7uv-Header\.Space`

Current behavior:

It make the className as .css-4oa7uv-Header.Space, and it also make a .css-4oa7uv-Header.Space style rules. But it should be .css-4oa7uv-Header.Space rule, it should be .css-4oa7uv-Header\.Space rule.

Here is my code:

// Header.Space = function HeaderSpace({ children }: HeaderSpaceProps) {
Header.Space = ({ children }: HeaderSpaceProps) => {
  return (
    <div
      sx={{
        py: mRV({ _: '6rem', sm: '8rem', md: '8rem' }),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '2rem',
      }}
    >
      {children}
    </div>
  )
};

When I export Header, I find that Header.Space component doesn’t work well. I check what happens. Well, there is a .css-4oa7uv-Header.Space style rule! But the right name should be .css-4oa7uv-Header\.Space. It forget \ sign! I read the emtion source file. I find it will get the label name from function call stack if the NODE_ENV is development. I try to rewrite the jest’s test file. But I cannot make it again in test file… Could you help me? And do you need a runable demo? If you pointer out how to let it show again in test, I think I can help you with a PR.

Expected behavior:

The style rule should be for .css-4oa7uv-Header\.Space.

Environment information:

• react version: ^17.0.2
• @emotion/react version: ^11.7.1

[srmagura]

Out of town, will PR this in the weekend 🙂

On Mon, Feb 14, 2022, 3:20 AM Mateusz Burzyński @.***> wrote:

Or change the build css style name from .css-xxxxxx-App.Space to .css-xxxxxx-App.Space?

This is unlikely to happen. I don’t think that the dot here is worth preserving - we also need to consider what is generated for this setup during SSR because this has to match with the client.

— Reply to this email directly, view it on GitHub https://github.com/emotion-js/emotion/issues/2638#issuecomment-1038785986, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGDWDNZC2WJQDLLPCBH45DU3C3LLANCNFSM5OHD3THQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[Andarist]

Or change the build css style name from .css-xxxxxx-App.Space to .css-xxxxxx-App.Space?

This is unlikely to happen. I don’t think that the dot here is worth preserving - we also need to consider what is generated for this setup during SSR because this has to match with the client.