Skip to content

add option to include css origins #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 22, 2020
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
14 changes: 11 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,22 @@ is the power behind finding most of the CSS. Additionally, the
### extractCss(url, [options])

Extract CSS from a page. Returns a Promise that contains the CSS as a single
String.
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`
Expand All @@ -70,6 +78,6 @@ Can be any value as provided by the

## 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
- [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) - The original get-css from CSSStats
16 changes: 12 additions & 4 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,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'} = {}) => {
module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = {}) => {
// Setup a browser instance
const browser = await puppeteer.launch()

Expand Down Expand Up @@ -103,8 +103,16 @@ module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => {
const css = links
.concat(styleSheetsApiCss)
.concat(inlineCss)
.map(({css}) => css)
.join('\n')

return Promise.resolve(css)
// Return the complete structure ...
if (origins === 'include') {
return Promise.resolve(css)
}

// ... or return all CSS as a single String
return Promise.resolve(
css
.map(({css}) => css)
.join('\n')
)
}
20 changes: 20 additions & 0 deletions test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,26 @@ test('it finds inline styles - JS', async t => {
t.snapshot(actual)
})

test('it yields an array of entries when the `origins` option equals `include`', async t => {
const actual = await extractCss(server.url + '/kitchen-sink.html', {
origins: 'include'
})

t.true(Array.isArray(actual), 'Result should be an array when { origins: `include` }')
t.is(actual.length, 10)

function isString(item) {
return typeof item === 'string'
}

t.true(actual.every(item => isString(item.type) && ['link-or-import', 'style', 'inline'].includes(item.type)))
t.true(actual.every(item => isString(item.href)))
t.true(actual.every(item => item.href.startsWith('http://localhost:') && /\.(html|css)$/.test(item.href)))
t.true(actual.every(item => isString(item.css)))

// Cannot snapshot due to changing port numbers in `create-test-server`
})

test('it returns a direct link to a CSS file', async t => {
const actual = await extractCss(server.url + '/import-in-css.css')

Expand Down
Binary file modified test/snapshots/index.js.snap
Binary file not shown.