Can someone explain this 'px' here

[andelkocvjetkovic]

react-toastify/scss/_toastContainer.scss

Line 3 in 80bf024

-webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);

[shikhar360]

The pixel in the end indicate that the value of the --toastify-z-index will be measured in pixels . It is just normal css like (transform : translateX(50px)) , instead here we have used -webkit-transform with translate3d which takes 3 arguments x ,y , z axis.

[andelkocvjetkovic]

So this is the same ?

[fkhadra]

@andelkocvjetkovic indeed.

[andelkocvjetkovic]

I wouldn't say so https://codepen.io/andelkocvjetkovic/pen/JjaMRYw

[andelkocvjetkovic]

I think this is a bug in the css file, because this is not valid css.

[fkhadra]

@andelkocvjetkovic actually you're right, I don't remember where this px is coming from. Fixing it in my current PR. Thanks for spotting it

[andelkocvjetkovic]

glad to help, your lib is pretty awesome 👍

[xsjcTony]

Removing px seems still doesn't make it a valid CSS from my perspective, as translate3d(0, 0, 100) (assume it's 100) in this case without a unit does totally nothing right?
The variable is intended to be used for z-index so it won't have a unit, hence it won't work in translate
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
https://developer.mozilla.org/en-US/docs/Web/CSS/length