search

threepointone / glamor

inline css for react et al
MIT License
3.66k stars 199 forks source link

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

Open ltclmbdev opened 6 years ago

ltclmbdev commented 6 years ago

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;

123

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

Am I doing something wrong?

bot19 commented 4 years ago

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

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

khamiltonuk commented 4 years ago

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 commented 4 years ago

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

eatoncns commented 4 years ago

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