HTML Compressor does not ignore <noscript> tags

[rtrevellyan]

The noscript tag can be used to load stylesheets for use when javascript is disabled. The HTML compressor combines these stylesheets with other stylesheets, which results in them being loaded always instead of only when javascript is disabled. This seems to be incorrect behavior.

For an example, install the Portfolio Slideshow plugin in WordPress. Notice that is loads a stylesheet named portfolio-slideshow-noscript.css when javascript is disabled. With HTML compression enabled and CSS combining enabled, this stylesheet becomes part of a combined stylesheet and the slideshow navigation and pager are always hidden. With HTML compression enabled but CSS combining disabled, this stylesheet remains correctly within a noscript tag and does not load unless javascript is disabled. Adding an exclusion for noscript leaves the stylesheet uncombined but removes the noscript tag, so it still loads incorrectly when javascript is enabled.

[jaswrks]

Thanks for the report! Yes, that does sound like a bug.

[jaswrks]

cc @raamdev Something to be aware of.

[raamdev]

Steps to reproduce this bug

• Install, activate, and enable ZenCache Pro (tested with v150716)
• Enable the HTML Compressor with default options (i.e., all compression options enabled)
• Install and activate Portfolio Slideshow plugin (https://cloudup.com/cB4TD0TldYg)
• Create a new test Post/Page and upload some images from the Portfolio Slideshow meta box on the Post/Page Editor screen; then insert the necessary shortcode into the page (e.g., [portfolio_slideshow]) and publish the Post/Page
• Logout and visit the Slideshow Post/Page in a browser with JavaScript Enabled

Observed Behavior

The slideshow does not load as expected because the CSS inside the <noscript></noscript> tag has been stripped out and combined into a single CSS file, which ZenCache is then loading regardless of whether or not the browser has JavaScript enabled.

In the case of the Portfolio Slideshow plugin, that CSS disables the main features of the Portfolio Slideshow plugin because those features require JavaScript. Since that CSS is being loaded even for browsers with JavaScript Enabled, those browsers will see the Slideshow as if they were visiting with JavaScript Disabled.

Expected Behavior

The content inside the <noscript></noscript> tags should not be stripped out and combined into the main CSS file. Instead, it should remain inside the <noscript></noscript> tags.

Other Notes

When I select No, do not combine CSS from and into fewer files. in the HTML Compressor, the contents of the <noscript></noscript> tag does not get combined/minified and the expected behavior is achieved.

Here's the contents of the <noscript></noscript> tags in question, before being combined into the main CSS file:

<noscript><link rel="stylesheet" type="text/css" href="http://zcpro.dev/wordpress/wp-content/plugins/portfolio-slideshow-1.5.1/css/portfolio-slideshow-noscript.css?ver=1.5.1" /></noscript>

And here's what that same line looks like after ZenCache strips out that CSS:

<noscript></noscript>

[rtrevellyan]

Please note also, if CSS combining is enabled but the stylesheet in question is added to the CSS Exclusion Patterns, the noscript tags are stripped from the original HTML and the stylesheet still loads unconditionally.

[jaswrks]

Next Release Changelog:

• <noscript> bug fix; i.e., these should be excluded automatically in order to preserve their intended purpose. The HTML Compressor now makes no adjustments to anything inside <noscript> tags, and the same has always been true for IE conditional comments as well. See also: HTML Compressor does not ignore <noscript> tags #65

[raamdev]

ZenCache Pro v151002 has been released and includes changes from this GitHub Issue.

See the ZenCache Pro v151002 release announcement for further details.

---

This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#65).