Fix Glimmer Concatenation (#119)

* test(Glimmer): Add Failing Test For Glimmer Concatenation

Glimmer supports concatenation via the `(concat)` helper.

The plugin is currently incorrectly breaking up the concatenation

This adds a failing test showing the issue.

* fix(Glimmer): Fix Glimmer Concatenation

Use ignoreLast in a Glimmer StringLiteral if the parent is a SubExpression (meaning helper) and the last character of the node value is not whitespace

Meaning `(concat "border-l-blue border-" @color)` does not get sorted

While `(concat "border-l-blue border ")` does get sorted

* fix(Glimmer): Only Fix Concat Helper

The main issue is with (concat) so we will hardcode that in

If in the future we think we need more helpers we can do that

* Update changelog

* Tweak regex

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: Alonski

CHANGELOG.md

@@ -7,10 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't sort classes in Glimmer `concat` helper.
 
 ## [0.2.2] - 2023-01-24
 
+### Fixed
+
 - Add prettier plugins to peer dependencies ([#114](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/114))
 - Traverse await expression blocks in Svelte ([#118](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/118))
 

src/index.js

@@ -340,7 +340,12 @@ function transformGlimmer(ast, { env }) {
         return
       }
 
-      node.value = sortClasses(node.value, { env })
+      const isConcat = parent.type === 'SubExpression' && parent.path.original === 'concat';
+
+      node.value = sortClasses(node.value, {
+        env,
+        ignoreLast: isConcat && !/[^\S\r\n]$/.test(node.value),
+      })
     },
   })
 }

tests/test.js

@@ -159,6 +159,19 @@ let glimmer = [
   t`<div class></div>`,
   t`<div class=''></div>`,
   t`{{link 'Some page' href=person.url class='${no}'}}`,
+  t`<div class='{{if @isTrue (concat "border-l-4 border-" @borderColor)}}'></div>`,
+  [
+    `<div class='{{if @isTrue (concat "border-opacity-30 border-l-4 border-" @borderColor)}}'></div>`,
+    `<div class='{{if @isTrue (concat "border-l-4 border-opacity-30 border-" @borderColor)}}'></div>`,
+  ],
+  [
+    `<div class='{{if @isTrue (concat "border-l-4 border " @borderColor)}}'></div>`,
+    `<div class='{{if @isTrue (concat "border border-l-4 " @borderColor)}}'></div>`,
+  ],
+  [
+    `<div class='{{if @isTrue (nope "border-l-4 border-" @borderColor)}}'></div>`,
+    `<div class='{{if @isTrue (nope "border- border-l-4" @borderColor)}}'></div>`,
+  ],
 ]
 
 let tests = {