::-webkit-scrollbar-* are ignored by v1.3.3

[hozumi]

Hi,
I recently upgraded less from 1.1.5 to 1.3.3, and found that ::-webkit-scrollbar-* style doesn't work.
I tested following style in "client-side" usage.

.webkit-scrollbar-gray {
    overflow-y: scroll;
    ::-webkit-scrollbar {
        width: 10px;
        height: 16px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(155, 155, 155, 0.5);
        -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(255,255,255,0.07);
    }
    ::-webkit-scrollbar-button {
        width: 0;
        height: 0;
        display: none;
    }
    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }
}

Please let me know if I am missing something.
Thanks.

[lukeapage]

your example compiles fine in the browser (www.less2css.org) and in node. so it must be something else causing the problem...

[hozumi]

Hi,
The results you mentioned seems no problem.
But this issue is caused by changing only less version.
I tried all recently released less, and found that this issue appears after this commit.
5ccf1da

[lukeapage]

yes, but it is something else in your source causing the problem.

What error do you get?

Can you try and cut down what in your source is causing the problem and put it in here, or add a link to it?

[hozumi]

Here is a source.
https://gist.github.com/4632625
Thanks.

[lukeapage]

that source compiles fine. whats wrong with the output?

[hozumi]

I haven't tried pre compile usage. The issue occurred in client-side usage.

<link href="/less/top.less" rel="stylesheet/less" type="text/css">
<script src="/js/less-1.2.2.js" type="text/javascript">

[lukeapage]

I am trying on www.less2css.org which uses the browser version.

What is going wrong?

[hozumi]

Here is the issue reproduce environment and procedure.

git clone https://gist.github.com/4632924.git
cd 4632924
npm install connect
node server.js

http://localhost:1337/index121.html   <= ok
http://localhost:1337/index122.html  <= ng

Thanks.

[hozumi]

I found that the issue is caused by white space which is added by 5ccf1da .

v1.2.1 generate following css, which does work.

.webkit-scrollbar-gray::-webkit-scrollbar {
  width: 10px;
  height: 16px;
}

After 5ccf1da , following css is generated and seems invalid.

.webkit-scrollbar-gray ::-webkit-scrollbar {
  width: 10px;
  height: 16px;
}

I guess the space between classname and ::-webkit-scrollbar is invalid.

[lukeapage]

the space is intentional.

to generate without spaces, use & e.g.

.webkit-scrollbar-gray {
    &::-webkit-scrollbar {
        height: 4px;
    }
}

this bug fix was made in 1.1.5, which is why I couldn't see any different comparing the code. I don't know how you got 1.2.1 to add the extra space, but the above is the way to fix it if you don't want one.

[hozumi]

&::-webkit-scrollbar does work! I didn't know & trick.

this bug fix was made in 1.1.5

5ccf1da was made after v1.2.1 and released in v1.3.0, wasn't it?

Anyway, thank you for taking your time to answer this problem. I appreciate your help.