litespeedtech / lscache_wp

LiteSpeed Cache for WordPress
http://wordpress.org/plugins/litespeed-cache/
GNU General Public License v3.0
209 stars 111 forks source link

Issue with inline `<style>` CSS optimization when CSS contains `<` character #605

Open SumiHeart opened 8 months ago

SumiHeart commented 8 months ago

I've encountered an issue with the inline CSS optimization feature of the LiteSpeed Cache plugin. It appears that the plugin's CSS optimization process is not handling inline <style> tags correctly when the CSS contains the < character, such as in CSS @property syntax.

Issue Description: The inline CSS within <style> tags that include CSS properties with syntax like @property --image-title-bg{syntax:'<color>'; ...} or list-style-image: url('data:image/svg+xml;utf8,<svg xmlns... are not being optimized to all css in <style>. It seems that the < character is causing the regex pattern used for matching and optimizing inline CSS to terminate prematurely.

Actual Behavior: The inline CSS is not optimized, and the CSS content after the < character seems to be ignored by the optimization process.

I tried to change the matching code to the following code, and it can be matched for the time being. I hope you can help me update to solve the problem.

preg_match_all('#<link ([^>]+)/?>|<style([^>]*)>((?:(?!</style>).)*)</style>#isU', $content, $matches, PREG_SET_ORDER);

I hope this information is helpful for diagnosing and resolving the issue. Please let me know if you need any further details or if I can assist in any way.

Thank you.

timotei-litespeed commented 1 month ago

Hello Thank you for your report. We will look into it and come back with an answer

Tymotey commented 1 month ago

@SumiHeart I have push you can test: https://github.com/timotei-litespeed/lscache_wp/commit/c2ebbee46108d5ab0e81014f498f75c2b427649e by using Beta Test from Toolbox: https://docs.litespeedtech.com/lscache/lscwp/toolbox/#beta-test-tab