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 <[email protected]>
tailwindlabs · Jul 27, 2023 · e642c31 · e642c31
1 parent 1bc4f3e
commit e642c31
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>`,
       ],
     },
   },