Difference between this and `cssify`?

[jonscottclark]

Hey @cheton,

Can you explain any differences/benefits between your package and https://github.com/davidguttman/cssify ? Just curious, thanks!

(Firstly, it seems like cssify doesn't include the clean-css transforms. Anything else?)

[cheton]

In addition to using clean-css for minifying CSS files, it can concatenate, inline, and rebase urls in CSS files using @import statements. For example:

index.css

@import url("node_modules/bootstrap/dist/bootstrap.css");
@import url("components/foo/index.css");
body {
    background-color: #fff;
}

index.js

require('./index.css');

The above code will produce only one <style /> tag within HTML.

The browserify-css transform also provides the processRelativeUrl option that allows you to copy font and image files within node_modules. Here is the Bootstrap example:

node_modules/
    bootstrap/
        dist/
            css/
                bootstrap.css
            fonts/
                glyphicons-halflings-regular.eot
                glyphicons-halflings-regular.svg
                glyphicons-halflings-regular.ttf
                glyphicons-halflings-regular.woff
                glyphicons-halflings-regular.woff2

You can check out my sample code here.