open-index/open-npm huggingface dataset:
npm package: @glity/core
Description: Simple and powerful ReactJs components
Author: Romullo
Latest version: 1.0.0-alpha.1

<div align="center">
  <img src="https://github.com/glity/core/blob/develop/glity.svg" width="300x300" height="300" />
  <h1> Glity </h1>
  <sub>Built with ❤︎ by
  <a href="https://github.com/hiukky">Hiukky</a>
  <br>  
  <img src="https://img.shields.io/github/license/glity/core?style=flat-square">
  <img src="https://img.shields.io/github/stars/glity/core?style=flat-square">
  <img src="https://img.shields.io/github/forks/glity/core?style=flat-square">
  <img src="https://img.shields.io/github/issues/glity/core?style=flat-square">
</div>

<h3 align="center">Simple and powerful ReactJs components.</h3>
npm package: @glitz/core
Description: The core implementation for Glitz. Head over to [https://github.com/frenic/glitz](https://github.com/frenic/glitz) for details.
Author: Fredrik Nicol
Latest version: 5.0.0

# ![Glitz](https://github.com/frenic/glitz/raw/master/glitz.svg?sanitize=true)

The core implementation for Glitz. Head over to [https://github.com/frenic/glitz](https://github.com/frenic/glitz) for details.
npm package: @glitz/devtool-transformer
Description: Development tool to validate style declarations using `CSSStyleDeclaration` in the browser. It keeps track on how the browser reacts to it and notifies you via `console` if there's any ignored declarations. Then it returns the same style object without to
Author: Fredrik Nicol
Latest version: 5.0.0

# ![Glitz](https://github.com/frenic/glitz/raw/master/glitz.svg?sanitize=true)

Development tool to validate style declarations using `CSSStyleDeclaration` in the browser. It keeps track on how the browser reacts to it and notifies you via `console` if there's any ignored declarations. Then it returns the same style object without touching it.

_It will **only** work in the browser and in development mode (`process.env.NODE_ENV !== 'production'`). In production, it will compile to: `function (style) { return style }`_

```ts
import { GlitzClient } from '@glitz/core';
import devTool from '@glitz/devtool-transformer';
const glitz = new GlitzClient({ transformer: devTool });

const className = glitz.injectStyle({
  colour: 'red',
  // Warning: An invalid CSS declaration { colour: 'red' } was ignored by the browser
});
```

The order of this transformer is quite important if you're using multiple transformers. It should be before the [prefixer-transformer](https://github.com/frenic/glitz/tree/master/packages/prefixer-transformer) for not bloating your console with warnings about other vendors specific declarations and it should be after the [length-transformer](https://github.com/frenic/glitz/tree/master/packages/length-transformer) for not receive warnings when lengths doesn't have units.

```ts
import { GlitzClient, compose } from '@glitz/core';
import numberToLength from '@glitz/length-transformer';
import devTool from '@glitz/devtool-transformer';
import prefixer from '@glitz/prefixer-transformer';
const glitz = new GlitzClient({
  transformer: compose(prefixer, devTool, numberToLength),
});

const className = glitz.injectStyle({
  display: 'flex',
  width: 100,
  colour: 'red',
  // Warning: An invalid CSS declaration { colour: 'red' } was ignored by the browser
});
```

## Getting started

```bash
$ npm install @glitz/devtool-transformer
```
npm package: @glitz/prefixer-transformer
Description: A TypeScript and Glitz wrapper for [`inline-style-prefixer/static`](https://github.com/rofrischmann/inline-style-prefixer).
Author: Fredrik Nicol
Latest version: 5.0.0

# ![Glitz](https://github.com/frenic/glitz/raw/master/glitz.svg?sanitize=true)

A TypeScript and Glitz wrapper for [`inline-style-prefixer/static`](https://github.com/rofrischmann/inline-style-prefixer).

```ts
import { GlitzClient } from '@glitz/core';
import prefixer from '@glitz/prefixer-transformer';
const glitz = new GlitzClient({ transformer: prefixer });

const className = glitz.injectStyle({
  display: 'flex',
  // Will be transformed into:
  // {
  //   display: [
  //     '-webkit-box',
  //     '-moz-box',
  //     '-ms-flexbox',
  //     '-webkit-flex',
  //     'flex',
  //   ],
  // }
});
```

This is basically the same thing as:

```ts
import { GlitzClient } from '@glitz/core';
import prefixAll from 'inline-style-prefixer/static';
const glitz = new GlitzClient({ transformer: prefixAll });
```

But with correct types for TypeScript when used with `@glitz/core`.

## Getting started

```bash
$ npm install @glitz/prefixer-transformer
```
npm package: @glitz/transformers
Description: Includes all official transformers:
Author: Fredrik Nicol
Latest version: 5.0.0

# ![Glitz](https://github.com/frenic/glitz/raw/master/glitz.svg?sanitize=true)

Includes all official transformers:

- [`@glitz/prefixer-transformer`](https://github.com/frenic/glitz/tree/master/packages/prefixer-transformer)
- [`@glitz/length-transformer`](https://github.com/frenic/glitz/tree/master/packages/length-transformer)
- [`@glitz/devtool-transformer`](https://github.com/frenic/glitz/tree/master/packages/devtool-transformer)

```ts
import { GlitzClient } from '@glitz/core';
import transformers from '@glitz/transformers';
const glitz = new GlitzClient({ transformer: transformers() });
```