Skip to content

Introduce @herb-tools/rewriter package#759

Merged
marcoroth merged 4 commits intomainfrom
rewriter
Nov 1, 2025
Merged

Introduce @herb-tools/rewriter package#759
marcoroth merged 4 commits intomainfrom
rewriter

Conversation

@marcoroth
Copy link
Owner

@marcoroth marcoroth commented Nov 1, 2025

This pull request introduces a new @herb-tools/rewriter package that provides a plugin architecture for transforming HTML+ERB templates and enables users to create custom transformations.

This pull request just introduces the @herb-tools/rewriter package and the building blocks. These transformations can later be used for pre- and post-format rewriters. It can also serve as a foundation for re-implementing the linter autofixes using the rewriter architecture.

We also want use this architecture to integrate the @herb-tools/tailwind-class-sorter package into the @herb-tools/formatter so it can be run as part of the format-action.

@github-actions github-actions bot added documentation Improvements or additions to documentation linter javascript typescript rewriter labels Nov 1, 2025
@marcoroth marcoroth merged commit 73e6744 into main Nov 1, 2025
9 checks passed
@marcoroth marcoroth deleted the rewriter branch November 1, 2025 05:09
marcoroth added a commit that referenced this pull request Nov 1, 2025
Building on top of #759, this pull request implements a
`tailwind-class-sorter` rewriter that's going to be built-in to the
`@herb-tools/rewriter` package.

Other tools will be able to refer to this built-in rewriter just by its
name `tailwind-class-sorter`. This is going to enable us to plug it in
to the `@herb-tools/formatter` (see #671).

**Example**:
```ts
  import { Herb } from "@herb-tools/node-wasm"
  import { IdentityPrinter } from "@herb-tools/printer"
  import { TailwindClassSorterRewriter } from "@herb-tools/rewriter"

  await Herb.load()

  const rewriter = new TailwindClassSorterRewriter()
  await rewriter.initialize({ baseDir: process.cwd() })

  const input = `<div class="px-4 bg-blue-500 text-white"></div>`
  const parseResult = Herb.parse(input, { track_whitespace: true })

  const rewritten = rewriter.rewrite(parseResult, { baseDir: process.cwd() })
  const output = IdentityPrinter.print(rewritten.value)

  console.log(output)
  // Output: <div class="bg-blue-500 px-4 text-white"></div>
```
marcoroth added a commit that referenced this pull request Nov 1, 2025
Building on #759 and #760, this pull request integrates the
`@herb-tools/tailwind-css-sorter` package into the
`@herb-tools/formatter`, by using the built-in `tailwind-css-sorter`
rewriter from the `@herb-tools/rewriter` package.

Users can set the `tailwind-class-sorter` rewriter under the `formatter`
section in the `.herb.yml` configuration file.

```diff
formatter:
  enabled: true

+ rewriter:
+   pre:
+     - tailwind-class-sorter
```

Since this is just a formatter configuration option, it will also work
in the `textDocument/formatting` request in the language server.


https://github.com/user-attachments/assets/57979d1e-88ac-421e-8551-1af82de14f1b

Additionally, users can put custom rewriters in `.herb/rewriters/*` and
then reference them by filename in the `rewriter` section of the
configuration.

Resolves #671
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant