Skip to content


Issue with media queries #27

kitwalker12 opened this Issue · 7 comments

3 participants


I have the following setup:

Rails 4.0.1
gem 'sass-rails', '~> 4.0.0'
gem 'css_splitter', '~> 0.2.0'


config.assets.precompile += %w( jquery-1.7.js application.css application_split2.css )


//= include 'application.css'


@import "somefiles.css.scss"

I'm having issues with precompiling on heroku. One of the files in application.css.scss has @media queries which fail to parse with the error:

rake aborted!
Invalid CSS after "...width: auto; } ": expected selector or at-rule, was "}"
  (in /app/assets/stylesheets/application_split2.css.split2)
/gems/sass-3.2.9/lib/sass/scss/parser.rb:1146:in `expected'
/gems/sass-3.2.9/lib/sass/scss/parser.rb:1084:in `expected'
/gems/sass-3.2.9/lib/sass/scss/parser.rb:28:in `parse'
/gems/sass-3.2.9/lib/sass/engine.rb:342:in `_to_tree'
/gems/sass-3.2.9/lib/sass/engine.rb:315:in `_render'
/gems/sass-3.2.9/lib/sass/engine.rb:262:in `render'
/gems/sprockets-2.10.1/lib/sprockets/sass_compressor.rb:24:in `evaluate'
/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/gems/sprockets-2.10.1/lib/sprockets/context.rb:197:in `block in evaluate'
/gems/sprockets-2.10.1/lib/sprockets/context.rb:194:in `each'
/gems/sprockets-2.10.1/lib/sprockets/context.rb:194:in `evaluate'
/gems/sprockets-2.10.1/lib/sprockets/bundled_asset.rb:25:in `initialize'
/gems/sprockets-2.10.1/lib/sprockets/base.rb:377:in `new'
/gems/sprockets-2.10.1/lib/sprockets/base.rb:377:in `build_asset'
/gems/sprockets-2.10.1/lib/sprockets/index.rb:94:in `block in build_asset'
/gems/sprockets-2.10.1/lib/sprockets/caching.rb:58:in `cache_asset'
/gems/sprockets-2.10.1/lib/sprockets/index.rb:93:in `build_asset'
/gems/sprockets-2.10.1/lib/sprockets/base.rb:287:in `find_asset'
/gems/sprockets-2.10.1/lib/sprockets/index.rb:61:in `find_asset'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:211:in `block in find_asset'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:257:in `benchmark'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:210:in `find_asset'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:119:in `block in compile'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:118:in `each'
/gems/sprockets-2.10.1/lib/sprockets/manifest.rb:118:in `compile'
/gems/sprockets-rails-2.0.1/lib/sprockets/rails/task.rb:60:in `block (3 levels) in define'
/gems/sprockets-2.10.1/lib/rake/sprocketstask.rb:146:in `with_logger'
/gems/sprockets-rails-2.0.1/lib/sprockets/rails/task.rb:59:in `block (2 levels) in define'
/bin/ruby_executable_hooks:15:in `eval'
/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

If I merge this file's css to another file's media query (essentially having the media query in one place instead of 2) fixes the parse error.

How can I fix this issue, as I want to have the media query in separate locations for separate modules?

P.S: This gem has been great for fixing IE issues and thanks for an awesome job

Zweilove member

I would think this might be caused by the known limitation mentionend in the README:

I would certainly be open for any pull requests that fix this issue. The first step would be to build a test case that recreates the exact issue, so there is a solid path for fixing it.

Zweilove member

Looks like there might already be a solution out there #26 Can you try if this works for you?


I tried the solution to #26 but it didn't work. it still failed with

Invalid CSS after "@charset "UTF-8"; ": expected selector or at-rule, was "}"
Zweilove member

Can you provide your source stylesheets or better yet create a failing test case in the gem's testing dummy rails app?

Zweilove member

@kitwalker12 could you try again, after #35 has been merged to master?


Thanks. The issue is fixed.

@kitwalker12 kitwalker12 closed this

Updated to 3.4.9 sass gem helped me at this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.