Issue with media queries #27

Closed
kitwalker12 opened this Issue Mar 8, 2014 · 7 comments

Comments

Projects
None yet
3 participants
@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 )

application_split2.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

This comment has been minimized.

Show comment
Hide comment
@jhilden

jhilden Mar 9, 2014

Contributor

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.

Contributor

jhilden commented Mar 9, 2014

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

This comment has been minimized.

Show comment
Hide comment
@jhilden

jhilden Mar 9, 2014

Contributor

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

Contributor

jhilden commented Mar 9, 2014

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

@kitwalker12

This comment has been minimized.

Show comment
Hide comment
@kitwalker12

kitwalker12 Mar 12, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@jhilden

jhilden Apr 18, 2014

Contributor

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

Contributor

jhilden commented Apr 18, 2014

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

@jhilden

This comment has been minimized.

Show comment
Hide comment
@jhilden

jhilden May 6, 2014

Contributor

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

Contributor

jhilden commented May 6, 2014

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

@kitwalker12

This comment has been minimized.

Show comment
Hide comment
@kitwalker12

kitwalker12 May 8, 2014

Thanks. The issue is fixed.

Thanks. The issue is fixed.

@kitwalker12 kitwalker12 closed this May 8, 2014

@GoodJob

This comment has been minimized.

Show comment
Hide comment
@GoodJob

GoodJob Dec 28, 2014

Updated to 3.4.9 sass gem helped me at this!

GoodJob commented Dec 28, 2014

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