Add support for new twig plugin

CHANGELOG.md

@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `prettier-plugin-multiline-arrays` ([#299](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/299))
 - Add resolution cache for known plugins ([#301](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/301))
 
+### Added
+
+- Add support for `@zackad/prettier-plugin-twig` ([#255](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/255))
+
 ## [0.6.5] - 2024-06-17
 
 - Only re-apply string escaping when necessary ([#295](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/295))

package.json

@@ -40,6 +40,7 @@
     "@shopify/prettier-plugin-liquid": "^1.4.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@zackad/prettier-plugin-twig-melody": "^0.5.0",
+    "@zackad/prettier-plugin-twig": "^0.7.0",
     "ast-types": "^0.14.2",
     "clear-module": "^4.1.2",
     "cpy-cli": "^5.0.0",

src/index.ts

@@ -1174,6 +1174,14 @@ export const parsers: Record<string, Parser> = {
         }),
       }
     : {}),
+  ...(base.parsers.twig
+    ? {
+        // Note: Melody and twig are the same language
+        twig: createParser('twig', transformMelody, {
+          staticAttrs: ['class'],
+        }),
+      }
+    : {}),
   ...(base.parsers.pug
     ? {
         pug: createParser('pug', transformPug, {

src/plugins.ts

@@ -129,11 +129,12 @@ async function loadBuiltinPlugins(): Promise<PluginDetails> {
 
 async function loadThirdPartyPlugins(): Promise<PluginDetails> {
   // Commented out plugins do not currently work with Prettier v3.0
-  let [astro, liquid, marko, melody, pug, svelte] = await Promise.all([
+  let [astro, liquid, marko, melody, twig, pug, svelte] = await Promise.all([
     loadIfExistsESM('prettier-plugin-astro'),
     loadIfExistsESM('@shopify/prettier-plugin-liquid'),
     loadIfExistsESM('prettier-plugin-marko'),
     loadIfExistsESM('@zackad/prettier-plugin-twig-melody'),
+    loadIfExistsESM('@zackad/prettier-plugin-twig'),
     loadIfExistsESM('@prettier/plugin-pug'),
     loadIfExistsESM('prettier-plugin-svelte'),
   ])
@@ -143,6 +144,7 @@ async function loadThirdPartyPlugins(): Promise<PluginDetails> {
       ...liquid.parsers,
       ...marko.parsers,
       ...melody.parsers,
+      ...twig.parsers,
       ...pug.parsers,
       ...svelte.parsers,
     },

tests/plugins.test.ts

@@ -164,6 +164,40 @@ let tests: PluginTest[] = [
       ],
     },
   },
+  {
+    plugins: ['@zackad/prettier-plugin-twig'],
+    options: {
+      twigAlwaysBreakObjects: false,
+    },
+    tests: {
+      twig: [
+        [
+          `<section class="{{ {base:css.prices}|classes }}"></section>`,
+          `<section class="{{ { base: css.prices }|classes }}"></section>`,
+        ],
+        t`<section class="${yes}"></section>`,
+        t`<section class="${yes} text-{{ i }}"></section>`,
+        t`<section class="${yes} {{ i }}-text"></section>`,
+        t`<section class="text-{{ i }} ${yes}"></section>`,
+        t`<section class="{{ i }}-text ${yes}"></section>`,
+
+        // text-center is used because it's placed between p-0 and sm:p-0
+        t`<section class="${yes} text-center{{ i }}"></section>`,
+        t`<section class="${yes} {{ i }}text-center"></section>`,
+        t`<section class="text-center{{ i }} ${yes}"></section>`,
+        t`<section class="{{ i }}text-center ${yes}"></section>`,
+
+        [
+          `<div class=" sm:flex   underline  block"></div>`,
+          `<div class="block underline sm:flex"></div>`,
+        ],
+        [
+          `<div class="{{ ' flex ' + ' underline ' + ' block ' }}"></div>`,
+          `<div class="{{ 'flex ' + ' underline' + ' block' }}"></div>`,
+        ],
+      ],
+    },
+  },
   {
     plugins: ['@prettier/plugin-pug'],
     tests: {