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.

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 clone from github:

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

Build

If you cloned the repo from GitHub, make sure to build library files first.
It can be done by running make in a projet 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.

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 (src 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.