feature: allow same parsing of `style` attributes as for `class`
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
Research direction
Read lib/phoenix_html.ex at the class-binding handling and lib/phoenix_html/safe.ex around line 80 to compare how class and style values are normalized. Locate the existing rendering tests and verify the intended conditional-value behavior; done means style lists accept discarded nil or false values without weakening safe output.
Written by the indexing model from the issue text.
Description
As described by this comment it is possible to write expressions like the following for class bindings as false and nil values are discarded:
<div class={["my-class", @foo? and "my-class--modifier"]}>
...
</div>
This is great because it allows developers to easily implement additional css classes if a condition is true and otherwise it will just be discarded. However the same behaviour doesn't work for the style attribute:
<div style={["--my-target: 100", "--my-value: 50", @label and "--label: #{@label}"]}>
...
</div>
This raises the argument error (from here)
lists in Phoenix.HTML and templates may only contain integers representing bytes, binaries or other lists, got invalid entry: nil
Given the flexibility that CSS custom properties offers I think it would be a great addition to the syntax.
Current workaround to this issue would be to write it as the following (which doesn't read as good and looks more complex than needed to be):
<div style={["--my-target: 100", "--my-value: 50", (if @label, do: "--label: #{@label}", else: "")]}>
...
</div>
Is there any security concern in play here or would this be an easy addition?
Thanks
- Dominant language
- Elixir
- Stars
- 467
- Forks
- 228
- Avg merge
- 1h 24m
- Merged PRs (30d)
- 1
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from phoenixframework/phoenix_html
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
phoenixframework/phoenix_html#416 · 12 comments · 1 reaction ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 45/100
phoenixframework/phoenix_html#284 · 4 comments · 1 reaction ·
All issues in phoenixframework/phoenix_html
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
phoenixframework/phoenix#6847 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
beyond-all-reason/teiserver#1584 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
ash-project/ash#2954 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
membraneframework/boombox#149 ·