@imports don't work behind a proxy

[crowne]

I'm using gulp-minify-css to minify a css comprised of bootswatch-spacelab + bootstrap + custom-stuff.
It compiles fine when I have direct internet access, however when I am behind the corporate proxy it fails with the error below.
npm, bower & curl all work OK behind the proxy, so the issue is not with my shell.

[17:06:14] Error: Broken @import declaration of "http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" - timeout
at formatError (c:\Program Files\nodejs\node_modules\gulp\bin\gulp.js:169:10)
at Gulp. (c:\Program Files\nodejs\node_modules\gulp\bin\gulp.js:195:15)
at Gulp.emit (events.js:95:17)
at Gulp.Orchestrator._emitTaskDone (c:\Users\crowne\ws-enide\appdemo\appdemo-ui\node_modules\gulp\node_modules\orchestrator\index.js:264:8)
at c:\Users\crowne\ws-enide\appdemo\appdemo-ui\node_modules\gulp\node_modules\orchestrator\index.js:275:23
at finish (c:\Users\crowne\ws-enide\appdemo\appdemo-ui\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:21:8)
at Stream. (c:\Users\crowne\ws-enide\appdemo\appdemo-ui\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:52:4)
at Stream.f (c:\Users\crowne\ws-enide\appdemo\appdemo-ui\node_modules\gulp\node_modules\orchestrator\node_modules\end-of-stream\node_modules\once\once.js:17:25)
at Stream.emit (events.js:117:20)
at DestroyableTransform.onerror (c:\Users\crowne\ws-enide\appdemo\appdemo-ui\node_modules\lazypipe\node_modules\stream-combiner\index.js:36:18
)

[jakubpawlowicz]

You may need to specify some proxy options, see:
https://github.com/jakubpawlowicz/clean-css/blob/master/test/protocol-imports-test.js#L380
https://nodejs.org/api/http.html#http_http_request_options_callback

the inliner: { request { ... } } hash to clean-css API is the same as node.js' options hash (see 2nd link).

[jakubpawlowicz]

@crowne did you have a chance to give it a try again?

[crowne]

Hi Jakub,

Thanks for the inliner, I've manged to get it working by passing the following options to the gulp-minify-css constructor, which passes it on to clean-css.

var minifyCssOptions = {
        inliner: {
            request: {
                  hostname: "localhost",   // I'm running a cntlm proxy which relays to the corp proxy
                  port: 3128,
                  path: "http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700",
                  headers: {
                    Host: "fonts.googleapis.com"
                  }
            }
        }
};

[jakubpawlowicz]

Thanks @crowne for giving it a try and coming back with a working solution. I've just updated the readme pointing to this use case - https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

As a matter of fact I think clean-css should prefill path and headers.Host automatically as in this case your inlining requests will be tied to a single remote location. Thoughts?

[crowne]

Hi Jakub, I like that idea, luckily I have only one external import. If clean-css could analyze each import URL and set the properties accordingly then that would be useful, especially for those executing behind a proxy.

[jakubpawlowicz]

👍 let's stage it for 3.4

[jakubpawlowicz]

So we infer proxy settings either from inliner.proxy.hostname or HTTP_PROXY environment variable now.

[jakubpawlowicz]

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

[RPGillespie6]

This feature does not seem to be working. It is unable to correctly detect my proxy setup at work from the HTTP_PROXY environment variable. @crowne 's workaround works, but that kind of sucks because then I have to manually specify the path of every single remote import

[jakubpawlowicz]

@RPGillespie6 could you please share your setup as described in https://github.com/jakubpawlowicz/clean-css/blob/master/CONTRIBUTING.md ?

[RPGillespie6]

Sure:

What's your input CSS and expected output?

test.js:

var CleanCSS = require('clean-css');
var source = '@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);';

new CleanCSS().minify(source, function (error, minified) {
  console.log(error, minified) //Always prints broken @import error
});

This is how I run it:

$ export HTTP_PROXY=http://137.85.51.246:8080/
$ node test.js

This does not work, and will generate a 'Broken @import declaration every time.

Do you use clean-css directly or through any of the plugins?

Directly.

What options do you pass to clean-css / the plugin?

I am able to get it to work if I do the following:

var CleanCSS = require('clean-css');

var minifyCssOptions = {
  inliner: {
    request: {
      hostname: "137.85.51.246",   //corp proxy
      port: 8080,
      path: "http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700",
      headers: {
        Host: "fonts.googleapis.com"
      }
    }
  }
};

var source = '@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);';
new CleanCSS(minifyCssOptions).minify(source, function (error, minified) {
  console.log(error, minified) 
});

What version of clean-css do you use?

3.4.17

What operating system do you use?

Xubuntu Linux 32-bit

---

Note that wget and curl are able to fetch the import just fine from the commandline once HTTP_PROXY has been set.

[patrickmichalina]

Not sure how related this is but I had to call the HTTP version of the fonts instead of the HTTPS version, otherwise Jenkins was blowing up on me with the @import error :(

Probably a corporate proxy or port block issue.

[wellhairy]

I think this is related; cleanCss is erroring out on my blessed files on the first import statement "Broken @import declaration"

Error: Uncaught, unspecified "error" event. (Broken @import declaration of "style-legacy.bless.1.css?z=708" Broken @import declaration of "style-legacy.bless.2.css?z=708")
    at DestroyableTransform.emit (events.js:144:17)

[pitaj]

@jakubpawlowicz

This does appear to still be an issue. It appears that the automatic application of proxy settings doesn't work with https URLs.

[jakubpawlowicz]

This is a piece of code (in master) responsible for setting up request - https://github.com/jakubpawlowicz/clean-css/blob/master/lib/reader/load-remote-resource.js#L17-L30 - any ideas how to make it work with HTTPS resources?

[jakubpawlowicz]

Btw, please open a new issue for HTTPS resources.