How to inline CSS and javascript through XSL

Question

I have an XSL transformation which outputs HTML. In the head element I have a CSS file reference.

<link rel="stylesheet" type="text/css" href="css/styles.css"/>

I would like to create a standalone HTML result without external references and thus I would like to inline the CSS styles. To prevent code duplication, I do not want to hard code the styles into the XSL file, so I am looking for some XSL command to copy the file contents of the css file. I know xsl:include or xsl:import won't work, since they expect XSL files. Neither does

<xsl:copy-of select="document('css/styles.css')"/>

as it expects something XML compliant.

I also have some javascript function declarations which I would like to inline.

Is this possible with pure XSL or will I have to do some pre-processing of the XSL file (or post-processing of the HTML file)?

Answer 1

Maybe you could trick it into thinking the stylesheet is XML.

styles.css

/*
<?xml version="1.0" encoding="utf-8"?>
<style>
<![CDATA[
*/
... styles ...
/*
]]>
</style>
*/

It's a hack but if there is no other way it might suffice (assuming it works at all).

Answer 2

XSLT 2.0 provides the unparsed-text() function to read documents via URL that are not XML.

In XSLT 1.0, if you don't need to be too script about the CSS, you can use the following to make the CSS file XML-compatible. And, fortunately, the browsers tolerate the HTML comments.

CSS

<!--/*--><root><![CDATA[<!--*/--> 
body
{
    margin: 0;
}
div > p
{
    background-color: yellow;
}
<!--/*-->]]></root><!--*/-->

XSLT

<style type="text/css">
 <xsl:value-of select="document('test.css')" disable-output-escaping="yes" />
</style>