0
# Stylelint Config Standard
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: stylelint-config-standard
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install stylelint-config-standard --save-dev`
10

11
## Core Imports
12

13
```javascript
14
const config = require('stylelint-config-standard');
15
```
16

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

19
```javascript
20
import config from 'stylelint-config-standard';
21
```
22

23
## Basic Usage
24

25
Set your Stylelint config to:
26

27
```json
28
{
29
  "extends": "stylelint-config-standard"
30
}
31
```
32

33
### Extending the config
34

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

37
```json
38
{
39
  "extends": "stylelint-config-standard",
40
  "rules": {
41
    "selector-class-pattern": null,
42
    "unit-allowed-list": ["em", "rem", "s"]
43
  }
44
}
45
```
46

47
## Capabilities
48

49
### Configuration Export
50

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

53
```javascript { .api }
54
/**
55
 * Main module export - CommonJS module.exports
56
 * @returns {StylelintConfig} Complete Stylelint configuration object
57
 */
58
module.exports = StylelintConfig;
59

60
/**
61
 * Stylelint configuration object with extends and rules properties
62
 */
63
interface StylelintConfig {
64
  extends: "stylelint-config-recommended";
65
  rules: StylelintRules;
66
}
67

68
/**
69
 * Collection of Stylelint rule configurations
70
 */
71
interface StylelintRules {
72
  [ruleName: string]: boolean | string | [string, object] | [boolean, object];
73
}
74
```
75

76
The configuration object contains:
77

78
- **extends**: `"stylelint-config-recommended"` - Base configuration
79
- **rules**: Object with 41 rule configurations for modern CSS conventions
80

81
### Rule Categories
82

83
The configuration includes rules for the following categories:
84

85
#### Color and Value Notation
86
- `alpha-value-notation`: Forces percentage notation for alpha values (except opacity properties)
87
- `color-function-notation`: Enforces modern color function notation  
88
- `color-function-alias-notation`: Uses color functions without alpha
89
- `color-hex-length`: Enforces short hex color notation
90
- `hue-degree-notation`: Uses angle notation for hue values
91
- `lightness-notation`: Uses percentage notation for lightness
92

93
#### Naming Conventions (Kebab-case)
94
- `container-name-pattern`: Enforces kebab-case for container names
95
- `custom-media-pattern`: Enforces kebab-case for custom media query names
96
- `custom-property-pattern`: Enforces kebab-case for custom property names
97
- `keyframes-name-pattern`: Enforces kebab-case for keyframe names
98
- `layer-name-pattern`: Enforces kebab-case for layer names
99
- `selector-class-pattern`: Enforces kebab-case for class selectors
100
- `selector-id-pattern`: Enforces kebab-case for ID selectors
101

102
#### Code Style and Formatting
103
- `at-rule-empty-line-before`: Controls empty lines before at-rules
104
- `comment-empty-line-before`: Controls empty lines before comments
105
- `comment-whitespace-inside`: Requires whitespace inside comments
106
- `custom-property-empty-line-before`: Controls empty lines before custom properties
107
- `declaration-empty-line-before`: Controls empty lines before declarations
108
- `rule-empty-line-before`: Controls empty lines before rules
109

110
#### Function and Value Rules
111
- `font-family-name-quotes`: Quotes font family names where recommended
112
- `function-name-case`: Enforces lowercase function names
113
- `function-url-quotes`: Requires quotes for URLs in functions
114
- `import-notation`: Uses URL notation for imports
115
- `selector-attribute-quotes`: Requires quotes for attribute selectors
116
- `value-keyword-case`: Enforces lowercase for keyword values
117

118
#### Vendor Prefix Rules
119
- `at-rule-no-vendor-prefix`: Disallows vendor prefixes for at-rules
120
- `media-feature-name-no-vendor-prefix`: Disallows vendor prefixes for media features
121
- `property-no-vendor-prefix`: Disallows vendor prefixes for properties
122
- `selector-no-vendor-prefix`: Disallows vendor prefixes for selectors
123
- `value-no-vendor-prefix`: Disallows vendor prefixes for values (except 'box', 'inline-box')
124

125
#### Layout and Property Rules
126
- `block-no-redundant-nested-style-rules`: Disallows redundant nested style rules
127
- `declaration-block-no-redundant-longhand-properties`: Disallows redundant longhand properties
128
- `declaration-block-single-line-max-declarations`: Limits single-line blocks to 1 declaration
129
- `keyframe-selector-notation`: Uses percentage notation unless within keyword-only block
130
- `length-zero-no-unit`: Disallows units for zero lengths (except custom properties)
131
- `media-feature-range-notation`: Uses context-based media feature range notation
132
- `number-max-precision`: Limits number precision to 4 decimal places
133
- `selector-not-notation`: Uses complex :not() notation
134
- `selector-pseudo-element-colon-notation`: Uses double colon notation for pseudo-elements
135
- `selector-type-case`: Enforces lowercase for type selectors
136
- `shorthand-property-no-redundant-values`: Disallows redundant shorthand property values
137

138
## Usage Examples
139

140
### Direct Configuration Access
141

142
```javascript
143
const config = require('stylelint-config-standard');
144

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

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

153
### Programmatic Usage
154

155
```javascript
156
const config = require('stylelint-config-standard');
157

158
// Use in custom Stylelint configuration
159
const customConfig = {
160
  ...config,
161
  rules: {
162
    ...config.rules,
163
    'custom-rule': true
164
  }
165
};
166
```
167

168
## Types
169

170
```javascript { .api }
171
/**
172
 * The main configuration object exported by the module
173
 */
174
interface StylelintConfig {
175
  extends: "stylelint-config-recommended";
176
  rules: StylelintRules;
177
}
178

179
/**
180
 * Collection of 41 Stylelint rule configurations
181
 */
182
interface StylelintRules {
183
  'alpha-value-notation': [string, object];
184
  'at-rule-empty-line-before': [string, object];
185
  'at-rule-no-vendor-prefix': boolean;
186
  'block-no-redundant-nested-style-rules': boolean;
187
  'color-function-alias-notation': string;
188
  'color-function-notation': string;
189
  'color-hex-length': string;
190
  'comment-empty-line-before': [string, object];
191
  'comment-whitespace-inside': string;
192
  'container-name-pattern': [string, object];
193
  'custom-property-empty-line-before': [string, object];
194
  'custom-media-pattern': [string, object];
195
  'custom-property-pattern': [string, object];
196
  'declaration-block-no-redundant-longhand-properties': boolean;
197
  'declaration-block-single-line-max-declarations': number;
198
  'declaration-empty-line-before': [string, object];
199
  'font-family-name-quotes': string;
200
  'function-name-case': string;
201
  'function-url-quotes': string;
202
  'hue-degree-notation': string;
203
  'import-notation': string;
204
  'keyframe-selector-notation': string;
205
  'keyframes-name-pattern': [string, object];
206
  'layer-name-pattern': [string, object];
207
  'length-zero-no-unit': [boolean, object];
208
  'lightness-notation': string;
209
  'media-feature-name-no-vendor-prefix': boolean;
210
  'media-feature-range-notation': string;
211
  'number-max-precision': number;
212
  'property-no-vendor-prefix': boolean;
213
  'rule-empty-line-before': [string, object];
214
  'selector-attribute-quotes': string;
215
  'selector-class-pattern': [string, object];
216
  'selector-id-pattern': [string, object];
217
  'selector-no-vendor-prefix': boolean;
218
  'selector-not-notation': string;
219
  'selector-pseudo-element-colon-notation': string;
220
  'selector-type-case': string;
221
  'shorthand-property-no-redundant-values': boolean;
222
  'value-keyword-case': string;
223
  'value-no-vendor-prefix': [boolean, object];
224
}
225
```