Merged PR #7 manually

Author: todd-elvers

assets/index.cjs.js

@@ -4,6 +4,7 @@
   "description": "An updated, cute dark mode toggle button for React.",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "type": "module",
   "main": "dist/index.cjs.js",
   "exports": {
     ".": [
@@ -50,6 +51,7 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
+    "classnames": "^2.3.2",
     "react-lottie-player": "^1.4.3"
   },
   "peerDependencies": {
@@ -58,7 +60,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
-    "@emotion/css": "^11.9.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
@@ -86,10 +87,12 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.76.0",
+    "rollup-plugin-polyfill-node": "^0.12.0",
     "ts-jest": "^28.0.5",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.0"
+    "vite": "^3.0.0",
+    "vite-plugin-css-injected-by-js": "^3.1.0"
   },
   "lint-staged": {
     "./{src,stories}/**/*.{ts,tsx,js,jsx}": [

package.json

@@ -0,0 +1,18 @@
+.button {
+      cursor: pointer;
+      overflow: hidden;
+      appearance: none;
+      border: none;
+      background-color: transparent;
+      padding: 0;
+  }
+  
+  .player {
+      display: none;
+      align-items: center;
+      justify-content: center;
+  }
+  
+  .player--loaded {
+    display: flex;
+  }

src/index.module.css

@@ -1,9 +1,10 @@
-import { css, cx } from "@emotion/css";
+import cx from "classnames";
 import { AnimationSegment } from "lottie-web";
 import * as React from "react";
 import LottiePlayerLight from "react-lottie-player/dist/LottiePlayerLight";
 
 import animationData from "./animationData.json";
+import styles from "./index.module.css";
 import { parseUnit } from "./parseUnit";
 
 export declare namespace DarkModeToggle {
@@ -68,11 +69,21 @@ export const DarkModeToggle = React.memo<DarkModeToggle.Props>(
       <button
         onClick={onToggleClick}
         aria-hidden="true"
-        className={cx(buttonStyles(sizeValue, sizeUnit), className)}
+        style={{
+          width: `${sizeValue}${sizeUnit}`,
+          height: `${sizeValue * 0.5}${sizeUnit}`,
+        }}
+        className={cx(styles.button, className)}
         id={id}
       >
         <LottiePlayerLight
-          className={playerStyles(isLottiePlayerMounted, sizeValue, sizeUnit)}
+          className={cx(styles.player, { [styles["player--loaded"]]: isLottiePlayerMounted })}
+          style={{
+            marginTop: `${sizeValue * -0.575}${sizeUnit}`,
+            marginLeft: `${sizeValue * -0.32}${sizeUnit}`,
+            width: `${sizeValue * 1.65}${sizeUnit}`,
+            height: `${sizeValue * 1.65}${sizeUnit}`,
+          }}
           loop={false}
           speed={speed}
           play={playAnimation}
@@ -98,28 +109,3 @@ function arePropsEqual(prevProps: DarkModeToggle.Props, nextProps: DarkModeToggl
     prevProps.id === nextProps.id
   );
 }
-
-function buttonStyles(sizeValue: number, sizeUnit: string): string {
-  return css({
-    cursor: "pointer",
-    overflow: "hidden",
-    width: `${sizeValue}${sizeUnit}`,
-    height: `${sizeValue * 0.5}${sizeUnit}`,
-    appearance: "none",
-    border: "none",
-    backgroundColor: "transparent",
-    padding: 0,
-  });
-}
-
-function playerStyles(isLoaded: boolean, sizeValue: number, sizeUnit: string): string {
-  return css({
-    display: isLoaded ? "flex" : "none",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: `${sizeValue * -0.575}${sizeUnit}`,
-    marginLeft: `${sizeValue * -0.32}${sizeUnit}`,
-    width: `${sizeValue * 1.65}${sizeUnit}`,
-    height: `${sizeValue * 1.65}${sizeUnit}`,
-  });
-}

src/index.tsx

@@ -15,7 +15,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
   },
   "include": ["./src","jest.config.ts", "vite.config.ts"],
 }

tsconfig.json

@@ -1,11 +1,14 @@
 import typescript from "@rollup/plugin-typescript";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
+import pkg from "./package.json";
+
+const externals = Object.keys(pkg.peerDependencies);
 
+export default defineConfig({
+  plugins: [react(), cssInjectedByJsPlugin({ topExecutionPriority: false })],
   build: {
     lib: {
       entry: "src/index.tsx",
@@ -15,7 +18,7 @@ export default defineConfig({
 
     rollupOptions: {
       // Don't bundle react or react-dom
-      external: ["react", "react-dom"],
+      external: externals,
 
       plugins: [
         // Write the types to our dist directory