stylelint-config-recommended-scss "doesn't provide postcss, requested by postcss-scss"

[pgnd]

with

yarn --version
	3.2.0-rc.8

yarn info --name-only| egrep "postcss@|postcss-scss|stylelint-config"
	├─ postcss@npm:8.4.5
	├─ postcss-scss@npm:4.0.2
	├─ stylelint-config-standard-scss@npm:3.0.0

and yarn exec reports,

yarn
	➤ YN0000: ┌ Resolution step
???	➤ YN0002: │ stylelint-config-recommended-scss@npm:5.0.2 [577f4] doesn't provide postcss (p9d028), requested by postcss-scss
	➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
	➤ YN0000: └ Completed
	➤ YN0000: ┌ Fetch step
	➤ YN0000: └ Completed in 0s 210ms
	➤ YN0000: ┌ Link step
	➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
	➤ YN0000: └ Completed
	➤ YN0000: Done with warnings in 0s 498ms

where

yarn explain peer-requirements p9d028
	➤ YN0000: stylelint-config-recommended-scss@npm:5.0.2 [577f4] doesn't provide postcss, breaking the following requirements:

	➤ YN0000: postcss-scss@npm:4.0.2 [54149] → ^8.3.3 ✘

is this a fix needed in s-c-r-s? postcss*? or local config?

[kherock]

I'm seeing this as well, the peer is missing in both places. I need this in my packageExtensions for the preset to work

packageExtensions:
  stylelint-config-recommended-scss@*:
    peerDependencies:
      postcss: '8'
  stylelint-config-standard-scss@*:
    peerDependencies:
      postcss: '8'

[sinedied]

I'm seeing this as well, and even worse it cause stylelint to crash:

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/Users/sinedied/projects/generator-ngx-rocket/sample/node_modules/postcss-scss/lib/nested-declaration.js:3:33)
    at Module._compile (/Users/sinedied/projects/generator-ngx-rocket/sample/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (/Users/sinedied/projects/generator-ngx-rocket/sample/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/sinedied/projects/generator-ngx-rocket/sample/node_modules/postcss-scss/lib/scss-parser.js:4:25)
    at Module._compile (/Users/sinedied/projects/generator-ngx-rocket/sample/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)

If I add postcss with yarn add postcss the error goes away.

Interestingly, if I use npm@7 I have no warning, and postcss is correctly installed in the node_modules folder. So it seems related to how yarn resolves dependencies.

[pgnd]

@tom-ricci @jeddy3

is

Fix postcss-scss module resolution when other postcss versions are present
#87

relevant here?

[tom-ricci]

I don't use yarn so I'm not sure, but if I'm understanding the error message correctly it could be that stylelint-config-recommend-scss doesn't have postcss as a dependency. Anything patched for #87 resolves dependencies relative to itself instead of the root of the project to fix a bug with how node handles dependency resolution, so maybe postcss-scss needs postcss to be a dependency of stylelint-config-recommended-scss because stylelint-config-recommended-scss resolves it's dependency of postcss-scss (patched for #87), and postcss-scss requires postcss, which is now needed as a dependency of stylelint-config-recommended-scss because that's where postcss-scss is resolving postcss. Hopefully that makes sense.

Also, that assumes stylelint-config-recommended-scss was patched for #87. I don't remember if it was or if standard was patched; I'll check later.

[pgnd]

Hopefully that makes sense.

hehe, well ... even as a "yarn user", let's say I'm unclear as to what's the tail vs the dog !
staring at the yarn.lock file, I see

grep ^\"postcss-scss@ yarn.lock -A7
	"postcss-scss@npm:^4.0.2":
	  version: 4.0.2
	  resolution: "postcss-scss@npm:4.0.2"
	  peerDependencies:
	    postcss: ^8.3.3
	  checksum: b6506c1d9bc86f056e34c537447a35d2a90bc9f6afcffea9c5a8bf265334234592150c862351db9334e9b9109209ada023783ce22e56ca51221c1106591423d4
	  languageName: node
	  linkType: hard

"8.3.3" shows up in peerDependencies, which is mentioned above in comment by @kherock

now, as to where a fix belongs ... ?

[tom-ricci]

Unless there's a way to have peers of a dependency installed at the dependency's location (besides the "peerDependencies" param), I'd assume stylelint itself needs a fix.

Since postcss-scss is being resolved at stylelint-config-recommended-scss's location instead of the root of the project, a peer needs to exist in the package's location (./.node_modules/stylelint-config-recommended-scss). If that's not possible, stylelint itself needs a custom way to resolve the customSyntax param in configurations because currently it uses Node's require(), which won't work if installing peers in dependency locations is impossible. More info

hehe, well ... even as a "yarn user", let's say I'm unclear as to what's the tail vs the dog !

Yeah I'm not amazing at explaining things (I also wrote that 10 minutes after I woke up), this might explain the issue better.

[kherock]

postcss-scss has a peer dependency on postcss@8, and this project (which depends on postcss-scss) doesn't provide it. This repo in particular must add "postcss": "*" or "postcss": "8" to its package.json peerDependencies. You cannot reasonably expect require("postcss-scss") to work correctly when it's ambiguous as to who is providing an appropriate version of postcss.

[tom-ricci]

This repo in particular must add "postcss": "*" or "postcss": "8" to its package.json peerDependencies.

If I'm correct, this would mean people would need to include postcss 8 at the root of their projects (since it's a peer), which would essentially break the fix from #87 because we're require("postcss-scss")ing in the config of this dependency so people don't have to install postcss 8 at the root of their project, since a lot of the JS community isn't able to update to postcss 8. Is there any other way we could resolve postcss 8 without it being in the root of the project?

[pgnd]

@tom-ricci

Is there any other way we could resolve postcss 8 without it being in the root of the project?

asked for a pointer re: this issue from dev @ discord:yarn. comment came back, pointing again to @kherock 's post, above:

"Seems like #89 (comment) details what the issue and fix is" ... "which shows some packageExtensions that are supposed to fix it"

seems like that's the recommendation.

[tom-ricci]

Yeah, I saw that comment. I was just wondering if there was another solution 😅, probably should've mentioned that.

[joswhite]

sinedied commented on Dec 14, 2021

I'm seeing this as well, and even worse it cause stylelint to crash:

TypeError: Class extends value undefined is not a constructor or null

I got the same error. The problem is caused because css-loader@3.2.0 provides version postcss@7.0.17, and stylelint-config-recommended-scss expects but doesn't provide a newer version. When the postcss version 7 code executes, the error is thrown. It's too bad the error gets thrown this way, instead of making the user aware of the problem.

Of course, the fix is to add postcss version 8 to my project's dependencies.

Alternatively, upgrading to webpack 5 would allow me to upgrade my version of css-loader, which now provides postcss@8.4.12. Some of us aren't ready to upgrade though, so we get to debug this instead. 🤦 😃

[vralle]

postcss-scss now in overrides?

[dobesv]

Have to add postcss as a dependency or peerDependencies. Could mark it as optional using peerDependenciesMeta ?