Incorrect ParseError: "filter:" property without double quote marks

[ar-rm]

Hi,

I think there's a problem with Less.js parsing the "filter:" property for < IE8.

I've translated some rgba() for IE via: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

The output it provides is valid IE css and "filter:" works in IE7 to create a transparent background:

.test {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000,endColorstr=#0F000000)"; /* IE8 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000,endColorstr=#0F000000);   /* IE6 & 7 */

    background: transparent;
    zoom: 1;
}

("background:" and "zoom:" are necessary for IE, but not related to this ParseError.)

The problem is, this syntax throws a "ParseError: SyntaxError" on line three.
If I add quote marks around "progid: ...", Less.js doesn't throw that ParseError, but that's not valid syntax for IE7 and the transparency isn't applied.

Clarification:

• Valid CSS Syntax = Does work in IE7 = Less.js ParseError:
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000,endColorstr=#0F000000); /* IE6 & 7 */
• Invalid CSS Syntax = Doesn't work in IE7 = NO Less.js ParseError:
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000,endColorstr=#0F000000)"; /* IE6 & 7 */

Test in IE7: http://jsfiddle.net/ar_fiddles/ArQeZ/

Interestingly enough, this mixin gets it right and avoids the ParseError: #274

I'm using Less.app 2.7 (959), which uses Less.js 1.3.0.

Thanks!

a.

[souldreamer]

The usual solution is to use filter: ~"progid:..." which will produce filter: progid:... without the less compiler complaining.

[ar-rm]

Thanks souldreamer. That did the trick. I didn't know about that.

Should that workaround be required for non-Less css? I thought the point of Less was that it's a superset of css. Based on that, I'd still consider this a bug.

...Or am I missing something?

Thanks!

a.

[souldreamer]

It's not all non-less css, it's just the extra colon after progid that causes problems... I think it's because the filter semantics are not valid CSS and less is a superset of valid CSS. So it wouldn't be a bug anymore than the fact that CSS including the filter semantics won't validate in a CSS validator.

[ar-rm]

Understood. That's a good point.
But this is valid css for < IE8 and it isn't a hack as far as IE is concerned. Which is why it's unexpected that it doesn't validate in Less.

Regardless, I just read about "Escaping" at lesscss.org.
I guess that's the best solution because of all of the various MS syntaxes that exist.

I'll close this ticket.

Thanks.

a.

[juliendude]

Thanks a lot souldreamer.
I faced the same issue and your little trick did job!
wrapping with quotes and prepended with a ~ removed all errors while keeping the css as it should.