Nevertheless Published Mine
    Have ideas to improve npm?Join in the discussion! »

    css-tree
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/css-tree package

    1.1.3 • Public • Published

    CSSTree logo

    CSSTree

    NPM version Build Status Coverage Status NPM Downloads Twitter

    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 specs compliant, with focus on CSS analyzing and source-to-source transforming tasks.

    NOTE: The library isn't in final shape and needs further improvements (e.g. AST format and API are subjects to change in next major versions). However it's stable enough and used by projects like CSSO (CSS minifier) and SVGO (SVG optimizer) in production.

    Features

    • 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.

    Documentation

    Tools

    Related projects

    Usage

    Install with npm:

    > npm install css-tree
    

    Basic usage:

    var csstree = require('css-tree');
    
    // parse CSS to AST
    var ast = csstree.parse('.example { world: "!" }');
    
    // traverse AST and modify it
    csstree.walk(ast, function(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
    var ast = csstree.parse('red 1px solid', { context: 'value' });
    
    // match to syntax of `border` property
    var 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' } ]

    Top level API

    API map

    License

    MIT

    Install

    npm i css-tree

    DownloadsWeekly Downloads

    17,848,674

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    989 kB

    Total Files

    123

    Last publish

    Collaborators

    • avatar
    • avatar