Skip to content

Latest commit

 

History

History
36 lines (27 loc) · 1.35 KB

README.md

File metadata and controls

36 lines (27 loc) · 1.35 KB
Raw

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.