Scripts: lint-styles --fix tries to fix all files when passing the list of files

[scruffian]

I'm trying to use wp-scripts to lint the Sass and CSS files in the themes repo. It works well to catch errors in staged files (using lint-staged) but when I pass the --fix argument to the command it tries to fix all the files in the repo, not just those that are staged. You can see the PR here: Automattic/themes#3611

cc @gziolo since you worked on #15890

[gziolo]

I don't immediately see examples of passing multiple files to stylelint in their docs: https://stylelint.io/user-guide/usage/cli.

@ntwb, do you know why the following in packages.json doesn't work as expected:

	"lint-staged": {
 		"*.{css,scss}": [
 			"wp-scripts lint-style --fix"
 		]
 	},

I can reproduce it also in Gutenberg.

[gziolo]

It looks like the implementation of minimist isn't ideal in:

gutenberg/packages/scripts/utils/cli.js

Line 24 in 176748c

const getFileArgsFromCLI = () => minimist( getArgsFromCLI() )._;

So the issue is that it assumes that --fix is a modifier that can be followed up with a value so it completely ignores the first path passed. The quick way to make it work could be the following:

wp-scripts lint-style --fix=

In general, if there is more than one file passed by lint-staged it should work without any changes for all passed files but the first one ...

[t-hamano]

@gziolo

I added the option ({boolean: true}) and it appears to have parsed correctly.
Is this approach appropriate? 🤔

const minimist = require("minimist")

// Not correctly parsed...
console.log( minimist(['--fix', 'aaa.scss', 'bbb.scss', 'ccc.scss'])._ );
// Correctly parsed (temporary Fix equal sign)
console.log( minimist(['--fix=', 'aaa.scss', 'bbb.scss', 'ccc.scss'])._ );
// Correctly parsed (use boolean option)
console.log( minimist(['--fix', 'aaa.scss', 'bbb.scss', 'ccc.scss'], {boolean: true})._ );

[gziolo]

@t-hamano, that looks promising. Let's try that approach 👍🏻

Good news is that native experimental args parsing came to Node 18.3:

https://nodejs.org/api/util.html#utilparseargsconfig

They develop it also as a package available on npm: https://github.com/pkgjs/parseargs.