Parity with Reagent for style values

[paintparty]

Another request for feature parity with reagent... This kind of thing might make it easier for individuals and teams who have existing reagent projects to adopt Stylefy.

Both of the examples below are valid in reagent:

{:style {:width 21}}  ;css -> {width: 21px}

{:style {:width :21px}}  ;css -> {width: 21px}

It would be nice to have the implicit px conversion (first example above) along with the garden style shorthand syntax that I believe Stylefy automatically supports. For example {margin: [[10 20]]}.

There is at least a couple cases (font-weight, order, etc.) where passing an integer does NOT result in an implicit conversion to "px" (which is correct in these cases). But I'm not sure if Reagent is doing this or it just happens in React.

{:style {:font-size 300 :order 2}}  ;css -> {font-weight: 300; order: 2}

[Jarzka]

I'm not 100% sure what you mean by using {:style {:width 21}} with stylefy. Let's make things clear:

When you call use-style and give a style map as the first argument, it is converted to CSS by Garden (excluding special ::stylefy keywords which are handled internally). This means that all syntax that is valid in Garden, is also valid in stylefy, and vice versa.

The second param of use-style accepts HTML attributes. However, it does not accept :style keyword and raises and error if you try to use it. This was a design choice, made of two reasons:

• It is not clear what you mean if you call use-style with both style map being the first argument, and some extra styles passed in the option map via style keywords.
• Internally, if the style is put in queue to be converted asynchronously to CSS, use-style hides the component for a few milliseconds by returning {:style {:visibility :hidden}}. Thus, stylefy needs the ability to change the contents of the returned inline style if needed.

You can, of course, pass inline styles to Hiccup elements "the old way" via :style attribute, without using use-style. If you do this, the syntax is handled by Reagent and it's not anymore related to stylefy or Garden. So I think there is a clear difference here between "old" inline styles and stylefy/Garden style maps. Thus, I would keep stylefy style maps syntactically compatible with Garden (excluding the special ::stylefy keywords, but even those are converted to CSS by Garden in the end).

[paintparty]

Thanks for reply and sorry if example^ wasn't clear.

I just had this in mind:

(use-style {:width 21})

This syntax^ might be something that a dev familiar with writing inline styles in reagent would be accustomed to. The thing I like about Stylefy is that it is not too much of a stretch from writing inline styles (in Reagent), and it doesn't really require the dev to know about or learn garden & it's syntax. So potentially easier for existing projects/teams to adopt vs other similar solutions. But if you don't want to stray from garden-compatible syntax that's cool.

[Jarzka]

Yeah, that would be convenient, but I would still prefer keeping the style maps fully compatible with Garden. 😊

Of course, if you really want this feature, you can always wrap your style maps, or the whole use-style function, in your own helper function which handles the unitless values before calling stylefy/use-style