[build] [minify] [iife] Create custom plugin to do basic minification…

… of inline styles + Export something from adapter and global to make sure vite is wrapping inside an iife.

src/adapter.ts

@@ -56,3 +56,6 @@ class FSOldCheckout implements IFSOldCheckout {
 }
 
 window.FS.Checkout = new FSOldCheckout();
+
+// @note - This export is needed so that vite library compiler wraps the code in a function (iife)
+export { FSOldCheckout };

src/global.ts

@@ -5,3 +5,6 @@ window.FS = window.FS || {};
 window.FS.Checkout = Checkout;
 window.FS.postman = postman;
 window.FS.Logger = Logger;
+
+// @note - This export is needed so that vite library compiler wraps the code in a function (iife)
+export { Checkout };

src/lib/services/checkout-popup/CheckoutIFrameBuilder.ts

@@ -63,7 +63,7 @@ export class CheckoutIFrameBuilder {
     }
 
     private getStyle(): string {
-        return `#${this.iFrameID} {
+        return /*@fs-css-minify*/ `#${this.iFrameID} {
 			z-index: ${MAX_ZINDEX - 1};
 			background: rgba(0,0,0,0.003);
 			border: 0 none transparent;

src/lib/services/exit-intent/index.ts

@@ -101,7 +101,7 @@ export class ExitIntent implements IExitIntent {
     }
 
     private getStyle(): string {
-        return `#${this.exitIntentId} {
+        return /*@fs-css-minify*/ `#${this.exitIntentId} {
 			z-index: ${MAX_ZINDEX};
 			border: 0;
 			background: transparent;

src/lib/services/loader/index.ts

@@ -50,7 +50,7 @@ export class Loader implements ILoader {
     }
 
     private getStyle(): string {
-        return `#${this.loaderElementId} {
+        return /*@fs-css-minify*/ `#${this.loaderElementId} {
 			display: none;
 			position: fixed;
 			z-index: ${MAX_ZINDEX - 1};

src/lib/services/style/index.ts

@@ -79,7 +79,7 @@ export class Style implements IStyle {
     }
 
     private getBasicStyle(): string {
-        return `body.${this.bodyScrollDisableClassName} {
+        return /*@fs-css-minify*/ `body.${this.bodyScrollDisableClassName} {
 			overflow: hidden !important;
 		}`;
     }

src/lib/utils/vite-plugins.ts

@@ -0,0 +1,31 @@
+import { PluginOption } from 'vite';
+
+export const minifyInlineCSS: PluginOption = {
+    name: 'fs-minify-inline-css',
+    transform(code, id) {
+        // We are only minifying TypeScript and JavaScript files.
+        if (!/\.(ts|js)$/.test(id)) {
+            return null;
+        }
+
+        // Regex to match CSS inside template literals starting with `/*@fs-css-minify*/`.
+        const cssRegex = /\/\*@fs-css-minify\*\/\s*`([^`]+)`/g;
+
+        // Check if the code contains any CSS to minify.
+        if (cssRegex.test(code)) {
+            // Replace all the CSS inside template literals with minified CSS.
+            code = code.replace(cssRegex, (_, css) => {
+                // Just remove the new lines and spaces.
+                css = css.replace(/\s+/g, ' ').trim();
+
+                // Return the minified CSS inside a template literal.
+                return `\`${css}\``;
+            });
+        }
+
+        return {
+            code,
+            map: null,
+        };
+    },
+};

vite.adapter.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
+import { minifyInlineCSS } from './src/lib/utils/vite-plugins';
 
 export default defineConfig({
     build: {
@@ -12,5 +13,7 @@ export default defineConfig({
             name: '__FSCheckoutAdapterInternal__',
             fileName: () => `checkout.js`,
         },
+        sourcemap: false,
     },
+    plugins: [minifyInlineCSS],
 });

vite.global.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
+import { minifyInlineCSS } from './src/lib/utils/vite-plugins';
 
 export default defineConfig({
     build: {
@@ -12,5 +13,7 @@ export default defineConfig({
             name: '__FSCheckoutGlobalInternal__',
             fileName: () => `checkout.js`,
         },
+        sourcemap: false,
     },
+    plugins: [minifyInlineCSS],
 });

vite.module.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
+import { minifyInlineCSS } from './src/lib/utils/vite-plugins';
 
 export default defineConfig({
     build: {
@@ -11,11 +12,13 @@ export default defineConfig({
             formats: ['es', 'cjs'],
             fileName: 'checkout',
         },
+        sourcemap: false,
     },
     plugins: [
         dts({
             insertTypesEntry: true,
             exclude: ['tests'],
         }),
+        minifyInlineCSS,
     ],
 });