Introducing Guff, a Combined SASS/SCSS Compiler and CSS Minifier
We are pleased to announce the first public release of guff, the latest entry in our never-ending war to rid our development workflows of insecure, buggy, and slow Node/NPM dependencies.
Put simply, it is a SASS/SCSS compiler and CSS minifier rolled into one. guff is designed for x86-64 Linux platforms, but can be cross-compiled to other Unix flavors like MacOS.
It works something like this:
guff -i src/style.scss -o assets/style.css
Performance
When guff is passed a SASS/SCSS input file, it compiles it down to CSS, then minifies it.
Two Jobs, One Command.
Technically, many existing SASS/SCSS compilers — like sassc and grass — can also do this, but their compression implementations are naive, producing larger-than-necessary output.
As such, it is much more common to handle minification in a separate, secondary pass, using specialized programs like csso. This produces smaller code, but comes at the cost of performance.
Either way, guff is faster!
When guff is passed a CSS input file, it is able to skip the compilation step entirely, and jump straight to the business of minifying.
With SCSS removed from the equation, both timings drop, but the picture doesn't much change. guff is massively faster than csso.
But at the end of the day, speed only matters once; size matters indefinitely.
So how does guff stack up on the compression front?
It's compressier too!
At first glance, the difference in sizings may not look all that impressive, but when it comes to stylesheets, every byte counts.
Until the browser has the page's styles in hand, it can't meaningfully render the content!
It is also worth noting that this site's CSS is on the slim side to begin with. For most projects, a reduction of a few percent would translate to several kilobytes.
CSS Feature Compatibility
The main difference between the naive and advanced CSS minification tools is an awareness of the latest and greatest CSS features.
If given rule(s) can be written, say, five different ways, an opportunity arises: the app can compare each representation and pick the smallest.
This is precisely what parcel-css — the excellent minification library guff uses under-the-hood — does.
This approach can, however, cause problems for projects wishing to maintain backward compatibility with older browsers.
Internet Explorer, for example, still sucks.
To that end, guff exposes a -b/--browsers option, allowing CSS compatibility to be capped to arbitrary browser/version (release) pairings.
# Don't do anything Firefox 90 doesn't understand.
guff -b 'firefox 90' -i large.css -o small.css
Depending on the nature of the CSS, the resulting code might come out slightly larger — or no different at all — but the option is there, if needed.
Stability, Etc.
guff draws heavily from grass — for SASS/SCSS parsing — and parcel-css — for CSS minification.
Both libraries are under active development, and are best classified as "works in progress".
grass, in particular, is not yet fully compliant with the full breadth of SASSiness, though all of the main features are solid, so unless you're doing something weird, it should be perfectly usable. The missing bits are tracked here, for reference.
Bearing all that in mind, you should test any CSS generated by guff in a staging environment before pushing it to production, just to make sure it does what you need it to.
But that said, we've been successfully using it for many of our projects for months now, and it's been great! ;)
Get Guff Today!
If you'd like to give guff a try, check out the repository.
Pre-built .deb packages for Ubuntu/Debian are linked from the release page. For other platforms, it can be built from source using cargo.