Fixed Error evaluating hue after creating Color property w/ variations enabled

[pegasus]

Affected version

2.3.0 Beta 2

1) If we create a new style property using the most basic settings:

• Property name: test
• Title: Test
• Type: Value
• Value type: Color
• [X] Enable variations

Then after saving, all CSS on the site is broken due to the property not having a default value (which cannot even be set during creation).

Errors occurred when rendering CSS:\A * public:variations.less: error evaluating function `hue` The first argument to hue must be a color index: 64928 (on or near line 1766)

Instead, the style property must first be created without "Enable variations", saved, have a default value added, then edited to "Enable variations". However, even in this situation, it is impossible to use an enabled property in situations where a style may want a blank value, due to the error.

The proposed fix is to test the value of the property before compiling public:variations.less, not defining the property in CSS if it was left blank. This also allows us to use such properties as part of an xf-default(property, property) construction.

2) A related error occurs if we define the property with a Property name containing an underscore (such as "addon_test"), and have managed the variations to have color values already, and use it within another property such as a background or border color:

@xf-addon_test

In this case, we receive an error like:

An exception occurred: [ArgumentCountError] Too few arguments to function Less_Functions::hsl(), 1 passed in /[redacted]/src/vendor/oyejorge/less.php/lib/Less/Tree/Call.php on line 76 and exactly 3 expected in src/vendor/oyejorge/less.php/lib/Less/Functions.php on line 84
Less_Functions->hsl() in src/vendor/oyejorge/less.php/lib/Less/Tree/Call.php at line 76
Less_Tree_Call->compile() in src/XF/Less/Tree/HslColor.php at line 236
XF\Less\Tree\HslColor->compile() in src/vendor/oyejorge/less.php/lib/Less/Tree/Expression.php at line 46
Less_Tree_Expression->compile() in src/vendor/oyejorge/less.php/lib/Less/Tree/Value.php at line 25
Less_Tree_Value->compile() in src/vendor/oyejorge/less.php/lib/Less/Tree/Rule.php at line 76
Less_Tree_Rule->compile() in src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php at line 95
Less_Tree_Ruleset->compile() in src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php at line 95
Less_Tree_Ruleset->compile() in src/vendor/oyejorge/less.php/lib/Less/Parser.php at line 181
Less_Parser->getCss() in src/XF/CssRenderer.php at line 423
XF\CssRenderer->renderToCss() in src/XF/CssRenderer.php at line 361
XF\CssRenderer->renderTemplate() in src/XF/CssRenderer.php at line 269
XF\CssRenderer->renderTemplates() in src/XF/CssRenderer.php at line 127
XF\CssRenderer->render() in src/XF/CssWriter.php at line 60
XF\CssWriter->run() in css.php at line 30

This occurs, because even though underscore is a legal property name character, its presence is preventing the CSS parser from recognizing xf-addon_test as a CSS-var (only when variations are enabled). In XF\Less\Tree\HslColorVariable.php:

protected const VALUE_REGEX = '/^--(?P<name>[a-z0-9-]+)(--(?P<component>[hsla]))?$/iU';

This error is easily resolved by changing the VALUE_REGEX (adding underscore to the name class):

protected const VALUE_REGEX = '/^--(?P<name>[a-z0-9-_]+)(--(?P<component>[hsla]))?$/iU';

 

[Russ]

Went to create a bug report, but I think it's the same issue:

If you simply remove the background color from Header/logo row and enable style variations, the CSS is completely broken. I think in this specific case it's because "Meta theme color" is calling the background color from the header row, but in 2.2 it was not quite as picky to where it would break the style:

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.3.0 Beta 5).

Change log:

Fix some errors with property variation handling

There may be a delay before changes are rolled out to the XenForo Community.