or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-stylelint-config-sass-guidelines

Sharable stylelint config based on https://sass-guidelin.es/

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/stylelint-config-sass-guidelines@12.1.x

To install, run

npx @tessl/cli install tessl/npm-stylelint-config-sass-guidelines@12.1.0

index.mddocs/

Stylelint Config Sass Guidelines

Stylelint Config Sass Guidelines is a comprehensive stylelint configuration package that enforces consistent SCSS code style based on the Sass Guidelines (sass-guidelin.es). The package provides a complete set of linting rules combining core stylelint rules, SCSS-specific rules, and stylistic formatting rules for professional SCSS development.

Package Information

  • Package Name: stylelint-config-sass-guidelines
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install -D stylelint postcss stylelint-config-sass-guidelines

Core Imports

The package exports a single configuration object that can be consumed by stylelint:

// Direct import (for inspection or extension)
const config = require("stylelint-config-sass-guidelines");

Basic Usage

The primary usage is through stylelint configuration files:

{
  "extends": "stylelint-config-sass-guidelines"
}

With rule overrides:

{
  "extends": "stylelint-config-sass-guidelines",
  "rules": {
    "selector-max-compound-selectors": 4,
    "value-no-vendor-prefix": false
  }
}

Installation Options

Using npm:

npm install -D stylelint postcss stylelint-config-sass-guidelines

Using Yarn:

yarn add -D stylelint postcss stylelint-config-sass-guidelines

Using pnpm:

pnpm add -D stylelint postcss stylelint-config-sass-guidelines

Architecture

The configuration is built around three main rule categories:

  • Core Stylelint Rules: Standard CSS/SCSS linting rules for syntax and best practices
  • SCSS-specific Rules: Rules specific to SCSS syntax, variables, mixins, and functions
  • Stylistic Rules: Formatting and code style rules for consistent appearance

The package integrates three key dependencies:

  • stylelint-scss: Provides SCSS-specific linting capabilities
  • @stylistic/stylelint-plugin: Adds stylistic formatting rules
  • postcss-scss: Enables SCSS syntax parsing

Capabilities

Configuration Object

The main export is a complete stylelint configuration object ready for use.

/**
 * Main stylelint configuration object
 * Contains plugins, custom syntax, and comprehensive rule set
 */
module.exports = {
  plugins: string[];
  customSyntax: string;
  rules: Record<string, any>;
}

The configuration object includes:

  • plugins: Array of stylelint plugins (["stylelint-scss", "@stylistic/stylelint-plugin"])
  • customSyntax: SCSS syntax parser ("postcss-scss")
  • rules: Complete rule configuration object with 54 rules

Core Stylelint Rules

Standard CSS/SCSS linting rules for syntax validation and best practices enforcement.

interface CoreRules {
  // At-rule configuration
  "at-rule-disallowed-list": string[];           // Disallows @debug
  "at-rule-no-unknown": null;                    // Delegated to SCSS plugin
  "at-rule-no-vendor-prefix": boolean;           // Disallows vendor prefixes
  
  // Block rules
  "block-no-empty": boolean;                     // Disallows empty blocks
  
  // Color rules
  "color-hex-length": "short";                   // Forces short hex notation
  "color-named": "never";                        // Disallows named colors
  "color-no-invalid-hex": boolean;               // Validates hex colors
  
  // Declaration rules
  "declaration-block-single-line-max-declarations": number; // Max 1 per line
  "declaration-property-value-disallowed-list": Record<string, string[]>; // Disallows 'none' for border properties
  
  // Function rules
  "function-url-quotes": "always";               // Requires quoted URLs
  
  // General rules
  "length-zero-no-unit": boolean;                // No units for zero values
  "max-nesting-depth": [number, object];        // Limits nesting depth to 1, ignores @each, @media, @supports, @include
  
  // Property rules
  "property-no-unknown": boolean;                // Disallows unknown properties
  "property-no-vendor-prefix": boolean;          // Disallows vendor prefixes
  
  "selector-class-pattern": [string, object];   // Enforces lowercase with hyphens pattern
  "selector-max-compound-selectors": number;    // Limits compound selectors
  "selector-max-id": number;                     // Disallows ID selectors
  "selector-no-qualifying-type": boolean;       // Disallows type qualifiers
  "selector-no-vendor-prefix": boolean;         // Disallows vendor prefixes
  "selector-pseudo-element-colon-notation": "double";
  "selector-pseudo-element-no-unknown": boolean;
  
  // Value rules
  "shorthand-property-no-redundant-values": boolean;
  "value-no-vendor-prefix": boolean;            // Disallows vendor prefixes
  
  // Rule formatting
  "rule-empty-line-before": [string, object];  // Empty lines before rules
}

SCSS-specific Rules

Rules tailored for SCSS syntax including variables, mixins, functions, and imports.

interface SCSSRules {
  // SCSS @ rules
  "scss/at-extend-no-missing-placeholder": boolean;     // Requires placeholders for @extend
  "scss/at-function-pattern": string;                   // Function naming pattern (kebab-case)
  "scss/at-import-partial-extension-disallowed-list": string[]; // Disallows .scss extension in imports
  "scss/at-rule-no-unknown": boolean;                   // Unknown SCSS at-rules
  
  // SCSS variables
  "scss/dollar-variable-colon-space-after": "always";  // Space after colon
  "scss/dollar-variable-colon-space-before": "never";  // No space before colon
  "scss/dollar-variable-pattern": string;              // Variable naming pattern
  
  // SCSS imports
  "scss/load-no-partial-leading-underscore": boolean;  // No underscore in imports
  
  // SCSS functions
  "scss/no-global-function-names": boolean;            // Disallows deprecated globals
  
  // SCSS placeholders
  "scss/percent-placeholder-pattern": string;          // Placeholder naming pattern
  
  // SCSS selectors
  "scss/selector-no-redundant-nesting-selector": boolean; // No redundant & selectors
}

Stylistic Rules

Formatting and code style rules for consistent visual appearance.

interface StylisticRules {
  // Block formatting
  "@stylistic/block-opening-brace-space-before": "always";
  
  // Color formatting
  "@stylistic/color-hex-case": "lower";
  
  // Declaration formatting
  "@stylistic/declaration-bang-space-after": "never";
  "@stylistic/declaration-bang-space-before": "always";
  "@stylistic/declaration-block-semicolon-newline-after": "always";
  "@stylistic/declaration-block-semicolon-space-before": "never";
  "@stylistic/declaration-block-trailing-semicolon": "always";
  "@stylistic/declaration-colon-space-after": "always-single-line";
  "@stylistic/declaration-colon-space-before": "never";
  
  // Function formatting
  "@stylistic/function-comma-space-after": "always-single-line";
  "@stylistic/function-parentheses-space-inside": "never";
  
  // General formatting
  "@stylistic/indentation": number;                     // 2-space indentation
  "@stylistic/media-feature-parentheses-space-inside": "never";
  "@stylistic/no-missing-end-of-source-newline": boolean;
  
  // Number formatting
  "@stylistic/number-leading-zero": "always";
  "@stylistic/number-no-trailing-zeros": boolean;
  
  // Selector formatting
  "@stylistic/selector-list-comma-newline-after": "always";
  
  // String formatting
  "@stylistic/string-quotes": "single";
}

Key Naming Patterns

The configuration enforces consistent naming conventions:

  • CSS Classes: ^[a-z0-9\\-]+$ (lowercase letters, numbers, and hyphens only) with custom message "Selector should be written in lowercase with hyphens (selector-class-pattern)"
  • SCSS Variables: ^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$ (kebab-case, optional leading underscore)
  • SCSS Functions: ^[a-z]+([a-z0-9-]+[a-z0-9]+)?$ (kebab-case)
  • SCSS Placeholders: ^[a-z]+([a-z0-9-]+[a-z0-9]+)?$ (kebab-case)

Nesting and Complexity Limits

  • Max Nesting Depth: 1 level (ignores @each, @media, @supports, @include)
  • Max Compound Selectors: 3 per selector
  • Max Declarations per Line: 1

Usage Examples

Basic Configuration

{
  "extends": "stylelint-config-sass-guidelines"
}

With Custom Rules

{
  "extends": "stylelint-config-sass-guidelines",
  "rules": {
    "selector-max-compound-selectors": 4,
    "max-nesting-depth": [2, {
      "ignoreAtRules": ["each", "media", "supports", "include", "mixin"]
    }],
    "@stylistic/indentation": 4
  }
}

Programmatic Usage

const sassGuidelinesConfig = require("stylelint-config-sass-guidelines");

// Extend configuration
const customConfig = {
  ...sassGuidelinesConfig,
  rules: {
    ...sassGuidelinesConfig.rules,
    "selector-max-compound-selectors": 4
  }
};

Dependencies

The configuration requires the following peer dependencies:

  • stylelint: ^16.1.0 (main linting engine)
  • postcss: ^8.4.21 (CSS parser)

Included dependencies:

  • stylelint-scss: ^6.2.1 (SCSS-specific rules)
  • @stylistic/stylelint-plugin: ^3.0.1 (stylistic rules)
  • postcss-scss: ^4.0.9 (SCSS syntax parser)

Node.js Compatibility

  • Minimum Node.js Version: 18.12.0