feat: support farm

eryue0220 · Mar 22, 2024 · ab98571 · ab98571
1 parent e74087c
commit ab98571
Show file tree

Hide file tree

Showing 10 changed files with 1,093 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,5 @@
 # unplugin-stylex &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/eryue0220/unplugin-stylex/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/unplugin-stylex.svg?style=flat)](https://www.npmjs.com/package/unplugin-stylex)
 
-> [!WARNING]  
-> This plugin is in early development and may not work as expected. Please report any issues you find.
-
 ## Installation
 
 Install the package from the following command
@@ -26,14 +23,32 @@ pnpm i unplugin-stylex --save-dev
 ## Configuration
 
 <details>
-<summary>Vite</summary><br>
+<summary>esbuild</summary><br>
 
 ```js
-// vite.config.js
-import { defineConfig } from 'vite'
-import stylexPlugin from 'unplugin-stylex/vite'
+// esbuild.config.js
+import { build } from 'esbuild'
+import stylexPlugin from 'unplugin-stylex/esbuild'
+
+export default {
+  plugins: [
+    stylexPlugin({ /* options */ }),
+  ],
+}
+```
+
+</br></details>
+
+<details>
+<summary>farm</summary><br>
+
+```js
+// farm.config.js
+import { defineConfig } from '@farmfe/core'
+import stylexPlugin from 'unplugin-stylex/farm'
 
 export default defineConfig({
+  // other rollup config
   plugins: [
     stylexPlugin({ /* options */}),
   ],
@@ -43,16 +58,16 @@ export default defineConfig({
 </br></details>
 
 <details>
-<summary>esbuild</summary><br>
+<summary>rollup</summary><br>
 
 ```js
-// esbuild.config.js
-import { build } from 'esbuild'
-import stylexPlugin from 'unplugin-stylex/esbuild'
+// rollup.config.js
+import stylexRollupPlugin from 'unplugin-stylex/rollup'
 
 export default {
+  // other rollup config
   plugins: [
-    stylexPlugin({ /* options */ }),
+    stylexRollupPlugin({ /* options */}),
   ],
 }
 ```
@@ -77,18 +92,18 @@ module.exports = {
 </br></details>
 
 <details>
-<summary>rollup</summary><br>
+<summary>vite</summary><br>
 
 ```js
-// rollup.config.js
-import stylexRollupPlugin from 'unplugin-stylex/rollup'
+// vite.config.js
+import { defineConfig } from 'vite'
+import stylexPlugin from 'unplugin-stylex/vite'
 
-export default {
-  // other rollup config
+export default defineConfig({
   plugins: [
-    stylexRollupPlugin({ /* options */}),
+    stylexPlugin({ /* options */}),
   ],
-}
+})
 ```
 
 </br></details>
@@ -112,14 +127,16 @@ module.exports = {
 
 ## Usage
 
-More detail usage can check [examples](https://github.com/eryue0220/unplugin-stylex/tree/main/examples)
+More detail usages can check [examples](https://github.com/eryue0220/unplugin-stylex/tree/main/examples)
 
 ## Options
 
 Current support argument, which may have change in the future
 
 ### options.dev
 
+### options.stylex
+
 #### options.stylex.runtimeInjection
 
 #### options.stylex.classNamePrefix

diff --git a/examples/farm-example/farm.config.js b/examples/farm-example/farm.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from '@farmfe/core'
+import stylexFarmPlugin from 'unplugin-stylex/farm'
+
+export default defineConfig({
+  plugins: [
+    '@farmfe/plugin-react',
+    stylexFarmPlugin({
+      dev: true,
+      stylex: {
+        useCSSLayers: true,
+        genConditionalClasses: true,
+        treeshakeCompensation: true,
+      },
+    }),
+  ],
+});
diff --git a/examples/farm-example/index.html b/examples/farm-example/index.html
@@ -0,0 +1,25 @@
+<!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>StyleX with Farm</title>
+    <style>
+        @layer reset {
+            body {
+                box-sizing: border-box;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/examples/farm-example/package.json b/examples/farm-example/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "farm-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "farm start",
+    "build": "farm build"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.5.1",
+    "@stylexjs/stylex": "^0.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@farmfe/cli": "^1.0.0",
+    "@farmfe/core": "^1.0.2",
+    "@farmfe/plugin-react": "^1.0.0",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "react-refresh": "^0.14.0",
+    "unplugin-stylex": "workspace:*"
+  }
+}
diff --git a/examples/farm-example/src/index.tsx b/examples/farm-example/src/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client'
+import * as stylex from '@stylexjs/stylex'
+import { colors } from '@stylexjs/open-props/lib/colors.stylex'
+import { sizes } from '@stylexjs/open-props/lib/sizes.stylex'
+import { fonts } from '@stylexjs/open-props/lib/fonts.stylex'
+
+const styles = stylex.create({
+  main: {
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.pink7,
+  },
+  card: {
+    backgroundColor: colors.blue9,
+    padding: sizes.spacing5,
+    borderRadius: sizes.spacing2,
+    justifyContent: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.gray0,
+    fontFamily: fonts.mono,
+  },
+})
+
+function App() {
+  return (
+    <div {...stylex.props(styles.main)}>
+      <div {...stylex.props(styles.card)}>
+        <span>Blue rounded rectangle</span>
+      </div>
+    </div>
+  )
+}
+
+createRoot(document.querySelector('#root')!).render(<App />)
diff --git a/jsr.json b/jsr.json
@@ -4,6 +4,7 @@
   "exports": {
     "./index": "./src/index.ts",
     "./esbuild": "./src/esbuild.ts",
+    "./farm": "./src/farm.ts",
     "./rollup": "./src/rollup.ts",
     "./rspack": "./src/rspack.ts",
     "./vite": "./src/vite.ts",

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "unplugin",
     "stylex",
     "stylex-plugin",
+    "farm",
     "esbuild",
     "rollup",
     "rspack",
@@ -30,6 +31,11 @@
       "require": "./dist/esbuild.cjs",
       "import": "./dist/esbuild.js"
     },
+    "./farm": {
+      "types": "./dist/farm.d.ts",
+      "require": "./dist/farm.cjs",
+      "import": "./dist/farm.js"
+    },
     "./rollup": {
       "types": "./dist/rollup.d.ts",
       "require": "./dist/rollup.cjs",