Skip to content

Commit

Permalink
added inject option and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Mike Mellor authored and mikemellor11 committed Feb 20, 2018
1 parent 49a3512 commit 54e4677
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 3 deletions.
26 changes: 25 additions & 1 deletion README.md
Expand Up @@ -54,7 +54,8 @@ var files = ['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
report : false,
banner : false,
uncssrc : '.uncssrc',
userAgent : 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)'
userAgent : 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
inject : function(window){ window.document.querySelector('html').classList.add('no-csscalc', 'csscalc'); }
};

uncss(files, options, function (error, output) {
Expand Down Expand Up @@ -103,6 +104,7 @@ Options:
-u, --uncssrc <file> Load these options from <file>
-n, --noBanner Disable banner
-a, --userAgent <string> Use a custom user agent string
-I, --inject <file> Path to javascript file to be executed before uncss runs
```

**Note that you can pass both local file paths (which are processed by [glob](https://github.com/isaacs/node-glob)) and URLs to the program.**
Expand Down Expand Up @@ -159,6 +161,28 @@ Options:
```
- **userAgent** (String): The user agent string that jsdom should send when requesting pages. May be useful when loading markup from services which use user agent based device detection to serve custom markup to mobile devices. Defaults to `uncss`.

- **inject** (String / Function): Path to a local javascript file which is executed before uncss runs. A function can also be passed directly in.

Example inject.js file

```js
'use strict';

module.exports = function(window) {
window.document.querySelector('html').classList.add('no-csscalc', 'csscalc');
};
```

Example of passing inject as a function

```js
{
inject: function(window){
window.document.querySelector('html').classList.add('no-csscalc', 'csscalc');
}
}
```

### As a PostCSS Plugin

UnCSS can be used as a [PostCSS](https://github.com/postcss/postcss) Plugin.
Expand Down
4 changes: 3 additions & 1 deletion bin/uncss
Expand Up @@ -30,6 +30,7 @@
.option('-u, --uncssrc <file>', 'Load these options from <file>')
.option('-n, --noBanner', 'Disable banner')
.option('-a, --userAgent <string>', 'Use a custom useragent string')
.option('-I, --inject <file>', 'Path to javascript file to be executed before uncss runs')
.parse(process.argv);

options = {
Expand All @@ -43,7 +44,8 @@
htmlroot: program.htmlroot,
uncssrc: program.uncssrc,
banner: !program.noBanner,
userAgent: program.userAgent
userAgent: program.userAgent,
inject: program.inject
};

if (program.args.length) {
Expand Down
10 changes: 10 additions & 0 deletions src/jsdom.js
Expand Up @@ -35,6 +35,16 @@ function fromSource(src, options) {
};
}

if (options.inject) {
config.onload = function(window) {
if (typeof options.inject === 'function') {
options.inject(window);
} else {
require(path.join(__dirname, options.inject))(window);
}
};
}

return new Promise((resolve, reject) => {
jsdom.env(src, config, (err, res) => {
if (err) {
Expand Down
3 changes: 2 additions & 1 deletion src/uncss.js
Expand Up @@ -203,7 +203,8 @@ function init(files, options, callback) {
banner: true,
// gulp-uncss parameters:
raw: null,
userAgent: 'uncss'
userAgent: 'uncss',
inject: null
});

process(options).then(([css, report]) => callback(null, css, report), callback);
Expand Down
30 changes: 30 additions & 0 deletions tests/jsdom.js
Expand Up @@ -103,4 +103,34 @@ describe('jsdom', () => {
done();
});
});

it('Should execute passed in javascript function before uncss runs', (done) => {
const options = {
htmlroot: path.join(__dirname, './jsdom'),
inject: (window) => {
window.document.querySelector('html').classList.add('no-test', 'test');
}
};
uncss(['tests/jsdom/inject.html'], options, (err, output) => {
expect(err).to.equal(null);
expect(output).to.include('.no-test .inject');
expect(output).to.include('.test .inject');

done();
});
});

it('Should load then execute passed in javascript function before uncss runs', (done) => {
const options = {
htmlroot: path.join(__dirname, './jsdom'),
inject: '../tests/jsdom/inject.js'
};
uncss(['tests/jsdom/inject.html'], options, (err, output) => {
expect(err).to.equal(null);
expect(output).to.include('.no-test .inject');
expect(output).to.include('.test .inject');

done();
});
});
});
11 changes: 11 additions & 0 deletions tests/jsdom/inject.html
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jsdom inject test</title>
<link rel="stylesheet" href="jsdom.css">
</head>
<body>
<div class="inject"></div>
</body>
</html>
5 changes: 5 additions & 0 deletions tests/jsdom/inject.js
@@ -0,0 +1,5 @@
'use strict';

module.exports = function(window) {
window.document.querySelector('html').classList.add('no-test', 'test');
};
8 changes: 8 additions & 0 deletions tests/jsdom/jsdom.css
Expand Up @@ -21,3 +21,11 @@
.error {
margin: 0;
}

.no-test .inject{
margin: 0;
}

.test .inject{
margin: 0;
}

0 comments on commit 54e4677

Please sign in to comment.