Indentation not working properly

[jahirfiquitiva]

Describe the bug (including copyable syntax) Hey... I have some styled component code that is indented perfectly on Webstorm, but it isn't in VSCode while using this extension...

Screenshot This is what the formatted code looks like

To Reproduce Try with this snippet

const TopSection = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 468px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  padding: 52px
    ${({ isLimitedEdition }) => (isLimitedEdition ? '12px 40px' : '0 12px')};

  ${mediaQueries.medium} {
    max-width: ${({ isLimitedEdition }) =>
      isLimitedEdition ? '468px' : '612px'};
    padding: 64px 0
      ${({ isLimitedEdition }) => (isLimitedEdition ? '64px' : '32px')};
  }

  ${mediaQueries.large} {
    max-width: ${({ isLimitedEdition }) =>
      isLimitedEdition ? '468px' : '640px'};
    padding-bottom: ${({ isLimitedEdition }) =>
      isLimitedEdition ? '64px' : '40px'};
  }

  ${mediaQueries.xlarge} {
    padding-bottom: ${({ isLimitedEdition }) =>
      isLimitedEdition ? '64px' : '48px'};
  }
`

Expected behavior Code should be formatted or indented like this:

Build environment (please complete the following information):

• OS: macOS
• VSCode Version: 1.58.0
• Extension Version: 1.6.4

[jasonwilliams]

@jahirfiquitiva it seems to be formatting fine for me, which formatter are you using? This extension doesn't deal with formatting, thats usually deferred to Prettier or the VSCode Typescript/javascript formatter