fix: support prettier-plugin-astro v1

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Restore class sorting in Astro templates when using `prettier-plugin-astro` v1 ([#473](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/473))
 
 ## [0.8.1] - 2026-07-15
 

package.json

@@ -67,7 +67,7 @@
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "prettier": "^3.7.3",
-    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-astro": "^1.0.0",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-jsdoc": "^1.3.3",
     "prettier-plugin-marko": "^3.3.2",

src/index.ts

@@ -635,14 +635,16 @@ function transformJavaScript(ast: import('@babel/types').Node, env: TransformerE
         return
       }
 
-      if (!matcher.hasStaticAttr(node.name.name)) {
-        return
-      }
-
+      let name = node.name.name
       if (isStringLiteral(node.value)) {
-        sortStringLiteral(node.value, { env })
+        if (matcher.hasStaticAttr(name)) {
+          sortStringLiteral(node.value, { env })
+        }
       } else if (node.value.type === 'JSXExpressionContainer') {
-        sortInside(node.value)
+        // Dynamic attrs (e.g. Astro's `class:list`) only carry expressions, never plain strings
+        if (matcher.hasStaticAttr(name) || matcher.hasDynamicAttr(name)) {
+          sortInside(node.value)
+        }
       }
     },
 
@@ -742,6 +744,14 @@ function transformCss(ast: any, env: TransformerEnv) {
 }
 
 function transformAstro(ast: any, env: TransformerEnv) {
+  // prettier-plugin-astro v1+ produces an ESTree/JSX AST via @astrojs/compiler-rs.
+  // Attributes are `JSXAttribute` nodes whose values are `Literal`s or expression containers,
+  // so the JavaScript transform can handle them directly.
+  if (ast.type === 'AstroRoot') {
+    transformJavaScript(ast.template, env)
+    return
+  }
+
   let { matcher } = env
 
   if (ast.type === 'element' || ast.type === 'custom-element' || ast.type === 'component') {
@@ -1157,6 +1167,8 @@ let js = defineTransform<import('@babel/types').Node>({
         { name: '@prettier/plugin-hermes', importer: () => import('@prettier/plugin-hermes') },
       ],
     },
+    // Only exposed by prettier-plugin-astro 0.x.
+    // v1 parses expressions as part of the main `astro` AST.
     astroExpressionParser: {
       load: [
         {
@@ -1212,6 +1224,11 @@ let svelte = defineTransform<SvelteNode>({
 })
 
 type AstroNode =
+  // prettier-plugin-astro 1.x
+  // `template` is an ESTree + JSX AST emitted by @astrojs/compiler-rs (oxc).
+  // Typed loosely, see the note on `transformJavaScript`.
+  | { type: 'AstroRoot'; template: unknown }
+  // prettier-plugin-astro 0.x
   | { type: 'element'; attributes: Extract<AstroNode, { type: 'attribute' }>[] }
   | {
       type: 'custom-element'

tests/plugins.test.ts

@@ -350,7 +350,7 @@ let tests: PluginTest[] = [
 
         [
           `{<div class="p-20 bg-red-100 w-full"></div>}`,
-          `{(<div class="w-full bg-red-100 p-20" />)}`,
+          `{<div class="w-full bg-red-100 p-20"></div>}`,
         ],
         [
           `<style>
@@ -389,7 +389,7 @@ import Custom from '../components/Custom.astro'
         ],
         [
           `<div class:list={[' flex ' + ' underline ' + ' block ']}></div>`,
-          `<div class:list={['flex ' + ' underline' + ' block']}></div>`,
+          `<div class:list={['flex ' + ' underline ' + ' block']}></div>`,
         ],
       ],
     },