class-types.macro v0.51.0
class-types.macro
Types for your CSS classes. This is a combination of a PostCSS plugin and babel macro.
Setup
Add this package:
with npm
npm i class-types.macro
npm i -D postcss-class-types
or using yarn
yarn add class-types.macro
yarn add -D postcss-class-types
You may need to add the babel macros plugin: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md Some projects such as create react app may already have this installed.
Next configure the PostCSS plugin, you'll want to add this after tailwind (or similar library), but before purgeCSS or any libraries that optimize your CSS builds.
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require("postcss-class-types"),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
ESLint setup
There's an optional, but nice to have eslint plugin that'll give your classes a consistent order.
Install eslint-plugin-class-types
:
npm i -D eslint-plugin-class-types
yarn add eslint-plugin-class-types -D
Add class-types
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": [
"class-types"
]
}
Then configure the rules you want to use under the rules section.
{
"rules": {
"class-types/class-order": 2
}
}
Usage
import React from "react";
import ct from "class-types.macro";
export default () => <div className={ct("bg-blue-200", "flex", "mx-auto")} />;
The first time you compile your CSS after adding the PostCSS plugin you'll notice 2 files were generated:
@types/class-types/classTypes.d.ts
@types/class-types/index.d.ts
You can customize the path where these files are saved by passing a directory option in your postcss config.
require('class-types.macro').postcss({ directory: 'custom-directory/path/' }),
Treat these files as you would yarn.lock or package-json.lock, commit them when you have changes, but don't edit them by hand.
Why use this library
TypeScript types for your tailwind classes
Confidently make changes to your tailwind config.
Ever make a change like this?
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
blue: {
'900': '#1e3656',
}
}
}
}
}
and find out later (in prod) you accidentally wiped out blue shades 100 - 800? this plugin guards against that!
Zero runtime cost
function calls are compiled to strings via babel macro!
// this:
<div className={ct("bg-blue-200", "flex", "mx-auto")} />
// gets compiled to this:
<div className="bg-blue-200 flex mx-auto" />
Style composition without additional CSS
Tailwind provides the @apply
directive to make using collections of classes easier. This unfortunately works against utility CSS's promise of no duplicate styles being delivered.
Class Types solves this problem by allowing users to assign groups of classes to a variable. The variables will also be assigned a union string type containing the classes so you can see what classes are in a given variable.
// type: "text-green-500"
const brandColor = ct(
"text-green-500"
);
// type: "font-medium" | "text-3xl" | "leading-tight" | "tracking-tight" | "sm:text-4xl" | "md:text-5xl" | "xl:text-4xl"
const heading = ct(
"font-medium",
"text-3xl",
"leading-tight",
"tracking-tight",
"sm:text-4xl",
"md:text-5xl",
"xl:text-4xl",
);
const Page = () => {
<main>
<h1 className={ct(heading, brandColor, "flex")}></h1>
</main>;
};
Editor autocomplete
Never wonder again if z-index is incremented by 10 or 100!
Auto-reorder classes via ESLint plugin/rule
Better prettier formatting for long classes
this
<div className="absolute overflow-x-hidden inset-x-0 w-11/12 mx-auto mt-5 overflow-y-auto bg-white outline-none border border-gray-300 border-solid rounded shadow-lg opacity-100" />
turns into this:
<div
className={ct(
"w-11/12",
"bg-white",
"border-gray-300",
"rounded",
"border-solid",
"border",
"shadow-lg",
"inset-x-0",
"mx-auto",
"mt-5",
"opacity-100",
"outline-none",
"overflow-y-auto",
"overflow-x-hidden",
"absolute"
)}
/>