[Feat] Allow users to enable/disable css variable linting

[phoenisx]

Closes #73

Changes:

• New setting added to this extension: cssvar.mode (similar syntax to eslint rules property)
  • Set extension mode to warn or error to enable this new feature.
• Minor fixes to debug logs.
• Fixes definition and color providers with variable function using spaces in between parenthesis.

Notes:

Since CSS variables are global in nature by default and can be used even without them being declared, an ideal CSS linter for CSS variables might not exist. This feature enables strict checks for undeclared variables, thus variables which are undeclared or dynamically created will be considered as lint warn/errors.

For e.g. all the following CSS examples are valid:

body {
  /* The following `--undeclared` variable does not exist */
  /* but its usage is completely valid, even though this extension */
  /* shows it as an error after enabling this feature */
  color: var(--undeclared, #333);
}

• In the following example variable is declared dynamically in CSS-in-JS

// source.js
const foo = (index, value) => (
  css`
    --color-${index}: ${value};
  `
);

/* index.css */
body {
  color: var(--color-1);
}

To fix the above cases, you can pass a list of variable names in the extension settings to ignore them, as follows:

// settings.json
{
  "cssvar.mode": ["warn", {
    "ignore": [
      "^--undeclared",
      "--color-\\w+?"
    ]
  }]
}

For details check the examples folder