TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous> - PostCSS < v8 + Stylelint v14 compat issue

[bjankord]

This issue seems to happen with the v9.0.0 release of stylelint-config-sass-guidelines and is related to stylelint v14 release.
In stylelint v14.0.0, the syntax option and automatic inferral of syntax was removed.

Prior to stylelint v14.0.0, stylelint was able to parse CSS-like languages like SCSS without extra dependencies. Now they recommend using postcss-scss in your stylelint config via "customSyntax": "postcss-scss",

The customSyntax": "postcss-scss" syntax was recently added to this config in this PR to update this config to use stylelint v14.

Currently, postcss-scss has a peer dependency on postcss v8.3.3:
https://github.com/postcss/postcss-scss/blob/main/package.json#L35-L37

Peer dependencies can typically be interpreted as the project that uses postcss-scss should pull in v8.3.3 version of postcss on their own as postcss-scss is dependent on it.

When reviewing the PR for the update this config to stylelint v14, the dependency tree had postcss v8 via transitive dependencies. The unit tests and manual tests passed and stylelint ran successfully on this project's SCSS files.

I noticed this TypeError issue in another project that uses stylelint-config-sass-guidelines when updating it to v9.0.0.
The dependency tree in the project currently uses postcss v7.

Running the following npm script "stylelint": "stylelint '**/*.scss'" in the project that used
stylelint-config-sass-guidelines@9.0.0 and had postcss v7 in it's dependency tree resulted in the error TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous>

My understanding is if your dependency tree uses a version of postcss less than v8, you'll likely see the following error when running stylelint with this stylelint-config-sass-guidelines@9.0.0 config:

TypeError: Class extends value undefined is not a constructor or null  at Object.<anonymous>
(/Users/username/repos/open-source/project-name/node_modules/postcss-scss/lib/nested-declaration.js:3:33)

[bjankord]

There are two options that come to mind to mitigate this, set up a peerDependecy on postcss in this npm package similar to the same version that postcss-scss uses.

Alternatively, I can set up postcss as a dependency in this config and set at the same version that postcss-scss lists as a peerDependency.

Typically I lean towards setting it up as a peerDependency similar to how stylelint is set up in this package currently:
https://github.com/bjankord/stylelint-config-sass-guidelines/blob/main/package.json#L37-L38

On the flip side, I know people often ignore peerDependency warnings, if a package has a peerDependency and its not in your dependency tree, (node_modules), yarn and npm (v4-v6) will warn about it I believe and I think in npm 7 will auto install peer dependencies. Setting postcss as a dependency in this project should help people running into this error.

For now, I'm planning to set postcss as a peerDependency in this config to the same version postcss-scss sets the peerDependency on postcss and pass the responsibility to projects consuming this config to install the needed version of postcss.

If more people run into this issue, I'll likely move to switch postcss from a peerDependency in this package to a dependency as I know people often overlook the peerDependency warnings and will likely be confused by this error message:

TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous>

[bjankord]

Found some related issues:

• Cannot resolve custom syntax module "postcss-scss" stylelint-scss/stylelint-config-standard-scss#2 (comment)
• Fix custom syntax module path not properly resolving stylelint/stylelint#5632 (comment)

It seems if you can not upgrade the root version of postcss to v8 in your projects, you will not be able to use stylelint scss based configs.