cblavier
Need help with an issue on my phx_component_helpers library
Hi there 
I’m the author of phx_component_helpers and I have a recurring complaint of users regarding the CSS extension feature. I’m struggling to find a solution to this issue. 
The purpose of this feature is to build components with default CSS classes and extend its classes when using the component. For instance a component can have following default style: border border-gray-400 bg-red 
If I use it and extend its style with bg-blue the resulting CSS will be border border-gray bg-blue 
We actually replace all classes from default styling having the same prefix (everything before first hyphen). It’s kinda working for a lot of cases but if you want to extend border border-2 border-orange-500 with border-red-500 it will be a little too greedy and replace all border classes resulting in border-red-500 instead of border border-2 border-red-500.
The code is right there: phx_component_helpers/css.ex at main · cblavier/phx_component_helpers · GitHub
Another case completely defeating my prefix base approach is when you use multiple Tailwind classes that deal with the same CSS properties but do not share any common prefix. For instance you may want to extend a component using block (in CSS it’s display: block;) with flex (in CSS it’s display: flex;)
It looks like I might need some specific Tailwind related code dealing with Tailwind semantics. Do you know where I could find some JSON (or so) metadata regarding the whole Tailwind CSS class hierarchy?
Any other idea?
Most Liked
cmo
My instinct would be not to do that sort of thing at all. Sounds like a lot of work for something that will be confusing and/or brittle.
Eiji
I will support something like:
<MyComponents.component cmp-color="red-500"/>
# and then
color = assigns["cmp-color"] || "orange-500"
~H"""
<span class={"border border-2 border-#{color}"}>
…
</span>
"""
plus some extras like:
# override class
<MyComponents.component class="btn btn-primary"/>
# merge base classes with theme classes
# default_comp_classes = ["border"]
<MyComponents.component theme-classes={~w[border-2 border-red-500]}/>
# or merge base classes + theme classes with extra classes
# default_comp_classes = ["border border-2 orange-red-500"]
<MyComponents.component classes={["color-red-500"]}/>
cblavier
One of a my teammates just had an idea I found clever and not too brittle (ping @cmo): extend component CSS classes with explicit class removal or additions.
A button component with following default CSS: block border border-2 border-gray-500 would be used like this:
<.button class="!block flex !border-gray-* border-blue-300"/>
The ! is used to remove classes.
So the previous example would produce flex border border-2 border-blue-300.
Popular in Questions
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"