Object styles with line clamp adding 'px'

[jschr]

emotion version: 8.0.12
react version: 16.0.0

Relevant code.

css({ 
  WebkitLineClamp: 4 
})

What happened:

{
  -webkit-line-clamp: 4px;
}

Expected:

{
  -webkit-line-clamp: 4;
}

Reproducible:
https://codesandbox.io/s/430pkxw90x

Workarounds:

css`
  -webkit-line-clamp: 4;
`

css({
  ' -webkit-line-clamp': 4
})

^ note the first space before the -.

[TrySound]

@jschr You may use string literal '0'. Emotion just adds px to numbers.

[jschr]

@TrySound That unfortunately doesn't work either: https://codesandbox.io/s/302vqy3w6p.

Looks like emotion makes an exception for lineClamp but this needs to be WebkitLineClamp. Happy to submit a PR if that's the correct fix.

[tkh44]

I'd be happy to accept a PR 👍 Please make sure to add a small test for this.

[jennyvallon]

For anyone still experiencing this issue if you are not using the most up to date emotion package, wrap the value in calc The above workarounds did not work for me.

[steevsachs]

I am still running into this with @emotion/css 11.1.3. Passing as a string works around the behavior but fails typecheck. Is this a regression, or are types potentially just wrong?

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[steevsachs]

Apologies, this was my misunderstanding, I was attempting to use regular line-clamp which I think is probably in too early support to be considered here; WebkitLineClamp as described in this issue functions as expected.