vunguyentuan/vscode-css-variables

Any settings to insert CSS variable name without `var()`?

Opened this issue · 2 comments

DarrenDanielDay commented

I found this extension would provide auto-complete options of CSS variables in any text files. It's reasonable to use these CSS variable names when we want to set them programmatically in JavaScript, but var() is not expected to be inserted. Is there any setting to disable var() in auto completion? Or is it a bug to provide options of detected CSS variables when users are not editing CSS-like code?

countzero1942 commented

I found the automatic insertion of the var(--variable) to be problematic as well.

There are cases where you want to redefine css variables in selectors. Then you just need the --variable: insertion, not the var(--variable) insertion.

This should be easy to test for. If at the beginning of a tabbed lined insert --variable: . If after a css property: property: , then insert var(--variable).

Or just have the option to not insert the var(...) along with the css variable name.

This would help out a lot!

countzero1942 commented

I found a hack to this. Just clone the repo. Open in VS Code. Do npm install to install modules. Find the line of code that wraps the string in var(...) and change it.

Then find the right scripts to run in /package.json. Like npm run build and npm run package. Eventually you will find the minified .js files of index.js and server.js in /packages/vscode-css-variables/dist/.

Now find where the VS Code extension is installed on your computer: e.g. C:\Users\me\.vscode\extensions\vunguyentuan.vscode-css-variables-2.6.3\dist

Next backup the two files, index.js and server.js and copy them over with the new ones. Then start VSCode. No more var(--variable) when trying to redefine the css variable in a selector!

BTW, a couple of notes. When doing npm install I also had to do the recommended npm audit fix --force. And the minified .js file lengths were not exact with the installed ones. Installed: 343KB and 545KB; new ones: 343KB and 543KB.

Also the editor shows 2 errors in the /tsconfig.json file (TypeScript settings), which I ignored. The build scripts also has errors which didn't apparently matter (which I prob could've fixed but didn't): 'rm' is not recognized as an internal or external command from shell command > tsc -p ./ && rm -f .vscode-test/user-

The file to edit is /packages/vscode-css-variables/index.js.