Description
It seems like the problem is isolated to the case where you pass more than
one argument to @function url($arg1, $arg2: '') { ... }
My tests shows that:
- attr() works with multiple arguments
- omitting the second argument works
- local function variables and global works
Note! When passing the second argument the last character of the first argument is removed
$base-path:'../images/';
$base-attr:'data-';
@function url($src, $path:''){
@return unquote('url('+$base-path + $path+ $src +')');
}
@function url2($src, $path:''){
@return unquote('url('+ $base-path + $path+ $src +')');
}
@function attr($arg1, $arg2:''){
@return unquote('attr('+$base-attr + $arg1 + $arg2 +')');
}
div {
background: url('image.png');
background: url('image.png','img/');
background: url2('image.png','img/');
&:after {
content: attr(value);
content: attr(value, -extra);
content: url('icon.png');
content: url('icon.png','gfx/');
content: url2('icon.png','gfx/');
}
}
/* Output */
div {
background: url(../images/image.png);
background: url(../images/image.pn','img/); /* <= Fails */
background: url(../images/img/image.png);
}
div:after {
content: attr(data-value);
content: attr(data-value-extra);
content: url(../images/icon.png);
content: url(../images/icon.pn','gfx/); /* <= Fails */
content: url(../images/gfx/icon.png);
}
/* Expected */
div {
background: url(../images/image.png);
background: url(../images/img/image.png);
background: url(../images/img/image.png);
}
div:after {
content: attr(data-value);
content: attr(data-value-extra);
content: url(../images/icon.png);
content: url(../images/gfx/icon.png);
content: url(../images/gfx/icon.png);
}