makestatic-inline-css/README.md

Transforms external stylesheets to inline styles

# Inline Css

> Transforms external stylesheets to inline styles

---

- [Install](#install)
- [API](#api)
  - [TransformInlineCss](#transforminlinecss)
    - [.before](#before)
    - [.sources](#sources)
      - [Options](#options)
    - [.after](#after)
- [License](#license)

---

## Install

```
yarn add makestatic-inline-css
```

## API

### TransformInlineCss

For each HTML file inline transform stylesheets (`link(rel="stylesheet")`)
into inline `style` elements.

Finds `link` elements in the HTML AST and converts them into `style`
elements with the content of the external stylesheet inlined.

When the `prune` option is enabled this implementation will remove style
rules whose selectors do not match elements in the document.

Note that the `prune` option whilst in use and appears to be working should
be considered experimental.

#### .before

```javascript
TransformInlineCss.prototype.before()
```

Initialize the list of matched resources used in the `after` hook to
delete matched resources when the `remove` option is set.

#### .sources

```javascript
TransformInlineCss.prototype.sources(file, context, options)
```

For each file with an HTML AST find all `link` elements that have the
`rel` attribute set to `stylesheet` and have the `href` attribute set.

If the `href` attribute does not contain a protocol it is considered to
reference a stylesheet that is available in the compilation asset list,
in which case the stylesheet content from the referenced file is added as
a text node of a `style` element and the `link` element is removed.

Supports absolute `href` attributes like `/style.css` and paths relative
to the HTML document such as `../style.css`.

Multiple external stylesheets that are being inlined will be concatenated
into a single `style` element.

If the `link` element has a `media` attribute it must match the pattern
specified using the `media` option, by default this is configured to
match stylesheets that have a media query including one of:

+ `all`
+ `screen`
+ `handheld`

If a referenced stylesheet cannot be found in the compilation assets a
warning is logged.

If watch mode is enabled for the compiler the `remove` option is disabled
otherwise repeat compiles will not find the stylesheet to inline as it has
been removed from the compilation assets.

* `file` Object the file being processed.
* `context` Object the processing context.
* `options` Object the plugin options.

##### Options

* `remove` Boolean=false delete matched resources.
* `prune` Boolean=false remove rules that do not match the dom.
* `media` RegExp pattern used to test the media attribute.

#### .after

```javascript
TransformInlineCss.prototype.after(context)
```

Deletes matched resources from the compilation assets when the
`remove` option has been enabled.

* `context` Object the procesing context.

## License

MIT

---

Created by [mkdoc](https://github.com/mkdoc/mkdoc) on March 13, 2017

[docs]: https://makestatic.ws/docs/ "Documentation"
[standalone manual]: https://github.com/makestatic/website/blob/master/MANUAL.md "Standalone Manual"
[yarn]: https://yarnpkg.com "Yarn"
[webpack]: https://webpack.js.org "Webpack"
[babel]: https://babeljs.io "Babel"
[postcss]: http://postcss.org "Postcss"
[sugarss]: https://github.com/postcss/sugarss "Sugarss"
[reshape]: https://github.com/reshape/reshape "Reshape Source Code"
[reshapeml]: https://reshape.ml "Reshape"
[clean-css]: https://github.com/jakubpawlowicz/clean-css "Clean CSS"
[html-minifier]: https://github.com/kangax/html-minifier "Html Minifier"
[uglify-js]: https://github.com/mishoo/UglifyJS2 "Uglify JS"
[imagemin]: https://github.com/imagemin/imagemin "Imagemin"
[mkdoc]: https://github.com/mkdoc/mkdoc "Mkdoc"
[browsersync]: https://www.browsersync.io "Browsersync"
[yeoman]: http://yeoman.io "Yeoman"
[spike]: https://www.spike.cf "Spike"
[validator]: https://github.com/validator/validator "HTML Validator"
[github pages]: https://pages.github.com "Github Pages"
[amazon s3]: https://aws.amazon.com/s3/ "Amazon S3"
[google sitemaps]: https://support.google.com/webmasters/answer/183668?hl=en&ref_topic=4581190 "Google Sitemaps"
[sitemaps]: https://www.sitemaps.org/ "Sitemaps"