makeover_webview/

build.rs

//! Build-script support: the generated files every webview consumer
//! materialises from its `build.rs`, and the checks that keep its hand-written
//! frontend agreeing with them.
//!
//! Behind the `build` feature, so a runtime consumer of the renderer does not
//! link `makeover`'s theme set. A consumer takes this crate twice: as a
//! dependency for the markup and as a build-dependency with `features =
//! ["build"]` for these files. `links` holds both to one version.
//!
//! Every consumer materialises the same generated files from a `build.rs`.
//! This is that code, once.
//!
//! # Density
//!
//! [`geometry_css`] keys the touch preset on capability: touch hangs off "not
//! a fine, hovering pointer" and never off a user-agent string or a
//! breakpoint. An app with a manual override passes the selector it sets to
//! `explicit_touch`.
//!
//! # Why these files are generated rather than checked in
//!
//! Tauri's resource globs are read by its CLI against the crate directory, so
//! they cannot point into a registry checkout or `OUT_DIR`. Materialising into
//! the crate keeps the source crate authoritative without vendoring a second
//! copy that drifts. Every path written here is expected to be gitignored.
//!
//! # The other half: what is checked rather than written
//!
//! A consumer's frontend is not all generated. The stylesheet and the scripts
//! are hand-written and state some of the same facts the generated files ask
//! the crates for, so they can drift where a generated file cannot. [`drift`]
//! holds the checks that keep them honest, and they are assertions rather than
//! substitutions on purpose: a file that has to be generated to be correct
//! stops being readable on its own.

pub mod drift;

use std::path::Path;

pub use drift::{Allow, Breakpoints, Vocabulary, check_touch_density, check_vocabulary_use};

/// The filenames [`typography_css`]'s `@font-face` rules fetch.
///
/// Re-exported so a consumer's `build.rs` needs no second dependency, and
/// load-bearing for a further reason: the consumer's own build script writes those two files, so the emitter
/// and the writer have to agree on the name. Through this they agree on a
/// constant rather than on a string typed in two repositories.
pub use makeover::{WEBFONT_MONO_FILE, WEBFONT_SANS_FILE};

/// Layer 0 of the font model, re-exported for the same one-dependency reason.
///
/// A build script composing an override needs all four names and has no other
/// reason to depend on `makeover` directly.
pub use makeover::{FontFace, FontOverride, FontSlot, Typography};

/// Write only when the bytes differ, so a generated file does not invalidate
/// the build script that generated it.
///
/// Every emitter here writes into a directory the drift checks also read, and
/// cargo compares a watched file's mtime against the build script's own
/// `output`. An unconditional write moves that mtime on every run, so every run
/// becomes the reason for the next one and the script runs on every build.
///
/// A read before each write costs microseconds, and the common
/// case is that nothing changed: these files are a pure function of the crate
/// version and the `Emit` options.
fn write_if_changed(path: &Path, contents: &str, what: &str) {
    if std::fs::read_to_string(path).is_ok_and(|existing| existing == contents) {
        return;
    }
    std::fs::write(path, contents).unwrap_or_else(|error| panic!("write {what}: {error}"));
}

/// The name of the file [`themes`] writes to record which themes it generated.
///
/// Read on the next run to tell a theme this run no longer ships from a
/// `.toml` the consumer wrote into the same directory, which this crate has no
/// business deleting. Not a `.toml`, so it never reads as a theme itself.
const THEMES_MANIFEST: &str = ".makeover-themes";

/// Write the themes `makeover` ships into `dir`, as `<id>.toml`.
///
/// Removes only the `.toml` files a previous run of this function generated
/// and upstream no longer ships, so a theme removed or renamed upstream does
/// not linger in the bundle from a previous build. A foreign `.toml` the
/// consumer placed in the same directory is not recorded and is left alone;
/// clearing by stem deleted a file this crate never wrote. Omitting the
/// cleanup shows up as a theme that will not go away.
///
/// # Panics
///
/// If the directory cannot be created, read, or written. A build script has
/// nowhere useful to return an error to, and a half-materialised theme set is
/// worse than a failed build.
pub fn themes(dir: impl AsRef<Path>) {
    let dir = dir.as_ref();
    std::fs::create_dir_all(dir).expect("create themes dir");

    let shipped: std::collections::BTreeSet<String> = makeover::embedded_themes()
        .map(|(id, _)| id.to_string())
        .collect();

    // Only what upstream no longer ships, and only what a previous run of this
    // function wrote: the manifest is the boundary between our generated
    // output and a consumer's own file. Clearing the directory first and
    // writing every theme back was the same thing by result and not by mtime:
    // it left `write_if_changed` nothing to compare against, so every build
    // rewrote every theme and the script invalidated itself through them.
    let manifest = dir.join(THEMES_MANIFEST);
    if let Ok(previous) = std::fs::read_to_string(&manifest) {
        for stem in previous.lines().filter(|line| !line.is_empty()) {
            if !shipped.contains(stem) {
                std::fs::remove_file(dir.join(format!("{stem}.toml"))).expect("remove stale theme");
            }
        }
    }

    for (id, source) in makeover::embedded_themes() {
        write_if_changed(&dir.join(format!("{id}.toml")), source, "theme");
    }

    // Written last, so it names only what this run actually produced. The
    // `write_if_changed` keeps it as stable as the themes it lists, which is
    // the same idempotency the theme files themselves get.
    let body = shipped.iter().cloned().collect::<Vec<_>>().join("\n");
    write_if_changed(&manifest, &body, "themes manifest");
}

/// Write `makeover-webview`'s component stylesheet to `path`.
///
/// Baked at build time rather than applied from JS the way the intent layer
/// is, because composition never changes at runtime: no theme may reach it, so
/// there is nothing to re-apply and no second pass over `:root` to pay for on
/// load.
///
/// # Panics
///
/// If the file cannot be written.
pub fn layout_css(path: impl AsRef<Path>, opts: &crate::Emit) {
    write_if_changed(path.as_ref(), &crate::stylesheet(opts), "layout css");
}

/// Write `makeover-geometry`'s spacing layer, with its canonical density
/// selection, to `path`.
///
/// The policy is the crate's, not this one's: touch hangs off
/// the negation of a fine, hovering pointer because density is a capability rather
/// than a device or a width, and `explicit_touch` names a selector an app sets
/// when the user has chosen. See [`makeover_geometry::density_css`]. All this
/// adds is the generated-file banner and the write.
///
/// Both spacing axes land here, in the order the crate defines them.
/// [`makeover_geometry::size_class_css`] follows the density block because it
/// is the narrower claim: density says what is pointing at the screen, size
/// class says how much screen there is, and on a compact window the two shells
/// tighten regardless of which density selected them.
///
/// # Panics
///
/// If the file cannot be written.
pub fn geometry_css(path: impl AsRef<Path>, explicit_touch: Option<&str>) {
    let mut css = String::from(
        "/* Generated by makeover-webview from makeover-geometry. Do not edit.\n   \
         Spacing is named by relationship, not by size. Touch density is a\n   \
         capability question: a narrow desktop window still has a pointer, a\n   \
         full-width tablet still has a finger. Window width is the separate\n   \
         question below it: on a compact window the two shells tighten. */\n",
    );
    css.push_str(&makeover_geometry::density_css(explicit_touch));
    css.push('\n');
    css.push_str(&makeover_geometry::size_class_css());
    write_if_changed(path.as_ref(), &css, "geometry css");
}

/// Write `makeover-timing`'s time axis, and the motion-off block that rides
/// with it, to `path`.
///
/// The third generated axis, and it arrives the same way the spacing one does:
/// a consumer that calls this gets `--timing-*`, `--motion-fade` and
/// `--cadence-activity` without stating a number anywhere. All this adds is the
/// banner and the write; `makeover_timing::timing_css` is the whole file and
/// already wraps itself in [`makeover_geometry::CSS_LAYER`].
///
/// # Its own file, for the reason geometry has its own file
///
/// One generated file per crate, named for the axis it carries. Time is not a
/// narrower claim about space the way size class is about density, so folding
/// it into `geometry.css` would leave a file whose banner names one crate and
/// whose contents come from two. The cost is a fourth `<link>` in the consumer,
/// which is the cost the family already pays three times.
///
/// # The `prefers-reduced-motion` block is not optional
///
/// `makeover_timing::timing_css` emits the `:root` values and then a media
/// block overriding two of them. Both land here, in that order, because they
/// are one statement: a sheet carrying only the values animates at every rung
/// for a reader who asked it not to, and does it silently.
///
/// # Panics
///
/// If the file cannot be written.
pub fn timing_css(path: impl AsRef<Path>) {
    let mut css = String::from(
        "/* Generated by makeover-webview from makeover-timing. Do not edit.\n   \
         A duration is named by what it is waiting for; the number follows.\n   \
         Three axes: how long a state lasts, how long a change takes, and how\n   \
         often a repeating mark repeats. The reduced-motion block below zeroes\n   \
         the last two and leaves the waits alone. A reader asking for less\n   \
         motion has not asked for a notice to leave early. */\n",
    );
    css.push_str(&makeover_timing::timing_css());
    write_if_changed(path.as_ref(), &css, "timing css");
}

/// Write the house typography layer to `path`: the two `@font-face` rules and
/// the two tokens they back.
///
/// `font_url` is the directory the consumer serves its fonts from, without a
/// trailing slash: `/static/fonts` on the MNW server, `fonts` for a Tauri
/// frontend loading relative to its index.
///
/// Generated rather than hand-written for the same reason the spacing layer is:
/// the facts are the crates' and stating them per app is how three apps came to
/// hold three different answers to `--font-mono`. It is a separate file from
/// the layout stylesheet because `@font-face` rules take no part in the
/// cascade and a consumer may need to load them ahead of a layer order it
/// declares elsewhere.
///
/// # The consumer still has to put the faces there
///
/// This writes the CSS that fetches `QuasiMono.woff2` and `QuasiBody.woff2`; it
/// does not write the fonts. It cannot: they are cut by `quasi-type`, which is
/// `publish = false`, and this crate is on crates.io. A consumer takes
/// quasi-type as a git dependency in its own `build.rs` and calls
/// `quasi_type::cut`, the way `shop-font` does, writing each slot's woff2 under
/// [`makeover::WEBFONT_MONO_FILE`] and [`makeover::WEBFONT_SANS_FILE`].
///
/// # Panics
///
/// If the file cannot be written.
pub fn typography_css(path: impl AsRef<Path>, font_url: &str) {
    typography_css_from(path, &makeover::Typography::house(font_url));
}

/// [`typography_css`], for a product that overrides a slot.
///
/// Layer 0 of the font model. A product with a brand face declares it here,
/// once, and the generated sheet carries both the `@font-face` and the token,
/// which replaces the hand-maintained `@font-face` block plus a
/// `--font-heading` nothing else in the tree knew about:
///
/// ```no_run
/// use makeover_webview::build::{FontFace, FontOverride, FontSlot, Typography};
///
/// makeover_webview::build::typography_css_from(
///     "static/typography.css",
///     &Typography::house("/static/fonts").with_override(
///         FontOverride::new(FontSlot::Display, "\"Young Serif\", serif")
///             .with_face(FontFace::new("Young Serif", ["ysrf.woff2", "ysrf.ttf"])),
///     ),
/// );
/// ```
///
/// The product still ships the face itself, exactly as it does for the house
/// two: this writes the CSS that fetches it and cannot produce a font.
///
/// # Panics
///
/// If the file cannot be written.
pub fn typography_css_from(path: impl AsRef<Path>, typography: &makeover::Typography) {
    let mut css = String::from(
        "/* Generated by makeover-webview from makeover. Do not edit.\n   \
         Two needs, two names, then a system generic. The faces are cut by\n   \
         quasi-type from Atkinson Hyperlegible plus the house glyph set, and\n   \
         both are variable over wght 200-800 in one file, which is why the\n   \
         @font-face rules name the range. The mono face opens at ExtraLight.\n   \
         A third token here is this product's own brand face, declared as an\n   \
         override in its build script. */\n\n",
    );
    css.push_str(&typography.css());
    write_if_changed(path.as_ref(), &css, "typography css");
}

/// All the generated files at the layout every Tauri consumer already uses:
/// `themes/` beside the manifest, and
/// `frontend/css/{geometry,timing,layout,typography}.css` under it.
///
/// Pass `env!("CARGO_MANIFEST_DIR")`. Consumers that want different paths call
/// [`themes`], [`layout_css`] and [`typography_css`] directly.
///
/// The font URL is `../fonts`. A `url()` in a stylesheet resolves against the
/// stylesheet rather than the page, so from `frontend/css/typography.css` that
/// is `frontend/fonts`: the one layout a Tauri app has, since its frontend is
/// served from its own directory.
///
/// # Panics
///
/// If any file cannot be written.
pub fn tauri_frontend(
    manifest_dir: impl AsRef<Path>,
    opts: &crate::Emit,
    explicit_touch: Option<&str>,
) {
    tauri_frontend_with(
        manifest_dir,
        opts,
        explicit_touch,
        &makeover::Typography::house("../fonts"),
    );
}

/// [`tauri_frontend`], for a product that overrides a font slot.
///
/// Separate rather than a fourth parameter, so an app with no font override
/// does not have to name the house typography.
///
/// The base URL is the caller's: pass `Typography::house("../fonts")` unless
/// the app serves fonts from somewhere other than the one layout a Tauri
/// frontend has.
///
/// # Panics
///
/// If any file cannot be written.
pub fn tauri_frontend_with(
    manifest_dir: impl AsRef<Path>,
    opts: &crate::Emit,
    explicit_touch: Option<&str>,
    typography: &makeover::Typography,
) {
    let root = manifest_dir.as_ref();
    let css = root.join("frontend").join("css");
    themes(root.join("themes"));
    geometry_css(css.join("geometry.css"), explicit_touch);
    // Beside geometry rather than after layout: both are value files the
    // component sheet reads, and a consumer's `<link>` order follows this one.
    timing_css(css.join("timing.css"));
    layout_css(css.join("layout.css"), opts);
    typography_css_from(css.join("typography.css"), typography);
}

#[cfg(test)]
mod tests {
    use super::*;

    /// A scratch directory keyed by process id, so a parallel test run does
    /// not collide. No timestamp: the pid is enough and is deterministic
    /// within a run.
    fn scratch(name: &str) -> std::path::PathBuf {
        let dir = std::env::temp_dir().join(format!(
            "makeover-webview-build-{}-{name}",
            std::process::id()
        ));
        let _ = std::fs::remove_dir_all(&dir);
        std::fs::create_dir_all(&dir).expect("create scratch");
        dir
    }

    #[test]
    fn themes_are_written_one_file_per_id() {
        let dir = scratch("themes");
        themes(&dir);
        // `.toml` only: the run also writes the manifest, which is not a theme.
        let count = std::fs::read_dir(&dir)
            .unwrap()
            .flatten()
            .filter(|entry| entry.path().extension().is_some_and(|ext| ext == "toml"))
            .count();
        assert_eq!(count, makeover::embedded_themes().count());
        assert!(count > 0, "makeover ships no themes?");
    }

    #[test]
    fn a_theme_removed_upstream_does_not_linger() {
        // The detail that makes this worth sharing rather than retyping. A
        // previous run generated `gone-upstream.toml` and recorded it in the
        // manifest; this run no longer ships it, so the recorded entry is what
        // marks the file stale.
        let dir = scratch("stale");
        std::fs::write(dir.join("gone-upstream.toml"), "# stale").unwrap();
        std::fs::write(dir.join(THEMES_MANIFEST), "gone-upstream\n").unwrap();
        themes(&dir);
        assert!(!dir.join("gone-upstream.toml").exists());
    }

    #[test]
    fn a_foreign_toml_that_was_not_generated_survives() {
        // The manifest is the boundary: a `.toml` the consumer placed here was
        // never generated by `themes`, so a rebuild must not clear it the way
        // the old by-stem sweep did.
        let dir = scratch("foreign");
        std::fs::write(dir.join("user-custom.toml"), "# mine").unwrap();
        themes(&dir);
        assert!(dir.join("user-custom.toml").exists());
    }

    #[test]
    fn a_second_run_touches_nothing() {
        // The property the whole write-if-changed pass exists for: a build
        // script that rewrites its own outputs invalidates itself, and cargo
        // then reruns it on every build whatever changed. Asserted on mtime
        // rather than on content, because content was always correct; it was
        // the mtime that was the bug.
        let dir = scratch("idempotent");
        themes(&dir);
        let before: Vec<_> = std::fs::read_dir(&dir)
            .unwrap()
            .flatten()
            .map(|e| (e.path(), e.metadata().unwrap().modified().unwrap()))
            .collect();
        assert!(!before.is_empty(), "themes() wrote nothing to compare");

        themes(&dir);
        for (path, was) in before {
            let now = std::fs::metadata(&path).unwrap().modified().unwrap();
            assert_eq!(
                was,
                now,
                "{} was rewritten by a second run with nothing changed",
                path.display()
            );
        }
    }

    #[test]
    fn a_non_theme_file_is_left_alone() {
        // Only .toml is cleared, so a README or a .gitignore in the bundle
        // directory survives a rebuild.
        let dir = scratch("keep");
        std::fs::write(dir.join("README.md"), "not a theme").unwrap();
        themes(&dir);
        assert!(dir.join("README.md").exists());
    }

    #[test]
    fn the_stylesheet_lands_and_names_no_colour() {
        let dir = scratch("css");
        let path = dir.join("layout.css");
        layout_css(&path, &crate::Emit::default());
        let css = std::fs::read_to_string(&path).unwrap();
        assert!(css.contains("--bevel-raised"));
        assert!(
            !css.contains('#'),
            "a colour literal reached a build output"
        );
    }

    #[test]
    fn the_typography_file_declares_the_faces_before_the_tokens_that_name_them() {
        // The vocabulary itself is tested in makeover. What is this crate's
        // job is that both halves reach one file, in an order that works: a
        // `@font-face` may follow its use in the cascade, but reading the file
        // is how anyone finds out a face is fetched at all.
        let dir = scratch("typography");
        let path = dir.join("typography.css");
        typography_css(&path, "/static/fonts");
        let css = std::fs::read_to_string(&path).unwrap();

        assert!(css.starts_with("/* Generated by makeover-webview"));
        assert!(
            css.find("@font-face").unwrap() < css.find(":root").unwrap(),
            "the tokens come first, so the file reads as a stack with no ground"
        );
        assert!(css.contains("url(\"/static/fonts/QuasiMono.woff2\")"));
        assert!(css.contains("--font-sans: \"Quasi Body\", sans-serif;"));

        // Not a cascade layer. `@font-face` takes no part in the cascade and a
        // consumer may need these rules ahead of a layer order it declares
        // elsewhere, so wrapping this file in one would be a silent trap.
        assert!(!css.contains("@layer"));
    }

    #[test]
    fn an_overridden_slot_reaches_the_same_file_as_the_house_two() {
        // Layer 0's whole point: the brand face stops being a hand-maintained
        // `@font-face` in the app's own stylesheet and becomes a line in the
        // generated one, beside the slots it sits next to.
        let dir = scratch("typography-override");
        let path = dir.join("typography.css");
        typography_css_from(
            &path,
            &Typography::house("/static/fonts").with_override(
                FontOverride::new(FontSlot::Display, "\"Young Serif\", serif")
                    .with_face(FontFace::new("Young Serif", ["ysrf.woff2", "ysrf.ttf"])),
            ),
        );
        let css = std::fs::read_to_string(&path).unwrap();

        // `@font-face {`, not `@font-face`: the header comment names the
        // at-rule too, and counting that would make this pass for the wrong
        // reason the day the comment is reworded.
        assert_eq!(css.matches("@font-face {").count(), 3);
        assert!(css.contains("--font-display: \"Young Serif\", serif;"));
        assert!(css.contains("--font-mono: \"Quasi Mono\", monospace;"));
        assert!(css.contains("url(\"/static/fonts/ysrf.ttf\") format(\"truetype\")"));
        assert!(!css.contains("@layer"));
    }

    #[test]
    fn the_default_tauri_layout_is_the_house_layer_and_nothing_else() {
        // `tauri_frontend` delegating through `tauri_frontend_with` must not
        // change a byte for the three consumers already calling it.
        let dir = scratch("tauri-default");
        let plain = dir.join("plain.css");
        let house = dir.join("house.css");
        typography_css(&plain, "../fonts");
        typography_css_from(&house, &Typography::house("../fonts"));
        assert_eq!(
            std::fs::read_to_string(&plain).unwrap(),
            std::fs::read_to_string(&house).unwrap()
        );
    }

    #[test]
    fn the_geometry_file_carries_the_crates_policy_and_a_banner() {
        // The policy itself is tested in makeover-geometry. What is this
        // crate's job is that the banner is there and the policy reached the
        // file at all.
        let dir = scratch("geometry");
        let path = dir.join("geometry.css");
        geometry_css(&path, Some(".ui-mode-mobile"));
        let css = std::fs::read_to_string(&path).unwrap();
        assert!(css.starts_with("/* Generated by makeover-webview"));
        assert!(css.contains(&format!(
            "@media {}",
            makeover_geometry::Density::Touch.media_condition()
        )));
        assert!(css.contains(".ui-mode-mobile"));
        // The width axis rides along, and only the shells are in it: a gap
        // between two controls in a width query is the bug size_class_css
        // exists to keep out.
        assert!(css.contains("--gap-pane"), "no compact shell override");
        let compact = css
            .split(&format!(
                "@media {}",
                makeover_geometry::SizeClass::Compact.media_condition()
            ))
            .nth(1)
            .expect("compact block");
        assert!(
            !compact.contains("--gap-peer"),
            "a control gap crept into a width query"
        );
    }

    #[test]
    fn the_timing_file_carries_the_values_and_the_block_that_overrides_them() {
        // The rungs themselves are tested in makeover-timing. What is this
        // crate's to get wrong is dropping half the file: the values are
        // useless noise without the media block, and the media block on its
        // own overrides nothing.
        let dir = scratch("timing");
        let path = dir.join("timing.css");
        timing_css(&path);
        let css = std::fs::read_to_string(&path).unwrap();
        assert!(css.starts_with("/* Generated by makeover-webview"));
        // One token per axis, so a crate that grows a fourth axis and is not
        // emitted here fails somewhere other than on screen.
        assert!(css.contains("--timing-dismiss"), "no intent tokens");
        assert!(css.contains("--motion-fade"), "no motion token");
        assert!(css.contains("--cadence-activity"), "no cadence token");
        assert!(
            css.contains("@media (prefers-reduced-motion: reduce)"),
            "the values shipped without the block that turns them off"
        );
        // The block comes after the values it overrides. Same specificity,
        // so the order is the whole of the win.
        assert!(
            css.find(":root").unwrap() < css.find("prefers-reduced-motion").unwrap(),
            "the motion-off block cannot override values declared after it"
        );
        // Inside the family's layer, like every other generated sheet:
        // unlayered declarations outrank every named layer, so a generated
        // file outside it beats the app's own overrides.
        assert!(css.contains(makeover_geometry::CSS_LAYER));
    }

    #[test]
    fn the_tauri_layout_puts_all_four_where_the_apps_look() {
        let root = scratch("tauri");
        std::fs::create_dir_all(root.join("frontend").join("css")).unwrap();
        tauri_frontend(&root, &crate::Emit::default(), None);
        let css = root.join("frontend").join("css");
        for file in ["geometry.css", "timing.css", "layout.css", "typography.css"] {
            assert!(css.join(file).exists(), "{file} was not written");
        }
        assert!(root.join("themes").is_dir());
    }
}