extract-css-core

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

# Or with Yarn
yarn add extract-css-core

Usage

const extractCss = require('extract-css-core')

extractCss('http://www.projectwallace.com').then(css => console.log(css))

API

extractCss(url, [options])

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.

Related

• extract-css lambda - Extract CSS running as a serverless function
• get-css - The original get-css