Stitches

https://github.com/stitchesjs/stitches
Admin
Stitches is a CSS-in-JS library offering near-zero runtime, SSR, multi-variant support, and a great...
Tokens:3,342
Snippets:18
Trust Score:8.4
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Stitches Core

Source: https://github.com/stitchesjs/stitches/blob/canary/README.md

Installs the framework-agnostic core implementation of Stitches.

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

--------------------------------

### Install @stitches/react

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/react/README.md

Instructions for installing the @stitches/react library using npm or yarn.

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

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

--------------------------------

### Install @stitches/stringify

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/stringify/README.md

Installs the @stitches/stringify package using npm.

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

--------------------------------

### Clone and Setup Stitches Project

Source: https://github.com/stitchesjs/stitches/blob/canary/CONTRIBUTING.md

Clones your fork of the Stitches repository, adds the upstream remote, and installs project dependencies using Yarn or npm.

```bash
git clone git@github.com:$(npx github-username-cli $(git config user.email))/stitches.git

cd stitches

git remote add upstream git@github.com:modulez/stitches.git

yarn # or npm install
```

--------------------------------

### Install Stitches React

Source: https://github.com/stitchesjs/stitches/blob/canary/README.md

Installs the Stitches React wrapper, including the `styled` API for React components.

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

--------------------------------

### Install @stitches/core

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/core/README.md

Install the @stitches/core library using npm or yarn package managers.

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

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

--------------------------------

### Import css from @stitches/core (Global Script)

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/core/README.md

Include the global script for @stitches/core using a CDN link and access the `css` function from the global `stitches` object. This is useful for simpler setups or when module imports are not preferred.

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

const { css } = stitches

</script>
```

--------------------------------

### Basic Usage with CDN (ES Module)

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/react/README.md

Demonstrates how to import and use the `styled` function from @stitches/react using a CDN link for ES modules.

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

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

</script>
```

--------------------------------

### Test and Build Stitches Project

Source: https://github.com/stitchesjs/stitches/blob/canary/CONTRIBUTING.md

Runs project tests and builds the current code. Requires Node.js version 14 or higher.

```bash
yarn test # or npm test

yarn build # or npm run build
```

--------------------------------

### Basic Usage with CDN (Global Script)

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/react/README.md

Shows how to include the @stitches/react library via a global script tag and access the `styled` function.

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

const { styled } = stitches

</script>
```

--------------------------------

### Create Feature or Fix Branch

Source: https://github.com/stitchesjs/stitches/blob/canary/CONTRIBUTING.md

Demonstrates how to create a new Git branch for either a new feature or a bug fix.

```bash
git checkout -b feature/thing
```

```bash
git checkout -b fix/something
```

--------------------------------

### Stringify @import Rules

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/stringify/README.md

Illustrates how to use an array to stringify multiple '@import' rules for external CSS files.

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

--------------------------------

### Stringify Content Property

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/stringify/README.md

Shows how to stringify the CSS 'content' property, often used with pseudo-elements like ::before and ::after.

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

--------------------------------

### Stringify with Replacer Function

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/stringify/README.md

Demonstrates using a replacer function to add vendor prefixes for specific CSS properties like 'tab-size' and 'appearance'.

```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
)

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

--------------------------------

### Push Branch to Origin

Source: https://github.com/stitchesjs/stitches/blob/canary/CONTRIBUTING.md

Pushes the newly created feature or update branch to the remote origin.

```bash
git push origin feature/thing
```

```bash
git push origin update/something
```

--------------------------------

### Import css from @stitches/core (CDN)

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/core/README.md

Import the `css` function from @stitches/core using a CDN link in an HTML script tag. This allows for direct usage in the browser.

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

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

</script>
```

--------------------------------

### Stringify Fallback Property

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/stringify/README.md

Demonstrates stringifying a CSS property with multiple fallback values using an array.

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

--------------------------------

### Basic Stringify Usage

Source: https://github.com/stitchesjs/stitches/blob/canary/packages/stringify/README.md

Converts a JavaScript object with CSS properties into a CSS string. The output is not formatted for readability.

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

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

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