[vue2] Use lang="scss" .vue file, stylelint not working

[yamanoku]

playground: https://github.com/yamanoku-playground/2021-11-11-postcss-html-issue

---

If it's just a <style>, it works fine, but if you use <lang="scss">, you will get the following error.

npm run lint-css

> 2021-11-11-postcss-html-issue@0.1.0 lint-css /yamanoku/2021-11-11-postcss-html-issue
> stylelint "**/*.vue"

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/yamanoku/2021-11-11-postcss-html-issue/node_modules/postcss-scss/lib/nested-declaration.js:3:33)
    at Module._compile (/yamanoku/2021-11-11-postcss-html-issue/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/yamanoku/2021-11-11-postcss-html-issue/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/yamanoku/2021-11-11-postcss-html-issue/node_modules/postcss-scss/lib/scss-parser.js:4:25)
    at Module._compile (/yamanoku/2021-11-11-postcss-html-issue/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 2021-11-11-postcss-html-issue@0.1.0 lint-css: `stylelint "**/*.vue"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 2021-11-11-postcss-html-issue@0.1.0 lint-css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /yamanoku/.npm/_logs/2021-11-11T03_56_49_433Z-debug.log

If the current playground setup is not enough, I apologize.

[ota-meshi]

Thank you for posting this issue. But the link seems to 404 for me 😅.

[ota-meshi]

As far as I can see in the log, it may be related to the following comment:

stylelint/stylelint#5632 (comment)

If this is the cause, it may work if you use resolutions or explicitly install postcss@^8.

[yamanoku]

Sorry! I've just changed it to public! @ota-meshi
https://github.com/yamanoku-playground/2021-11-11-postcss-html-issue

[yamanoku]

If this is the cause, it may work if you use resolutions or explicitly install postcss@^8.

It's the solution I've been looking for ! thanks you !

> stylelint "**/*.vue"

src/components/HelloWorld.vue
 47:1  ✖  Expected empty line before rule  rule-empty-line-before
 51:1  ✖  Expected empty line before rule  rule-empty-line-before
 55:1  ✖  Expected empty line before rule  rule-empty-line-before

yamanoku-playground/2021-11-11-postcss-html-issue@7b3c551