Inline Css

Transforms external stylesheets to inline styles

• Install
• API
  • TransformInlineCss
    • .before
    • .sources
      • Options
    • .after
• 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

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

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

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 on March 13, 2017