critters_rs/

lib.rs

//! # critters-rs
//!
//! A fast and efficient critical CSS extraction library for Rust, inspired by Google Chrome's Critters.
//!
//! Critical CSS extraction involves analyzing HTML documents to identify which CSS rules are actually
//! used on the page, inlining only those critical styles while deferring the loading of non-critical
//! styles. This significantly improves page load performance by reducing render-blocking CSS.
//!
//! ## Features
//!
//! - **HTML parsing and CSS extraction**: Processes HTML documents to identify critical CSS selectors
//! - **Multiple preload strategies**: Configurable strategies for handling non-critical CSS (body-preload, media, swap, etc.)
//! - **Font preloading**: Automatic detection and preloading of critical fonts
//! - **Keyframe optimization**: Intelligent handling of CSS animations and keyframes
//! - **External stylesheet support**: Processes both inline styles and external CSS files
//! - **High performance**: Built with Rust for speed and efficiency
//!
//! ## Basic Usage
//!
//! ```rust,no_run
#![doc = include_str!("../examples/basic_usage.rs")]
//! ```
//!
//! ## Advanced Configuration
//!
//! See [`CrittersOptions`] for all available configuration options.
//!
//! ```rust,no_run
#![doc = include_str!("../examples/advanced_config.rs")]
//! ```

use html::traits::TendrilSink;
use html::{NodeData, NodeRef};
use itertools::Itertools;
use lightningcss::printer::PrinterOptions;
use lightningcss::properties::PropertyId;
use lightningcss::rules::{font_face::FontFaceProperty, keyframes::KeyframesName, CssRule};
use lightningcss::selector::SelectorList;
use lightningcss::stylesheet::StyleSheet;
use lightningcss::traits::ToCss;
use lightningcss::values::ident::CustomIdent;
use log::{debug, error, warn};
use path_clean::PathClean;
use regex::Regex;
use serde::{Deserialize, Serialize};
use std::collections::HashSet;
use std::fs;
use std::{default, path};
use utils::{is_valid_media_query, regex, NodeRefExt, StyleRuleExt};

#[cfg(feature = "use-napi")]
use napi_derive::napi;

use crate::html::{style_calculation, Selectors};

#[doc(hidden)]
pub mod html;
mod utils;

#[derive(Debug, Clone, Default, Serialize, Deserialize, clap::ValueEnum)]
#[cfg_attr(feature = "typegen", derive(ts_rs::TS))]
pub enum PreloadStrategy {
    /// Move stylesheet links to the end of the document and insert preload meta tags in their place.
    #[default]
    BodyPreload,
    /// Move all external stylesheet links to the end of the document.
    Body,
    /// Load stylesheets asynchronously by adding media="not x" and removing once loaded. JS
    Media,
    /// Convert stylesheet links to preloads that swap to rel="stylesheet" once loaded (details). JS
    Swap,
    /// Use <link rel="alternate stylesheet preload"> and swap to rel="stylesheet" once loaded (details). JS
    SwapHigh,
    // /// Inject an asynchronous CSS loader similar to LoadCSS and use it to load stylesheets. JS
    // Js,
    // /// Like "js", but the stylesheet is disabled until fully loaded.
    // JsLazy,
    /// Disables adding preload tags.
    None,
}

#[derive(Debug, Clone, Default, Serialize, Deserialize, clap::ValueEnum)]
#[cfg_attr(feature = "typegen", derive(ts_rs::TS))]
pub enum KeyframesStrategy {
    /// Inline keyframes rules used by the critical CSS
    #[default]
    Critical,
    /// Inline all keyframes rules
    All,
    /// Remove all keyframes rules
    None,
}

#[derive(Debug, Clone)]
pub enum Matcher {
    String(String),
    Regex(Regex),
}
impl Matcher {
    pub fn matches(&self, value: &str) -> bool {
        match self {
            Matcher::Regex(regex) => regex.is_match(value),
            Matcher::String(exp) => exp == value,
        }
    }
}

#[deprecated(note = "Use `Matcher` instead.")]
pub use Matcher as SelectorMatcher;

impl Serialize for Matcher {
    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
    where
        S: serde::Serializer,
    {
        serializer.serialize_str(match self {
            Self::Regex(r) => r.as_str(),
            Self::String(s) => s,
        })
    }
}
impl<'de> Deserialize<'de> for Matcher {
    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
    where
        D: serde::Deserializer<'de>,
    {
        let s = String::deserialize(deserializer)?;

        if s.starts_with('/') && s.ends_with('/') {
            Regex::new(&s[1..s.len() - 1])
                .map(Self::Regex)
                .map_err(|e| {
                    serde::de::Error::custom(format!("Failed to parse regular expression. {e}"))
                })
        } else {
            Ok(Self::String(s))
        }
    }
}

#[derive(Debug, Clone, Serialize, Deserialize, clap::Args)]
#[serde(default, rename_all = "camelCase")]
#[cfg_attr(feature = "typegen", derive(ts_rs::TS))]
#[cfg_attr(feature = "typegen", ts(export))]
pub struct CrittersOptions {
    /// Base path location of the CSS files
    #[clap(short, long)]
    pub path: String,
    /// Public path of the CSS resources. This prefix is removed from the href.
    #[clap(long, default_value_t)]
    pub public_path: String,
    /// Inline styles from external stylesheets
    #[clap(long, action = clap::ArgAction::Set, default_value_t = true)]
    pub external: bool,
    /// Inline stylesheets smaller than a given size.
    #[clap(long, default_value_t)]
    pub inline_threshold: u32,
    /// If the non-critical external stylesheet would be below this size, just inline it
    #[clap(long, default_value_t)]
    pub minimum_external_size: u32,
    /// Remove inlined rules from the external stylesheet
    #[clap(long)]
    pub prune_source: bool,
    /// Merge inlined stylesheets into a single `<style>` tag
    #[clap(long, action = clap::ArgAction::Set, default_value_t = true)]
    pub merge_stylesheets: bool,
    /// Glob for matching other stylesheets to be used while looking for critical CSS.
    #[clap(long)]
    pub additional_stylesheets: Vec<String>,
    /// Option indicates if inline styles should be evaluated for critical CSS. By default
    /// inline style tags will be evaluated and rewritten to only contain critical CSS.
    /// Set it to false to skip processing inline styles.
    #[clap(long, action = clap::ArgAction::Set, default_value_t = true)]
    pub reduce_inline_styles: bool,
    /// Which preload strategy to use.
    #[clap(long, default_value = "body-preload")]
    pub preload: PreloadStrategy,
    /// Add `<noscript>` fallback to JS-based strategies.
    #[clap(long, action = clap::ArgAction::Set, default_value_t = true)]
    pub noscript_fallback: bool,
    /// Inline critical font-face rules.
    #[clap(long)]
    pub inline_fonts: bool,
    /// Preloads critical fonts
    #[clap(long, action = clap::ArgAction::Set, default_value_t = true)]
    pub preload_fonts: bool,
    /// Controls which keyframes rules are inlined.
    #[clap(long, default_value = "critical")]
    pub keyframes: KeyframesStrategy,
    /// Compress resulting critical CSS
    #[clap(long, action = clap::ArgAction::Set, default_value_t = true)]
    pub compress: bool,
    /// Provide a list of selectors that should be included in the critical CSS.
    #[clap(skip)]
    #[cfg_attr(feature = "typegen", ts(as = "Vec<String>"))]
    pub allow_rules: Vec<Matcher>,
    /// List of external stylesheets that should be inlined without an external
    /// stylesheet reference. Links to these stylesheets will be removed, and
    /// only the matched selectors will be preserved.
    #[clap(skip)]
    #[cfg_attr(feature = "typegen", ts(as = "Vec<String>"))]
    pub exclude_external: Vec<Matcher>,
}

/// Statistics resulting from `Critters::process_dir`.
#[derive(Debug)]
#[cfg(any(feature = "cli", feature = "use-napi"))]
#[cfg_attr(feature = "use-napi", napi)]
pub struct CrittersDirectoryStats {
    /// Total duration of processing, in seconds
    pub time_sec: f64,
    /// Number of pages processed
    pub pages: u32,
    // TODO: add more stats
}

impl default::Default for CrittersOptions {
    fn default() -> Self {
        Self {
            path: Default::default(),
            public_path: Default::default(),
            external: true,
            inline_threshold: 0,
            minimum_external_size: 0,
            prune_source: false,
            merge_stylesheets: true,
            additional_stylesheets: Default::default(),
            reduce_inline_styles: true,
            preload: Default::default(),
            noscript_fallback: true,
            inline_fonts: false,
            preload_fonts: true,
            keyframes: Default::default(),
            compress: true,
            allow_rules: Default::default(),
            exclude_external: Default::default(),
        }
    }
}

#[derive(Clone)]
#[cfg_attr(feature = "use-napi", napi)]
pub struct Critters {
    options: CrittersOptions,
}

#[cfg(feature = "use-napi")]
#[napi]
impl Critters {
    #[napi(constructor)]
    pub fn new(options: Option<serde_json::Value>) -> anyhow::Result<Self> {
        use anyhow::anyhow;
        // try to initialize the logger, ignore error if it has already been initialized
        env_logger::try_init().ok();
        let options: CrittersOptions = match options {
            Some(options) => serde_json::from_value(options)
                .map_err(|e| anyhow!("Failed to parse options: {}", e))?,
            None => Default::default(),
        };
        Ok(Critters { options })
    }

    /// Process the given HTML, extracting and inlining critical CSS
    #[napi]
    pub fn process(&self, html: String) -> anyhow::Result<String> {
        self.process_impl(&html)
    }

    /// Process all HTML files in the configured directory
    #[napi]
    pub fn process_dir(&self) -> anyhow::Result<CrittersDirectoryStats> {
        self.process_dir_impl(None)
    }
}

impl Critters {
    #[cfg(not(feature = "use-napi"))]
    pub fn new(options: CrittersOptions) -> Self {
        Critters { options }
    }

    /// Process the given HTML, extracting and inlining critical CSS
    #[cfg(not(feature = "use-napi"))]
    pub fn process(&self, html: &str) -> anyhow::Result<String> {
        self.process_impl(html)
    }

    /// Process the given HTML, extracting and inlining critical CSS
    fn process_impl(&self, html: &str) -> anyhow::Result<String> {
        // Parse the HTML into a DOM
        let parser = html::parse_html();
        let dom = parser.one(html);

        let mut styles = Vec::new();

        // Inline styles
        if self.options.reduce_inline_styles {
            styles.append(&mut self.get_inline_stylesheets(&dom));
        }

        // External stylesheets
        if self.options.external {
            styles.append(&mut self.get_external_stylesheets(&dom));
        }

        // Additional stylesheets
        if !self.options.additional_stylesheets.is_empty() {
            styles.append(&mut self.get_additional_stylesheets(&dom)?);
        }

        // Extract and inline critical CSS
        debug!("Inlining {} stylesheets.", styles.len());
        for style in styles.iter() {
            let res = self.process_style_el(style, dom.clone());
            // Log processing errors and skip associated stylesheets
            if let Err(err) = res {
                error!(
                    "Error encountered when processing stylesheet, skipping. {}",
                    err
                );
            }
        }

        // Merge stylesheets
        if self.options.merge_stylesheets {
            self.merge_stylesheets(styles)
        }

        // Serialize back to an HTML string
        let mut result = Vec::new();
        dom.serialize(&mut result)?;
        Ok(String::from_utf8(result)?)
    }

    /// Process all HTML files in the configured directory
    #[cfg(feature = "cli")]
    pub fn process_dir(
        &self,
        multi_progress: Option<&indicatif::MultiProgress>,
    ) -> anyhow::Result<CrittersDirectoryStats> {
        self.process_dir_impl(multi_progress)
    }

    /// Process all HTML files in the configured directory
    #[cfg(feature = "directory")]
    fn process_dir_impl(
        &self,
        multi_progress: Option<&indicatif::MultiProgress>,
    ) -> anyhow::Result<CrittersDirectoryStats> {
        use indicatif::{ParallelProgressIterator, ProgressBar};
        use log::info;
        use rayon::prelude::*;
        use std::time::Instant;
        use utils::ProgressBarExt;

        let files = utils::locate_html_files(&self.options.path)?;

        let start = Instant::now();
        let progress_bar = ProgressBar::new(files.len() as u64)
            .with_crate_style()
            .with_prefix("Inlining Critical CSS");
        let progress_bar = if let Some(multi) = multi_progress {
            multi.add(progress_bar)
        } else {
            progress_bar
        };

        files
            .par_iter()
            .progress_with(progress_bar.clone())
            .for_each(|path| {
                let start = Instant::now();

                let html =
                    fs::read_to_string(path.clone()).expect("Failed to load HTML file from disk.");
                let processed = match self.process_impl(&html) {
                    Ok(s) => s,
                    Err(e) => {
                        error!("Failed to process file {} with error {e}", path.display());
                        return;
                    }
                };
                fs::write(path.clone(), processed).expect("Failed to write HTML file to disk.");

                let duration = start.elapsed();

                info!(
                    "Processed {} in {} ms",
                    path.strip_prefix(&self.options.path).unwrap().display(),
                    duration.as_millis()
                );
            });

        progress_bar.finish_and_clear();
        if let Some(multi) = multi_progress {
            multi.remove(&progress_bar);
        }
        Ok(CrittersDirectoryStats {
            pages: files.len() as u32,
            time_sec: start.elapsed().as_secs_f64(),
        })
    }

    /// Gets inline styles from the document.
    fn get_inline_stylesheets(&self, dom: &NodeRef) -> Vec<NodeRef> {
        dom.select("style")
            .unwrap()
            .map(|n| n.as_node().clone())
            .collect()
    }

    /// Resolve links to external stylesheets, inlining them and replacing the link with a preload strategy.
    fn get_external_stylesheets(&self, dom: &NodeRef) -> Vec<NodeRef> {
        let external_sheets: Vec<_> = dom.select("link[rel=\"stylesheet\"]").unwrap().collect();

        external_sheets
            .iter()
            .filter_map(|link| {
                self.inline_external_stylesheet(link.as_node(), dom)
                    .unwrap_or_else(|e| {
                        error!("Failed to inline external stylesheet. {e}");
                        None
                    })
            })
            .collect()
    }

    /// Resolve styles for the provided additional stylesheets, if any, and append them to the head.
    fn get_additional_stylesheets(&self, dom: &NodeRef) -> anyhow::Result<Vec<NodeRef>> {
        self.options
            .additional_stylesheets
            .iter()
            .sorted()
            .dedup()
            .filter_map(|href| self.get_css_asset(href))
            .map(|css| self.inject_style(&css, dom))
            .collect()
    }

    /// Parse the given stylesheet and reduce it to contain only the nodes present in the given document.
    fn process_style(&self, sheet: &str, dom: NodeRef) -> anyhow::Result<String> {
        let critters_container = dom
            .select_first("[data-critters-container]")
            .unwrap_or_else(|_| dom.select_first("body").unwrap());
        let mut failed_selectors = Vec::new();
        let mut rules_to_remove = HashSet::new();
        let mut critical_keyframe_names: HashSet<String> = HashSet::new();
        let mut critical_fonts = String::new();

        let mut ast = StyleSheet::parse(sheet, Default::default())
            .map_err(|_| anyhow::Error::msg("Failed to parse stylesheet."))?;

        // Precompute list of used selectors
        let all_selectors = ast
            .rules
            .0
            .iter()
            .filter_map(|rule| match rule {
                CssRule::Style(style_rule) => Some(style_rule.selectors.clone()),
                _ => None,
            })
            .filter_map(|selectors| {
                match Selectors::compile(
                    &selectors
                        .to_css_string(Default::default())
                        .expect("Failed to write selector to string"),
                ) {
                    Ok(selectors) => Some(selectors),
                    Err(err) => {
                        failed_selectors.push(format!("{} -> {:?}", selectors, err));
                        None
                    }
                }
            })
            .flat_map(|selectors| selectors.0)
            .collect::<HashSet<_>>();

        let used_selectors = style_calculation::calculate_styles_for_tree(
            &critters_container,
            all_selectors.clone(),
        )
        .iter()
        .map(|sel| sel.to_string())
        .collect::<HashSet<_>>();

        // TODO: use a visitor to handle nested rules
        // First pass, mark rules not present in the document for removal
        for rule in &mut ast.rules.0 {
            if let CssRule::Style(style_rule) = rule {
                let global_pseudo_regex = regex!(r"^::?(before|after)$");

                // Filter selectors based on their usage in the document
                let filtered_selectors = style_rule
                    .selectors
                    .0
                    .iter()
                    .filter(|sel| {
                        let selector = sel.to_css_string(Default::default()).unwrap();
                        // easy selectors
                        if selector == ":root"
                            || selector == "html"
                            || selector == "body"
                            || global_pseudo_regex.is_match(&selector)
                        {
                            return true;
                        }

                        // allow rules
                        if self
                            .options
                            .allow_rules
                            .iter()
                            .any(|m| m.matches(&selector))
                        {
                            return true;
                        }

                        // check DOM for elements matching selector
                        // TODO: consider including failed selectors (mainly pseudo selectors)
                        // by inverting this check to exclude unused selectors
                        used_selectors.contains(&selector)
                    })
                    .cloned()
                    .collect::<Vec<_>>();

                if filtered_selectors.is_empty() {
                    rules_to_remove.insert(style_rule.id());
                    continue;
                } else {
                    style_rule.selectors = SelectorList::new(filtered_selectors.into());
                }

                // Detect and collect keyframes and font usage
                for decl in &style_rule.declarations.declarations {
                    if matches!(
                        decl.property_id(),
                        PropertyId::Animation(_) | PropertyId::AnimationName(_)
                    ) {
                        let value = decl.value_to_css_string(Default::default()).unwrap();
                        for v in value.split_whitespace() {
                            if !v.trim().is_empty() {
                                critical_keyframe_names.insert(v.trim().to_string());
                            }
                        }
                    }

                    if matches!(decl.property_id(), PropertyId::FontFamily) {
                        critical_fonts.push_str(
                            format!(
                                " {}",
                                &decl.value_to_css_string(Default::default()).unwrap()
                            )
                            .as_str(),
                        );
                    }
                }
            }
        }

        let mut preloaded_fonts = HashSet::new();
        let original_rules = ast.rules.0.len();
        ast.rules.0.retain(|rule| match rule {
            CssRule::Style(s) => !rules_to_remove.contains(&s.id()),
            CssRule::Keyframes(k) => {
                // TODO: keyframes mode options
                let kf_name = match &k.name {
                    KeyframesName::Ident(CustomIdent(id)) | KeyframesName::Custom(id) => id,
                };
                critical_keyframe_names.contains(&kf_name.to_string())
            }
            CssRule::FontFace(f) => {
                let href_regex = regex!(r#"url\s*\(\s*(['"]?)(.+?)\1\s*\)"#, fancy_regex::Regex);
                let mut href = None;
                let mut family = None;

                for p in &f.properties {
                    match p {
                        FontFaceProperty::Source(s) => {
                            let src = s.to_css_string(Default::default()).unwrap();
                            href = href_regex
                                .captures(&src)
                                .unwrap()
                                .and_then(|m| m.get(2).map(|c| c.as_str().to_string()));
                        }
                        FontFaceProperty::FontFamily(f) => {
                            family = Some(f.to_css_string(Default::default()).unwrap())
                        }
                        _ => (),
                    }
                }

                // add preload directive to head
                if href.is_some()
                    && self.options.preload_fonts
                    && !preloaded_fonts.contains(href.as_ref().unwrap())
                {
                    let href = href.clone().unwrap();
                    if let Err(e) = self.inject_font_preload(&href, &dom) {
                        error!("Failed to inject font preload directive. {e}");
                    }
                    preloaded_fonts.insert(href);
                }

                self.options.inline_fonts
                    && family.is_some()
                    && href.as_ref().is_some()
                    && critical_fonts.contains(&family.unwrap())
            }
            _ => true,
        });

        debug!(
            "Removed {}/{} rules.",
            original_rules - ast.rules.0.len(),
            original_rules
        );

        // serialize stylesheet
        let css = ast.to_css(PrinterOptions {
            minify: self.options.compress,
            ..Default::default()
        })?;

        Ok(css.code)
    }

    /// Parse the stylesheet within a <style> element, then reduce it to contain only rules used by the document.
    fn process_style_el(&self, style: &NodeRef, dom: NodeRef) -> anyhow::Result<()> {
        let style_child = match style.children().nth(0) {
            Some(c) => c,
            // skip empty stylesheets
            None => return Ok(()),
        };
        let style_data = style_child.data();

        let sheet = match style_data {
            NodeData::Text(t) => t.borrow().to_string(),
            _ => return Err(anyhow::Error::msg("Invalid style tag")),
        };

        // skip empty stylesheets
        if sheet.is_empty() {
            return Ok(());
        }

        let css = self.process_style(&sheet, dom)?;

        // remove all existing text from style node
        style.children().for_each(|c| c.detach());
        style.append(NodeRef::new_text(css));

        Ok(())
    }

    /// Given href, find the corresponding CSS asset
    fn get_css_asset(&self, href: &str) -> Option<String> {
        let output_path = &self.options.path;
        let output_path_absolute = path::absolute(&self.options.path).unwrap();
        let public_path = &self.options.public_path;

        // CHECK - the output path
        // path on disk (with output.publicPath removed)
        let mut normalized_path = href.strip_prefix("/").unwrap_or(href);
        let path_prefix = regex!(r"(^\/|\/$)").replace_all(public_path, "") + "/";

        if normalized_path.starts_with(&*path_prefix) {
            normalized_path = normalized_path
                .strip_prefix(&*path_prefix)
                .unwrap_or(normalized_path);
            normalized_path = normalized_path.strip_prefix("/").unwrap_or(normalized_path);
        }

        // Ignore remote stylesheets
        if regex!(r"^https?:\/\/").is_match(normalized_path) || href.starts_with("//") {
            return None;
        }

        let filename = match path::absolute(path::Path::new(output_path).join(normalized_path)) {
            Ok(path) => path.clean(),
            Err(e) => {
                warn!(
                    "Failed to resolve path with output path {} and href {}. {e}",
                    output_path, normalized_path
                );
                return None;
            }
        };

        // Check if the resolved path is valid
        if !filename.starts_with(&output_path_absolute) {
            warn!(
                "Matched stylesheet with path \"{}\", which is not within the configured output path \"{}\".",
                filename.display(),
                output_path_absolute.display()
            );
            return None;
        }

        match fs::read_to_string(filename.clone()) {
            Ok(sheet) => Some(sheet),
            Err(e) => {
                error!(
                    "Loading stylesheet at path \"{}\" failed. {e}",
                    filename.display()
                );
                None
            }
        }
    }

    /// Inline the provided stylesheet link, provided it matches the filtering options. Add preload markers for the external stylesheet as necessary.
    fn inline_external_stylesheet(
        &self,
        link: &NodeRef,
        dom: &NodeRef,
    ) -> anyhow::Result<Option<NodeRef>> {
        let link_el = link.as_element().unwrap();
        let link_attrs = link_el.attributes.borrow();
        let href = match link_attrs.get("href") {
            Some(v) if v.ends_with(".css") => v.to_owned(),
            _ => return Ok(None),
        };
        drop(link_attrs);

        let sheet = match self.get_css_asset(&href) {
            Some(v) => v,
            None => return Ok(None),
        };

        let style = NodeRef::new_html_element("style", vec![]);
        style.append(NodeRef::new_text(sheet));
        link.insert_before(style.clone());

        // TODO: inline threshold?

        if self
            .options
            .exclude_external
            .iter()
            .any(|m| m.matches(&href))
        {
            link.detach();
            return Ok(Some(style));
        }

        let body = dom
            .select_first("body")
            .map_err(|_| anyhow::Error::msg("Failed to locate document body"))?;

        let update_link_to_preload = || {
            let mut link_attrs = link_el.attributes.borrow_mut();
            link_attrs.insert("rel", "preload".to_string());
            link_attrs.insert("as", "style".to_string());
        };

        let noscript_link = NodeRef::new(link.data().clone());
        let inject_noscript_fallback = || {
            let noscript = NodeRef::new_html_element("noscript", Vec::new());
            let noscript_link_el = noscript_link.as_element().unwrap();
            let mut noscript_link_attrs = noscript_link_el.attributes.borrow_mut();
            noscript_link_attrs.remove("id");
            drop(noscript_link_attrs);
            noscript.append(noscript_link);
            link.insert_before(noscript);
        };

        match self.options.preload {
            PreloadStrategy::BodyPreload => {
                // create new identical link
                let body_link = NodeRef::new(link.data().clone());

                // If an ID is present, remove it to avoid collisions.
                let mut body_link_attrs = body_link.as_element().unwrap().attributes.borrow_mut();
                body_link_attrs.remove("id");
                drop(body_link_attrs);

                body.as_node().append(body_link);

                update_link_to_preload();
            }
            PreloadStrategy::Body => body.as_node().append(link.clone()),
            PreloadStrategy::Media => {
                let mut link_attrs = link_el.attributes.borrow_mut();
                let media = link_attrs.get("media").and_then(|m| {
                    // avoid script injection
                    is_valid_media_query(m).then(|| m.to_string())
                });
                link_attrs.insert("media", "print".to_string());
                link_attrs.insert(
                    "onload",
                    format!("this.media='{}'", media.unwrap_or("all".to_string())),
                );
                drop(link_attrs);

                inject_noscript_fallback();
            }
            PreloadStrategy::Swap => {
                let mut link_attrs = link_el.attributes.borrow_mut();
                link_attrs.insert("onload", "this.rel='stylesheet'".to_string());
                drop(link_attrs);

                update_link_to_preload();
                inject_noscript_fallback();
            }
            PreloadStrategy::SwapHigh => {
                let mut link_attrs = link_el.attributes.borrow_mut();
                link_attrs.insert("rel", "alternate stylesheet preload".to_string());
                link_attrs.insert("as", "style".to_string());
                link_attrs.insert("title", "styles".to_string());
                link_attrs.insert("onload", "this.title='';this.rel='stylesheet'".to_string());
                drop(link_attrs);

                inject_noscript_fallback();
            }
            // PreloadStrategy::Js | PreloadStrategy::JsLazy => todo!(),
            PreloadStrategy::None => (),
        };

        Ok(Some(style))
    }

    /// Inject the given CSS stylesheet as a new <style> tag in the DOM
    fn inject_style(&self, sheet: &str, dom: &NodeRef) -> anyhow::Result<NodeRef> {
        let head = dom
            .select_first("head")
            .map_err(|_| anyhow::Error::msg("Failed to locate <head> element in DOM."))?;
        let style_node = NodeRef::new_html_element("style", vec![]);

        style_node.append(NodeRef::new_text(sheet));
        head.as_node().append(style_node.clone());

        Ok(style_node)
    }

    /// Injects a preload directive into the head for the given font URL.
    fn inject_font_preload(&self, font: &str, dom: &NodeRef) -> anyhow::Result<()> {
        let head = dom
            .select_first("head")
            .map_err(|_| anyhow::Error::msg("Failed to locate <head> element in DOM."))?;

        head.as_node().append(NodeRef::new_html_element(
            "link",
            vec![
                ("rel", "preload"),
                ("as", "font"),
                ("crossorigin", "anonymous"),
                ("href", font.trim()),
            ],
        ));

        Ok(())
    }

    fn merge_stylesheets(&self, styles: Vec<NodeRef>) {
        let mut styles_iter = styles.into_iter().rev();
        let first = match styles_iter.next() {
            Some(f) => match f.first_child() {
                Some(c) => c,
                None => return,
            },
            None => return,
        };

        let mut sheet = first.text_contents();
        for style in styles_iter {
            sheet += &style.text_contents();
            style.detach();
        }

        first.into_text_ref().unwrap().replace(sheet);
    }
}

#[cfg(all(test, not(feature = "use-napi")))]
mod tests {
    use std::fs::File;
    use std::io::Write;
    use tempdir::TempDir;
    use test_log::test;

    use super::*;

    const BASIC_CSS: &str = r#"
        .critical { color: red; }
        .non-critical { color: blue; }
    "#;

    const BASIC_HTML: &str = r#"
        <html>
            <head>
                <style>
                    .critical { color: red; }
                    .non-critical { color: blue; }
                </style>
            </head>
            <body>
                <div class="critical">Hello World</div>
            </body>
        </html>
    "#;

    fn construct_html(head: &str, body: &str) -> String {
        format!(
            r#"
            <html>
                <head>
                    {head}
                </head>
                <body>
                    {body}
                </body>
            </html>
            "#
        )
    }

    /// Given a dictionary of paths and file contents, construct a temporary directory structure.
    ///
    /// Returns the path to the created temporary folder.
    fn create_test_folder(files: &[(&str, &str)]) -> String {
        let tmp_dir = TempDir::new("dist").expect("Failed to create temporary directory");

        for (path, contents) in files {
            let file_path = tmp_dir.path().join(path);
            let mut tmp_file = File::create(file_path).unwrap();
            writeln!(tmp_file, "{}", contents).unwrap();
        }

        tmp_dir.into_path().to_string_lossy().to_string()
    }

    #[test]
    fn basic() {
        let critters = Critters::new(Default::default());

        let processed = critters.process(BASIC_HTML).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let stylesheet = dom.select_first("style").unwrap().text_contents();

        assert!(stylesheet.contains(".critical"));
        assert!(!stylesheet.contains(".non-critical"));
    }

    #[test]
    fn complex() {
        let critters = Critters::new(Default::default());

        let html = construct_html(
            r#"<style>
                .red { color: red; }
                .green { color: green; }
                .blue { color: blue; }
                .purple { color: purple; }
                .link-underline > a { text-decoration: underline; }
            </style>"#,
            r#"<div>
                <h1 class="red">This is a heading</h1>
                <p class="purple link-underline">
                    This is some body text
                    <a>This should be underlined</a>
                </p>
            </div>"#,
        );

        let processed = critters.process(&html).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let stylesheet = dom.select_first("style").unwrap().text_contents();

        assert!(stylesheet.contains(".red"));
        assert!(stylesheet.contains(".purple"));
        assert!(stylesheet.contains(".link-underline>a"));
        assert!(!stylesheet.contains(".green"));
        assert!(!stylesheet.contains(".blue"));
    }

    #[test]
    fn font_preload() {
        let html = construct_html(
            r#"<style>
                @font-face {
                  font-family: "Trickster";
                  src:
                    local("Trickster"),
                    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
                    url("trickster-outline.otf") format("opentype"),
                    url("trickster-outline.woff") format("woff");
                }
            </style>"#,
            "",
        );
        let critters = Critters::new(Default::default());

        let processed = critters.process(&html).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let preload = dom
            .select_first("head > link[rel=preload]")
            .expect("Failed to locate preload link.");
        let preload_attrs = preload.attributes.borrow();

        assert_eq!(preload_attrs.get("rel"), Some("preload"));
        assert_eq!(preload_attrs.get("as"), Some("font"));
        assert_eq!(preload_attrs.get("crossorigin"), Some("anonymous"));
        assert_eq!(preload_attrs.get("href"), Some("trickster-COLRv1.otf"));
    }

    #[test]
    fn external_stylesheet() {
        let tmp_dir = create_test_folder(&[("external.css", BASIC_CSS)]);

        let html = construct_html(
            r#"<link rel="stylesheet" href="external.css" />"#,
            r#"<div class="critical">Hello world</div>"#,
        );

        let critters = Critters::new(CrittersOptions {
            path: tmp_dir,
            external: true,
            preload: PreloadStrategy::BodyPreload,
            ..Default::default()
        });

        let processed = critters
            .process(&html)
            .expect("Failed to inline critical css");

        let parser = html::parse_html();
        let dom = parser.one(processed);

        let preload_link = dom
            .select_first("head > link[rel=preload]")
            .expect("Failed to locate preload link.");
        assert_eq!(
            preload_link.attributes.borrow().get("href"),
            Some("external.css")
        );
        assert_eq!(preload_link.attributes.borrow().get("as"), Some("style"));

        let stylesheet = dom
            .select_first("style")
            .expect("Failed to locate inline stylesheet")
            .text_contents();
        assert!(stylesheet.contains(".critical"));
        assert!(!stylesheet.contains(".non-critical"));

        let stylesheet_link = dom
            .select_first("body > link[rel=stylesheet]:last-child")
            .expect("Failed to locate external stylesheet link.");
        assert_eq!(
            stylesheet_link.attributes.borrow().get("rel"),
            Some("stylesheet")
        );
        assert_eq!(
            stylesheet_link.attributes.borrow().get("href"),
            Some("external.css")
        );
    }

    #[test]
    fn external_stylesheet_exclude() {
        let tmp_dir = create_test_folder(&[("external.css", BASIC_CSS)]);

        let html = construct_html(
            r#"<link rel="stylesheet" href="external.css" />"#,
            r#"<div class="critical">Hello world</div>"#,
        );

        let critters = Critters::new(CrittersOptions {
            path: tmp_dir,
            external: true,
            preload: PreloadStrategy::BodyPreload,
            exclude_external: vec![Matcher::Regex(Regex::new("external\\.css$").unwrap())],
            ..Default::default()
        });

        let processed = critters
            .process(&html)
            .expect("Failed to inline critical css");

        let parser = html::parse_html();
        let dom = parser.one(processed);

        dom.select_first("link[rel=preload]")
            .expect_err("Unexpected preload link.");

        let stylesheet = dom
            .select_first("style")
            .expect("Failed to locate inline stylesheet")
            .text_contents();
        assert!(stylesheet.contains(".critical"));
        assert!(!stylesheet.contains(".non-critical"));

        dom.select_first("link[rel=stylesheet]")
            .expect_err("Unexpected external stylesheet link.");
    }

    #[test]
    fn additional_stylesheets() {
        let tmp_dir = create_test_folder(&[(
            "add.css",
            ".critical { background-color: blue; } .non-critical { background-color: red; }",
        )]);

        let critters = Critters::new(CrittersOptions {
            path: tmp_dir,
            merge_stylesheets: false,
            additional_stylesheets: vec!["add.css".to_string()],
            ..Default::default()
        });

        let processed = critters.process(BASIC_HTML).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let stylesheets: Vec<_> = dom
            .select("style")
            .unwrap()
            .map(|s| s.text_contents())
            .collect();

        assert_eq!(stylesheets.len(), 2);
        assert!(stylesheets[0].contains(".critical{color:red}"));
        assert!(!stylesheets[0].contains(".non-critical"));
        assert!(stylesheets[1].contains(".critical{background-color"));
        assert!(!stylesheets[1].contains(".non-critical"));
    }

    #[test]
    fn merge_stylesheets() {
        let tmp_dir = create_test_folder(&[(
            "add.css",
            ".critical { background-color: blue; } .non-critical { background-color: red; }",
        )]);

        let critters = Critters::new(CrittersOptions {
            path: tmp_dir,
            merge_stylesheets: true,
            additional_stylesheets: vec!["add.css".to_string()],
            ..Default::default()
        });

        let processed = critters.process(BASIC_HTML).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let stylesheets: Vec<_> = dom
            .select("style")
            .unwrap()
            .map(|s| s.text_contents())
            .collect();

        assert_eq!(stylesheets.len(), 1);
        let stylesheet = &stylesheets[0];
        assert!(stylesheet.contains(".critical{color:red}"));
        assert!(!stylesheet.contains(".non-critical"));
        assert!(stylesheet.contains(".critical{background-color"));
        assert!(!stylesheet.contains(".non-critical"));
    }

    fn setup_preload_test(strategy: PreloadStrategy, link_attrs: Vec<(&str, &str)>) -> NodeRef {
        let tmp_dir = create_test_folder(&[("external.css", BASIC_CSS)]);

        let html = construct_html(
            &format!(
                r#"<link rel="stylesheet" href="external.css" {} />"#,
                link_attrs
                    .iter()
                    .map(|(k, v)| format!(r#"{k}="{v}""#))
                    .join(" ")
            ),
            r#"<div class="critical">Hello world</div>"#,
        );

        let critters = Critters::new(CrittersOptions {
            path: tmp_dir,
            external: true,
            preload: strategy,
            ..Default::default()
        });

        let processed = critters
            .process(&html)
            .expect("Failed to inline critical css");

        let parser = html::parse_html();

        parser.one(processed)
    }

    fn get_noscript_link(noscript_el: &NodeRef) -> NodeRef {
        use markup5ever::{local_name, namespace_url, ns, QualName};

        let noscript_text = noscript_el
            .children()
            .exactly_one()
            .expect("Could not get noscript text content.");
        let noscript_text_val = noscript_text.as_text().unwrap().borrow().clone();

        let ctx_name = QualName::new(None, ns!(html), local_name!("link"));
        let parser = html::parse_fragment(ctx_name, vec![]);
        let noscript_doc = parser.one(noscript_text_val);
        let noscript_child = noscript_doc
            .first_child()
            .expect("Could not get noscript link element.")
            .first_child()
            .expect("Could not get noscript link element.");
        let noscript_child_el = noscript_child.as_element().unwrap();

        assert_eq!(
            noscript_child_el.name.local,
            markup5ever::LocalName::from("link")
        );

        noscript_child
    }

    #[test]
    fn preload_swap() {
        let dom = setup_preload_test(PreloadStrategy::Swap, vec![]);

        let preload_link = dom
            .select_first("head > link[rel=preload]")
            .expect("Failed to locate preload link.");
        assert_eq!(
            preload_link.attributes.borrow().get("href"),
            Some("external.css")
        );
        assert_eq!(preload_link.attributes.borrow().get("as"), Some("style"));

        let noscript_el = dom
            .select_first("noscript")
            .expect("Failed to locate noscript link");
        let noscript_link = get_noscript_link(noscript_el.as_node());
        let noscript_link_el = noscript_link.as_element().unwrap();

        assert_eq!(
            noscript_link_el.attributes.borrow().get("rel"),
            Some("stylesheet")
        );
        assert_eq!(
            noscript_link_el.attributes.borrow().get("href"),
            Some("external.css")
        );
    }

    #[test]
    fn preload_swap_high() {
        let dom = setup_preload_test(PreloadStrategy::SwapHigh, vec![]);

        let preload_link = dom
            .select_first("head > link[rel~=preload]")
            .expect("Failed to locate preload link.");
        assert_eq!(
            preload_link.attributes.borrow().get("href"),
            Some("external.css")
        );
        assert_eq!(
            preload_link.attributes.borrow().get("rel"),
            Some("alternate stylesheet preload")
        );
        assert_eq!(preload_link.attributes.borrow().get("as"), Some("style"));
        assert_eq!(
            preload_link.attributes.borrow().get("title"),
            Some("styles")
        );
        assert_eq!(
            preload_link.attributes.borrow().get("onload"),
            Some("this.title='';this.rel='stylesheet'")
        );

        let noscript_el = dom
            .select_first("noscript")
            .expect("Failed to locate noscript link");
        let noscript_link = get_noscript_link(noscript_el.as_node());
        let noscript_link_el = noscript_link.as_element().unwrap();

        assert_eq!(
            noscript_link_el.attributes.borrow().get("rel"),
            Some("stylesheet")
        );
        assert_eq!(
            noscript_link_el.attributes.borrow().get("href"),
            Some("external.css")
        );
    }

    #[test]
    fn preload_media() {
        let dom = setup_preload_test(PreloadStrategy::Media, vec![("media", "test")]);

        let preload_link = dom
            .select_first("head > link[media=print]")
            .expect("Failed to locate preload link.");
        assert_eq!(
            preload_link.attributes.borrow().get("onload"),
            Some("this.media='test'")
        );

        let noscript_el = dom
            .select_first("noscript")
            .expect("Failed to locate noscript link");
        let noscript_link = get_noscript_link(noscript_el.as_node());
        let noscript_link_el = noscript_link.as_element().unwrap();

        assert_eq!(
            noscript_link_el.attributes.borrow().get("rel"),
            Some("stylesheet")
        );
        assert_eq!(
            noscript_link_el.attributes.borrow().get("href"),
            Some("external.css")
        );
    }

    #[test]
    fn allow_rules_string() {
        let critters = Critters::new(CrittersOptions {
            allow_rules: vec![Matcher::String(".non-critical".to_string())],
            ..Default::default()
        });

        let processed = critters.process(BASIC_HTML).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let stylesheet = dom.select_first("style").unwrap().text_contents();

        assert!(stylesheet.contains(".critical"));
        assert!(stylesheet.contains(".non-critical"));
    }

    #[test]
    fn allow_rules_regex() {
        let critters = Critters::new(CrittersOptions {
            allow_rules: vec![Matcher::Regex(Regex::new("^.non").unwrap())],
            ..Default::default()
        });

        let processed = critters.process(BASIC_HTML).unwrap();

        let parser = html::parse_html();
        let dom = parser.one(processed);
        let stylesheet = dom.select_first("style").unwrap().text_contents();

        assert!(stylesheet.contains(".critical"));
        assert!(stylesheet.contains(".non-critical"));
    }
}