From cb04e92e2b00aa3f1f2e963ad3d8d59da6fb742a Mon Sep 17 00:00:00 2001 From: Muhammad Date: Tue, 3 Dec 2024 21:58:40 +0700 Subject: [PATCH] feat: new extension `vike-react-styled-components` --- package.json | 3 +- .../vike-react-styled-components/.gitignore | 2 + .../vike-react-styled-components/README.md | 112 ++++++++++++++ .../vike-react-styled-components/Wrapper.tsx | 17 +++ .../vike-react-styled-components/config.ts | 34 +++++ .../onAfterRenderHtml.ts | 23 +++ .../onBeforeRenderHtml.ts | 11 ++ .../vike-react-styled-components/package.json | 56 +++++++ .../tsconfig.json | 16 ++ pnpm-lock.yaml | 140 +++++++++++++++++- 10 files changed, 405 insertions(+), 9 deletions(-) create mode 100644 packages/vike-react-styled-components/.gitignore create mode 100644 packages/vike-react-styled-components/README.md create mode 100644 packages/vike-react-styled-components/Wrapper.tsx create mode 100644 packages/vike-react-styled-components/config.ts create mode 100644 packages/vike-react-styled-components/onAfterRenderHtml.ts create mode 100644 packages/vike-react-styled-components/onBeforeRenderHtml.ts create mode 100644 packages/vike-react-styled-components/package.json create mode 100644 packages/vike-react-styled-components/tsconfig.json diff --git a/package.json b/package.json index 029898ea..c16d6f88 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "vike-react-query": "link:./packages/vike-react-query/", "vike-react-apollo": "link:./packages/vike-react-apollo/", "vike-react-chakra": "link:./packages/vike-react-chakra/", - "vike-react-antd": "link:./packages/vike-react-antd/" + "vike-react-antd": "link:./packages/vike-react-antd/", + "vike-react-styled-components": "link:./packages/vike-react-styled-components/" } }, "devDependencies": { diff --git a/packages/vike-react-styled-components/.gitignore b/packages/vike-react-styled-components/.gitignore new file mode 100644 index 00000000..b0a5c349 --- /dev/null +++ b/packages/vike-react-styled-components/.gitignore @@ -0,0 +1,2 @@ +/node_modules/ +/dist/ diff --git a/packages/vike-react-styled-components/README.md b/packages/vike-react-styled-components/README.md new file mode 100644 index 00000000..024fba88 --- /dev/null +++ b/packages/vike-react-styled-components/README.md @@ -0,0 +1,112 @@ +# `vike-react-styled-components` + +[Installation](#installation) +[Settings](#settings) +[Version history](https://github.com/vikejs/vike-react/blob/main/packages/vike-react-styled-components/CHANGELOG.md) +[See Also](#see-also) + +
+ +Integrates [styled-components](https://styled-components.com) to your [`vike-react`](https://vike.dev/vike-react) app. + +## Installation + +1. `npm install vike-react-styled-components styled-components` + +2. Extend `+config.js`: + ```js + // pages/+config.js + + import vikeReact from "vike-react/config" + import vikeReactStyledComponents from "vike-react-styled-components/config" + + export default { + // ... + extends: [vikeReact, vikeReactStyledComponents] + } + ``` +3. You can now use styled-components at any of your components. + ```jsx + import { styled } from "styled-components"; + const Title = styled.h1` + font-size: 1.5em; + text-align: center; + color: #BF4F74; + `; + + const Wrapper = styled.section` + padding: 4em; + background: papayawhip; + `; + + function SomeComponent() { + return ( + + Hello World! + + ) + } + ``` + +> [!NOTE] +> The `vike-react-styled-components` extension requires [`vike-react`](https://vike.dev/vike-react). + + +In order to reliably perform server side rendering and avoids checksum mismatches due to different class generation on the client and on the server, you'll need to use [babel-plugin-styled-components](https://styled-components.com/docs/tooling#babel-plugin): + +1. `npm install --save-dev babel-plugin-styled-components` +2. Add the `babel-plugin-styled-components` to the `babel` options in the `@vitejs/plugin-react` configuration. + ```js + // vite.config.js + import { defineConfig } from 'vite' + import react from '@vitejs/plugin-react' + import vike from 'vike/plugin' + + export default defineConfig({ + plugins: [ + vike(), + react({ + babel: { + plugins: [['babel-plugin-styled-components']], + }, + }), + ], + }) + ``` + +
+ +## Settings + +`vike-react-styled-components` provides a configuration `+styleSheetManager` for customizing the [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager). + +```ts +// pages/+styleSheetManager.ts +export { styleSheetManager } + +import type { IStyleSheetManager } from 'styled-components' +import rtlPlugin from 'stylis-plugin-rtl'; + +const styleSheetManager: Omit = { + stylisPlugins: [rtlPlugin], +} +``` + +You can remove the styled-components SSR integration from [some of your pages](https://vike.dev/config#inheritance): + +```js +// pages/about/+styleSheetManager.js + +export const styleSheetManager = null +``` + +For full customization consider [ejecting](https://vike.dev/eject). + +> [!NOTE] +> Consider making a [Pull Request before ejecting](https://vike.dev/eject#when-to-eject). + +
+ +## See also + +- [Vike Docs > styled-components](https://vike.dev/styled-components) diff --git a/packages/vike-react-styled-components/Wrapper.tsx b/packages/vike-react-styled-components/Wrapper.tsx new file mode 100644 index 00000000..437dd5fd --- /dev/null +++ b/packages/vike-react-styled-components/Wrapper.tsx @@ -0,0 +1,17 @@ +export { Wrapper } + +import React, { type ReactNode } from 'react' +import { StyleSheetManager } from 'styled-components' +import { usePageContext } from 'vike-react/usePageContext' + +function Wrapper({ children }: { children: ReactNode }) { + const pageContext = usePageContext() + const { styleSheetManager } = pageContext.config + + if (typeof window !== 'undefined' || styleSheetManager === null) return <>{children} + return ( + + {children} + + ) +} diff --git a/packages/vike-react-styled-components/config.ts b/packages/vike-react-styled-components/config.ts new file mode 100644 index 00000000..4388f6b7 --- /dev/null +++ b/packages/vike-react-styled-components/config.ts @@ -0,0 +1,34 @@ +export { config as default } + +import type { IStyleSheetManager, ServerStyleSheet } from 'styled-components' +import type { Config } from 'vike/types' + +const config = { + name: 'vike-react-styled-components', + require: { + vike: '>=0.4.203', + 'vike-react': '>=0.4.13', + }, + onAfterRenderHtml: 'import:vike-react-styled-components/__internal/onAfterRenderHtml:onAfterRenderHtml', + onBeforeRenderHtml: 'import:vike-react-styled-components/__internal/onBeforeRenderHtml:onBeforeRenderHtml', + Wrapper: 'import:vike-react-styled-components/__internal/Wrapper:Wrapper', + meta: { + styleSheetManager: { + env: { + server: true, + client: false, + }, + }, + }, +} satisfies Config + +declare global { + namespace Vike { + interface PageContext { + styleSheet?: ServerStyleSheet + } + interface Config { + styleSheetManager?: null | Omit + } + } +} diff --git a/packages/vike-react-styled-components/onAfterRenderHtml.ts b/packages/vike-react-styled-components/onAfterRenderHtml.ts new file mode 100644 index 00000000..1fbf0fd9 --- /dev/null +++ b/packages/vike-react-styled-components/onAfterRenderHtml.ts @@ -0,0 +1,23 @@ +export { onAfterRenderHtml } + +import React from 'react' +import { useConfig } from 'vike-react/useConfig' +import type { PageContext } from 'vike/types' + +function onAfterRenderHtml(pageContext: PageContext) { + const config = useConfig() + + if (pageContext.styleSheet) { + const { styleSheet } = pageContext + try { + const styles = styleSheet.getStyleElement() + config({ + Head: styles, + }) + } catch (error) { + throw error + } finally { + styleSheet.seal() + } + } +} diff --git a/packages/vike-react-styled-components/onBeforeRenderHtml.ts b/packages/vike-react-styled-components/onBeforeRenderHtml.ts new file mode 100644 index 00000000..fe4e4f92 --- /dev/null +++ b/packages/vike-react-styled-components/onBeforeRenderHtml.ts @@ -0,0 +1,11 @@ +export { onBeforeRenderHtml } + +import { ServerStyleSheet } from 'styled-components' +import type { PageContext } from 'vike/types' + +function onBeforeRenderHtml(pageContext: PageContext) { + if (pageContext.config.styleSheetManager !== null) { + pageContext.config.styleSheetManager ??= {} + pageContext.styleSheet = new ServerStyleSheet() + } +} diff --git a/packages/vike-react-styled-components/package.json b/packages/vike-react-styled-components/package.json new file mode 100644 index 00000000..48898fdb --- /dev/null +++ b/packages/vike-react-styled-components/package.json @@ -0,0 +1,56 @@ +{ + "name": "vike-react-styled-components", + "version": "0.0.0", + "type": "module", + "exports": { + "./config": "./dist/config.js", + "./__internal/onAfterRenderHtml": "./dist/onAfterRenderHtml.js", + "./__internal/onBeforeRenderHtml": "./dist/onBeforeRenderHtml.js", + "./__internal/Wrapper": "./dist/Wrapper.js" + }, + "scripts": { + "dev": "tsc --watch", + "build": "rimraf dist/ && tsc", + "release": "release-me patch", + "release:minor": "release-me minor", + "release:major": "release-me major", + "release:commit": "release-me commit" + }, + "peerDependencies": { + "styled-components": ">=6", + "react": ">=18", + "vike-react": ">=0.4.13" + }, + "devDependencies": { + "@brillout/release-me": "^0.4.2", + "@types/react": "^18.2.55", + "react": "^18.3.1", + "rimraf": "^5.0.5", + "styled-components": "^6.1.13", + "typescript": "^5.5.3", + "vike": "^0.4.203", + "vike-react": "^0.5.9", + "vite": "^5.4.0" + }, + "typesVersions": { + "*": { + "config": [ + "dist/config.d.ts" + ], + "__internal/onAfterRenderHtml": [ + "dist/onAfterRenderHtml.d.ts" + ], + "__internal/onBeforeRenderHtml": [ + "dist/onBeforeRenderHtml.d.ts" + ], + "__internal/Wrapper": [ + "dist/Wrapper.d.ts" + ] + } + }, + "files": [ + "dist" + ], + "repository": "https://github.com/vikejs/vike-react/tree/main/packages/vike-react-styled-components", + "license": "MIT" +} diff --git a/packages/vike-react-styled-components/tsconfig.json b/packages/vike-react-styled-components/tsconfig.json new file mode 100644 index 00000000..ee30dd23 --- /dev/null +++ b/packages/vike-react-styled-components/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "declaration": true, + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "Bundler", + "jsx": "react", + "outDir": "./dist/", + "skipLibCheck": true, + "types": ["vike-react"], + // Strictness + "strict": true, + "noUncheckedIndexedAccess": true, + "noImplicitAny": true + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af3a77ae..e21eb8bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,6 +10,7 @@ overrides: vike-react-apollo: link:./packages/vike-react-apollo/ vike-react-chakra: link:./packages/vike-react-chakra/ vike-react-antd: link:./packages/vike-react-antd/ + vike-react-styled-components: link:./packages/vike-react-styled-components/ importers: @@ -376,6 +377,36 @@ importers: specifier: ^1.2.2 version: 1.2.2(@types/node@20.11.17)(jsdom@24.0.0) + packages/vike-react-styled-components: + devDependencies: + '@brillout/release-me': + specifier: ^0.4.2 + version: 0.4.2 + '@types/react': + specifier: ^18.2.55 + version: 18.3.3 + react: + specifier: ^18.3.1 + version: 18.3.1 + rimraf: + specifier: ^5.0.5 + version: 5.0.5 + styled-components: + specifier: ^6.1.13 + version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + typescript: + specifier: ^5.5.3 + version: 5.5.4 + vike: + specifier: ^0.4.203 + version: 0.4.203(react-streaming@0.3.43(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@5.4.0(@types/node@20.11.17)) + vike-react: + specifier: link:../vike-react + version: link:../vike-react + vite: + specifier: ^5.4.0 + version: 5.4.0(@types/node@20.11.17) + packages: '@ampproject/remapping@2.2.1': @@ -826,9 +857,15 @@ packages: '@emotion/hash@0.9.2': resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} + '@emotion/is-prop-valid@1.2.2': + resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} + '@emotion/is-prop-valid@1.3.1': resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==} + '@emotion/memoize@0.8.1': + resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + '@emotion/memoize@0.9.0': resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} @@ -853,6 +890,9 @@ packages: '@emotion/unitless@0.7.5': resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==} + '@emotion/unitless@0.8.1': + resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + '@emotion/use-insertion-effect-with-fallbacks@1.1.0': resolution: {integrity: sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==} peerDependencies: @@ -1425,6 +1465,9 @@ packages: '@types/scheduler@0.16.6': resolution: {integrity: sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA==} + '@types/stylis@4.2.5': + resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} + '@vitejs/plugin-react@4.2.1': resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==} engines: {node: ^14.18.0 || >=16.0.0} @@ -1975,6 +2018,9 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} + camelize@1.0.1: + resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} + caniuse-lite@1.0.30001571: resolution: {integrity: sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ==} @@ -2105,6 +2151,13 @@ packages: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} + css-color-keywords@1.0.0: + resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} + engines: {node: '>=4'} + + css-to-react-native@3.2.0: + resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} + cssstyle@4.0.1: resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==} engines: {node: '>=18'} @@ -2847,6 +2900,13 @@ packages: resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==} engines: {node: '>=12.13.0'} + postcss-value-parser@4.2.0: + resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} + + postcss@8.4.38: + resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} + engines: {node: ^10 || ^12 || >=14} + postcss@8.4.41: resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==} engines: {node: ^10 || ^12 || >=14} @@ -3245,6 +3305,9 @@ packages: resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==} engines: {node: '>= 0.4'} + shallowequal@1.1.0: + resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -3337,9 +3400,19 @@ packages: strip-literal@1.3.0: resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==} + styled-components@6.1.13: + resolution: {integrity: sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==} + engines: {node: '>= 16'} + peerDependencies: + react: '>= 16.8.0' + react-dom: '>= 16.8.0' + stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} + stylis@4.3.2: + resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} + stylis@4.3.4: resolution: {integrity: sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==} @@ -3413,6 +3486,9 @@ packages: resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} engines: {node: '>=8'} + tslib@2.6.2: + resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} + tslib@2.6.3: resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==} @@ -3833,7 +3909,7 @@ snapshots: '@babel/code-frame@7.24.7': dependencies: '@babel/highlight': 7.24.7 - picocolors: 1.0.0 + picocolors: 1.0.1 '@babel/compat-data@7.23.5': {} @@ -3914,11 +3990,11 @@ snapshots: '@babel/helper-function-name@7.23.0': dependencies: '@babel/template': 7.22.15 - '@babel/types': 7.23.6 + '@babel/types': 7.25.2 '@babel/helper-hoist-variables@7.22.5': dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.25.2 '@babel/helper-module-imports@7.24.7': dependencies: @@ -3954,7 +4030,7 @@ snapshots: '@babel/helper-simple-access@7.22.5': dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.25.2 '@babel/helper-simple-access@7.24.7': dependencies: @@ -3965,7 +4041,7 @@ snapshots: '@babel/helper-split-export-declaration@7.22.6': dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.25.2 '@babel/helper-string-parser@7.22.5': {} @@ -4005,11 +4081,11 @@ snapshots: '@babel/helper-validator-identifier': 7.24.7 chalk: 2.4.2 js-tokens: 4.0.0 - picocolors: 1.0.0 + picocolors: 1.0.1 '@babel/parser@7.23.3': dependencies: - '@babel/types': 7.23.3 + '@babel/types': 7.25.2 '@babel/parser@7.23.6': dependencies: @@ -4271,10 +4347,16 @@ snapshots: '@emotion/hash@0.9.2': {} + '@emotion/is-prop-valid@1.2.2': + dependencies: + '@emotion/memoize': 0.8.1 + '@emotion/is-prop-valid@1.3.1': dependencies: '@emotion/memoize': 0.9.0 + '@emotion/memoize@0.8.1': {} + '@emotion/memoize@0.9.0': {} '@emotion/react@11.13.3(@types/react@18.3.3)(react@18.3.1)': @@ -4307,6 +4389,8 @@ snapshots: '@emotion/unitless@0.7.5': {} + '@emotion/unitless@0.8.1': {} + '@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@18.3.1)': dependencies: react: 18.3.1 @@ -4749,6 +4833,8 @@ snapshots: '@types/scheduler@0.16.6': {} + '@types/stylis@4.2.5': {} + '@vitejs/plugin-react@4.2.1(vite@5.4.0(@types/node@20.11.17))': dependencies: '@babel/core': 7.23.6 @@ -5928,6 +6014,8 @@ snapshots: callsites@3.1.0: {} + camelize@1.0.1: {} + caniuse-lite@1.0.30001571: {} caniuse-lite@1.0.30001651: {} @@ -6077,6 +6165,14 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-color-keywords@1.0.0: {} + + css-to-react-native@3.2.0: + dependencies: + camelize: 1.0.1 + css-color-keywords: 1.0.0 + postcss-value-parser: 4.2.0 + cssstyle@4.0.1: dependencies: rrweb-cssom: 0.6.0 @@ -6841,6 +6937,14 @@ snapshots: pngjs@6.0.0: {} + postcss-value-parser@4.2.0: {} + + postcss@8.4.38: + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.1 + source-map-js: 1.2.0 + postcss@8.4.41: dependencies: nanoid: 3.3.7 @@ -7338,6 +7442,8 @@ snapshots: functions-have-names: 1.2.3 has-property-descriptors: 1.0.1 + shallowequal@1.1.0: {} + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -7421,8 +7527,24 @@ snapshots: dependencies: acorn: 8.11.2 + styled-components@6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@emotion/is-prop-valid': 1.2.2 + '@emotion/unitless': 0.8.1 + '@types/stylis': 4.2.5 + css-to-react-native: 3.2.0 + csstype: 3.1.3 + postcss: 8.4.38 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + shallowequal: 1.1.0 + stylis: 4.3.2 + tslib: 2.6.2 + stylis@4.2.0: {} + stylis@4.3.2: {} + stylis@4.3.4: {} supports-color@5.5.0: @@ -7478,6 +7600,8 @@ snapshots: dependencies: tslib: 2.6.3 + tslib@2.6.2: {} + tslib@2.6.3: {} type-detect@4.0.8: {} @@ -7546,7 +7670,7 @@ snapshots: cac: 6.7.14 debug: 4.3.4 pathe: 1.1.1 - picocolors: 1.0.0 + picocolors: 1.0.1 vite: 5.4.0(@types/node@20.11.17) transitivePeerDependencies: - '@types/node'