inliner seems to remove font @import

rtowings commented 8 years ago

I'm new at this, so I apologize in advance for my ignorance.

I'm attempting to import a google font by including the following in my app.scss: @import url(http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600); @import 'settings'; @import 'foundation-emails'; @import 'local'

I'm using foundation emails 2.2.1 with the following dependencies: "babel-core": "^6.3.26", "babel-preset-es2015": "^6.3.13", "babel-register": "^6.7.2", "beepbeep": "^1.2.0", "browser-sync": "^2.11.0", "colors": "^1.1.2", "gulp": "git+https://github.com/gulpjs/gulp.git#4.0", "gulp-awspublish": "^3.0.1", "gulp-cli": "^1.1.0", "gulp-html-src": "^1.0.0", "gulp-htmlmin": "^1.1.1", "gulp-if": "^2.0.0", "gulp-imagemin": "^2.4.0", "gulp-inline-css": "^3.0.0", "gulp-litmus": "0.0.7", "gulp-load-plugins": "^1.1.0", "gulp-rename": "^1.2.2", "gulp-replace": "^0.5.4", "gulp-sass": "^2.1.0", "gulp-sourcemaps": "^1.6.0", "gulp-zip": "^3.2.0", "inky": "^1.3.6", "lazypipe": "^1.0.1", "merge-stream": "^1.0.0", "panini": "^1.3.0", "rimraf": "^2.3.3", "siphon-media-query": "^1.0.0", "yargs": "^4.1.0"

I can see the import in the app.css: @import url(http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600);

But when the final index.html is created, the font import is missing.

Is it being removed by the inliner?

jonkemp commented 8 years ago

Possibly. I would suggest providing a reduced test case with gulp.

https://css-tricks.com/reduced-test-cases/

rtowings commented 8 years ago

So I simplified my test to the following:

app.css:

@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,500,700,600);
body {  color: #427c99;   font-family: Raleway, Arial, Helvetica, sans-serif;   font-weight: normal;   text-align: left;  line-height: 1.3; }

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My Test</title>
  </head>
  <body>
    <!-- <style> -->
    <div class="body">
WWWLorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.
      </div>
  </body>
</html>

Output from inliner:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><title>My Test</title></head><body style="color:#427c99;font-family:Raleway,Arial,Helvetica,sans-serif;font-weight:400;line-height:1.3;text-align:left"><style></style><div class="body">WWWLorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</div></body></html>

The css is inlined, as expected, but the reference to the font location has disappeared.

victorlap commented 6 years ago

I am facing the same problem. Very frustrating.

HagarFbx commented 4 years ago

I'm having the same problem

wokalek-work commented 3 years ago

Yes.

NickVanHolsbeeck commented 3 years ago

Its something I have also faced (also with Foundation). 'Solution' I used was making use of a <link rel="stylesheet" href="..."> (Google Fonts) in one my template-layout-files instead of using @import in my app.scss, as your 'builded' code is inserted into these tempate-layout-files.

jonkemp / gulp-inline-css

inliner seems to remove font @import #38