# aesthetic

> Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components through the use of adapters.

Latest version **5.2.0** (published 2020-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install aesthetic
pnpm add aesthetic
yarn add aesthetic
bun add aesthetic
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.2.0 |
| Published | 2020-04-06 |
| First published | 2015-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 154.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 208 |
| Maintainers | milesj |
| Keywords | aesthetic, react, native, style, components, hoc, css, css-in-js, css-modules, aphrodite, glamor, fela, jss |

## Links

- npm: https://www.npmjs.com/package/aesthetic
- Repository: https://github.com/milesj/aesthetic/tree/master/packages/core-legacy
- Funding: https://ko-fi.com/milesjohnson
- npm.io page: https://npm.io/package/aesthetic

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^7.0.1
- [extend](https://npm.io/package/extend.md) ^3.0.2
- [stylis](https://npm.io/package/stylis.md) ^3.5.4
- [csstype](https://npm.io/package/csstype.md) ^2.6.9
- [rtl-css-js](https://npm.io/package/rtl-css-js.md) ^1.14.0
- [aesthetic-utils](https://npm.io/package/aesthetic-utils.md) ^3.1.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 5.2.0 (latest) — 2020-04-06
- 5.0.0-alpha.1 (next) — 2019-12-19
- 5.1.4 — 2020-03-24
- 5.1.3 — 2020-03-02
- 5.1.2 — 2020-02-22
- 5.1.1 — 2020-02-07
- 5.1.0 — 2020-01-27
- 5.0.1 — 2019-12-19
- 5.0.0 — 2019-12-19
- 5.0.0-alpha.0 — 2019-12-17
- 4.1.1 — 2019-09-16
- 4.1.0 — 2019-07-11
- 4.0.0 — 2019-07-07
- 4.0.0-rc.0 — 2019-07-02
- 4.0.0-alpha.7 — 2019-06-20
- … 66 more at https://npm.io/package/aesthetic/versions

## README

# Aesthetic

[![Build Status](https://github.com/milesj/aesthetic/workflows/Build/badge.svg)](https://github.com/milesj/aesthetic/actions?query=branch%3Amaster)
[![npm version](https://badge.fury.io/js/aesthetic.svg)](https://www.npmjs.com/package/aesthetic)
[![npm deps](https://david-dm.org/milesj/aesthetic.svg?path=packages/core-legacy)](https://www.npmjs.com/package/aesthetic)

Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components,
whether it be with plain objects, importing style sheets, or simply referencing external class
names. Simply put, Aesthetic is an abstraction layer for the compilation of styles via third-party
libraries, all the while providing customizability, theming, additional features, and a unified
syntax.

```ts
import aesthetic from 'aesthetic';
import AphroditeAdapter from 'aesthetic-adapter-aphrodite';
import { Theme } from './types';

aesthetic.configure({
  adapter: new AphroditeAdapter(),
  theme: 'light',
});

// Register a theme
aesthetic.registerTheme<Theme>('light', {
  unit: 8,
});

// Register a style sheet definition for a component
aesthetic.registerStyleSheet<Theme>('button', ({ unit }) => ({
  button: {
    textAlign: 'center',
    display: 'inline-block',
    padding: unit,
  },
}));

// Parse the styles and generate CSS class names
const styles = aesthetic.createStyleSheet('button');
const className = aesthetic.transformStyles(styles.button);
```

## React

Supports both an HOC and hook styled React API!

```tsx
import React from 'react';
import { useStyles } from 'aesthetic-react';

export type Props = {
  children: React.ReactNode;
};

export default function Button({ children }: Props) {
  const [styles, cx] = useStyles(({ unit }) => ({
    button: {
      textAlign: 'center',
      display: 'inline-block',
      padding: unit,
    },
  }));

  return (
    <button type="button" className={cx(styles.button)}>
      {children}
    </button>
  );
}
```

## Requirements

- IE 11+

## Installation

```
yarn add aesthetic
// Or
npm install aesthetic
```

## Documentation

[https://milesj.gitbook.io/aesthetic](https://milesj.gitbook.io/aesthetic)

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