docs: update docs dependencies (jantimon#17)

jantimon · web-flow · commit 148e253ddf95 · 2022-08-02T11:01:08.000+02:00
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -25,6 +25,7 @@ jobs:
     - name: RustUp
       run: rustup target add wasm32-wasi
     - run: npm install
+    - run: (cd docks && npm install)
     - run: npm run prepublishOnly
       env:
         CI: true
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
diff --git a/docs/package.json b/docs/package.json
@@ -11,16 +11,18 @@
   "dependencies": {
     "@babel/core": "7.15.5",
     "@babel/preset-env": "^7.15.4",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
     "classnames": "2.3.1",
     "css-variable": "file:../",
     "linaria": "2.1.0",
-    "next": "^11.1.2",
+    "next": "12.2.3",
     "next-linaria": "0.11.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-syntax-highlighter": "^15.4.4",
     "typescript": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6"
   }
 }
diff --git a/docs/pages/CodeExample.tsx b/docs/pages/CodeExample.tsx
@@ -72,7 +72,7 @@ const MultiCodeButton = styled.button<{active?: boolean}>`
   }
 `
 
-export const CodeExamples = ({ children }) => {
+export const CodeExamples = ({ children }: {children: Record<string, string>}) => {
   const keys = Object.keys(children);
   const [activeKey, setActiveKeys] = useState(keys[0]);
   return <CodeExampleWrapper>
diff --git a/docs/pages/index.page.tsx b/docs/pages/index.page.tsx
@@ -129,7 +129,7 @@ const Badges = styled.div`
   margin-right: 8px;
   margin-bottom: 8px;
   line-height: 0;
-`
+`;
 
 const Index = () => (
   <>
@@ -221,14 +221,14 @@ export const globalStyles = css\`:global() {
 
           <CodeExamples>
             {{
-              'js source': `
+              "js source": `
 import { tokens } from './tokens'; 
 
 export const Headline = styled.h1\`
   color: \${tokens.primary};
 \`;
 `,
-        'css result': `
+              "css result": `
 .se7gjt0-headline {
   color: var(--primary--1isauia0);
 }
@@ -241,7 +241,10 @@ export const Headline = styled.h1\`
       <Section reverse>
         <SectionContent>
           <Headline>Create themable CSS Snippets</Headline>
-          <Text>Define which parts of your reusable css are customizable without overwrites</Text>
+          <Text>
+            Define which parts of your reusable css are customizable without
+            overwrites
+          </Text>
         </SectionContent>
         <SectionExample>
           <CodeExamples>
@@ -273,7 +276,7 @@ export const gradientHover = css\`
           </CodeExamples>
           <CodeExamples>
             {{
-              'js source': `
+              "js source": `
 import { startColor, endColor, gradientHover } from './gradient';
 
 export const Button = styled.button\`
@@ -282,13 +285,13 @@ export const Button = styled.button\`
   \${gradientHover}
 \`;
 `,
-        'css result': `
+              "css result": `
 .se7gjt0-button {
   --1isauia0: #f5ab35;
   --1isauia1: #8d1d1d;
   /* the css from gradientHover */
 }
-        `
+        `,
             }}
           </CodeExamples>
         </SectionExample>
@@ -301,6 +304,7 @@ export const Button = styled.button\`
             The recommended babel plugin generates unique variable names during
             build time
           </Text>
+          <br /><br />
           <Headline>Automatic DX</Headline>
           <Text>
             All babel generated variable names will have human readable names
@@ -310,13 +314,21 @@ export const Button = styled.button\`
         <SectionExample>
           <CodeExamples>
             {{
-              base: `
+              babel: `
 {
   "plugins": [
       "css-variable/babel"
   ]
 }
-`,withOptions: `
+`,
+              swc: `
+{
+  "plugins": [
+      "css-variable/swc", { "basePath": __dirname },
+  ]
+}
+`,
+              withOptions: `
 {
   "plugins": [
       ["css-variable/babel", {
@@ -327,7 +339,7 @@ export const Button = styled.button\`
       }]
   ]
 }
-`
+`,
             }}
           </CodeExamples>
           <CodeExamples>
@@ -364,7 +376,13 @@ export const theme = {
       <Section reverse>
         <SectionContent>
           <Headline>Typed Contracts</Headline>
-          <Text>By default any string is a valid CSSVariable value.<br /><br />But it doesn't end here - the generic interface allows to define explicitly which values are assignable</Text>
+          <Text>
+            By default any string is a valid CSSVariable value.
+            <br />
+            <br />
+            But it doesn't end here - the generic interface allows to define
+            explicitly which values are assignable
+          </Text>
         </SectionContent>
         <SectionExample>
           <CodeExamples>
@@ -387,50 +405,51 @@ export const tokens = {
           </CodeExamples>
         </SectionExample>
       </Section>
-
-
     </Main>
     <Footer>
       <FooterContent>
         <Badges>
-        <a href="https://www.npmjs.com/package/css-variable" target="_blank">
-          <img
-            alt="npm"
-            src="https://img.shields.io/npm/v/css-variable?style=for-the-badge"
-          />
-        </a>
-        <a href="https://bundle.js.org/?q=css-variable&treeshake=[createVar]" target="_blank">
-          <img
-            alt="Minified Gziped Size"
-            src="https://img.shields.io/badge/minzip-288b-blue?style=for-the-badge"
-          />
-        </a>
-        <a href="https://github.com/jantimon/css-variable/" target="_blank">
-          <img
-            src="https://img.shields.io/badge/github-OSS-brightgreen?style=for-the-badge&logo=GitHub"
-            alt="Github"
-          />
-        </a>
+          <a href="https://www.npmjs.com/package/css-variable" target="_blank">
+            <img
+              alt="npm"
+              src="https://img.shields.io/npm/v/css-variable?style=for-the-badge"
+            />
+          </a>
+          <a
+            href="https://bundle.js.org/?q=css-variable&treeshake=[createVar]"
+            target="_blank"
+          >
+            <img
+              alt="Minified Gziped Size"
+              src="https://img.shields.io/badge/minzip-288b-blue?style=for-the-badge"
+            />
+          </a>
+          <a href="https://github.com/jantimon/css-variable/" target="_blank">
+            <img
+              src="https://img.shields.io/badge/github-OSS-brightgreen?style=for-the-badge&logo=GitHub"
+              alt="Github"
+            />
+          </a>
         </Badges>
         <Badges>
-        <a
-          href="https://github.com/jantimon/css-variable/actions/workflows/e2e-test.yml"
-          target="_blank"
-        >
-          <img
-            alt="GitHub Actions Status"
-            src="https://img.shields.io/github/workflow/status/jantimon/css-variable/e2e%20test/main?style=for-the-badge"
-          />
-        </a>
-        <a
-          href="https://github.com/jantimon/css-variable/blob/main/license"
-          target="_blank"
-        >
-          <img
-            alt="MIT License"
-            src="https://img.shields.io/npm/l/css-variable?style=for-the-badge"
-          />
-        </a>
+          <a
+            href="https://github.com/jantimon/css-variable/actions/workflows/e2e-test.yml"
+            target="_blank"
+          >
+            <img
+              alt="GitHub Actions Status"
+              src="https://img.shields.io/github/workflow/status/jantimon/css-variable/e2e%20test/main?style=for-the-badge"
+            />
+          </a>
+          <a
+            href="https://github.com/jantimon/css-variable/blob/main/license"
+            target="_blank"
+          >
+            <img
+              alt="MIT License"
+              src="https://img.shields.io/npm/l/css-variable?style=for-the-badge"
+            />
+          </a>
         </Badges>
       </FooterContent>
     </Footer>
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "@swc/jest": "^0.2.21",
     "@types/jest": "^27.0.1",
     "jest": "^27.5.1",
-    "terser": "5.7.2",
+    "terser": "5.14.2",
     "typescript": "^4.4.2"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`/// <reference types="next" />`
`2`		`-/// <reference types="next/types/global" />`
`3`	`2`	`/// <reference types="next/image-types/global" />`
`4`	`3`
`5`	`4`	`// NOTE: This file should not be edited`
Original file line number	Diff line number	Diff line change
@@ -72,7 +72,7 @@ const MultiCodeButton = styled.button<{active?: boolean}>`
`72`	`72`	`}`
`73`	`73`	`
`74`	`74`
`75`		`-export const CodeExamples = ({ children }) => {`
	`75`	`+export const CodeExamples = ({ children }: {children: Record<string, string>}) => {`
`76`	`76`	`const keys = Object.keys(children);`
`77`	`77`	`const [activeKey, setActiveKeys] = useState(keys[0]);`
`78`	`78`	`return <CodeExampleWrapper>`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`"@swc/jest": "^0.2.21",`
`67`	`67`	`"@types/jest": "^27.0.1",`
`68`	`68`	`"jest": "^27.5.1",`
`69`		`- "terser": "5.7.2",`
	`69`	`+ "terser": "5.14.2",`
`70`	`70`	`"typescript": "^4.4.2"`
`71`	`71`	`}`
`72`	`72`	`}`