### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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,
}
}
}
})
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.