@ttskch/prettier-plugin-tailwindcss-anywhere 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Takashi Kanemoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+# prettier-plugin-tailwindcss-anywhere
+
+[![](https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere/actions/workflows/ci.yaml?query=branch:main)
+[![codecov](https://codecov.io/gh/ttskch/prettier-plugin-tailwindcss-anywhere/graph/badge.svg?token=GEZ1cdUmSx)](https://codecov.io/gh/ttskch/prettier-plugin-tailwindcss-anywhere)
+![NPM Version](https://img.shields.io/npm/v/%40ttskch%2Fprettier-plugin-tailwindcss-anywhere)
+![NPM Downloads](https://img.shields.io/npm/dm/%40ttskch%2Fprettier-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 %}
+    <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
+
+```diff
+  {% 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`
+
+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
+<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 %}`.
+
+```json5
+{
+  "options": {
+    "parser": "anywhere",
+    "plugins": ["@ttskch/prettier-plugin-tailwindcss-anywhere"],
+    "regex": 'class="([^{}"]*)(?:"| {)' // <-- here
+  }
+}
+```
+
+```diff
+- <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
+
+```shell
+pnpm install
+
+# Develop...
+
+pnpm check
+pnpm test
+pnpm build
+```
+
+Thanks! 🎉

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+import type { Options, Parser, Printer, SupportLanguage, SupportOption } from "prettier";
+export declare const languages: Partial<SupportLanguage>[];
+export declare const parsers: Record<string, Parser>;
+export declare const printers: Record<string, Printer>;
+export declare const options: Record<string, SupportOption>;
+export declare const defaultOptions: Options;

package/dist/src/index.js

@@ -0,0 +1,35 @@
+import { parse } from "./parser.js";
+import { print } from "./printer.js";
+export const languages = [
+    {
+        name: "Any HTML-like Languages",
+        parsers: ["anywhere"],
+        aceMode: "text",
+    },
+];
+export const parsers = {
+    anywhere: {
+        parse,
+        astFormat: "anywhere",
+        locStart(node) {
+            return node.start;
+        },
+        locEnd(node) {
+            return node.end;
+        },
+    },
+};
+export const printers = {
+    anywhere: {
+        print,
+    },
+};
+export const options = {
+    regex: {
+        type: "string",
+        category: "Anywhere",
+        default: 'class="([^{}"]*)"',
+        description: "regex to match class attribute",
+    },
+};
+export const defaultOptions = {};

package/dist/src/parser.d.ts

@@ -0,0 +1,10 @@
+import type { ParserOptions } from "prettier";
+type AnywhereNode = {
+    type: "anywhere";
+    body: string;
+    source: string;
+    start: number;
+    end: number;
+};
+export declare const parse: (text: string, options: ParserOptions) => Promise<AnywhereNode>;
+export {};

package/dist/src/parser.js

@@ -0,0 +1,28 @@
+import { format } from "prettier";
+import * as prettierPluginTailwindcss from "prettier-plugin-tailwindcss";
+export const parse = async (text, options) => {
+    let formattedText = text;
+    const regex = options.regex;
+    const matches = text.matchAll(new RegExp(regex, "g"));
+    const map = new Map();
+    for (const match of matches) {
+        const original = match[0];
+        const value = match[1];
+        const fixedValue = (await format(`<div class="${value}"></div>`, {
+            parser: "html",
+            plugins: [prettierPluginTailwindcss],
+        })).match(/class="([^"]*)"/)?.[1];
+        const fixed = original.replace(value, fixedValue);
+        map.set(original, fixed);
+    }
+    for (const [original, fixed] of map) {
+        formattedText = formattedText.replace(original, fixed);
+    }
+    return {
+        type: "anywhere",
+        body: formattedText,
+        end: text.length,
+        source: text,
+        start: 0,
+    };
+};

package/dist/src/printer.d.ts

@@ -0,0 +1,2 @@
+import type { AstPath, Doc } from "prettier";
+export declare const print: (path: AstPath) => Doc;

package/dist/src/printer.js

@@ -0,0 +1,9 @@
+export const print = (path) => {
+    const node = path.node;
+    switch (node.type) {
+        case "anywhere": {
+            return node.body;
+        }
+    }
+    throw new Error(`Unknown node type: ${node.type}`);
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ttskch/prettier-plugin-tailwindcss-anywhere",
+  "version": "0.0.0",
+  "description": "A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc.",
+  "keywords": ["prettier", "tailwindcss", "formatter", "html", "twig"],
+  "type": "module",
+  "engines": {
+    "node": ">= 20.9 < 21"
+  },
+  "packageManager": "pnpm@9.12.3",
+  "main": "dist/src/index.js",
+  "files": ["dist", "src"],
+  "exports": {
+    ".": {
+      "import": "./dist/src/index.js"
+    }
+  },
+  "dependencies": {
+    "tslib": "~2.7"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/node": "~20",
+    "@types/prettier": "^3.0.0",
+    "@vitest/coverage-v8": "~2.1",
+    "prettier": "^3.0",
+    "prettier-plugin-tailwindcss": "^0.6",
+    "rimraf": "~6.0",
+    "ts-api-utils": "~1.3",
+    "typescript": "~5.5",
+    "vitest": "~2.1"
+  },
+  "peerDependencies": {
+    "prettier": "^3.0",
+    "prettier-plugin-tailwindcss": "^0.6"
+  },
+  "scripts": {
+    "start": "node dist/src/main.js",
+    "clean": "rimraf coverage dist tmp",
+    "prebuild": "biome lint",
+    "build": "tsc -d -p tsconfig.json",
+    "build:watch": "tsc -w -d -p tsconfig.json",
+    "build:release": "npm run clean && tsc -d -p tsconfig.release.json",
+    "check": "biome check",
+    "check:fix": "biome check --write",
+    "test": "vitest run unit",
+    "test:coverage": "vitest run unit --coverage.enabled --coverage.all",
+    "test:watch": "vitest unit"
+  },
+  "author": "Takashi Kanemoto <ttskch@gmail.com>",
+  "license": "MIT",
+  "volta": {
+    "node": "20.17.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+import type {
+  Options,
+  Parser,
+  Printer,
+  SupportLanguage,
+  SupportOption,
+} from "prettier";
+import { parse } from "./parser.js";
+import { print } from "./printer.js";
+
+/**
+ * @see https://prettier.io/docs/en/plugins#languages
+ */
+export const languages: Partial<SupportLanguage>[] = [
+  {
+    name: "Any HTML-like Languages",
+    parsers: ["anywhere"],
+    aceMode: "text",
+  },
+];
+
+/**
+ * @see https://prettier.io/docs/en/plugins#parsers
+ */
+export const parsers: Record<string, Parser> = {
+  anywhere: {
+    parse,
+    astFormat: "anywhere",
+    // there's only a single node
+    locStart(node) {
+      return node.start;
+    },
+    locEnd(node) {
+      return node.end;
+    },
+  },
+};
+
+/**
+ * @see https://prettier.io/docs/en/plugins#printers
+ */
+export const printers: Record<string, Printer> = {
+  anywhere: {
+    print,
+  },
+};
+
+/**
+ * @see https://prettier.io/docs/en/plugins.html#options
+ */
+export const options: Record<string, SupportOption> = {
+  regex: {
+    type: "string",
+    category: "Anywhere",
+    default: 'class="([^{}"]*)"',
+    description: "regex to match class attribute",
+  },
+};
+
+/**
+ * @see https://prettier.io/docs/en/plugins#defaultoptions
+ */
+export const defaultOptions: Options = {};

package/src/parser.ts

@@ -0,0 +1,51 @@
+import type { ParserOptions } from "prettier";
+import { format } from "prettier";
+import * as prettierPluginTailwindcss from "prettier-plugin-tailwindcss";
+
+type AnywhereNode = {
+  type: "anywhere";
+  body: string;
+  source: string;
+  start: number;
+  end: number;
+};
+
+export const parse = async (
+  text: string,
+  options: ParserOptions,
+): Promise<AnywhereNode> => {
+  let formattedText = text;
+  const regex = options.regex as string;
+
+  const matches = text.matchAll(new RegExp(regex, "g"));
+
+  const map = new Map();
+
+  for (const match of matches) {
+    const original = match[0];
+    const value = match[1];
+
+    const fixedValue = (
+      await format(`<div class="${value}"></div>`, {
+        parser: "html",
+        plugins: [prettierPluginTailwindcss],
+      })
+    ).match(/class="([^"]*)"/)?.[1];
+
+    const fixed = original.replace(value, fixedValue);
+
+    map.set(original, fixed);
+  }
+
+  for (const [original, fixed] of map) {
+    formattedText = formattedText.replace(original, fixed);
+  }
+
+  return {
+    type: "anywhere",
+    body: formattedText,
+    end: text.length,
+    source: text,
+    start: 0,
+  };
+};

package/src/printer.ts

@@ -0,0 +1,13 @@
+import type { AstPath, Doc } from "prettier";
+
+export const print = (path: AstPath): Doc => {
+  const node = path.node;
+
+  switch (node.type) {
+    case "anywhere": {
+      return node.body;
+    }
+  }
+
+  throw new Error(`Unknown node type: ${node.type}`);
+};