It tries to precompile Javascript into CSS

cmer commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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

cmer commented 11 years ago

Ref #8

jbodily commented 11 years ago

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 commented 11 years ago

@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?

zweilove / css_splitter

It tries to precompile Javascript into CSS #7