feat(): Export iife theme sync script.

.storybook/preview-head.html

@@ -3,10 +3,10 @@
 
 <!-- Or you can load custom head-tag JavaScript: -->
 
-<!-- <script
+ <script
   src="dist/src/utils/syncTheme.js"
   type="application/javascript"
-></script> -->
+></script>
 
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

rollup.config.js

@@ -6,7 +6,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import preserveDirectives from "rollup-plugin-preserve-directives";
 import { terser } from "rollup-plugin-terser";
 
-export default {
+export default [{
   onwarn(warning, warn) {
     if (
       warning.code === "MODULE_LEVEL_DIRECTIVE" &&
@@ -39,4 +39,24 @@ export default {
     terser({ compress: { directives: false } }),
     preserveDirectives(),
   ],
-};
+
+}, {
+  input: "src/utils/syncTheme.ts",
+  output: [
+    {
+      dir: "dist/src/utils/",
+      format: "iife",
+      name: "syncTheme",
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: "./tsconfig.json",
+      outDir: "dist/src/utils/",
+      declaration: false,
+    }),
+    terser(),
+  ],
+}];

src/utils/index.ts

@@ -1,7 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 export * from "./darkMode";
-// export * from "./syncTheme";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

src/utils/syncTheme.ts

@@ -1,5 +1,6 @@
-// import { theme } from "./darkMode";
+import { theme } from "./darkMode"
+
 // This script sets up event listeners to set the appropriate css class in the DOM for the current theme. It's intended to be executed in the head of the document hence it is immediately invoked (IIFE).
-// (() => {
-//   theme.syncTheme();
-// })();
+(() =>  {
+    theme.syncTheme()
+})()