Project

sqwish

0.0
No commit activity in last 3 years
No release in over 3 years
Compresses CSS.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

>= 0
 Project Readme

Sqwish-ruby

A CSS compressor

This as a Ruby bridge to Sqwish by Dustin Diaz to compress CSS very efficiently.

Ruby usage

Just install it:

$ gem install sqwish

Then use it like so:

require 'sqwish'

Sqwish.minify "div { color: red; } div { background: black; }"
#=> "div{color:red}div{background:black}"

You can also use the strict: true flag (it defaults to false):

Sqwish.minify "div { color: red; } div { background: black; }", strict: true
#=> "div{color:red;background:black}"

Rails usage

In your Gemfile:

gem 'sqwish'

# or optionally:
gem 'sqwish', github: 'rstacruz/sqwish.rb'

In your config/environments/production.rb:

config.assets.css_compressor = Sqwish

# or use strict mode:
config.assets.css_compressor = Sqwish::Strict

Why would I wanna use Sqwish for Rails?

If you use Sass (or a similar preprocessor), you probably separate your CSS definitions into multiple files. In Sass, there are two ways to do this:

/* Method 1: @import */
@import 'common';
@import 'layout';
@import 'chrome';
@import 'pages';

This is very convenient, and efficient in space, but slow. If you change one Sass file, the rest will have to be recompiled. In big projects, you can be waiting up to 10 seconds after updating a simple style.

Which leads us to method 2:

/* Method 2: Sprockets require */
//= require common
//= require layout
//= require chrome
//= require pages

This is faster! Updating one will no longer re-compile the others! The only problem here is that styles may be duplicated in each file, say, if each file depends on a web-font. You can end up with:

/* Method 1's crappy output with YUI :( */
@font-face{font-family:'Montserrat';...}
body{font-family:Montserrat}
@font-face{font-family:'Montserrat';...}
.page h1{font-family:Montserrat}

...which YUI (Rails/Sprocket's default compressor) will not optimize for you.

Use Sqwish! It will remove those duplicate @font-faces for you and combine anything else that can be combined.

/* Method 2's nice output with Sqwish :D */
@font-face{font-family:'Montserrat';...}
body,.page h1{font-family:Montserrat}

Authors

Released under the MIT license.