The 'css' npm package is a powerful library for parsing, manipulating, and generating CSS. It allows developers to programmatically work with CSS stylesheets, making it easier to handle dynamic styling in web applications.
Parsing CSS
This feature allows you to parse a CSS string into a JavaScript object. The parsed result includes detailed information about styles, rules, and selectors, which can be manipulated or queried.
const css = require('css');
const stylesheet = css.parse('body { font-size: 12px; }');
console.log(stylesheet);Stringifying CSS
This feature converts a JavaScript object representing a CSS stylesheet back into a CSS string. This is useful for generating CSS styles dynamically based on logic within your application.
const css = require('css');
const obj = {
type: 'stylesheet',
stylesheet: {
rules: [{
type: 'rule',
selectors: ['body'],
declarations: [{
type: 'declaration',
property: 'margin',
value: '0 auto'
}]
}]
}
};
const stringifiedCSS = css.stringify(obj);
console.log(stringifiedCSS);Manipulating CSS
This feature allows you to manipulate an existing CSS stylesheet by adding, modifying, or removing rules and declarations. This example demonstrates adding a new declaration to an existing rule.
const css = require('css');
const stylesheet = css.parse('h1 { color: red; }');
stylesheet.stylesheet.rules[0].declarations.push({
type: 'declaration',
property: 'font-size',
value: '20px'
});
const newCSS = css.stringify(stylesheet);
console.log(newCSS);PostCSS is a tool for transforming CSS with JavaScript plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. It is more plugin-driven compared to 'css', offering a broader range of transformations.
Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It provides more features like variables, nested rules, and mixins compared to the basic CSS manipulations offered by 'css'.
Less is a backward-compatible language extension for CSS. This is very similar to Sass but uses a different syntax. It provides variables, mixins, and functions which allows you to make CSS that is more maintainable, themable, and extendable than the 'css' package.
CSS parser / stringifier.
$ npm install css
var css = require('css');
var obj = css.parse('body { font-size: 12px; }', options);
css.stringify(obj, options);
Accepts a CSS string and returns an AST object.
options:
css. Makes errors and source
maps more helpful, by letting them know where code comes from.Accepts an AST object (as css.parse produces) and returns a CSS string.
options:
source
option of css.parse is strongly recommended when creating a source map.
Specify sourcemap: 'generator' to return the SourceMapGenerator object
instead of serializing the source map.false to disable) reads any
source maps referenced by the input files when generating the output source
map. When enabled, file system access may be required for reading the
referenced source maps.var ast = css.parse('body { font-size: 12px; }', { source: 'source.css' });
var css = css.stringify(ast);
var result = css.stringify(ast, { sourcemap: true });
result.code // string with CSS
result.map // source map object
Errors thrown during parsing have the following properties:
String. The full error message with the source position.String. The error message without position.String or undefined. The value of options.source if
passed to css.parse. Otherwise undefined.Integer.Integer.String. The portion of code that couldn't be parsed.When parsing with the silent option, errors are listed in the
parsingErrors property of the stylesheet node instead
of being thrown.
If you create any errors in plugins such as in rework, you must set the same properties for consistency.
Interactively explore the AST with http://iamdustan.com/reworkcss_ast_explorer/.
All nodes have the following properties.
Information about the position in the source string that corresponds to the node.
Object:
Object:
Number.Number.Object:
Number.Number.String or undefined. The value of options.source if passed to
css.parse. Otherwise undefined.String. The full source string passed to css.parse.The line and column numbers are 1-based: The first line is 1 and the first column of a line is 1 (not 0).
The position property lets you know from which source file the node comes
from (if available), what that file contains, and what part of that file was
parsed into the node.
String. The possible values are the ones listed in the Types section below.
A reference to the parent node, or null if the node has no parent.
The available values of node.type are listed below, as well as the available
properties of each node (other than the common properties listed above.)
The root node returned by css.parse.
Object:
Array of nodes with the types rule, comment and any of the
at-rule types.Array of Errors. Errors collected during parsing when
option silent is true.Array of Strings. The list of selectors of the rule, split
on commas. Each selector is trimmed from whitespace and comments.Array of nodes with the types declaration and comment.String. The property name, trimmed from whitespace and
comments. May not be empty.String. The value of the property, trimmed from whitespace and
comments. Empty values are allowed.A rule-level or declaration-level comment. Comments inside selectors, properties and values etc. are lost.
String. The part between the starting /* and the ending */
of the comment, including whitespace.The @charset at-rule.
String. The part following @charset .The @custom-media at-rule.
String. The ---prefixed name.String. The part following the name.The @document at-rule.
String. The part following @document .String or undefined. The vendor prefix in @document, or
undefined if there is none.Array of nodes with the types rule, comment and any of the
at-rule types.The @font-face at-rule.
Array of nodes with the types declaration and comment.The @host at-rule.
Array of nodes with the types rule, comment and any of the
at-rule types.The @import at-rule.
String. The part following @import .The @keyframes at-rule.
String. The name of the keyframes rule.String or undefined. The vendor prefix in @keyframes, or
undefined if there is none.Array of nodes with the types keyframe and comment.Array of Strings. The list of “selectors” of the keyframe rule,
split on commas. Each “selector” is trimmed from whitespace.Array of nodes with the types declaration and comment.The @media at-rule.
String. The part following @media .Array of nodes with the types rule, comment and any of the
at-rule types.The @namespace at-rule.
String. The part following @namespace .The @page at-rule.
Array of Strings. The list of selectors of the rule, split
on commas. Each selector is trimmed from whitespace and comments.Array of nodes with the types declaration and comment.The @supports at-rule.
String. The part following @supports .Array of nodes with the types rule, comment and any of the
at-rule types.CSS:
body {
background: #eee;
color: #888;
}
Parse tree:
{
"type": "stylesheet",
"stylesheet": {
"rules": [
{
"type": "rule",
"selectors": [
"body"
],
"declarations": [
{
"type": "declaration",
"property": "background",
"value": "#eee",
"position": {
"start": {
"line": 2,
"column": 3
},
"end": {
"line": 2,
"column": 19
}
}
},
{
"type": "declaration",
"property": "color",
"value": "#888",
"position": {
"start": {
"line": 3,
"column": 3
},
"end": {
"line": 3,
"column": 14
}
}
}
],
"position": {
"start": {
"line": 1,
"column": 1
},
"end": {
"line": 4,
"column": 2
}
}
}
]
}
}
MIT
FAQs
CSS parser / stringifier
We found that css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 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.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.