Stitches: zero value in hsl can not add style

[taneba]

First of all, thank you for the awesome library.

I found a strange bug with stitches.

If you have color settings of tailwind.config.js like

      colors: {
        electric: '#db00ff',
        ribbon: '#0047ff',
        cust: {
          cust1: 'hsl(0 0% 0% / 0.071)',
          cust2: 'hsl(194 99.6% 47.7% / 0.165)',
        },
      },

and in IndexPage (i'm using next-** boilerplate in twin.example):

const IndexPage = () => (
  <div>
    <h1 tw="text-ribbon">HI</h1>
    <h1 tw="text-cust-cust1">HI</h1>
    <h1 tw="text-cust-cust2">HI</h1>
  </div>
)

Here, text-cust-cust1 and text-cust-cust2 work with emotion. But with Stitches, text-cust-cust2 doesn't work.

emotion:

stitches:

So basically it seems that with stitches it couldn't generate proper css value when hsl has 0-ish value.

repro: https://github.com/taneba/twin.examples/tree/repro-stitches-hsl

cc: @peduarte

[peduarte]

I have created a minimal reproducible example here: https://codesandbox.io/s/gallant-ives-zp7c3?file=/src/App.tsx

can you please validate it for me? just to check if it's a stitches issue or not.

[taneba]

Thanks @peduarte for taking your time! I've add twin.macro and reproduced the issue. I think it's not a stitches issue but twin.macro (though it only occurs in use with stitches).

https://codesandbox.io/s/amazing-zhukovsky-mwros?file=/src/App.tsx

[ben-rogerson]

Closing due to lack of activity