Design issue Comments broken on custom properties

Russ

Well-known member
Affected version
2.2
Really strange one, I've attached a style XML just to test it out yourselves.

Commenting out using // inside the extra box on a custom style property throws an error:

Code:
XF\CssRenderException: Error rendering template public:extra.less: ParseError: missing closing `}` in public:extra.less on line 3616, column 24 (on or near line 3616) src/XF/CssRenderException.php:87
Generated by: Unknown account Jun 17, 2021 at 9:33 PM
Stack trace
 3613 | // This should be used for additional LESS setup code (that does not output anything).
 3614 | // setup.less customizations should be avoided when possible.
 3615 | 
*3616*| #XF .userBanner--staff    {     color: #FFF;
 3617 |     background: rgb(56, 201, 61);
 3618 |     //color: pink; }
------------

#0 src/XF/CssRenderer.php(416): XF\CssRenderException::createFromLessException(Object(Less_Exception_Chunk), 'public:extra.le...', '// Note that th...')
#1 src/XF/CssRenderer.php(350): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#2 src/XF/CssRenderer.php(258): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#3 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#4 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#5 css.php(30): XF\CssWriter->run(Array, 763, 1, 'cbdf247f902dab6...')
#6 {main}

-------------

Previous Less_Exception_Chunk: ParseError: missing closing `}` in anonymous-file-5142.less on line 3616, column 24
3614| // setup.less customizations should be avoided when possible.
3615| 
3616| #XF .userBanner--staff    {     color: #FFF;
3617|     background: rgb(56, 201, 61);
3618|     //color: pink; } - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677
#0 src/vendor/oyejorge/less.php/lib/Less/Parser.php(621): Less_Parser->GetRules(NULL)
#1 src/vendor/oyejorge/less.php/lib/Less/Parser.php(449): Less_Parser->_parse()
#2 src/XF/CssRenderer.php(412): Less_Parser->parse('// Note that th...')
#3 src/XF/CssRenderer.php(350): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#4 src/XF/CssRenderer.php(258): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#5 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#6 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#7 css.php(30): XF\CssWriter->run(Array, 763, 1, 'cbdf247f902dab6...')
#8 {main}

This is a simple property that changes the appearance of the staff banner. I called it in extra.less using:
Code:
#XF .userBanner--staff    { .xf-staffbanner(); }

TYQCR2l.png


The // seems to work just fine with the default style properties (navigation row). Also, if you have any valid CSS below the //color: pink; it'll work just fine:

Code:
//color: pink;
background: #000;

The above would load. So it seems to happen when the comments are the last line of the extra box on custom properties, maybe?
 

Attachments

So it seems to happen when the comments are the last line of the extra box on custom properties, maybe?
Yeah that's exactly it:

Code:
3618|     //color: pink; } - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677

It's rendering like this:

Code:
#XF .userBanner--staff    {     color: #FFF;
     background: rgb(56, 201, 61);
     //color: pink; }

Or more accurately:

Code:
#XF .userBanner--staff    {     color: #FFF;
     background: rgb(56, 201, 61);
 
Yeah that's exactly it:

Code:
3618|     //color: pink; } - src/vendor/oyejorge/less.php/lib/Less/Parser.php:677

It's rendering like this:

Code:
#XF .userBanner--staff    {     color: #FFF;
     background: rgb(56, 201, 61);
     //color: pink; }

Or more accurately:

Code:
#XF .userBanner--staff    {     color: #FFF;
     background: rgb(56, 201, 61);

Any reason it doesn't throw any errors on the .xf-publicNav style property? That one won't throw errors even with //color: pink; as the last line.

I understand the easy method would be simply removing the CSS or using /* comments but I've had a couple of folks report it on my site so I wanted to investigate it a little further.
 
I think the main workaround is this:

Code:
#XF .userBanner--staff
{
    .xf-staffbanner();
}

Which would render like this:

Code:
#XF .userBanner--staff
{
     color: #FFF;
     background: rgb(56, 201, 61);
     //color: pink;
}

It doesn't do it with publicNav because it's probably never used on the same line as a curly bracket.
 
As it stands, I don't think we're going to change anything here. This is a quirk with style properties not being a normal mixin but that isn't something that we'd be changing at this time.

Simple workaround is to ensure that a call to a CSS-based property (.xf-name();) is done on its own line.
 
Top Bottom