CSS in JS base styles

base.css

html {
    box-sizing: border-box;
    font-size: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-font-smoothing: antialiased;
    -mox-osx-font-smoothing: grayscale;
    text-rendering: optimize-legibility;
}

base.js

const base = () => ({
  html {
    boxSizing: 'border-box',
    fontSize: '100%'
  },

  [`*, *:after, *:before`] {
    boxSizing: inherit
  },

  body {
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    '-webkit-font-smoothing': 'antialiased',
    '-moz-osx-font-smoothing': 'grayscale',
    textRendering: optimizeLegibility
  }
})

export default base