figma / code-snippet-editor-plugin

Translate component variants, properties, and more into dynamic code snippets for your design system.
https://www.figma.com/community/plugin/1311777988952403297/code-snippet-editor
MIT License
126 stars 11 forks source link

Multiple conditional statements not working for single line of code #17

Closed mikeysouthwell closed 5 months ago

mikeysouthwell commented 5 months ago

{{?node.type=frame}}<Border {{?css.border}}Stroke="{{css.border}}"> {{?node.name}}x:Name="{{node.name|pascal}}"

Expected output:

Node has a border (currently this isn't possible because you can't grab Stroke or StrokeThickness from css, it returns all properties):

x:Name="NodeName" Node doesn't have a border: x:Name="NodeName" If there is a frame, but no css.border, then the whole line is missing. I have tried using the "\" escape character, but it doesn't seem to be working. Unless I'm using it wrong? The idea would be that it should still have ' > x:Name="NodeName" ' after ' x:Name="NodeName" At the moment, everything to the right of {{?css.border}} is left out, even if {{?node.name}} is not null for example. Current workaround: {{?node.type=frame}} {{?node.name}}x:Name="{{node.name|pascal}}" Output when no border: x:Name="NodeName"
jake-figma commented 5 months ago

See Single Line Syntax as well as my feedback on #7. Essentially, this templating language treats every line as a "yes" or "no" when it comes time to render, so you want to split each property up onto its own line.

I think your code got treated like HTML so I cant see all of it, but something like:

<Border\
Stroke="{{css.border}}"\
x:Name="{{node.name|pascal}}"\
\>

Will end up rendering on a single line like <Border Stroke="..." x:Name="..."> or <Border Stroke="..."> if name was undefined.

Also, I see you've been putting conditionals on every line that refers to a value. If the value is undefined, the line won't render, so the conditional in those cases will be redundant. Just a time saver!

{{?css.border}}Stroke="{{css.border}}" and Stroke="{{css.border}}" are virtually the same template!