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.