🚀 optimize svg with csso

packages/demo/demo.svg.ts

@@ -7,8 +7,11 @@ import { getPathToPose } from "@snk/compute/getPathToPose";
 
 const chain = getBestRoute(grid, snake);
 chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
-const svg = createSvg(grid, chain, drawOptions, { frameDuration: 200 });
 
-const container = document.createElement("div");
-container.innerHTML = svg;
-document.body.appendChild(container);
+(async () => {
+  const svg = await createSvg(grid, chain, drawOptions, { frameDuration: 200 });
+
+  const container = document.createElement("div");
+  container.innerHTML = svg;
+  document.body.appendChild(container);
+})();

packages/svg-creator/__tests__/createSvg.spec.ts

@@ -24,12 +24,12 @@ try {
 } catch (err) {}
 
 for (const [key, grid] of Object.entries(grids))
-  it(`should generate ${key} svg`, () => {
+  it(`should generate ${key} svg`, async () => {
     const chain = [snake, ...getBestRoute(grid, snake)!];
 
-    const gif = createSvg(grid, chain, drawOptions, gifOptions);
+    const svg = await createSvg(grid, chain, drawOptions, gifOptions);
 
-    expect(gif).toBeDefined();
+    expect(svg).toBeDefined();
 
-    fs.writeFileSync(path.resolve(dir, key + ".svg"), gif);
+    fs.writeFileSync(path.resolve(dir, key + ".svg"), svg);
   });

packages/svg-creator/index.ts

@@ -12,7 +12,8 @@ import type { Point } from "@snk/types/point";
 import { createSnake } from "./snake";
 import { createGrid } from "./grid";
 import { createStack } from "./stack";
-import { toAttribute } from "./utils";
+import { h } from "./utils";
+import csso from "csso";
 
 export type Options = {
   colorDots: Record<Color, string>;
@@ -99,14 +100,12 @@ export const createSvg = (
     .join("");
 
   const svg = [
-    `<svg 
-        ${toAttribute({
-          viewBox,
-          width,
-          height,
-          xmlns: "http://www.w3.org/2000/svg",
-        })}
-      >`,
+    h("svg", {
+      viewBox,
+      width,
+      height,
+      xmlns: "http://www.w3.org/2000/svg",
+    }).replace("/>", ">"),
 
     "<style>",
     optimizeCss(style),
@@ -120,5 +119,5 @@ export const createSvg = (
   return optimizeSvg(svg);
 };
 
-const optimizeCss = (css: string) => css;
+const optimizeCss = (css: string) => csso.minify(css).css;
 const optimizeSvg = (svg: string) => svg;

packages/svg-creator/package.json

@@ -2,6 +2,10 @@
   "name": "@snk/svg-creator",
   "version": "1.0.0",
   "dependencies": {
-    "@snk/compute": "1.0.0"
+    "@snk/compute": "1.0.0",
+    "csso": "4.1.0"
+  },
+  "devDependencies": {
+    "@types/csso": "3.5.1"
   }
 }