Styled-components: Support createGlobalStyle``

[wmertens]

Adds support for https://styled-components.com/docs/api#createglobalstyle

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
• (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/pr-XXXX.md file following changelog_unreleased/TEMPLATE.md.
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

[SimenB]

#5386 (comment)

[kachkaev]

A workaround we can use is:

const xyz = css`
  body {
    background: red;
  }
`;
/* ↑ gets formatted by Prettier */

createGlobalStyle`
  ${xyz}
`;

See example.

[wmertens]

Note that createGlobalStyle is official API, it creates a component that you have to mount, so it won't be deprecated most likely.

[wmertens]

Ah, and @SimenB - createGlobalStyle (creates component, SSR-friendly) is different from injectGlobalStyle (adds style as a side-effect on client only) which is no longer supported.

[SimenB]

All I'm saying is that "add more template tags for auto formatting" has been rejected 4+ times before, and the specific issue I linked to was specifically asking for createGlobalStyle and was closed. I'm all for adding this (injectGlobal is still an emotion thing, I don't use styled-components), but I'm not a maintainer so that doesn't really impact anything. I'm not the person you need to convince 🙂

[sosukesuzuki]

Just an idea, Prettier next(2.1) will introduce --embedded-language-formatting(#7875) new option. I think maybe we can use it to implement the formatting for createGlobalStyle in the future.

[thorn0]

Yes, this PR (as well as #5993 and #8647) is blocked by #5588. We won't move forward with it until we solve that problem.

[wmertens]

👌 that looks like a nice solution! I'll close this