search

remy / inliner

Node utility to inline images, CSS and JavaScript for a web page - useful for mobile sites
MIT License
1.1k stars 165 forks source link

Inlining fonts doesn't seem to work correctly. #142

Closed jordwalke closed 7 years ago

jordwalke commented 7 years ago

I had to place the @import url("../fontSupport/montserratCSS.css");at the bottom of my CSS file instead of the top, for this to work. Note, I'm loading an html file off of the local file system (not sure it matters).

This other project works correctly even with the import at the top of the css file - worth looking into what they do differently.

As a result of what ever inliner is doing, all the following CSS rules are not processed.

jordwalke commented 7 years ago
screen shot 2017-04-14 at 5 17 39 pm

on the left side is what inliner does, and the right is what webpage2html does.

jordwalke commented 7 years ago

I'm pretty sure it's just that dangling (incorrect) semicolon.

remy commented 7 years ago

Can you upload a small gist that contains the files to replicate this? I can then make a test case against it to fix the issue.

remy commented 7 years ago

Any chance of the test case?

jordwalke commented 7 years ago

The gist is just that you put this in any css:

@import url("../fontSupport/montserratCSS.css");

And the result is like the screenshot on the left - a dangling semicolon appears.

I believe that the @import should have a semicolon in the input, but not font-face (in the output)

specious commented 7 years ago

I'm getting the trailing semicolon after the CSS import.

index.html

<html>
<head>
  <link rel="stylesheet" href="main.css">
</head>
</html>

main.css

@import url("second.css");

second.css

body {
  background-color: black;
}

The output is:

<html> <head> <style>body{ background-color:black;};</style> </head> </html>
specious commented 7 years ago

Current test results for CSS imports, for example test/fixtures/css-ext-import.result.html, show the same ; after inlining a CSS @import.

specious commented 7 years ago

I think what's happening is the trailing semicolon terminating the @import statement isn't being erased when said statement is replaced with the imported contents.