Need help with an issue on my phx_component_helpers library

Questions / Help
,
1

Hi there :wave:

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. :exploding_head:

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 :red_circle: If I use it and extend its style with bg-blue the resulting CSS will be border border-gray bg-blue :large_blue_circle:

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?

:pray:

1 Like
2

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.

1 Like
3

Sounds wise indeed! :owl:
Let’s see what other folks might think of this feature :thinking:

4

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"]}/>
1 Like
5

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.

1 Like