createGlobalStyle not being auto formatted

[mkvlrn]

Anything inside another styled tag will be properly formatted, for example a styled.div. But a createGlobaStyle function will not have it's contents formatted. Color is still being applied, but formatting won't happen.

[danielmahon]

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;
  }
`}`;

[shmilyoo]

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;
  }
`}`;

it works

[alikadir]

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;
  }
`}`;

it works

it not works currently 🙁

[alikadir]

flowing code works 💪

import * as styled from 'styled-components';

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

[adi518]

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

[gurmiguel]

With typescript, if I try to pass the props type definition, createGlobalStyle loses the formatting

const GlobalStyles = createGlobalStyle<{prop: any}>`
  body {
    ...
  }
`

without the props type the formatting works normally

[jasonwilliams]

fixed in 1.0.0

[webdevelukas]

Doesn't work for me in VS-Code (1.50.1) on macOS (10.15.7) and with vscode-styled-components (1.2). Actually I'm using the ${css``} workaround.

[jasonwilliams]

@webdevelukas could you paste a snippet of code you would expect to work? (Without the workaround)

This will make it easier for me to see the issue

[lucasengel]

@webdevelukas could you paste a snippet of code you would expect to work? (Without the workaround)

This won't get formatted:

import { createGlobalStyle } from "styled-components"

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

export default GlobalStyles

[Nytheneals]

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;

[ibqn]

This bug ist still not addressed, why is issue marked as resolved?

The following block ist not formatted in vscode:

import { createGlobalStyle } from 'styled-components'

const GlobalStyle =  createGlobalStyle`
  html,
  body {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
  }
`
export default GlobalStyle

[luizwhite]

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.

[ibqn]

@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...

[jasonwilliams]

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.

[ibqn]

@jasonwilliams no, it's still no working, i.e. code is colorized colorized, but styles are not formatted.
I have even uninstalled and reinstalled this extension again, to double check.

Version: 1.55.2
Commit: 3c4e3df9e89829dce27b7b5c24508306b151f30d
Date: 2021-04-13T09:37:02.931Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Linux x64 5.4.0-72-generic

Feel free to let me know, if I somehow can assist here.

[jasonwilliams]

I did some digging into this.
The issue seems to be with Prettier rather than this extension (this extension doesn't do any formatting).

Here is the prettier playground with the same code:
https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBLAtgBwgJxgAmHzBzgEN4BxAGwgCMzqBlGAT2rnwF98AzHCOnwAdEAGc2HACYBaSFmgIYY0QG5hUDZCgT8NeoxbtOAXnwTjUgHQlyVWg2aS4AAw358dCFNaF3H-HQyHABzVCgkfAAGdSgA-EwyKSlwkMiY-w8vAA8ZMVQAL1TIrxwpOBwZHNiPLg0XWK1oXX1HIw58M1sKOFbDZzc4z29fYEzA4LCI6Jr4hKSUqDSZ8Zy8wuLhsoqqiGzZuqgGjQ04bOw8fHLeMgBXagI+p2NYkAAaEAhMGFRm5FBggIAO4ABWCCDEyBAjCBZFYkI+dBwZDAAGs4DAmIkwKlkDAcLc4B84Og6HBkuSADJkJa3MghOAAMVwQRgPyWULuMAg7xAAAsYOhqAB1PmoeBibFwJgQ8WoABu4tYULAYgRaB0FRgIORISCyBu1DERJAACsxNkAELItEYphkdBwSnhOAGxjGj7m7JMVIcACKtwg8DdRpNiRwxpwUIYZOovMwOHCMGFqCkMD5yAAHFEPgmIMbhcjMFCE3BI-LXR8AI6B+A6r6QlBkMQyKBwcnk3mkGuoUg6+n6pCGj3iEmoPEEk35Jb+2uuofuk0wMh0FNpjNIABMH3xZFQ1FSAGFBIOQGWAKy827GgAqK8bw5N8sJAEkoOVYEwSKhvgBBd-tPOj5cFwQA

You can see its reproduced the same issue.

Looks like its been addressed (and not merged) here:
prettier/prettier#9025

[luizwhite]

still no auto formatting here

The workaround I am using in my projects is this, as suggested by @ibqn:

[jasonwilliams]

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

[rensvis]

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.

[dminkovsky]

flowing code works 💪

import * as styled from 'styled-components';

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

Why does this work?

And then is there a way to access the factories?

[IamKennedyKambo]

renvis's answer fixed it for me. Apparently vscode needs you to choose a default formatter for it, then it knows what to do. Shift + Alt + F on Windows.