@f12io/prettier-plugin-maple weekly downloads statistics

@f12io/prettier-plugin-maple

Prettier plugin for the Maple CSS Engine. It automatically formats your Maple utility classes to ensure a consistent layout across your project. Because it shares the same formatting logic as the Maple VS Code extension, you get identical results everywhere—whether you are formatting on save in your editor, running pre-commit hooks, or running CI pipelines.

Install

npm install --save-dev prettier @f12io/prettier-plugin-maple

// .prettierrc
{
  "plugins": ["@f12io/prettier-plugin-maple"],
  "mapleMaxClassesPerLine": 4,
}

What gets formatted

Wrapped parsers: html, vue, angular, babel, babel-ts, typescript.

• class="..." attributes in HTML/Vue/Angular templates — wrapped onto grouped multi-line layout via a printer override, indented to wherever Prettier places the element
• className={...} / class={...} JSX expressions, including ternaries
• clsx(...), classNames(...), cva(...) arguments
• /* maple */ opt-in expressions (ternaries, concatenations, objects)
• Embedded <script> content in HTML/Vue files
• Vue :class and Angular [ngClass] string literals (single-line normalization — those hosts cannot contain multi-line strings)

Class lists longer than mapleMaxClassesPerLine wrap onto grouped lines; string delimiters are upgraded only when safe (e.g. '...' → `...` in JS).

<div
  class="
    c-blue p-2 m-2 fs-50
    o-50 fw-normal
  "
></div>

The html element is laid out one class per line once it exceeds the limit, since its classes are alias definitions:

<html
  class="
    --alias-btn=bgc-red-500;p-2
    --alias-card=p-{space,4}
    --alias-underline=brb;brc-{color,body}-90
    --alias-square=px-{space,1.5};ar=1
    --alias-prose=fs-50;lh-1.6
  "
></html>

Blank lines are preserved: each run of classes between them is formatted on its own and never merges with its neighbours.

<div
  class="
    c-blue p-2 m-2 fs-50
    o-50 fw-normal
  "
></div>

Options

Option	Default	Description
mapleMaxClassesPerLine	4	Maximum classes per line before wrapping. 1 forces one class per line.

License

Released under the Root Source License (ROOT), an MIT-style permissive license with an additional distribution condition for systems that can recreate the source on demand. © f12.io