M4.96: Window › CSS Properties shows, copies and exports the CSS of the selection

The svg crate's new CSS writer (css_rules) gives the CSS web pages style objects
with: rectangles and ellipses as background-color / linear-/radial-gradient(),
border and border-radius; type as font, color, spacing and alignment; shadows,
glows and blur as box-shadow, text-shadow and filter. It shares SVG export's
declarations (transparency, fonts, type spacing, colours, gradient stops), which
moved into svg/src/css.rs. Options: units, absolute position, width and height,
unnamed objects, rasterize unsupported art (as a PNG background-image).

Commands css.selection, css.generate and css.export; UI commands css.copy and
css.exportFile; the CSS Properties panel with a highlighted code view.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

crates/engine/src/cmd/css.rs

@@ -0,0 +1,129 @@
+//! Window → CSS Properties: the CSS web pages style objects with ([`vectorcraft_svg::css_rules`],
+//! which writes each property as SVG export writes it), for the selection or the whole document,
+//! and the `.css` file with the pictures of the art it rasterizes.
+
+use serde::Deserialize;
+use serde_json::{Value, json};
+use vectorcraft_doc::NodeId;
+use vectorcraft_svg::{CssOptions, CssSheet, css_rules};
+
+use super::fileio::{default_name, encode, isolated, write_file};
+use super::*;
+
+pub fn specs() -> Vec<CommandSpec> {
+    vec![
+        cmd!(
+            query "css.selection",
+            "CSS Properties",
+            [],
+            None,
+            "{ids?: [id…] (default: the selection), units?: px|pt|mm|cm|in (default px; 1 px = 1 pt, as in SVG export), position?: false (position: absolute, left and top from the artboard's top-left), dimensions?: true (width, height), unnamed?: true (unnamed objects too, classes named after their kind; false: named objects only), rasterize?: false (art CSS can't describe as background-image: url(<class>.png), its picture, which css.export writes)} the CSS web pages style the objects with, one rule per object back to front (layers and plain groups stand for what they hold): a rectangle's or ellipse's fill as background-color or linear-/radial-gradient(), stroke as border, corners as border-radius; type's font, color, spacing and alignment; opacity, mix-blend-mode, shadows and glows (box-shadow, text-shadow), blur (filter) → {css, rules: [{id, selector, css, unsupported?: why CSS can't describe the art exactly (without rasterize it is written as its box), image?: the PNG it refers to}], skipped: n unnamed objects left out, warnings}",
+            has_doc,
+            selection
+        ),
+        cmd!(query "css.generate", "Generate CSS", [], None, "{…css.selection options} css.selection of every object in the document", has_doc, generate),
+        cmd!(
+            "css.export",
+            "Export CSS",
+            [],
+            None,
+            "{path?, scope?: selection|all (default selection; ids? picks the objects), …css.selection options} write the CSS (css.selection, or css.generate for all) to path and, with rasterize, each picture its rules refer to next to it (PNG of the object's visual bounds, 1 px per point) → {path, bytes, rules: n, images: [path…], warnings}; no path → {data: the CSS, name: <document>.css, rules, images: [{name, dataBase64}], warnings}",
+            has_doc,
+            export
+        ),
+    ]
+}
+
+/// The CSS options of `p` (its other params are the command's own).
+fn options(p: &Value, cmd: &str) -> Result<CssOptions> {
+    if !p.is_object() {
+        return Ok(CssOptions::default());
+    }
+    CssOptions::deserialize(p).map_err(|e| bad(cmd, format!("CSS options: {e}")))
+}
+
+/// The CSS of objects `ids` (back to front) with the options of `p`.
+fn sheet(s: &Session, p: &Value, ids: Vec<NodeId>, cmd: &str) -> Result<CssSheet> {
+    let opts = options(p, cmd)?;
+    let d = &s.doc()?.doc;
+    Ok(css_rules(d, &d.paint_order(ids), &opts))
+}
+
+/// Every object of the active document: its layers.
+fn everything(s: &Session) -> Result<Vec<NodeId>> {
+    Ok(s.doc()?.doc.layers.iter().map(|l| l.id).collect())
+}
+
+fn result(sheet: &CssSheet) -> Value {
+    let rules: Vec<Value> = sheet
+        .rules
+        .iter()
+        .map(|r| {
+            let mut v = json!({ "id": r.id.0, "selector": r.selector, "css": r.text() });
+            if let Some(why) = r.unsupported {
+                v["unsupported"] = json!(why);
+            }
+            if let Some(image) = &r.image {
+                v["image"] = json!(image);
+            }
+            v
+        })
+        .collect();
+    json!({ "css": sheet.text(), "rules": rules, "skipped": sheet.skipped, "warnings": sheet.warnings })
+}
+
+fn selection(s: &mut Session, p: &Value) -> Result<Value> {
+    let ids = targets(s, p)?;
+    Ok(result(&sheet(s, p, ids, "css.selection")?))
+}
+
+fn generate(s: &mut Session, p: &Value) -> Result<Value> {
+    let ids = everything(s)?;
+    Ok(result(&sheet(s, p, ids, "css.generate")?))
+}
+
+fn export(s: &mut Session, p: &Value) -> Result<Value> {
+    const C: &str = "css.export";
+    let ids = match str_param(p, "scope").unwrap_or("selection") {
+        "selection" => targets(s, p)?,
+        "all" => everything(s)?,
+        other => return Err(bad(C, format!("scope must be selection or all (got {other})"))),
+    };
+    let sheet = sheet(s, p, ids, C)?;
+    if sheet.rules.is_empty() {
+        let why = if sheet.skipped > 0 {
+            "the objects are unnamed: name them, or give unnamed: true"
+        } else {
+            "no objects to export: select some, or give scope: all"
+        };
+        return Err(bad(C, why));
+    }
+    let css = format!("{}\n", sheet.text());
+    let doc = &s.doc()?.doc;
+    // The pictures of rasterized art.
+    let mut images = Vec::new();
+    for r in &sheet.rules {
+        let Some(name) = &r.image else { continue };
+        let (d, _) = isolated(doc, &[r.id], name).ok_or_else(|| bad(C, format!("{} paints nothing to rasterize", r.selector)))?;
+        images.push((name, encode(&d, "png", &json!({}))?));
+    }
+    let n = sheet.rules.len();
+    match str_param(p, "path") {
+        Some(path) => {
+            write_file(path, css.as_bytes())?;
+            let folder = std::path::Path::new(path).parent();
+            let mut written = Vec::new();
+            for (name, bytes) in &images {
+                let at = folder.map_or_else(|| name.to_string(), |f| f.join(name).to_string_lossy().into_owned());
+                write_file(&at, bytes)?;
+                written.push(at);
+            }
+            Ok(json!({ "path": path, "bytes": css.len(), "rules": n, "images": written, "warnings": sheet.warnings }))
+        }
+        None => {
+            let images: Vec<Value> =
+                images.iter().map(|(name, bytes)| json!({ "name": name, "dataBase64": vectorcraft_format::base64_encode(bytes) })).collect();
+            Ok(json!({ "data": css, "name": default_name(doc, "css"), "rules": n, "images": images, "warnings": sheet.warnings }))
+        }
+    }
+}

crates/engine/src/cmd/fileio/export.rs

@@ -131,7 +131,7 @@ fn selection(s: &mut Session, cmd: &str) -> Result<(Document, vectorcraft_geom::
 
 /// Objects `ids` of `doc` alone on one layer (in that order, back to front), with one artboard
 /// named `name`: their visual bounds (`None` when they have none).
-pub(super) fn isolated(doc: &Document, ids: &[NodeId], name: &str) -> Option<(Document, vectorcraft_geom::Rect)> {
+pub(crate) fn isolated(doc: &Document, ids: &[NodeId], name: &str) -> Option<(Document, vectorcraft_geom::Rect)> {
     let nodes: Vec<Arc<Node>> = ids.iter().filter_map(|id| doc.node(*id).cloned().map(Arc::new)).collect();
     let bounds = nodes.iter().filter_map(|n| n.visual_bounds()).reduce(|a, b| a.union(b))?;
     let mut d = single_artboard(doc, bounds, name);

crates/engine/src/cmd/fileio/mod.rs

@@ -45,6 +45,7 @@ pub use dxf::{UNSUPPORTED, Unsupported, unsupported};
 pub use encode::{ARTBOARD_PARAMS, ArtboardPick, Encoded, encode, encode_all, encode_with_warnings};
 pub(crate) use encode::{anti_alias, background, with_single_artboard};
 pub use export::export_source;
+pub(crate) use export::isolated;
 use load::err;
 pub(crate) use load::import_svg;
 pub(crate) use load::native_file;
@@ -789,7 +790,7 @@ pub(crate) fn merge(mut a: Value, b: Value) -> Value {
 }
 
 /// A file name for bytes handed back without a path: the document's title with `ext`.
-fn default_name(doc: &vectorcraft_doc::Document, ext: &str) -> String {
+pub(crate) fn default_name(doc: &vectorcraft_doc::Document, ext: &str) -> String {
     let stem = std::path::Path::new(&doc.title).file_stem().map(|s| s.to_string_lossy().into_owned()).filter(|s| !s.is_empty());
     format!("{}.{ext}", stem.as_deref().unwrap_or("Untitled"))
 }

crates/engine/src/cmd/mod.rs

@@ -10,6 +10,7 @@ mod colorcmds;
 pub mod colormgmt;
 pub mod colortheme;
 mod create;
+mod css;
 pub(crate) mod distortcmds;
 mod docinfo;
 mod docmenu;
@@ -237,6 +238,7 @@ pub fn command_specs() -> &'static [CommandSpec] {
         v.extend(fileio::dxfimport::specs());
         v.extend(webexport::specs());
         v.extend(assets::specs());
+        v.extend(css::specs());
         v
     })
 }