inline-critical/README.md

52 lines
1.5 KiB
Markdown
Raw Normal View History

2014-08-04 00:01:39 +02:00
# inline-critical
2014-08-04 00:05:54 +02:00
Inline critical-path css and load the existing stylesheets asynchronously.
2014-09-09 12:56:12 +02:00
Existing link tags will also be wrapped in ```<noscript>``` so the users with javscript disabled will see the site rendered normally.
2014-08-04 00:01:39 +02:00
2014-08-04 00:07:35 +02:00
[![build status](https://secure.travis-ci.org/bezoerb/inline-critical.svg)](http://travis-ci.org/bezoerb/inline-critical)
2014-08-04 00:01:39 +02:00
## Installation
This module is installed via npm:
``` bash
$ npm install inline-critical
```
## Example Usage
``` js
2014-08-04 00:05:54 +02:00
var inline = require('inline-critical');
var html = fs.readFileSync('test/fixtures/index.html', 'utf8');
var critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');
var inlined = inline(html, critical);
2014-08-04 00:01:39 +02:00
```
2014-10-19 03:16:34 +02:00
2015-06-09 17:19:31 +02:00
## Example Usage ignoring stylesheet per regex
``` js
var inline = require('inline-critical');
var html = fs.readFileSync('test/fixtures/index.html', 'utf8');
var critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');
var inlined = inline(html, critical, {
ignore: [/bootstrap/]
});
2015-06-09 17:21:09 +02:00
```
2015-06-09 17:19:31 +02:00
## inline(html, styles, options?)
2014-10-19 03:16:34 +02:00
- `html` is the HTML you want to use to inline your critical styles, or any other styles
- `styles` are the styles you're looking to inline
- `options` is an optional configuration object
- `minify` will minify the styles before inlining
- `extract` will remove the inlined styles from any stylesheets referenced in the HTML
- `basePath` will be used when extracting styles to find the files references by `href` attributes
2015-06-09 17:19:31 +02:00
- `ignore` ignore matching stylesheets when inlining.
2014-10-19 03:16:34 +02:00
## License
MIT