feat(inline): append new classes to existing ones

Signed-off-by: Mark Sagi-Kazar <[email protected]>
lumeland · Jan 19, 2025 · 6135761 · 6135761
1 parent ed2fea3
commit 6135761
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,9 @@ Go to the `v1` branch to see the changelog of Lume 1.
   `localhost` value to something else.
 - New `--open, -o` argument to `lume cms` to open automatically in the browser.
 
+### Changed
+- `inline`: Append classes to existing ones. [#722]
+
 ### Fixed
 - `google_fonts`: Fixed subset names for `[1]`, `[2]`, etc [#692].
 - Normalize watcher ignored paths [#716]

diff --git a/plugins/inline.ts b/plugins/inline.ts
@@ -49,16 +49,13 @@ export function inline(userOptions?: Options) {
     async function inline(page: Page) {
       const templateElements = Array.from(
         page.document!.querySelectorAll("template"),
-      )
-        .flatMap((template) =>
-          Array.from(template.content.querySelectorAll(selector))
-        );
-      for (
-        const element of [
-          ...Array.from(page.document!.querySelectorAll(selector)),
-          ...templateElements,
-        ]
-      ) {
+      ).flatMap((template) =>
+        Array.from(template.content.querySelectorAll(selector)),
+      );
+      for (const element of [
+        ...Array.from(page.document!.querySelectorAll(selector)),
+        ...templateElements,
+      ]) {
         await runInline(page.data.url, element);
         element.removeAttribute(options.attribute);
       }
@@ -122,9 +119,18 @@ export function inline(userOptions?: Options) {
     ) {
       for (const { name, value } of Array.from(from.attributes)) {
         const shouldCopy = [...attributes, ...options.copyAttributes].some(
-          (attr) => attr instanceof RegExp ? attr.test(name) : attr === name,
+          (attr) => (attr instanceof RegExp ? attr.test(name) : attr === name),
         );
-        if (shouldCopy && !to.hasAttribute(name)) {
+
+        if (!shouldCopy) {
+          continue;
+        }
+
+        if (name == "class") {
+          to.classList.add(
+            ...value.split(" ").filter((value: string) => value != ""),
+          );
+        } else if (!to.hasAttribute(name)) {
           to.setAttribute(name, value);
         }
       }

diff --git a/tests/__snapshots__/inline.test.ts.snap b/tests/__snapshots__/inline.test.ts.snap
@@ -118,6 +118,7 @@ snapshot[`inline plugin 1`] = `
   ],
   src: [
     "/",
+    "/favicon-with-class.svg",
     "/favicon.svg",
     "/index.vto",
     "/other favicon.png",
@@ -169,6 +170,46 @@ snapshot[`inline plugin 3`] = `
       remote: undefined,
     },
   },
+  {
+    content: '<?xml version="1.0" encoding="UTF-8"?>
+<svg width="126px" height="126px" class="foo" viewBox="0 0 126 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M52.8683497,7.99450751 C48.9069025,24.0969979 69.1669662,21.1536885 69.1669662,44.7198348 C75.794917,37.1051328 70.4463322,26.8453748 81.058456,17.1725913 C81.058456,39.3863344 102.155357,38.1365645 94.0121919,69.2249916 C97.7866664,66.9118477 100.501055,63.103682 102.155357,57.8004944 C105.491398,63.103682 104.245257,72.5297487 98.416934,86.0786945 C103.547554,83.9150474 106.558165,80.9232746 108.378132,76.7271327 C109.04106,105.964869 89.5062156,126.366871 61.9867103,125.995028 C34.467205,125.623185 13.5784967,101.642443 18.2649214,71.802957 C18.9624768,74.9072731 21.5182769,78.5533566 25.1832626,80.0729101 C18.6891247,50.7321037 30.922502,49.6337285 36.0056643,33.9730813 C35.1796585,42.297059 36.0056643,46.924952 40.0208236,51.7593505 C40.7309276,49.6474958 42.0145668,47.6388953 43.3724725,45.627895 L43.7620351,45.0531669 C43.8271552,44.9573376 43.892336,44.86148 43.9575234,44.7655828 L44.5429346,43.9011285 C47.3268507,39.7628977 49.8240593,35.4880393 47.7482658,30.1694988 C44.3690672,21.5114095 44.6913719,18.1446262 52.8683497,7.99450751 Z M43.4168797,15.6028981 C41.2434833,17.8205255 41.7153274,24.275166 44.213695,29.9427578 C46.7120625,35.6103495 43.4168797,39.8756006 39.8854597,45.126676 C40.5019929,38.1390602 39.8587244,36.4802473 36.8588412,31.1077941 C33.858958,25.7353408 37.9685715,18.6230687 43.4168797,15.6028981 Z M64.7721431,8.03208837 C69.8550649,12.4485247 71.6576876,12.8901943 72.209291,17.4374541 C72.7608943,21.9847139 70.2967086,24.09635 71.2822168,30.0346208 C60.9002329,21.508497 69.0471936,18.4710785 64.7721431,8.03208837 Z M53.3587168,1.6350624e-05 C57.0113944,4.33013045 59.1813933,3.19675313 61.5638477,8.73089813 C63.9463021,14.2650431 60.9615342,15.5202483 63,22.1753596 C51.0029851,11.8529541 58.4461322,11.0173257 53.3587168,1.6350624e-05 Z" id="Combined-Shape-Copy" fill="#C84F46"></path>
+    </g>
+</svg>
+',
+    data: {
+      basename: "favicon-with-class",
+      content: '<?xml version="1.0" encoding="UTF-8"?>
+<svg width="126px" height="126px" class="foo" viewBox="0 0 126 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M52.8683497,7.99450751 C48.9069025,24.0969979 69.1669662,21.1536885 69.1669662,44.7198348 C75.794917,37.1051328 70.4463322,26.8453748 81.058456,17.1725913 C81.058456,39.3863344 102.155357,38.1365645 94.0121919,69.2249916 C97.7866664,66.9118477 100.501055,63.103682 102.155357,57.8004944 C105.491398,63.103682 104.245257,72.5297487 98.416934,86.0786945 C103.547554,83.9150474 106.558165,80.9232746 108.378132,76.7271327 C109.04106,105.964869 89.5062156,126.366871 61.9867103,125.995028 C34.467205,125.623185 13.5784967,101.642443 18.2649214,71.802957 C18.9624768,74.9072731 21.5182769,78.5533566 25.1832626,80.0729101 C18.6891247,50.7321037 30.922502,49.6337285 36.0056643,33.9730813 C35.1796585,42.297059 36.0056643,46.924952 40.0208236,51.7593505 C40.7309276,49.6474958 42.0145668,47.6388953 43.3724725,45.627895 L43.7620351,45.0531669 C43.8271552,44.9573376 43.892336,44.86148 43.9575234,44.7655828 L44.5429346,43.9011285 C47.3268507,39.7628977 49.8240593,35.4880393 47.7482658,30.1694988 C44.3690672,21.5114095 44.6913719,18.1446262 52.8683497,7.99450751 Z M43.4168797,15.6028981 C41.2434833,17.8205255 41.7153274,24.275166 44.213695,29.9427578 C46.7120625,35.6103495 43.4168797,39.8756006 39.8854597,45.126676 C40.5019929,38.1390602 39.8587244,36.4802473 36.8588412,31.1077941 C33.858958,25.7353408 37.9685715,18.6230687 43.4168797,15.6028981 Z M64.7721431,8.03208837 C69.8550649,12.4485247 71.6576876,12.8901943 72.209291,17.4374541 C72.7608943,21.9847139 70.2967086,24.09635 71.2822168,30.0346208 C60.9002329,21.508497 69.0471936,18.4710785 64.7721431,8.03208837 Z M53.3587168,1.6350624e-05 C57.0113944,4.33013045 59.1813933,3.19675313 61.5638477,8.73089813 C63.9463021,14.2650431 60.9615342,15.5202483 63,22.1753596 C51.0029851,11.8529541 58.4461322,11.0173257 53.3587168,1.6350624e-05 Z" id="Combined-Shape-Copy" fill="#C84F46"></path>
+    </g>
+</svg>
+',
+      date: [],
+      mergedKeys: [
+        "tags",
+      ],
+      page: [
+        "src",
+        "data",
+        "asset",
+      ],
+      paginate: "paginate",
+      search: [],
+      tags: "Array(0)",
+      url: "/favicon-with-class.svg",
+    },
+    src: {
+      asset: true,
+      ext: ".svg",
+      path: "/favicon-with-class",
+      remote: undefined,
+    },
+  },
   {
     content: '<!DOCTYPE html>
 <html lang="en"><head>
@@ -211,6 +252,24 @@ snapshot[`inline plugin 3`] = `
     <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path d="M52.8683497,7.99450751 C48.9069025,24.0969979 69.1669662,21.1536885 69.1669662,44.7198348 C75.794917,37.1051328 70.4463322,26.8453748 81.058456,17.1725913 C81.058456,39.3863344 102.155357,38.1365645 94.0121919,69.2249916 C97.7866664,66.9118477 100.501055,63.103682 102.155357,57.8004944 C105.491398,63.103682 104.245257,72.5297487 98.416934,86.0786945 C103.547554,83.9150474 106.558165,80.9232746 108.378132,76.7271327 C109.04106,105.964869 89.5062156,126.366871 61.9867103,125.995028 C34.467205,125.623185 13.5784967,101.642443 18.2649214,71.802957 C18.9624768,74.9072731 21.5182769,78.5533566 25.1832626,80.0729101 C18.6891247,50.7321037 30.922502,49.6337285 36.0056643,33.9730813 C35.1796585,42.297059 36.0056643,46.924952 40.0208236,51.7593505 C40.7309276,49.6474958 42.0145668,47.6388953 43.3724725,45.627895 L43.7620351,45.0531669 C43.8271552,44.9573376 43.892336,44.86148 43.9575234,44.7655828 L44.5429346,43.9011285 C47.3268507,39.7628977 49.8240593,35.4880393 47.7482658,30.1694988 C44.3690672,21.5114095 44.6913719,18.1446262 52.8683497,7.99450751 Z M43.4168797,15.6028981 C41.2434833,17.8205255 41.7153274,24.275166 44.213695,29.9427578 C46.7120625,35.6103495 43.4168797,39.8756006 39.8854597,45.126676 C40.5019929,38.1390602 39.8587244,36.4802473 36.8588412,31.1077941 C33.858958,25.7353408 37.9685715,18.6230687 43.4168797,15.6028981 Z M64.7721431,8.03208837 C69.8550649,12.4485247 71.6576876,12.8901943 72.209291,17.4374541 C72.7608943,21.9847139 70.2967086,24.09635 71.2822168,30.0346208 C60.9002329,21.508497 69.0471936,18.4710785 64.7721431,8.03208837 Z M53.3587168,1.6350624e-05 C57.0113944,4.33013045 59.1813933,3.19675313 61.5638477,8.73089813 C63.9463021,14.2650431 60.9615342,15.5202483 63,22.1753596 C51.0029851,11.8529541 58.4461322,11.0173257 53.3587168,1.6350624e-05 Z" id="Combined-Shape-Copy" fill="#C84F46"></path>
     </g>
+</svg>
+  <svg width="126px" height="126px" viewbox="0 0 126 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="foo">
+    <title>favicon</title>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M52.8683497,7.99450751 C48.9069025,24.0969979 69.1669662,21.1536885 69.1669662,44.7198348 C75.794917,37.1051328 70.4463322,26.8453748 81.058456,17.1725913 C81.058456,39.3863344 102.155357,38.1365645 94.0121919,69.2249916 C97.7866664,66.9118477 100.501055,63.103682 102.155357,57.8004944 C105.491398,63.103682 104.245257,72.5297487 98.416934,86.0786945 C103.547554,83.9150474 106.558165,80.9232746 108.378132,76.7271327 C109.04106,105.964869 89.5062156,126.366871 61.9867103,125.995028 C34.467205,125.623185 13.5784967,101.642443 18.2649214,71.802957 C18.9624768,74.9072731 21.5182769,78.5533566 25.1832626,80.0729101 C18.6891247,50.7321037 30.922502,49.6337285 36.0056643,33.9730813 C35.1796585,42.297059 36.0056643,46.924952 40.0208236,51.7593505 C40.7309276,49.6474958 42.0145668,47.6388953 43.3724725,45.627895 L43.7620351,45.0531669 C43.8271552,44.9573376 43.892336,44.86148 43.9575234,44.7655828 L44.5429346,43.9011285 C47.3268507,39.7628977 49.8240593,35.4880393 47.7482658,30.1694988 C44.3690672,21.5114095 44.6913719,18.1446262 52.8683497,7.99450751 Z M43.4168797,15.6028981 C41.2434833,17.8205255 41.7153274,24.275166 44.213695,29.9427578 C46.7120625,35.6103495 43.4168797,39.8756006 39.8854597,45.126676 C40.5019929,38.1390602 39.8587244,36.4802473 36.8588412,31.1077941 C33.858958,25.7353408 37.9685715,18.6230687 43.4168797,15.6028981 Z M64.7721431,8.03208837 C69.8550649,12.4485247 71.6576876,12.8901943 72.209291,17.4374541 C72.7608943,21.9847139 70.2967086,24.09635 71.2822168,30.0346208 C60.9002329,21.508497 69.0471936,18.4710785 64.7721431,8.03208837 Z M53.3587168,1.6350624e-05 C57.0113944,4.33013045 59.1813933,3.19675313 61.5638477,8.73089813 C63.9463021,14.2650431 60.9615342,15.5202483 63,22.1753596 C51.0029851,11.8529541 58.4461322,11.0173257 53.3587168,1.6350624e-05 Z" id="Combined-Shape-Copy" fill="#C84F46"></path>
+    </g>
+</svg>
+  <svg width="126px" height="126px" class="foo bar" viewbox="0 0 126 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M52.8683497,7.99450751 C48.9069025,24.0969979 69.1669662,21.1536885 69.1669662,44.7198348 C75.794917,37.1051328 70.4463322,26.8453748 81.058456,17.1725913 C81.058456,39.3863344 102.155357,38.1365645 94.0121919,69.2249916 C97.7866664,66.9118477 100.501055,63.103682 102.155357,57.8004944 C105.491398,63.103682 104.245257,72.5297487 98.416934,86.0786945 C103.547554,83.9150474 106.558165,80.9232746 108.378132,76.7271327 C109.04106,105.964869 89.5062156,126.366871 61.9867103,125.995028 C34.467205,125.623185 13.5784967,101.642443 18.2649214,71.802957 C18.9624768,74.9072731 21.5182769,78.5533566 25.1832626,80.0729101 C18.6891247,50.7321037 30.922502,49.6337285 36.0056643,33.9730813 C35.1796585,42.297059 36.0056643,46.924952 40.0208236,51.7593505 C40.7309276,49.6474958 42.0145668,47.6388953 43.3724725,45.627895 L43.7620351,45.0531669 C43.8271552,44.9573376 43.892336,44.86148 43.9575234,44.7655828 L44.5429346,43.9011285 C47.3268507,39.7628977 49.8240593,35.4880393 47.7482658,30.1694988 C44.3690672,21.5114095 44.6913719,18.1446262 52.8683497,7.99450751 Z M43.4168797,15.6028981 C41.2434833,17.8205255 41.7153274,24.275166 44.213695,29.9427578 C46.7120625,35.6103495 43.4168797,39.8756006 39.8854597,45.126676 C40.5019929,38.1390602 39.8587244,36.4802473 36.8588412,31.1077941 C33.858958,25.7353408 37.9685715,18.6230687 43.4168797,15.6028981 Z M64.7721431,8.03208837 C69.8550649,12.4485247 71.6576876,12.8901943 72.209291,17.4374541 C72.7608943,21.9847139 70.2967086,24.09635 71.2822168,30.0346208 C60.9002329,21.508497 69.0471936,18.4710785 64.7721431,8.03208837 Z M53.3587168,1.6350624e-05 C57.0113944,4.33013045 59.1813933,3.19675313 61.5638477,8.73089813 C63.9463021,14.2650431 60.9615342,15.5202483 63,22.1753596 C51.0029851,11.8529541 58.4461322,11.0173257 53.3587168,1.6350624e-05 Z" id="Combined-Shape-Copy" fill="#C84F46"></path>
+    </g>
+</svg>
+  <svg width="126px" height="126px" class="foo bar" viewbox="0 0 126 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M52.8683497,7.99450751 C48.9069025,24.0969979 69.1669662,21.1536885 69.1669662,44.7198348 C75.794917,37.1051328 70.4463322,26.8453748 81.058456,17.1725913 C81.058456,39.3863344 102.155357,38.1365645 94.0121919,69.2249916 C97.7866664,66.9118477 100.501055,63.103682 102.155357,57.8004944 C105.491398,63.103682 104.245257,72.5297487 98.416934,86.0786945 C103.547554,83.9150474 106.558165,80.9232746 108.378132,76.7271327 C109.04106,105.964869 89.5062156,126.366871 61.9867103,125.995028 C34.467205,125.623185 13.5784967,101.642443 18.2649214,71.802957 C18.9624768,74.9072731 21.5182769,78.5533566 25.1832626,80.0729101 C18.6891247,50.7321037 30.922502,49.6337285 36.0056643,33.9730813 C35.1796585,42.297059 36.0056643,46.924952 40.0208236,51.7593505 C40.7309276,49.6474958 42.0145668,47.6388953 43.3724725,45.627895 L43.7620351,45.0531669 C43.8271552,44.9573376 43.892336,44.86148 43.9575234,44.7655828 L44.5429346,43.9011285 C47.3268507,39.7628977 49.8240593,35.4880393 47.7482658,30.1694988 C44.3690672,21.5114095 44.6913719,18.1446262 52.8683497,7.99450751 Z M43.4168797,15.6028981 C41.2434833,17.8205255 41.7153274,24.275166 44.213695,29.9427578 C46.7120625,35.6103495 43.4168797,39.8756006 39.8854597,45.126676 C40.5019929,38.1390602 39.8587244,36.4802473 36.8588412,31.1077941 C33.858958,25.7353408 37.9685715,18.6230687 43.4168797,15.6028981 Z M64.7721431,8.03208837 C69.8550649,12.4485247 71.6576876,12.8901943 72.209291,17.4374541 C72.7608943,21.9847139 70.2967086,24.09635 71.2822168,30.0346208 C60.9002329,21.508497 69.0471936,18.4710785 64.7721431,8.03208837 Z M53.3587168,1.6350624e-05 C57.0113944,4.33013045 59.1813933,3.19675313 61.5638477,8.73089813 C63.9463021,14.2650431 60.9615342,15.5202483 63,22.1753596 C51.0029851,11.8529541 58.4461322,11.0173257 53.3587168,1.6350624e-05 Z" id="Combined-Shape-Copy" fill="#C84F46"></path>
+    </g>
 </svg>
   <script id="el-11" src="./script.js"></script>
   <script id="el-12">console.log("Hello world");
@@ -252,6 +311,9 @@ const a = 1, _b = 1 < a, _c = a > 4;
   <img id="el-10" class="has-png" src="./other favicon.png">
   <img src="./favicon.svg" width="123" inline>
   <img src="./favicon.svg" width="200" height="200" inline>
+  <img src="./favicon.svg" class="foo" inline>
+  <img src="./favicon-with-class.svg" class="foo bar" inline>
+  <img src="./favicon-with-class.svg" class="foo bar    " inline>
   <script id="el-11" src="./script.js"></script>
   <script id="el-12" src="./script.js" inline></script>
   <script id="el-13" src="./script.js" type="module" @attr="custom" inline></script>
@@ -281,6 +343,9 @@ const a = 1, _b = 1 < a, _c = a > 4;
   <img id="el-10" class="has-png" src="./other favicon.png">
   <img src="./favicon.svg" width="123" inline>
   <img src="./favicon.svg" width="200" height="200" inline>
+  <img src="./favicon.svg" class="foo" inline>
+  <img src="./favicon-with-class.svg" class="foo bar" inline>
+  <img src="./favicon-with-class.svg" class="foo bar    " inline>
   <script id="el-11" src="./script.js"></script>
   <script id="el-12" src="./script.js" inline></script>
   <script id="el-13" src="./script.js" type="module" @attr="custom" inline></script>

diff --git a/tests/assets/inline/favicon-with-class.svg b/tests/assets/inline/favicon-with-class.svg
diff --git a/tests/assets/inline/index.vto b/tests/assets/inline/index.vto
@@ -18,6 +18,9 @@
   <img id="el-10" class="has-png" src="./other favicon.png">
   <img src="./favicon.svg" width="123" inline>
   <img src="./favicon.svg" width="200" height="200" inline>
+  <img src="./favicon.svg" class="foo" inline>
+  <img src="./favicon-with-class.svg" class="foo bar" inline>
+  <img src="./favicon-with-class.svg" class="foo bar    " inline>
   <script id="el-11" src="./script.js"></script>
   <script id="el-12" src="./script.js" inline></script>
   <script id="el-13" src="./script.js" type="module" @attr="custom" inline></script>