customize-extension.md

Customize the Extension

phoenisx.cssvar internally uses PostCSS to parse and find CSS variables. Use PostCSS syntax parsers to add support for your desired CSS syntax.

Already supported source files

The following list of source file extensions does not need any customization. cssvar already has in-built support for them.

• CSS or CSS-like files: css, scss, less.
• JS or JS-like files: js, jsx, ts, tsx.
  • Statically parses template literals. No customization needed

cssvar has minimal support for parsing JS/TS files. This won't be required, but in case you face issues with JS/TS source file parsing try using postcss-css-in-js parser, as described in the following section.

NOTE: Customization might not always work, because the way these syntax parsers work are different for different css extensions. Thus if you find an extension is not working properly, do raise an issue and appreciate a PR for the same.

Adding support for a new syntax

For customizations to work, you need to have postcss v8+ installed in your local project's node_modules.

First, install any syntax parser from the list provided here or from the list below.

List of PostCSS syntax libraries

• Syntax Parser for Sass source files: postcss-sass
• Syntax Parser for HTML source files: postcss-html
• Syntax Parser for SugarSS source files: sugarss
• Syntax Parser for Stylus CSS extension: postcss-styl
• Syntax parser for css-in-js in JS/TS source files: postcss-css-in-js
• Syntax parser for Lit templates in JS/TS source files: postcss-lit

Example I

The following example helps demonstrate adding support for sass CSS Extension.
Install postcss-sass package on your system:

yarn add -D postcss postcss-sass

Once the above is done, edit your cssvar config to use this syntax:

// .vscode/settings.json
{
  "cssvar.postcssSyntax": {
    // [npm package name]: ["file extension list to use this syntax parser for"]
    "postcss-sass": ["sass"]
  }
}

Example II

The following example helps demonstrate adding support for css-in-js parsing support.
Install postcss-css-in-js and postcss-syntax packages on your system:

yarn add -D postcss postcss-syntax @stylelint/postcss-css-in-js

Once the above is done, edit your cssvar config to use this syntax:

// .vscode/settings.json
{
  "cssvar.postcssSyntax": {
    "postcss-syntax": ["js", "jsx", "ts", "tsx"]
  }
}

To see this setup working, uncomment this syntax in js-parser example