Extract all CSS from a given url, both server side and client side rendered.

Problem, solution and shortcomings
Problem
Existing packages like
get-css
look at a server-generated piece of HTML and get all the <link>
and <style>
tags from it. This works fine for 100% server rendered pages, but apps that
employ style injection with JavaScript will not be covered.
Solution
This module uses an instance of Chromium to render a page. This has the benefit
that most of the styles can be rendered, even when generated by JavaScript. The
Puppeteer CSSCoverage API
is the power behind finding most of the CSS.
Shortcomings
Currently, there is no solution to get the CSS from modules that use
Styled Components or something similar. Any
help resolving this issue will be very much appreciated. Please contribute to
the relevant
GitHub issue.
Installation
npm install extract-css-core
yarn add extract-css-core
Usage
const extractCss = require('extract-css-core')
extractCss('http://www.projectwallace.com').then(css => console.log(css))
API
Extract CSS from a page. Returns a Promise that contains the CSS as a single
String.
Options
Type: Object
debug
Type: Boolean
Default: false
Set to true
if you want a Chromium window to open as it works to get all the
CSS from the page.
waitUntil
Type: String
Default: networkidle2
Can be any value as provided by the
Puppeteer docs.
customBrowser
Type: Object
Default: null
This is useful if you want to run extract-css on AWS Lambda for example.
executablePath
Type: String
Default: null
Pass in the executable path for a custom Chromium instance.
customPuppeteer
Type: Object
Default: null
You probably want to provide
puppeteer-core for a custom
browser instead of puppeteer which
brings it's own Chromium instance.
Related