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

API

gonzales.parse(css, options)

Parse CSS.

Parameters:

• {String} css
• {{syntax: String, rule: String}} options

Returns:

• {Object} ast.

Example:

var css = 'a {color: tomato}';
var ast = gonzales.parse(css);

Example:

var less = 'a {$color: tomato}';
var ast = gonzales.parse(less, {syntax: 'less'});

Example:

var less = '$color: tomato';
var ast = gonzales.parse(less, {syntax: 'less', rule: 'declaration'});

ast.toString()

ast.toCSS(syntax)

Converts AST to code.

Parameters:

• {String} syntax

Returns:

• {String} css

Example:

var css = ast.toCSS('css');
var less = ast.toCSS('less');

ast.map(function)

Calls the function for every node in a tree. Modifies the tree!

Parameters:

• {Function} function

Example:

ast.map(function(node) {
    if (node.type === 'commentML') node.content = 'panda';
});

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/single-test.js

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.