Inconsistent output of `r` if no units are specified about griffel HOT 4 CLOSED

TL;DR It's not a problem in Griffel.

I forked CodeSandbox and have done the same with plain CSS, https://codesandbox.io/s/brave-resonance-fcx04n?file=/src/App.js.

Chrome

Firefox

According to MDN:

For properties defined in CSS2, a length unit identifier must be provided. For length values in SVG-specific properties and their corresponding presentation attributes, the length unit identifier is optional.

https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#length

This looks like a bug in Firefox. Feel free to report it 😉

from griffel.

@layershifter there's also the separate issue with Firefox, but the problem with Griffel is that the r value is not compiled into CSS at all in Firefox, which makes the issue quite difficult to debug. It'd be ideal if the experience with an element using styles compiled by griffel were exactly the same as in your codesandbox.

from griffel.

@smhigley Griffel generates the same CSS in all browsers and tries to insert it. The problem comes from .insertRule() behavior - invalid rules (from browser's POV) are not inserted, there is nothing that we can do to solve it (using CSS extraction #53 potentially improves it as experience will be the same as with CSS).

Minimal example: https://codesandbox.io/s/kind-rosalind-teiu3m?file=/src/index.js

Chrome

Firefox

from griffel.

@layershifter that makes sense, thanks! Yeah, the CSS extraction would be nice, and in the meantime logging the output to the console works ¯_(ツ)_/¯

from griffel.