Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ npm install extract-css-core
yarn add extract-css-core
```

## Problem, solution and shortcomings
## Motivation, solution and shortcomings

### Problem
### Motivation

Existing packages like
[get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css)
Expand Down Expand Up @@ -95,6 +95,14 @@ Default: `exclude`

Possible values: `exclude`, `include`

#### inlineStyles

Type: `String`

Default: `include`

Possible values: `exclude`, `include`

#### waitUntil

Type: `String`
Expand Down
25 changes: 14 additions & 11 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ InvalidUrlError.prototype = Error.prototype
* @param {string} waitUntil https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagegotourl-options
* @returns {string} All CSS that was found
*/
module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = {}) => {
module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude', inlineStyles = 'include'} = {}) => {
// Setup a browser instance
const browser = await puppeteer.launch()

Expand Down Expand Up @@ -82,15 +82,18 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} =
// CSSRule:
// [x-extract-css-inline-style] { color: red; }
//
const inlineCssRules = await page.evaluate(() => {
return [...document.querySelectorAll('[style]')]
.map(element => element.getAttribute('style'))
// Filter out empty style="" attributes
.filter(Boolean)
})
const inlineCss = inlineCssRules
.map(rule => `[x-extract-css-inline-style] { ${rule} }`)
.map(css => ({type: 'inline', href: url, css}))
let inlineCss = []
if (inlineStyles !== 'exclude') {
const inlineCssRules = await page.evaluate(() => {
return [...document.querySelectorAll('[style]')]
.map(element => element.getAttribute('style'))
// Filter out empty style="" attributes
.filter(Boolean)
})
inlineCss = inlineCssRules
.map(rule => `[x-extract-css-inline-style] { ${rule} }`)
.map(css => ({type: 'inline', href: url, css}))
}

const links = coverage
// Filter out the <style> tags that were found in the coverage
Expand All @@ -108,7 +111,7 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} =

const css = links
.concat(styleSheetsApiCss)
.concat(inlineCss)
.concat(inlineStyles === 'exclude' ? [] : inlineCss)

// Return the complete structure ...
if (origins === 'include') {
Expand Down
10 changes: 10 additions & 0 deletions test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,16 @@ test('it finds inline styles - HTML', async t => {
t.snapshot(actual)
})

test('it ignores inline styles when `inlineStyles !== "include"`', async t => {
const actual = await extractCss(server.url + '/inline-style-html.html', {
inlineStyles: 'exclude'
})

t.false(actual.includes('[x-extract-css-inline-style] { color: red; font-size: 12px; }'))
t.false(actual.includes('[x-extract-css-inline-style] { color: blue }'))
t.is(actual, '')
})

test('it finds inline styles - JS', async t => {
const actual = await extractCss(server.url + '/inline-style-js.html')

Expand Down