Skip to content

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

License

Notifications You must be signed in to change notification settings

iFixit/css-gather

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published