I’m using Rails 4 with the Heroku hosting environment. I’m getting the below baffling error on Heroku (and not locally) and I have no idea what it means.
2016-03-23T19:19:13.786503+00:00 app[web.1]: I, [2016-03-23T19:19:13.786423 #10] INFO -- : Started GET "/users/3/edit" for 216.216.68.69 at 2016-03-23 19:19:13 +0000
2016-03-23T19:19:13.810807+00:00 app[web.1]: Processing by UsersController#edit as HTML
2016-03-23T19:19:13.810837+00:00 app[web.1]: Parameters: {"id"=>"3"}
2016-03-23T19:19:13.941686+00:00 app[web.1]: D, [2016-03-23T19:19:13.941579 #10] DEBUG -- : User Load (4.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1 [["id", 3]]
2016-03-23T19:19:14.033037+00:00 app[web.1]: D, [2016-03-23T19:19:14.032952 #10] DEBUG -- : AvatarFile Load (2.4ms) SELECT "Avatar_files".* FROM "Avatar_files"
2016-03-23T19:19:14.972908+00:00 heroku[router]: at=info method=GET path="/users/3/edit" host=myapplication.herokuapp.com request_id=08750a35-37ea-4089-8894-dab950320fa7 fwd="216.216.68.69" dyno=web.1 connect=0ms service=1193ms status=500 bytes=154
2016-03-23T19:19:14.975845+00:00 app[web.1]: Rendered users/edit.html.erb within layouts/application (982.0ms)
2016-03-23T19:19:14.976082+00:00 app[web.1]: Completed 500 Internal Server Error in 1165ms (ActiveRecord: 22.6ms)
2016-03-23T19:19:14.976333+00:00 app[web.1]: 2016-03-23 19:19:14 +0000: Rack app error: #<ActionView::Template::Error: Invalid CSS after "...-------------*/": expected selector or at-rule, was ".ui-widget {">
2016-03-23T19:19:14.976404+00:00 app[web.1]: (sass):298
Here is the “./app/views/users/edit.html.erb” page that is being invoked …
<%= stylesheet_link_tag "users" %>
<%= stylesheet_link_tag "formFields" %>
<div id="profile" class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(@user, :method => :put) do |f| %>
<h2>Tell Us More ...</h2>
<div class="profileField">
Height
<%= f.text_field :height_feet, :size=>"2", class: 'form-control' %> ft.
<%= f.text_field :height_inches, :size=>"2", class: 'form-control' %> in.
</div>
<div class="profileField">
<%= f.label :weight %>
<%= f.text_field :weight, :size=>"3", class: 'form-control' %> lbs.
</div>
<div class="profileField">
<%= f.hidden_field :avatar_file_id %>
Choose Your Avatar
<p><% @Avatar_files.each do |image| %>
<%= image_tag "avatar_images/#{image.file.split('/').last}", height:100, class:”avatar_file #{image.id == f.object.avatar_file_id ? 'selected' : ''}", :data => { :id => image.id } %>
<% end %></p>
</div>
<div class="profileField">
<%= f.submit "Save", :method => :put, :class => 'button' %>
</div>
<% end %>
</div>
</div>
I see references to ‘ui-widget’ in files named things like “./public/assets/application-14d0c3dc29cdd54dd0c7b279da75470cf63fd410286c0b5d00f5c1254c6c79e3.css”, however none of these I have created myself. Any ideas what I need to do to overcome this baffling error?
Edit: The files from the “app/assets/stylesheets/” directory are
app/assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require jquery-ui
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme'
app/assets/stylesheets/formFields.css.scss
input[type=text] {
font-size: 20px;
font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: asset-data-url('down_arrow_select.jpg') no-repeat right #ddd;
border: 1px solid #ccc;
}
.button {
margin: 0 0 5px;
padding: 0 12px;
height: 28px;
line-height: 28px;
font-size: 18px;
font-weight: bold;
color: #555555;
text-decoration: none;
text-shadow: 0 1px white;
background: #dfdfdf;
border-width: 1px 1px 0;
border-style: solid;
border-color: #cecece #bababa #a8a8a8;
border-radius: 3px 3px 2px 2px;
outline: 0;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
background-image: -moz-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
background-image: -o-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
background-image: linear-gradient(to bottom, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
-webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
}
.button:hover, .button:active {
background: #dfdfdf;
border-top-color: #c9c9c9;
}
.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active {
vertical-align: -5px;
margin-top: 5px;
margin-bottom: 0;
padding: 1px 13px 0;
border-width: 0;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}
app/assets/stylesheets/home.css.scss
.totalHeading {
font-family: Gill Sans, Verdana;
font-size: 18px;
line-height: 14px;
letter-spacing: 2px;
font-weight: bold;
margin: 10px;
}
.totalNumber {
font-family: times, Times New Roman, times-roman, georgia, serif;
color: #444;
margin: 0;
padding: 0px 0px 6px 0px;
font-size: 51px;
line-height: 44px;
letter-spacing: -2px;
font-weight: bold;
}
#container {
display: block;
font-size: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#left {
display: inline-block;
font-size: 16px;
margin: 5px;
}
#right {
display: inline-block;
font-size: 16px;
vertical-align: top;
margin: 5px;
}
app/assets/stylesheets/users.css.scss
.profileField:before {
content:'';
display: block;
}
.profileField {
margin: 30px;
font-size: 30px;
font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#profile {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align:center;
}
.avatar_file {
cursor: pointer;
}
.unselected {
border: none;
}
.selected {
border: solid 2px red;
}
That file is generated by Rails's asset pipeline from the files under your app/assets and vendor/assets and any gems that provide these assets.
As you'll see in there, assets are handled differently in production. The issue here isn't about Heroku vs local, it's about development vs production.
The problem is that you're combining the Sprockets includes with the SCSS includes in a .css file. I'm not sure why/how this actually worked in development.
Turns out that the error you're getting:
Invalid CSS after "...-------------*/": expected selector or at-rule, was ".ui-widget {">
...is only partly right, definitely the CSS after that closing comment is invalid, I'm not sure why it's reporting it as .ui-widget { and not as @import "bootstrap... but anyway, that's the problem.
The @import ... syntax is SCSS syntax, but you're using it inside a .css file and it's not valid CSS syntax. So basically pick one or the other:
If you use a .css file then use Sprockets *= require directives.
If you use a .scss file then use SCSS @import directives.