Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
@adobe/css-tools
Advanced tools
This is a fork of the npm css package due to low maintenance
CSS parser / stringifier.
$ npm install @adobe/css-tools
import { parse, stringify } from '@adobe/css-tools'
let obj = parse('body { font-size: 12px; }', options);
let 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
:
var ast = parse('body { font-size: 12px; }', { source: 'source.css' });
var css = stringify(ast);
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 Error
s. Errors collected during parsing when
option silent
is true.Array
of String
s. 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 String
s. 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 String
s. 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.The @container
at-rule.
String
. The part following @container
.Array
of nodes with the types rule
, comment
and any of the
at-rule types.The @layer
at-rule.
String
. The part following @layer
.Array
of nodes with the types rule
, comment
and any of the
at-rule types. This may be null, if the rule did not contain any.The @starting-style
at-rule.
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
The npm package @adobe/css-tools receives a total of 7,297,706 weekly downloads. As such, @adobe/css-tools popularity was classified as popular.
We found that @adobe/css-tools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 27 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
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.