postcss-ts-classnames

KO | EN

gitlite — search

#typescript #golang #deep-learning #linux #nodejs #java #windows #cli #kubernetes #awesome-list #vue #security #mcp #open-source

postcss-ts-classnames

(★ 71)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- autocomplete.gif
- - prerelease.yml
  - release-ts-classnames.yml
  - release.yml
- launch.json
- settings.json
- postcss-plugin.test.ts
- class-name-collector.ts
- plugin.ts
- index.d.ts
- index.js
- package-lock.json
- package.json
- README.md
.gitignore
.prettierrc
index.js
jest.config.js
package.json
postcss.js
README.md
tsconfig.build.json
tsconfig.dtslint.json
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://raw.githubusercontent.com/esamattis/postcss-ts-classnames/master/.demos/autocomplete.gif)

## 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

postcss-ts-classnames

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

postcss-ts-classnames

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README