Size shorthand is overwriting an existing CSS property

I was mighty confused why my printing stylesheet wasn’t working, until I finally discovered that the size property was being replaced with width and height.

size is a property used for defining @page size

I might recommend wh as a shorthand instead, as it describes the format of the string to be passed, is shorter, and is generally more descriptive than size. On top of not conflicting with an existing property.

[thecrowkeep]

Opt out of shorthands with css prop.

This is certainly helpful, though @page is meant to be used in the root styles, so currently the only workaround I’m aware of is:

<Global
	styles={() => ({ '@page': { size: '4in 6in landscape' } }) }
/>

[hasparus]

A workaround to use until we figure out how to solve this:

Opt out of shorthands with css prop. Style objects you pass to css go directly to Emotion, so we’re not transforming the shorthand.

Edit: Better workaround in thecrowkeep’s post below ⬇