feat: add styles to bundle rm inject styles (#31)

Author: Emmanuel-Develops

package.json

@@ -5,22 +5,24 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
   "license": "MIT",
   "files": [
     "dist",
     "README.md"
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./icons": {
+      "types": "./dist/icons.d.ts",
       "import": "./dist/icons.mjs",
-      "require": "./dist/icons.js",
-      "types": "./dist/icons.d.ts"
-    }
+      "require": "./dist/icons.js"
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "homepage": "https://github.com/bitcoin-dev-project/bdp-ui",
   "repository": {

src/components/button/Button.tsx

@@ -1,8 +1,6 @@
 // src/components/Button/Button.tsx
 
 import React from "react";
-import "../../styles/tailwind.output.css";
-
 export interface ButtonProps {
   label: string;
   onClick?: () => void;

src/components/footer/Footer.tsx

@@ -13,7 +13,7 @@ export interface FooterRootProps
 }
 
 const Separator = () => (
-  <div className="h-5 border xl:h-6 xl:border-2 border-custom-stroke hidden xl:block" />
+  <div className="h-5 border xl:h-6 xl:border-2 border-bdp-stroke hidden xl:block" />
 );
 
 const Footer: React.FC<FooterRootProps> & {

src/components/footer/FooterAbout.tsx

@@ -32,7 +32,7 @@ const FooterAbout = (props: React.PropsWithChildren<FooterAboutProps>) => {
         href={entityLink ?? "https://bitcoindevs.xyz/"}
         target="_blank"
         rel="noreferrer"
-        className="underline font-medium text-custom-brightOrange-100"
+        className="underline font-medium text-bdp-brightOrange-100"
       >
         {entityName ?? "Bitcoin Dev Project"}
       </a>

tailwind.config.js

@@ -3,19 +3,9 @@ module.exports = {
   darkMode: "class",
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    fontFamily: {
-      sans: ["ui-sans-serif", "system-ui"],
-      serif: ["ui-serif", "Georgia"],
-      mono: ["ui-monospace", "SFMono-Regular"],
-      geist: ['"Geist Sans"', "sans-serif"],
-      mona: ['"Mona Sans"', "sans-serif"],
-    },
     extend: {
-      boxShadow: {
-        "custom-sm": "2px 3px 10px 0px rgba(255, 128, 0, 0.18);",
-      },
       colors: {
-        custom: {
+        bdp: {
           background: "var(--background)",
           "hover-primary": "var(--hover-primary)",
           "hover-state": "var(--hover-state)",

tsup.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'tsup';
+import fs from 'fs';
 
 export default defineConfig({
   entry: ['src/index.ts', 'src/icons.ts'],
@@ -9,5 +10,8 @@ export default defineConfig({
   sourcemap: true,
   clean: true,
   external: ['react', 'react-dom'],
-  injectStyle: true,
+  injectStyle: false,
+  async onSuccess() {
+    await fs.promises.copyFile('src/styles/tailwind.output.css', 'dist/styles.css');
+  },
 });