inline-css

Transforms external stylesheets to inline styles.

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.

TransformInlineCss.prototype.before()

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

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:

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.

TransformInlineCss.prototype.after(context)

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