open-index/open-npm huggingface dataset:
npm package: @hadihallak/stitches-c
Description: The modern CSS-in-JS library
Latest version: 1.3.0-beta.4

# @stitches/core

**@stitches/core** is a framework-agnostic implementation of [stitches](https://stitches.dev), a CSS-in-JS library with a best-in-class developer experience.

<p><br /></p>

```sh
# with npm
npm install @stitches/core

# with yarn
yarn add @stitches/core
```

<p><br /></p>

<a href="https://codepen.io/embed/prefill?editable=true&default-tab=js%2Cresult&data=%7B%22js%22%3A%22import+%7B+css+%7D+from+%27https%3A%2F%2Fcdn.skypack.dev%2F%40stitches%2Fcore%27%3B%5Cn%5Cn%2F%2F+add+your+code+here%21%5Cn%2F%2F+see+https%3A%2F%2Fstitches.dev+for+documentation%22%7D"><img src="https://img.shields.io/badge/-open_in_codepen-2b354f?logo=codepen&style=flat-square" alt="open in codepen" valign="middle" align="right"></a>

<br />

```html
<script type="module">

import { css } from 'https://cdn.skypack.dev/@stitches/core'

</script>
```

<p><br /></p>

<a href="https://codepen.io/embed/prefill?editable=true&default-tab=js%2Cresult&data=%7B%22js%22%3A%22const+%7B+css+%7D+%3D+stitches%5Cn%5Cn%2F%2F+add+your+code+here%21%5Cn%2F%2F+see+https%3A%2F%2Fstitches.dev+for+documentation%22%2C%22js_external%22%3A%22https%3A%2F%2Funpkg.com%2F%40stitches%2Fcore%2Fdist%2Findex.global.js%22%7D"><img src="https://img.shields.io/badge/-open_in_codepen-2b354f?logo=codepen&style=flat-square" alt="open in codepen" valign="middle" align="right"></a>

<br />

```js
<script src="https://unpkg.com/@stitches/core/dist/index.global.js"></script>
<script>

const { css } = stitches

</script>
```

<p><br /></p>

## Documentation

For full documentation, visit [stitches.dev](https://stitches.dev).

## Contributing

Please follow our [contributing guidelines](./CONTRIBUTING.md).

## Authors

- Pedro Duarte ([@peduarte](https://twitter.com/peduarte)) - [Modulz](https://modulz.app)
- Abdulhadi Alhallak ([@hadi_hlk](https://twitter.com/hadi_hlk)) - [Modulz](https://modulz.app)
- Jonathan Neal ([@jon_neal](https://twitter.com/jon_neal)) - [Modulz](https://modulz.app)

## License

Licensed under the MIT License, Copyright © 2021-present Modulz.

See [LICENSE](./LICENSE.md) for more information.
npm package: @hadihallak/stitches-r
Description: The modern CSS-in-JS library
Latest version: 1.3.0-beta.4

# @stitches/react

**@stitches/react** is a react implementation of [stitches](https://stitches.dev), a CSS-in-JS library with a best-in-class developer experience.

<p><br /></p>

```sh
# with npm
npm install @stitches/react

# with yarn
yarn add @stitches/react
```

<p><br /></p>

<a href="https://codepen.io/embed/prefill?editable=true&default-tab=js%2Cresult&data=%7B%22js%22%3A%22import+%7B+styled+%7D+from+%27https%3A%2F%2Fcdn.skypack.dev%2F%40stitches%2Freact%27%3B%5Cn%5Cn%2F%2F+add+your+code+here%21%5Cn%2F%2F+see+https%3A%2F%2Fstitches.dev+for+documentation%22%7D"><img src="https://img.shields.io/badge/-open_in_codepen-2b354f?logo=codepen&style=flat-square" alt="open in codepen" valign="middle" align="right"></a>

<br />

```html
<script type="module">

import { styled } from 'https://cdn.skypack.dev/@stitches/react'

</script>
```

<p><br /></p>

<a href="https://codepen.io/embed/prefill?editable=true&default-tab=js%2Cresult&data=%7B%22js%22%3A%22const+%7B+styled+%7D+%3D+stitches%5Cn%5Cn%2F%2F+add+your+code+here%21%5Cn%2F%2F+see+https%3A%2F%2Fstitches.dev+for+documentation%22%2C%22js_external%22%3A%22https%3A%2F%2Funpkg.com%2Freact%2Fumd%2Freact.development.js%3Bhttps%3A%2F%2Funpkg.com%2Freact-dom%2Fumd%2Freact-dom.development.js%3Bhttps%3A%2F%2Funpkg.com%2F%40stitches%2Freact%2Fdist%2Findex.global.js%22%7D"><img src="https://img.shields.io/badge/-open_in_codepen-2b354f?logo=codepen&style=flat-square" alt="open in codepen" valign="middle" align="right"></a>

<br />

```js
<script src="https://unpkg.com/@stitches/react/dist/index.global.js"></script>
<script>

const { styled } = stitches

</script>
```

<p><br /></p>

## Documentation

For full documentation, visit [stitches.dev](https://stitches.dev).

## Contributing

Please follow our [contributing guidelines](https://github.com/modulz/stitches/blob/canary/CONTRIBUTING.md).

## Authors

- Pedro Duarte ([@peduarte](https://twitter.com/peduarte)) - [Modulz](https://modulz.app)
- Jonathan Neal ([@jon_neal](https://twitter.com/jon_neal)) - [Modulz](https://modulz.app)
- Abdulhadi Alhallak ([@hadi_hlk](https://twitter.com/hadi_hlk)) - [Modulz](https://modulz.app)

## License

Licensed under the MIT License, Copyright © 2021-present Modulz.

See [LICENSE](./LICENSE.md) for more information.
npm package: @hadihallak/stringify
Description: Converts an object into CSS
Latest version: 1.3.1-0

<h1>stringify <img src="https://jonneal.dev/css-logo.svg" alt="" width="90" height="90" align="right" /></h1>

**stringify** converts a JavaScript object to a CSS string, optionally replacing values if a [replacer](#replacer) function is specified.

```js
import { stringify } from '@stitches/stringify'

stringify({
  body: {
    backgroundColor: 'white',
    color: 'black',

    '& > nav > ul': {
      '@media (min-width: 640px)': {
        margin: 0,
      }
    }
  }
})
```

```css
body {
  background-color: white;
  color: black;
}

@media (min-width: 640px) {
  body > nav > ul {
    margin: 0;
  }
}
```

The actual output will not be formatted as it appears here.

## Usage

From NPM, add **stringify** to your project:

```bash
npm install @stitches/stringify
```

Use **stringify** to serialize your CSS:

```js
import { stringify } from '@stitches/stringify'

stringify({
  body: {
    margin: 0
  }
})
```

## Replacer

The **replacer** is an optional function that alters the behavior of the stringification process, allowing you to replace entire fragments of CSS.

The **replacer** function takes two parameters, the **property** and **value** of a declaration, and returns a JavaScript object representing a fragment of CSS to replace it.

```js
const replacer = (property, value) => (
  // add a prefix to "tab-size" for Firefox
  property === 'tab-size'
    ? {
      ['-moz-' + property]: value,
      [property]: value,
    }
  // add common prefixes for Safari 14
  : /^(appearance|backface-visibility|background-clip|clip-path|hyphens|mask-image|user-select)$/.test(property)
    ? {
      ['-webkit-' + property]: value,
      [property]: value,
    }
  : null
)
```

```js
stringify({
  button: {
    appearance: 'none'
  },
  textarea: {
    tabSize: 2
  }
})
```

```css
button {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  -moz-tab-size: 2;
  tab-size: 2;
}
```

The **replacer** function prevents recursion by ignoring replacement of the same property-value pairs in a replaced fragment.

## Examples

### Stringify the `content` property

```js
stringify({
  q: {
    '&::before': {
      content: '«'
    },
    '&::after': {
      content: '»'
    }
  }
})
```

```css
q::before {
  content: '«';
}

q::after {
  content: '»';
}
```

### Stringify `@import` rules

Arrays can be used to create multiple declarations or unnested rules with the same name.

```js
stringify({
  '@import': [
    '"https://unpkg.com/sanitize.css"',
    '"https://unpkg.com/sanitize.css/typography.css"'
  ]
})
```

```css
@import 'https://unpkg.com/sanitize.css';
@import 'https://unpkg.com/sanitize.css/typography.css';
```

### Stringify a fallback property

```js
stringify({
  body: {
    background: [
      'white',
      'var(--page-bg, white)'
    ]
  }
})
```

```css
body {
  background: white;
  background: var(--red-color, white);
}
```