Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere
A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc⚡
https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere
formatter html prettier prettier-plugin tailwindcss twig
Last synced: about 1 month ago
JSON representation
A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc⚡
- Host: GitHub
- URL: https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere
- Owner: ttskch
- License: mit
- Created: 2024-11-08T12:59:23.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-26T01:53:57.000Z (about 1 month ago)
- Last Synced: 2024-11-26T02:27:02.456Z (about 1 month ago)
- Topics: formatter, html, prettier, prettier-plugin, tailwindcss, twig
- Language: TypeScript
- Homepage:
- Size: 54.7 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# prettier-plugin-tailwindcss-anywhere
[](https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere/actions/workflows/ci.yaml?query=branch:main)
[](https://codecov.io/gh/ttskch/prettier-plugin-tailwindcss-anywhere)
[](https://www.npmjs.com/package/@ttskch/prettier-plugin-tailwindcss-anywhere)
[](https://www.npmjs.com/package/@ttskch/prettier-plugin-tailwindcss-anywhere)
A Prettier plugin for sorting TailwindCSS classes **in any HTML-like language, like Twig etc**⚡
## Installation
```shell
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](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).
For example, by setting `.prettierrc` as follows, you can sort classes even in files of template engines such as [Twig](https://twig.symfony.com/) that cannot be processed by prettier-plugin-tailwindcss.
```json5
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss", "@ttskch/prettier-plugin-tailwindcss-anywhere"],
"overrides": [
{
"files": "*.html.twig",
"options": {
"parser": "anywhere",
}
}
]
}
```
### Before
```twig
{% extends 'base.html.twig %}
{% block content %}
Hello, {{ name }}!
{% endblock %}
{% endblock %}
```
### After
```diff
{% extends 'base.html.twig %}
{% block content %}
-
+
-
+
Hello, {{ name }}!
{% 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:
```twig
```
In this case, you can specify the following `regex` to sort only the part before `{% if foo %}`.
```json5
{
"options": {
"parser": "anywhere",
"regex": "class=\"([^{}\"]*)(?:\"| {)", // <-- here
}
}
```
```diff
-
+
```
> [!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
```shell
pnpm install
# Develop...
pnpm check
pnpm test
pnpm build
```
Thanks! 🎉