Scss errors are shown only after manual reload or .vue file change

[timenengwerda]

I have a pretty vanilla Vite+Vue3+Eslint+Stylelint project running at the moment to see how the setup works.

I've got everything working properly now except for the stylelinter:

Whenever I make an inline scss error and save it; nothing happens. No error is shown in my terminal or my server HMR overlay.
Only after I refresh my browser manually the error is shown. When I fix the error HMR kicks back in and reloads my page without any issue.

Making another change in my .vue file seems to do the trick aswell to fire off the error belatedly.

Since it's pretty annoying to manually refresh or to make another change in my vue file I'd like stylelint to just show me my error right off the bat.

This is my .vue file with the faulty scss:

<template>
  <div class="glorp">
    <h1>Home index</h1>
  </div>
</template>
<script>
export default {
  name: 'HomeIndex',
};
</script>
<style lang="scss" scoped>
.glorp {
  background: #avc;
}
</style>

Obviously #avc is incorrect; so it shows me the warning(after refresh or other change):

Internal server error: Unexpected invalid hex color "#avc" (color-no-invalid-hex)

My vite.config.js (Located in root, I've tried turning off other plugins etc one-by-one without results)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint';
import StylelintPlugin from 'vite-plugin-stylelint';
import babel from 'vite-plugin-babel';
import { fileURLToPath } from "url";

const esLintConfig = eslintPlugin({
  fix: true,
  cache: false // when cache is true modules are only linted once on startup and when fixed it won't check for errors in the entire file again
});

const styleLintConfig = StylelintPlugin({
  fix: true,
  cache: false
});

export default defineConfig({
  server: {
    host: true
  },
  plugins: [
    styleLintConfig,
    esLintConfig,
    babel(),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

And my stylelint.config.js (located in root)

module.exports = {
  extends: [
    'stylelint-config-standard-scss', // Load the standard stylelint configuration
    'stylelint-config-recommended-vue',
    'stylelint-config-rational-order',
  ],
  plugins: [
    'stylelint-declaration-block-no-ignored-properties', // This plugin checks for ignored properties and throws error if so
  ],
};

And (for what it's worth) my package.json:

{
  "name": "piniata",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint:css": "stylelint ./**/*.{vue,scss} --fix",
    "lint:js": "cross-env NODE_ENV=production eslint src --ext .js --ext .vue --fix"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "cross-env": "^7.0.3",
    "eslint-plugin-vue": "^8.7.1",
    "sass": "^1.51.0",
    "sass-loader": "^12.6.0",
    "stylelint": "^14.8.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
    "vite": "^2.9.9",
    "vite-plugin-babel": "^1.0.0",
    "vite-plugin-eslint": "^1.6.0",
    "vite-plugin-stylelint": "^2.2.2"
  }
}

As an aside: Importing .scss files in my .vue file or just having existing .scss files aren't even detected by my config at all (although it does function and compile properly)

[ModyQyW]

Thanks for your issue. I think it is caused by these.

vite-plugin-stylelint/src/index.ts

Lines 51 to 71 in 40a4101

	async transform(_, id) {
	// id should be ignored: vite-plugin-eslint/examples/vue/index.html
	// file should be ignored: vite-plugin-eslint/examples/vue/index.html
	// id should be ignored: vite-plugin-eslint/examples/vue/index.html?html-proxy&index=0.css
	// file should be ignored: vite-plugin-eslint/examples/vue/index.html
	// id should NOT be ignored: vite-plugin-eslint/examples/vue/src/app.vue
	// file should NOT be ignored: vite-plugin-eslint/examples/vue/src/app.vue
	// id should be ignored: vite-plugin-eslint/examples/vue/src/app.vue?vue&type=style&index=0&lang.css
	// file should NOT be ignored: vite-plugin-eslint/examples/vue/src/app.vue
	const isBlock = id.includes('?');
	const file = normalizePath(id).split('?')[0];
	// avoid double lint
	if (!filter(file) || isBlock) {
	return null;
	}

.

I tried to avoid double lint here before to improve performance, but unfortunately didn't cover the hot update. I will post an updated version as soon as possible. I'm very sorry for the inconvenience.

[timenengwerda]

Thank you for your fast comment. Please keep in mind that it could be this (or a combination) aswell:
vitejs/vite#8224

[ModyQyW]

Please try v2.2.3.

[ModyQyW]

Thank you for your fast comment. Please keep in mind that it could be this (or a combination) aswell: vitejs/vite#8224

Not really I think. Your problem is caused by the plugin ignoring the hot update part.

[timenengwerda]

This works perfectly for in-vue scss(scoped in index.vue as my example shows).
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

[ModyQyW]

This works perfectly for in-vue scss(scoped in index.vue as my example shows). 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

What you add is another issue. So I close this issue for now and open another issue focusing the new one.

[ModyQyW]

Please trace #9.