@cioky/vike-pandacss 0.1.0

package/README.md

@@ -0,0 +1,76 @@
+# @cioky/vike-pandacss
+
+> ⚠️ **HIGHLY EXPERIMENTAL** — This package is in early development. APIs may change without notice, parts may not work, and documentation may be incomplete. Use at your own risk.
+
+[Panda CSS](https://panda-css.com) integration for [Ripple TS](https://ripple-ts.com) — transforms `.tsrx` files for Panda extraction and enables `@apply` in `<style>` blocks.
+
+Part of the [vike-ripple monorepo](https://github.com/Opaius/vike-ripple).
+
+## Quick Start
+
+```bash
+npx @cioky/vike-create my-app --style pandacss
+cd my-app && npm run dev
+```
+
+## Manual Install
+
+```sh
+npm install @cioky/vike-pandacss
+```
+
+## Setup
+
+Two setup scripts must run **in order**:
+
+```bash
+npx @cioky/vike-core setup          # core patches (.tsrx, server isolation, etc.)
+npx @cioky/vike-pandacss setup  # replaces tailwind @apply with Panda @layer
+```
+
+## Usage
+
+### Vite plugin
+
+```ts
+// vite.config.ts
+import vikeRipplePandacss from '@cioky/vike-pandacss'
+
+export default defineConfig({
+  css: { postcss: './postcss.config.js' },
+  plugins: [
+    vikeRipplePandacss(),
+  ],
+})
+```
+
+### PostCSS config
+
+```js
+// postcss.config.js
+export default { plugins: { '@pandacss/dev/postcss': {} } }
+```
+
+### Panda CSS plugin
+
+```ts
+// panda.config.ts
+import { pluginRipple } from '@cioky/vike-pandacss/panda-plugin'
+
+export default defineConfig({
+  plugins: [pluginRipple()],
+})
+```
+
+The `pluginRipple()` implements Panda's `parser:before` hook to transform `.tsrx` content into valid TSX before Panda's ts-morph extracts `css()`/`cva()`/`sva()` calls.
+
+## How it works
+
+- **`parser:before` hook**: Strips Ripple's `@if`/`@for`/`@each` directives, `@{}` markers, and `<style>` blocks from `.tsrx` files so Panda's extraction engine can parse the remaining TSX.
+- **`@apply` patch**: Prepends `@layer reset, base, tokens, recipes, utilities;` to extracted CSS from `<style>` blocks so Panda CSS `@apply` directives resolve at build time.
+
+## Related Packages
+
+- [`@cioky/vike-core`](https://github.com/Opaius/vike-ripple/tree/main/vike-ripple) — Core Vike + Ripple integration
+- [`@cioky/vike-tailwindcss`](https://github.com/Opaius/vike-ripple/tree/main/vike-ripple-tailwindcss) — Tailwind CSS alternative
+- [`@cioky/vike-create`](https://github.com/Opaius/vike-ripple/tree/main/create-vike-ripple) — Project scaffold

package/index.d.ts

@@ -0,0 +1,27 @@
+declare module '@cioky/vike-pandacss' {
+	import type { Plugin } from 'vite';
+	const plugin: () => Plugin;
+	export default plugin;
+}
+
+declare module '@cioky/vike-pandacss/panda-plugin' {
+	import type { PandaPlugin } from '@pandacss/types';
+
+	/**
+	 * Panda CSS plugin for Ripple TS (.tsrx files).
+	 * Transforms .tsrx content into valid TSX before Panda extracts
+	 * css()/cva()/sva() calls via the `parser:before` hook.
+	 */
+	export function pluginRipple(): PandaPlugin;
+
+	/**
+	 * Core transform: converts Ripple .tsrx syntax to parseable TSX.
+	 * Strips <style>, converts @{} → {}, @if/for → {} blocks,
+	 * &[var] → var declarations.
+	 */
+	export function tsrxToTsx(code: string): string;
+}
+
+declare module '@cioky/vike-pandacss/setup' {
+	export {};
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@cioky/vike-pandacss",
+	"version": "0.1.0",
+	"description": "Panda CSS integration for Ripple TS — transforms .tsrx for Panda extraction, @apply in <style> blocks",
+	"type": "module",
+	"main": "./src/index.js",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"default": "./src/index.js"
+		},
+		"./panda-plugin": {
+			"types": "./index.d.ts",
+			"default": "./src/panda-plugin.js"
+		}
+	},
+	"bin": {
+		"@cioky/vike-pandacss": "src/setup.js"
+	},
+	"files": [
+		"src",
+		"index.d.ts"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Opaius/vike-ripple.git"
+	},
+	"homepage": "https://github.com/Opaius/vike-ripple",
+	"bugs": {
+		"url": "https://github.com/Opaius/vike-ripple/issues"
+	},
+	"keywords": [
+		"pandacss",
+		"ripple",
+		"ripplets",
+		"vike"
+	],
+	"license": "MIT",
+	"peerDependencies": {
+		"@pandacss/dev": ">=0.50.0",
+		"@ripple-ts/vite-plugin": ">=0.3.0"
+	}
+}

package/src/index.js

@@ -0,0 +1,38 @@
+/**
+ * Vike Ripple Panda CSS — Vite plugin entry.
+ *
+ * The main export provides a Vite plugin that configures Panda CSS PostCSS
+ * integration for Vike + Ripple projects. The Panda CSS plugin for .tsrx
+ * transformation lives at `@cioky/vike-pandacss/panda-plugin`.
+ *
+ * ## Usage in vite.config.ts
+ *   import vikeRipplePandacss from '@cioky/vike-pandacss'
+ *   import { pluginRipple } from '@cioky/vike-pandacss/panda-plugin'
+ *
+ *   export default defineConfig({
+ *     css: {
+ *       postcss: {
+ *         plugins: [require('@pandacss/dev/postcss')()],
+ *       },
+ *     },
+ *     plugins: [
+ *       vikeRipplePandacss(),  // ordering marker
+ *       // ...
+ *     ],
+ *   })
+ *
+ *   // panda.config.ts
+ *   export default defineConfig({
+ *     plugins: [pluginRipple()],
+ *     include: ['./pages/**\/*.{tsrx,tsx}', './src/**\/*.{ts,tsx}'],
+ *   })
+ */
+
+export { pluginRipple } from './panda-plugin.js';
+
+export default function vikeRipplePandacss() {
+	return {
+		name: '@cioky/vike-pandacss',
+		enforce: 'pre'
+	};
+}

package/src/panda-plugin.js

@@ -0,0 +1,31 @@
+/**
+ * Panda CSS plugin for Ripple TS (.tsrx files).
+ *
+ * Implements the `parser:before` hook to transform .tsrx content into valid TSX
+ * before Panda's ts-morph parser extracts css()/cva()/sva() calls.
+ *
+ * Usage in panda.config.ts:
+ *   import { pluginRipple } from '@cioky/vike-pandacss/panda-plugin'
+ *
+ *   export default defineConfig({
+ *     plugins: [pluginRipple()],
+ *   })
+ *
+ * @module @cioky/vike-pandacss/panda-plugin
+ */
+
+import { tsrxToTsx } from './tsrx-to-tsx.js';
+
+/** @type {import('@pandacss/types').PandaPlugin} */
+export function pluginRipple() {
+	return {
+		name: '@pandacss/plugin-ripple',
+		hooks: {
+			'parser:before': ({ filePath, content }) => {
+				if (filePath.endsWith('.tsrx')) {
+					return tsrxToTsx(content);
+				}
+			}
+		}
+	};
+}

package/src/setup.js

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+/**
+ * @cioky/vike-pandacss setup — enables Panda CSS @apply in Ripple <style> blocks.
+ *
+ * Run once:  npx @cioky/vike-pandacss setup
+ * Or add to project's package.json:  "postinstall": "@cioky/vike-pandacss setup"
+ */
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { createRequire } from 'module';
+import { join } from 'path';
+
+const projectRoot = process.cwd();
+let exitCode = 0;
+
+function log(msg) {
+	console.log('[@cioky/vike-pandacss]', msg);
+}
+function warn(msg) {
+	console.warn('[@cioky/vike-pandacss]', msg);
+}
+
+function patchRippleApply() {
+	const target = resolveModule('@ripple-ts/vite-plugin/src/index.js');
+	if (!target) {
+		warn('@ripple-ts/vite-plugin not found — skipping. Run npm install first.');
+		return;
+	}
+
+	let src = readFileSync(target, 'utf-8');
+	if (src.includes('PANDA_PATCH_APPLY')) {
+		log('@apply patch already applied');
+		return;
+	}
+
+	// Case 1: @cioky/vike-core's tailwind patch is already present — replace it
+	if (src.includes('TW_PATCH_APPLY') || src.includes('@import "tailwindcss"')) {
+		const twPatched =
+			'\t\t\t\t\t\t// TW_PATCH_APPLY: @apply support\n' +
+			'\t\t\t\t\t\tcss = \'@import "tailwindcss" layer(reference);\\n\' + css;\n' +
+			"\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, 'style');\n" +
+			'\t\t\t\t\t\tcssCache.set(cssId, css);';
+		const pandaPatched =
+			'\t\t\t\t\t\t// PANDA_PATCH_APPLY: bring panda CSS layer into scope for @apply\n' +
+			"\t\t\t\t\t\tcss = '@layer reset, base, tokens, recipes, utilities;\\n' + css;\n" +
+			"\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, 'style');\n" +
+			'\t\t\t\t\t\tcssCache.set(cssId, css);';
+		const result = src.replace(twPatched, pandaPatched);
+		if (result === src) {
+			warn('Could not replace tailwind patch with Panda patch');
+			exitCode = 1;
+			return;
+		}
+		writeFileSync(target, result, 'utf-8');
+		log('Replaced tailwind @apply patch with Panda CSS @apply patch');
+		return;
+	}
+
+	// Case 2: fresh install, no tailwind patch — apply panda directly
+	const orig =
+		'\t\t\t\t\tif (css) {\n' +
+		"\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, 'style');\n" +
+		'\t\t\t\t\t\tcssCache.set(cssId, css);';
+	const patched =
+		'\t\t\t\t\tif (css) {\n' +
+		'\t\t\t\t\t\t// PANDA_PATCH_APPLY: bring panda CSS layer into scope for @apply\n' +
+		"\t\t\t\t\t\tcss = '@layer reset, base, tokens, recipes, utilities;\\n' + css;\n" +
+		"\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, 'style');\n" +
+		'\t\t\t\t\t\tcssCache.set(cssId, css);';
+
+	const result = src.replace(orig, patched);
+	if (result === src) {
+		warn('Could not find target in Ripple plugin');
+		exitCode = 1;
+		return;
+	}
+
+	writeFileSync(target, result, 'utf-8');
+	log('Patched Ripple plugin for Panda CSS @apply support in <style> blocks');
+}
+
+function resolveModule(rel) {
+	const p = join(projectRoot, 'node_modules', rel);
+	if (existsSync(p)) return p;
+	try {
+		const r = createRequire(join(projectRoot, 'package.json'));
+		return r.resolve(rel);
+	} catch {
+		return null;
+	}
+}
+
+log('Applying Panda CSS @apply patch...');
+patchRippleApply();
+log('Done');
+process.exit(exitCode);

package/src/tsrx-to-tsx.js

@@ -0,0 +1,52 @@
+/**
+ * Transform Ripple .tsrx content into valid TSX for Panda CSS extraction.
+ *
+ * Ripple uses @-prefixed template syntax inside TSX. This transform:
+ *   - Strips <style> blocks (CSS is noise for extraction)
+ *   - Replaces `@{}` function body markers with `{}`
+ *   - Strips `@if/for/else/empty` directive wrappers, keeping brace-delimited bodies
+ *     as valid JSX expression blocks so ts-morph can traverse them
+ *   - Converts `&[varname]` reactive declarations to plain identifiers
+ *
+ * The result is parseable TSX — not semantically correct, but ts-morph can walk it
+ * to find css()/cva()/sva() calls.
+ */
+
+// Match @if/for/else-if directives with their args up to the opening brace.
+// Handles one level of nested parentheses in conditions.
+const directiveOpenRe =
+	/@(?:(if|for|else\s+if)\s*\((?:[^()]|\([^()]*\))*\)|(else|empty))\s*(\{)/g;
+// Match @{} function body markers
+const atBlockOpenRe = /@\{/g;
+// Match <style> blocks (including attributes like scoped)
+const styleBlockRe = /<style[^>]*>[\s\S]*?<\/style>/gi;
+// Match reactive declarations
+const reactiveDeclRe = /(let|const|var)\s+&\[(\w+)\]/g;
+
+export function tsrxToTsx(code) {
+	// 1. Strip <style> blocks
+	let result = code.replace(styleBlockRe, '');
+
+	// 2. Replace function body @{} markers
+	result = result.replace(atBlockOpenRe, '{');
+
+	// 3. Convert reactive declarations:  let &[name]  →  let name
+	result = result.replace(reactiveDeclRe, '$1 $2');
+
+	// 4. Strip @-directive wrappers, keeping the brace
+	//    @if (expr) {   →   {
+	//    } @else if (expr) {   →   }{
+	//    } @else {   →   }{
+	//    } @empty {   →   }{
+	//    @for (decl; key) {   →   {
+	result = result.replace(
+		directiveOpenRe,
+		(match, directiveWithArgs, elseEmpty, brace) => {
+			// The directive name and parenthesized args are dropped.
+			// All we keep is the brace (which opens the body block).
+			return brace;
+		}
+	);
+
+	return result;
+}