パッケージの詳細

mensch

brettstimmerman5mMIT0.3.4

A decent CSS parser

css, parser, parsing, stylesheet

readme

mensch Build Status

A decent CSS parser.

usage

npm install mensch
var mensch = require('mensch');

var ast = mensch.parse('p { color: black; }');
var css = mensch.stringify(ast);

console.log(css);
// => p { color: black; }

api

parse(css, [options={}])

Convert a CSS string or an array of lexical tokens into a stringify-able AST.

  • css {String|Array} CSS string or array of lexical tokens
  • [options] {Object}
  • [options.comments=false] {Boolean} Allow comment nodes in the AST.
  • [options.position=false] {Boolean} Allow line/column position in the AST.

When {position: true}, AST node will have a position property:

{
  type: 'comment',
  text: ' Hello World! ',
  position: {
    start: { line: 1, col: 1 },
    end: { line 1, col: 18 }
  }
}

stringify(ast, [options={}])

Convert a stringify-able AST into a CSS string.

  • ast {Object} A stringify-able AST
  • [options] {Object}
  • [options.comments=false] {Boolean} Allow comments in the stringified CSS.
  • [options.indentation=''] {String} E.g., indentation: ' ' will indent by two spaces.

lex(css)

Convert a CSS string to an array of lexical tokens for use with .parse().

  • css {String} CSS

non-validating

Mensch is a non-validating CSS parser. While it can handle the major language constructs just fine, and it can recover from gaffes like mis-matched braces and missing or extraneous semi-colons, mensch can't tell you when it finds invalid CSS like a misspelled property name or a misplaced @import.

comments

Unlike most CSS parsers, mensch allows comments to be represented in the AST and subsequently stringified with the {comments: true} option.

var options = { comments: true };
var ast = mensch.parse('.red { color: red; /* Natch. */ }', options);
var css = mensch.stringify(ast, options);

console.log(css);
//=> .red { color: red; /* Natch. */ }

However, comments within the context of a selector, property, etc., will be ignored. These comments are difficult to represent in the AST.

var ast = mench.parse('.red /*1*/ { color /*2*/: /*3*/ red /*4*/; }', options);
var css = mesch.stringify(ast, options);

console.log(css);
//=> .red { color: red; }

ast

The structure of mensch's AST riffs on several existing CSS parsers, but it might not be 100% compatible with other CSS parsers. Here it is in a nutshell:

{
  type: 'stylesheet'
  stylesheet: {
    rules: [{
      type: 'rule',
      selectors: ['.foo'],
      declarations: [{
        type: 'property',
        name: 'color',
        value: 'black'
      }]
    }]
  }
}

credits

Mensch is based on several existing CSS parsers, but nzakas/parser-lib and visionmedia/css are notable influences.

known users

voidlabs/mosaico uses Mensch parser to parse custom-flavored CSS rules in email templates and make the template editable: positions, comment parsing, multiple declarations for the same property have been keys to the choice of Mensch!

Automattic/juice moved to Mensch CSS parser since 3.0 release in order to fix dozen of issues with the previous parser, expecially with support for "multiple properties declarations" in the same ruleset and with invalid values.

Please let us know if you use Mensch in your library!

更新履歴

mensch history

0.3.4 - 09 Nov 2019

  • Fix global leak and stringify indentation

0.3.3 - 04 Aug 2016

  • Added Bower.json
  • Preserve property spacing when value starts with "special/unexpected" chars '(@*/{):'.

0.3.2 - 18 Aug 2015

  • Fixed column/line computation for comments and at-rules (Fix #15)
  • Closing } and ; now takes precedence over declaration value parsing (Fix #14)
  • Ignore curly braces in strings (Fix #13)
  • Keep \n and \t inside values and consider them "whitespace" (Fix #12)
  • Fixed column count in positions for rows after the first line (Fix #18)
  • Enabled running test suite under Windows (CRLF vs LF issues)

0.3.1 - 1 Dec 2013

  • Retain whitespace in selectors. Closes #8
  • Add support for @-ms-keyframes.

0.3.0 - 23 Nov 2013

  • Improve handling of quotes in values. Closes #5
  • Add support for @document (and @-moz-document), @namespace and @page.

0.2.1 - 20 Sep 2013

  • Trim whitespace around grouped selectors.

0.2.0 - 18 Sep 2013

  • Correctly handle comments as children of at-groups. Fix #2

0.1.0 - 17 Jun 2013

  • Added new boolean position option to parse(), which will include position data in the AST when enabled.
  • Moved node.selector to node.selectors, and changed the value to an array.
  • Various parser improvements and bug fixes.

0.0.1 - 11 Jun 2013

  • Initial release.