Compiled css vs scss - different rem units precision

[sdurnov]

Describe the bug

When Clarity styles are being compiled from scss during build process, rems are much more precise than when compiled css are used. That leads to some rendering differences. For instance, text and dismiss button in alerts is shifted 1px vertically for pre-compiled css.

How to reproduce

PrntScreen closable alert from Clarity website and compare it to Clarity Light Theme Blitz with same alert example code put into it. You'll see 1px difference in vertical position of text and dismiss button.
Then go into browser dev tools, select close button in both cases and see that Clarity website code shows more decimal digits for rem units than compiled css example.

Expected behavior

Both scss and comiled css styles shoud have identical precision

[sdurnov]

Clarity Website https://clarity.design/documentation/alerts

Light theme Blitz, where I just pasted code from website example

Check out how precision is different for margins

[sdurnov]

Looks like this is not css vs scss, maybe this is related particularly to your site build process

[gnomeontherun]

Thanks for bringing this up, I'll review it but yes we do change the default precision in our build of @clr/ui, and the new website doesn't appear to have that same setting turned on. Should be a simple fix but will need to look closer to verify.

[sdurnov]

@gnomeontherun if understood you correctly, you'll increase css/scss precision for Clarity sources, rather than decreasing it for a website? It would be awesome.

[gnomeontherun]

I have to check, but what we need to do is ensure they are the same precision so the website builds the sass files the same way.

[gnomeontherun]

So I'm not seeing a real world difference between a stackblitz demo of the card alert rendering and the website example. There are 2 decimal places more precision in the website build than the official Clarity build. However more precision is alright and we can standardize at 8 I believe.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.