aaronjensen/sprockets-media_query_combiner

Sprockets::MediaQueryCombiner

Combines all matching media queries while compiling your assets with sprockets/Rails asset pipeline.

If you're not using Rails 3.1+ or Sprockets, you should use sass-media_query_combiner

For example:

h3 {
  color: orange
}
@media (max-width: 480px) {
  h1 {
    color: red
  }
}
@media (max-width: 980px) {
  h4 {
    color: black
  }
}
@media (max-width: 480px) {
  h2 {
    color: blue
  }
}

Would end up as (except the whitespace won't be so clean):

h3 {
  color: orange
}
@media (max-width: 480px) {
  h1 {
    color: red
  }
  h2 {
    color: blue
  }
}
@media (max-width: 980px) {
  h4 {
    color: black
  }
}

Note

This will change the order of your css, so be aware of that. All the @media queries will end up at the end of each css file in the order that they are first encountered. In other words, if you're relying on only using min-width or only using max-width in a specific order you'll want to be sure define your media queries in the right order up front before you use them randomly throughout your file.

Installation

Requires Ruby >= 1.9.2.

Add this line to your application's Gemfile:

gem 'sprockets-media_query_combiner'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sprockets-media_query_combiner

Usage

If you're using Rails you're done. Nothing more to do.

If you're using Sprockets on its own you'll need to register the bundle processor:

register_bundle_processor 'text/css', Sprockets::MediaQueryCombiner::Processor

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

sprockets-media_query_combiner's Issues

certain media queries don't get merged

# application.css.sass
= respond-to($media)
  @if $media == handheld
    @media only screen and (max-width: 480px)
      @content
  @if $media == tablet
    @media only screen and (max-width: 767px)
      @content

header
  +respond-to('handheld')
    display: none

@import static/_contact.sass

# static/_contact.sass

.contact-title
  +respond-to('tablet')
    display: inline
  +respond-to('handheld')
    display: none

results in:

@media only screen and (max-width: 480px) {
  /* line 6, ../../app/assets/stylesheets/application.css.sass */
  header {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  /* line 1, ../../app/assets/stylesheets/static/_contact.sass */
  .contact-title {
    display: inline;
  }
}
@media only screen and (max-width: 480px) {
  /* line 1, ../../app/assets/stylesheets/static/_contact.sass */
  .contact-title {
    display: none;
  }
}

working with sass

Hi,

I find your tool really useful. I'd like to know if it is possible to automate the processing once Sass has made the conversion to CSS?

I tried several methods, no success ...

License missing from gemspec

RubyGems.org doesn't report a license for your gem. This is because it is not specified in the gemspec of your last release.

via e.g.

spec.license = 'MIT'
# or
spec.licenses = ['MIT', 'GPL-2']

Including a license in your gemspec is an easy way for rubygems.org and other tools to check how your gem is licensed. As you can imagine, scanning your repository for a LICENSE file or parsing the README, and then attempting to identify the license or licenses is much more difficult and more error prone. So, even for projects that already specify a license, including a license in your gemspec is a good practice. See, for example, how rubygems.org uses the gemspec to display the rails gem license.

There is even a License Finder gem to help companies/individuals ensure all gems they use meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough issue that even Bundler now generates gems with a default 'MIT' license.

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue with a nice message. In either case, I'll follow up. Thanks for your time!

Appendix:

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file), GitHub has created a license picker tool. Code without a license specified defaults to 'All rights reserved'-- denying others all rights to use of the code.
Here's a list of the license names I've found and their frequencies

p.s. In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :). See the previous link or my blog post about this project for more information.