tessl/npm-vite-plugin-checker

Vite plugin that runs TypeScript type checker on a separate process.

—

Pending

Overview

Eval results

Files

Stylelint Checker

Name: tessl/npm-vite-plugin-checker
Author: tessl

CSS and SCSS linting integration using Stylelint with customizable rules, file watching, and separate development and build configurations.

Capabilities

Stylelint Configuration

Enable and configure Stylelint for CSS, SCSS, and styled-components linting with flexible options for different environments.

/**
 * Stylelint checker configuration
 * - Set to `false` to disable Stylelint checking
 * - Provide configuration object for custom setup
 */
type StylelintConfig = false | StylelintConfigObject;

interface StylelintConfigObject {
  /** Configure path to watch files */
  watchPath?: string | string[];
  
  /** 
   * Lint command executed in build mode and used as default for dev mode 
   * when dev.overrideConfig is not provided
   */
  lintCommand: string;
  
  /** Development-specific configuration */
  dev?: Partial<StylelintDevConfig>;
}

interface StylelintDevConfig {
  /** Override options translated from lintCommand for development mode */
  overrideConfig: Stylelint.LinterOptions;
  
  /** Which diagnostic levels to emit from the plugin */
  logLevel: ('error' | 'warning')[];
}

Usage Examples:

// Basic Stylelint configuration
checker({
  stylelint: {
    lintCommand: 'stylelint "./src/**/*.{css,scss,vue}"',
  },
});

// Advanced configuration with custom paths and dev options
checker({
  stylelint: {
    watchPath: ['src/styles', 'src/components'],
    lintCommand: 'stylelint "./src/**/*.{css,scss}" --max-warnings 0',
    dev: {
      logLevel: ['error', 'warning'],
      overrideConfig: {
        configFile: '.stylelintrc.dev.json',
        syntax: 'scss',
      },
    },
  },
});

Watch Path Configuration

Configure which files and directories Stylelint should monitor for changes in development mode.

interface StylelintConfigObject {
  /**
   * Configure path to watch files
   * - Single string path: 'src/styles'
   * - Multiple paths: ['src/styles', 'src/components']
   * - Glob patterns: 'src/**/*.scss'
   */
  watchPath?: string | string[];
}

Usage Examples:

// Watch CSS files in styles directory
stylelint: {
  watchPath: 'src/styles',
  lintCommand: 'stylelint src/styles/**/*.css',
}

// Watch multiple directories
stylelint: {
  watchPath: ['src/styles', 'src/components', 'src/assets'],
  lintCommand: 'stylelint "src/**/*.{css,scss}"',
}

// Watch specific file patterns
stylelint: {
  watchPath: ['src/**/*.scss', 'src/**/*.vue'],
  lintCommand: 'stylelint "src/**/*.{scss,vue}"',
}

Lint Command Configuration

The lintCommand defines how Stylelint is executed and serves as the primary configuration.

interface StylelintConfigObject {
  /**
   * Command executed in build mode and used as default config for dev mode
   * Should include file patterns and any Stylelint CLI options
   */
  lintCommand: string;
}

Command Examples:

// Basic CSS linting
lintCommand: 'stylelint "./src/**/*.css"'

// SCSS and CSS files
lintCommand: 'stylelint "./src/**/*.{css,scss}"'

// With specific configuration file
lintCommand: 'stylelint "./src/**/*.{css,scss}" --config .stylelintrc.json'

// With custom syntax
lintCommand: 'stylelint "./src/**/*.scss" --syntax scss'

// Vue SFC styles
lintCommand: 'stylelint "./src/**/*.vue" --custom-syntax postcss-html'

// Multiple patterns with options
lintCommand: 'stylelint "./src/**/*.{css,scss}" --max-warnings 0 --formatter string'

Development Mode Configuration

Override Stylelint behavior specifically for development mode with custom options and log levels.

interface StylelintDevConfig {
  /**
   * Override Stylelint options for development mode
   * Takes precedence over options derived from lintCommand
   */
  overrideConfig: Stylelint.LinterOptions;
  
  /**
   * Control which diagnostic levels are emitted from the plugin
   * @default ['error', 'warning']
   */
  logLevel: ('error' | 'warning')[];
}

Development Configuration Examples:

// Custom Stylelint config for development
stylelint: {
  lintCommand: 'stylelint "./src/**/*.{css,scss}"',
  dev: {
    overrideConfig: {
      configFile: '.stylelintrc.dev.json',
      syntax: 'scss',
      fix: true, // Auto-fix issues in development
      allowEmptyInput: true,
    },
    // Only show errors in dev mode
    logLevel: ['error'],
  },
}

// Relaxed rules for development
stylelint: {
  lintCommand: 'stylelint "./src/**/*.{css,scss}"',
  dev: {
    overrideConfig: {
      rules: {
        // Relaxed rules for development
        'declaration-empty-line-before': null,
        'comment-empty-line-before': null,
        'no-missing-end-of-source-newline': null,
      },
    },
    logLevel: ['error', 'warning'],
  },
}

Stylelint Linter Options

The overrideConfig accepts standard Stylelint API options:

interface Stylelint.LinterOptions {
  /** Configuration file path */
  configFile?: string;
  
  /** Inline configuration object */
  config?: Stylelint.Config;
  
  /** CSS syntax to use */
  syntax?: string;
  
  /** Custom syntax module */
  customSyntax?: string;
  
  /** Automatically fix problems */
  fix?: boolean;
  
  /** Allow empty input */
  allowEmptyInput?: boolean;
  
  /** Report configuration comments */
  reportNeedlessDisables?: boolean;
  
  /** Additional configuration */
  [key: string]: any;
}

CSS and SCSS Support

Standard CSS:

stylelint: {
  lintCommand: 'stylelint "./src/**/*.css"',
  watchPath: 'src/styles',
}

SCSS/Sass:

stylelint: {
  lintCommand: 'stylelint "./src/**/*.scss" --syntax scss',
  dev: {
    overrideConfig: {
      syntax: 'scss',
    },
  },
}

CSS-in-JS/Styled Components:

stylelint: {
  lintCommand: 'stylelint "./src/**/*.{js,jsx,ts,tsx}" --custom-syntax @stylelint/postcss-css-in-js',
  dev: {
    overrideConfig: {
      customSyntax: '@stylelint/postcss-css-in-js',
    },
  },
}

Vue Single File Component Styles

Special configuration for linting styles within Vue SFC files:

stylelint: {
  lintCommand: 'stylelint "./src/**/*.vue" --custom-syntax postcss-html',
  watchPath: 'src',
  dev: {
    overrideConfig: {
      customSyntax: 'postcss-html',
      rules: {
        // Vue-specific style rules
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
          },
        ],
      },
    },
  },
}

Error Reporting

Stylelint errors and warnings are reported with comprehensive information:

Rule name: The specific Stylelint rule that was violated
Severity: Error or warning level
File location: Exact file path and line/column numbers
Message: Detailed description of the style issue
Code frame: Highlighted CSS/SCSS code snippet
Fix suggestion: Automatic fix information when available

Common Configuration Examples

React with CSS Modules:

checker({
  stylelint: {
    watchPath: 'src',
    lintCommand: 'stylelint "./src/**/*.{css,module.css}"',
    dev: {
      overrideConfig: {
        rules: {
          'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$', // camelCase
        },
      },
    },
  },
});

Vue 3 with SCSS:

checker({
  stylelint: {
    watchPath: ['src/components', 'src/assets/styles'],
    lintCommand: 'stylelint "./src/**/*.{vue,scss}" --custom-syntax postcss-html',
    dev: {
      overrideConfig: {
        extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue'],
        customSyntax: 'postcss-html',
      },
    },
  },
});

Tailwind CSS Project:

checker({
  stylelint: {
    lintCommand: 'stylelint "./src/**/*.css"',
    dev: {
      overrideConfig: {
        extends: ['stylelint-config-standard'],
        rules: {
          'at-rule-no-unknown': [
            true,
            {
              ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'],
            },
          ],
        },
      },
    },
  },
});

Performance Tips

Use .stylelintignore file to exclude large vendor files
Configure specific file patterns instead of watching entire directories
Use allowEmptyInput: true to avoid errors on empty files
Consider separate configurations for development and production builds

Troubleshooting

Stylelint not found:

npm install --save-dev stylelint stylelint-config-standard

Vue SFC style issues:

npm install --save-dev postcss-html stylelint-config-recommended-vue

SCSS syntax errors:

npm install --save-dev stylelint-config-standard-scss

Custom syntax not working: Ensure the custom syntax package is installed and properly configured in both the lintCommand and dev.overrideConfig.

Install with Tessl CLI

npx tessl i tessl/npm-vite-plugin-checker

docs

plugin-configuration.md

stylelint-checker.md

typescript-checker.md

vls-checker.md

vue-typescript-checker.md

tile.json

tessl/npm-vite-plugin-checker