Dated user CSS with <style> tags cannot be parsed #425

New issue

Closed

opened 2024-06-21 14:14:48 +00:00 by p3k · 2 comments

p3k commented

2024-06-21 14:14:48 +00:00

(Migrated from github.com)

At one point the original user CSS in the Site#stylesheet skin contained <style> tags:

<style type='text/css'>
<!--
…
//-->
</style>

In the meantime, the user CSS is loaded via action as external stylesheet (text/css) – and this structure cannot be parsed by the Less parser.

The error is visible in the main.css file at the client:

/**
LESS parser got exception when rendering custom CSS.
 error in line  column  of undefined: org.lesscss.LessException: ParseError: Unrecognised input in /tmp/tmp17820753273792177474less.tmp on line 702, column 1:
701 
702 <style type="text/css">
703 <!--

At one point the original user CSS in the `Site#stylesheet` skin contained `<style>` tags: ```html <style type='text/css'>  </style> ``` In the meantime, the user CSS is loaded via action as external stylesheet (`text/css`) – and this structure cannot be parsed by the Less parser. The error is visible in the main.css file at the client: ```css /** LESS parser got exception when rendering custom CSS. error in line column of undefined: org.lesscss.LessException: ParseError: Unrecognised input in /tmp/tmp17820753273792177474less.tmp on line 702, column 1: 701 702 <style type="text/css"> 703 <!-- ```

p3k commented

2024-06-21 14:21:44 +00:00

(Migrated from github.com)

Replacing the <style> and comment tags before passing the CSS to the Less parser is a potential fix.

998025b55c/code/Site/Site.js (L480)

diff --git a/code/Site/Site.js b/code/Site/Site.js
index 021ae286..8bdbbc30 100644
--- a/code/Site/Site.js
+++ b/code/Site/Site.js
@@ -477,7 +477,8 @@ Site.prototype.main_css_action = function() {
   res.push();
   this.renderSkin('$Site#stylesheet');
   this.renderSkin('Site#stylesheet');
-  var css = res.pop();
+  var css = res.pop()
+    .replace(/<(\/?style|!).*/g, '');
 
   try {
     lessParser.parse(css, function(error, less) {

Replacing the `<style>` and comment tags before passing the CSS to the Less parser is a potential fix. https://github.com/antville/antville/blob/998025b55c324dd03094cfdc8752b01e304baa0d/code/Site/Site.js#L480 ```diff diff --git a/code/Site/Site.js b/code/Site/Site.js index 021ae286..8bdbbc30 100644 --- a/code/Site/Site.js +++ b/code/Site/Site.js @@ -477,7 +477,8 @@ Site.prototype.main_css_action = function() { res.push(); this.renderSkin('$Site#stylesheet'); this.renderSkin('Site#stylesheet'); - var css = res.pop(); + var css = res.pop() + .replace(/<(\/?style|!).*/g, ''); try { lessParser.parse(css, function(error, less) { ```