@barocss/server 0.7.0 → 0.8.1

package/README.md

@@ -38,6 +38,7 @@ const tag = ssrStyleTag(css); // '<style data-barocss-ssr>…</style>': put it i
   The output never contains `@layer` statements.
 - The result is one ordered sheet (#267): each referenced theme var once, each `@property` block once, rules in Tailwind variant order.
 - Also exported: `ssrStyleTag(css, { nonce })`, `SSR_STYLE_ATTRIBUTE`.
+- **Inlining CSS into HTML: use the helper.** Wrap server output with `ssrStyleTag(css)` (or, where a framework takes a string, apply the same end-tag escaping as the Next.js example below). Never interpolate raw CSS into `<style>${css}</style>`.
 
 **Next.js App Router** (a server component; `html` is the CMS or model markup you render):
 
@@ -54,12 +55,20 @@ export default async function Page() {
 }
 ```
 
-Don't give this `<style>` a `precedence` or `href`, so React leaves it where it is. It only has to come before the content it styles. When you render components rather than an HTML string, pass the class list instead: `runtime.generateCssForHtml(['p-4 sm:p-6', …], { skip: BUILD_CSS })`.
+The `.replace(/<\/style/gi, '<\\/style')` is what `ssrStyleTag` does for you: raw CSS inlined into HTML must never contain a markup end-tag sequence, or it could close the `<style>` element early. Don't give this `<style>` a `precedence` or `href`, so React leaves it where it is. It only has to come before the content it styles. When you render components rather than an HTML string, pass the class list instead: `runtime.generateCssForHtml(['p-4 sm:p-6', …], { skip: BUILD_CSS })`.
 
 **Astro, SSR** (`src/middleware.ts`; read the emitted build CSS once at startup):
 
 ```ts
 import { defineMiddleware } from 'astro:middleware';
+import { ServerRuntime, ssrStyleTag } from '@barocss/server';
+const runtime = new ServerRuntime({
+  cssVarPrefix: 'tw',                      // always, next to a Tailwind build
+  // from the build's `@custom-variant dark (...)`: shadcn -> '.dark &',
+  // `[data-theme=dark]` variant -> '[data-theme=dark] &', none -> omit (default 'media')
+  darkMode: 'class',
+  darkModeSelector: '.dark &',
+});
 const dir = path.resolve('dist/client/_astro');
 const BUILD_CSS = fs.existsSync(dir) ? fs.readdirSync(dir).filter((f) => f.endsWith('.css')).map((f) => fs.readFileSync(path.join(dir, f), 'utf8')).join('\n') : '';
 
@@ -74,7 +83,7 @@ export const onRequest = defineMiddleware(async (_ctx, next) => {
 });
 ```
 
-**Astro, static output:** do the same once in an integration's `astro:build:done` hook: read every `.css` under `dir` as the skip CSS, then rewrite every `.html`. The full recipe (shared config, static hook, client companion) is in the docs: `guide/integration/astro`.
+**Astro, static output:** do the same once in an integration's `astro:build:done` hook: read every `.css` under `dir` as the skip CSS, then rewrite every `.html`, with the same `cssVarPrefix: 'tw'` and `darkModeSelector` on the `ServerRuntime`. The full recipe (shared config, static hook, client companion) is in the docs: `guide/integration/astro`.
 
 **Config to copy from the build CSS** (use the same object on server and client):
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barocss/server",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/barocss/barocss.git",
@@ -26,12 +26,12 @@
   },
   "dependencies": {
     "jsdom": "^26.1.0",
-    "@barocss/kit": "0.7.0"
+    "@barocss/kit": "0.8.1"
   },
   "devDependencies": {
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^5.0.2"
   },
   "scripts": {
     "build": "vite build",