Margin and Padding lower than 9px powers its value when using sx or styled

In our project, we’re using dripsy within a styles.ts file theming everything with styled similar to styled-components. ex:

import { styled } from 'dripsy'
import { Text, View } from 'react-native'

export const Container = styled(View)((_props) => ({
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#e03d26',
  borderRadius: 5,
}))

But when I set margin or padding the final code get it’s value powered (happens on Next and Expo), examples:

Example 1

Padding with 8px using styled()

Code (8px):

export const Container = styled(View)((_props) => ({
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#e03d26',
  borderRadius: 5,
  padding: 8
}))

Browser (512px which is 2⁹):

Example 2

Padding with 7px using dripsy <View/> with sx:

Code (7px):

import { View } from 'dripsy'
import { Title } from './styles'

const Button = ({ title }: { title: string }) => {
  return (
    <View
      sx={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e03d26',
        borderRadius: 5,
        padding: 7,
      }}
    >
      <Title>{title}</Title>
    </View>
  )
}

Browser (256px wich is 2⁸)

Example 3 - Works as Expected

Padding with 9px using styled()

Code(9px):

export const Container = styled(View)((_props) => ({
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#e03d26',
  borderRadius: 5,
  padding: 9
}))

Browser (9px):

[nandorojo]

Oof, I see the issue:

Looks like we set the default space for you. So you can fix it with the comment above. I think this code is pulled over from theme-ui, and since everyone always overrides it, it’s never been an issue until now.

It would be a breaking change to remove this, but I can do it in the next release. For now, if you explicitly set space in your theme, it will solve this.

[nandorojo]

I recommend doing this:

const theme = makeTheme({
  space: {
    $0: 0,
    $1: 4,
    $2: 8,
    $3: 16,
    $4: 32,
    $5: 64,
    $6: 128,
    $7: 256,
    $8: 512
  }
})

And then:

<View sx={{ pr: '$3' }} />