createGlobalStyle and keyframes are not getting formatted - styled-components

[erfanasbari]

Prettier 2.3.2
Playground link

--parser babel

Input:

import { createGlobalStyle } from "styled-components";

const GlobalStyle = styled.createGlobalStyle`
  body {
    margin: 0;
          padding: 0;
       box-sizing: border-box;
  }
`;

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
         padding: 0;
       box-sizing: border-box;
  }
`;

export default GlobalStyle;

Output:

import { createGlobalStyle } from "styled-components";

const GlobalStyle = styled.createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`;

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
         padding: 0;
       box-sizing: border-box;
  }
`;

export default GlobalStyle;

Expected behavior:

Prettier does not format the css styles passed to createGlobalStyle and keyframes functions from styled-components.

This issue exist for a long time but is not yet fixed.

There are some workarounds but fixing this should not be a big deal because Prettier already supports formatting for styled-components functions line css.

[sosukesuzuki]

We cannot support such a format, at least not currently. It may be supported in the future using --embedded-language-formatting. See #9025 and #5588.

[ibqn]

As a workaround, I would like to propose something like this

import { createGlobalStyle } from 'styled-components'

const styled = { createGlobalStyle }

const GlobalStyle = styled.createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ...
`

export default GlobalStyle

I have previously mentioned it here, styled-components/vscode-styled-components#175

[HanSeokSeo]

As a workaround, I would like to propose something like this

import { createGlobalStyle } from 'styled-components'

const styled = { createGlobalStyle }

const GlobalStyle = styled.createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ...
`

export default GlobalStyle

I have previously mentioned it here, styled-components/vscode-styled-components#175

you genius!

[kachkaev]

@HanSeokSeo you can also do use css`...` which is a bit less hacky: #9025 (comment)