diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62ad46b9..b3789cb2 100644
--- 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
index 621f4299..25a81298 100644
--- 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
index afbd168b..723887bd 100644
--- 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: '
+
+',
+ data: {
+ basename: "favicon-with-class",
+ content: '
+
+',
+ 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: '
@@ -211,6 +252,24 @@ snapshot[`inline plugin 3`] = `
+
+
+
+
@@ -281,6 +343,9 @@ const a = 1, _b = 1 < a, _c = a > 4;
+
+ 
+
diff --git a/tests/assets/inline/favicon-with-class.svg b/tests/assets/inline/favicon-with-class.svg
new file mode 100644
index 00000000..2d1eeedd
--- /dev/null
+++ b/tests/assets/inline/favicon-with-class.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/assets/inline/index.vto b/tests/assets/inline/index.vto
index fb4ad7a5..a70506d2 100644
--- a/tests/assets/inline/index.vto
+++ b/tests/assets/inline/index.vto
@@ -18,6 +18,9 @@
+
+
+