Hi @vunguyentuan,
Thank you for this extension in addition to your other extension vscode-postcss.
The default settings are currently (V2.6.1):
defaultSettings.json
{
...
// Configure glob patterns for excluding files and folders. The extension will not scan variables in these files and folders. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
"cssVariables.blacklistFolders": [
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/.git",
"**/node_modules",
"**/bower_components",
"**/tmp",
"**/dist",
"**/tests"
],
// Configure glob patterns for including files and folders. Read more about glob patterns [here](https://code.visualstudio.com/docs/editor/codebasics#_advanced-search-options).
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less"
],
// Traces the communication between VS Code and the language server.
"cssVariables.trace.server": "off",
...
}
I think those default are good.
I want to use Open-Props and luckily I see in your FAQ that all I have to do is to modify my settings.json and add this:
{
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/open-props/open-props.min.css"
],
}But it doesn't work on my end.
I found out that to fix that I have to modify cssVariables.blacklistFolders as well in order to not skip the node_modules folder entirely.
So now my settings.json looks like this:
defaultSettings.json
{
"cssVariables.blacklistFolders": [
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/.git",
"**/bower_components",
"**/tmp",
"**/dist",
"**/tests"
],
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/open-props/open-props.min.css"
],
}
And now it works on my end.
But now the whole node_modules is scanned for any .css|.scss|.sass|.less files
and then the addition of "node_modules/open-props/open-props.min.css" in cssVariables.lookupFiles is not necessary anymore and it still work without.
I don't think it's good to not exclude most of the "node_modules" folder.
While we could be more selective in the lookupFiles option, I think it's better to leave it more general.
I personnally set all my settings in the user settings instead of in the .vscode folder of the workspace.
So general is what I am looking for.
Is it posible to make lookupFiles "overwrite" blacklistFolders in such a manner that if we have:
{
"cssVariables.blacklistFolders": [
"**/node_modules",
],
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"**/node_modules/open-props/open-props.min.css"
],
}The "node_modules" folder will be entirely skipped except for the files that match "**/node_modules/open-props/open-props.min.css" ?
I understand the issue here of how to have glob patterns to lookup while excluding folders...
Even if we could add a regex to the glob pattern like
"**/Regex(/node_modules\/(?!open-props\b).*/)"
that would exclude all node_modules subfolders except the open-props folder,
because of the general lookupFiles rule "**/*.css", the extension captures all the css files in this folder and it hurts the user experience as we include variables that we are not supposed to.
Example with Open-props, if we had import open-props.min.css only, we would not see all the "hsl" var such as "--blue-0-hsl".
Proposal
Add a settings called lookupFilesOverwrite (name can be change of course) that behave exactly like the current lookupFiles but without the excluding rule of blacklistFolders.
The pseudo-logic would then be:
- Start scan.
- Match the files with the glob patterns listed in
lookupFilesOverwrite.
- Skip all folders that match the glob patterns listed in
blacklistFolders.
- In the remaining folders, match the files with the glob patterns listed in
lookupFiles.
Advantages:
The default settings lookupFiles and blacklistFolders stays the same and are general enough for most users.
The additional settings lookupFilesOverwrite would be by default an empty list.
The user would need to add the external css package located in node_modules only in the lookupFilesOverwrite list.
Example with Open-props, the general end user would need to add in the settings.json file this:
{
"cssVariables.lookupFilesOverwrite": [
"**/node_modules/open-props/open-props.min.css"
],
}
Disadvantages:
The addition of one settings, which go against the idea of zero config I see you like.
(I would arg that with the addition of this setting, there would be less settings to actually set for the end users as we can see from the examples.)
That's it. what do you think of it ?
Again, thank you for this amazing extension.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent