Invalid CSS at the beginning of the split2 file

[cmer]

The output for split2 starts with

@charset "UTF-8";
}

[cmer]

It also can't compile assets with rake assets:precompile:

Invalid CSS after "}": expected selector or at-rule, was "}#site-header ...."

[cmer]

I found the cause of the problem.

My application.css.scss file starts with:

@import "bootstrap";

This results in the beginning of the compiled output to be:

@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.
 */

css_splitter can't properly parse comments right after a @charset declaration it seems.

I worked around the issue by starting my application.css.scss file with:

#css_splitter_workaround { color: #000; } // Leave this here. Prevents css_splitter parser crash.
@import "bootstrap";

Note that the workaround selector style CAN'T be empty, that's why I put color: #000 in there.

[jhilden]

Hey, unfortunately I wasn't really able to reproduce your issue.

I added charset and a comment right after it into the stylesheet of the gem's test app (https://github.com/zweilove/css_splitter/blob/master/test/dummy/app/assets/stylesheets/too_big_stylesheet.css.scss) and it's compiling just fine, when I run rake assets:precompile inside test/dummy.

With compression enabled (config.assets.compress = true) the comments are stripped even before the CSS reaches the css_splitter gem. And without compression they are stripped inside the gem.

Could push a simple app the reproduces your problem on github somewhere? Then I will gladly take a look at what could be wrong. Thanks.

[cmer]

Leave this issue open. I'll try to send you a project that reproduces it in a couple of weeks when I have a bit more time.

[ScotterC]

I had a similar issue but it was due to having .scss in my application_split2 filename. Correcting the extension fixed the issue.

I spoke too soon. It's still not working for me. Does anyone else have it die when trying to deal with SCSS?

[ScotterC]

Finally figured out my issue and posting it here. When getting confused about scss vs sass, I accidentally left a semicolon in at the end of the include: //= include application.css; This will fail the compilation with errors far down stream of css_splitter and either manifest as 'can't find the file' or 'invalid css'

[jhilden]

Closing this issue. Let me know if there are any open questions