Skip to content
PostCSS plugin to generate TypeScript types from your CSS class names.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 127afa4 Nov 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.demos Add autocomplete gif Nov 3, 2019
.github/workflows Use correct dir for ts-classnames release Nov 2, 2019
.vscode initial implementation bits Nov 2, 2019
__tests__ Reorganize Nov 2, 2019
src Fix plugin name Nov 4, 2019
ts-classnames ts-classnames 0.1.1 Nov 2, 2019
.gitignore Reorganize Nov 2, 2019
.prettierrc
README.md
index.js fix export Nov 2, 2019
jest.config.js inital Nov 2, 2019
package.json 0.1.2 Nov 3, 2019
postcss.js Actually write type ts code Nov 2, 2019
tsconfig.build.json target es6 Nov 2, 2019
tsconfig.dtslint.json inital Nov 2, 2019
tsconfig.json inital Nov 2, 2019

README.md

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.

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:

vscode demo

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",
        }),

        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.

You can’t perform that action at this time.