Skip to content

Any ways to combine e() with cn() orclsx() ? #4

@aimryoui

Description

@aimryoui

First, thanks for creating this plugin! It's nearly 90% perfect for me. ✨

Why 90%:

className={cn(
    fonts.Gilroy_Sans.variable,
    fonts.Sf_Mono.variable,
    "relative h-fit !scroll-smooth bg-mega-background",
    e({
        all: "focus:outline-none",
        selection: "bg-zinc-400/40 text-mega-secondary text-shadow-none"
    })
)}

I use cn() because although the results of fonts.Gilroy_Sans.variable and fonts.Sf_Mono.variable are "string" (see below), but in the TW transform time, it's a variable, so e() will be failed when parsing the object with those two (I mean just the object's styles was not created, the string and fonts are ok), when delete 2 font variables, it works like normal.

Infact, this is enough for me, but I want to try to ask if we can do something like:

import * as fonts from "@/app/fonts"

import { clsx as cn } from "clsx"
import { e } from "easy-tailwind"

function etwind(...args) {
    const cnArgs = []
    const eArgs = []

    args.forEach(arg => {
        if (typeof arg !== "string") {
            eArgs.push(arg)
        } else {
            cnArgs.push(arg)
        }
    })

    return cn(...cnArgs, e(...eArgs))
}

// then the biggest problem of this plugin may be solved
<html className={etwind(
    fonts.Gilroy_Sans.variable, // this go to cn()
    fonts.Sf_Mono.variable, // this go to cn()
    "relative h-fit !scroll-smooth bg-mega-background", // this go to cn()
    { // but this go to e()
        all: "opacity-50",
        selection: "bg-zinc-400/40 text-mega-secondary text-shadow-none"
    }
)}>
</html>

But, what e() scanned is ...eArgs; yes, actually the string ..eArgs, not the object. Although the result when I inspect <html /> seems right, no loss classes:

class="gilroy_sans_2a70e61c-module__96ixaa__variable sf_mono_e07e9971-module__91Mg3a__variable relative h-fit !scroll-smooth bg-mega-background all:opacity-50 selection:bg-zinc-400/40 selection:text-mega-secondary selection:text-shadow-none"

Of course the style from the object, which is all:* and selection:* are not applied

I'm using Nextjs 15 with --turbo, not Webpack but I think that's not the problem. Do you have any ideas or some possible thoughts? @Noriller

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions