Wp-rocket: Detecting CSS from non-standard stylesheet <link> tags

Created on 3 May 2018 · 8Comments · Source: wp-media/wp-rocket

Our current regex to match the CSS stylesheets does not match stylesheets if they are present in a non-standard way.

Current regex: https://github.com/wp-media/wp-rocket/blob/78983800bca72b536b5958697ad4fdf47bdd801e/inc/functions/minify.php#L21

Does not match this ( https://regex101.com/r/XaZIl5/1 ):

<link rel="stylesheet" href="https://www.example.com/wp-includes/css/dashicons.min.css?ver=4.9.5">

but will match this (a space before the closing > ) ( https://regex101.com/r/O2F5L0/1 ):

<link rel="stylesheet" href="https://www.example.com/wp-includes/css/dashicons.min.css?ver=4.9.5" >

file optimization low bug

Source

arunbasillal

👍1

All 8 comments

The current pattern used to matche the CSS links uses (.+) after the href attribute, asking for 1 or more characters.

In some cases, the link tag doesn't contain anything after the href, so the tag is not matched, and not minified/combined.

Example : <link rel="stylesheet" href="/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.0.1">

Very edge case as it is not WordPress default output for CSS links at all. In the case encountered, it is the Soil plugin by Roots that is doing aggressive to the output for styles/scripts.

Tabrisrp on 4 May 2018

HS tag: css regex

webtrainingwheels on 8 May 2018

Recently noticed two themes that does this in the page source. This caused issues with query string removal, minification and possibly combining of CSS.

It looks like both these are based on the roots.io/sage starter theme that ships with this code for "cleanup" - https://github.com/roots/sage/blob/d095c6eb588da5b39b878cfb4f9531528407cfac/inc/cleanup.php#L606-L614

Fix is to unhook these filters.

For Ronneby theme - http://snippi.com/s/qinaru2
For Bellevuex theme - http://snippi.com/s/ugbdj6l

arunbasillal on 11 May 2018

Helper plugin by @glueckpress until a solution is available in core: https://www.dropbox.com/s/vvmi188tvk8ebfh/wp-rocket-static-minify-regex.zip?dl=1

arunbasillal on 22 Jun 2018

Very edge case as it is not WordPress default output for CSS links at all.

@Tabrisrp Agreed, but it can cause unnecessary support.

Wouldn’t it be low-hanging fruit to push a minor update to the regex pattern, as outlined in #1030?

glueckpress on 22 Jun 2018

In 3.1, we won't be using regex anymore to collect all the CSS files in the HTML content, but a DOM selector directly, so this will in fact become invalid.

The new solution should be way more reliable, reducing unnecessary support.

Tabrisrp on 22 Jun 2018

🎉1

These two cases were tested and passed :+1:
Both these failed in 3.0

<link rel='stylesheet' id='twentyseventeen-style-css' href='http://localhost/rocketdev/wp-content/themes/twentyseventeen/style.css?ver=4.9.7'>

<link rel="stylesheet" href="/rocketdev/wp-content/themes/twentyseventeen/style.css?ver=5.0.1">

arunbasillal on 12 Jul 2018

👍1

➤ Arun Basil Lal commented:

These two cases were tested and passed 👍
Both these failed in 3.0