CSS tagged template literals don't self close

Before VS Code v1.27, the following would happen when creating a CSS tagged template literal (note that this issue happens with styled components, or any tagged template literal function name that triggers CSS highlighting):

const foo = css
// press the tickmark (`) key
const foo = css`|` // cursor is in the middle of two tickmarks, and the literal is self-closing

Now, this is what happens:

const foo = css
// press the tickmark (`) key
const foo = css`| // cursor is after the first tickmark, and it is not self closing
// press the tickmark (`) key to close the literal
const foo = css``|` // two tickmarks are inserted and the cursor is after the second one

I can confirm that this does not happen with any other names, for example this still works:

const foo = html
// press the tickmark (`) key
const foo = html`|` // cursor is in the middle of two tickmarks, and the literal is self-closing

I’m not sure where to file this issue, I would think that it’s related to the CSS language detection part of the plugin, but I can confirm that it only happens with CSS-highlighted tagged template literals, and also only when this plugin is enabled.

[ankithkonda]

Can confirm, I though it was the styled components extension, but after messing around with extensions a bit more, the problem is with vscode-language-babel. e.g. -

When you type in the templet literal quote marks, it adds 1 but doesn’t seem to recognise it, and then when you try and complete it, vscode adds one more at the end, so you end up with 3

VSCode: 1.27.2 vscode-styled-components: 0.0.21

package.json -

"polished": "^1.9.3",
"styled-components": "^3.4.2"

VSCode settings:

{
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.fontFamily": "Roboto mono for Powerline",
  "workbench.iconTheme": "vscode-icons",
  "editor.renderIndentGuides": false,
  "guides.enabled": false,
  "gitlens.keymap": "alternate",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "window.zoomLevel": 1,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "editor.minimap.enabled": false,
  "window.title": " ",
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.php$",
        "cmd": "prettier ${file} --write"
      }
    ]
  }
}

[michaelgmcd]

Closing this since there is a decent workaround and vscode’s fix should suffice.