diff --git a/packages/onchainkit/package.json b/packages/onchainkit/package.json
index 8485910a0e..b439a3aafd 100644
--- a/packages/onchainkit/package.json
+++ b/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": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --watch",
- "tailwind:prod": "tailwindcss -i ./src/styles/index.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",
@@ -39,15 +35,20 @@
"graphql": "^14 || ^15 || ^16",
"graphql-request": "^6.1.0",
"qrcode": "^1.5.4",
- "tailwind-merge": "^2.3.0",
+ "tailwind-merge": "^3.2.0",
"viem": "^2.27.2",
"wagmi": "^2.14.11"
},
"devDependencies": {
- "@tailwindcss/cli": "^4.1.4",
+ "@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,14 +66,15 @@
"graphql": "^14",
"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",
"rollup-plugin-preserve-use-client": "^3.0.1",
"storybook": "^8.2.9",
"tailwindcss": "^4.1.4",
- "tailwindcss-animate": "^1.0.7",
"tscpaths": "^0.0.9",
"tsup": "^8.3.5",
"vite": "^5.3.3",
@@ -97,7 +99,7 @@
"module": "./dist/index.js",
"exports": {
"./package.json": "./package.json",
- "./styles.css": "./dist/styles.css",
+ "./styles.css": "./dist/assets/style.css",
"./theme": "./dist/styles/theme.js",
".": {
"types": "./dist/index.d.ts",
diff --git a/packages/onchainkit/plugins/__tests__/babel-prefix-react-classnames.test.ts b/packages/onchainkit/plugins/__tests__/babel-prefix-react-classnames.test.ts
new file mode 100644
index 0000000000..93727eedfe
--- /dev/null
+++ b/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 = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('className: "prefix-foo"');
+ });
+
+ it('should handle multiple classes in string literal className', () => {
+ const code = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('className: "prefix-foo prefix-bar"');
+ });
+
+ it('should not add prefix if already has the prefix', () => {
+ const code = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('className: "prefix-foo"');
+ });
+
+ it('should handle mixed prefixed and non-prefixed classes', () => {
+ const code = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('className: "prefix-foo prefix-bar"');
+ });
+
+ it('should handle template literals', () => {
+ const code = 'Hello
';
+ 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 =
+ 'Hello
';
+ 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 = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('className: __prefixClassNames(classes)');
+ });
+
+ it('should handle member expressions by using the helper function', () => {
+ const code = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('className: __prefixClassNames(styles.container)');
+ });
+
+ it('should handle cn utility function calls with string arguments', () => {
+ const code = 'Hello
';
+ 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 = 'Hello
';
+ 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 = `
+
+
First
+
Second
+
Third
+
Hello
';
+ 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 = 'Hello
';
+ 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 = `
+
+ `;
+ 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 = `
+
+ Text
+ Click
+
+ `;
+ 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 = 'Hello
';
+ 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 = 'Hello
';
+ const result = transform(code);
+ expect(result).toContain('React.createElement("div"');
+ });
+
+ it('should only transform className attributes', () => {
+ const code = 'Hello
';
+ 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 = 'Hello
';
+ 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');
+ });
+});
diff --git a/packages/onchainkit/plugins/__tests__/postcss-prefix-classnames.test.ts b/packages/onchainkit/plugins/__tests__/postcss-prefix-classnames.test.ts
new file mode 100644
index 0000000000..9dd6edda6b
--- /dev/null
+++ b/packages/onchainkit/plugins/__tests__/postcss-prefix-classnames.test.ts
@@ -0,0 +1,248 @@
+import postcss from 'postcss';
+import { describe, it, expect, vi } from 'vitest';
+import postcssPrefixClassnames from '../postcss-prefix-classnames';
+
+// Helper function to process CSS through the plugin
+async function run(
+ input: string,
+ opts: {
+ prefix: string;
+ includeFiles?: string | RegExp | Array;
+ excludeFiles?: string | RegExp | Array;
+ },
+ fileOption: string = 'test.css',
+) {
+ const result = await postcss([postcssPrefixClassnames(opts)]).process(input, {
+ from: fileOption,
+ });
+ return result.css;
+}
+
+describe('postcss-prefix-classnames', () => {
+ it('should add prefix to class names', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, { prefix: 'bar-' });
+ expect(output).toBe('.bar-foo { color: red; }');
+ });
+
+ it('should handle multiple selectors', async () => {
+ const input = '.foo, .bar { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe('.prefix-foo, .prefix-bar { color: red; }');
+ });
+
+ it('should not add prefix if already has the prefix', async () => {
+ const input = '.prefix-foo { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle selectors with no classes', async () => {
+ const input = 'div { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe('div { color: red; }');
+ });
+
+ it('should handle complex selectors', async () => {
+ const input = '.foo .bar, div.baz { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe(
+ '.prefix-foo .prefix-bar, div.prefix-baz { color: red; }',
+ );
+ });
+
+ it('should handle escaped dots', async () => {
+ const input = '.foo\\.bar { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe('.prefix-foo\\.bar { color: red; }');
+ });
+
+ it('should handle pseudo-classes and pseudo-elements', async () => {
+ const input = '.foo:hover, .bar::before { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe(
+ '.prefix-foo:hover, .prefix-bar::before { color: red; }',
+ );
+ });
+
+ it('should handle includeFiles with string match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ includeFiles: 'test.css',
+ });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle includeFiles with string non-match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(
+ input,
+ { prefix: 'prefix-', includeFiles: 'other.css' },
+ 'test.css',
+ );
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle includeFiles with RegExp match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ includeFiles: /test\.css$/,
+ });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle includeFiles with RegExp non-match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ includeFiles: /other\.css$/,
+ });
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle includeFiles with array match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ includeFiles: ['other.css', 'test.css'],
+ });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle includeFiles with array non-match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ includeFiles: ['other1.css', 'other2.css'],
+ });
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle excludeFiles with string match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ excludeFiles: 'test.css',
+ });
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle excludeFiles with string non-match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ excludeFiles: 'other.css',
+ });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle excludeFiles with RegExp match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ excludeFiles: /test\.css$/,
+ });
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle excludeFiles with RegExp non-match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ excludeFiles: /other\.css$/,
+ });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle excludeFiles with array match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ excludeFiles: ['other.css', 'test.css'],
+ });
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle excludeFiles with array non-match', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ excludeFiles: ['other1.css', 'other2.css'],
+ });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should prioritize excludeFiles over includeFiles', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ includeFiles: 'test.css',
+ excludeFiles: 'test.css',
+ });
+ expect(output).toBe('.foo { color: red; }');
+ });
+
+ it('should handle dot in prefix', async () => {
+ const input = '.foo { color: red; }';
+ const output = await run(input, { prefix: '.prefix-' });
+ expect(output).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle nested selectors correctly', async () => {
+ const input = '.parent { color: red; } .parent .child { color: blue; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe(
+ '.prefix-parent { color: red; } .prefix-parent .prefix-child { color: blue; }',
+ );
+ });
+
+ it('should handle attribute selectors correctly', async () => {
+ const input = '.foo[type="text"] { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe('.prefix-foo[type="text"] { color: red; }');
+ });
+
+ it('should handle class combined with ID selectors correctly', async () => {
+ const input = '#id.foo { color: red; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe('#id.prefix-foo { color: red; }');
+ });
+
+ it('should handle multiple rules correctly', async () => {
+ const input = '.foo { color: red; } .bar { color: blue; }';
+ const output = await run(input, { prefix: 'prefix-' });
+ expect(output).toBe(
+ '.prefix-foo { color: red; } .prefix-bar { color: blue; }',
+ );
+ });
+
+ it('should handle no file source gracefully', async () => {
+ const input = '.foo { color: red; }';
+ // This test will process CSS without providing a source file
+ const result = await postcss([
+ postcssPrefixClassnames({ prefix: 'prefix-' }),
+ ]).process(input);
+ expect(result.css).toBe('.prefix-foo { color: red; }');
+ });
+
+ it('should handle unsupported matcher type gracefully', async () => {
+ // Mock console.warn to verify it's called when an invalid matcher is provided
+ const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+ const input = '.foo { color: red; }';
+ const output = await run(input, {
+ prefix: 'prefix-',
+ // @ts-expect-error - Intentionally passing invalid type to test edge case
+ includeFiles: 42, // number is not a valid matcher type
+ });
+
+ // Since the matcher is invalid, it should return false in isMatch
+ // which means no files will be included, so no prefixing should happen
+ expect(output).toBe('.foo { color: red; }');
+
+ // Restore the spy
+ warnSpy.mockRestore();
+ });
+});
diff --git a/packages/onchainkit/plugins/babel-prefix-react-classnames.ts b/packages/onchainkit/plugins/babel-prefix-react-classnames.ts
new file mode 100644
index 0000000000..9a357d57d9
--- /dev/null
+++ b/packages/onchainkit/plugins/babel-prefix-react-classnames.ts
@@ -0,0 +1,207 @@
+import { NodePath } from '@babel/core';
+import { declare } from '@babel/helper-plugin-utils';
+import * as t from '@babel/types';
+
+const HELPER_NAME = '__prefixClassNames';
+
+function prefixStringLiteral(stringLiteral: string, prefix: string) {
+ return stringLiteral.replace(
+ // Match any non-whitespace characters that:
+ // 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`,
+ );
+}
+
+function processTemplateLiteral(
+ templateLiteral: t.TemplateLiteral,
+ prefix: string,
+) {
+ // For each quasi...
+ templateLiteral.quasis.forEach((quasi, index) => {
+ // ...if the quasi isn't an empty string...
+ if (quasi.value.raw.length > 0) {
+ const isFirstQuasi = index === 0;
+ const prevQuasiString = templateLiteral.quasis[index - 1]?.value.raw;
+ const prevEndsInWhitespace = /^\s$/.test(prevQuasiString?.at(-1) ?? '');
+
+ 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;
+ }
+
+ const prefixed = prefix + match.trim();
+
+ return startsWithWhitespace ? ` ${prefixed}` : prefixed;
+ },
+ );
+
+ // Update the quasi with the prefixed classes.
+ quasi.value.raw = prefixed;
+ quasi.value.cooked = prefixed;
+ }
+ });
+}
+
+export function babelPrefixReactClassNames({
+ prefix,
+ cnUtil = 'cn',
+}: {
+ prefix: string;
+ cnUtil?: string | false;
+}): ReturnType {
+ const helperFunction = t.functionDeclaration(
+ t.identifier(HELPER_NAME),
+ [t.identifier('value')],
+ t.blockStatement([
+ t.returnStatement(
+ t.conditionalExpression(
+ t.unaryExpression('!', t.identifier('value')),
+ t.identifier('value'),
+ t.conditionalExpression(
+ t.binaryExpression(
+ '===',
+ t.unaryExpression('typeof', t.identifier('value')),
+ t.stringLiteral('string'),
+ ),
+ t.callExpression(
+ t.memberExpression(
+ t.identifier('value'),
+ t.identifier('replace'),
+ ),
+ [
+ t.regExpLiteral(`(^|\\s)(?!${prefix})(\\S+)`, 'g'),
+ t.stringLiteral(`$1${prefix}$2 `),
+ ],
+ ),
+ t.binaryExpression(
+ '+',
+ t.stringLiteral(`${prefix} `),
+ t.identifier('value'),
+ ),
+ ),
+ ),
+ ),
+ ]),
+ );
+
+ return declare(({ types }) => {
+ // Function to ensure the helper exists in the program
+ const ensureHelperExists = (path: NodePath) => {
+ const program = path.findParent((p) => p.isProgram());
+ let helperExists = false;
+
+ if (program) {
+ program.traverse({
+ FunctionDeclaration(funcPath) {
+ if (funcPath.node.id && funcPath.node.id.name === HELPER_NAME) {
+ helperExists = true;
+ }
+ },
+ });
+
+ if (!helperExists) {
+ (program as NodePath).unshiftContainer(
+ 'body',
+ helperFunction,
+ );
+ }
+ }
+
+ return types.identifier(HELPER_NAME);
+ };
+
+ // Function to create a runtime helper call
+ const createHelperCall = (arg: t.Expression, path: NodePath) => {
+ const helperIdentifier = ensureHelperExists(path);
+ return types.callExpression(helperIdentifier, [arg]);
+ };
+
+ return {
+ visitor: {
+ JSXAttribute(path) {
+ if (path.node.name.name !== 'className') return;
+
+ const value = path.node.value;
+
+ // Handle string literals
+ if (types.isStringLiteral(value)) {
+ value.value = prefixStringLiteral(value.value, prefix);
+ }
+
+ if (types.isJSXExpressionContainer(value)) {
+ const expression = value.expression;
+
+ // Handle template literals
+ if (types.isTemplateLiteral(expression)) {
+ processTemplateLiteral(expression, prefix);
+ }
+
+ // Handle identifiers and member expressions
+ if (
+ types.isIdentifier(expression) ||
+ types.isMemberExpression(expression)
+ ) {
+ value.expression = createHelperCall(expression, path);
+ }
+
+ // Handle cnUtil function calls
+ if (
+ types.isCallExpression(expression) &&
+ types.isIdentifier(expression.callee) &&
+ expression.callee.name === cnUtil
+ ) {
+ expression.arguments = expression.arguments.map((arg) => {
+ // Handle string literals within cnUtil
+ if (types.isStringLiteral(arg)) {
+ return types.stringLiteral(
+ prefixStringLiteral(arg.value, prefix),
+ );
+ }
+
+ // Handle template literals within cnUtil
+ if (types.isTemplateLiteral(arg)) {
+ processTemplateLiteral(arg, prefix);
+ }
+
+ // Handle identifiers and member expressions within cnUtil
+ if (types.isIdentifier(arg) || types.isMemberExpression(arg)) {
+ 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;
+ });
+ }
+ }
+ },
+ },
+ };
+ });
+}
diff --git a/packages/onchainkit/plugins/postcss-prefix-classnames.ts b/packages/onchainkit/plugins/postcss-prefix-classnames.ts
new file mode 100644
index 0000000000..ed57996662
--- /dev/null
+++ b/packages/onchainkit/plugins/postcss-prefix-classnames.ts
@@ -0,0 +1,80 @@
+import * as PostCSS from 'postcss';
+
+type FileMatcher = string | RegExp | Array;
+
+export default function postcssPrefixClassnames({
+ prefix,
+ includeFiles,
+ excludeFiles,
+}: {
+ prefix: string;
+ includeFiles?: FileMatcher;
+ excludeFiles?: FileMatcher;
+}): PostCSS.Plugin {
+ const rawPrefix = prefix.replace(/^(\.)/, '');
+
+ return {
+ postcssPlugin: 'postcss-prefix-classnames',
+ prepare(result) {
+ const file = result.root.source?.input.file;
+
+ return {
+ Rule(rule) {
+ if (
+ !shouldProcessFile({ file: file ?? '', includeFiles, excludeFiles })
+ ) {
+ return;
+ }
+
+ rule.selectors = rule.selectors.map((selector) => {
+ return prefixClasses({ selector, prefix: rawPrefix });
+ });
+ },
+ };
+ },
+ };
+}
+
+function prefixClasses({
+ selector,
+ prefix,
+}: {
+ selector: string;
+ prefix: string;
+}) {
+ return selector.replace(/(?:^\.)|(?:[^\\]\.)/g, (match, index, str) => {
+ const nextPart = str.substring(index + match.length);
+ if (nextPart.startsWith(prefix)) return match;
+ return match + prefix;
+ });
+}
+
+function shouldProcessFile({
+ file,
+ includeFiles,
+ excludeFiles,
+}: {
+ file: string;
+ includeFiles?: FileMatcher;
+ excludeFiles?: FileMatcher;
+}) {
+ if (!includeFiles && !excludeFiles) return true;
+ if (excludeFiles && isMatch({ file, matcher: excludeFiles })) return false;
+ if (!includeFiles) return true;
+ if (includeFiles && isMatch({ file, matcher: includeFiles })) return true;
+ return false;
+}
+
+function isMatch({
+ file,
+ matcher,
+}: {
+ file: string;
+ matcher: FileMatcher;
+}): boolean {
+ if (typeof matcher === 'string') return file.endsWith(matcher);
+ if (matcher instanceof RegExp) return matcher.test(file);
+ if (Array.isArray(matcher))
+ return matcher.some((m) => isMatch({ file, matcher: m }));
+ return false;
+}
diff --git a/packages/onchainkit/src/index.ts b/packages/onchainkit/src/index.ts
index dfe6886b48..b1035c6f5d 100644
--- a/packages/onchainkit/src/index.ts
+++ b/packages/onchainkit/src/index.ts
@@ -16,5 +16,6 @@ export type {
OnchainKitConfig,
OnchainKitContextType,
} from './core/types';
+import './styles/index.css';
export { Connected } from './connected';
diff --git a/packages/onchainkit/src/internal/svg/metamaskSvg.tsx b/packages/onchainkit/src/internal/svg/metamaskSvg.tsx
index 5bf7a635b6..b478843448 100644
--- a/packages/onchainkit/src/internal/svg/metamaskSvg.tsx
+++ b/packages/onchainkit/src/internal/svg/metamaskSvg.tsx
@@ -9,44 +9,39 @@ export const metamaskSvg = (
aria-hidden="true"
>
MetaMask Logo
-
diff --git a/packages/onchainkit/src/styles/tailwind-base.css b/packages/onchainkit/src/styles/tailwind-base.css
index 7236dd2271..b599d1ed43 100644
--- a/packages/onchainkit/src/styles/tailwind-base.css
+++ b/packages/onchainkit/src/styles/tailwind-base.css
@@ -196,11 +196,11 @@
@theme inline {
--font-sans: 'Inter', sans-serif;
--font-display: 'DM Sans', sans-serif;
+ --font-ock: var(--ock-font-family);
--spacing-88: 22rem;
--spacing-120: 30rem;
--radius-ock-default: var(--ock-radius-default);
--radius-ock-inner: var(--ock-radius-inner);
- --font-ock: var(--ock-font-family);
--color-ock-text-inverse: var(--ock-text-inverse);
--color-ock-text-foreground: var(--ock-text-foreground);
--color-ock-text-foreground-muted: var(--ock-text-foreground-muted);
diff --git a/packages/onchainkit/src/styles/theme.ts b/packages/onchainkit/src/styles/theme.ts
index c805e5e689..24fd236462 100644
--- a/packages/onchainkit/src/styles/theme.ts
+++ b/packages/onchainkit/src/styles/theme.ts
@@ -1,5 +1,58 @@
import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMerge = extendTailwindMerge({
+ prefix: 'ock',
+ extend: {
+ theme: {
+ font: ['ock'],
+ radius: ['ock-default', 'ock-inner'],
+ shadow: ['ock-default'],
+ color: [
+ 'ock-text-inverse',
+ 'ock-text-foreground',
+ 'ock-text-foreground-muted',
+ 'ock-text-error',
+ 'ock-text-primary',
+ 'ock-text-success',
+ 'ock-text-warning',
+ 'ock-text-disabled',
+ 'ock-bg-default',
+ 'ock-bg-default-hover',
+ 'ock-bg-default-active',
+ 'ock-bg-alternate',
+ 'ock-bg-alternate-hover',
+ 'ock-bg-alternate-active',
+ 'ock-bg-inverse',
+ 'ock-bg-inverse-hover',
+ 'ock-bg-inverse-active',
+ 'ock-bg-primary',
+ 'ock-bg-primary-hover',
+ 'ock-bg-primary-active',
+ 'ock-bg-primary-washed',
+ 'ock-bg-primary-disabled',
+ 'ock-bg-secondary',
+ 'ock-bg-secondary-hover',
+ 'ock-bg-secondary-active',
+ 'ock-bg-error',
+ 'ock-bg-warning',
+ 'ock-bg-success',
+ 'ock-bg-default-reverse',
+ 'ock-icon-color-primary',
+ 'ock-icon-color-foreground',
+ 'ock-icon-color-foreground-muted',
+ 'ock-icon-color-inverse',
+ 'ock-icon-color-error',
+ 'ock-icon-color-success',
+ 'ock-icon-color-warning',
+ 'ock-line-primary',
+ 'ock-line-default',
+ 'ock-line-heavy',
+ 'ock-line-inverse',
+ ],
+ },
+ },
+});
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
diff --git a/packages/onchainkit/tsconfig.json b/packages/onchainkit/tsconfig.json
index 0c1ce9436f..1355b227eb 100644
--- a/packages/onchainkit/tsconfig.json
+++ b/packages/onchainkit/tsconfig.json
@@ -21,6 +21,6 @@
"@/*": ["src/*"]
}
},
- "include": ["src"],
+ "include": ["src", "plugins"],
"exclude": ["node_modules"]
}
diff --git a/packages/onchainkit/vite.config.ts b/packages/onchainkit/vite.config.ts
index 729502f6c0..9bdc3e009e 100644
--- a/packages/onchainkit/vite.config.ts
+++ b/packages/onchainkit/vite.config.ts
@@ -8,6 +8,10 @@ import { fileURLToPath } from 'node:url';
import { glob } from 'glob';
import path from 'node:path';
import fs from 'fs';
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
+import postcssPrefixClassnames from './plugins/postcss-prefix-classnames.js';
+import { babelPrefixReactClassNames } from './plugins/babel-prefix-react-classnames';
const entryPoints = Object.fromEntries(
glob
@@ -41,7 +45,16 @@ export default defineConfig({
plugins: [
externalizeDeps(),
preserveUseClientDirective(),
- react(),
+ react({
+ babel: {
+ plugins: [
+ babelPrefixReactClassNames({
+ prefix: 'ock:',
+ cnUtil: 'cn',
+ }),
+ ],
+ },
+ }),
dts({
tsconfigPath: './tsconfig.json',
include: ['src'],
@@ -64,4 +77,18 @@ export default defineConfig({
},
},
},
+ css: {
+ postcss: {
+ plugins: [
+ tailwindcss({
+ base: './src',
+ optimize: process.env.NODE_ENV !== 'development',
+ }),
+ autoprefixer(),
+ postcssPrefixClassnames({
+ prefix: `ock\\:`,
+ }),
+ ],
+ },
+ },
});
diff --git a/packages/playground/components/demo/Wallet.tsx b/packages/playground/components/demo/Wallet.tsx
index 103d8bc17d..31b22e3a5f 100644
--- a/packages/playground/components/demo/Wallet.tsx
+++ b/packages/playground/components/demo/Wallet.tsx
@@ -6,7 +6,7 @@ import {
Name,
Socials,
} from '@coinbase/onchainkit/identity';
-import { cn, color } from '@coinbase/onchainkit/theme';
+import { cn } from '@coinbase/onchainkit/theme';
import {
ConnectWallet,
Wallet,
@@ -25,7 +25,9 @@ function WalletComponent() {
Connect}
+ disconnectedLabel={
+ Connect
+ }
>