A Custom Properties Snippet Builder for VS Code | by Massimo Cassandro | May, 2022

Methods to write a bit node script to generate a VSCode snippet with all of your venture css custom-properties

For a very long time now, I’ve been utilizing CSS custom properties increasingly more extensively, and when engaged on many bigger tasks it turns into tough to recollect all of them.

I exploit VSCode for coding and there are some Intellisense plugins that may be very helpful, however typically, for some causes, they don’t work as I anticipate.

To unravel this downside, I made a decision to create a small script that may extract an inventory of CSS properties from my information, after which generate a VSCode snippet fully mechanically.

It’s a fairly uncooked resolution, nevertheless it does the job. I hope it is going to be helpful for somebody.

The script relies on Node, so step one is to install it should you’ve by no means completed this earlier than.

Then, open in VSCode a venture folder, create a package.json file should you want, and ensure it incorporates at the very least a css file (take a look at.css within the instance beneath).

At this level, you need to create your venture snippet file. You may have two methods to do that:

1. manually create a .vscode folder and a .code-snippets file containing solely empty braces (in my case, I named it my-proj.code-snippets).
2. Comply with the directions on the VSCode Snippet Help page.

Now, you need to add the snippet code (besides the half we are going to generate later):

"My-proj {custom} properties": 
"scope": "scss,css",
"prefix": [
"var",
"--prefix"
],
"physique": [],
"description": "{custom} properties listing - NB it is a script-generated snippet"

The snippet keyname (My-proj {custom} properties") can be used to replace it, should you change it, you will have to replace the script as nicely.

The physique factor can be up to date by the script, you’ll be able to customise the remainder of the snippet as you want.

When you need assistance to construct the snippet, this Generator may enable you

Our script must carry out these actions:

• Learn the content material of some css information
• seek for {custom} properties strings and extract them
• take away duplicates and type
• replace the snippet file

I first tried parsing the css information to carry out a extra correct extraction, however this enormously elevated the complexity of the script. Ultimately, a easy processing of the CSS string appeared to me greater than sufficient for the meant objective.

Begin creating an index.mjs (or the title you like) file in your venture. Since we can be utilizing ES6 modules syntax, the .mjs extension is required till you add to your package deal.json a top-level discipline sort with a price of module (see ECMAScript Modules within the Node documentation).

Copy the next code in your file:

const sources = [
'./test.css'
],
snippet_file = './.vscode/my-proj.code-snippets',
snippet_key = 'My-proj {custom} properties',
custom_var_prefix = 'prefix-';
let custom_properties = [];

custom_properties = custom_properties.map(merchandise => merchandise.break up(':')[0].trim());
custom_properties.type();
custom_properties = [...new Set(custom_properties)];let vscode_snippet_body = `var(--$custom_var_prefix$` +
custom_properties.scale back((consequence,merchandise) => `$consequence,$merchandise`)
.replaceAll(`--$custom_var_prefix`, '') + ')$0';