@ttskch/prettier-plugin-tailwindcss-anywhere
v0.0.7
Published
A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc.
Downloads
346
Maintainers
Readme
prettier-plugin-tailwindcss-anywhere
A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc⚡
Installation
npm install -D prettier \
prettier-plugin-tailwindcss \
@ttskch/prettier-plugin-tailwindcss-anywhere
Usage
This plugin is intended to be used in conjunction with prettier-plugin-tailwindcss.
For example, by setting .prettierrc
as follows, you can sort classes even in files of template engines such as Twig that cannot be processed by prettier-plugin-tailwindcss.
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss", "@ttskch/prettier-plugin-tailwindcss-anywhere"],
"overrides": [
{
"files": "*.html.twig",
"options": {
"parser": "anywhere",
}
}
]
}
Before
{% extends 'base.html.twig %}
{% block content %}
<div class="space-y-4 flex-col flex">
<div class="p-4 rounded-lg bg-blue-500 text-white rounded-lg p-4">
Hello, {{ name }}!
</div>
</div>
{% endblock %}
{% endblock %}
After
{% extends 'base.html.twig %}
{% block content %}
- <div class="space-y-4 flex-col flex">
+ <div class="flex flex-col space-y-4">
- <div class="p-4 rounded-lg bg-blue-500 text-white rounded-lg p-4">
+ <div class="rounded-lg bg-blue-500 p-4 text-white">
Hello, {{ name }}!
</div>
</div>
{% endblock %}
{% endblock %}
Options
regex
default: class="([^"]*)"
The regex
option allows you to specify the part that corresponds to the value of the class attribute using a regular expression.
For example, if you have the following text:
<div class="space-y-4 flex-col flex {% if foo %}is-foo{% endif %}">
In this case, you can specify the following regex
to sort only the part before {% if foo %}
.
{
"options": {
"parser": "anywhere",
"regex": "class=\"([^{}\"]*)(?:\"| {)", // <-- here
}
}
- <div class="space-y-4 flex-col flex {% if foo %}is-foo{% endif %}">
+ <div class="flex flex-col space-y-4 {% if foo %}is-foo{% endif %}">
[!NOTE] Note that you need to surround the part you want to see as the class attribute value with
()
so that the plugin can backreference it.
Getting involved
pnpm install
# Develop...
pnpm check
pnpm test
pnpm build
Thanks! 🎉