Error when adding duplicate identifiers in CSS objects

[kiastorm]

Bug report

Describe the bug

Doing a 100vh fix based on this article, https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/ , and trying to put two rules , as instructed, I get an error.

An object literal cannot have multiple properties with the same name in strict mode.ts(1117)
Duplicate identifier 'minHeight'.ts(2300)

To Reproduce

stitchesConfig.globalCss({
  body: {
    margin: 0,
    minHeight: '100vh',
    minHeight: '-webkit-fill-available',
  },
  html: {
    height: '-webkit-fill-available',
  },
});

Expected behaviour

I'm not sure why this is required, but in this scenario I'd expect to be able to pass an array in order to set multiple rules for a single CSS property. Similar to: '@font-face': [{}, {}, {}], I'd expect to be able to do :

body: {
  minHeight: ['100vh', '-webkit-fill-available']
}

Screenshots

[peduarte]

Thanks for raising this issue. Unfortunately, that's a limitation of the JS object syntax.

With the styled/css APIs, we allow n Style Objects arguments. That way, you can pass them as separate args and Stitches will merge them for you:

const Button = styled('button', { minHeight: '100vh' }, { minHeight: '-webkit-fill-available' })

But the globalCss function only accepts one. I'm thinking whether it's a good idea to allow n as well.

Would that be a good solution for you?

Meanwhile, if you need this to work today, you can do:

globalCss({
  body: {
    // hack into the object string as raw CSS
    minHeight: '100vh; min-height: -webkit-fill-available;' 
  }
})

Note: styled-components allow infinite args for their global css API https://codesandbox.io/s/funny-frog-txtcm?file=/src/App.tsx

/cc @jonathantneal

[kiastorm]

const Button = styled('button', { minHeight: '100vh' }, { minHeight: '-webkit-fill-available' })

globalCss({
  body: {
    // hack into the object string as raw CSS
    minHeight: '100vh; min-height: -webkit-fill-available;' 
  }
})

These make sense and work for me, thanks! And yeah I think n style object arguments for the globalCSS function makes sense, so that I could use the former solution instead of the latter

EDIT: Accidentally closed, reopening for your proposed globalCss solution

[jonathantneal]

I’m open to supporting n styles in globalCss. I’ve made a PR here for folks to review, should we want this. #762

[peduarte]

Hi! This has been released to Stitches v1.1.0

yarn add @stitches/react@latest
# or
npm install @stitches/react@latest