Sorting

Oxfmt includes sorting features for imports, Tailwind classes, and package.json.

• Sort imports
• Tailwind CSS class sorting
• Sort package.json fields

Sort imports

Based on eslint-plugin-perfectionist/sort-imports. Disabled by default.

Progress: https://github.com/oxc-project/oxc/issues/14253

Configuration

Sort imports by distance (furthest to closest):

.oxfmtrc.json

{
  "experimentalSortImports": {
    "groups": [
      ["side-effect"],
      ["builtin"],
      ["external", "external-type"],
      ["internal", "internal-type"],
      ["parent", "parent-type"],
      ["sibling", "sibling-type"],
      ["index", "index-type"]
    ]
  }
}

Tailwind CSS class sorting

Sorts Tailwind utility classes in JSX / TSX.

Based on prettier-plugin-tailwindcss.

Disabled by default.

Configuration

.oxfmtrc.json

{
  "experimentalTailwindcss": {
    "config": "./tailwind.config.js",
    "stylesheet": "./path/to/stylesheet.css",
    "attributes": ["class", "className"],
    "functions": ["clsx", "cn"],
    "preserveDuplicates": false,
    "preserveWhitespace": false
  }
}

Limitations

Regex patterns for attributes are not supported:

.oxfmtrc.json

{
  "experimentalTailwindcss": {
    "attributes": ["/data-.*/"]
  }
}

Sort package.json fields

Sorts keys in package.json using an opinionated order. Enabled by default.

See field ordering for details.

Configuration

To disable:

.oxfmtrc.json

{
  "experimentalSortPackageJson": false
}

To sort scripts alphabetically:

.oxfmtrc.json

{
  "experimentalSortPackageJson": {
    "sortScripts": true
  }
}