chore: tailwind plugin use configResolved instead of config hook (#2025)

Co-authored-by: 苏向夜 <[email protected]>

.changeset/eight-forks-glow.md

@@ -0,0 +1,5 @@
+---
+"@farmfe/js-plugin-tailwindcss": patch
+---
+
+use configResolve instead of config hooks

examples/tailwind-next/farm.config.ts

@@ -1,26 +1,9 @@
-import type { UserConfig } from "@farmfe/core";
-// import farmPostcssPlugin from '@farmfe/js-plugin-postcss';
+import  { defineConfig } from "@farmfe/core";
 import tailwind from "@farmfe/js-plugin-tailwindcss";
 
-function defineConfig(config: UserConfig) {
-  return config;
-}
-
 export default defineConfig({
   compilation: {
-    input: {
-      index: "./index.html",
-    },
-    output: {
-      path: "./build",
-    },
-    sourcemap: false,
-    resolve: {
-      dedupe: ["tailwindcss"],
-    },
-  },
-  server: {
-    hmr: true,
+    persistentCache: false,
   },
   plugins: [
     "@farmfe/plugin-react",

examples/tailwind-next/src/AnimatedComponents.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+
+export const WiggleButton = () => (
+  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded animate-wiggle">
+    Wiggle Me!
+  </button>
+)
+
+export const FloatingCard = () => (
+  <div className="bg-white p-6 rounded-lg shadow-lg animate-float">
+    <h2 className="text-xl font-bold mb-2">Floating Card</h2>
+    <p>This card gently floats up and down.</p>
+  </div>
+)
+
+export const FadeInText = () => {
+  const [show, setShow] = useState(false)
+  return (
+    <div>
+      <button
+        onClick={() => setShow(!show)}
+        className="bg-purple-500 text-white px-4 py-2 rounded mb-4"
+      >
+        Toggle Fade
+      </button>
+      {show && (
+        <p className="text-2xl font-bold text-purple-600 animate-fadeIn">
+          I fade in smoothly!
+        </p>
+      )}
+    </div>
+  )
+}
+
+export const SlideInPanel = () => {
+  const [show, setShow] = useState(false)
+  return (
+    <div>
+      <button
+        onClick={() => setShow(!show)}
+        className="bg-green-500 text-white px-4 py-2 rounded mb-4"
+      >
+        Toggle Slide
+      </button>
+      {show && (
+        <div className="bg-green-500 text-white p-4 rounded-lg animate-slideIn">
+          <h3 className="text-xl font-bold">Sliding Panel</h3>
+          <p>I slide in from the left!</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const PulsingIcon = () => (
+  <div className="w-12 h-12 rounded-full bg-red-500 animate-pulse"></div>
+)
+
+export const BouncingBall = () => (
+  <div className="w-12 h-12 rounded-full bg-yellow-500 animate-bounce"></div>
+)
+
+export const SpinningLoader = () => (
+  <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+)
+
+export const PingingCircle = () => (
+  <span className="relative flex h-3 w-3">
+    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+    <span className="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
+  </span>
+)
+
+export const ScalingSquare = () => (
+  <div className="w-12 h-12 bg-purple-500 animate-scale"></div>
+)
+
+export const ShakingInput = () => (
+  <input
+    type="text"
+    placeholder="Type and watch me shake!"
+    className="border-2 border-gray-300 p-2 rounded animate-shake"
+  />
+)
+
+export const FlippingCard = () => (
+  <div className="w-32 h-32 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg animate-rotateY"></div>
+)
+
+export const TypingText = () => (
+  <div className="w-64 overflow-hidden border-r-2 border-black">
+    <p className="font-mono text-lg whitespace-nowrap overflow-hidden animate-typing">
+      Welcome to animations!
+    </p>
+  </div>
+)
+

examples/tailwind-next/src/App.tsx

@@ -1,35 +1,44 @@
-import React from 'react';
-import logo from './logo.svg?url';
-import { useState } from 'react';
-
-const App = () => {
-  const [count, setCount] = useState(0);
+import React from 'react'
+import {
+  WiggleButton,
+  FloatingCard,
+  FadeInText,
+  SlideInPanel,
+  PulsingIcon,
+  BouncingBall,
+  SpinningLoader,
+  PingingCircle,
+  ScalingSquare,
+  ShakingInput,
+  FlippingCard,
+  TypingText
+} from './AnimatedComponents'
 
+export default function App() {
   return (
-    <div className="text-center">
-      <header className="bg-slate-700 min-h-screen flex flex-col items-center justify-center text-[calc(10px + 2vmin)] text-white">
-        <img
-          src={logo}
-          className="animate-spin h-[20vmin] pointer-events-none"
-          alt="logo"
-        />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="text-red-600 text-[28px]"
-          href="https://github.com/tailwindcss/tailwindcss"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn Tailwindcss
-        </a>
-        <button className="mt-6" onClick={() => setCount(count + 1)}>
-          Count: {count}
-        </button>
-      </header>
+    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-4xl font-bold text-center mb-12">12 Tailwind CSS Animations</h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <AnimationCard title="3. Fade In Text" component={<FadeInText />} />
+          <AnimationCard title="4. Slide In Panel" component={<SlideInPanel />} />
+          <AnimationCard title="5. Pulsing Icon" component={<PulsingIcon />} />
+          <AnimationCard title="6. Bouncing Ball" component={<BouncingBall />} />
+          <AnimationCard title="7. Spinning Loader" component={<SpinningLoader />} />
+          <AnimationCard title="8. Pinging Circle" component={<PingingCircle />} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const AnimationCard = ({ title, component }: { title: string, component: React.ReactNode }) => (
+  <div className="bg-white p-6 rounded-lg shadow-md">
+    <h2 className="text-xl font-semibold mb-4">{title}</h2>
+    <div className="flex items-center justify-center h-40">
+      {component}
     </div>
-  );
-};
+  </div>
+)
+
 
-export default App;

examples/tailwind-next/src/index.css

@@ -1 +1 @@
-@import 'tailwindcss';
+@import 'tailwindcss';

examples/tailwind-next/tailwind.config.js

@@ -5,7 +5,72 @@ export default  {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-3deg)' },
+          '50%': { transform: 'rotate(3deg)' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-20px)' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        pulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.5' },
+        },
+        bounce: {
+          '0%, 100%': { transform: 'translateY(-25%)' },
+          '50%': { transform: 'translateY(0)' },
+        },
+        spin: {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
+        ping: {
+          '75%, 100%': { transform: 'scale(2)', opacity: '0' },
+        },
+        scale: {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.5)' },
+        },
+        shake: {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-10px)' },
+          '20%, 40%, 60%, 80%': { transform: 'translateX(10px)' },
+        },
+        rotateY: {
+          '0%': { transform: 'rotateY(0deg)' },
+          '100%': { transform: 'rotateY(360deg)' },
+        },
+        typing: {
+          '0%': { width: '0' },
+          '100%': { width: '100%' },
+        },
+      },
+      animation: {
+        wiggle: 'wiggle 1s ease-in-out infinite',
+        float: 'float 3s ease-in-out infinite',
+        fadeIn: 'fadeIn 1s ease-out',
+        slideIn: 'slideIn 0.5s ease-out',
+        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        bounce: 'bounce 1s infinite',
+        spin: 'spin 1s linear infinite',
+        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+        scale: 'scale 2s ease-in-out infinite',
+        shake: 'shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite',
+        rotateY: 'rotateY 2s linear infinite',
+        typing: 'typing 3.5s steps(40, end) infinite',
+      },
+    },
   },
   plugins: [],
 }

js-plugins/tailwindcss/package.json

@@ -7,7 +7,7 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "npx farm build",
-    "watch": "npx farm watch"
+    "dev": "npx farm watch"
   },
   "keywords": [
     "farm",
@@ -32,4 +32,4 @@
     "@farmfe/js-plugin-dts": "workspace:^",
     "@types/postcss-import": "^14.0.3"
   }
-}
+}

js-plugins/tailwindcss/src/index.ts

@@ -1,17 +1,18 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import { compile } from '@tailwindcss/node';
+import { Scanner } from '@tailwindcss/oxide';
+import { Features, transform } from 'lightningcss';
+import postcss from 'postcss';
+import postcssImport from 'postcss-import';
+
 import type {
   CompilationContext,
   JsPlugin,
   Server,
   UserConfig
 } from '@farmfe/core';
-import { compile } from '@tailwindcss/node';
-
-import fs from 'node:fs/promises';
-import path from 'path';
-import { Scanner } from '@tailwindcss/oxide';
-import { Features, transform } from 'lightningcss';
-import postcss from 'postcss';
-import postcssImport from 'postcss-import';
 
 // like https://github.com/tailwindlabs/tailwindcss/blob/next/packages/%40tailwindcss-vite/src/index.ts
 export default function tailwindcss(): JsPlugin[] {
@@ -90,16 +91,9 @@ export default function tailwindcss(): JsPlugin[] {
     {
       name: 'farm:tailwindcss:scan',
       priority: 100,
-      config(_config) {
+      configResolved(_config) {
         config = _config;
         minify = !!config.compilation?.minify;
-
-        return {
-          // compilation: {
-          //   // TODO: should invalidate entry css file when config changes
-          //   persistentCache: false
-          // }
-        };
       },
       configureDevServer(server) {
         servers.push(server);