@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:

Usage no npm install needed!

<script type="module">
  import observablehqPrettierReactTachyons from 'https://cdn.skypack.dev/@observablehq/prettier-react-tachyons';
</script>

README

@observablehq/prettier-react-tachyons

Node CI

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' />