tessl/npm-stylelint-config-recommended-scss

The recommended shareable SCSS config for Stylelint

—

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-recommended-scss

Name: tessl/npm-stylelint-config-recommended-scss
Author: tessl

stylelint-config-recommended-scss is a shareable configuration for Stylelint that provides comprehensive SCSS linting rules. It extends the base stylelint-config-recommended configuration and bundles the stylelint-scss plugin pack with postcss-scss custom syntax to enable complete linting of SCSS code, checking for possible errors and enforcing best practices.

Package Information

Package Name: stylelint-config-recommended-scss
Package Type: npm
Language: JavaScript
Installation: npm install --save-dev stylelint-config-recommended-scss

Core Imports

This package exports a single configuration object that is used by Stylelint's configuration system:

// The package exports the configuration object directly
const config = require('stylelint-config-recommended-scss');

For ES modules (CommonJS interop):

import config from 'stylelint-config-recommended-scss';

Basic Usage

Set your .stylelintrc.json config to extend this package:

{
  "extends": "stylelint-config-recommended-scss"
}

Extend with custom rules:

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
    "scss/at-if-no-null": null
  }
}

Architecture

stylelint-config-recommended-scss is built around several key components that work together to provide comprehensive SCSS linting:

Base Configuration Extension: Extends stylelint-config-recommended and adapts its rules for SCSS compatibility by selectively disabling conflicting rules
Custom Syntax Integration: Bundles postcss-scss to enable proper parsing of SCSS syntax features like variables, mixins, and nested rules
Plugin Integration: Automatically loads the stylelint-scss plugin pack to provide SCSS-specific linting rules
Rule Configuration: Provides 25 carefully curated rules (10 disabled core rules, 5 enabled core rules, 15 SCSS-specific rules) focused on error detection rather than style enforcement
Dependency Management: Handles all required dependencies internally, requiring only Stylelint itself as a peer dependency

Capabilities

Configuration Object Export

The package exports a complete Stylelint configuration object that includes extends, plugins, custom syntax, and rules.

/**
 * Main export: Complete Stylelint configuration object
 * @type {StylelintConfig}
 */
const config: StylelintConfig;

interface StylelintConfig {
  /** Base configurations to extend */
  extends: string[];
  /** PostCSS custom syntax for parsing SCSS */
  customSyntax: object;
  /** Stylelint plugins to load */
  plugins: string[];
  /** Linting rules configuration */
  rules: StylelintRules;
}

interface StylelintRules {
  // Core Stylelint rules (modified for SCSS compatibility)
  'annotation-no-unknown': null;
  'at-rule-descriptor-no-unknown': null;
  'at-rule-descriptor-value-no-unknown': null;
  'at-rule-no-unknown': null;
  'at-rule-prelude-no-invalid': null;
  'color-no-invalid-hex': boolean;
  'comment-no-empty': null;
  'declaration-property-value-no-unknown': null;
  'function-linear-gradient-no-nonstandard-direction': boolean;
  'function-no-unknown': null;
  'media-feature-name-value-no-unknown': null;
  'media-query-no-invalid': null;
  'no-invalid-position-at-import-rule': [boolean, { ignoreAtRules: string[] }];
  'string-no-newline': boolean;
  'unit-no-unknown': boolean;
  
  // SCSS-specific rules (from stylelint-scss plugin)
  'scss/at-extend-no-missing-placeholder': boolean;
  'scss/at-if-no-null': boolean;
  'scss/at-rule-no-unknown': boolean;
  'scss/comment-no-empty': boolean;
  'scss/declaration-nested-properties-no-divided-groups': boolean;
  'scss/dollar-variable-no-missing-interpolation': boolean;
  'scss/function-quote-no-quoted-strings-inside': boolean;
  'scss/function-unquote-no-unquoted-strings-inside': boolean;
  'scss/load-no-partial-leading-underscore': boolean;
  'scss/load-partial-extension': 'never';
  'scss/no-duplicate-mixins': boolean;
  'scss/no-global-function-names': boolean;
  'scss/operator-no-newline-after': boolean;
  'scss/operator-no-newline-before': boolean;
  'scss/operator-no-unspaced': boolean;
}

Configuration Properties

extends Property

Specifies base configurations to extend.

extends: ['stylelint-config-recommended']

The configuration extends stylelint-config-recommended and adapts its rules for SCSS compatibility.

customSyntax Property

Configures PostCSS custom syntax for parsing SCSS files.

customSyntax: postcssScss

Uses postcss-scss package to enable proper SCSS syntax parsing.

plugins Property

Specifies Stylelint plugins to load.

plugins: ['stylelint-scss']

Bundles the stylelint-scss plugin pack for SCSS-specific linting rules.

rules Property

Contains the complete rules configuration with 25 total rules.

rules: {
  // Core rules disabled for SCSS compatibility (10 rules)
  'annotation-no-unknown': null,
  'at-rule-descriptor-no-unknown': null,
  'at-rule-descriptor-value-no-unknown': null,
  'at-rule-no-unknown': null,
  'at-rule-prelude-no-invalid': null,
  'comment-no-empty': null,
  'declaration-property-value-no-unknown': null,
  'function-no-unknown': null,
  'media-feature-name-value-no-unknown': null,
  'media-query-no-invalid': null,
  
  // Core rules enabled (5 rules)
  'color-no-invalid-hex': true,
  'function-linear-gradient-no-nonstandard-direction': true,
  'no-invalid-position-at-import-rule': [true, { ignoreAtRules: ['use', 'forward'] }],
  'string-no-newline': true,
  'unit-no-unknown': true,
  
  // SCSS-specific error detection rules (15 rules)
  'scss/at-extend-no-missing-placeholder': true,
  'scss/at-if-no-null': true,
  'scss/at-rule-no-unknown': true,
  'scss/comment-no-empty': true,
  'scss/declaration-nested-properties-no-divided-groups': true,
  'scss/dollar-variable-no-missing-interpolation': true,
  'scss/function-quote-no-quoted-strings-inside': true,
  'scss/function-unquote-no-unquoted-strings-inside': true,
  'scss/load-no-partial-leading-underscore': true,
  'scss/load-partial-extension': 'never',
  'scss/no-duplicate-mixins': true,
  'scss/no-global-function-names': true,
  'scss/operator-no-newline-after': true,
  'scss/operator-no-newline-before': true,
  'scss/operator-no-unspaced': true
}

Dependencies

The configuration automatically handles these dependencies:

interface Dependencies {
  /** Runtime dependencies bundled with the config */
  dependencies: {
    'postcss-scss': '^4.0.9';
    'stylelint-config-recommended': '^17.0.0';
    'stylelint-scss': '^6.12.1';
  };
  
  /** Required peer dependencies */
  peerDependencies: {
    'postcss': '^8.3.3';  // optional
    'stylelint': '^16.23.1';  // required
  };
}

Usage Examples

CLI Usage

# Run Stylelint with the config
npx stylelint "**/*.scss" --config-extends stylelint-config-recommended-scss

Programmatic Usage

import stylelint from 'stylelint';
import config from 'stylelint-config-recommended-scss';

const result = await stylelint.lint({
  code: scssCode,
  config: config
});

Configuration File Usage

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
    "scss/at-if-no-null": null
  }
}

Package.json Scripts

{
  "scripts": {
    "lint:scss": "stylelint '**/*.scss'",
    "lint:scss:fix": "stylelint '**/*.scss' --fix"
  }
}

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