ParseError: Unrecognised input in with « DIV { width: 500px\9 } »

[harobed]

Parsing success with :

DIV {
    width: 500px\9;
}

ParseError: Unrecognised input in with :

DIV { width: 500px\9 }

You can found this syntax in https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

[seven-phases-max]

Yep, this was mentioned in #284. But I think this should be considered as a bug since
500px\9 is actually a valid CSS syntax with just an invalid value (for "standard" browsers it's equal to 500px? hence they simply ignore it) so technically Less should pass it.

[lukeapage]

@harobed you should also be importing the source less inside bootstrap, not the output css

[seven-phases-max]

@lukeapage there're a few reasons one may want to import compiled Bootstrap files and not its Less sources. In particular for the moment it's the only way to get bootstrap classes wrapped with namespace/prefix (e.g. .bs {@import (less) 'bootstrap.css';} or extend certain dynamically generated classes (since those can't be extended within Less sources).
Though for these particular cases importing non-minified bootstrap.css would be equal and it will be processed by Less just fine (since width: 500px\9; there compiles as expected). So I guess this one can be considered more like an aesthetic issue.

[lukeapage]

Fair enough, @harobed may have a good reason to need to do it.
I don't disagree we should fix it..

[lukeapage]

However, it does parse with the unminified version...
One way round this would be to make anonymous value work without a semi-colon.

[lukeapage]

Tried and failed to get this working with anonymous value.

I had this..

                var match = parserInput.$re(/^([^@+\/'"*`(;{}-]*)(;|(?=\}))/);
                if (match) {
                    return new(tree.Anonymous)(match[1].trim());
                }

but then it changes the whitespace workings a bit. Also got the below, but that didn't work.

                var match = parserInput.$re(/^(([^@+\/'"*`(;{}-\s]+|\s*?)+?)\s*(;|(?=\}))/);
                if (match && match[3]) {
                    return new(tree.Anonymous)(match[1]);
                }

Hope that helps a future implementor (or myself if I pick it back up again)

[likethegoddess]

@lukeapage Would you clarify "@harobed you should also be importing the source less inside bootstrap, not the output css"? I'm new to Less and having the same issue with \9 in a WordPress Bootstrap theme I'm building. Is this a workaround?

[seven-phases-max]

@harobed Bootstrap Less sources have only \9; or escaped ~'\9' and these statements are compiled by the compiler just fine... So it solely depends on what and how you're actually trying to compile.

[likethegoddess]

I see. My theme dev folder has two children, src and public. Bootstrap is at src/less/bootstrap with my custom Less files in src/less. From my theme dev folder, I compile with lessc src/less/style.less public/style.css

This worked fine till recently. I installed clean-css, then uninstalled. Then compiling started throwing the error on \9. I worked with the npm folks and it appears I have a clean uninstall, so that shouldn't be the issue.

Any ideas would be appreciated.

[seven-phases-max]

@likethegoddess

Then compiling started throwing the error on \9.

The error message and the corresponding lines it points to are usually helpful.

[likethegoddess]

Yes, of course. Pardon the omission.

I reinstated my most recent style.less and compiling is working again.

Thank you for your time, @seven-phases-max.

[ekoneko]

Now
DIV { left: 500px\9 }
is ok, but
DIV { left: -500px\9 }
still failed

[machiaveli88]

#1538 has been an issue for me while importing bootstrap4 css as less reference (bootstrap4 has no less dist any more).

@import (less, reference) "~bootstrap/dist/css/bootstrap.css";

 @ /node_modules/bootstrap/dist/css/bootstrap.css (line 4475, column 31)
 near lines:

   @media screen and (min-width: 0\0) {
     .progress {

This really seems like a bug, any estimate when this could get a fix @seven-phases-max @lukeapage ? Thanks!