fix css resolution for vite rsc

.changeset/moody-nights-tan.md

@@ -0,0 +1,5 @@
+---
+"next-yak": patch
+---
+
+fix css resolution for vite rsc

examples/tanstack-start/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "tanstack-start",
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "latest",
+    "@tanstack/react-start": "latest",
+    "next-yak": "workspace:*",
+    "react": "catalog:dev",
+    "react-dom": "catalog:dev"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:dev",
+    "@types/react": "catalog:dev",
+    "@types/react-dom": "catalog:dev",
+    "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
+    "typescript": "catalog:dev",
+    "vite": "catalog:dev"
+  }
+}

examples/tanstack-start/src/components/Clock.tsx

@@ -0,0 +1,63 @@
+import { styled } from "next-yak";
+import type { ReactNode } from "react";
+import { ClockHands } from "./ClockHands";
+
+export const Clock = () => {
+  return (
+    <ClockWrapper>
+      <ClockFace>
+        <ClockCenter />
+        {Array.from({ length: 12 }).map((_, i) => (
+          <ClockNumber key={i} index={i}>
+            {(i + 12) % 12 || 12}
+          </ClockNumber>
+        ))}
+        <ClockHands />
+      </ClockFace>
+    </ClockWrapper>
+  );
+};
+
+const ClockWrapper = styled.div`
+  width: 200px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  margin: 40px auto;
+  perspective: 1000px;
+`;
+const ClockFace = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 2s ease-in-out;
+  &:hover {
+    transform: rotateX(55deg);
+  }
+`;
+const ClockCenter = styled.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: black;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  translate: 0 0 40px;
+`;
+const ClockNumber = styled.div<{ index: number; children: ReactNode }>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: 50% 100%;
+  color: #000;
+  font-size: 14px;
+  text-align: center;
+  width: 20px;
+  transform: translate(-50%, -50%) rotate(${({ index }) => index * 30}deg)
+    translate(0, -88px) rotate(${({ index }) => -index * 30}deg);
+`;

examples/tanstack-start/src/components/ClockHands.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { styled } from "next-yak";
+import { useEffect, useMemo, useState } from "react";
+
+export const ClockHands = () => {
+  const currentTime = useCurrentTime();
+  if (currentTime === null) return null;
+  return (
+    <>
+      <SecondHand $angle={currentTime.secondsAngle} />
+      <MinuteHand $angle={currentTime.minutesAngle} />
+      <HourHand $angle={currentTime.hoursAngle} />
+    </>
+  );
+};
+
+const useCurrentTime = () => {
+  const [time, setTime] = useState<Date | undefined>();
+  useEffect(() => {
+    setTime(new Date());
+    const interval = setInterval(() => setTime(new Date()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+  return useMemo(() => {
+    if (!time) return null;
+    const seconds = time.getSeconds();
+    const minutes = time.getMinutes();
+    const hours = time.getHours();
+    return {
+      seconds,
+      minutes,
+      hours,
+      secondsAngle: seconds * 6,
+      minutesAngle: minutes * 6 + seconds * 0.1,
+      hoursAngle: hours * 30 + minutes * 0.5,
+    };
+  }, [time]);
+};
+
+const ClockHand = styled.div<{ $angle: number }>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform-origin: 50% 100%;
+  transform: translate(-50%, -100%) rotate(${({ $angle }) => $angle}deg);
+`;
+
+const SecondHand = styled(ClockHand)`
+  width: 2px;
+  height: 45%;
+  background: #f00;
+  translate: 0 0 40px;
+`;
+const MinuteHand = styled(ClockHand)`
+  width: 4px;
+  height: 40%;
+  background: black;
+  translate: 0 0 40px;
+`;
+const HourHand = styled(ClockHand)`
+  width: 6px;
+  height: 30%;
+  background: black;
+  translate: 0 0 40px;
+`;

examples/tanstack-start/src/components/Counter.tsx

@@ -0,0 +1,32 @@
+import { styled } from "next-yak";
+import { useState } from "react";
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <Wrapper>
+      <p>Count: {count}</p>
+      <Button onClick={() => setCount((c) => c + 1)}>Increment</Button>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+`;
+
+const Button = styled.button`
+  padding: 8px 16px;
+  background: #e85d04;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  &:hover {
+    background: #d45303;
+  }
+`;

examples/tanstack-start/src/components/CssModuleGreeting.module.css

@@ -0,0 +1,13 @@
+.wrapper {
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 0 20px;
+  font-family: system-ui, sans-serif;
+}
+
+.headline {
+  color: #e85d04;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 2rem;
+}

examples/tanstack-start/src/components/CssModuleGreeting.tsx

@@ -0,0 +1,9 @@
+import styles from "./CssModuleGreeting.module.css";
+
+export function CssModuleGreeting() {
+  return (
+    <div className={styles.wrapper}>
+      <h1 className={styles.headline}>Hello from CSS Modules RSC</h1>
+    </div>
+  );
+}

examples/tanstack-start/src/components/Greeting.tsx

@@ -0,0 +1,32 @@
+import { styled } from "next-yak";
+
+export const Greeting = () => {
+  return (
+    <Wrapper>
+      <Headline>Hello from a Server Component</Headline>
+      <Subtitle>
+        This component is rendered on the server. It uses next-yak styled
+        components with no client-side JavaScript.
+      </Subtitle>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 0 20px;
+  font-family: system-ui, sans-serif;
+`;
+
+const Headline = styled.h1`
+  color: #e85d04;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 2rem;
+`;
+
+const Subtitle = styled.p`
+  color: #555;
+  line-height: 1.6;
+`;

examples/tanstack-start/src/components/GreetingPlain.tsx

@@ -0,0 +1,23 @@
+import { styled } from "next-yak";
+
+export const GreetingPlain = () => {
+  return (
+    <Wrapper>
+      <Headline>Hello from a Server Component</Headline>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 0 20px;
+  font-family: system-ui, sans-serif;
+`;
+
+const Headline = styled.h1`
+  color: #e85d04;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 2rem;
+`;