Add an option for custom CSS

[Djiit]

It would be great to have an option to allow custom CSS to be applied on the webpage by phantomJS before rendering the screenshot. Do you plan to add this feature in the future ?

Thx

[kevva]

We might as well expose the whole page object itself and let the user do whatever. Thoughts @sindresorhus?

[sindresorhus]

@kevva 👎 Then the user is free to change and break anything and will complain to us when it breaks what we do. I'd rather have defined and controlled ways to do this.

[kevva]

That's the downside of the flexibility that'd give, yeah. I'll add an option for this then.

[SamVerschueren]

How should the API look like for this feature? Would it accept raw css, or a file?

const pageres = new Pageres({delay: 2})
    .src('yeoman.io', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
    .css('custom.css')
    .dest(__dirname)
    .run()
    .then(() => console.log('done'));

const pageres = new Pageres({delay: 2})
    .src('yeoman.io', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
    .css('body { display: none }')
    .dest(__dirname)
    .run()
    .then(() => console.log('done'));

[Djiit]

FWIW, the raw css options would be suficient for my personal intended use.

[SamVerschueren]

Actually, it would be pretty easy to check if the argument provided is a file or not so we can support both. I can imagine that if you really want to add a lot of custom css stuff, you would rather prefer a separate file instead of embedding the css.

[Djiit]

I really appreciate the effort guys. Thanks a lot !