Skip to content

Add support for formatting .astro files#87

Merged
thecrypticace merged 8 commits intotailwindlabs:mainfrom
Princesseuh:main
Aug 8, 2022
Merged

Add support for formatting .astro files#87
thecrypticace merged 8 commits intotailwindlabs:mainfrom
Princesseuh:main

Conversation

@Princesseuh
Copy link
Copy Markdown
Contributor

Hello!

I'm Erika from the Astro team. We love Tailwind and would love to have support for Astro files inside this plugin. As such, well, here's a PR that adds it 😄

The support is pretty good, since we use other parsers for the different parts of the files, including expressions:

---
...
---

<!-- This will format, this is what this PR adds! -->
<div class="p-20 w-full bg-red-100"></div>

<!-- This will format, since it's parsed and printed by `babel-ts` -->
{<div class="p-20 w-full bg-red-100"></div>}

<!-- This will format, since it's parsed and printed by Prettier's CSS parsers (so works for scss too) -->
<style>
  h1 {
    @apply p-20 w-full bg-fuchsia-50;
  }
</style>

I hope we can get this to work, don't hesitate if there's anything needed from us to get this over the line!

Thank you

@thecrypticace
Copy link
Copy Markdown
Contributor

thecrypticace commented Aug 8, 2022

Hey, thanks for opening the PR! ❤️

I added some tests for this but unfortunately cannot get transformAstro to be called in the tests. Hey @bradlc would this be due to a plugin incompatibility or caused by something else?

@Princesseuh
Copy link
Copy Markdown
Contributor Author

Hmm, for context it works perfectly fine for me in local, here's a video:

Screen.Recording.2022-08-08.at.11.40.59.mov

But yeah, the tests don't pass for me either. I'll investigate on my end too 😄

Comment thread tests/test.js Outdated
@Princesseuh
Copy link
Copy Markdown
Contributor Author

Figured it out, however the tests still don't pass because our attributes formatting is not compatible with the HTML parser (we don't trim whitespaces around attributes). I'll get that fixed in the Astro plugin and it should be ready to merge!

@Princesseuh
Copy link
Copy Markdown
Contributor Author

@thecrypticace Updated the PR to the latest version of the plugin and fixed the tests shape and now everything is passing!

image

@thecrypticace thecrypticace merged commit 76607eb into tailwindlabs:main Aug 8, 2022
@thecrypticace
Copy link
Copy Markdown
Contributor

Epic! 🎉 — We'll tag a new release soon (probably tomorrow)

@Princesseuh
Copy link
Copy Markdown
Contributor Author

Any idea when this will be released? 😊

No pressure of course if you people have some release schedule to follow, it's just that we get issues about it on our side 😅

@thecrypticace
Copy link
Copy Markdown
Contributor

@Princesseuh Hey, yeah sorry. We're targeting a release of the new version tomorrow. :)

@thecrypticace
Copy link
Copy Markdown
Contributor

@Princesseuh Hey just an update for you.

I made a small tweak this morning because, as it sits, the PR breaks uses of the prettier plugin when Astro isn't installed. The fix here was simple enough — dynamically loading it. However, after some internal discussions, we've decided that we are not too comfortable with treating the Astro plugin differently from Svelte — which is currently bundled. We want to be sure that whatever we do results in a consistent story for everyone and any supported plugins.

So we investigated two options:

  1. Bundle the Astro plugin. I tried this and it doesn't quite work because of how the Astro plugin is built and our build process. (The uses of createRequire and require.resolve do not get picked up by esbuild). I may have some ways to work around this but it'll take some tweaking to see if it can work.
  2. Don't bundle the Svelte plugin. The way Prettier works makes this difficult. I believe I may have found a way to make this work but not 100% certain yet.

Ideally we would be able to not bundle any plugin. It's just that Prettier's implementation complicates this. For parsers the last registered one wins, for printers the first registered one wins, and having multiple parsers and printers for a single AST format isn't supported. You have to augment the existing one and tack on functionality. Additionally, when finding parsers and printers Prettier generally assumes that they belong to the same plugin and in our case, for Svelte, they do not. I'm going to spend some time this week trying to figure out what the appropriate solution is keeping in mind finding ways to support other plugins in the ecosystem as well.

At least, for now, we're delaying the release while we figure this out. Sorry for the wait — just really want to make sure we do this right.

@Princesseuh
Copy link
Copy Markdown
Contributor Author

Hey, no worries. I totally understand the issue! If there's anything we can do on our end to help, don't hesitate.

Hopefully we'll be able to remove the usage of the dynamic requires from our plugin soon (needs Prettier 3.0, essentially)

bronisMateusz pushed a commit to bronisMateusz/prettier-plugin-tailwindcss-drupal that referenced this pull request Apr 16, 2025
* Add support for Astro files

* Remove unnecessary folder

* Simplify code a bit

* Add Astro test

* WIP

* Fix test

* Update plugin version and tests

* Undo unnecessary formatting changes

Co-authored-by: Jordan Pittman <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants