Thank you for this extension in addition to your other extension vscode-postcss.
The default settings are currently (V2.6.1):
defaultSettings.json
```jsonc
{
...
// 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:
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.
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:
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:
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.
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
```jsonc { ... // 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: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 thenode_modules
folder entirely.So now my
settings.json
looks like this:defaultSettings.json
```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
filesand then the addition of
"node_modules/open-props/open-props.min.css"
incssVariables.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: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 currentlookupFiles
but without the excluding rule ofblacklistFolders
.The pseudo-logic would then be:
lookupFilesOverwrite
.blacklistFolders
.lookupFiles
.Advantages:
The default settings
lookupFiles
andblacklistFolders
stays the same and are general enough for most users. The additional settingslookupFilesOverwrite
would be by default an empty list. The user would need to add the external css package located in node_modules only in thelookupFilesOverwrite
list.Example with Open-props, the general end user would need to add in the
settings.json
file this: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.