search

10up / 10up-toolkit

Official 10up asset building toolkit.
113 stars 19 forks source link

Stylelint doesn't work with postcss 8.3.11 [?] #125

Closed xavortm closed 2 years ago

xavortm commented 2 years ago

Describe the bug

Running linting in a project outputs the following error:

✔ Cleaning up...

✖ 10up-toolkit lint-style:
TypeError: opts.node.rangeBy is not a function
    at new Warning (/Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/postcss/lib/warning.js:9:29)
    at Result.warn (/Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/postcss/lib/result.js:26:19)
    at reportUnknownRuleNames (/Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/stylelint/lib/reportUnknownRuleNames.js:70:16)
    at /Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/stylelint/lib/lintPostcssResult.js:71:7
    at Array.map (<anonymous>)
    at lintPostcssResult (/Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/stylelint/lib/lintPostcssResult.js:70:19)
    at lintSource (/Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/stylelint/lib/lintSource.js:88:8)
    at async /Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/stylelint/lib/standalone.js:218:27
    at async Promise.all (index 0)
    at async standalone (/Users/alex/sites/<project-name>/wordpress/wp-content/node_modules/stylelint/lib/standalone.js:257:22)
npm ERR! code 1
npm ERR! path /Users/alex/sites/<project-name>/wordpress/wp-content
npm ERR! command failed
npm ERR! command sh -c lint-staged

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alex/.npm/_logs/2021-12-20T11_41_22_742Z-debug.log
husky - pre-commit hook exited with code 1 (error)

After searching for what is the case, I found this issue: https://github.com/stylelint/stylelint/issues/5766 and it seems that updating the postCSS version should fix it.

Also started with a fresh install of stylelint@14.1.0 and stylelint-config-standard-scss@3.0.0. Ran into the same error described above. Installed postcss@8.4.4 as @BroFox86 did, and the error is gone.

Steps to Reproduce I can't confirm if the steps would work as I am working on a new project that uses "10up-toolkit": "^1.0.0".

  1. Go to project wp-content
  2. Run npm run watch
  3. Make some Sass changes
  4. Commit your work
  5. See error on the formatting task check when Running tasks for *.scss

Expected behavior

No errors;

Screenshots

Environment information

WordPress information M/A

Additional context

nicholasio commented 2 years ago

@xavortm can you try with 10up-toolkit v2 that has just been released?

gthayer commented 2 years ago

I am having a similar issue and using v2 does not resolve it.

gthayer commented 2 years ago

I was able to solve this on my project by:

It seems there is a bug with Postcss v8.4.4 and some linting tools. In my case it was either:

Forcing the most recent Postcss seemed to correct the problem.

nicholasio commented 2 years ago

Thanks @gthayer . Looks like we can just update postcss to the latest version in 10up-toolkit to mitigate this problem.

Additionally, this might be already a non-issue for most users as new install of 10up-toolkit would already install the latest postcss version.

nicholasio commented 2 years ago

Fixed in #135