fix: solid-styled (#1776)

Author: lxsmnsyc

examples/pnpm-lock.yaml

@@ -1,11 +1,11 @@
 import { defineConfig } from "@solidjs/start/config";
 import type { PluginOption } from "vite";
-import solidStyled from "vite-plugin-solid-styled";
+import solidStyled from "unplugin-solid-styled";
 
 export default defineConfig({
   vite: {
     plugins: [
-      solidStyled({
+      solidStyled.vite({
         filter: {
           include: "src/**/*.tsx",
           exclude: "node_modules/**/*.{ts,js}"

examples/with-solid-styled/app.config.ts

@@ -11,9 +11,9 @@
     "@solidjs/router": "^0.15.0",
     "@solidjs/start": "^1.0.11",
     "solid-js": "^1.9.2",
-    "solid-styled": "^0.11.1",
+    "solid-styled": "^0.12.0",
     "vinxi": "^0.4.3",
-    "vite-plugin-solid-styled": "^0.11.1"
+    "unplugin-solid-styled": "^0.12.0"
   },
   "overrides": {
     "vite": "5.4.10"

examples/with-solid-styled/package.json

@@ -3,9 +3,7 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 
-import { useAssets } from "solid-js/web";
-
-import { StyleRegistry, css, renderSheets, type StyleData } from "solid-styled";
+import { StyleRegistry, css } from "solid-styled";
 
 function GlobalStyles() {
   css`
@@ -56,14 +54,11 @@ function GlobalStyles() {
 }
 
 export default function App() {
-  const sheets: StyleData[] = [];
-  useAssets(() => renderSheets(sheets));
-
   return (
     <Router
-      root={props => (
+      root={(props) => (
         <MetaProvider>
-          <StyleRegistry styles={sheets}>
+          <StyleRegistry auto>
             <GlobalStyles />
             <a href="/">Index</a>
             <a href="/about">About</a>