feat: tailwindcss experience (#2015)

* feat: support tailwindcss * feat: remove unuse code && add tailwind-next example * feat: usage invalidateModule remove css module cache * feat: upgrade tailwindcss version * test: e2e server instance use random port
farm-fe · Dec 23, 2024 · 83fb24e · 83fb24e
1 parent 7481a23
commit 83fb24e
Show file tree

Hide file tree

Showing 26 changed files with 1,197 additions and 276 deletions.
diff --git a/.changeset/nine-dots-mate.md b/.changeset/nine-dots-mate.md
@@ -0,0 +1,5 @@
+---
+"@farmfe/js-plugin-tailwindcss": patch
+---
+
+feat: support tailwindcss plugin
diff --git a/cspell.json b/cspell.json
@@ -94,6 +94,7 @@
     "Kostiantyn",
     "libfarmfe",
     "libloading",
+    "lightningcss",
     "linebpos",
     "linechpos",
     "loglevel",

diff --git a/e2e/vitestGlobalSetup.ts b/e2e/vitestGlobalSetup.ts
@@ -2,30 +2,19 @@ import type { GlobalSetupContext } from 'vitest/node';
 import { chromium } from 'playwright-chromium';
 import type { BrowserServer } from 'playwright-chromium';
 import { createServer, Server } from 'http';
+import getPort from 'get-port';
 
 let browserServer: BrowserServer | undefined;
 let client: Server | undefined;
 
-let port = 23000;
-
-function addPort() {
-  return (port += 10);
-}
-
-function setPort(_port: number) {
-  return (port = _port);
-}
-
-setPort(9100);
-
 export async function setup({ provide }: GlobalSetupContext): Promise<void> {
   browserServer = await chromium.launchServer({
     headless: true
   });
 
-  client = createServer((req, res) => {
+  client = createServer(async (req, res) => {
     if (req.url.startsWith('/port')) {
-      res.end(addPort().toString());
+      res.end((await getPort()).toString());
       return;
     }
     // not found path

diff --git a/examples/tailwind-next/.eslintrc.json b/examples/tailwind-next/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "root": true,
+  "extends": "../../.eslintrc.base.json",
+  "parserOptions": {
+    "project": ["./examples/tailwind/tsconfig.json"]
+  },
+  "rules": {}
+}
diff --git a/examples/tailwind-next/.gitignore b/examples/tailwind-next/.gitignore
@@ -0,0 +1,3 @@
+dist
+build
+node_modules
diff --git a/examples/tailwind-next/.postcssrc b/examples/tailwind-next/.postcssrc
@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}
diff --git a/examples/tailwind-next/assets/feature.svg b/examples/tailwind-next/assets/feature.svg
diff --git a/examples/tailwind-next/assets/light.svg b/examples/tailwind-next/assets/light.svg
diff --git a/examples/tailwind-next/assets/logo.png b/examples/tailwind-next/assets/logo.png
diff --git a/examples/tailwind-next/assets/plugin.svg b/examples/tailwind-next/assets/plugin.svg
diff --git a/examples/tailwind-next/farm.config.ts b/examples/tailwind-next/farm.config.ts
@@ -0,0 +1,29 @@
+import type { UserConfig } from "@farmfe/core";
+// import farmPostcssPlugin from '@farmfe/js-plugin-postcss';
+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,
+  },
+  plugins: [
+    "@farmfe/plugin-react",
+    tailwind()
+  ],
+});
diff --git a/examples/tailwind-next/index.html b/examples/tailwind-next/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="./src/index.tsx"></script>
+</body>
+</html>
diff --git a/examples/tailwind-next/package.json b/examples/tailwind-next/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@farmfe-examples/tailwind-next",
+  "version": "0.0.2",
+  "private": true,
+  "dependencies": {
+    "@farmfe/js-plugin-tailwindcss": "workspace:^",
+    "clsx": "^1.2.1",
+    "core-js": "^3.30.1",
+    "react": "18",
+    "react-dom": "18"
+  },
+  "devDependencies": {
+    "@farmfe/cli": "workspace:*",
+    "@farmfe/core": "workspace:*",
+    "@farmfe/js-plugin-postcss": "workspace:*",
+    "@farmfe/plugin-react": "workspace:*",
+    "@types/react": "18",
+    "@types/react-dom": "18",
+    "autoprefixer": "^10.4.14",
+    "react-refresh": "^0.14.0",
+    "tailwindcss": "4.0.0-alpha.26"
+  },
+  "scripts": {
+    "start": "farm start",
+    "build": "farm build",
+    "preview": "farm preview"
+  }
+}
diff --git a/examples/tailwind-next/src/App.tsx b/examples/tailwind-next/src/App.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import logo from './logo.svg?url';
+import { useState } from 'react';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  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>
+  );
+};
+
+export default App;
diff --git a/examples/tailwind-next/src/index.css b/examples/tailwind-next/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/examples/tailwind-next/src/index.tsx b/examples/tailwind-next/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+const container = document.querySelector('#root');
+const root = createRoot(container);
+
+root.render(<App />);
diff --git a/examples/tailwind-next/src/logo.svg b/examples/tailwind-next/src/logo.svg
diff --git a/examples/tailwind-next/src/typings.d.ts b/examples/tailwind-next/src/typings.d.ts
@@ -0,0 +1,3 @@
+declare module '*.svg';
+declare module '*.css';
+declare module '*.png';
diff --git a/examples/tailwind-next/tailwind.config.js b/examples/tailwind-next/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default  {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/examples/tailwind-next/tsconfig.json b/examples/tailwind-next/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src", "farm.config.ts"]
+}
diff --git a/js-plugins/tailwindcss/farm.config.ts b/js-plugins/tailwindcss/farm.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from '@farmfe/core';
+import dts from '@farmfe/js-plugin-dts';
+
+export default defineConfig({
+  compilation: {
+    input: {
+      index: './src/index.ts'
+    },
+    output: {
+      targetEnv: 'node',
+      format: 'esm'
+    },
+    external: ['@farmfe/core', '@tailwindcss/oxide', 'lightningcss'],
+    resolve: {
+      autoExternalFailedResolve: true,
+      dedupe: ['tailwindcss']
+    },
+    mode: 'development',
+    minify: false,
+    lazyCompilation: false,
+    treeShaking: false
+  },
+  plugins: [dts()]
+});
diff --git a/js-plugins/tailwindcss/package.json b/js-plugins/tailwindcss/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@farmfe/js-plugin-tailwindcss",
+  "version": "0.0.1",
+  "description": "support tailwindcss for farm.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "npx farm build",
+    "watch": "npx farm watch"
+  },
+  "keywords": [
+    "farm",
+    "@farmfe/core",
+    "farmfe",
+    "tailwindcss",
+    "css",
+    "atomic"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@farmfe/core": "workspace:^",
+    "@tailwindcss/node": "4.0.0-beta.8",
+    "@tailwindcss/oxide": "4.0.0-beta.8",
+    "lightningcss": "^1.27.0",
+    "postcss": "^8.4.47",
+    "postcss-import": "^16.0.1",
+    "tailwindcss": "4.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@farmfe/js-plugin-dts": "workspace:^",
+    "@types/postcss-import": "^14.0.3"
+  }
+}