gonzales-pe

What is gonzales-pe?

The gonzales-pe npm package is a CSS parser that can parse CSS, SCSS, LESS, and other CSS-like syntaxes. It is useful for tasks such as linting, formatting, and transforming stylesheets.

What are gonzales-pe'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 string and convert it into a JSON representation of the AST.

const gonzales = require('gonzales-pe');
const ast = gonzales.parse('.class { color: red; }', { syntax: 'css' });
console.log(ast.toJson());

Parsing SCSS

This feature allows you to parse SCSS code into an AST. The code sample shows how to parse a simple SCSS string and convert it into a JSON representation of the AST.

const gonzales = require('gonzales-pe');
const ast = gonzales.parse('.class { color: red; }', { syntax: 'scss' });
console.log(ast.toJson());

Parsing LESS

This feature allows you to parse LESS code into an AST. The code sample demonstrates how to parse a simple LESS string and convert it into a JSON representation of the AST.

const gonzales = require('gonzales-pe');
const ast = gonzales.parse('.class { color: red; }', { syntax: 'less' });
console.log(ast.toJson());

Transforming AST

This feature allows you to traverse and transform the AST. The code sample shows how to change the color property from 'red' to 'blue' in a CSS AST.

const gonzales = require('gonzales-pe');
let ast = gonzales.parse('.class { color: red; }', { syntax: 'css' });
ast.traverse(function(node) {
  if (node.type === 'declaration' && node.content[0].content === 'color') {
    node.content[1].content = 'blue';
  }
});
console.log(ast.toString());

Other packages similar to gonzales-pe

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It is more versatile and has a larger ecosystem of plugins compared to gonzales-pe. PostCSS can be used for linting, autoprefixing, and many other CSS transformations.

csstree

CSSTree is a tool for working with CSS, including parsing, generating, and analyzing CSS. It provides a more detailed and accurate AST compared to gonzales-pe and includes utilities for working with the AST.

rework

Rework is a plugin framework for CSS preprocessing. It allows you to transform CSS with plugins, similar to PostCSS. Rework is simpler and less feature-rich compared to PostCSS but can be easier to use for basic transformations.

README

Gonzales is a fast CSS parser.
Gonzales PE is a rework with support of preprocessors.

Currently those are supported: SCSS, Sass, LESS.

For a plan of future work see issue #4.

Install

To install globally:

npm install gonzales-pe -g

To install as a project dependency:

npm install gonzales-pe

To install dev branch:

npm install git://github.com/tonyganch/gonzales-pe.git#dev

To clone from github:

git clone [e-mail]:tonyganch/gonzales-pe.git

Build

If you installed/cloned the repo from GitHub, make sure to build library files first.
It can be done by running make in the module's root directory.
make will build both Node.js and web versions (all files are comments-free but not compressed).
If you need a minified version for production, feel free to use uglifier of your choice.

Use

Require Gonzales in your project:

var gonzales = require('gonzales-pe');

Do something:

var css = 'a { color: tomato }';
console.log(gonzales.cssToAST(css));

You can learn more about available methods on Gonzales usage page.

AST is described on Gonzales AST description page.

You can also invoke gonzales via a shell command (if you globally install it via npm install gonzales-pe -g)

gonzales myFile.css

Outputs the AST for that file. Example output:

['stylesheet',
  ['atrules',
    ['atkeyword',
      ['ident', 'import']],
    ['s', '
']]]

Test

To run tests:

npm test

This command will build library files from sources and run tests on all files in syntax directories.

Every test has 3 files: source stylesheet, expected AST and expected string compiled back from AST to css.

If some tests fail, you can find information in test logs:

• log/test.log contains all information from stdout;
• log/expected.txt contains only expected text;
• log/result.txt contains only result text.

The last two are made for your convenience: you can use any diff app to see the defference between them.

If you want to test one specific string or get a general idea of how Gonzales works, you can use test/ast.js file.
Simply change the first two strings (css and syntax vars) and run:

node test/ast.js

Please remember to also run make every time you modify any source files.

Report

If you find a bug or want to add a feature, welcome to Issues.

If you are shy but have a question, feel free to drop me a line.