Skip to content

Commit

Permalink
update readme to reflect changes to api
Browse files Browse the repository at this point in the history
  • Loading branch information
Bart Veneman committed May 3, 2022
1 parent dc71693 commit afbd562
Showing 1 changed file with 7 additions and 11 deletions.
18 changes: 7 additions & 11 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,7 @@
</div>

[![NPM Version](https://img.shields.io/npm/v/extract-css-core.svg)](https://www.npmjs.com/package/extract-css-core)
[![Weekly downloads](https://img.shields.io/npm/dw/extract-css-core.svg)](https://www.npmjs.com/package/extract-css-core)
![Node.js CI](https://github.com/bartveneman/extract-css-core/workflows/Node.js%20CI/badge.svg)
[![Known Vulnerabilities](https://snyk.io/test/github/bartveneman/extract-css-core/badge.svg)](https://snyk.io/test/github/bartveneman/extract-css-core)
![Dependencies Status](https://img.shields.io/david/bartveneman/extract-css-core.svg)
![Dependencies Status](https://img.shields.io/david/dev/bartveneman/extract-css-core.svg)
[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
[![Project: Wallace](https://img.shields.io/badge/Project-Wallace-29c87d.svg)](https://www.projectwallace.com/oss)

## Usage

```js
Expand All @@ -32,14 +25,19 @@ const entries = await extractCss('https://www.projectwallace.com', {
[
{
href: 'https://www.projectwallace.com',
type: 'link-or-import',
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',
Expand Down Expand Up @@ -70,9 +68,7 @@ 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](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#coveragestartcsscoverageoptions)
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.
`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

Expand Down

0 comments on commit afbd562

Please sign in to comment.