postcss-ts-classnames
PostCSS plugin to generate TypeScript types from your CSS class names.
It generates a global ClassNames type which is a union of all classes
used in your project whether written by you or from a framework such as
Bootstrap or Tailwind (which can get bit too slow).
Ex. for css
.button {
background: green;
}
.button-danger {
background: red;
}
you'll get
type ClassNames = "button" | "button-danger";
With it you can create a helper function like
function cn(...args: ClassNames[]) {
return args.join(" ");
}
and have your editor autocomplete and validate the class names:
Setup
Install the plugin
npm install postcss-ts-classnames
In your PostCSS config add it close to the end before optimizing plugins such
as cssnano or purgecss:
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("postcss-ts-classnames")({
dest: "src/classnames.d.ts",
// Set isModule if you want to import ClassNames from another file
isModule: true,
exportAsDefault: true, // to use in combination with isModule
}),
require("@fullhuman/postcss-purgecss")({
content: ["./src/**/*.html"],
}),
],
};
ts-classnames
There's also a ts-classnames module which is re-exported version of the
original classnames which uses the generated ClassNames type to
validate the class names
Install
npm install ts-classnames
Import
import { cn } from "ts-classnames";
Vanilla JavaScript
If you don't use TypeScript you can still leverage this as VSCode can pick up
TypeScript types from JSDoc comments so you can do
/**
* @param {ClassNames[]} args
*/
function cn(...args) {
return args.join(" ");
}
This will give the autocomplete but if you want the class names checking you
can add // @ts-check to the top of the file.
The ts-classnames will work with Vanilla JS too.
