0
# Built-in Rules
1

2
Complete collection of 139+ built-in rules for CSS validation and convention enforcement. Rules are categorized by CSS features and provide comprehensive coverage of modern CSS syntax, best practices, and common error patterns.
3

4
## Capabilities
5

6
### Rule Access
7

8
All built-in rules are accessible through the rules object with lazy loading for performance.
9

10
```typescript { .api }
11
const rules: { readonly [name in keyof CoreRules]: Promise<CoreRules[name]> };
12

13
// Access a specific rule
14
const colorHexLengthRule = await rules['color-hex-length'];
15
```
16

17
### Rule Categories
18

19
#### Color Rules
20

21
Rules for color values, hex notation, and color functions.
22

23
```typescript { .api }
24
// Color hex length (short vs long)
25
'color-hex-length': Rule<'short' | 'long', {}, AutofixMessage>;
26

27
// Color hex alpha channel validation
28
'color-hex-alpha': Rule<'always' | 'never', {}, 
29
  ExpectedMessage<[hex: string]> & RejectedMessage<[hex: string]>>;
30

31
// Color function notation (modern vs legacy)
32
'color-function-notation': Rule<'modern' | 'legacy', { 
33
  ignore: ('with-var-inside')[] 
34
}>;
35

36
// Named color usage
37
'color-named': Rule<'never' | 'always-where-possible', {
38
  ignoreProperties: (string | RegExp)[];
39
  ignore: ('inside-function')[];
40
}, AutofixMessage & RejectedMessage<[keyword: string]>>;
41

42
// Invalid hex colors
43
'color-no-invalid-hex': Rule<true, {}, RejectedMessage<[hex: string]>>;
44

45
// Disallow hex colors entirely
46
'color-no-hex': Rule<true, {}, RejectedMessage<[hex: string]>>;
47
```
48

49
#### At-Rule Rules
50

51
Rules for CSS at-rules like @media, @keyframes, @import, etc.
52

53
```typescript { .api }
54
// Unknown at-rules
55
'at-rule-no-unknown': Rule<true, { 
56
  ignoreAtRules: (string | RegExp)[] 
57
}, RejectedMessage<[atRule: string]>>;
58

59
// At-rule allowlist
60
'at-rule-allowed-list': Rule<string[], {}, RejectedMessage<[atRule: string]>>;
61

62
// At-rule disallowlist  
63
'at-rule-disallowed-list': Rule<string[], {}, RejectedMessage<[atRule: string]>>;
64

65
// Vendor prefixed at-rules
66
'at-rule-no-vendor-prefix': Rule<true, {}, RejectedMessage<[atRule: string]>>;
67

68
// Empty line before at-rules
69
'at-rule-empty-line-before': Rule<'always' | 'never', {
70
  except: ('after-same-name' | 'inside-block' | 'blockless-after-same-name-blockless' | 'blockless-after-blockless' | 'first-nested')[];
71
  ignore: ('after-comment' | 'first-nested' | 'inside-block' | 'blockless-after-same-name-blockless' | 'blockless-after-blockless')[];
72
  ignoreAtRules: (string | RegExp)[];
73
}>;
74
```
75

76
#### Property Rules
77

78
Rules for CSS properties and their values.
79

80
```typescript { .api }
81
// Unknown properties
82
'property-no-unknown': Rule<true, {
83
  checkPrefixed: boolean;
84
  ignoreAtRules: (string | RegExp)[];
85
  ignoreProperties: (string | RegExp)[];
86
  ignoreSelectors: (string | RegExp)[];
87
}, RejectedMessage<[property: string]>>;
88

89
// Property allowlist
90
'property-allowed-list': Rule<(string | RegExp)[], {}, 
91
  RejectedMessage<[property: string]>>;
92

93
// Property disallowlist
94
'property-disallowed-list': Rule<(string | RegExp)[], {}, 
95
  RejectedMessage<[property: string]>>;
96

97
// Vendor prefixed properties
98
'property-no-vendor-prefix': Rule<true, { 
99
  ignoreProperties: (string | RegExp)[] 
100
}, RejectedMessage<[property: string]>>;
101

102
// Deprecated properties
103
'property-no-deprecated': Rule<true, {
104
  ignoreProperties: (string | RegExp)[];
105
}, AutofixMessage & RejectedMessage<[property: string]>>;
106
```
107

108
#### Selector Rules
109

110
Rules for CSS selectors, pseudo-classes, and combinators.
111

112
```typescript { .api }
113
// Unknown pseudo-classes
114
'selector-pseudo-class-no-unknown': Rule<true, { 
115
  ignorePseudoClasses: (string | RegExp)[] 
116
}, RejectedMessage<[selector: string]>>;
117

118
// Unknown pseudo-elements
119
'selector-pseudo-element-no-unknown': Rule<true, { 
120
  ignorePseudoElements: (string | RegExp)[] 
121
}, RejectedMessage<[selector: string]>>;
122

123
// Selector specificity limits
124
'selector-max-specificity': Rule<string, { 
125
  ignoreSelectors: (string | RegExp)[] 
126
}, ExpectedMessage<[selector: string, specificity: string]>>;
127

128
// Maximum nesting depth
129
'max-nesting-depth': Rule<number, {
130
  ignore: ('blockless-at-rules' | 'pseudo-classes')[];
131
  ignoreAtRules: (string | RegExp)[];
132
  ignoreRules: (string | RegExp)[];
133
  ignorePseudoClasses: (string | RegExp)[];
134
}, ExpectedMessage<[depth: number]>>;
135

136
// Class name patterns
137
'selector-class-pattern': Rule<string | RegExp, { 
138
  resolveNestedSelectors: boolean 
139
}, ExpectedMessage<[input: string, pattern: string | RegExp]>>;
140
```
141

142
#### Function Rules
143

144
Rules for CSS functions like calc(), url(), etc.
145

146
```typescript { .api }
147
// Unknown functions
148
'function-no-unknown': Rule<true, { 
149
  ignoreFunctions: (string | RegExp)[] 
150
}, RejectedMessage<[name: string]>>;
151

152
// Function allowlist
153
'function-allowed-list': Rule<(string | RegExp)[], { 
154
  exceptWithoutPropertyFallback: (string | RegExp)[] 
155
}, RejectedMessage<[name: string]>>;
156

157
// Function disallowlist
158
'function-disallowed-list': Rule<(string | RegExp)[], {}, 
159
  RejectedMessage<[name: string]>>;
160

161
// calc() function spacing
162
'function-calc-no-unspaced-operator': Rule<true, {}, {
163
  expectedAfter: (operator: string) => string;
164
  expectedBefore: (operator: string) => string;
165
}>;
166

167
// URL quotes
168
'function-url-quotes': Rule<'always' | 'never', { 
169
  except: ('empty')[] 
170
}>;
171

172
// Function name case
173
'function-name-case': Rule<'lower' | 'upper', { 
174
  ignoreFunctions: (string | RegExp)[] 
175
}, AutofixMessage>;
176
```
177

178
#### Declaration Rules
179

180
Rules for CSS declarations and declaration blocks.
181

182
```typescript { .api }
183
// Duplicate properties
184
'declaration-block-no-duplicate-properties': Rule<true, {
185
  ignore: ('consecutive-duplicates' | 'consecutive-duplicates-with-different-values' | 'consecutive-duplicates-with-different-syntaxes' | 'consecutive-duplicates-with-same-prefixless-values')[];
186
  ignoreProperties: (string | RegExp)[];
187
}, RejectedMessage<[property: string]>>;
188

189
// Important declarations
190
'declaration-no-important': Rule<true>;
191

192
// Single line declaration limits
193
'declaration-block-single-line-max-declarations': Rule<number, {}, 
194
  ExpectedMessage<[maximum: number]>>;
195

196
// Empty line before declarations
197
'declaration-empty-line-before': Rule<'always' | 'never', {
198
  except: ('first-nested' | 'after-comment' | 'after-declaration')[];
199
  ignore: ('after-comment' | 'after-declaration' | 'first-nested' | 'inside-single-line-block')[];
200
}>;
201

202
// Shorthand property overrides
203
'declaration-block-no-shorthand-property-overrides': Rule<true, {}, 
204
  RejectedMessage<[shorthand: string, property: string]>>;
205
```
206

207
### Rule Configuration
208

209
Rules can be configured with primary and secondary options.
210

211
```typescript { .api }
212
type ConfigRuleSettings<T, O extends Object> = 
213
  | null                    // Disable rule
214
  | undefined              // Use default
215
  | NonNullable<T>         // Primary option only
216
  | [NonNullable<T>]       // Primary option in array
217
  | [NonNullable<T>, O];   // Primary + secondary options
218

219
// Examples:
220
const config = {
221
  rules: {
222
    // Simple enable
223
    "color-no-invalid-hex": true,
224
    
225
    // With primary option
226
    "color-hex-length": "short",
227
    
228
    // With secondary options
229
    "property-no-unknown": [true, { 
230
      ignoreProperties: ["composes"] 
231
    }],
232
    
233
    // Disabled
234
    "font-weight-notation": null
235
  }
236
};
237
```
238

239
### Common Rule Patterns
240

241
```typescript { .api }
242
// Pattern matching rules
243
type PatternRule<S extends object = {}> = Rule<string | RegExp, S, 
244
  ExpectedMessage<[input: string, pattern: string | RegExp]>>;
245

246
// Maximum value rules  
247
type MaxRule<S extends object = {}> = Rule<number, S, 
248
  ExpectedMessage<[selector: string, maximum: number]>>;
249

250
// Notation rules (format preferences)
251
type NotationRule<P extends string, S extends object = {}> = Rule<P, S, 
252
  ExpectedMessage<[primary: P]>>;
253

254
// Autofix message type
255
type AutofixMessage = {
256
  expected: (actual: string, expected: string) => string;
257
};
258
```
259

260
### Rule Usage Examples
261

262
```javascript
263
import stylelint from "stylelint";
264

265
// Configure multiple rules
266
const result = await stylelint.lint({
267
  code: css,
268
  config: {
269
    rules: {
270
      // Color rules
271
      "color-hex-length": "short",
272
      "color-no-invalid-hex": true,
273
      "color-named": ["always-where-possible", { 
274
        ignore: ["inside-function"] 
275
      }],
276
      
277
      // Property rules
278
      "property-no-unknown": [true, { 
279
        ignoreProperties: ["composes", "global"] 
280
      }],
281
      
282
      // Selector rules
283
      "selector-max-specificity": "0,3,0",
284
      "selector-class-pattern": "^[a-z][a-zA-Z0-9]*$",
285
      
286
      // At-rule configuration
287
      "at-rule-no-unknown": [true, { 
288
        ignoreAtRules: ["extends", "include"] 
289
      }]
290
    }
291
  }
292
});
293
```