Stylelint Config Standard

Stylelint Config Standard provides a standard shareable configuration for Stylelint that extends stylelint-config-recommended and adds additional rules to enforce modern CSS conventions found in CSS specifications and Baseline/Widely Available standards.

Package Information

• Package Name: stylelint-config-standard
• Package Type: npm
• Language: JavaScript
• Installation: npm install stylelint-config-standard --save-dev

Core Imports

const config = require('stylelint-config-standard');

Note: This is a CommonJS module. ES module import is not officially supported, but some bundlers may allow:

import config from 'stylelint-config-standard';

Basic Usage

Set your Stylelint config to:

{
  "extends": "stylelint-config-standard"
}

Extending the config

Add a "rules" key to your config, then add your overrides and additions there:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": null,
    "unit-allowed-list": ["em", "rem", "s"]
  }
}

Capabilities

Configuration Export

The main export is a Stylelint configuration object that can be used directly or extended.

/**
 * Main module export - CommonJS module.exports
 * @returns {StylelintConfig} Complete Stylelint configuration object
 */
module.exports = StylelintConfig;

/**
 * Stylelint configuration object with extends and rules properties
 */
interface StylelintConfig {
  extends: "stylelint-config-recommended";
  rules: StylelintRules;
}

/**
 * Collection of Stylelint rule configurations
 */
interface StylelintRules {
  [ruleName: string]: boolean | string | [string, object] | [boolean, object];
}

The configuration object contains:

• extends: "stylelint-config-recommended" - Base configuration
• rules: Object with 41 rule configurations for modern CSS conventions

Rule Categories

The configuration includes rules for the following categories:

Color and Value Notation

• alpha-value-notation: Forces percentage notation for alpha values (except opacity properties)
• color-function-notation: Enforces modern color function notation
• color-function-alias-notation: Uses color functions without alpha
• color-hex-length: Enforces short hex color notation
• hue-degree-notation: Uses angle notation for hue values
• lightness-notation: Uses percentage notation for lightness

Naming Conventions (Kebab-case)

• container-name-pattern: Enforces kebab-case for container names
• custom-media-pattern: Enforces kebab-case for custom media query names
• custom-property-pattern: Enforces kebab-case for custom property names
• keyframes-name-pattern: Enforces kebab-case for keyframe names
• layer-name-pattern: Enforces kebab-case for layer names
• selector-class-pattern: Enforces kebab-case for class selectors
• selector-id-pattern: Enforces kebab-case for ID selectors

Code Style and Formatting

• at-rule-empty-line-before: Controls empty lines before at-rules
• comment-empty-line-before: Controls empty lines before comments
• comment-whitespace-inside: Requires whitespace inside comments
• custom-property-empty-line-before: Controls empty lines before custom properties
• declaration-empty-line-before: Controls empty lines before declarations
• rule-empty-line-before: Controls empty lines before rules

Function and Value Rules

• font-family-name-quotes: Quotes font family names where recommended
• function-name-case: Enforces lowercase function names
• function-url-quotes: Requires quotes for URLs in functions
• import-notation: Uses URL notation for imports
• selector-attribute-quotes: Requires quotes for attribute selectors
• value-keyword-case: Enforces lowercase for keyword values

Vendor Prefix Rules

• at-rule-no-vendor-prefix: Disallows vendor prefixes for at-rules
• media-feature-name-no-vendor-prefix: Disallows vendor prefixes for media features
• property-no-vendor-prefix: Disallows vendor prefixes for properties
• selector-no-vendor-prefix: Disallows vendor prefixes for selectors
• value-no-vendor-prefix: Disallows vendor prefixes for values (except 'box', 'inline-box')

Layout and Property Rules

• block-no-redundant-nested-style-rules: Disallows redundant nested style rules
• declaration-block-no-redundant-longhand-properties: Disallows redundant longhand properties
• declaration-block-single-line-max-declarations: Limits single-line blocks to 1 declaration
• keyframe-selector-notation: Uses percentage notation unless within keyword-only block
• length-zero-no-unit: Disallows units for zero lengths (except custom properties)
• media-feature-range-notation: Uses context-based media feature range notation
• number-max-precision: Limits number precision to 4 decimal places
• selector-not-notation: Uses complex :not() notation
• selector-pseudo-element-colon-notation: Uses double colon notation for pseudo-elements
• selector-type-case: Enforces lowercase for type selectors
• shorthand-property-no-redundant-values: Disallows redundant shorthand property values

Usage Examples

Direct Configuration Access

const config = require('stylelint-config-standard');

// Access the extends property
console.log(config.extends); // "stylelint-config-recommended"

// Access specific rules
console.log(config.rules['color-hex-length']); // "short"
console.log(config.rules['selector-class-pattern']); // [pattern, options]

Programmatic Usage

const config = require('stylelint-config-standard');

// Use in custom Stylelint configuration
const customConfig = {
  ...config,
  rules: {
    ...config.rules,
    'custom-rule': true
  }
};

Types

/**
 * The main configuration object exported by the module
 */
interface StylelintConfig {
  extends: "stylelint-config-recommended";
  rules: StylelintRules;
}

/**
 * Collection of 41 Stylelint rule configurations
 */
interface StylelintRules {
  'alpha-value-notation': [string, object];
  'at-rule-empty-line-before': [string, object];
  'at-rule-no-vendor-prefix': boolean;
  'block-no-redundant-nested-style-rules': boolean;
  'color-function-alias-notation': string;
  'color-function-notation': string;
  'color-hex-length': string;
  'comment-empty-line-before': [string, object];
  'comment-whitespace-inside': string;
  'container-name-pattern': [string, object];
  'custom-property-empty-line-before': [string, object];
  'custom-media-pattern': [string, object];
  'custom-property-pattern': [string, object];
  'declaration-block-no-redundant-longhand-properties': boolean;
  'declaration-block-single-line-max-declarations': number;
  'declaration-empty-line-before': [string, object];
  'font-family-name-quotes': string;
  'function-name-case': string;
  'function-url-quotes': string;
  'hue-degree-notation': string;
  'import-notation': string;
  'keyframe-selector-notation': string;
  'keyframes-name-pattern': [string, object];
  'layer-name-pattern': [string, object];
  'length-zero-no-unit': [boolean, object];
  'lightness-notation': string;
  'media-feature-name-no-vendor-prefix': boolean;
  'media-feature-range-notation': string;
  'number-max-precision': number;
  'property-no-vendor-prefix': boolean;
  'rule-empty-line-before': [string, object];
  'selector-attribute-quotes': string;
  'selector-class-pattern': [string, object];
  'selector-id-pattern': [string, object];
  'selector-no-vendor-prefix': boolean;
  'selector-not-notation': string;
  'selector-pseudo-element-colon-notation': string;
  'selector-type-case': string;
  'shorthand-property-no-redundant-values': boolean;
  'value-keyword-case': string;
  'value-no-vendor-prefix': [boolean, object];
}