feat: Fully scope CSS reset, variables, keyframes, etc

packages/onchainkit/package.json

@@ -16,7 +16,7 @@
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest run --coverage --coverage.all=false",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "get-next-version": "node ./scripts/get-next-version.js",
@@ -114,6 +114,7 @@
   "exports": {
     "./package.json": "./package.json",
     "./styles.css": "./dist/assets/style.css",
+    "./onchainkit.css": "./dist/assets/onchainkit.css",
     "./theme": "./dist/styles/theme.js",
     ".": {
       "types": "./dist/index.d.ts",

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

@@ -5,7 +5,11 @@ 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-' },
+  options: {
+    prefix: string;
+    cnUtil?: string | false;
+    universalClass?: string;
+  } = { prefix: 'prefix-' },
 ): string {
   const result = transformSync(code, {
     plugins: [
@@ -218,4 +222,146 @@ describe('babel-prefix-react-classnames', () => {
       'isActive ? `prefix-active-${dynamic}` : "prefix-inactive-class"',
     );
   });
+
+  describe('universalClass option', () => {
+    it('should add universal class to HTML elements', () => {
+      const code = '<div>Hello</div>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).toContain('className: "prefix-el"');
+    });
+
+    it('should add universal class to HTML elements with existing className', () => {
+      const code = '<button className="foo">Click</button>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).toContain('className: "prefix-foo prefix-el"');
+    });
+
+    it('should NOT add universal class to React components', () => {
+      const code = '<MyComponent>Hello</MyComponent>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).not.toContain('className');
+    });
+
+    it('should NOT add universal class to React components with existing className', () => {
+      const code = '<Button className="foo">Click</Button>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).toContain('className: "prefix-foo"');
+      expect(result).not.toContain('"prefix-foo el"');
+    });
+
+    it('should add universal class to multiple HTML elements', () => {
+      const code = `
+        <div>
+          <button>Click</button>
+          <span>Text</span>
+        </div>
+      `;
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      // Each HTML element should get the universal class
+      expect(result.match(/className: "prefix-el"/g)?.length).toBe(3);
+    });
+
+    it('should add universal class to HTML elements but not React components in mixed JSX', () => {
+      const code = `
+        <div>
+          <MyComponent />
+          <button>Click</button>
+        </div>
+      `;
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      // Only div and button should get the universal class (2 times), not MyComponent
+      expect(result.match(/className: "prefix-el"/g)?.length).toBe(2);
+    });
+
+    it('should add universal class as first argument in cn() calls for HTML elements', () => {
+      const code = '<button className={cn("foo", "bar")}>Click</button>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).toContain('cn("prefix-foo"');
+      expect(result).toContain('"prefix-bar"');
+      expect(result).toContain('"prefix-el"');
+    });
+
+    it('should NOT add universal class to JSX member expressions', () => {
+      const code = '<Wallet.Dropdown>Content</Wallet.Dropdown>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).not.toContain('className');
+    });
+
+    it('should add universal class to template literal className on HTML elements', () => {
+      const code = '<div className={`foo ${bar}`}>Hello</div>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).toContain('prefix-el');
+      expect(result).toContain('prefix-foo');
+    });
+
+    it('should add universal class to HTML elements without className', () => {
+      const code = '<div>Hello</div>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      expect(result).toContain('className: "prefix-el"');
+    });
+
+    it('should not add universal class if no universalClass option is set', () => {
+      const code = '<div>Hello</div>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+      });
+      expect(result).not.toContain('className');
+    });
+
+    it('should handle React components without adding universal class', () => {
+      const code = '<Button className="foo">Click</Button>';
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      // React component should get prefix but not universal class
+      expect(result).toContain('prefix-foo');
+      expect(result).not.toContain('prefix-el');
+    });
+
+    it('should handle multiple HTML elements with and without className', () => {
+      const code = `
+        <div>
+          <span className="text">Hello</span>
+          <button>Click</button>
+        </div>
+      `;
+      const result = transform(code, {
+        prefix: 'prefix-',
+        universalClass: 'el',
+      });
+      // All HTML elements should get universal class
+      expect(result.match(/prefix-el/g)?.length).toBeGreaterThanOrEqual(3);
+    });
+  });
 });