tessl/npm-js-beautify
A comprehensive code beautification library for JavaScript, CSS, and HTML with extensive formatting options and cross-platform support
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
css.mddocs/
CSS Beautification
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.
Core Imports
// Import CSS beautifier
const { css_beautify } = require('js-beautify');
const beautify = require('js-beautify');
// Or use the short alias
const { css } = require('js-beautify');ESM:
import beautify from 'js-beautify';
// Use beautify.css() for CSS beautificationCapabilities
CSS Beautify Function
Beautifies CSS source code with support for various formatting styles and selector arrangements.
/**
* Beautify CSS source code
* @param {string} source_text - CSS code to beautify
* @param {Object} options - Formatting options (optional)
* @param {boolean} [options.selector_separator_newline=true] - Add a newline between multiple selectors
* @param {boolean} [options.newline_between_rules=true] - Add a newline between CSS rules
* @param {boolean} [options.space_around_combinator=false] - Add space around CSS combinators
* @param {string} [options.brace_style='collapse'] - Brace placement style for CSS rules: 'collapse', 'expand'
* @returns {string} Beautified CSS code
*/
function css_beautify(source_text, options);
/**
* Get default options for CSS beautifier
* @returns {Object} Default options object with all CSS-specific options
*/
css_beautify.defaultOptions();Usage Examples:
const beautify = require('js-beautify');
// Basic CSS beautification
const uglyCSS = 'body{margin:0;padding:0;}div{color:red;font-size:14px;}';
const beautiful = beautify.css(uglyCSS, { indent_size: 2 });
// Result:
// body {
// margin: 0;
// padding: 0;
// }
//
// div {
// color: red;
// font-size: 14px;
// }
// Compact selector formatting
const multiSelector = 'h1,h2,h3{font-weight:bold;margin:0;}';
const formatted = beautify.css(multiSelector, {
selector_separator_newline: false,
newline_between_rules: true
});
// Result: h1, h2, h3 { ... }
// Expanded brace style
const expandedCSS = beautify.css('.class{display:block;}', {
brace_style: 'expand',
indent_size: 4
});
// Result:
// .class
// {
// display: block;
// }Default Options
Returns the default configuration options for CSS beautification.
/**
* Get default options for CSS beautifier
* @returns {Object} Default options object with all CSS-specific options
*/
css_beautify.defaultOptions();Usage Example:
const beautify = require('js-beautify');
// Get default options
const defaults = beautify.css.defaultOptions();
console.log(defaults.selector_separator_newline); // true
console.log(defaults.newline_between_rules); // true
// Create custom configuration
const myOptions = {
...defaults,
indent_size: 2,
brace_style: 'expand'
};Formatting Options
Selector Separator Newline
Controls whether multiple selectors are placed on separate lines:
Enabled (default):
h1,
h2,
h3 {
font-weight: bold;
}Disabled:
h1, h2, h3 {
font-weight: bold;
}Newline Between Rules
Controls whether newlines are added between CSS rules:
Enabled (default):
.class1 {
color: red;
}
.class2 {
color: blue;
}Disabled:
.class1 {
color: red;
}
.class2 {
color: blue;
}Space Around Combinator
Controls spacing around CSS combinators (>, +, ~, etc.):
Enabled:
.parent > .child {
display: block;
}
.sibling + .next {
margin-top: 10px;
}Disabled (default):
.parent>.child {
display: block;
}
.sibling+.next {
margin-top: 10px;
}Brace Style Options
Collapse (Default)
Places opening braces on the same line as selectors:
.selector {
property: value;
}Expand
Places opening braces on new lines:
.selector
{
property: value;
}CSS-Specific Features
Property Alignment
The beautifier automatically aligns CSS properties and values for consistent formatting:
/* Input */
.class{color:red;background-color:blue;font-size:14px;}
/* Output */
.class {
color: red;
background-color: blue;
font-size: 14px;
}Comment Preservation
CSS comments are preserved and properly formatted:
/* This is a comment */
.class {
/* Property comment */
color: red;
}At-Rule Support
Proper formatting for CSS at-rules like @media, @keyframes, etc.:
@media screen and (max-width: 768px) {
.responsive {
display: none;
}
}