A tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations
The css-tree npm package is a tool for parsing and manipulating CSS. It allows users to parse CSS strings into an abstract syntax tree (AST), walk over nodes in the tree, generate CSS strings, and more. It is useful for tasks such as CSS minification, linting, and transformation.
Parsing CSS to AST
This feature allows you to parse a CSS string and convert it into an abstract syntax tree (AST) for further manipulation or analysis.
const csstree = require('css-tree');
const ast = csstree.parse('.example { color: red; }');Walking the AST
This feature enables you to traverse the AST and apply functions or extract information from specific nodes.
csstree.walk(ast, function(node) {
if (node.type === 'ClassSelector') {
console.log(node.name);
}
});Generating CSS from AST
After manipulating the AST, you can generate a CSS string from the modified AST, which can be used in stylesheets or injected into web pages.
const modifiedAST = csstree.parse('.example { color: blue; }');
const css = csstree.generate(modifiedAST);Minifying CSS
css-tree can be used to minify CSS by parsing it with compression options and then translating the AST back to a CSS string.
const compressedCSS = csstree.translate(csstree.parse('.example { color: red; }', { compress: true }));PostCSS is a tool for transforming CSS with JavaScript plugins. It can do similar tasks as css-tree, such as parsing, walking the AST, and generating CSS. PostCSS is plugin-based, which makes it more extensible and allows for a wide range of transformations.
Sass is a preprocessor scripting language that is interpreted or compiled into CSS. It offers more syntactic features compared to css-tree, such as variables, nesting, and mixins, but it is not primarily focused on parsing and manipulating existing CSS.
Less is another CSS pre-processor, similar to Sass, that extends the capabilities of CSS with dynamic behavior such as variables, mixins, operations, and functions. Less and css-tree serve different purposes, with Less focusing on writing CSS in a more functional way and css-tree on parsing and manipulation.
clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It focuses on minification, which is one of the features of css-tree, but does not provide a general-purpose CSS parsing and manipulation API.
CSSTree is a tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.
Detailed parsing with an adjustable level of detail
By default CSSTree parses CSS as detailed as possible, i.e. each single logical part is representing with its own AST node (see AST format for all possible node types). The parsing detail level can be changed through parser options, for example, you can disable parsing of selectors or declaration values for component parts.
Tolerant to errors by design
Parser behaves as spec says: "When errors occur in CSS, the parser attempts to recover gracefully, throwing away only the minimum amount of content before returning to parsing as normal". The only thing the parser departs from the specification is that it doesn't throw away bad content, but wraps it in a special node type (Raw) that allows processing it later.
Fast and efficient
CSSTree is created with focus on performance and effective memory consumption. Therefore it's one of the fastest CSS parsers at the moment.
Syntax validation
The build-in lexer can test CSS against syntaxes defined by W3C. CSSTree uses mdn/data as a basis for lexer's dictionaries and extends it with vendor specific and legacy syntaxes. Lexer can only check the declaration values currently, but this feature will be extended to other parts of the CSS in the future.
Install with npm:
npm install css-tree
Basic usage:
import * as csstree from 'css-tree';
// parse CSS to AST
const ast = csstree.parse('.example { world: "!" }');
// traverse AST and modify it
csstree.walk(ast, (node) => {
if (node.type === 'ClassSelector' && node.name === 'example') {
node.name = 'hello';
}
});
// generate CSS from AST
console.log(csstree.generate(ast));
// .hello{world:"!"}
Syntax matching:
// parse CSS to AST as a declaration value
const ast = csstree.parse('red 1px solid', { context: 'value' });
// match to syntax of `border` property
const matchResult = csstree.lexer.matchProperty('border', ast);
// check first value node is a <color>
console.log(matchResult.isType(ast.children.first, 'color'));
// true
// get a type list matched to a node
console.log(matchResult.getTrace(ast.children.first));
// [ { type: 'Property', name: 'border' },
// { type: 'Type', name: 'color' },
// { type: 'Type', name: 'named-color' },
// { type: 'Keyword', name: 'red' } ]
Is it possible to import just a needed part of library like a parser or a walker. That's might useful for loading time or bundle size optimisations.
import * as tokenizer from 'css-tree/tokenizer';
import * as parser from 'css-tree/parser';
import * as walker from 'css-tree/walker';
import * as lexer from 'css-tree/lexer';
import * as definitionSyntax from 'css-tree/definition-syntax';
import * as data from 'css-tree/definition-syntax-data';
import * as dataPatch from 'css-tree/definition-syntax-data-patch';
import * as utils from 'css-tree/utils';
Bundles are available for use in a browser:
dist/csstree.js – minified IIFE with csstree as global<script src="node_modules/css-tree/dist/csstree.js"></script>
<script>
csstree.parse('.example { color: green }');
</script>
dist/csstree.esm.js – minified ES module<script type="module">
import { parse } from 'node_modules/css-tree/dist/csstree.esm.js'
parse('.example { color: green }');
</script>
One of CDN services like unpkg or jsDelivr can be used. By default (for short path) a ESM version is exposing. For IIFE version a full path to a bundle should be specified:
<!-- ESM -->
<script type="module">
import * as csstree from 'https://cdn.jsdelivr.net/npm/css-tree';
import * as csstree from 'https://unpkg.com/css-tree';
</script>
<!-- IIFE with an export to global -->
<script src="https://cdn.jsdelivr.net/npm/css-tree/dist/csstree.js"></script>
<script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
MIT
3.0.0 (September 11, 2024)
@container at-rule@starting-style at-rule@scope at-rule@position-try at-rule@layer at-rulelayer, layer() and supports() in the @media at-rule (according to the @import rule in Cascading and Inheritance 5)Layer and LayerList node typesTokenStream#lookupTypeNonSC() method<dashed-ident> to generic typesmdn/data to 2.10.0<'font'> to CSS Fonts 4<color> to CSS Color 5Object.prototype is extended or polluted (#262)fork() method to consider the generic option when creating a Lexer instance (#266)line or offset is specified via options (#251)speak syntax patch (#241):lang() to accept a list of <ident> or <string> per spec (#265)<'property'>, when the syntax has a top-level #-multiplier (#102)parseWithFallback() to rollback tokenIndex before calling a fallbackBlock to not include { and }Atrule and Rule to include { and } for a blockRatio parsing:
Ratio can be omitted. While this can't be a parser output (which would produce a Number node), it's feasible during Ratio node construction or transformation.Added new node types:
Feature: represents features like (feature) and (feature: value), fundamental for both @media and @container at-rulesFeatureRange: represents features in a range contextFeatureFunction: represents functional features such as @supports's selector() or @container's style()Condition: used across all query-like at-rules, encapsulating queries with features and the not, and, and or operatorsGeneralEnclosure: represents the <general-enclosed> production, which caters to unparsed parentheses or functional expressionsNote: All new nodes include a
kindproperty to define the at-rule type. Supported kinds aremedia,supports, andcontainer.
Added support for functions for features and features in a range context, e.g. (width: calc(100cm / 6))
Added a condition value for the parser's context option to parse queries. Use the kind option to specify the condition type, e.g., parse('...', { context: 'condition', kind: 'media' }).
Introduced a features section in the syntax configuration for defining functional features of at-rules. Expand definitions using the fork() method. The current definition is as follows:
features: {
supports: { selector() { /* ... */ } },
container: { style() { /* ... */ } }
}
Changes for @media at-rule:
GeneralEnclosed.(width > 100px) or (100px < height < 400px)MediaFeature node type to the Feature node type with kind: "media".MediaQuery node structure into the following form:
type MediaQuery = {
type: "MediaQuery";
modifier: string | null; // e.g. "not", "only", etc.
mediaType: string | null; // e.g. "all", "screen", etc.
condition: Condition | null;
}
Changes for @supports at-rule:
GeneralEnclosed.(width > 100px) or (100px < height < 400px)SupportsDeclaration node type to encapsulate a declaration in a query, replacing Parentheses.Condition or SupportsDeclaration nodes of kind supports instead of Parentheses.selector() feature via the FeatureFunction node (configured in features.supports.selector).FAQs
A tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations
The npm package css-tree receives a total of 26,422,917 weekly downloads. As such, css-tree popularity was classified as popular.
We found that css-tree demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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 threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.