npmpackage.info

Gathering detailed insights and metrics for postcss-ts-classnames

Gathering detailed insights and metrics for postcss-ts-classnames

postcss-ts-classnames

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

0.3.0

73

TypeScript

13.66 kB

Installations

npm install postcss-ts-classnames

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.15.4

NPM Version

6.14.10

Score

65.5

Supply Chain

97.7

Quality

75.3

Maintenance

50

Vulnerability

99.6

License

Pull Requests

Open

0

Total

3

Closed

0

Merged

3

Issues

Open

2

Total

6

Closed

4

Releases

4

v0.3.0

Published on 26 Feb 2021

v0.2.1

Published on 13 Feb 2021

v0.2.0

Published on 17 Sept 2020

v0.1.2

Published on 03 Nov 2019

View all 4 releases

Contributors

3

Unable to fetch Contributors

View all 3 contributors

Languages

2

TypeScript

JavaScript

TypeScript (95.67%)

JavaScript (4.33%)

Developer

Download Statistics

Total Downloads

57,598

Last Day

3

Last Week

50

Last Month

341

Last Year

17,178

GitHub Statistics

73 Stars

55 Commits

4 Forks

3 Watching

1 Branches

3 Contributors

Maintainers

1

Package Meta Information

Latest Version

0.3.0

Package Id

postcss-ts-classnames@0.3.0

Unpacked Size

13.66 kB

Size

4.60 kB

File Count

9

NPM Version

6.14.10

Node Version

14.15.4

Total Downloads

Cumulative downloads

Total Downloads

57,598

Last day

-85.7%

3

Compared to previous day

Last week

-20.6%

50

Compared to previous week

Last month

3%

341

Compared to previous month

Last year

-23.2%

17,178

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

lodash.debounce postcss postcss-selector-parser

Dev Dependencies

8

@types/jest @types/lodash.debounce @types/node jest prettier sh-thunk ts-jest typescript

Versions

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

1.button {
2    background: green;
3}
4
5.button-danger {
6    background: red;
7}

you'll get

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

With it you can create a helper function like

1function cn(...args: ClassNames[]) {
2    return args.join(" ");
3}

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:

1module.exports = {
2    plugins: [
3        require("postcss-import"),
4        require("tailwindcss"),
5
6        require("postcss-ts-classnames")({
7            dest: "src/classnames.d.ts",
8            // Set isModule if you want to import ClassNames from another file
9            isModule: true,
10            exportAsDefault: true, // to use in combination with isModule
11        }),
12
13        require("@fullhuman/postcss-purgecss")({
14            content: ["./src/**/*.html"],
15        }),
16    ],
17};

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

1import { 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

1/**
2 * @param {ClassNames[]} args
3 */
4function cn(...args) {
5    return args.join(" ");
6}

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.

Empty State

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.2

/10

Last Scanned on 2024-12-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.