How to get Stylelint working with Sveltekit

stylelint-svelte.md

Do not waste hours of your life -like I did- trying to get the postcss plugin working

It will pass transformed CSS to the linter to troll you— no matter what.

just load stylelint through a vite plugin.

stylelint.config.cjs

/* I'll leave my config intact in case it is useful but it is not all required, of course */

/** @type {import('stylelint').Config} */
module.exports = {
  cacheLocation: 'node_modules/.cache/stylelint',
  ignoreFiles: [ '.svelte-kit', 'build', 'virtual:', 'node_modules'],

  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-csstree-validator', 'stylelint-no-unsupported-browser-features'],
  rules: {
    'csstree/validator': {
      ignoreAtrules: ['apply', 'tailwind', 'screen'],
      ignoreProperties: ['view-transition-name'],
      // https://github.com/csstree/csstree/issues/271
      ignoreValue: 'fill-available|stretch|view-transition-name',
    },
    'plugin/no-unsupported-browser-features': [
      true,
      {
        ignore: [
          // Transformed for us by postcss
          'css-nesting',
        ],
        ignorePartialSupport: true,
        severity: 'warning,',
      },
    ],
  },
  overrides: [
    {
      files: ['./**/*.svelte'],
      customSyntax: 'postcss-html',
      rules: {
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['global'],
          },
        ],
      },
    },
    {
      files: ['./**/*.html'],
      customSyntax: 'postcss-html',
    },
  ],
};

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

import stylelint from 'vite-plugin-stylelint';

// (Development config)
export default defineConfig({
  build: {
    sourcemap: 'inline',
  },
  plugins: [
    stylelint(),
    sveltekit(),
    // …
  ],
  // …
});