tessl/npm-stylelint-config-sass-guidelines

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Stylelint Config Sass Guidelines

Name: tessl/npm-stylelint-config-sass-guidelines
Author: tessl

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

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/stylelint-config-sass-guidelines@12.1.x
Publish Source: CLI
Badge