Fix no files matching the pattern error square brackets and dash

[reumia]

Clearly describe the bug

Succeed cases

• stylelint "./packages/mobile/pages/[channelName]/**/*.scss"
• stylelint "./packages/mobile/pages/**/*.scss"

Failure cases

• stylelint "./packages/mobile/pages/[channelName]/shopping-stories/*.scss"
• stylelint ./packages/mobile/pages/[channelName]/shopping-stories/*.scss

Which version of stylelint are you using?

13.3.3

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

Usually i run stylelint with lint-staged like below,

// package.json
{
  "lint-staged": {
    "*.{scss,css}": [
      "stylelint --fix",
      "git add"
    ]
  },
}

but i tested it common usage like i wrote in top of this document, and i got same result.

What actually happened (e.g. what warnings or errors did you get)?

Following error happened.

Error: No files matching the pattern "./packages/mobile/pages/[channelName]/shopping-stories/*.scss" were found.
    at /Users/user/Workspace/smartstore-global/node_modules/stylelint/lib/standalone.js:211:12
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The terminal process terminated with exit code: 1

[jeddy3]

@reumia Thanks for the report and for using the template.

I've added this issue to #4521, which is a list of the problems with globs and paths that we need help to fix.

I've labelled this issue as ready to implement. Please consider contributing if you have time.

[m-allanson]

Hey @reumia, thanks for reporting this issue. Could you create a small example that reproduces the problem?

As I couldn't get one of your success cases to work.

For me, these are the failure cases:

• stylelint "./packages/mobile/pages/[channelName]/**/*.scss"
• stylelint "./packages/mobile/pages/[channelName]/shopping-stories/*.scss"
• stylelint ./packages/mobile/pages/[channelName]/shopping-stories/*.scss

These all fail for the same reason. They're globs mixed with directory paths that contain special characters. These special characters are valid globbing characters and valid directory names. There's no simple way for stylelint to know which part of the string is a path, and which part is a glob.

In your examples the *.scss part is a glob and the [channelName] part is a literal path. This causes problems because [ and ] are valid glob characters.

Workarounds

There are a few ways you can work around this:

• Glob a directory path that has no special characters e.g. ./packages/mobile/pages/**/*.scss.
• Use exact file paths. These can contain any special character e.g. ./packages/mobile/pages/[channelName]/sub-dir/my-styles.scss (note this won't work until Fix some path / glob problems #4867 is merged).
• Use stylelint's globbyOptions option to set the cwd, and then use a shorter glob. You can see an example here.
• Manually escape the special characters in the path e.g. ./packages/mobile/pages/\\[channelName\\]/**/*.scss (example).
• Wrap stylelint's globby call to provide your own custom string escaping. @ooxif created an example here.

[alexander-akait]

You can use https://github.com/mrmlnc/fast-glob#escapepathpattern to avoid this problem, before passing it to globby, but it can be small breaking change

[m-allanson]

You can use https://github.com/mrmlnc/fast-glob#escapepathpattern to avoid this problem, before passing it to globby, but it can be small breaking change

This is what happens in #4867 (code link), but it won't fix for patterns like this:

/pages/[channelName]/**/*.scss

As it will escape the whole path, leaving you with a path that doesn't match anything:

/pages/\[channelName\]/\*\*/\*.scss

[reumia]

@evilebottnawi I've tested this already, and it won't work with same reason above.
@m-allanson Thanks for kindly examples.

[reumia]

@m-allanson

Maybe the last solution would be work for me.
Other solutions are not suitable for Next.js, because Next.js's dynamic route based on file structure should contain special characters.

Next.js growing up fast in recently, so i hope stylelint support this issue.

thx.

[m-allanson]

@reumia I think the first workaround should handle this? It's also one of the success cases that you originally described.

e.g. with the following directory structure:

.
└── pages/
    ├── [channelName]/
    │   ├── styles.scss
    │   └── util.scss
    └── foo/
        ├── styles.scss
        └── util.scss

This should lint all four files:

stylelint "./pages/**/*.scss"

I'm not so familiar with lint-staged, but it looks like there are some similar workarounds on this thread: lint-staged/lint-staged#676

[tmcdos]

If you are using the Webpack plugin - here is a patch for this issue which can be applied through custompatch

Index: \stylelint-webpack-plugin\dist\utils.js
===================================================================
--- \stylelint-webpack-plugin\dist\utils.js
+++ \stylelint-webpack-plugin\dist\utils.js
@@ -1,5 +1,6 @@
 "use strict";
+const UNESCAPED_GLOB_SYMBOLS_RE = /(\\?)([()*?[\]{|}]|^!|[!+@](?=\())/g; // TMCDOS
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,9 +13,9 @@
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function parseFiles(files, context) {
-  return (0, _arrify.default)(files).map(file => replaceBackslashes((0, _path.join)(context, '/', file)));
+  return (0, _arrify.default)(files).map(file => /*(0, _path.join)*/(replaceBackslashes(context).replace(UNESCAPED_GLOB_SYMBOLS_RE, '\\$2') + '/' + replaceBackslashes(file))); // TMCDOS - https://github.com/mrmlnc/fast-glob/issues/158
 }
 
 function replaceBackslashes(str) {
   return str.replace(/\\/g, '/');