@adriansteffan/reactive 0.0.11 → 0.0.13

package/template/package.json

@@ -14,16 +14,17 @@
     "rp-dev-pull": "npm link @adriansteffan/reactive"
   },
   "dependencies": {
+    "@adriansteffan/reactive": "RP_VERSION",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.61.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.1.0",
     "react-toastify": "^10.0.6",
-    "@adriansteffan/reactive": "RP_VERSION",
     "survey-react-ui": "^1.12.9"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/typography": "^0.5.16",
     "@types/howler": "^2.2.11",
     "@types/node": "^22.9.2",
@@ -32,18 +33,17 @@
     "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.19",
     "concurrently": "^9.1.0",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0",
+    "vite": "^6.2.0",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-top-level-await": "^1.4.4",
-    "vitest": "^2.1.5"
+    "vitest": "^3.0.7"
   }
 }

package/template/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

package/template/src/App.tsx

@@ -22,7 +22,7 @@ const CustomTrial = ({ next, maxCount }: BaseComponentProps & { maxCount: number
             next({});
           }
         }}
-        className='mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors'
+        className='mt-4 px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
       >
         Count: {count}
       </button>

package/template/src/index.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import '@adriansteffan/reactive/preset.css';
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';

package/template/src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import "reactive/style.css";
+import "@adriansteffan/reactive/style.css";
 import "./index.css";
 import { ExperimentProvider } from "@adriansteffan/reactive";
 

package/vite.config.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
+import tailwindcssPostcss from '@tailwindcss/postcss';
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 
@@ -16,15 +17,16 @@ export default defineConfig(() => {
       viteStaticCopy({
         targets: [
           {
-            src: 'tailwind.config.js',
+            src: 'src/index.css',
             dest: '.',
+            rename: 'preset.css',
           },
         ],
       }),
     ],
     css: {
       postcss: {
-        plugins: [tailwindcss, autoprefixer],
+        plugins: [tailwindcssPostcss, autoprefixer],
       },
     },
     build: {

package/dist/tailwind.config.js

@@ -1,33 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    fontFamily: {
-      sans: ['Atkinson Hyperlegible', 'sans-serif'],
-      atkinson: ['Atkinson Hyperlegible', 'sans-serif'],
-    },
-    extend: {
-      keyframes: {
-        slideDown: {
-          '0%': {
-            transform: 'translateY(-10px)',
-            opacity: '0',
-          },
-          '100%': {
-            transform: 'translateY(0)',
-            opacity: '1',
-          },
-        },
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-      },
-      animation: {
-        slideDown: 'slideDown 0.8s ease-out forwards',
-        fadeIn: 'fadeIn 0.5s ease-out forwards',
-      },
-    },
-  },
-  plugins: [],
-};

package/tailwind.config.js

@@ -1,33 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    fontFamily: {
-      sans: ['Atkinson Hyperlegible', 'sans-serif'],
-      atkinson: ['Atkinson Hyperlegible', 'sans-serif'],
-    },
-    extend: {
-      keyframes: {
-        slideDown: {
-          '0%': {
-            transform: 'translateY(-10px)',
-            opacity: '0',
-          },
-          '100%': {
-            transform: 'translateY(0)',
-            opacity: '1',
-          },
-        },
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-      },
-      animation: {
-        slideDown: 'slideDown 0.8s ease-out forwards',
-        fadeIn: 'fadeIn 0.5s ease-out forwards',
-      },
-    },
-  },
-  plugins: [],
-};

package/template/tailwind.config.js

@@ -1,7 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  important: true, // needed due to tailwind injection order when importing reactive
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  plugins: [require('@tailwindcss/typography')],
-  presets: [require("@adriansteffan/reactive/tailwind.config.js")],
-};