Type 'string' is not assignable to type 'BoxSizing' after styled update from 11.11.0 to 11.11.5

[maciejwitwicki]

Current behavior:

React project has a compilation error when creating a div with boxSizing property using string value

 Types of property 'boxSizing' are incompatible.
              Type 'string' is not assignable to type 'BoxSizing | readonly NonNullable<BoxSizing | undefined>[] | readonly BoxSizing[] | undefined'.

To reproduce:

Create component that has boxSizing property defined with string 'content-box'

const CardInputContainer = styled.div(() => ({
  boxSizing: 'content-box',
}))

Expected behavior:

Project compiles

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.11.3

[cofenster-micha]

I'm running into the same issues.

Environment information:

• react version: 19.0.0
• @emotion/react version: 11.14.0
• @emotion/styled version: 11.14.0

import styled from '@emotion/styled';

export const FullSizeFlexContainer = styled('div')(() => ({
  display: 'flex',
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
}));

TypeScript error reported:

Types of property 'position' are incompatible.
    Type 'string' is not assignable to type 'Position | NonNullable<Position | undefined>[] | readonly Position[] | undefined'.ts(2769)

Adding as const fixes the issue, but I'd have to apply this change to hundreds of files.

import styled from '@emotion/styled';

export const FullSizeFlexContainer = styled('div')(() => ({
  display: 'flex',
  position: 'absolute' as const,
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
}));

or

import styled from '@emotion/styled';

export const FullSizeFlexContainer = styled('div')(
  () =>
    ({
      display: 'flex',
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    }) as const
);