Extract-css-core NPM

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.