Issue with media queries

[kitwalker12]

I have the following setup:

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

production.rb

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

_applicationsplit2.css.split2

//= include 'application.css'

application.css.scss

...
@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)
(sass):15
/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

[jhilden]

I would think this might be caused by the known limitation mentionend in the README: https://github.com/zweilove/css_splitter#limitations--known-issues

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.

[jhilden]

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

[kitwalker12]

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 "}"

[jhilden]

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

[jhilden]

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

[kitwalker12]

Thanks. The issue is fixed.

[GoodJob]

Updated to 3.4.9 sass gem helped me at this!