Doesn't lint @import scss in Vue SFC <style> block

[ModyQyW]

Importing a test.scss in that scope doesn't lint that test.scss still (it does compile!)

index.vue:

<style lang="scss" scoped>
@import "test";
</style>

test.scss:

.glorp {
  margin: 0;
  font-size: 40px;
      padding: 12px;
        clor: yellow;
}

test.scss DOES compile; but does NOT lint

Bare in mind: Running my linter via NPM does pickup the error:
script in package.json:
"lint:css": "stylelint ./**/*.{vue,scss} --fix",

npm run lint:css

> piniata@0.0.0 lint:css
> stylelint ./**/*.{vue,scss} --fix


src/views/Home/test.scss
 5:9  ✖  Unexpected unknown property "clor"  property-no-unknown

Originally posted by @timenengwerda in #8 (comment)

[ModyQyW]

I did some digging.

First, I add two rows in my plugin locally. So my plugin will print something I want to see.

Then, I update the vue example package.json and install.

Also update vite.plugin.ts.

Import app.scss.

Run dev. And I get nothing error. But I expected app.scss errors.

[ModyQyW]

No errors in page and console.

No errors in terminal. And I notice that no app.scss is logged.

Visit http://localhost:3001/__inspect/ and I found these.

Vite DOES compiles app.scss, but in an unexpected way. The plugin expects to get app.scss in the transform hook so stylelint can work.

[ModyQyW]

No idea how to fix for now. Any PR or any idea will be appreciated. Thanks!

[timenengwerda]

Perhaps this actually is caused by this Vite issue: vitejs/vite#8224

The comments state that downgrading your Vite version might help but that obviously doesn't(and perhaps can't) fix the issue in this plugin

[ModyQyW]

I am not sure. I think in this case, the file is compiled by postcss and sass so app.scss never comes to the transform hook.

[ModyQyW]

There is a new option called lintOnStart in v3.0.0, which may be helpful for such situations. Please have a try.

[timenengwerda]

There is a new option called lintOnStart in v3.0.0, which may be helpful for such situations. Please have a try.

Thanks for the update!
This gives you an error whenever you start the server(When you fix the error whilst its running the error doesn't clear so you'll have to restart);

It doesn't give lint errors when the devServer is already running though.

[ModyQyW]

It doesn't give lint errors when the devServer is already running though.

Yes. I can't find a neat way to hack into. PR welcome :)

[ModyQyW]

Six months have passed, and I've finally come up with an idea.

Since the transform hook can't handle files introduced by @import, why don't we jump out of the transform hook?

v3.3.0 introduces the chokidar option, which allows you to use chokidar as a listener so that stylelint can handle files introduced by @import! This is a new option, please try it out and give me feedback ❤

[ModyQyW]

I am closing this. Feel free to open another issue if you are facing problems using chokidar option. :)

[timenengwerda]

Thanks for sticking with this issue, it's much appreciated. I've had the chance to test this out. I didnt some searching and made some comments here that do not seem to belong to the stylelintConfig so I'm starting over with my findings:

Stylelinting scss files that are imported seem to work but it has some issues:

• Every mistake logs the entire lint errors. So if I have an indentation and a trailing semicolon error I see two error messages stating both the errors instead of being bundled into one error message (See screenshot)
• the fix: true doesn't work (anymore) in both Vue files and scss files. Having cache true/false doesn't seem to matter.

[ModyQyW]

The second problem has been fixed and will be released in v3.3.2.

Digging he first problem...

[timenengwerda]

Works like a charm! This makes triggering errors a lot harder which makes it perfectly workable for me. Although I do think fixing the first problem is still a big win for everyone.

[ModyQyW]

Should be fine in v3.3.3. But I find another problem in #27.