vite-react-ssg 0.1.0 → 0.1.1

package/README.md

@@ -100,7 +100,7 @@ function MyComponent() {
 }
 ```
 
-> It's important that the children of <ClientOnly> is not a JSX element, but a function that returns an element.
+> It's important that the children of `<ClientOnly>` is not a JSX element, but a function that returns an element.
 > Because React will try to render children, and may use the client's API on the server.
 
 ## Document head
@@ -170,6 +170,21 @@ export default function MyHead() {
 }
 ```
 
+## CSS in JS
+
+Use the `getStyleCollector` option to specify an SSR/SSG style collector. Currently only supports `styled-components`.
+
+```tsx
+import { ViteReactSSG } from 'vite-react-ssg'
+import { getStyledComponentsCollector } from 'vite-react-ssg/style-collectors'
+import { routes } from './App.js'
+import './index.css'
+
+export const createRoot = ViteReactSSG({ routes }, () => {}, { getStyleCollector: getStyledComponentsCollector })
+```
+
+You can provide your own by looking at the [implementation](./src/style-collectors/) of any of the existing collectors.
+
 ## Critical CSS
 
 Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.

package/dist/index.cjs

@@ -42,11 +42,73 @@ Current type: ${React.isValidElement(children) ? "React element" : typeof childr
   return fallback ?? null;
 }
 
+const Link = React.forwardRef((props, ref) => {
+  const {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative,
+    to,
+    onClick
+  } = props;
+  const internalOnClick = reactRouterDom.useLinkClickHandler(to, {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative
+  });
+  function handleClick(event) {
+    if (onClick)
+      onClick(event);
+    if (!event.defaultPrevented) {
+      React__default.startTransition(() => {
+        internalOnClick(event);
+      });
+    }
+    event.defaultPrevented = true;
+    event.preventDefault();
+  }
+  return /* @__PURE__ */ React__default.createElement(reactRouterDom.Link, { ...props, ref, onClick: handleClick });
+});
+const NavLink = React.forwardRef((props, ref) => {
+  const {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative,
+    to,
+    onClick
+  } = props;
+  const internalOnClick = reactRouterDom.useLinkClickHandler(to, {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative
+  });
+  function handleClick(event) {
+    if (onClick)
+      onClick(event);
+    if (!event.defaultPrevented) {
+      React__default.startTransition(() => {
+        internalOnClick(event);
+      });
+    }
+    event.defaultPrevented = true;
+    event.preventDefault();
+  }
+  return /* @__PURE__ */ React__default.createElement(reactRouterDom.NavLink, { ...props, ref, onClick: handleClick });
+});
+
 function ViteReactSSG(routerOptions, fn, options = {}) {
   const {
     transformState,
     rootContainer = "#root",
-    ssrWhenDev = true
+    ssrWhenDev = true,
+    getStyleCollector = null
   } = options;
   const isClient = typeof window !== "undefined";
   async function createRoot(client = false, routePath) {
@@ -58,7 +120,6 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
       return Promise.all(appRenderCallbacks.map((cb) => cb()));
     };
     const context = {
-      // app: App,
       isClient,
       routes: routerOptions.routes,
       router: browserRouter,
@@ -67,7 +128,8 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
       triggerOnSSRAppRendered,
       initialState: {},
       transformState,
-      routePath
+      routePath,
+      getStyleCollector
     };
     if (client) {
       await documentReady();
@@ -106,4 +168,6 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
 
 exports.Head = SiteMetadataDefaults.Head;
 exports.ClientOnly = ClientOnly;
+exports.Link = Link;
+exports.NavLink = NavLink;
 exports.ViteReactSSG = ViteReactSSG;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-25b96ed0.js';
-export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, b as ViteReactSSGOptions } from './types-25b96ed0.js';
-import { ReactNode } from 'react';
+import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-408e974a.js';
+export { I as IndexRouteRecord, N as NonIndexRouteRecord, c as RouteRecord, S as StyleCollector, b as ViteReactSSGOptions } from './types-408e974a.js';
+import React, { ReactNode } from 'react';
 import { HelmetProps } from 'react-helmet-async';
+import { LinkProps, NavLinkProps } from 'react-router-dom';
 import 'critters';
-import 'react-router-dom';
 
 type Props = HelmetProps & {
     children: ReactNode;
@@ -16,6 +16,9 @@ interface ClientOnlyProps {
 }
 declare function ClientOnly({ children, fallback, }: ClientOnlyProps): JSX.Element | null;
 
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+
 declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
 
-export { ClientOnly, Head, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };
+export { ClientOnly, Head, Link, NavLink, RouterOptions, ViteReactSSG, ViteReactSSGClientOptions, ViteReactSSGContext };

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, isValidElement } from 'react';
+import React, { useState, useEffect, isValidElement, forwardRef } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { useLinkClickHandler, Link as Link$1, NavLink as NavLink$1, createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { d as deserializeState, S as SiteMetadataDefaults } from './shared/vite-react-ssg.9d005d5e.mjs';
 export { H as Head } from './shared/vite-react-ssg.9d005d5e.mjs';
 
@@ -37,11 +37,73 @@ Current type: ${isValidElement(children) ? "React element" : typeof children}`);
   return fallback ?? null;
 }
 
+const Link = forwardRef((props, ref) => {
+  const {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative,
+    to,
+    onClick
+  } = props;
+  const internalOnClick = useLinkClickHandler(to, {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative
+  });
+  function handleClick(event) {
+    if (onClick)
+      onClick(event);
+    if (!event.defaultPrevented) {
+      React.startTransition(() => {
+        internalOnClick(event);
+      });
+    }
+    event.defaultPrevented = true;
+    event.preventDefault();
+  }
+  return /* @__PURE__ */ React.createElement(Link$1, { ...props, ref, onClick: handleClick });
+});
+const NavLink = forwardRef((props, ref) => {
+  const {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative,
+    to,
+    onClick
+  } = props;
+  const internalOnClick = useLinkClickHandler(to, {
+    replace,
+    state,
+    target,
+    preventScrollReset,
+    relative
+  });
+  function handleClick(event) {
+    if (onClick)
+      onClick(event);
+    if (!event.defaultPrevented) {
+      React.startTransition(() => {
+        internalOnClick(event);
+      });
+    }
+    event.defaultPrevented = true;
+    event.preventDefault();
+  }
+  return /* @__PURE__ */ React.createElement(NavLink$1, { ...props, ref, onClick: handleClick });
+});
+
 function ViteReactSSG(routerOptions, fn, options = {}) {
   const {
     transformState,
     rootContainer = "#root",
-    ssrWhenDev = true
+    ssrWhenDev = true,
+    getStyleCollector = null
   } = options;
   const isClient = typeof window !== "undefined";
   async function createRoot$1(client = false, routePath) {
@@ -53,7 +115,6 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
       return Promise.all(appRenderCallbacks.map((cb) => cb()));
     };
     const context = {
-      // app: App,
       isClient,
       routes: routerOptions.routes,
       router: browserRouter,
@@ -62,7 +123,8 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
       triggerOnSSRAppRendered,
       initialState: {},
       transformState,
-      routePath
+      routePath,
+      getStyleCollector
     };
     if (client) {
       await documentReady();
@@ -99,4 +161,4 @@ function ViteReactSSG(routerOptions, fn, options = {}) {
   return createRoot$1;
 }
 
-export { ClientOnly, ViteReactSSG };
+export { ClientOnly, Link, NavLink, ViteReactSSG };

package/dist/node/cli.cjs

@@ -3,7 +3,7 @@
 const kolorist = require('kolorist');
 const yargs = require('yargs');
 const helpers = require('yargs/helpers');
-const dev = require('../shared/vite-react-ssg.823b31c9.cjs');
+const dev = require('../shared/vite-react-ssg.8cbf43cc.cjs');
 require('node:path');
 require('node:module');
 require('fs-extra');

package/dist/node/cli.mjs

@@ -1,7 +1,7 @@
 import { gray, bold, red, reset, underline } from 'kolorist';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { b as build, d as dev } from '../shared/vite-react-ssg.7ee042ba.mjs';
+import { b as build, d as dev } from '../shared/vite-react-ssg.5291bf32.mjs';
 import 'node:path';
 import 'node:module';
 import 'fs-extra';

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const dev = require('./shared/vite-react-ssg.823b31c9.cjs');
+const dev = require('./shared/vite-react-ssg.8cbf43cc.cjs');
 require('node:path');
 require('node:module');
 require('kolorist');

package/dist/node.d.ts

@@ -1,6 +1,7 @@
 import { InlineConfig } from 'vite';
-import { b as ViteReactSSGOptions } from './types-25b96ed0.js';
+import { b as ViteReactSSGOptions } from './types-408e974a.js';
 import 'critters';
+import 'react';
 import 'react-router-dom';
 
 declare function build(ssgOptions?: Partial<ViteReactSSGOptions>, viteConfig?: InlineConfig): Promise<void>;

package/dist/node.mjs

@@ -1,4 +1,4 @@
-export { b as build, d as dev } from './shared/vite-react-ssg.7ee042ba.mjs';
+export { b as build, d as dev } from './shared/vite-react-ssg.5291bf32.mjs';
 import 'node:path';
 import 'node:module';
 import 'kolorist';

package/dist/shared/{vite-react-ssg.7ee042ba.mjs → vite-react-ssg.5291bf32.mjs}

@@ -990,14 +990,16 @@ class WritableAsPromise extends Writable {
   }
 }
 
-async function render(routes, request) {
+async function render(routes, request, styleCollector) {
   const { dataRoutes, query } = createStaticHandler(routes);
   const context = await query(request);
   const helmetContext = {};
   if (context instanceof Response)
     throw context;
   const router = createStaticRouter(dataRoutes, context);
-  const app = /* @__PURE__ */ React.createElement(HelmetProvider, { context: helmetContext }, /* @__PURE__ */ React.createElement(SiteMetadataDefaults, null), /* @__PURE__ */ React.createElement(StaticRouterProvider, { router, context }));
+  let app = /* @__PURE__ */ React.createElement(HelmetProvider, { context: helmetContext }, /* @__PURE__ */ React.createElement(SiteMetadataDefaults, null), /* @__PURE__ */ React.createElement(StaticRouterProvider, { router, context }));
+  if (styleCollector)
+    app = styleCollector.collect(app);
   const appHTML = await renderStaticApp(app);
   const { helmet } = helmetContext;
   const htmlAttributes = helmet.htmlAttributes.toString();
@@ -1008,6 +1010,8 @@ async function render(routes, request) {
     helmet.link.toString(),
     helmet.script.toString()
   ];
+  const styleTag = styleCollector?.toString?.(appHTML) ?? "";
+  metaStrings.push(styleTag);
   const metaAttributes = metaStrings.filter(Boolean);
   return { appHTML, htmlAttributes, bodyAttributes, metaAttributes };
 }
@@ -1209,14 +1213,15 @@ async function build(ssgOptions = {}, viteConfig = {}) {
     queue.add(async () => {
       try {
         const appCtx = await createRoot(false, route);
-        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = serializeState } = appCtx;
+        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = serializeState, getStyleCollector } = appCtx;
+        const styleCollector = getStyleCollector ? await getStyleCollector() : null;
         const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx) || indexHTML;
         const url = new URL(route, "http://vite-react-ssg.com");
         url.search = "";
         url.hash = "";
         url.pathname = route;
         const request = new Request(url.href);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request, styleCollector);
         await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1410,9 +1415,10 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
         const indexHTML = await viteServer.transformIndexHtml(url, template);
         const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
         const appCtx = await createRoot(false, url);
-        const { routes } = appCtx;
+        const { routes, getStyleCollector } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req));
+        const styleCollector = getStyleCollector ? await getStyleCollector() : null;
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req), styleCollector);
         const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
         const assetsUrls = /* @__PURE__ */ new Set();
         const collectAssets = async (mod2) => {

package/dist/shared/{vite-react-ssg.823b31c9.cjs → vite-react-ssg.8cbf43cc.cjs}

@@ -934,7 +934,7 @@ async function resolveAlias(config, entry) {
   return result || node_path.join(config.root, entry);
 }
 const { version } = JSON.parse(
-  node_fs.readFileSync(new URL("../../package.json", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.823b31c9.cjs', document.baseURI).href)))).toString()
+  node_fs.readFileSync(new URL("../../package.json", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.8cbf43cc.cjs', document.baseURI).href)))).toString()
 );
 
 async function getCritters(outDir, options = {}) {
@@ -998,14 +998,16 @@ class WritableAsPromise extends node_stream.Writable {
   }
 }
 
-async function render(routes, request) {
+async function render(routes, request, styleCollector) {
   const { dataRoutes, query } = server_js.createStaticHandler(routes);
   const context = await query(request);
   const helmetContext = {};
   if (context instanceof Response)
     throw context;
   const router = server_js.createStaticRouter(dataRoutes, context);
-  const app = /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, { context: helmetContext }, /* @__PURE__ */ React__default.createElement(SiteMetadataDefaults.SiteMetadataDefaults, null), /* @__PURE__ */ React__default.createElement(server_js.StaticRouterProvider, { router, context }));
+  let app = /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, { context: helmetContext }, /* @__PURE__ */ React__default.createElement(SiteMetadataDefaults.SiteMetadataDefaults, null), /* @__PURE__ */ React__default.createElement(server_js.StaticRouterProvider, { router, context }));
+  if (styleCollector)
+    app = styleCollector.collect(app);
   const appHTML = await renderStaticApp(app);
   const { helmet } = helmetContext;
   const htmlAttributes = helmet.htmlAttributes.toString();
@@ -1016,6 +1018,8 @@ async function render(routes, request) {
     helmet.link.toString(),
     helmet.script.toString()
   ];
+  const styleTag = styleCollector?.toString?.(appHTML) ?? "";
+  metaStrings.push(styleTag);
   const metaAttributes = metaStrings.filter(Boolean);
   return { appHTML, htmlAttributes, bodyAttributes, metaAttributes };
 }
@@ -1197,7 +1201,7 @@ async function build(ssgOptions = {}, viteConfig = {}) {
   const prefix = format === "esm" && process.platform === "win32" ? "file://" : "";
   const ext = format === "esm" ? ".mjs" : ".cjs";
   const serverEntry = node_path.join(prefix, ssgOut, node_path.parse(ssrEntry).name + ext);
-  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.823b31c9.cjs', document.baseURI).href)));
+  const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('shared/vite-react-ssg.8cbf43cc.cjs', document.baseURI).href)));
   const { createRoot, includedRoutes: serverEntryIncludedRoutes } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes;
   const { routes } = await createRoot(false);
@@ -1217,14 +1221,15 @@ async function build(ssgOptions = {}, viteConfig = {}) {
     queue.add(async () => {
       try {
         const appCtx = await createRoot(false, route);
-        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState } = appCtx;
+        const { routes: routes2, initialState, triggerOnSSRAppRendered, transformState = SiteMetadataDefaults.serializeState, getStyleCollector } = appCtx;
+        const styleCollector = getStyleCollector ? await getStyleCollector() : null;
         const transformedIndexHTML = await onBeforePageRender?.(route, indexHTML, appCtx) || indexHTML;
         const url = new URL(route, "http://vite-react-ssg.com");
         url.search = "";
         url.hash = "";
         url.pathname = route;
         const request = new Request(url.href);
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request);
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes2], request, styleCollector);
         await triggerOnSSRAppRendered?.(route, appHTML, appCtx);
         const renderedHTML = await renderHTML({
           rootContainerId,
@@ -1418,9 +1423,10 @@ async function dev(ssgOptions = {}, viteConfig = {}) {
         const indexHTML = await viteServer.transformIndexHtml(url, template);
         const createRoot = await viteServer.ssrLoadModule(ssrEntry).then((m) => m.createRoot);
         const appCtx = await createRoot(false, url);
-        const { routes } = appCtx;
+        const { routes, getStyleCollector } = appCtx;
         const transformedIndexHTML = await onBeforePageRender?.(url, indexHTML, appCtx) || indexHTML;
-        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req));
+        const styleCollector = getStyleCollector ? await getStyleCollector() : null;
+        const { appHTML, bodyAttributes, htmlAttributes, metaAttributes } = await render([...routes], createFetchRequest(req), styleCollector);
         const mod = await viteServer.moduleGraph.getModuleByUrl(entry);
         const assetsUrls = /* @__PURE__ */ new Set();
         const collectAssets = async (mod2) => {

package/dist/style-collectors.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+async function ssrCollector() {
+  const { ServerStyleSheet } = await import('styled-components');
+  const sheet = new ServerStyleSheet();
+  return {
+    collect(app) {
+      return sheet.collectStyles(app);
+    },
+    toString() {
+      return sheet.getStyleTags();
+    },
+    cleanup() {
+      sheet.seal();
+    }
+  };
+}
+const styledComponents = undefined.SSR ? ssrCollector : null;
+
+exports.getStyledComponentsCollector = styledComponents;

package/dist/style-collectors.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+
+declare function ssrCollector(): Promise<{
+    collect(app: ReactElement): JSX.Element;
+    toString(): string;
+    cleanup(): void;
+}>;
+declare const _default: typeof ssrCollector | null;
+
+export { _default as getStyledComponentsCollector };

package/dist/style-collectors.mjs

@@ -0,0 +1,18 @@
+async function ssrCollector() {
+  const { ServerStyleSheet } = await import('styled-components');
+  const sheet = new ServerStyleSheet();
+  return {
+    collect(app) {
+      return sheet.collectStyles(app);
+    },
+    toString() {
+      return sheet.getStyleTags();
+    },
+    cleanup() {
+      sheet.seal();
+    }
+  };
+}
+const styledComponents = import.meta.env.SSR ? ssrCollector : null;
+
+export { styledComponents as getStyledComponentsCollector };

package/dist/{types-25b96ed0.d.ts → types-408e974a.d.ts}

@@ -1,4 +1,5 @@
 import { Options } from 'critters';
+import { ReactElement } from 'react';
 import { NonIndexRouteObject, IndexRouteObject, createBrowserRouter } from 'react-router-dom';
 
 type Router = ReturnType<typeof createBrowserRouter>;
@@ -116,6 +117,7 @@ interface ViteReactSSGContext<HasRouter extends boolean = true> {
      * Current router path on SSG, `undefined` on client side.
      */
     routePath?: string;
+    getStyleCollector: (() => StyleCollector | Promise<StyleCollector>) | null;
 }
 interface ViteReactSSGClientOptions {
     transformState?: (state: any) => any;
@@ -134,6 +136,7 @@ interface ViteReactSSGClientOptions {
      * @default true
      */
     ssrWhenDev?: boolean;
+    getStyleCollector?: (() => StyleCollector | Promise<StyleCollector>) | null;
 }
 interface CommonRouteOptions {
     /**
@@ -152,10 +155,15 @@ interface RouterOptions {
     routes: RouteRecord[];
     createFetchRequest?: <T>(req: T) => Request;
 }
+interface StyleCollector {
+    collect: (app: ReactElement) => ReactElement;
+    toString: (html: string) => string;
+    cleanup?: () => void;
+}
 declare module 'vite' {
     interface UserConfig {
         ssgOptions?: ViteReactSSGOptions;
     }
 }
 
-export { IndexRouteRecord as I, NonIndexRouteRecord as N, RouterOptions as R, ViteReactSSGContext as V, ViteReactSSGClientOptions as a, ViteReactSSGOptions as b, RouteRecord as c };
+export { IndexRouteRecord as I, NonIndexRouteRecord as N, RouterOptions as R, StyleCollector as S, ViteReactSSGContext as V, ViteReactSSGClientOptions as a, ViteReactSSGOptions as b, RouteRecord as c };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-ssg",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "packageManager": "pnpm@8.6.6",
   "description": "",
   "author": "Riri <Daydreamerriri@outlook.com>",
@@ -30,6 +30,11 @@
       "types": "./dist/node.d.ts",
       "require": "./dist/node.cjs",
       "import": "./dist/node.mjs"
+    },
+    "./style-collectors": {
+      "types": "./dist/style-collectors.d.ts",
+      "require": "./dist/style-collectors.cjs",
+      "import": "./dist/style-collectors.mjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -39,6 +44,9 @@
     "*": {
       "node": [
         "./dist/node.d.ts"
+      ],
+      "style-collectors": [
+        "./dist/style-collectors.d.ts"
       ]
     }
   },
@@ -64,6 +72,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.14.1",
+    "styled-components": "^6.0.0",
     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
@@ -72,6 +81,9 @@
     },
     "react-router-dom": {
       "optional": true
+    },
+    "styled-components": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -106,6 +118,7 @@
     "react-router-dom": "^6.14.1",
     "rimraf": "5.0.1",
     "simple-git-hooks": "^2.8.1",
+    "styled-components": "6.0.5",
     "typescript": "5.1.6",
     "unbuild": "^1.2.1",
     "vite": "^4.4.0",