Nondeterministic Palindrome Machine

    extract-css-core

    2.3.1 • Public • Published

    extract-css-core

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

    NPM Version Weekly downloads Node.js CI Known Vulnerabilities Dependencies Status Dependencies Status XO code style Project: Wallace

    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-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; }'
    	}
    ]

    Installation

    npm install extract-css-core
    # or
    yarn add 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 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 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.

    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

    waitUntil

    Type: String

    Default: networkidle0

    Can be any value as provided by the Puppeteer docs.

    Related

    Install

    npm i extract-css-core

    DownloadsWeekly Downloads

    6

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    9.56 kB

    Total Files

    4

    Last publish

    Collaborators

    • bartveneman