Sec-ant / prettier-plugin-embed

A configurable Prettier plugin to format embedded languages in JS/TS Files.
https://www.npmjs.com/package/prettier-plugin-embed/v/latest
MIT License
58 stars 2 forks source link

Tagged templates formatting adding indentation #120

Open DianomiJH opened 1 month ago

DianomiJH commented 1 month ago

Hi!

It's probably a setup issue on my part, but I've been banging my head against a wall with this formatting issue

this is the code i'd expect not to change indentation (added a couple of nested ifs to add indentation):

const markdown = String.raw
function getMd() {
  if (true) {
    if (true) {
      return markdown`
# Hello

**This is some bold text**
      `
    }
  }
}

this is my prettier config:

{
  "semi": false,
  "singleQuote": false,
  "trailingComma": "all",
  "plugins": ["prettier-plugin-embed"],
  "noEmbeddedMultiLineIndentation": ["markdown", "md"]
}

expected output would be unchanged from the original but this is what I'm seeing:

const markdown = String.raw
function getMd() {
  if (true) {
    if (true) {
      return markdown`
      # Hello

      **This is some bold text**
      `
    }
  }
}

here's a sandbox link:

https://codesandbox.io/p/devbox/3v7s4t?file=%2Fsrc%2FApp.jsx%3A4%2C1-15%2C2

Thanks!

DianomiJH commented 1 month ago

I tried to do some debugging in my node_modules, and as far as i could tell the condition on this line:

https://github.com/Sec-ant/prettier-plugin-embed/blob/d8b1faeef5889eb1497cd1ca72ce9dbc3b4060b7/src/embedded/markdown/embedder.ts#L90

is returning true as i'd expect

Sec-ant commented 1 month ago

Should be a bug, will look into it, thanks for reporting

DianomiJH commented 1 month ago

I'm by no means an expert here, but i think this is a valid test:

import * as prettier from "prettier";
import { expect, it } from "vitest";

const pluginPath = "dist/index.js";

it("Doesn't add extra indentation to markdown when noEmbeddedMultiLineIndentation is set", async () => {
  expect(true).toBe(true);
  const code = `
  function foo() {
    const md = /* markdown */ \`
# Title

## Subtitle

Paragraph

- List
- List

\`
    }
      `;
  const res = await prettier.format(code, {
    parser: "babel",
    plugins: [pluginPath],
    noEmbeddedMultiLineIndentation: ["markdown"],
  });
  expect(res).toBe(
    "function foo() {\n  const md = /* markdown */ `\n# Title\n\n## Subtitle\n\nParagraph\n\n- List\n- List\n`;\n}\n",
  );
});