New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support both object and string as value for style attribute. #756

Closed
rbiggs opened this Issue Sep 4, 2018 · 7 comments

Comments

5 participants
@rbiggs
Contributor

rbiggs commented Sep 4, 2018

In both Hyperapp and Superfine the only way to apply an inline style is by providing a object. This is great if you need to create CSS values dynamically from code. But most of the time I'm just applying some simple styles, no need to calculate anything. Supporting both would only require a minor change to how to set the style attribute in updateAttribute:

// line 161:
} else if (name === "style" && style !== 'string') {

Then you could use:

<div style='color:red; padding: 5px;'></div>

or:

<div style={{color: 'red',  padding: '5px'}}></div>

Maybe it's just me, but I feel its easier to type out a string for styles than creating an object inline.

@jorgebucaran jorgebucaran added the Feature label Sep 4, 2018

@frenzzy

This comment has been minimized.

Show comment
Hide comment
@frenzzy

frenzzy Sep 5, 2018

Contributor

We have two PR about it: #675 and #676
You also may use style={{ cssText: 'color:red; padding: 5px;' }}

I thought this feature would be very useful when you want to render svg as jsx - no need to convert manually a lot of style attributes. But later I come up with solution: always convert inline styles into svg attributes using SVGO. For example: <path style="fill:red" /> to <path fill="red" /> etc.

Contributor

frenzzy commented Sep 5, 2018

We have two PR about it: #675 and #676
You also may use style={{ cssText: 'color:red; padding: 5px;' }}

I thought this feature would be very useful when you want to render svg as jsx - no need to convert manually a lot of style attributes. But later I come up with solution: always convert inline styles into svg attributes using SVGO. For example: <path style="fill:red" /> to <path fill="red" /> etc.

@zaceno

This comment has been minimized.

Show comment
Hide comment
@zaceno

zaceno Sep 5, 2018

Contributor

I second this request. Supporting both strings and objects for the style attribute would be 💯 (And it would be analog to building in classcat support in the class attribute, where class as string-list and object would both work)

Now that hyperapp isn't quite so size focused anymore, it shouldn't be a problem (although the implementation is tiny anyway)

Contributor

zaceno commented Sep 5, 2018

I second this request. Supporting both strings and objects for the style attribute would be 💯 (And it would be analog to building in classcat support in the class attribute, where class as string-list and object would both work)

Now that hyperapp isn't quite so size focused anymore, it shouldn't be a problem (although the implementation is tiny anyway)

@jorgebucaran jorgebucaran added this to the V2 milestone Sep 7, 2018

@jorgebucaran

This comment has been minimized.

Show comment
Hide comment
@jorgebucaran

jorgebucaran Sep 7, 2018

Owner

@rbiggs Let's do it then! 🎉

Owner

jorgebucaran commented Sep 7, 2018

@rbiggs Let's do it then! 🎉

@rbiggs

This comment has been minimized.

Show comment
Hide comment
@rbiggs

rbiggs Sep 7, 2018

Contributor

Yay!!! 🎉🌈🍻To be honest, I've been hacking Hyperapp and Pico-ultra-superfine since forever to support this feature.

Contributor

rbiggs commented Sep 7, 2018

Yay!!! 🎉🌈🍻To be honest, I've been hacking Hyperapp and Pico-ultra-superfine since forever to support this feature.

@infinnie

This comment has been minimized.

Show comment
Hide comment
@infinnie

infinnie Sep 7, 2018

Contributor

#Everybody be hacking his own

Contributor

infinnie commented Sep 7, 2018

#Everybody be hacking his own

@jorgebucaran

This comment has been minimized.

Show comment
Hide comment
@jorgebucaran

jorgebucaran Sep 7, 2018

Owner

You should be able to use a string or an object to set the style attribute of an element now!

With a string
const viewRed = state => <div style="color:red;">Consider it done!</div>
With an object
const viewRed = state => <div style={{ color: "red" }}>Consider it done!</div>
Owner

jorgebucaran commented Sep 7, 2018

You should be able to use a string or an object to set the style attribute of an element now!

With a string
const viewRed = state => <div style="color:red;">Consider it done!</div>
With an object
const viewRed = state => <div style={{ color: "red" }}>Consider it done!</div>

Repository owner locked as resolved and limited conversation to collaborators Sep 7, 2018

@jorgebucaran jorgebucaran removed this from the V2 milestone Sep 7, 2018

@jorgebucaran

This comment has been minimized.

Show comment
Hide comment
@jorgebucaran

jorgebucaran Sep 8, 2018

Owner

I removed this issue from the V2 milestone as I don't think I will be bringing this feature over to V2. I was too eager to resolve this issue and didn't pay it enough attention. It's all my bad, @rbiggs was simply submitting a feature request. 🙇

I don't see how this feature could be seen as superior to current object syntax, so I am not compelled to have this added to V2.

Owner

jorgebucaran commented Sep 8, 2018

I removed this issue from the V2 milestone as I don't think I will be bringing this feature over to V2. I was too eager to resolve this issue and didn't pay it enough attention. It's all my bad, @rbiggs was simply submitting a feature request. 🙇

I don't see how this feature could be seen as superior to current object syntax, so I am not compelled to have this added to V2.

@jorgebucaran jorgebucaran added the Wontfix label Sep 8, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.