Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
The css-parse npm package is a utility for parsing CSS strings into an abstract syntax tree (AST). This can be useful for analyzing, transforming, or manipulating CSS code programmatically.
Parsing CSS to AST
This feature allows you to parse a CSS string into an abstract syntax tree (AST). The resulting AST can be used for further analysis or transformation of the CSS code.
const css = require('css-parse');
const stylesheet = css.parse('body { font-size: 12px; }');
console.log(JSON.stringify(stylesheet, null, 2));
Handling CSS Errors
This feature demonstrates how to handle errors that may occur during the parsing of CSS. The parser will throw an error if the CSS is not well-formed, which can be caught and handled appropriately.
const css = require('css-parse');
try {
const stylesheet = css.parse('body { font-size: 12px;');
} catch (error) {
console.error('CSS Parsing Error:', error.message);
}
PostCSS is a tool for transforming CSS with JavaScript plugins. It provides a more extensive set of features compared to css-parse, including the ability to parse, transform, and stringify CSS. PostCSS is widely used in the industry and has a large ecosystem of plugins.
CSS Tree is a toolset for CSS including a fast and small CSS parser, walker, generator, and lexer. It offers more advanced features for working with CSS ASTs, such as optimization and validation, making it a more comprehensive solution compared to css-parse.
CSSTree is another library for working with CSS. It provides a fast and small CSS parser, walker, generator, and lexer. CSSTree is designed to be highly efficient and offers more advanced features for working with CSS ASTs, such as optimization and validation.
JavaScript CSS parser for nodejs and the browser.
$ npm install css-parse
var parse = require('css-parse');
// CSS input string
var css = "body { \n background-color: #fff;\n }";
var output_obj = parse(css);
// Position and Source parameters
var output_obj_pos = parse(css, { position: true, source: 'file.css' });
// Print parsed object as CSS string
console.log(JSON.stringify(output_obj, null, 2));
css:
body {
background: #eee;
color: #888;
}
parse tree:
{
"type": "stylesheet",
"stylesheet": {
"rules": [
{
"type": "rule",
"selectors": [
"body"
],
"declarations": [
{
"type": "declaration",
"property": "background",
"value": "#eee"
},
{
"type": "declaration",
"property": "color",
"value": "#888"
}
]
}
]
}
}
parse tree with .position
enabled:
{
"type": "stylesheet",
"stylesheet": {
"rules": [
{
"type": "rule",
"selectors": [
"body"
],
"declarations": [
{
"type": "declaration",
"property": "background",
"value": "#eee",
"position": {
"start": {
"line": 3,
"column": 3
},
"end": {
"line": 3,
"column": 19
}
}
},
{
"type": "declaration",
"property": "color",
"value": "#888",
"position": {
"start": {
"line": 4,
"column": 3
},
"end": {
"line": 4,
"column": 14
}
}
}
],
"position": {
"start": {
"line": 2,
"column": 1
},
"end": {
"line": 5,
"column": 2
}
}
}
]
}
}
If you also pass in source: 'path/to/original.css'
, that will be set
on node.position.source
.
Parsed 15,000 lines of CSS (2mb) in 40ms on my macbook air.
MIT
FAQs
CSS parser
We found that css-parse demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.