# @xwind/class-utilities

> Simple utility functions for tailwindcss classes

Latest version **0.8.0** (published 2021-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xwind/class-utilities
pnpm add @xwind/class-utilities
yarn add @xwind/class-utilities
bun add @xwind/class-utilities
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2021-01-30 |
| First published | 2020-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=12.0.0 |
| Dependencies | 0 |
| Unpacked size | 121.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 371 |
| Author | Arthie |
| Maintainers | arthie |

## Links

- npm: https://www.npmjs.com/package/@xwind/class-utilities
- Repository: https://github.com/Arthie/xwind
- Homepage: https://github.com/Arthie/xwind#readme
- Issues: https://github.com/Arthie/xwind/issues
- npm.io page: https://npm.io/package/@xwind/class-utilities

## Recent versions

- 0.8.0 (latest) — 2021-01-30
- 0.7.0 — 2020-11-24
- 0.4.0 — 2020-11-20
- 0.3.0 — 2020-11-19
- 0.2.0 — 2020-11-17
- 0.1.0 — 2020-10-25

## README

# @xwind/class-utilities

[![NPM version](https://badgen.net/npm/v/@xwind/class-utilities)](https://www.npmjs.com/package/@xwind/class-utilities)
[![License](https://badgen.net/npm/license/@xwind/class-utilities)](https://www.npmjs.com/package/@xwind/class-utilities)

Simple utilities to compose tailwindcss classes.

## Install

```bash
# with npm
npm install @xwind/class-utilities

# with Yarn
yarn add @xwind/class-utilities
```

## API

### utility function parameters

#### `utility(string | string[] | string[][], ...)`

Valid utility function parameters are:

- Classes string
- Array of classes strings
- Nested Arrays containing class strings (nesting has no depth limit)

The utility functions returned result will have removed unnecessary whitespace and duplicate classes.

`Note:` It will return the classes in the same order as the input parameters, from left to right.

#### Variant array syntax

`"variant[class1 class2]" => "variant:class1 variant:class2"`  
Support for custom variant array syntax.
The variant in front of the angle brackets gets applied to the classes inside.

`Note:` Nesting of variant arrays is not allowed.

#### Example

```js
import initClassUtilities from "@xwind/class-utilities";

const classUtilities = initClassUtilities(":");

classUtilities.serializer(
  "text-red-100 hover:bg-red-200 hover:m-4 sm:hover:bg-red-300"
);

classUtilities.serializer(
  "text-red-100",
  "hover:bg-red-200 hover:m-4",
  "sm:hover:bg-red-300"
);

classUtilities.serializer("text-red-100", [
  "hover:bg-red-200",
  "hover:m-4",
  ["sm:hover:bg-red-300"],
]);

classUtilities.serializer(
  "text-red-100 hover[bg-red-200 m-4] sm[hover:bg-red-300]"
);

//Same Result: "text-red-100 hover:bg-red-200 hover:m-4 sm:hover:bg-red-300"
```

### 0. initClassUtilities

#### `initClassUtilities(separator:string, variants?: string[] | undefined): ClassUtilities`

The initClassUtilities function is the default export of "@xwind/class-utilities"
This function takes a seperator string and variants array as parameters and returns an classUtilities object.
The varians array is optional and used to check if the variants names are allowed.

#### Example

```js
import initClassUtilities from "@xwind/class-utilities";

const classUtilities = initClassUtilities(":");

const tw = classUtilities.composer(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
);
//Result: [ "text-red-100", "hover:bg-red-200", "sm:active:bg-red-300" ]

const tw = classUtilities.parser(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
);
//Result: [
//  {
//    twClass: "text-red-100",
//    variants: [],
//  },
//  {
//    twClass: "bg-red-200",
//    variants: ["hover"],
//  },
//  {
//    twClass: "bg-red-300",
//    variants: ["active", "sm"],
//  },
//]

const tw = classUtilities.serializer(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
);
//Result: "text-red-100 hover:bg-red-200 sm:active:bg-red-300"

const tw = classUtilities.generator(
  {
    twClass: "text-red-100",
    variants: [],
  },
  [
    {
      twClass: "bg-red-200",
      variants: ["hover"],
    },
    {
      twClass: "bg-red-300",
      variants: ["active", "sm"],
    },
  ]
);
//Result: [ "text-red-100", "hover:bg-red-200", "sm:active:bg-red-300" ]
```

### 1. composer

#### `composer(classes: string | string[], separator: string): string[]`

The compposer function will return an Array of tailwind class strings.

#### Examples

```js
import { composer } from "@xwind/class-utilities";

const tw = composer("text-red-100 hover:bg-red-200 sm:active:bg-red-300", ":");
//Result: [ "text-red-100", "hover:bg-red-200", "sm:active:bg-red-300" ]
```

```js
import initClassUtilities from "@xwind/class-utilities";

const classUtilities = initClassUtilities(":");

const tw = classUtilities.composer(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
);
//Result: [ "text-red-100", "hover:bg-red-200", "sm:active:bg-red-300" ]
```

### 2. parser

#### `parser(classes: string | string[], separator: string): {twClass: string, variants: string[]}[]`

The parser function will return an Array of parsed tailwind classes.

`Note:` The parsed variants will be in order of application

#### Examples

```js
import { parser } from "@xwind/class-utilities";

const tw = parser("text-red-100 hover:bg-red-200 sm:active:bg-red-300", ":");
//Result: [
//  {
//    twClass: "text-red-100",
//    variants: [],
//  },
//  {
//    twClass: "bg-red-200",
//    variants: ["hover"],
//  },
//  {
//    twClass: "bg-red-300",
//    variants: ["active", "sm"],
//  },
//]
```

```js
import initClassUtilities from "@xwind/class-utilities";

const classUtilities = initClassUtilities(":");

const tw = classUtilities.parser(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
);
//Result: [
//  {
//    twClass: "text-red-100",
//    variants: [],
//  },
//  {
//    twClass: "bg-red-200",
//    variants: ["hover"],
//  },
//  {
//    twClass: "bg-red-300",
//    variants: ["active", "sm"],
//  },
//]
```

### 3. serializer

#### `serializer(classes: string | string[], separator: string): string`

The serializer function will return a string of tailwind classes.

#### Examples

```js
import { serializer } from "@xwind/class-utilities";

const tw = serializer(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300",
  ":"
);
//Result: "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
```

```js
import initClassUtilities from "@xwind/class-utilities";

const classUtilities = initClassUtilities(":");

const tw = classUtilities.serializer(
  "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
);
//Result: "text-red-100 hover:bg-red-200 sm:active:bg-red-300"
```

### 4. generator

#### `generator(twParsedClasses: TwParsedClass | TwParsedClass[], separator: string): string[]`

The generator function will return a string of tailwind classes.

#### Examples

```js
import { generator } from "@xwind/class-utilities";

const tw = generator(
  [
    {
      twClass: "bg-red-200",
      variants: ["hover"],
    },
    {
      twClass: "bg-red-300",
      variants: ["active", "sm"],
    },
  ],
  ":"
);
//Result: [ "hover:bg-red-200", "sm:active:bg-red-300" ]
```

```js
import initClassUtilities from "@xwind/class-utilities";

const classUtilities = initClassUtilities(":");

const tw = classUtilities.generator(
  {
    twClass: "text-red-100",
    variants: [],
  },
  [
    {
      twClass: "bg-red-200",
      variants: ["hover"],
    },
    {
      twClass: "bg-red-300",
      variants: ["active", "sm"],
    },
  ]
);
//Result: [ "text-red-100", "hover:bg-red-200", "sm:active:bg-red-300" ]
```

## License

[MIT](LICENSE). Copyright (c) 2020 Arthur Petrie.

---
_Source: https://npm.io/package/@xwind/class-utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._