Incorrect double parentheses when I type "var(", it yields "var()()" with cursor in second pair

[brudo]

Describe the bug (including copyable syntax)

A clear and concise description of what the bug is. If you're planning on posting a screenshot, please paste the accompanying code here.

Screenshot Screenshots are alway useful!

To Reproduce Create any styled component, and reference a CSS variable in the styling using the var() function, e.g.

const MyStyledDiv = styled.div`
    background: var(--darkGrey);
`;

In this example, the variable --darkGrey was defined elsewhere, but that isn't important for repro, as the issue occurs before any variable name is typed, as soon as you type "var(".

Notice that, once you type "var" and the opening parenthesis, the editor adds a closing parenthesis and a second pair of opening and closing parentheses, and places the cursor between the second pair of parentheses.

Then, if I press backspace twice, it goes back to "var(" and I have to manually type the closing parenthesis. Or I could type backspace once, followed by left arrow once, to get to the correct position with the correct number of parentheses.

Note that the issue only occurs when I type var followed by a parenthesis, on the line for a valid CSS style. If I typed "var" previously, and now move the cursor after the "r" and type "(", a single closing parenthesis is inserted, as expected.

Further, if I mistype the style (e.g. "backgrnd: var(" instead of "background: var(" in the above example), then a squiggle is placed below the invalid keyword and again, a single closing parenthesis is added after the cursor - this is as expected.

Expected behavior I would expect it to insert only one closing parenthesis, and place the cursor between the parentheses, and not insert a second pair of parentheses.

Build environment (please complete the following information):

• OS: Windows 10
• VSCode Version: 1.71.2
• Extension Version 1.7.5

Additional context Add any other context about the problem here.

[esquevin]

I encounter a similar issue when typing calc( it expands it to calc()() with the cursor in the second pair.

I don't have the var()() issue though:/

[brianlove]

I was frequently experiencing this issue as well on a project using @emotion/react. A seemingly unrelated issue (VSCode autocompleting incorrect things after I typed a comma) led me to uncheck "Accept Suggestion On Commit Character" (editor.acceptSuggestionOnCommitCharacter) in Settings, after which I discovered that the duplicate parentheses were no longer appearing after I typed var(). I re-enabled that setting and the behavior returns, so it appears that this has something to do with autocomplete's behavior regarding "commit characters".

(This is on VSCode 1.74.1)

[brudo]

Thanks @brianlove - that setting does seem to have worked for me. I guess "(" must be detected as a "commit character" or something, even when it appears inside of a string. Anyway, in most cases I think I like it better to press tab explicitly to autocomplete, so for me this is a good workaround.