# gloss

> Higher order component for nicer component styles

Latest version **2.8.23** (published 2021-03-18) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.8.23 |
| Published | 2021-03-18 |
| First published | 2012-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 551.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | motion |
| Maintainers | nwienert, steelbrain |

## Links

- npm: https://www.npmjs.com/package/gloss
- Repository: https://github.com/motion/gloss
- Issues: https://github.com/motion/gloss/issues
- npm.io page: https://npm.io/package/gloss

## Dependencies (2)

- [@o/css](https://npm.io/package/@o/css.md) ^2.8.23
- [@o/fast-compare](https://npm.io/package/@o/fast-compare.md) ^2.8.23

## Recent versions

- 2.8.23 (latest) — 2021-03-18
- 2.8.22 — 2021-03-18
- 2.8.21 — 2021-03-18
- 2.8.20 — 2021-03-18
- 2.8.19 — 2021-03-17
- 2.8.18 — 2021-03-17
- 2.8.17 — 2021-03-17
- 2.8.16 — 2021-03-17
- 2.8.15 — 2021-03-17
- 2.8.14 — 2021-03-17
- 2.8.11 — 2021-03-17
- 2.7.21 — 2021-03-13
- 2.7.20 — 2021-03-13
- 2.7.19 — 2021-03-13
- 2.7.18 — 2021-03-13
- … 91 more at https://npm.io/package/gloss/versions

## README

TODO

- get much better static extraction
  - extract from gloss() style views
  - extract css variables stuff
- support flattened transform props (x, y, scale, etc)
- maybe flatten psuedos
-


# gloss 💅

usage:

full-featured example:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import Icon from './icon'
import Popover from './popover'

const LINE_HEIGHT = 30

ReactDOM.render(
  <ThemeProvide bright={{ background: '#000' }}>
    <Theme name="bright">
      <Surface icon="name" />
    </Theme>
  </ThemeProvide>,
  document.querySelector('#app'),
)
```

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