From e642c31289cfdfee1f533511bf4b10342189b14b Mon Sep 17 00:00:00 2001
From: Hyeonjong <nianelo4@gmail.com>
Date: Thu, 27 Jul 2023 23:25:55 +0900
Subject: [PATCH] Support `class:list` directive of Astro (#192)

* test: add classlist directive test

* feat: implement transformations for classlist directive

* test: add another classlist directive test

* feat: complement transformations for classlist directive

* Update changelog

* Simplify

* Allow generalizing dynamic class list attributes in Astro

* Update changelog

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
---
 CHANGELOG.md          |  4 +++-
 src/plugin-v2.js      | 10 +++++++++-
 src/plugin-v3.js      | 10 +++++++++-
 tests/plugins.test.js |  6 ++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c162a725..f2987223 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Added
+
+- Sort expressions in Astro's `class:list` attribute ([#192](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/192))
 
 ## [0.4.1] - 2023-07-14
 
diff --git a/src/plugin-v2.js b/src/plugin-v2.js
index fa0b4877..1ed6f12c 100644
--- a/src/plugin-v2.js
+++ b/src/plugin-v2.js
@@ -553,7 +553,7 @@ function transformCss(ast, { env }) {
  * @param {TransformerContext} param1
  */
 function transformAstro(ast, { env, changes }) {
-  let { staticAttrs } = env.customizations
+  let { staticAttrs, dynamicAttrs } = env.customizations
 
   if (
     ast.type === 'element' ||
@@ -569,6 +569,13 @@ function transformAstro(ast, { env, changes }) {
         attr.value = sortClasses(attr.value, {
           env,
         })
+      } else if (
+        dynamicAttrs.has(attr.name) &&
+        attr.type === 'attribute' &&
+        attr.kind === 'expression' &&
+        typeof attr.value === 'string'
+      ) {
+        transformDynamicJsAttribute(attr, env)
       }
     }
   }
@@ -896,6 +903,7 @@ export const parsers = {
     ? {
         astro: createParser('astro', transformAstro, {
           staticAttrs: ['class'],
+          dynamicAttrs: ['class:list'],
         }),
       }
     : {}),
diff --git a/src/plugin-v3.js b/src/plugin-v3.js
index 06cbc182..a87be0e9 100644
--- a/src/plugin-v3.js
+++ b/src/plugin-v3.js
@@ -553,7 +553,7 @@ function transformCss(ast, { env }) {
  * @param {TransformerContext} param1
  */
 function transformAstro(ast, { env, changes }) {
-  let { staticAttrs } = env.customizations
+  let { staticAttrs, dynamicAttrs } = env.customizations
 
   if (
     ast.type === 'element' ||
@@ -569,6 +569,13 @@ function transformAstro(ast, { env, changes }) {
         attr.value = sortClasses(attr.value, {
           env,
         })
+      } else if (
+        dynamicAttrs.has(attr.name) &&
+        attr.type === 'attribute' &&
+        attr.kind === 'expression' &&
+        typeof attr.value === 'string'
+      ) {
+        transformDynamicJsAttribute(attr, env)
       }
     }
   }
@@ -896,6 +903,7 @@ export const parsers = {
     ? {
         astro: createParser('astro', transformAstro, {
           staticAttrs: ['class'],
+          dynamicAttrs: ['class:list'],
         }),
       }
     : {}),
diff --git a/tests/plugins.test.js b/tests/plugins.test.js
index dbba347c..779901c8 100644
--- a/tests/plugins.test.js
+++ b/tests/plugins.test.js
@@ -293,6 +293,12 @@ import Custom from '../components/Custom.astro'
   <my-element class="${yes}"></my-element>
   <Custom class="${yes}" />
 </Layout>`,
+        t`<div>
+  <span class:list={['${yes}', { '${yes}': '${yes}' }, new Set(['${yes}'])]}></span>
+</div>`,
+        t`<div>
+  <span class:list={[\`${yes}\`, \`\${'${yes}'}\`, \`\${\`${yes}\`}\`, \`\${\`\${'${yes}'}\`}\`]}></span>
+</div>`,
       ],
     },
   },