Support for XML / SVG

[remcohaszing]

It would be great if prettier could also check and format XML and SVG files.

The formatting rules would be exactly the same as for JSX.

Specificly for SVG, the contents of a <style /> tag would be formatted as CSS.

#3491 was marked as a duplicate of #1882, but #1882 is only about HTML, not XML.

Input:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
<defs ><style>.foo {color: cyan}</style></defs>
    <rect fill="#e8e8e8" height="108" rx="12" width="108" x="0" y="4"></rect>
  </svg>

Output:

N/A

Expected behaviour:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
  <defs>
    <style>
      .foo {
        color: cyan;
      }
    </style>
  </defs>
  <rect fill="#e8e8e8" height="108" rx="12" width="108" x="0" y="4" />
</svg>

[alexander-akait]

@remcohaszing 👍 But i think better implement this after officially implementation html, i think we can use same parser for xml based syntax

[michaeljota]

@remcohaszing Would you expect something like this? If no, can you do a research about the implications of whitespaces in Svg.

Link

[remcohaszing]

I didn’t think about whitespace when I initially created this issue. When this is taken into account, there isn’t really a point in applying prettier on XML documents, unless of course, the meaning of the document is taken into account. To detect the meaning of an XML document, prettier should interpret the xmlns attribute of the root element.

In many cases whitespace is not interpreted. In this case I think nodes should be formatted by prettier the same way as it formats JSX. If it’s unknown how a node is interpreted, prettier should keep the original spacing.

SVG

I think SVG is by far the most popular human readable XML format. An SVG document is a document which implements the http://www.w3.org/2000/svg (or https) namespace. (Please correct me if I’m wrong.)

A nice list of all known SVG elements can be found on https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg.

I fiddled a bit with SVG spacing in Google Chrome and concluded whitespace is entirely ignored, so it’s safe to format SVG following the exact same rules as for JSX.

There are some special tags that can be interpreted by prettier in a special way.

The <style> tag contains CSS. Since prettier can already interpret CSS, its contents can also be formatted by prettier.

The <ForeignObject> tag allows to include elements from a different XML namespace into the SVG document. If the direct child of <foreighObject> uses an xmlns known to prettier, such as XHTML or SVG, it can also be formatted. Otherwise, only its attributes can be formatted, but not its textual contents.

On comment nodes, the same rules can be applied as on HTML.

So, given an the following document:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs /> <style >
    polygon { fill: black }

    div {
  color: white;
      font:18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>

 <g>
  <g><polygon points="5,5 195,10 185,185 10,195" />
      <text>    Text</text></g>
  </g>

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
      In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
    -->
    <div xmlns="http://www.w3.org/1999/xhtml">
    <p>
  <img />
      </p>
    </div>
  </foreignObject>
</svg>

I would expect the following formatting:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs />
  <style >
    polygon {
      fill: black;
    }

    div {
      color: white;
      font: 18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>

  <g>
    <g>
      <polygon points="5,5 195,10 185,185 10,195" />
      <text>Text</text>
    </g>
  </g>

  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
      In the context of SVG embeded into HTML, the XHTML namespace could be
      avoided, but it is mandatory in the context of an SVG document
    -->
    <div xmlns="http://www.w3.org/1999/xhtml">
      <p>
        <img />
      </p>
    </div>
  </foreignObject>
</svg>

It’s also safe to remove some nodes. I would personally like to see this, but would probably be considered out of scope for prettier.

This would include empty <defs /> and <g /> nodes without any attributes.

[nagman]

What is the status of this feature?

It would be really appreciated :)

[alexander-akait]

PR welcome 👍

[Akash91]

Ok

[bd82]

Hello.

I have been thinking of building a pettier plugin for XML in a similar fashion to the one I created for TOML.

• https://github.com/bd82/toml-tools/tree/master/packages/prettier-plugin-toml

Questions:

• @michaeljota @remcohaszing could you elaborate on the "significant whitespace" issues with XML and how those would make it so that:

there isn’t really a point in applying prettier on XML documents, unless of course, the meaning of the document is taken into account.

• I get the impression from this chat that an SVG plugin would simply be an "extended" XML plugin which defers formatting of certain attributes using external formatting logic, (e.g: CSS styles).
  Is this correct?

[michaeljota]

@bd82 I don't know in deep what is the meaning whawhitespaces characters in XML. Seems like for HTML, some of the characters appears in the document, upon the element being used. This was discussed in the PR that introduced HTML to Prettier, so you may find additional info there.

[remcohaszing]

@bd82 I know how to use XML, but I’m not an expert. A Google search shows much better explanations than I could give you.

I think this page sums it up nicely. The XML syntactical whitespace can be prettified safely. It should be safe to remove the insignificant whitesspace, but it might impact how an application consumes the document. The significant whitespace may not be removed.

Often the impact of whitespace is known for a document. I.e. for SVG whitespace can be stripped safely. However, prettier can’t possibly know how every other XML document is used.

[bd82]

Thanks @remcohaszing I also found that page:

• https://www.liquid-technologies.com/XML/Whitespace.aspx

The reason I asked for feedback is due to the strong statement that applying prettier on XML is "pointless" above.

@remcohaszing wrote:

I didn’t think about whitespace when I initially created this issue. When this is taken into account, there isn’t really a point in applying prettier on XML documents

Perhaps you meant no point in applying prettier to the contents of XML elements?

Also I am thinking about providing an option to "trim" contents whitespace which would be disabled by default, but may be enabled by end users.

You can track my work on an XML prettier plugin here:

• https://github.com/bd82/xml-tools

[minervabot]

I have just been using the html format mode to format SVG... am I missing something important here?

[rattrayalex]

There is now an xml plugin at https://github.com/prettier/plugin-xml

[alexander-akait]

/cc @kddeisz Would you like to send a PR with supporting xml/svg in core?

[kddnewton]

@evilebottnawi I want to get it a little more stable first/get comments working before I do that

[mariusschulz]

Hey @kddeisz! I was wondering whether you had any update on XML support in core? :)

[kddnewton]

@mariusschulz one more issue to fix before I open the PR. In the meantime feel free to use the official plugin!

[thorn0]

@kddeisz @evilebottnawi Let's discuss this first. Why move XML support to core?

BTW, as for SVG, if there is no difference between standalone SVG files and SVG embedded in HTML, Prettier should already support it with --parser html.

[alexander-akait]

@thorn0 I am afraid our html is not XML compatibility, we need more tests

[kddnewton]

Opened the PR!

[tjx666]

any progress?

[rreckonerr]

In vscode, you can install prettier code formatter, add documentSelectors

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "prettier.documentSelectors": ["**/*.svg"]
}

and overrides

// .prettierrc.js
module.exports = {
  singleQuote: true,
  overrides: [
    {
      files: '*.svg',
      options: {
        parser: 'html',
      },
    },
  ],
};

Links

• https://github.com/prettier/prettier-vscode/tree/81de0f2554d32d6d4bb412e224b290aee75010bb#prettierdocumentselectors
• https://prettier.io/docs/en/configuration.html#configuration-overrides

[dhruvkb]

There is now an xml plugin at prettier/plugin-xml

The XML plugin supports SVG too. That's good enough for my use-case.

[CombeeMike]

Just to be sure as I'm a little confused by the conversation in the PR:

1. This was not merged & there's no built in SVG support except the overrides option mentioned above (which has its pitfalls like this)
2. The recommended way to format SVGs with prettier is to use the official XML plugin

Is this correct?

[rendall]

Is this correct?

Format SVG files with the HTML parser:

prettier --write --parser html "**/*.svg"

[babakfp]

Hi
Can we please treat the svg tag like a basic div tag? Who in the world has code bases looking like this? 👇

<svg
	xmlns="http://www.w3.org/2000/svg"
	fill="none"
	viewBox="0 0 24 24"
	stroke-width="1.5"
	stroke="currentColor"
	class="h-6 w-6"
>
	<path
		stroke-linecap="round"
		stroke-linejoin="round"
		d="M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18"
	/>
</svg>

For those rare cases that would like to format their svg like this 👆, there can be an option to switch it ON (in the config or with a comment).

Using prettier-ignore introduces a new problem. We use prettier to eliminate this sort of problem.

Video_230226120850_Slice.mp4

How are people not losing their minds over this? Please let me know if there is a prettier plugin that can fix this.

[kddnewton]

@babakfp I think it would make sense to support using the embedded parser support on svg tags if the XML plugin is present. That shouldn't be too bad to add? The XML plugin should take care of formatting that correctly for you.

[babakfp]

@babakfp I think it would make sense to support using the embedded parser support on svg tags if the XML plugin is present. That shouldn't be too bad to add? The XML plugin should take care of formatting that correctly for you.

Hi
Do you mean I'm going to need to install a new plugin to disable the current behavior of prettier? It doesn't make sense to install a new package for such a simple thing. Can't we just put the current formatting feature behind a config option?

[kddnewton]

Hi Do you mean I'm going to need to install a new plugin to disable the current behavior of prettier? It doesn't make sense to install a new package for such a simple thing. Can't we just put the current formatting feature behind a config option?

Sure! Can you open a PR to start the discussion for that?

[babakfp]

Sure! Can you open a PR to start the discussion for that?

Sorry, but I don't know how to implement the feature.

[kddnewton]

Ahh sorry I misunderstood when you said

Can't we just put the current formatting feature behind a config option?

I thought you meant you would be willing to help out. In this case you'll have to wait until one of the other contributors has time for such for a feature.

[jasikpark]

https://github.com/gregberge/svgr/tree/main/packages/plugin-prettier is an SVG formatter, not sure about how maintained it is, but it may be useful here 💜 sike, this is a prettier plugin for svgr, not the other way around 😔

[junaga]

npm:@prettier/plugin-xml is not enough because browsers support CSS <style> in image/svg+xml

[kddnewton]

That's why the xml plugin embeds the CSS parser in style tags

[junaga]

@kddnewton

2023-11-25.13-12-23.mp4

[kddnewton]

Add type="text/css"

[junaga]

@kentcdodds that works, but it ignores nesting. also it mixes spaces and tabs.

[kddnewton]

It's based on whatever your prettier settings are for CSS

[junaga]

@kddnewton as you can see in my package.json in my initial video i do not have any configs for CSS. Also, the spec clearly discourages use of <style type>. BUT IDK THO, IM JUST A USER.

[rreckonerr]

@junaga Yes, user of open source software, where contributions are usually highly appreciated. I'm pretty sure you'll be able to find someone who'll review your PR with support for the feature you're missing

[junaga]

@rreckonerr

1. off-topic.
2. i-dont-work-for-meta.
3. maybe dont culture war.

[kddnewton]

@junaga as @rreckonerr says, if you would like to change it, I would happily accept a PR.

[minervabot]

Having the css not indented with the html/svg would be highly surprising to me. I do not think the proposed solution really actually works. Is this an issue with the XML parser?

[trusktr]

When I have SVG inside of an HTML file, prettier formats the SVG content perfectly fine.

It even works in the playground.

Why are plain SVG files ignored by prettier?

[junaga]

@trusktr SVG files are not real, they are XML files. XML is not HTML, and is ignored by prettier.

[minervabot]

@junaga A generalized XML parser is going to skip a lot of specialized syntax about SVG like formatting of inline CSS and any notion of how paths might be formatted. The HTML parser actually does a pretty OK job, except as you mention it might produce invalid results. The aggressive whataboutism really just clouds the issue: SVG is a common format and it is unfortunate Prettier does not support it.

[junaga]

guys, wtf, why downvote?

I don't work on prettier! and I 100% agree, prettier must format XML (including SVG)! It does not. why? I don't know. I think the dev-rels team is out-of-touch with actual developers. SVG favicons are the default for new web apps, you can't pretend that SVG is not a required, core feature, of the web platform.

Something else even worse, .html files are not parsed as HTML in prettier, prettier parses and formats .html as JSX. JSX is about as much HTML as XML is HTML (it's not). I don't know how difficult it would be to make an actual WHATWG/HTML (also known as HTML5) formatter, so far no one picked up that job. the weight and disappointment by myself might actually move me into fixing prettier with a soft fork. Maybe in half a year, if really no one else, can take care of it.

it's sad tbh, i am a total web noob. and i hit issues so hard, that i cant use prettier output! prettier .css .js and .html does not reliably work in the browser, almost as if prettier ignores the browser target environment. well, what the hell are HTML CSS JS even for?!