csstools/stylelint-value-no-unknown-custom-properties

Angular compatibility

Closed this issue · 1 comments

In angular projects, there is an angular.json file, where we can define a list of style sheets to import in the app (see https://angular.io/guide/workspace-config#additional-build-and-test-options). Then, the css variables defined in these root sheets don't necessary need to be imported via @import to be available in others css files.

In the pluggin, with the configuration property importFrom: ["/my-css.css"], the declared file seems to be used only when @import my-css.css is present in the file where the variable is used. So all the usages of my variables are in error, when they shouldn't, as they are declared in a root file.

Is there a way to add a new stylelint configuration property of style file paths, as importFrom one, used by the pluggin to search for variable declarations even if there is no @import statement in the file containing the variable usages?

Examples:
my-root-style.css

:root {
  --green: green;
}

my-other-style.css

body {
  color: var(--green);
}

This should be valid with a stylelint config file containing :

 rules: {
    "csstools/value-no-unknown-custom-properties": [
      true,
      {
        injectFrom: ["/my-root-style.scss"],
      },
    ],
  },

And this should still be invalid with a stylelint config file containing :

 rules: {
    "csstools/value-no-unknown-custom-properties": [
      true,
      {
        importFrom: ["/my-root-style.scss"],
      },
    ],
  },

or

 rules: {
    "csstools/value-no-unknown-custom-properties": [
      true
    ],
  },

This is beyond the scope of this rule.
There are hundreds of frameworks, metaframeworks, ... and we can not add provisions for each of those.