eslint-config-pandacss-sort

Before

import { css } from "styled-system/css/index.js";

const style = css({
  fontSize: 1,
  _hover: {
    color: "red",
  },
  background: {
    _hover: "blue",
    base: "green",
    _focus: "yellow",
  },
});

After

import { css } from "styled-system/css/index.js";

const style = css({
  fontSize: 1,
  background: {
    _hover: "blue",
    _focus: "yellow",
    base: "green",
  },
  _hover: {
    color: "red",
  },
});

Installation

pnpm add -D @mkx419/eslint-config-pandacss-sort

Usage

import perfectionist from "eslint-plugin-perfectionist";
import getConfig from "@mkx419/eslint-config-pandacss-sort";

/** @type {import("eslint").Linter.Config[]} */
export default [
  perfectionist.configs["recommended-natural"],
  await getConfig({
    // Options
    type: "natural",
  }),
];

See here for options.