Add tests for babel plugin

Author: dgca

packages/onchainkit/plugins/__tests__/babel-prefix-react-classnames.test.ts

@@ -0,0 +1,155 @@
+import { transformSync, PluginObj } from '@babel/core';
+import { describe, it, expect } from 'vitest';
+import { babelPrefixReactClassNames } from '../babel-prefix-react-classnames';
+
+// Helper function to transform code using the plugin
+function transform(
+  code: string,
+  options: { prefix: string; cnUtil?: string | false } = { prefix: 'prefix-' },
+): string {
+  const result = transformSync(code, {
+    plugins: [
+      [babelPrefixReactClassNames(options) as unknown as PluginObj, {}],
+    ],
+    presets: ['@babel/preset-react'],
+    configFile: false,
+    babelrc: false,
+  });
+
+  return result?.code || '';
+}
+
+describe('babel-prefix-react-classnames', () => {
+  it('should add prefix to string literal className', () => {
+    const code = '<div className="foo">Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: "prefix-foo"');
+  });
+
+  it('should handle multiple classes in string literal className', () => {
+    const code = '<div className="foo bar">Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: "prefix-foo prefix-bar"');
+  });
+
+  it('should not add prefix if already has the prefix', () => {
+    const code = '<div className="prefix-foo">Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: "prefix-foo"');
+  });
+
+  it('should handle mixed prefixed and non-prefixed classes', () => {
+    const code = '<div className="prefix-foo bar">Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: "prefix-foo prefix-bar"');
+  });
+
+  it('should handle template literals', () => {
+    const code = '<div className={`foo ${dynamic} bar`}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: `prefix-foo ${dynamic} prefix-bar`');
+  });
+
+  it('should handle identifiers by using the helper function', () => {
+    const code = '<div className={classes}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: __prefixClassNames(classes)');
+  });
+
+  it('should handle member expressions by using the helper function', () => {
+    const code = '<div className={styles.container}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: __prefixClassNames(styles.container)');
+  });
+
+  it('should handle cn utility function calls with string arguments', () => {
+    const code = '<div className={cn("foo", "bar")}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('cn("prefix-foo"');
+    expect(result).toContain('"prefix-bar"');
+  });
+
+  it('should handle cn utility function calls with template literals', () => {
+    const code = '<div className={cn(`foo ${dynamic}`, "bar")}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('cn(`prefix-foo ${dynamic}`');
+    expect(result).toContain('"prefix-bar"');
+  });
+
+  it('should handle cn utility function calls with variables', () => {
+    const code = '<div className={cn(classes, "bar")}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('cn(__prefixClassNames(classes)');
+    expect(result).toContain('"prefix-bar"');
+  });
+
+  it('should use custom cn utility name if provided', () => {
+    const code = '<div className={classNames("foo", "bar")}>Hello</div>';
+    const result = transform(code, { prefix: 'prefix-', cnUtil: 'classNames' });
+    expect(result).toContain('classNames("prefix-foo"');
+    expect(result).toContain('"prefix-bar"');
+  });
+
+  it('should handle multiple JSX elements with className', () => {
+    const code = `
+      <div>
+        <span className="foo">Span</span>
+        <p className="bar">Paragraph</p>
+      </div>
+    `;
+    const result = transform(code);
+    expect(result).toMatch(/className: "prefix-foo"/);
+    expect(result).toMatch(/className: "prefix-bar"/);
+  });
+
+  it('should handle complex nested JSX with mixed className types', () => {
+    const code = `
+      <div className="container">
+        <span className={styles.text}>Text</span>
+        <button className={cn('btn', isActive && 'active')}>Click</button>
+      </div>
+    `;
+    const result = transform(code);
+    expect(result).toMatch(/className: "prefix-container"/);
+    expect(result).toMatch(/className: __prefixClassNames\(styles\.text\)/);
+    expect(result).toMatch(/cn\("prefix-btn"/);
+    expect(result).toMatch(/isActive && "prefix-active"/);
+  });
+
+  it('should handle JSX attributes other than className', () => {
+    const code = '<div id="main" className="foo" data-test="value">Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('id: "main"');
+    expect(result).toContain('className: "prefix-foo"');
+    expect(result).toContain('"data-test": "value"');
+  });
+
+  it('should handle JSX elements without className', () => {
+    const code = '<div>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('React.createElement("div"');
+  });
+
+  it('should only transform className attributes', () => {
+    const code = '<div className="foo" style={{ color: "red" }}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('className: "prefix-foo"');
+    expect(result).toContain('style: {');
+    expect(result).toContain('color: "red"');
+  });
+
+  it('should add the helper function when needed', () => {
+    const code = '<div className={styles.container}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain('function __prefixClassNames(value)');
+    expect(result).toMatch(/typeof value === "string"/);
+  });
+
+  it('should not modify non-JSX code', () => {
+    const code = 'const foo = "bar"; function test() { return 42; }';
+    const result = transform(code);
+    expect(result).toContain('const foo = "bar"');
+    expect(result).toContain('function test()');
+    expect(result).toContain('return 42');
+  });
+});

packages/onchainkit/plugins/babel-prefix-react-classnames.ts

@@ -10,7 +10,7 @@ function prefixStringLiteral(stringLiteral: string, prefix: string) {
     // 1. Are at the start of the string (^) OR preceded by whitespace (\s)
     // 2. Don't already start with the prefix
     new RegExp(`(^|\\s)(?!${prefix})(\\S+)`, 'g'),
-    `$1${prefix}$2 `,
+    `$1${prefix}$2`,
   );
 }
 
@@ -26,28 +26,29 @@ function processTemplateLiteral(
       const prevQuasiString = templateLiteral.quasis[index - 1]?.value.raw;
       const prevEndsInWhitespace = /^\s$/.test(prevQuasiString?.at(-1) ?? '');
 
-      // ...split the quasi into classes, filter out empty strings, and map each class to a prefixed class.
-      const prefixed = quasi.value.raw
-        .split(/\s+/)
-        .filter(Boolean)
-        .map((cls, i) => {
-          const shouldPrefix =
-            // If we're not at the first class in this quasi, we prefix.
-            i !== 0 ||
-            // If we're at the first quasi, we prefix.
-            isFirstQuasi ||
-            // If the previous quasi ends in whitespace, we prefix.
-            prevEndsInWhitespace;
-
-          // But only if the class doesn't already start with the prefix.
-          if (shouldPrefix && !cls.startsWith(prefix)) {
-            return `${prefix}${cls}`;
+      const prefixed = quasi.value.raw.replace(
+        /(?:^\S)|(?:\s\S)/g,
+        (match, index, str) => {
+          const rest = str.substring(index).trim();
+
+          // If the rest of the string starts with the prefix, we don't need to prefix.
+          if (rest.startsWith(prefix)) return match;
+
+          const startsWithWhitespace = /^\s/.test(match);
+
+          // If we're not at the first quasi,
+          // and we're starting with a non-whitespace character,
+          // we want to check if the previous quasi ended in whitespace.
+          // If it didn't, we don't want to prefix since we're part of the same class.
+          if (!isFirstQuasi && !startsWithWhitespace && !prevEndsInWhitespace) {
+            return match;
           }
 
-          // Otherwise, we don't prefix.
-          return cls;
-        })
-        .join(' ');
+          const prefixed = prefix + match.trim();
+
+          return startsWithWhitespace ? ` ${prefixed}` : prefixed;
+        },
+      );
 
       // Update the quasi with the prefixed classes.
       quasi.value.raw = prefixed;
@@ -182,6 +183,19 @@ export function babelPrefixReactClassNames({
                   return createHelperCall(arg, path);
                 }
 
+                // Handle conditional classes such as `isActive && "some-class"`
+                if (types.isLogicalExpression(arg)) {
+                  if (types.isStringLiteral(arg.right)) {
+                    return types.logicalExpression(
+                      arg.operator,
+                      arg.left,
+                      types.stringLiteral(
+                        prefixStringLiteral(arg.right.value, prefix),
+                      ),
+                    );
+                  }
+                }
+
                 return arg;
               });
             }