https://github.com/projectwallace/extract-css-core
Extract all CSS from a given url, both server side and client side rendered.
https://github.com/projectwallace/extract-css-core
css extract extract-css inline-styling js-styling scrape wallace
Last synced: about 1 month ago
JSON representation
Extract all CSS from a given url, both server side and client side rendered.
- Host: GitHub
- URL: https://github.com/projectwallace/extract-css-core
- Owner: projectwallace
- License: mit
- Created: 2019-03-23T22:00:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T21:24:05.000Z (about 2 years ago)
- Last Synced: 2024-04-14T08:32:02.015Z (10 months ago)
- Topics: css, extract, extract-css, inline-styling, js-styling, scrape, wallace
- Language: JavaScript
- Homepage: https://www.projectwallace.com/get-css
- Size: 498 KB
- Stars: 36
- Watchers: 3
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
extract-css-core
Extract all CSS from a given url, both server side and client side rendered.
[](https://www.npmjs.com/package/extract-css-core)
## Usage
```js
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:
```js
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
```sh
npm install extract-css-core
# or
yarn add extract-css-core
```
## Motivation, solution and shortcomings
### Motivation
Existing packages like
[get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css)
look at a server-generated piece of HTML and get all the `` and ``
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](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options).
## Related
- [projectwallace.com/get-css](https://www.projectwallace.com/get-css) - Online version of this package
- [Wallace CLI](https://github.com/bartveneman/wallace-cli) - Pretty CSS analytics in your terminal
- [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) - The original get-css from CSSStats