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-or-import',
		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',
		type: 'inline',
		css: '[x-extract-css-inline-style] { position: absolute; }'
	}
]

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

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 👎.

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

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.

Type: Object

Default: {}

Type: String

Default: exclude

Possible values: exclude, include

Type: String

Default: networkidle0

Can be any value as provided by the Puppeteer docs.

• 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