mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-31 01:34:09 +02:00
Avoid rendering duplicated CSS definitions in var()
function calls
In `Call::compile()` in case we have CSS var() function calls and the keyword value of the function call prefixed by `--` and color property name prefixed by `@` are same, then avoid generation of duplicate CSS definitions.
This commit is contained in:
parent
2c3bc6ea95
commit
6711654146
@ -6,6 +6,7 @@ namespace Icinga\Less;
|
|||||||
|
|
||||||
use Less_Tree_Call;
|
use Less_Tree_Call;
|
||||||
use Less_Tree_Color;
|
use Less_Tree_Color;
|
||||||
|
use Less_Tree_Keyword;
|
||||||
use Less_Tree_Value;
|
use Less_Tree_Value;
|
||||||
use Less_Tree_Variable;
|
use Less_Tree_Variable;
|
||||||
|
|
||||||
@ -23,12 +24,17 @@ class Call extends Less_Tree_Call
|
|||||||
return parent::compile($env);
|
return parent::compile($env);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$keyWord = null;
|
||||||
foreach ($this->args as $arg) {
|
foreach ($this->args as $arg) {
|
||||||
if (! is_array($arg->value)) {
|
if (! is_array($arg->value)) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
$name = null;
|
$name = null;
|
||||||
|
if ($arg->value[0] instanceof Less_Tree_Keyword) {
|
||||||
|
$keyWord = $arg->value[0]->value;
|
||||||
|
}
|
||||||
|
|
||||||
if ($arg->value[0] instanceof Less_Tree_Variable) {
|
if ($arg->value[0] instanceof Less_Tree_Variable) {
|
||||||
// This is the case when defining a variable with a callable LESS rules such as fade, fadeout..
|
// This is the case when defining a variable with a callable LESS rules such as fade, fadeout..
|
||||||
// Example: `@foo: #fff; @foo-bar: fade(@foo, 10);`
|
// Example: `@foo: #fff; @foo-bar: fade(@foo, 10);`
|
||||||
@ -55,13 +61,28 @@ class Call extends Less_Tree_Call
|
|||||||
$vr->compile($env);
|
$vr->compile($env);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get the uppermost variable of the variable references
|
if ($this->name === 'var') {
|
||||||
while (! $vr instanceof ColorProp) {
|
// If calling var() CSS function, get the next variable in variable references
|
||||||
$vr = $vr->getRef();
|
// if keyword value and color property name are same
|
||||||
|
if (substr($keyWord ?? '', 2) === $vr->getName()) {
|
||||||
|
// Get the uppermost variable of the variable references in case the keyword
|
||||||
|
// value and color property name are same.
|
||||||
|
$vr = $vr->getRef();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// If not calling var() CSS function get the uppermost variable of the
|
||||||
|
// variable references
|
||||||
|
while (! $vr instanceof ColorProp) {
|
||||||
|
$vr = $vr->getRef();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} elseif ($vr instanceof Less_Tree_Color) {
|
} elseif ($vr instanceof Less_Tree_Color) {
|
||||||
$vr = ColorProp::fromColor($vr);
|
// Only if keyword value and color property name are not same then set variable to
|
||||||
$vr->setName($name);
|
// ColorProp::fromColor($vr)
|
||||||
|
if (substr($keyWord ?? '', 2) !== substr($name, 1)) {
|
||||||
|
$vr = ColorProp::fromColor($vr);
|
||||||
|
$vr->setName($name);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$arg->value[0] = $vr;
|
$arg->value[0] = $vr;
|
||||||
|
@ -90,6 +90,66 @@ LESS
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function testNestedCssDefinitions()
|
||||||
|
{
|
||||||
|
$this->assertEquals(
|
||||||
|
<<<CSS
|
||||||
|
.black {
|
||||||
|
color: var(--my-color, var(--black, #000000));
|
||||||
|
}
|
||||||
|
.notBlack {
|
||||||
|
color: var(--my-black-color, var(--my-color, var(--black, #000000)));
|
||||||
|
}
|
||||||
|
|
||||||
|
CSS
|
||||||
|
,
|
||||||
|
$this->compileLess(<<<LESS
|
||||||
|
@black: black;
|
||||||
|
@my-color: @black;
|
||||||
|
@my-black-color: @my-color;
|
||||||
|
|
||||||
|
.black {
|
||||||
|
color: var(--my-color, @black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notBlack {
|
||||||
|
color: var(--my-black-color, @my-color);
|
||||||
|
}
|
||||||
|
LESS
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNestedDuplcateCssDefinitions()
|
||||||
|
{
|
||||||
|
$this->assertEquals(
|
||||||
|
<<<CSS
|
||||||
|
.black {
|
||||||
|
color: var(--my-color, var(--black, #000000));
|
||||||
|
}
|
||||||
|
.notBlack {
|
||||||
|
color: var(--my-black-color, var(--my-color, var(--black, #000000)));
|
||||||
|
}
|
||||||
|
|
||||||
|
CSS
|
||||||
|
,
|
||||||
|
$this->compileLess(<<<LESS
|
||||||
|
@black: black;
|
||||||
|
@my-color: @black;
|
||||||
|
@my-black-color: @my-color;
|
||||||
|
|
||||||
|
.black {
|
||||||
|
color: var(--my-color, @my-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notBlack {
|
||||||
|
color: var(--my-black-color, @my-black-color);
|
||||||
|
}
|
||||||
|
LESS
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
public function testNestedVariablesInMixinCalls()
|
public function testNestedVariablesInMixinCalls()
|
||||||
{
|
{
|
||||||
$this->assertEquals(
|
$this->assertEquals(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user