extract-css-core

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

Usage

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

const css = await extractCss('https://www.projectwallace.com')
//=> html{font-size:100%} etc.

Or, if you want more details:

const entries = await extractCss('https://www.projectwallace.com', {
	origins: 'include'
})

// entries will look something like this
[
	{
		href: 'https://www.projectwallace.com',
		type: 'link',
		css: '@font-face{font-display:swap;font-family:Teko;...'
	},
	{
		href: 'https://www.projectwallace.com/client/Seo.0f4fe72f.css',
		type: 'style',
		css: '.hero__text.svelte-qhblau a{color:var(--teal-400)}...'
	},
	{
		href: 'https://www.projectwallace.com/client/some-css-file.css',
		type: 'import',
		css: '.some-css {}'
	},
	{
		href: 'https://www.projectwallace.com',
		type: 'inline',
		css: '[x-extract-css-inline-style] { position: absolute; }'
	}
]

Installation

npm install extract-css-core
# or
yarn add extract-css-core

Motivation, solution and shortcomings

Motivation

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 not for pages with CSS-in-JS styling and inline styles 👎.

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 document.styleSheets API is used to get all styles, including CSS-in-JS. Lastly, a plain old document.querySelectorAll('[style]') finds all inline styling.

API

extractCss(url, [options])

Extract CSS from a page. Returns a Promise that contains the CSS as a single String, or an Array of all entries found when the option origins: 'include' is passed.

Options

Type: Object

Default: {}

origins

Type: String

Default: exclude

Possible values: exclude, include

inlineStyles

Type: String

Default: include

Possible values: exclude, include

waitUntil

Type: String

Default: networkidle0

Can be any value as provided by the Puppeteer docs.

Related

• projectwallace.com/get-css - Online version of this package
• Wallace CLI - Pretty CSS analytics in your terminal
• get-css - The original get-css from CSSStats