@cioky/vike-tailwindcss 0.3.2

package/README.md

@@ -0,0 +1,81 @@
+# @cioky/vike-tailwindcss
+
+> ⚠️ **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.
+
+[Tailwind CSS v4](https://tailwindcss.com) integration for [Ripple TS](https://ripple-ts.com) — enables `@apply` inside Ripple `<style>` blocks with full theme/utility resolution.
+
+Part of the [vike-ripple monorepo](https://github.com/Opaius/vike-ripple).
+
+## Quick Start
+
+```bash
+npx create-vike-ripple my-app --style tailwind
+cd my-app && npm run dev
+```
+
+## Manual Install
+
+```sh
+npm install @cioky/vike-tailwindcss
+```
+
+### 1. Run setup
+
+```sh
+npx @cioky/vike-tailwindcss setup
+```
+
+### 2. Add plugin to `vite.config.ts`
+
+```ts
+import vikeRippleTailwindcss from '@cioky/vike-tailwindcss'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    vikeRipple(),
+    ripple({ excludeRippleExternalModules: true }),
+    vike(),
+    vikeRippleTailwindcss(),
+    tailwindcss(),
+  ],
+})
+```
+
+### 3. Add CSS entry point
+
+Create `src/tailwind.css`:
+
+```css
+@import "tailwindcss";
+```
+
+Import it in your Layout or page:
+
+```tsx
+import '../src/tailwind.css'
+```
+
+## Usage
+
+```tsrx
+<style>
+  .my-button {
+    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
+  }
+</style>
+```
+
+## How it works
+
+Ripple extracts CSS from `<style>` blocks and emits it as a virtual module. This plugin patches `@ripple-ts/vite-plugin` to prepend `@import "tailwindcss" layer(reference)` to the extracted CSS, making Tailwind utilities available for `@apply` without generating duplicate CSS output.
+
+## Known Issues
+
+- **HMR hang**: Editing files with `@apply` during dev may occasionally cause HMR to hang.
+- **`</style>` in template literals**: If a file contains `</style>` inside a JavaScript string, the Tailwind Oxide scanner may emit a `CssSyntaxError`. Workaround: break the literal.
+
+## Related Packages
+- [`@cioky/vike-core`](https://github.com/Opaius/vike-ripple/tree/main/vike-ripple) — Core Vike + Ripple integration
+- [`vike-ripple-pandacss`](https://github.com/Opaius/vike-ripple/tree/main/vike-ripple-pandacss) — Panda CSS alternative
+- [`create-vike-ripple`](https://github.com/Opaius/vike-ripple/tree/main/create-vike-ripple) — Project scaffold

package/index.d.ts

@@ -0,0 +1,5 @@
+declare module '@cioky/vike-tailwindcss' {
+	import type { Plugin } from 'vite';
+	const plugin: () => Plugin;
+	export default plugin;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@cioky/vike-tailwindcss",
+	"version": "0.3.2",
+	"description": "Tailwind CSS v4 integration for Ripple TS — @apply in <style> blocks, class scanning",
+	"type": "module",
+	"main": "./src/index.js",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"default": "./src/index.js"
+		}
+	},
+	"bin": {
+		"@cioky/vike-tailwindcss": "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": [
+		"tailwindcss",
+		"ripple",
+		"ripplets",
+		"vike"
+	],
+	"license": "MIT",
+	"peerDependencies": {
+		"@tailwindcss/vite": ">=4.0.0",
+		"@ripple-ts/vite-plugin": ">=0.3.0"
+	}
+}

package/src/index.js

@@ -0,0 +1,19 @@
+/**
+ * @cioky/vike-tailwindcss — Tailwind CSS v4 integration for Ripple TS.
+ *
+ * Enables @apply in Ripple <style> blocks.
+ *
+ * ## Setup
+ * Also install @cioky/vike-core and run its setup:
+ *   npx @cioky/vike-tailwindcss setup
+ *
+ * Then add the Vite plugin to vite.config.ts:
+ *   import vikeRippleTailwindcss from '@cioky/vike-tailwindcss'
+ *   // in plugins: vikeRippleTailwindcss(),
+ */
+export default function vikeRippleTailwindcss() {
+	return {
+		name: '@cioky/vike-tailwindcss',
+		enforce: 'pre'
+	};
+}

package/src/setup.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+/**
+ * @cioky/vike-tailwindcss setup — enables @apply in Ripple <style> blocks.
+ *
+ * Run once:  npx @cioky/vike-tailwindcss setup
+ * Or add to project's package.json:  "postinstall": "@cioky/vike-tailwindcss setup"
+ */
+import { createRequire } from 'module';
+import { join } from 'path';
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const projectRoot = process.cwd();
+let exitCode = 0;
+
+function log(msg) {
+	console.log('[@cioky/vike-tailwindcss]', msg);
+}
+function warn(msg) {
+	console.warn('[@cioky/vike-tailwindcss]', msg);
+}
+
+function patchRippleApply() {
+	const target = resolveModule('@ripple-ts/vite-plugin/src/index.js');
+	if (!target) {
+		warn('@ripple-ts/vite-plugin not found — skipping');
+		return;
+	}
+
+	let src = readFileSync(target, 'utf-8');
+	if (src.includes('TW_PATCH_APPLY')) {
+		log('@apply patch already applied');
+		return;
+	}
+
+	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// TW_PATCH_APPLY: bring tailwindcss into scope for @apply\n' +
+		'\t\t\t\t\t\tcss = \'@import "tailwindcss";\\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 @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 @apply patch...');
+patchRippleApply();
+log('Done');
+process.exit(exitCode);