@observablehq/prettier-react-tachyons

A prettier custom parser plugin for users of React and tachyons. It adds an extra prettier transform for className= attributes on JSX elements, that takes care of the following:

• Eliminating redundant classes
• Sorting classes in a predictable order

How do you use it?

This is admittedly a little bleeding-edge: prettier supports custom parsers, but not custom rules / reformatters, so this essentially augments prettier's babylon-based parser for JavaScript. You can configure prettier to point to it with the parser option. For instance, here's how we configure prettier in our .prettierrc:

{
  "parser": "./node_modules/@observablehq/prettier-react-tachyons"
}

Example:

in:

<div className='h1 h1 w2 pv2 bg-transparent red' />

out:

<div className='w2 h1 pv2 red bg-transparent' />