Google fonts are imported, break HTTPs when protocol relative

[LoicMahieu]

Google fonts @import are resolved. Anyway it works when imported. The problem is, you can not keep URLs as protocol relative.

Consider:

echo "@import url(//fonts.googleapis.com/css?family=Lato:400,700,400italic);" | cleancss

which output:

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype')
}
@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype')
}
@font-face {
    font-family: Lato;
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'), url(http://fonts.gstatic.com/s/lato/v11/LqowQDslGv4DmUBAfWa2Vw.ttf) format('truetype')
}

You notice that src url is in HTTP. It obviously break application when hosted in production, under HTTPs.

My question:

• Is there a way to blacklist some URL in order to not import them ?
  It will keep my url with protocol relative.

Thanks for response and thanks to contributors for this so useful module!

[jakubpawlowicz]

That's a good point indeed. The only way to stop it (so far) is to use --skip-import switch.

[LoicMahieu]

My workaround for now is to set HTTPs for loading font. So on font-face contains https link and it does not break production code.
Obviously I don't think that a good idea to resolve Google font import. Location of the files may changes.

Possible solution:

• Add option for skipping remote import. It will disable fetching of remote @import and keep it intact. ?
• Add option for defining exclusion mask ?

By searching in the repository I found https:/petetak/clean-css/blob/698efdc1a387706ebfb36178677e539280e8abc4/test/unit-test.js#L770 . I don't find theses tests in the current code base. I am new to this project.

Thanks

[jakubpawlowicz]

I'll think of the best approach here, it could be even a combination of those.

Re that unit test, it's from an old version of clean-css when there was no remote importing at all, so all such URLs were kept intact.

Stay tuned for updates!

[jakubpawlowicz]

I found out the reason you see URLs changed from //fonts.gstatic... into http://fonts.gstatic... is due to Google rewriting them on the fly, e.g. curl "http://fonts.googleapis.com/css?family=Lato:400,700,400italic"

I added two features you suggested on a branch https:/jakubpawlowicz/clean-css/tree/632-remote-import which will likely make to master. The syntax is as follows:

API: new CleanCSS({ processRemoteImport: ['!fonts.googleapis.com'] })
CLI: cleancss --skip-remote-import fonts.googleapis.com

To skip all remote imports:

API: new CleanCSS({ processRemoteImport: false })
CLI: cleancss --skip-remote-import all

Does it makes sense?
Any feedback is more than welcome!

[LoicMahieu]

Thanks for your work!

processRemoteImport will fix the issue! But I was thinking that it can be expand to all @import processing. It makes sense to skip import, regardless it is remote or not.
We can reuse the option processImport and use it as an array like processRemoteImport. An array is truely and so it will maybe not involve lot of modification.
Anyway processRemoteImport: false make sense too for allowing user to globally disable remote import.

API:

  new CleanCSS({
    processImport: [
      '!fonts.googleapis.com',
      '!./some/local/file.css'
    ]
  })

[jakubpawlowicz]

I think you have a fair point. How about adding some special keywords, like !local or !remote?

[jakubpawlowicz]

@LoicMahieu what's more, we'd need to go with an extra option, e.g. --skip-import-from / processImportFrom: ... as we can't overload CLI's --skip-import without a major version bump, something I am reluctant to do. This is a commander.js limitation which does not allow list arguments to be optional.

I would keep processImport as is and add an extra one now, and unify these two in the next major version.

[jakubpawlowicz]

I have just merged this change to master. The API is as you suggested with the exception of processImportFrom vs processImport option.

[jakubpawlowicz]

It's just been released with clean-css 3.4. 🎆

Thanks @LoicMahieu for all valuable input!

[LoicMahieu]

Awesome ! Thanks @jakubpawlowicz