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:
Pedro Duarte
GitHub
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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@stitches/react": "0.0.1",
|
||||
"@stitches/react": "0.1.0",
|
||||
"next": "latest",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.9.43",
|
||||
"typescript": "^3.9.7"
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
},
|
||||
"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>
|
||||
<title>Use Stitches with Next.js</title>
|
||||
</Head>
|
||||
<Container size={{ initial: '1', bp1: '2' }}>
|
||||
<Container size={{ '@initial': '1', '@bp1': '2' }}>
|
||||
<StitchesLogo />
|
||||
<Text as="h1">Hello, from Stitches.</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