You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm here because I was creating a library that sorts classes based on the structure of classes. I ran into a problem.
I was trying to use a regex to break apart the strings for this library.
But it could not work at all. Because of this conflict
bg-primary-hover
bg-md-primary-hover
This group (?<breakpoint>-[a-z]+) will capture. both md for bg-md-primary-hover and primary for bg-primary-hover.
In order for me this test to pass you need to have a symbol in front of md.
I suggest @ as in @md but it's your choice.
Context
I'm trying to create a library that removes classes with duplicate class types and different values from the string.
It's an alternative to tailwind merge that is supposed to be framework agnostic. But due to the many frameworks out there
I have to pluck out different kinds of class strings using different methods.
This library uses clsx to evaluate classes then it breaks them apart using an object with maps.
The maps only contain one class type bgg-col state -hover-focus and breakpoint -md.
If two classes fits one or more of these conditions the one that comes later stays the one that comes after goes away.
Finally after the classes are sorted the map is used to reassemble the classes that were broken into the map.
If you want to learn about my project or this problem in depth please look into. cn-efs tailwind-merge
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I'm here because I was creating a library that sorts classes based on the structure of classes. I ran into a problem.
I was trying to use a regex to break apart the strings for this library.
/^(?<type>[a-z]+|[a-z]+-[a-z]+)(?<breakpoint>-[a-z]+)-(?<value>[a-z0-9]+)(?<state>-[a-z]+)?$/
But it could not work at all. Because of this conflict
This group
(?<breakpoint>-[a-z]+)
will capture. both md forbg-md-primary-hover
and primary forbg-primary-hover
.In order for me this test to pass you need to have a symbol in front of md.
I suggest
@
as in@md
but it's your choice.Context
I'm trying to create a library that removes classes with duplicate class types and different values from the string.
It's an alternative to tailwind merge that is supposed to be
framework agnostic
. But due to the many frameworks out thereI have to pluck out different kinds of class strings using different methods.
This library uses
clsx
to evaluate classes then it breaks them apart using an object with maps.The maps only contain one class type
bg
g-col
state-hover
-focus
and breakpoint-md
.If two classes fits one or more of these conditions the one that comes later stays the one that comes after goes away.
Finally after the classes are sorted the map is used to reassemble the classes that were broken into the map.
If you want to learn about my project or this problem in depth please look into.
cn-efs
tailwind-merge
Beta Was this translation helpful? Give feedback.
All reactions