0
# CSS Beautification
1

2
CSS code formatting with support for selectors, rules, and various CSS syntaxes. Handles formatting of nested structures and preserves important whitespace while providing consistent formatting.
3

4
## Core Imports
5

6
```javascript
7
// Import CSS beautifier
8
const { css_beautify } = require('js-beautify');
9
const beautify = require('js-beautify');
10

11
// Or use the short alias
12
const { css } = require('js-beautify');
13
```
14

15
ESM:
16
```javascript
17
import beautify from 'js-beautify';
18
// Use beautify.css() for CSS beautification
19
```
20

21
## Capabilities
22

23
### CSS Beautify Function
24

25
Beautifies CSS source code with support for various formatting styles and selector arrangements.
26

27
```javascript { .api }
28
/**
29
 * Beautify CSS source code
30
 * @param {string} source_text - CSS code to beautify
31
 * @param {Object} options - Formatting options (optional)
32
 * @param {boolean} [options.selector_separator_newline=true] - Add a newline between multiple selectors
33
 * @param {boolean} [options.newline_between_rules=true] - Add a newline between CSS rules
34
 * @param {boolean} [options.space_around_combinator=false] - Add space around CSS combinators
35
 * @param {string} [options.brace_style='collapse'] - Brace placement style for CSS rules: 'collapse', 'expand'
36
 * @returns {string} Beautified CSS code
37
 */
38
function css_beautify(source_text, options);
39

40
/**
41
 * Get default options for CSS beautifier
42
 * @returns {Object} Default options object with all CSS-specific options
43
 */
44
css_beautify.defaultOptions();
45
```
46

47
**Usage Examples:**
48

49
```javascript
50
const beautify = require('js-beautify');
51

52
// Basic CSS beautification
53
const uglyCSS = 'body{margin:0;padding:0;}div{color:red;font-size:14px;}';
54
const beautiful = beautify.css(uglyCSS, { indent_size: 2 });
55
// Result:
56
// body {
57
//   margin: 0;
58
//   padding: 0;
59
// }
60
// 
61
// div {
62
//   color: red;
63
//   font-size: 14px;
64
// }
65

66
// Compact selector formatting
67
const multiSelector = 'h1,h2,h3{font-weight:bold;margin:0;}';
68
const formatted = beautify.css(multiSelector, {
69
  selector_separator_newline: false,
70
  newline_between_rules: true
71
});
72
// Result: h1, h2, h3 { ... }
73

74
// Expanded brace style
75
const expandedCSS = beautify.css('.class{display:block;}', {
76
  brace_style: 'expand',
77
  indent_size: 4
78
});
79
// Result:
80
// .class
81
// {
82
//     display: block;
83
// }
84
```
85

86
### Default Options
87

88
Returns the default configuration options for CSS beautification.
89

90
```javascript { .api }
91
/**
92
 * Get default options for CSS beautifier
93
 * @returns {Object} Default options object with all CSS-specific options
94
 */
95
css_beautify.defaultOptions();
96
```
97

98
**Usage Example:**
99

100
```javascript
101
const beautify = require('js-beautify');
102

103
// Get default options
104
const defaults = beautify.css.defaultOptions();
105
console.log(defaults.selector_separator_newline); // true
106
console.log(defaults.newline_between_rules); // true
107

108
// Create custom configuration
109
const myOptions = {
110
  ...defaults,
111
  indent_size: 2,
112
  brace_style: 'expand'
113
};
114
```
115

116
## Formatting Options
117

118
### Selector Separator Newline
119
Controls whether multiple selectors are placed on separate lines:
120

121
**Enabled (default):**
122
```css
123
h1,
124
h2,
125
h3 {
126
  font-weight: bold;
127
}
128
```
129

130
**Disabled:**
131
```css
132
h1, h2, h3 {
133
  font-weight: bold;
134
}
135
```
136

137
### Newline Between Rules
138
Controls whether newlines are added between CSS rules:
139

140
**Enabled (default):**
141
```css
142
.class1 {
143
  color: red;
144
}
145

146
.class2 {
147
  color: blue;
148
}
149
```
150

151
**Disabled:**
152
```css
153
.class1 {
154
  color: red;
155
}
156
.class2 {
157
  color: blue;
158
}
159
```
160

161
### Space Around Combinator
162
Controls spacing around CSS combinators (>, +, ~, etc.):
163

164
**Enabled:**
165
```css
166
.parent > .child {
167
  display: block;
168
}
169

170
.sibling + .next {
171
  margin-top: 10px;
172
}
173
```
174

175
**Disabled (default):**
176
```css
177
.parent>.child {
178
  display: block;
179
}
180

181
.sibling+.next {
182
  margin-top: 10px;
183
}
184
```
185

186
## Brace Style Options
187

188
### Collapse (Default)
189
Places opening braces on the same line as selectors:
190
```css
191
.selector {
192
  property: value;
193
}
194
```
195

196
### Expand
197
Places opening braces on new lines:
198
```css
199
.selector
200
{
201
  property: value;
202
}
203
```
204

205
## CSS-Specific Features
206

207
### Property Alignment
208
The beautifier automatically aligns CSS properties and values for consistent formatting:
209

210
```css
211
/* Input */
212
.class{color:red;background-color:blue;font-size:14px;}
213

214
/* Output */
215
.class {
216
  color: red;
217
  background-color: blue;
218
  font-size: 14px;
219
}
220
```
221

222
### Comment Preservation
223
CSS comments are preserved and properly formatted:
224

225
```css
226
/* This is a comment */
227
.class {
228
  /* Property comment */
229
  color: red;
230
}
231
```
232

233
### At-Rule Support
234
Proper formatting for CSS at-rules like @media, @keyframes, etc.:
235

236
```css
237
@media screen and (max-width: 768px) {
238
  .responsive {
239
    display: none;
240
  }
241
}
242
```