Add pigment and replace rollup with vite

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@neynar/react",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
-  "module": "dist/bundle.esm.js",
+  "module": "dist/bundle.es.js",
   "types": "dist/index.d.ts",
   "author": "Neynar",
   "license": "MIT",
   "scripts": {
-    "build": "rollup -c rollup.config.mjs",
+    "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -27,14 +27,8 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@chromatic-com/storybook": "^1.3.3",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@linaria/react": "^6.2.1",
+    "@pigment-css/vite-plugin": "^0.0.9",
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
     "@storybook/addon-links": "^8.0.9",
@@ -45,15 +39,21 @@
     "@storybook/test": "^8.0.9",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@wyw-in-js/rollup": "^0.5.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "rollup": "^4.16.4",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-css-only": "^4.5.2",
     "storybook": "^8.0.9",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.10"
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.9.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "resolutions": {
     "jackspeak": "2.1.1"
+  },
+  "dependencies": {
+    "@pigment-css/react": "^0.0.9"
   }
 }

rollup.config.mjs

@@ -4,6 +4,8 @@ import babel from "@rollup/plugin-babel";
 import typescript from "@rollup/plugin-typescript";
 import { terser } from "rollup-plugin-terser";
 import replace from "@rollup/plugin-replace";
+import linaria from "@wyw-in-js/rollup";
+import css from "rollup-plugin-css-only";
 
 export default {
   input: "src/index.tsx",
@@ -19,16 +21,21 @@ export default {
       sourcemap: true,
     },
   ],
-  external: ["react", "react-dom", "@emotion/react", "@emotion/styled"], // Avoid bundling React and Emotion
+  external: ["react", "react-dom"],
   plugins: [
     resolve(), // Resolves node modules
     commonjs(), // Converts CommonJS modules to ES6
     typescript(), // Handles TypeScript compilation
+    linaria({
+      sourceMap: process.env.NODE_ENV !== "production",
+    }),
+    css({
+      output: "styles.css",
+    }),
     babel({
       babelHelpers: "bundled",
       exclude: /node_modules/,
       presets: ["@babel/preset-env", "@babel/preset-react"],
-      plugins: ["@emotion"],
     }),
     replace({
       "process.env.NODE_ENV": JSON.stringify("production"),

src/components/NeynarAuthButton/index.tsx

@@ -1,15 +1,13 @@
-/** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
+import { styled } from "@pigment-css/react";
 import React from "react";
-import PlanetBlackIcon from "./icons/PlanetBlackIcon";
 
 interface ButtonProps {
   label?: string;
   onClick?: () => void;
 }
 
 const Button = styled.button`
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   border: none;
   color: #000000;
   padding: 15px;
@@ -30,9 +28,4 @@ const Button = styled.button`
 export const NeynarAuthButton: React.FC<ButtonProps> = ({
   label = "Sign in with Neynar",
   onClick,
-}) => (
-  <Button onClick={onClick}>
-    <PlanetBlackIcon />
-    {label}
-  </Button>
-);
+}) => <Button onClick={onClick}>{label}</Button>;

vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+import dts from "vite-plugin-dts";
+import { pigment } from "@pigment-css/vite-plugin";
+
+export default defineConfig({
+  plugins: [
+    pigment({ theme: {} }),
+    react(), // Supports React JSX
+    tsconfigPaths(), // Supports TS path aliasing
+    dts({
+      insertTypesEntry: true, // This option adds an entry for the type definitions in your package.json
+    }),
+  ],
+  build: {
+    outDir: "dist",
+    lib: {
+      entry: "src/index.tsx",
+      formats: ["es", "cjs"],
+      fileName: (format) => `bundle.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});