Fix handling of dynamic className in tailwind input

[cleobnvntra]

Description

Fixes #799

• Added logic to display a warning message when dynamic variables are used in className.
• Displays Tailwind classes if no dynamic variables are present in the template literal.
• Shows a button in the UI to navigate to the relevant templateNode source code when dynamic variables are used.
• Updated the button name to improve user clarity.

With template literals

Now properly displays Tailwind Classes even if template literals were used, but no dynamic variables were used.

Selected div for reference:

<div
  className={`w-full min-h-screen flex items-center justify-center bg-red-50 relative overflow-hidden flex-col`}
  data-oid=":gge2lo"
>
// ...
</div>

Tailwind Classes textarea:

Template literals with dynamic variables

Selected div for reference:

const someClassName = "text-center text-gray-900 relative z-10";

<div className={`m-8 p-8 ${someClassName}`} data-oid="adqx-me">
// ...
</div>

Tailwind Classes textarea:

As asked, clicking the Go to source button in the textarea brings the user to the relevant template node in the source code.

What is the purpose of this pull request?

• New feature
• Documentation update
• Bug fix
• Refactor
• Release
• Other

[Kitenite]

This is great! You got the core of the application down at this point. Just a few suggested improvements. Lmk what you think :)

[Kitenite]

We could also return an error straight from here since we're only handling classes. Everything else passes through.

[cleobnvntra]

I reformatted the code into:

    if (
        t.isJSXExpressionContainer(classNameAttr.value) &&
        t.isTemplateLiteral(classNameAttr.value.expression)
    ) {
        const templateLiteral = classNameAttr.value.expression;

        // Immediately return error if dynamic classes are detected within the template literal
        if (templateLiteral.expressions.length > 0) {
            return {
                type: 'error',
                reason: 'Dynamic classes detected. Dynamic variables in the className prevent extraction of Tailwind classes.',
            };
        }

        // Extract and return static classes from the template literal if no dynamic classes are used
        const quasis = templateLiteral.quasis.map((quasi) => quasi.value.raw.split(/\s+/));
        return {
            type: 'classes',
            value: quasis.flat().filter(Boolean),
        };
    }

This allows the code to exit the block early if it is an error (dynamic classes are used).
I am unsure if this is exactly what you meant. Can you please clarify further if I misinterpreted it? :)

[Kitenite]

This works great, thanks!

[Kitenite]

Hey this is working great! Gonna be super helpful since this is a super common occurrence.

I just did some refactoring and moved the error reason outside of the classes value object so it doesn't interfere with edit history. Nice work!