chore: Prefix component classnames

packages/onchainkit/package.json

@@ -8,12 +8,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm clean && pnpm bundle:prod && pnpm tailwind:prod",
-    "dev": "concurrently \"pnpm tailwind:dev\" \"pnpm bundle:dev\"",
-    "bundle:dev": "NODE_ENV=development vite build --watch",
-    "bundle:prod": "vite build",
-    "tailwind:dev": "tailwind -i ./src/styles/index-with-tailwind.css -o ./dist/styles.css --watch",
-    "tailwind:prod": "tailwindcss -i ./src/styles/index.css -o ./dist/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./dist/styles.css --minify",
+    "build": "pnpm clean && vite build",
+    "dev": "NODE_ENV=development vite build --watch",
     "clean": "rm -rf dist esm",
     "lint": "eslint . --ext .ts,.tsx --max-warnings=0",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
@@ -44,9 +40,15 @@
     "wagmi": "^2.14.11"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/helper-plugin-utils": "^7.26.5",
+    "@babel/types": "^7.27.0",
+    "@tailwindcss/postcss": "^4.1.4",
     "@testing-library/jest-dom": "6.4.7",
     "@testing-library/react": "^14.2.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/node": "^22.13.10",
     "@types/qrcode": "^1",
     "@types/react": "^18",
@@ -65,6 +67,9 @@
     "graphql-request": "^6.1.0",
     "jsdom": "^24.1.0",
     "packemon": "3.3.1",
+    "postcss": "^8",
+    "postcss-import": "^16.1.0",
+    "postcss-load-config": "^6.0.1",
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.5",
@@ -96,8 +101,7 @@
   "module": "./dist/index.js",
   "exports": {
     "./package.json": "./package.json",
-    "./styles.css": "./dist/styles.css",
-    "./tailwind.css": "./dist/tailwind.css",
+    "./styles.css": "./dist/assets/style.css",
     "./theme": "./dist/styles/theme.js",
     ".": {
       "types": "./dist/index.d.ts",

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

@@ -0,0 +1,184 @@
+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 continuous class names in template literals with expressions', () => {
+    const code =
+      '<div className={`foo${isLarge ? "-large" : ""}-bar prefix-blah ${active && "active"}`}>Hello</div>';
+    const result = transform(code);
+    expect(result).toContain(
+      'className: `prefix-foo${isLarge ? "-large" : ""}-bar prefix-blah ${active && "active"}`',
+    );
+  });
+
+  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 ensure helper function is only added once', () => {
+    const code = `
+      <div>
+        <div className={styles.container}>First</div>
+        <span className={otherStyles.text}>Second</span>
+        <button className={btnStyles.button}>Third</button>
+      </div>
+    `;
+    const result = transform(code);
+
+    // Helper function should be defined only once
+    const helperMatches = result.match(/function __prefixClassNames\(value\)/g);
+    expect(helperMatches).toHaveLength(1);
+
+    // All three elements should use the helper
+    expect(result).toContain('className: __prefixClassNames(styles.container)');
+    expect(result).toContain('className: __prefixClassNames(otherStyles.text)');
+    expect(result).toContain('className: __prefixClassNames(btnStyles.button)');
+  });
+
+  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');
+  });
+});