https://github.com/esamattis/postcss-ts-classnames

PostCSS plugin to generate TypeScript types from your CSS class names.
https://github.com/esamattis/postcss-ts-classnames

codegen css typescript

Last synced: 17 days ago
JSON representation

PostCSS plugin to generate TypeScript types from your CSS class names.

• Host: GitHub
• URL: https://github.com/esamattis/postcss-ts-classnames
• Owner: esamattis
• Created: 2019-11-02T13:32:57.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-02-26T15:35:39.000Z (over 3 years ago)
• Last Synced: 2024-05-14T21:03:51.947Z (6 months ago)
• Topics: codegen, css, typescript
• Language: TypeScript
• Homepage: https://npm.im/postcss-ts-classnames
• Size: 915 KB
• Stars: 72
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# postcss-ts-classnames

[PostCSS][] plugin to generate TypeScript types from **your** CSS class names.

[postcss]: https://postcss.org/

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](https://github.com/esamattis/postcss-ts-classnames/issues/5)).

Ex. for css

```css

.button {

    background: green;

}

.button-danger {

    background: red;

}

```

you'll get

```ts

type ClassNames = "button" | "button-danger";

```

With it you can create a helper function like

```ts

function cn(...args: ClassNames[]) {

    return args.join(" ");

}

```

and have your editor autocomplete and validate the class names:

![vscode demo](.demos/autocomplete.gif?raw=true "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:

```js

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

[classnames]: https://www.npmjs.com/package/classnames

Install

    npm install ts-classnames

Import

```ts

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

```js

/**

 * @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`][js] to the top of the file.

The `ts-classnames` will work with Vanilla JS too.

[js]: https://github.com/microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files