Support dot and slash in literal mixin parameter

[Krinkle]

.backgrond-image(@src) {
  background-image: url(@src);
}

.foo {
  .backgrond-image(images/foo.png);
}

Syntax error: expected ')' got '.'
.foo { .backgrond-image(images/foo.png);}

Would it be feasible to allow dots in literal mixin parameters?

The argument can be quoted, but since CSS allows them to be unquoted (e.g. in url()) would be nice if Less would support that as well.

[seven-phases-max]

The dot is not the only problem. Notice it also has / which will cause another error unless you compile it with --strict-math:on. In general I think eventually we could have more reasons to allow more characters for variable values (for example #965), but url? It may contain too many special characters (:/?#& etc.) to consider it as the main ground.

[Krinkle]

Just like with url(), it is indeed subject to limitation (limitations that most projects' style conventions I know of naturally avoid) of characters. For example, you can't use url() in plain css with a url that contains a parenthesis, it would have to be quoted.

I'm requesting it to reflect the bare values CSS supports in a similar position. Upon checking the specification for the core CSS2 spec, it seems well defined at http://www.w3.org/TR/CSS2/syndata.html#uri. It recommends url escaping for parenthesis or escaping:

4.3.4 URLs and URIs
[..]
An example without quotes:

li { list-style: url(http://www.example.com/redball.png) disc }

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '(', ')'.
Depending on the type of URI, it might also be possible to write the above characters as URI-escapes (where "(" = %28, ")" = %29, etc.) as described in [RFC3986].

That "escaping" part concerns me and is probably not feasible to support in Less (except when used in an actual use of url() as opposed to when passing a value to a mixin)

.example {
    list-style: url(http://www.example.com/redball_\(foo\).png) disc;
}

This is valid CSS.

.example {
    .backgrond-image(images/foo.png);
}

This breaks in LESS.

.example {
    .backgrond-image(images/foo);
}

This seems valid (doesn't parse error), but results in spaces being added:

.example {
    .backgrond-image: url(images / foo);
}

[Krinkle]

I've always liked bare values in CSS. And though in theory there are case where you need to quote or escape, in practice I never run into that with real code.

It would be nice if Less at least supported the dot and slash, but I can see how that opens up hazards.

Feel free to close if this is crazy, I'm satisfied either way :-)

[lukeapage]

Yes, I think its more trouble than its worth. Css can use context.. in less
we don't have reliable context.. I think its safer to just say use quotes..
we still have some weird and rare issues with unqouted urls. Consider also
passing a stripped url with // in it...

[lukeapage]

unquoted urls are the source of alot of problems, we don't want to exacerbate that.. closing..