vscode-styled-components: createGlobalStyle not being auto formatted

Same issue, not sure of any side-effects yet but as a workaround, I’m just wrapping the whole thing in the css function, which seems to re-enable the auto-formatting.

import { createGlobalStyle, css } from 'styled-components';

export default createGlobalStyle`${css`
  html,
  body,
  #root {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
  }
`}`;

flowing code works 💪

import * as styled from 'styled-components';

export default styled.createGlobalStyle`
  body {
    margin: 0;
  }
  code {
    font-family: source-code-pro;
  }
`;

fixed in 1.0.0

I’m late to the party but this will also work fine

import * as styled from 'styled-components';

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

export default GlobalStyles;

@luizwhite in nextjs one can write something like this as a workaround

import { createGlobalStyle } from 'styled-components'

const styled = { createGlobalStyle }

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

export default GlobalStyle

but well I mean…

@alikadir That’s the best solution thus far. It looks like Prettier is looking for the styled identifier.

@luizwhite this extension does not do formatting, its a prettier (or whatever formatter you use) issue

Issue for me was that multiple formatters were active and I just had to pick a default. You can do so by hitting Shift + Option + F and you’ll get a window asking to select a default. Simply selecting Prettier here solved the non-formatting issue for me.

This is definitely working for me (as of v1.5.2), we even have it passing in our fixtures https://github.com/styled-components/vscode-styled-components/blob/27a0ab882628646d775989075cfb270085e011f2/src/tests/suite/colorize-fixtures/createGlobalStyle.js

Could someone confirm this is still broken and show their extension version?

@ibqn I see this when using your example.

flowing code works 💪

import * as styled from 'styled-components';

export default styled.createGlobalStyle`
  body {
    margin: 0;
  }
  code {
    font-family: source-code-pro;
  }
`;

It bugs my Next.js when using that solution, because babel-plugin-styled-components doesn’t quite understand that. So my workaworkaround is just type styled. before createGlobalStyle, and my formatter already shows me the linting, and i can push my format/fix keyboard shortcut, then save the file after removing the typed styled.