Doesn't work with vue+scss

[santiagoarizti]

I make the same "errors" in both a .scss file and a .vue file and I cannot get stylelint to detect the vue file errors using the cli.

Steps to reproduce:

• follow instructions in the readme of this repo
• run npx stylelint my-file.scss and I get errors reported
• run npx stylelint my-file.vue and I don't get errors reported

Note: if I change my style block in the vue file to normal css (<style lang="scss"> => <style>) then the errors are reported ok.

My Setup

package.json (relevant bits)

{
  "devDependencies":  {
      "vue": "^3.2.24",
      "postcss-html": "^1.3.0",
      "stylelint": "^14.2.0",
      "stylelint-config-standard-scss": "^3.0.0",
      "stylelint-config-standard-vue": "^1.0.0",
  }
}

.stylelintrc.yaml

# .stylelintrc.yaml
extends:
  - stylelint-config-standard-scss
  - stylelint-config-standard-vue/scss

My vue file style block

<style lang="scss">
    // expect camel case error
    .santVeamos {
        color: red;
        font-size: 4em;
    }
    // expect empty error
    .empty {}
</style

My normal scss file (exactly same contents as vue style block)

    // expect camel case error
    .santVeamos {
        color: red;
        font-size: 4em;
    }
    // expect empty error
    .empty {}

cli output

➜  $ npx stylelint {my-file.vue,my-file.scss}

my-file.scss
  4:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
  8:11  ✖  Unexpected empty block                    block-no-empty

As you see only errors from the .scss file are reported.

cli output when I remove the lang="scss" part from my file

➜  $ npx stylelint {my-file.vue,my-file.scss}

my-file.scss
 4:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 8:11  ✖  Unexpected empty block                    block-no-empty        

my-file.vue
 75:5   ✖  Expected class selector to be kebab-case  selector-class-pattern
 80:12  ✖  Unexpected empty block                    block-no-empty

[santiagoarizti]

replying to my own issue, perhaps the documentation of this package should enphasize on installing also postcss-scss manually,

I only found that recommendation here: https://github.com/ota-meshi/postcss-html

After installing postcss-scss then stylelint started recognizing my vue SFCs scss style blocks.

[santiagoarizti]

Also, perhaps there should be an error in the console when running without required packages