Design issue Comments broken on custom properties

[Russ]

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:

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:

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

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:

//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?

 

[Chris D]

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:

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

It's rendering like this:

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

Or more accurately:

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

 

[Russ]

Yeah that's exactly it:

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

It's rendering like this:

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

Or more accurately:

#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.

 

[Chris D]

I think the main workaround is this:

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

Which would render like this:

#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.

 

[Mike]

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.