Support paths with parenthesis and square brackets

[thegrandpoobah]

Clearly describe the bug

I upgraded the dependencies of a project recently and the following packages got upgraded:

stylelint from 8.3.0 to 11.1.1
stylelint-webpack-plugin from 0.10.5 to 1.0.3

Other packages got upgraded, but I think these two are the only relevant ones.

Prior to the upgrade, stylelint would work fine as part of webpack's build process, but after this upgrade, I get the following error in my console whenever I invoke webpack:

Error: No files matching the pattern "/home/redacted/Documents/freelance/path with (parens) in it/src/**/*.s?(c|a)ss" were found.

After a bit of headscratching I decided to create a link to this directory somewhere else on my system that doesn't have parenthesis in the path and run it from there (in particular the path I tried is /home/sahab/Documents/nomoreparens). Under the path with no parens, stylelint works fine as part of webpack.

It looks like a regression between styleline 8.3.0 and 11.1.1

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

As part of webpack using stylelint-webpack-plugin 1.0.3

What did you expect to happen?

Non breaking change between 8.3.0 and 11.1.1

The reason I think this is part of stylelint and not stylelint-webpack-plugin is because the code responsible for calling stylelint has not really changed in that webpack plugin.

see 0.10.5 version:

https://github.com/webpack-contrib/stylelint-webpack-plugin/blob/b244ff7f6298447eca44f502d6ae750233839ce5/lib/linter.js#L5

see 1.0.3 version:

https://github.com/webpack-contrib/stylelint-webpack-plugin/blob/master/src/linter.js#L10

stylelint-web-pack-plugin does not do any preprocessing of the path prior to passing it to stylelint. Arguably it should escape the spaces, but again, this behaviour seems to be different now.

[hudochenkov]

It's either your configuration or stylelint-webpack-plugin issue. Paths with spaces and globs should be in quotes:

# this won't work
stylelint path with spaces/*.css

# this will work
stylelint "path with spaces/*.css"

[vankop]

@hudochenkov plugin uses Node.js API

[thegrandpoobah]

The webpack configuration used for the webpack plugin:
https://github.com/ericalli/static-site-boilerplate/blob/2b5082fe71c56ad3a41ae1fe318f4e19447f051f/config/webpack.plugins.js#L51

Running from the command prompt in a path with spaces (stylelint 11.1.1):

sahab@redacted:~/Documents/freelance/path with spaces$ ./node_modules/stylelint/bin/stylelint.js "/home/redacted/Documents/freelance/path with spaces/src/**/*.s?(c|a)ss"
Error: No files matching the pattern "/home/redacted/Documents/freelance/path with spaces/src/**/*.s?(c|a)ss" were found.
    at /home/redacted/Documents/freelance/path with spaces/node_modules/stylelint/lib/standalone.js:196:12
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Running from the command prompt but linked as a path without spaces (stylelint 11.1.1):

sahab@redacted:~/Documents/nospaces$ ./node_modules/stylelint/bin/stylelint.js "/home/redacted/Documents/nospaces/src/**/*.s?(c|a)ss"

../../../../src/stylesheets/styles.scss
 79:24  ✖  Unexpected invalid hex color "#fa"   color-no-invalid-hex

Running from the command prompt on a path with spaces (8.3.0):

sahab@redacted:~/Documents/freelance/path with spaces$ ./node_modules/stylelint/bin/stylelint.js "/home/redacted/Documents/freelance/path with spaces/src/**/*.s?(c|a)ss"

src/stylesheets/styles.scss
 79:24  ✖  Unexpected invalid hex color "#fa"   color-no-invalid-hex

Hopefully that helps!

[vankop]

@thegrandpoobah could you please provide small reproducible repo?

[alexander-akait]

I think same problem #4193 (spaces in path #4193 (comment)), here solution https://github.com/eslint/eslint/blob/d08683e3c807f92daf266894093c70f8d5ac6afa/lib/cli-engine/file-enumerator.js#L292

[thegrandpoobah]

Whilst trying to create a minimum reproducible repo, I realized the problem isn't necessarily spaces, its actually the parenthesis in the path.

Here is the repo: https://github.com/thegrandpoobah/stylelint4388

I will update the description and issue title to match

[hudochenkov]

Thank you, @thegrandpoobah. It looks like the same issue as #4193.

[matthewphiong]

Same problem when linting Next.js source files that have dynamic routing path (square brackets) via lint-staged.

Error: No files matching the pattern "/Some/path/src/pages/[id]/index.js" were found.

Tried escaping but no luck.

[jeddy3]

Labeling as "bug" and "help wanted".

[mbrowne]

@matthewphiong Regarding "Next.js source files that have dynamic routing path (square brackets)", did you ensure that you're running the latest version of stylelint? Upgrading fixed it for me. Note that unlike with prettier, for stylelint you don't need to escape the filenames (at least not for the sake of square brackets).

To use it with lint-staged, this config in package.json works fine for me after upgrading:

  "lint-staged": {
    "*.{ts,tsx,css}": ["stylelint"]
  }

[vankop]

I can not find issue with no glob, but this is a case that you looking for. Problem is that glob understand brackets as a part of glob pattern..

@jeddy3 I suggest to design and implement no-glob instead of trying to fix this

[matthewphiong]

@mbrowne Just tested with the latest version, v13.0.0 and it worked. Was running v12.0.0 previously.

[jeddy3]

I suggest to design and implement no-glob instead of trying to fix this

I think the proposal (in #4521) is to replicate how ESLint deals with all these glob issues. I don't think there's a no-glob option in ESLint so they must have found a solution to the problem that doesn't force the user to use an additional flag.

[mbrowne]

Are we sure this is still an issue with the latest version of stylelint? I just tried running the same command for stylelint and eslint:

yarn stylelint "**/*.{ts,tsx,js}"
yarn eslint "**/*.{ts,tsx,js}"

Both were able to find and scan this file in my project:
src/pages/galleries/[galleryId]/index.page.tsx

[alexander-akait]

The problem when you use:

yarn stylelint "src/pages/galleries/[galleryId]/index.page.tsx"

[mbrowne]

That works too. Actually it even works without the quotes, at least on Mac:

yarn stylelint src/pages/galleries/[galleryId]/index.page.tsx

I'm running stylelint 13.0.0.

[matthewphiong]

I'm getting this error again, on a new project. Had the latest version of both lint-staged and stylelint.

"lint-staged": "^10.0.8",
"stylelint": "^13.2.0",

[ooxif]

FYI I just wrapped stylelint's CLI to fix the problem
https://gist.github.com/ooxif/2f005bc7c50126bba67fe2c29c4f8944
It's dirty, but works

[hudochenkov]

It looks like it should be fixed in the latest 13.7.2 release. @thegrandpoobah, could you check, please?

[thegrandpoobah]

I added another test case for 13.7.2 (see the readme for how to test): https://github.com/thegrandpoobah/stylelint4388

It still doesn't map to the results in 8.3.0 like this bug says, but maybe what 13.7.2 does is the correct behaviour at this point. I'm not sure.