BundleCSS - Eonic/ProteanCMS GitHub Wiki

CSS Bundling in ProteanCMS for Legacy Browsers

In the ewcommon/xsl/tools/Functions.XSL file, we handle the bundling of .CSS, .LESS, or .SASS files. Unlike BundleJS, which can manage multiple files, we only support a single .less or .sass file, since these files often import other resources.

IE8 Compatibility Mode

For older browsers like Internet Explorer 8 (IE8), we split the CSS into multiple files to overcome the size limitations of legacy browsers.

CSS Bundling Templates

The following templates manage the CSS bundling process and ensure compatibility with IE8:

<xsl:template name="bundle-css">
  <xsl:param name="comma-separated-files"/>
  <xsl:param name="bundle-path"/>
  <xsl:call-template name="render-css-files">
    <xsl:with-param name="list" select="ew:BundleCSS($comma-separated-files, $bundle-path)"/>
    <xsl:with-param name="ie8mode">
      <xsl:if test="(contains($userAgent, 'MSIE 7.0') or contains($userAgent, 'MSIE 8.0') or contains($userAgent, 'MSIE 9.0'))">
        <xsl:text>1</xsl:text>
      </xsl:if>
    </xsl:with-param>
  </xsl:call-template>
</xsl:template>

Rendering CSS Files Template

This template recursively renders the CSS files and handles the splitting for IE8 mode:

<xsl:template name="render-css-files">
  <xsl:param name="list" />
  <xsl:param name="ie8mode"/>
  <xsl:variable name="separator" select="','"/>
  <xsl:variable name="newlist" select="concat(normalize-space($list), $separator)" />
  <xsl:variable name="first" select="substring-before($newlist, $separator)" />
  <xsl:variable name="remaining" select="substring-after($newlist, $separator)" />
  <xsl:if test="$first!=''">
    <xsl:choose>
      <xsl:when test="(contains($userAgent, 'MSIE 7.0') or contains($userAgent, 'MSIE 8.0') or contains($userAgent, 'MSIE 9.0'))">
        <xsl:if test="$ie8mode='1'">
          <link rel="stylesheet" type="text/css" href="{$first}" />
        </xsl:if>
        <xsl:call-template name="render-css-files">
          <xsl:with-param name="list" select="$remaining" />
          <xsl:with-param name="ie8mode" select="'1'" />
        </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>
        <link rel="stylesheet" type="text/css" href="{$first}{$bundleVersion}" />
      </xsl:otherwise>
    </xsl:choose>
  </xsl:if>
</xsl:template>

Behind the Scenes: BundleCSS

This calls the BundleCSS function from ProteanCMS / Tools / xnltools.xsltextensions, which contains bespoke XSLT functions specifically created for ProteanCMS.

In Debug Mode:
The .less or .sass file is returned directly to be processed by IIS handlers, enabling rapid debugging and style adjustments.
In Production Mode:
We check application variables to see if the file has already been compiled. If the file exists in the application variables, we return the path to the CSS file. If not, the .less file is processed:
1. Impersonation is used to ensure the server has permission to save the file.
2. The CSS Web Client compiles the .less file into .css, and the output is saved to the target directory.
3. The path to the compiled .css file is saved in the application variables for future requests, eliminating the need to reprocess the .less file repeatedly.

Back to Bespoke XSLT Functions