How to make sure remote @imports are processed correctly with Grunt

Question

I use Grunt to build my project and cssmin task inside. My CSS file contains a remote @import statements and grunt build return a warning:

Running "cssmin:generated" (cssmin) task
>> Ignoring remote @import of "http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" as no callback given.,Ignoring remote @import of "http://fonts.googleapis.com/css?family=Maven+Pro:500" as no callback given.
>> 2 files created. 322.48 kB → 249.05 kB

I've found the following information in the clean-css library documentation:

In order to inline remote @import statements you need to provide a callback to minify method, e.g.:

var CleanCSS = require('clean-css');
var source = '@import url(http://path/to/remote/styles);';
new CleanCSS().minify(source, function (errors, minified) {
  // minified.styles
});

This is due to a fact, that, while local files can be read synchronously, remote resources can only be processed asynchronously. If you don't provide a callback, then remote @imports will be left intact.

How can I describe a cssmin task in my Gruntfile.js to correct handling remote @import statements?

Dwarf

Answer 1

Moving the @import statements to the top of the CSS file fixes it for me, I had the same problem. It seems like cssmin doesn't like it when @import statements are in the middle of the file. You can do this automatically with an options object in Grunt, see this answer for more details: https://mcmap.net/q/751073/-cssmin-not-correctly-handling-import

Crapshooter

This in fact solves the issue because cssmin doesn´t relocate @imports but this also doesn´t import remote css to avoid use of @import. The callback function mentioned by clean-css library would inline the css files remotely referenced by @import. – Smashing

Answer 2

It is not the best solution, but it worked for me when I moved all the @import statements to another file and inserted it in my html file just before my main css file.

Marjoriemarjory

This is effectively the same as this answer, except for the introduction of a separate file. – Breaux

So far the unique answer I saw that might inline remote css is this How to Answer[#21174022. But I did not test it yet. – Smashing