Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

It tries to precompile Javascript into CSS #7

Closed
cmer opened this issue Feb 24, 2013 · 9 comments
Closed

It tries to precompile Javascript into CSS #7

cmer opened this issue Feb 24, 2013 · 9 comments

Comments

@cmer
Copy link

cmer commented Feb 24, 2013

I've been experiencing a weird issue with this Gem. Somehow, it tries to load my application.js file in my split2 file, instead of application.css. I kept getting this error in my "largeish" app:

couldn't find file 'first'
  (in .../stylesheets/application_split2.css.split2:13)

So I decided to try to reproduce it in a smaller project. It also has the same issue:

Sprockets::FileNotFound in Hello#index

Showing /private/tmp/css-split/app/views/layouts/application.html.erb where line #5 raised:

couldn't find file 'jquery'
  (in /private/tmp/css-split/app/assets/stylesheets/application_split2.css.split2:13)

Demo project here: https://dl.dropbox.com/u/132165/css-split.zip. Just go to http://0.0.0.0:3000/ to see the error.

Is there anything I'm doing wrong?
@jhilden
Copy link
Contributor

jhilden commented Feb 24, 2013

Hey @cmer, I checked out your code and changing the //= include 'application' to //= include 'application.css' seemed to fix it for me.

I'm not sure about the underlying causes, but it seems to me that Sprockets's include directive doesn't differentiate between javascripts and stylesheets and simply tries to include the first asset with the given name that it can find.

It would be nice if you could let us know whether that worked for you.

@cmer
Copy link
Author

cmer commented Feb 24, 2013

This is the first thing I tried in my production app and I got another error. In the demo app, it also gives me an error:

Started GET "/" for 127.0.0.1 at 2013-02-24 18:32:00 -0500
Processing by HelloController#index as HTML
  Rendered hello/index.html.erb within layouts/application (0.0ms)
Completed 500 Internal Server Error in 4ms

ActionView::Template::Error (undefined method `bytesize' for nil:NilClass):
    2: <html>
    3: <head>
    4:   <title>CssSplit</title>
    5:   <%= stylesheet_link_tag    "application", :media => "all" %>
    6:   <%= stylesheet_link_tag    "application_split2", :media => "all" %>
    7:   <%= javascript_include_tag "application" %>
    8:   <%= csrf_meta_tags %>
  app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb___132607134187991821_70209125698800'

Also, in my production app, my application.css file is actually named application.css.scss and instead of having require statements, I have a bunch of @import. Not sure if that will make a difference?

I'm more than happy to help you figure this out quickly since we're stuck with broken code in prod, but we can't deploy the fix because of the IE CSS limit :/

@jhilden
Copy link
Contributor

jhilden commented Feb 24, 2013

I think I found 2 more problems in your demo app:

The = require_tree . in application.css creates a Sprockets::CircularDependencyError because it is pulling in application_split2 which in turn tries to pull in application.css again.

The bytesize error seems to come from including an empty file. Simply put some dummy CSS in your application.css to avoid it.

Does that help?

@cmer
Copy link
Author

cmer commented Feb 24, 2013

Dude, I don't know what you did, but I got it to work! I tried everything you said before (been trying for over a week actually) but it finally works! I can't thank you enough. Seriously.

I did find another bug. I am @importing Bootstrap in application.css.scss and at the top of the split2 output, there's this (first 2 lines):

@charset "US-ASCII";
}

This is obviously invalid CSS. Probably something to do with the media queries?

Thanks again!

@cmer
Copy link
Author

cmer commented Feb 25, 2013

FYI the output of application.css starts with:

@charset "US-ASCII";
/*
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
/* line 19, ../../../../../../.rbenv/versions/1.9.3-p194-perf/lib/ruby/gems/1.9.1/gems/bootstrap-sass-2.2.2.0/vendor/assets/stylesheets/bootstrap/_reset.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

@cmer
Copy link
Author

cmer commented Feb 25, 2013

A bit more debugging on the charset issue. It's not Bootstrap inserting it. I think it's Sass.

@cmer
Copy link
Author

cmer commented Feb 25, 2013

Ref #8

@cmer cmer closed this as completed Feb 25, 2013
@jbodily
Copy link

jbodily commented Mar 10, 2013

Was there an answer to the problem of the 'application.css' circular reference issue? I need to dice that file but I can't get around the following error:

ActionView::Template::Error (/app/app/assets/stylesheets/application.css.scss has already been required):

I can see why it's happening, I just don't know how one would go about fixing it.

@jhilden
Copy link
Contributor

jhilden commented Mar 10, 2013

@jbodily I can't say for sure without seeing your exact code, but just as described above you should be able to avoid the circular reference by avoiding a general = require_tree . that will also pull in the .split2.

For stylesheets I would generally definitely recommend using Sass's @import in favor of Sprocket's = require as described here: https://github.com/rails/sass-rails#important-note

Does that help you?

@jhilden jhilden mentioned this issue Mar 10, 2013
Closed
@malcolm-pro malcolm-pro mentioned this issue Apr 22, 2016
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cmer @jhilden @jbodily