Search code examples
ruby-on-railsjquery-mobilethemeroller

Rails 3 + jQuery Mobile Themeroller = Invalid CSS


Using a custom jQuery Mobile theme created via Themeroller works fine with Rails for local development. However, running:

rake assets:precompile

on the production server results in this error:

Invalid CSS after "...gradient(linear": expected ")", was ",left top,left ..."

With that line of code in custom-theme.min.css being:

background-image:-webkit-gradient(linear,left top,left bottom,from( #333333 ),to( #333333 ));

The custom theme is included in application.css:

 *= require_self
 *= require_tree .
 *= require jquery.mobile.structure-1.1.1.min
 *= require custom-theme.min
 *= require jquery-mobile-fluid960.min

I believe the generated Themeroller syntax is valid... Does it have something to do with the css/sass/scss combination?


Solution

  • Turns out the jQuery Mobile Themeroller can be a little buggy. If gradients and borders are not set—that is, omitting the hex color code—it still generates the # tag but no color code, or appends 'NaN' to the end of a gradient color. Setting all colors in Themeroller and then a simple search for border:1px solid # ; and replace on the generated *.min.css file cleaned this up.