Open selimdoyranli opened 1 year ago
💎 $20 bounty created by @selimdoyranli 👉 To claim this bounty, submit your pull request on Algora 📝 Before proceeding, please make sure you can receive payouts in your country 💵 Payment arrives in your account 2-5 days after the bounty is rewarded 💯 You keep 100% of the bounty award 🙏 Thank you for contributing to nuxt-modules/stylelint!
Hi @selimdoyranli Sorry for delay...
This module uses the vite-plugin-stylelint
plugin under the hood.
Try enabling the chokidar
option
See https://github.com/ModyQyW/vite-plugin-stylelint#chokidar
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
...
modules: [
[
'@nuxtjs/stylelint-module',
{
chokidar: true
}
]
]
})
Hi @selimdoyranli Sorry for delay...
This module uses the
vite-plugin-stylelint
plugin under the hood.Try enabling the
chokidar
option See https://github.com/ModyQyW/vite-plugin-stylelint#chokidar// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ ... modules: [ [ '@nuxtjs/stylelint-module', { chokidar: true } ] ] })
It didn't work. Please try editing the _general.scss file (in this structure: https://stackblitz.com/github/selimdoyranli/nuxt3-boilerplate-issue) to debug the issue. For example, in this file body scope's color: red; (this banned rule) When I type, I should see an error message on the browser screen after HMR, but I don't. Only error message appears in terminal
Hi @selimdoyranli Sorry for delay... This module uses the plugin under the hood.
vite-plugin-stylelint
Try enabling the option See https://github.com/ModyQyW/vite-plugin-stylelint#chokidar`chokidar`// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ ... modules: [ [ '@nuxtjs/stylelint-module', { chokidar: true } ] ] })
It didn't work. Please try editing the _general.scss file (in this structure: https://stackblitz.com/github/selimdoyranli/nuxt3-boilerplate-issue) to debug the issue. For example, in this file body scope's color: red; (this banned rule) When I type, I should see an error message on the browser screen after HMR, but I don't. Only error message appears in terminal
Actually, I can't use Nuxt3 due to this issue 🤣.If there is a bug I guess other developers may see this as a serious problem when migrating to nuxt3. (fyi @ricardogobbosouza @pi0 @manniL and I would appreciate your assistances) This problem doesn't occur when I'm using Nuxt2. Stylelint is important for me. Sorry for the spam.
Using the chokidar
option, the vite plugin does not use transform
and therefore the results only appear in the console
/attempt #89
/attempt #89
hi @selimdoyranli, the reason that vite build did not error out, was most likely because the underlying library vite-plugin-stylelint
does not support failing builds on stylelint errors.
I've PR-ed to vite-plugin-stylelint
to add the capability to failOnError
. That should resolve the issue.
vite-plugin-stylelint
supports failing builds on Stylelint errors. However, there are some exceptions.
lintInWorker
. Since the plugin is linting in worker, no plugin context that can be used. So we can't fail builds in this case.chokidar
. To be honest, I think we can use plugin context in this case. But I test and find it failed, see https://github.com/ModyQyW/vite-plugin-stylelint/blob/main/src/index.ts#L95. Appreciate it if someone sends me a PR and fixes this, or I will back to it later.@raphlcx Hey! Thanks for your PR! But I think it is going in the wrong direction. Correct me if I'm wrong. Thanks! 🙏
Actually, for Nuxt3 / Vite, would setting error on the plugin context prevent HMR from updating the browser? Should we utilise Vite's HMR API instead for handling or intercepting HMR updates?
Here's my experiment with nuxt-modules/eslint
, which also sets error on plugin context.
First, I start the dev server using npm run dev
.
Then, I intentionally modify Hello.vue
to include non-compliant scripts:
// src/components/Hello.vue
<template lang="pug">
h1.hello hello 1
</template>
<script lang="ts">
console.log(1);
console.log(2);
</script>
<style lang="scss" src="./Hello.scss"></style>
And I noticed there's a number of ESLint errors on the terminal console:
..../src/components/Hello.vue
6:15 error Delete ; prettier/prettier
6:15 error Extra semicolon semi
7:15 error Delete ; prettier/prettier
7:15 error Extra semicolon semi
✖ 4 problems (4 errors, 0 warnings)
4 errors and 0 warnings potentially fixable with the --fix option.
However, on my browser at localhost:3000
, I'm still seeing successful console.log()
calls on the browser console:
[vite] connecting... client.ts:18:8
[vite] connected. client.ts:133:14
1 Hello.vue:6:13
2 Hello.vue:7:8
<Suspense> is an experimental feature and its API will likely change. deps:1358:43
So, even by setting error on plugin context, the nuxt modules for ESLint also did not prevent HMR from delivering its updates to the browser, perhaps because it's not utilisng the HMR API? I might also be missing out something here.
https://github.com/nuxt-modules/stylelint/issues/89 is trying to handle this issue.
/attempt #89
I was using nuxt2 + @nuxtjs/style-resources + @nuxtjs/stylelint-module in my previous projects. It was working fine in my previous projects. I decided to switch to nuxt3, I'm using nuxt3 + @nuxtjs/stylelint-module in a project I've just tried, but as I mentioned in the title, the module does not lint on scss files imported with @import. By the way I don't use @nuxtjs/style-resources as I can provide global scss with vite in my nuxt3 project.
In all other files, namely in .vue files, lint works as SFC, in .scss files in the components folder, in my /scss/app.scss entry point. But the lint doesn't work for the scss files I imported with the @import method in my /scss/app.scss file.
nuxt config of my nuxt3 project;
app.scss entry point file on my project;
.stylelintrc.js
package.json
My nuxt3 project and doesn't work on this, check link for the directory structure on my project:
https://stackblitz.com/github/selimdoyranli/nuxt3-boilerplate-issue
In addition my nuxt2 project and it works on this https://stackblitz.com/github/selimdoyranli/nuxt2-boilerplate