# css-esm

> CSS modules in the browser, with lightweight preprocessing

Latest version **0.0.2** (published 2020-05-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install css-esm
pnpm add css-esm
yarn add css-esm
bun add css-esm
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-05-27 |
| First published | 2020-05-25 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @romannurik |
| Maintainers | romannurik |
| Keywords | css, modules, preprocessor, runtime, tagged template |

## Links

- npm: https://www.npmjs.com/package/css-esm
- npm.io page: https://npm.io/package/css-esm

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

- 0.0.2 (latest) — 2020-05-27
- 0.0.1 — 2020-05-25

## README

# css-esm

CSS modules in the browser, with lightweight preprocessing by [stylis.js](https://github.com/thysultan/stylis.js)

Based on the quite awesome [csz](https://github.com/lukejacksonn/csz) library by Luke Jackson.

## Usage

With inline styles:

```js
import {css} from 'https://unpkg.com/css-esm';

const styles = css`
  .button {
    color: red;
  }

  :global (.foo) {
    .button.is-primary {
      color: green;
    }
  }
`;

document.body.innerHTML = `
  <button class="${styles.button}">Get started</button>
  <div class="foo">
    <button class="${styles.button} ${styles.isPrimary}">Another button</button>
  </div>
`;
```

With external files:

```js
import {loadCss} from 'https://unpkg.com/css-esm';
const styles = loadCss('main.css');

document.body.innerHTML = `
  <button class="${styles.button}">Get started</button>
`;
```

While mapped class names are available immediately, you can see when the CSS file has loaded using
the special `$loaded` property (a `Promise`):

```js
const styles = loadCss('main.css');
await styles.$loaded;
```

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