Update with-stitches example (#23281)
## Examples - [x] Make sure the linting passes This PR updates the `with-stitches` example to use the Beta `0.1.0` release.
This commit is contained in:
parent
c8680a344f
commit
2ef00a3c4a
9 changed files with 99 additions and 149 deletions
2
examples/with-stitches/next-env.d.ts
vendored
2
examples/with-stitches/next-env.d.ts
vendored
|
@ -1,2 +0,0 @@
|
||||||
/// <reference types="next" />
|
|
||||||
/// <reference types="next/types/global" />
|
|
|
@ -7,14 +7,10 @@
|
||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@stitches/react": "0.0.1",
|
"@stitches/react": "0.1.0",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
"react": "^16.13.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^16.13.1"
|
"react-dom": "^17.0.1"
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/react": "^16.9.43",
|
|
||||||
"typescript": "^3.9.7"
|
|
||||||
},
|
},
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
}
|
}
|
||||||
|
|
22
examples/with-stitches/pages/_document.jsx
Normal file
22
examples/with-stitches/pages/_document.jsx
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react'
|
||||||
|
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
|
||||||
|
import { getCssString } from '../stitches.config'
|
||||||
|
|
||||||
|
export default class Document extends NextDocument {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Html lang="en">
|
||||||
|
<Head>
|
||||||
|
<style
|
||||||
|
id="stitches"
|
||||||
|
dangerouslySetInnerHTML={{ __html: getCssString() }}
|
||||||
|
/>
|
||||||
|
</Head>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</Html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,37 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import NextDocument, { DocumentContext } from 'next/document'
|
|
||||||
import { css } from '../stitches.config'
|
|
||||||
|
|
||||||
export default class Document extends NextDocument {
|
|
||||||
static async getInitialProps(ctx: DocumentContext) {
|
|
||||||
const originalRenderPage = ctx.renderPage
|
|
||||||
|
|
||||||
try {
|
|
||||||
let extractedStyles
|
|
||||||
ctx.renderPage = () => {
|
|
||||||
const { styles, result } = css.getStyles(originalRenderPage)
|
|
||||||
extractedStyles = styles
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialProps = await NextDocument.getInitialProps(ctx)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...initialProps,
|
|
||||||
styles: (
|
|
||||||
<>
|
|
||||||
{initialProps.styles}
|
|
||||||
|
|
||||||
{extractedStyles.map((content, index) => (
|
|
||||||
<style
|
|
||||||
key={index}
|
|
||||||
dangerouslySetInnerHTML={{ __html: content }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -40,7 +40,7 @@ export default function Home() {
|
||||||
<Head>
|
<Head>
|
||||||
<title>Use Stitches with Next.js</title>
|
<title>Use Stitches with Next.js</title>
|
||||||
</Head>
|
</Head>
|
||||||
<Container size={{ initial: '1', bp1: '2' }}>
|
<Container size={{ '@initial': '1', '@bp1': '2' }}>
|
||||||
<StitchesLogo />
|
<StitchesLogo />
|
||||||
<Text as="h1">Hello, from Stitches.</Text>
|
<Text as="h1">Hello, from Stitches.</Text>
|
||||||
<Text>
|
<Text>
|
73
examples/with-stitches/stitches.config.js
Normal file
73
examples/with-stitches/stitches.config.js
Normal file
|
@ -0,0 +1,73 @@
|
||||||
|
import { createCss } from '@stitches/react'
|
||||||
|
|
||||||
|
export const { css, styled, global, getCssString } = createCss({
|
||||||
|
theme: {
|
||||||
|
colors: {
|
||||||
|
$hiContrast: 'hsl(206,10%,5%)',
|
||||||
|
$loContrast: 'white',
|
||||||
|
|
||||||
|
$gray100: 'hsl(206,22%,99%)',
|
||||||
|
$gray200: 'hsl(206,12%,97%)',
|
||||||
|
$gray300: 'hsl(206,11%,92%)',
|
||||||
|
$gray400: 'hsl(206,10%,84%)',
|
||||||
|
$gray500: 'hsl(206,10%,76%)',
|
||||||
|
$gray600: 'hsl(206,10%,44%)',
|
||||||
|
|
||||||
|
$purple100: 'hsl(252,100%,99%)',
|
||||||
|
$purple200: 'hsl(252,100%,98%)',
|
||||||
|
$purple300: 'hsl(252,100%,94%)',
|
||||||
|
$purple400: 'hsl(252,75%,84%)',
|
||||||
|
$purple500: 'hsl(252,78%,60%)',
|
||||||
|
$purple600: 'hsl(252,80%,53%)',
|
||||||
|
},
|
||||||
|
space: {
|
||||||
|
$1: '5px',
|
||||||
|
$2: '10px',
|
||||||
|
$3: '15px',
|
||||||
|
$4: '20px',
|
||||||
|
$5: '25px',
|
||||||
|
$6: '35px',
|
||||||
|
},
|
||||||
|
sizes: {
|
||||||
|
$1: '5px',
|
||||||
|
$2: '10px',
|
||||||
|
$3: '15px',
|
||||||
|
$4: '20px',
|
||||||
|
$5: '25px',
|
||||||
|
$6: '35px',
|
||||||
|
},
|
||||||
|
fontSizes: {
|
||||||
|
$1: '12px',
|
||||||
|
$2: '13px',
|
||||||
|
$3: '15px',
|
||||||
|
$4: '17px',
|
||||||
|
$5: '19px',
|
||||||
|
$6: '21px',
|
||||||
|
},
|
||||||
|
fonts: {
|
||||||
|
$system: 'system-ui',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
utils: {
|
||||||
|
marginX: (config) => (value) => ({
|
||||||
|
marginLeft: value,
|
||||||
|
marginRight: value,
|
||||||
|
}),
|
||||||
|
marginY: (config) => (value) => ({
|
||||||
|
marginTop: value,
|
||||||
|
marginBottom: value,
|
||||||
|
}),
|
||||||
|
paddingX: (config) => (value) => ({
|
||||||
|
paddingLeft: value,
|
||||||
|
paddingRight: value,
|
||||||
|
}),
|
||||||
|
paddingY: (config) => (value) => ({
|
||||||
|
paddingTop: value,
|
||||||
|
paddingBottom: value,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
media: {
|
||||||
|
bp1: '@media (min-width: 520px)',
|
||||||
|
bp2: '@media (min-width: 900px)',
|
||||||
|
},
|
||||||
|
})
|
|
@ -1,83 +0,0 @@
|
||||||
import { createStyled } from '@stitches/react'
|
|
||||||
|
|
||||||
const theme = {
|
|
||||||
colors: {
|
|
||||||
$hiContrast: 'hsl(206,10%,5%)',
|
|
||||||
$loContrast: 'white',
|
|
||||||
|
|
||||||
$gray100: 'hsl(206,22%,99%)',
|
|
||||||
$gray200: 'hsl(206,12%,97%)',
|
|
||||||
$gray300: 'hsl(206,11%,92%)',
|
|
||||||
$gray400: 'hsl(206,10%,84%)',
|
|
||||||
$gray500: 'hsl(206,10%,76%)',
|
|
||||||
$gray600: 'hsl(206,10%,44%)',
|
|
||||||
|
|
||||||
$purple100: 'hsl(252,100%,99%)',
|
|
||||||
$purple200: 'hsl(252,100%,98%)',
|
|
||||||
$purple300: 'hsl(252,100%,94%)',
|
|
||||||
$purple400: 'hsl(252,75%,84%)',
|
|
||||||
$purple500: 'hsl(252,78%,60%)',
|
|
||||||
$purple600: 'hsl(252,80%,53%)',
|
|
||||||
},
|
|
||||||
space: {
|
|
||||||
$1: '5px',
|
|
||||||
$2: '10px',
|
|
||||||
$3: '15px',
|
|
||||||
$4: '20px',
|
|
||||||
$5: '25px',
|
|
||||||
$6: '35px',
|
|
||||||
},
|
|
||||||
sizes: {
|
|
||||||
$1: '5px',
|
|
||||||
$2: '10px',
|
|
||||||
$3: '15px',
|
|
||||||
$4: '20px',
|
|
||||||
$5: '25px',
|
|
||||||
$6: '35px',
|
|
||||||
},
|
|
||||||
fontSizes: {
|
|
||||||
$1: '12px',
|
|
||||||
$2: '13px',
|
|
||||||
$3: '15px',
|
|
||||||
$4: '17px',
|
|
||||||
$5: '19px',
|
|
||||||
$6: '21px',
|
|
||||||
},
|
|
||||||
fonts: {
|
|
||||||
$system: 'system-ui',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const { styled, css } = createStyled({
|
|
||||||
tokens: theme,
|
|
||||||
utils: {
|
|
||||||
marginX: (config) => (
|
|
||||||
value: keyof typeof theme['space'] | (string & {})
|
|
||||||
) => ({
|
|
||||||
marginLeft: value,
|
|
||||||
marginRight: value,
|
|
||||||
}),
|
|
||||||
marginY: (config) => (
|
|
||||||
value: keyof typeof theme['space'] | (string & {})
|
|
||||||
) => ({
|
|
||||||
marginTop: value,
|
|
||||||
marginBottom: value,
|
|
||||||
}),
|
|
||||||
paddingX: (config) => (
|
|
||||||
value: keyof typeof theme['space'] | (string & {})
|
|
||||||
) => ({
|
|
||||||
paddingLeft: value,
|
|
||||||
paddingRight: value,
|
|
||||||
}),
|
|
||||||
paddingY: (config) => (
|
|
||||||
value: keyof typeof theme['space'] | (string & {})
|
|
||||||
) => ({
|
|
||||||
paddingTop: value,
|
|
||||||
paddingBottom: value,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
bp1: (rule) => `@media (min-width: 520px) { ${rule} }`,
|
|
||||||
bp2: (rule) => `@media (min-width: 900px) { ${rule} }`,
|
|
||||||
},
|
|
||||||
})
|
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es5",
|
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
|
||||||
"allowJs": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"strict": false,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"jsx": "preserve"
|
|
||||||
},
|
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
|
||||||
"exclude": ["node_modules"]
|
|
||||||
}
|
|
Loading…
Reference in a new issue