vike-ripple 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-ripple",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vike extension for Ripple TS — full parity with vike-react/vike-solid/vike-vue",
   "type": "module",
   "types": "./src/types/Config.ts",
@@ -19,12 +19,20 @@
   "bin": {
     "vike-ripple": "./src/setup.js"
   },
-  "files": ["src"],
-  "keywords": ["vike", "ripple", "ripplets", "ssr", "vite"],
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "vike",
+    "ripple",
+    "ripplets",
+    "ssr",
+    "vite"
+  ],
   "license": "MIT",
   "peerDependencies": {
     "vike": ">=0.4.259",
     "@ripple-ts/vite-plugin": ">=0.3.0",
     "ripple": ">=0.1.0"
   }
-}
+}

package/src/setup.js

@@ -1,16 +1,9 @@
-#!/usr/bin/env node
-/**
- * vike-ripple setup — patches Vike and Ripple for .tsrx support.
- *
- * Run once:  npx vike-ripple setup
- * Or add to project's package.json:  "postinstall": "vike-ripple setup"
- */
 import { createRequire } from 'module'
-import { join, dirname } from 'path'
+import { join } from 'path'
 import { readFileSync, writeFileSync, existsSync } from 'fs'
 import { fileURLToPath } from 'url'
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const projectRoot = process.cwd()
 let exitCode = 0
 
@@ -61,7 +54,7 @@ function patchRippleDirect() {
   log('Patched Ripple plugin for ?direct CSS module loading')
 }
 
-// ── Patch 3: @apply support (tailwindcss integration) ──────────
+// ── Patch 3: @apply support via @reference (no HMR loops) ─────
 function patchRippleApply() {
   const target = resolveRipple('src/index.js')
   if (!target) return
@@ -75,13 +68,16 @@ function patchRippleApply() {
     src = src.replace(
       '// TW_PATCH: prepend tailwindcss so @apply works',
       '// TW_PATCH_APPLY: bring tailwindcss into scope for @apply',
+    )
+      "css = '@import \"tailwindcss\";\\n' + css;",
+      "css = '@import \"tailwindcss\" layer(reference);\\n' + css;",
     )
     writeFileSync(target, src, 'utf-8')
-    log('Upgraded @apply patch format')
+    log('Upgraded @apply patch to @reference (prevents HMR loops)')
     return
   }
 
-  // Fresh install — original unpatched code
+  // Fresh install — prepend @reference comment + tailwind for HMR safety
   const orig = (
     '\t\t\t\t\tif (css) {\n' +
     '\t\t\t\t\t\tconst cssId = createVirtualImportId(filename, root, \'style\');\n' +
@@ -90,7 +86,7 @@ function patchRippleApply() {
   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\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);'
   )
@@ -98,7 +94,7 @@ function patchRippleApply() {
   const result = src.replace(orig, patched)
   if (result === src) { warn('Could not patch Ripple plugin for @apply'); return }
   writeFileSync(target, result, 'utf-8')
-  log('Patched Ripple plugin for @apply support in <style> blocks')
+  log('Patched Ripple plugin for @apply support in <style> blocks (HMR-safe)')
 }
 
 // ── Resolve helpers ────────────────────────────────────────────