feat: Added minification to CSS

compiled.js

@@ -1,56 +0,0 @@
-(function() {
-    if (typeof Handlebars === 'undefined') {
-        const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js';
-        document.head.appendChild(script);
-    }
-
-    const tempDefine = window.define;
-    window.define = undefined;
-
-    const script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js';
-
-    script.onload = function() {
-        window.define = tempDefine; 
-        
-        if (eval("(function() {\n    return window.location.pathname === \"\";\n})()\n")) {
-    (function() {
-    
-
-    const parsedData = eval("" || "(() => ({}))");
-    const template = Handlebars.compile("");
-    const rendered = template(parsedData);
-    const targetElement = document.querySelector(".foo { color: red; }");
-
-    const temp = document.createElement('template');
-    temp.innerHTML = rendered;
-
-    const newElement = temp.content.firstElementChild;
-
-    targetElement.replaceWith(newElement);
-
-    newElement.classList.add("template-style-762112231");
-
-    (function() {
-        
-    })();
-})();
-
-}
-if (eval("(function() {\n    return window.location.pathname === \"\";\n})()\n")) {
-    
-}
-
-
-        const domReadyEvent = new Event('DOMContentLoaded', {
-            bubbles: true,
-            cancelable: true,
-        });
-
-        document.dispatchEvent(domReadyEvent);
-        window.dispatchEvent(domReadyEvent);
-    };
-
-    document.head.appendChild(script);
-})()

src/compiler/models_impl.rs

@@ -1,7 +1,7 @@
 use indoc::indoc;
 use serde_json;
 
-use crate::css::scope_css;
+use crate::css::{minify_css, scope_css};
 
 use crate::compiler::models::{PageRoute, Project, Template};
 use crate::js::minify_javascript;
@@ -24,6 +24,9 @@ impl Project {
 
                 script.onload = function() {
                     window.define = tempDefine; 
+                    window.Handlebars.registerHelper('eq', function (a, b) {
+                      return a === b;
+                    });
                     
                     {pages_script}
 
@@ -42,21 +45,18 @@ impl Project {
         let mut script = String::new();
 
         for page in &self.pages {
-            let style_script = page
+            let style_script = page.style.as_ref().map_or(String::new(), |s| {
-                .style
+                format!(
-                .as_ref()
+                    r#"
-                .map_or(String::new(), |s| {
-                    format!(
-                        r#"
                         (function() {{
                             const styleElement = document.createElement('style');
                             styleElement.textContent = {style};
                             document.head.appendChild(styleElement);
                         }})();
                     "#,
-                        style = serde_json::to_string(s).unwrap()
+                    style = serde_json::to_string(&minify_css(s)).unwrap()
-                    )
+                )
-                });
+            });
 
             let template_script = indoc! { r#"
                 if (eval({page_route})) {
@@ -130,7 +130,7 @@ impl Template {
                         styleElement.textContent = {style};
                         document.head.appendChild(styleElement);
                     "#,
-                        style = serde_json::to_string(s).unwrap()
+                        style = serde_json::to_string(&minify_css(s)).unwrap()
                     )
                 });
 
@@ -200,10 +200,7 @@ impl Template {
                 "# };
 
                 script_template
-                    .replace(
+                    .replace("{style_script}", &style_script.trim())
-                        "{style_script}",
-                        &style_script.trim(),
-                    )
                     .replace("{script}", &script)
                     .replace(
                         "{template}",

src/css.rs

@@ -3,6 +3,35 @@ use lightningcss::{
     targets::{Browsers, Targets},
 };
 
+pub fn minify_css(raw_css: &str) -> String {
+    let stylesheet = StyleSheet::parse(
+        raw_css,
+        ParserOptions {
+            flags: ParserFlags::NESTING,
+            ..ParserOptions::default()
+        },
+    )
+    .expect("Failed to parse CSS");
+
+    let targets = Targets {
+        browsers: Some(Browsers {
+            chrome: Some(90 << 16), 
+            ..Browsers::default()
+        }),
+        ..Targets::default()
+    };
+
+    let printed = stylesheet
+        .to_css(PrinterOptions {
+            minify: true, 
+            targets,
+            ..PrinterOptions::default()
+        })
+        .expect("Failed to serialize CSS");
+
+    printed.code
+}
+
 pub fn scope_css(raw_css: &str, scope_class: &str) -> String {
     let nested_css = format!(".{} {{\n{}\n}}", scope_class, raw_css);