Libsass: @import url(http://...) Failing For Font URLs

Created on 14 Feb 2014 · 6Comments · Source: sass/libsass

In my Scss file I have this line:
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600);

Actual Results:

When the file is compiled with libsass, the @import line is completely obliterated and does not appear in the output file.

Expected Results:

The @import line should be copied, verbatim, to the final CSS file because it does not target a local file. It needs to appear in the CSS file so that my font is loaded correctly.

Ruby Sass behaves correctly. It moves the @import statement, verbatim, to the compiled CSS file.

Technical Note:

In fixing this, it is not sufficient to test for the presence of http://. Many times, folks will use a protocol-less URL so that the import will work on both HTTP and HTTPS pages. An example of this would be:

@import url(//path/to/some/file.css);

The double slashes leading the statement need to be treated as a URL to a remote resource on the internet and, therefore, this @import statement needs to be placed, verbatim, in the compiled CSS file.

Dev - Test Written

Source

bdkjones

Most helpful comment

A simplified test case:

.test {
    content: '';
}
@import url('test.css');

Ruby Sass correctly restructures the CSS such that the @import(s) are at the top:

@import url("test.css");
.test {
  content: ''; }

Libsass incorrectly produces:

.test {
  content: ''; }

@import url('test.css');

As noted above the CSS spec says: "any @import rules must precede all other rules (except the @charset rule, if present)."

Depending on how the Sass is structured, this bug can and will produce code where @import rules are not inserted into the CSS output correctly and are subsequently ignored.

A somewhat related minor bug/difference in Libsass and Ruby Sass is the output of the following test:

@import "//example.com/test.css";

Ruby Sass:

@import "//example.com/test.css";

Libsass:

@import url("//example.com/test.css");

I don't foresee any issues arising from this bug in particular, however it is an interesting difference to note.

joeyhoer on 5 Mar 2014

👍2

All 6 comments

Good catch. You can also @import a .css file, but it looks like it’s explicitly checking for a .css extension. The following can serve as a workaround:

@import "http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600.css";

But really, this should work too:

@import "http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600";

kennethormandy on 14 Feb 2014

👍2

Libsass should not be "validating" imports that target a remote file (one on the internet). If the URI inside the import statement is remote (which can be ascertained by seeing if it contains a // sequence), then libsass ought to just toss that entire @import statement into the CSS.

bdkjones on 14 Feb 2014

👍1

I tried your example on the master branch and the import appears in the output (although LibSass doesn't move it to the top of the file the way that Ruby Sass does) ... have you pulled in the past couple of weeks?

akhleung on 15 Feb 2014

The import has to be at the top of the file. That's clearly in the CSS spec: @import must be at the top.

Sent from my iPhone

On Feb 14, 2014, at 3:02 PM, Aaron Leung [email protected] wrote:

I tried your example on the master branch and the import appears in the output (although LibSass doesn't move it to the top of the file the way that Ruby Sass does) ... have you pulled in the past couple of weeks?

—
Reply to this email directly or view it on GitHub.

bdkjones on 16 Feb 2014