# react-with-styles-interface-css

> Interface for react-with-styles outputting CSS

Latest version **6.0.0** (published 2019-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-with-styles-interface-css
pnpm add react-with-styles-interface-css
yarn add react-with-styles-interface-css
bun add react-with-styles-interface-css
```

## 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 | 6.0.0 |
| Published | 2019-09-09 |
| First published | 2017-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Felipe Vargas |
| Maintainers | airbnbeng, lencioni, ljharb, majapw, milesj, noratarano |
| Keywords | react-with-styles, css-in-js, css |

## Links

- npm: https://www.npmjs.com/package/react-with-styles-interface-css
- Repository: airbnb/react-with-styles-interface-css/tree/master/packages/interface
- Homepage: https://github.com/airbnb/react-with-styles-interface-css#readme
- Issues: https://github.com/airbnb/react-with-styles-interface-css/issues
- npm.io page: https://npm.io/package/react-with-styles-interface-css

## Dependencies (2)

- [global-cache](https://npm.io/package/global-cache.md) ^1.2.1
- [array.prototype.flat](https://npm.io/package/array.prototype.flat.md) ^1.2.1

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

- 6.0.0 (latest) — 2019-09-09
- 6.0.0-alpha.1 (alpha) — 2019-09-06
- 5.0.0 — 2019-09-04
- 4.0.3 — 2018-07-10
- 4.0.2 — 2018-06-08
- 4.0.1 — 2018-02-25
- 4.0.0 — 2018-02-15
- 3.0.0 — 2017-10-13
- 2.0.2 — 2017-10-05
- 2.0.1 — 2017-10-05
- 1.1.0 — 2017-10-02
- 1.0.1 — 2017-09-29
- 1.0.0 — 2017-09-29

## README

# react-with-styles-interface-css

Interface for [react-with-styles](https://www.npmjs.com/package/react-with-styles) that compiles CSS-in-js styles to static CSS classes with deterministic and human-friendly class names whose styles can be easily overridden.

## Usage

### Interface

A [react-with-styles](https://www.npmjs.com/package/react-with-styles) interface which is to be used along with [react-with-styles](https://www.npmjs.com/package/react-with-styles).

```javascript
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import CSSInterface, { registerCSSInterfaceNamespace } from 'react-with-styles-interface-css';

ThemedStyleSheet.registerInterface(CSSInterface);

// Optional: Prefix all class names in the output with 'MyPackageName__'
const namespace = 'MyPackageName';
registerCSSInterfaceNamespace(namespace);
```

### Styles
When writing styles, all classes throughout a project should be given unique names. Otherwise, class name collisions may result in unexpected and unwanted behavior.

### Overriding styles
The styles for a class can be overridden using the same name with which the class was defined. If the optional class name prefix was configured, the prefix should be used when overriding a class.

**Note:** In order to provide compatibility with [aphrodite](https://github.com/airbnb/react-with-styles-interface-aphrodite), the CSS output by this interface uses specifiers with varying levels of specificity. This allows for style resolution to be sensitive to the ordering of styles in calls to `css(...)`. However, these extra specifiers should not be overridden.

### Compile

The styles passed to `withStyles` in the source code are compiled to static CSS by the `react-with-styles-interface-css-compiler` package.

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