@types/css-tree

What is @types/css-tree?

@types/css-tree provides TypeScript type definitions for the css-tree library, which is a toolset for working with CSS, including parsing, generating, and transforming CSS code.

What are @types/css-tree's main functionalities?

Parsing CSS

This feature allows you to parse CSS code into an Abstract Syntax Tree (AST). The code sample demonstrates how to parse a simple CSS rule.

const csstree = require('css-tree');
const ast = csstree.parse('.example { color: red; }');
console.log(ast);

Generating CSS

This feature allows you to generate CSS code from an AST. The code sample shows how to generate CSS from a previously parsed AST.

const csstree = require('css-tree');
const ast = csstree.parse('.example { color: red; }');
const css = csstree.generate(ast);
console.log(css);

Transforming CSS

This feature allows you to transform CSS code by walking through the AST and modifying nodes. The code sample demonstrates changing the color property from red to blue.

const csstree = require('css-tree');
const ast = csstree.parse('.example { color: red; }');
csstree.walk(ast, function(node) {
  if (node.type === 'Declaration' && node.property === 'color') {
    node.value = csstree.parse('blue', { context: 'value' });
  }
});
const css = csstree.generate(ast);
console.log(css);

Other packages similar to @types/css-tree

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It provides a similar functionality to css-tree in terms of parsing and transforming CSS, but it is more focused on plugin-based transformations and has a larger ecosystem of plugins.

csstools

CSSTools is a collection of tools for working with CSS, including parsers and transformers. It offers similar capabilities to css-tree but is more modular, allowing you to use only the parts you need.

rework

Rework is a plugin framework for CSS preprocessing. It allows you to parse, manipulate, and stringify CSS, similar to css-tree, but it is designed to be simpler and more lightweight.

README

Installation

npm install --save @types/css-tree

Summary

This package contains type definitions for css-tree (https://github.com/csstree/csstree).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/css-tree.

Additional Details

• Last updated: Tue, 21 Feb 2023 01:32:40 GMT
• Dependencies: none
• Global values: none

Credits

These definitions were written by Erik Källén, and Jason Kratzer.