Values for the non-standard properties being set as numbers becomes as string with `px` concatenated in output

[ltclmbdev]

so the next code:

className={`
    no-underline black db overflow-hidden
    ${css({
        display: '-webkit-box',
        '-webkit-line-clamp': 2,
        '-webkit-box-orient': 'vertical',
        [bpMinSM]: {
            '-webkit-line-clamp': 1,
         },
     })}
`}

outputs to:

    display: -webkit-box;
    -webkit-line-clamp: 2px;
    -webkit-box-orient: vertical;

Which is not correct for sure (because of px concatenated).

Am I doing something wrong?

[bot19]

having the same issue with z-index: className={css({ "z-index": 11000 })}

Also tried it with "11000" - still same issue.

[khamiltonuk]

We had the same problem and put it directly on the element

<p style={{ ‘-webkit-line-clamp’: ‘2’ }}>
          "hello mum "
</p>

I am sure there must be a better solution, but leaving this here to help anyone else,

[khamiltonuk]

similar to https://github.com/threepointone/glamor/issues/388

[eatoncns]

Giving this a bump as I have also encountered the problem with z-index. In case anyone else hits this a key of zIndex works fine