css-gather

Helpful tools for working with critical CSS

css-gather

Fetches all the CSS files off a page and dumps their CSS to stdout.

critical-css.js

Uses penthouse to extract the critical CSS from CSS passed on `stdin`.

run.sh

Uses `css-gather` and `critical-css.js` to generate the critical CSS for a URL.

Usage

cd to a clone of this repo

Build docker image:

docker compose build

Generate critical css by running the run.sh command in a css-gather container and passing it a URL to analyze:

docker run css-gather ./run.rb https://www.ifixit.com

Generate critical css and save screenshots in critical-css-screenshots folder:

mkdir critical-css-screenshots
docker run --mount type=bind,source="$(pwd)/critical-css-screenshots",target=/app/critical-css-screenshots css-gather ./run.rb https://www.ifixit.com

Generate critical css and exclude certain css selectors from the critical css:

docker run css-gather ./run.rb https://www.ifixit.com/ --exclude=.skip-to-content --exclude=/#contentFloat/

This will remove .skip-to-content and any css selector that matches the /#contentFloat/ regex.