extract-css-core
v3.0.0
Published
Extract all CSS from a given url, both server side and client side rendered.
Downloads
20,811
Readme
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