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