Coffeekraken criticalcss

Simply and quickly generate the critical css depending on a list of pages to take as source.

Table of content

1. Install
2. Get Started
3. CLI Options
4. pages.json
5. Contribute
6. Who are Coffeekraken?
7. Licence

Install

npm install coffeekraken-criticalcss --save-dev

Get Started

Use the CLI as follow:

coffeekraken-criticalcss -o dist/css/critical.css -c dist/css/style.css

CLI Options

Here's all the CLI options available:

-o|--output

Output critical css file

• default : dist/css/critical.css

-c|--css

Css file to use to generate critical one

• default : dist/css/style.css

-p|--pages

List of pages urls to process (space separated). By default, it would try to find a pages.json file in your project root folder, then it would try to find a pages property in your package.json. See bellow for more info on that.

• default : null

-h|--host

Hostname on which to make pages requests

• default : http://localhost:8080

-w|--width

Width of the viewport to calculate the critical css

• default : 1200

-h|--height

Height of the viewport to calculate the critical css

• default : 900

pages.json

You can create a pages.json file at your project root folder that will be used to generate the critical css from the pages url defined here. Here's a sample pages.json file:

{
  "home": {
    "title": "Homepage",
    "url": "/"
  },
  "contact": {
    "title": "Contact",
    "url": "/contact"
  }
}

You can if you prefere have the same structure in your package.json file under a pages property.

Contribute

This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

1. Share the love ❤️
2. Declare issues
3. Fix issues
4. Add features
5. Build web component

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

More on who we are

License

The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...