Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
gonzales-pe
Advanced tools
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.
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());
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 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 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.
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'});
Create a new node.
Parameters:
{String} type
{String|Array} content
Returns:
{Object} ast
Example:
var css = 'a {color: tomato}';
var ast = gonzales.parse(css);
var node = gonzales.createNode('animal', 'panda');
ast.content.push(node);
Converts AST to code.
Parameters:
{String} syntax
Returns:
{String} css
Example:
var css = ast.toCSS('css');
var less = ast.toCSS('less');
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';
});
Calls the function for every child node of given type.
Parameters:
{String} type
{Function} function
Example:
ast.forEach('commentML', function(node) {
node.content = 'panda';
});
Returns the first child node of given type.
Parameters:
{String} type
Returns:
{Node} node
Example:
var node = ast.find('commentML');
node.content = 'panda';
Checks whether there is a child node of given type.
Parameters:
{String} type
Returns:
{Boolean}
Example:
if (ast.contains('panda'))
doSomething();
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
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.
FAQs
Gonzales Preprocessor Edition (fast CSS parser)
The npm package gonzales-pe receives a total of 2,084,350 weekly downloads. As such, gonzales-pe popularity was classified as popular.
We found that gonzales-pe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.