Less v3.0.0 incorrectly processes a base64-encoded style sheets

[Taritsyn]

If you compile the following code:

@import url("data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ==");

then get the following error:

FileError: 'data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ==' wasn't found. Tried - data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ==,C:\temp\data:text\css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ==,C:\temp\node_modules\data:text\css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ== in C:\temp\test.less on line 1, column 1:
1 @import url("data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ==");

[matthew-dean]

Less expects your @import statements to be .less files. If you want to construct an import this way, you need to specify that the source is CSS like:

@import (css) url("data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpbWUgIWltcG9ydGFudDsgfQ==");

[Taritsyn]

This code worked in version 2.7.3.

[seven-phases-max]

This code worked in version 2.7.3.

This was a bug actually. See #2955 for more details.

[matthew-dean]

This was a bug actually. See #2955 for more details.

Right. So the fact it worked in 2.7.3 was actually a bug, probably just because the "css" string was indata:text/css. There is no supported/documented method to do imports in Less in this way. If you want to preserve an @import statement, you need to specify the import type as (css).

[thorn0]

It would've perhaps been better if LESS had never used @import rules for any own purposes and just always preserved them using some other keyword for importing LESS files. After all, it's usually possible to start using LESS simply by renaming .css files to .less. And this @import issue is probably the only thing that breaks this compatibility. Or are there any other?

[seven-phases-max]

Or are there any other?

They are myriads. 100% compatibility is never possible.

After all, it's usually possible to start using Less simply by renaming .css files to .less

It's not an excuse to over-engineer the language just for the sake of "easy quick start".

[thorn0]

Myriads? Could you name a couple please?

Meanwhile, I have a counter-example. There is a famous trick with namespacing Twitter Bootstrap:

.foo {
	@import (less) './bootstrap.css';
}

The fact that this works proves that the degree of compatibility is really high.

[seven-phases-max]

The fact that this works proves that the degree of compatibility is really high.

It is, otherwise it would not be declared as a CSS superset. Still 1000 incompatibilities (of infinite language feature combinations in total) is a myriad. (It does not mean you'll ever face more than two or three of them though. Just like most of average users will never face @import url("data:text/css;base64,Ym...).

Could you name a couple please?

A quick walk through issues here could give some ideas (it's too tedious to build a list for even two or three when each sounds like

"Parser ignores strings at an unknown at-rule prelude (thus failing at { and ; there)"

or longer).