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.
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.
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.
npm install extract-css-core
# Or with Yarn
yarn add extract-css-core
const extractCss = require('extract-css-core')
extractCss('http://www.projectwallace.com').then(css => console.log(css))
Extract CSS from a page. Returns a Promise that contains the CSS as a single String.
Type: Object
Default: null
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.
Type: String
Default: networkidle2
Can be any value as provided by the Puppeteer docs.
Type: Object
Default: null
An object consisting of the following fields:
-
executablePath
: the path to a Chromium binary -
puppeteer
: a Puppeteer instance -
args
: arguments to start Chromium with
See the test
directory for implementation examples. This option exists
primarily for use with extract-css.now.sh
- extract-css lambda - Extract CSS running as a serverless function
- get-css - The original get-css