Skip to content

Commit d25522c

Browse files
eryue0220eryue0220
authored
Merge pull request #32 from eryue0220/feat/support-farm
feat: support farm
2 parents 0f9d08f + 297b47a commit d25522c

File tree

16 files changed

+7183
-5075
lines changed

16 files changed

+7183
-5075
lines changed

‎README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,24 @@ export default {
5959

6060
</br></details>
6161

62+
<details>
63+
<summary>farm</summary><br>
64+
65+
```js
66+
// farm.config.js
67+
import { defineConfig } from '@farmfe/core'
68+
import stylexPlugin from 'unplugin-stylex/farm'
69+
70+
export default defineConfig({
71+
// other rollup config
72+
plugins: [
73+
stylexPlugin({ /* options */}),
74+
],
75+
})
76+
```
77+
78+
</br></details>
79+
6280
<details>
6381
<summary>rspack</summary><br>
6482

‎examples/farm-example/farm.config.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { defineConfig } from '@farmfe/core'
2+
import stylexFarmPlugin from 'unplugin-stylex/farm'
3+
4+
export default defineConfig({
5+
compilation: {
6+
input: {
7+
index: './index.html'
8+
},
9+
output: {
10+
path: 'dist',
11+
publicPath: '/',
12+
targetEnv: 'browser'
13+
},
14+
},
15+
server: {
16+
hmr: true,
17+
},
18+
plugins: [
19+
['@farmfe/plugin-react', {
20+
refresh: true,
21+
development: true,
22+
runtime: 'automatic',
23+
}],
24+
stylexFarmPlugin({
25+
dev: true,
26+
stylex: {
27+
useCSSLayers: true,
28+
// this must set `true` in farm
29+
treeshakeCompensation: true,
30+
},
31+
}),
32+
],
33+
})

‎examples/farm-example/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>StyleX with Farm</title>
9+
<style>
10+
@layer reset {
11+
body {
12+
box-sizing: border-box;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div id="root"></div>
22+
<script type="module" src="./src/index.tsx"></script>
23+
</body>
24+
25+
</html>

‎examples/farm-example/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "farm-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "farm start",
8+
"build": "farm build"
9+
},
10+
"dependencies": {
11+
"@stylexjs/open-props": "^0.6.0",
12+
"@stylexjs/stylex": "^0.6.0",
13+
"react": "^18.2.0",
14+
"react-dom": "^18.2.0"
15+
},
16+
"devDependencies": {
17+
"@farmfe/cli": "^1.0.0",
18+
"@farmfe/core": "^1.0.22",
19+
"@farmfe/plugin-react": "^1.0.1",
20+
"@types/react": "^18.2.79",
21+
"@types/react-dom": "^18.2.25",
22+
"react-refresh": "^0.14.0",
23+
"unplugin-stylex": "workspace:*"
24+
}
25+
}

‎examples/vite-example/src/index.jsx renamed to ‎examples/farm-example/src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ function App() {
3535
)
3636
}
3737

38-
createRoot(document.getElementById('root')).render(<App />)
38+
createRoot(document.getElementById('root')!).render(<App />)

‎examples/farm-example/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"checkJs": true,
5+
"jsx": "react-jsx",
6+
"module": "ESNext",
7+
"moduleResolution": "Bundler"
8+
},
9+
"include": ["src"],
10+
"exclude": ["node_modules"]
11+
}

‎examples/vite-example/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@
1818

1919
<body>
2020
<div id="root"></div>
21-
<script type="module" src="/src/index.jsx"></script>
21+
<script type="module" src="/src/index.tsx"></script>
2222
</body>
2323
</html>

‎examples/vite-example/src/index.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { createRoot } from 'react-dom/client'
2+
import * as stylex from '@stylexjs/stylex'
3+
import { colors } from '@stylexjs/open-props/lib/colors.stylex'
4+
import { sizes } from '@stylexjs/open-props/lib/sizes.stylex'
5+
import { fonts } from '@stylexjs/open-props/lib/fonts.stylex'
6+
7+
const styles = stylex.create({
8+
main: {
9+
width: '100vw',
10+
height: '100vh',
11+
display: 'flex',
12+
alignItems: 'center',
13+
justifyContent: 'center',
14+
backgroundColor: colors.pink7,
15+
},
16+
card: {
17+
backgroundColor: colors.blue9,
18+
padding: sizes.spacing5,
19+
borderRadius: sizes.spacing2,
20+
justifyContent: 'center',
21+
display: 'flex',
22+
alignItems: 'center',
23+
color: colors.gray0,
24+
fontFamily: fonts.mono,
25+
},
26+
})
27+
28+
function App() {
29+
return (
30+
<div {...stylex.props(styles.main)}>
31+
<div {...stylex.props(styles.card)}>
32+
<span>Blue rounded rectangle</span>
33+
</div>
34+
</div>
35+
)
36+
}
37+
38+
createRoot(document.getElementById('root')!).render(<App />)

‎examples/vite-example/tsconfig.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"lib": ["DOM", "ES2020"],
5+
"module": "ESNext",
6+
"jsx": "react-jsx",
7+
"strict": true,
8+
"skipLibCheck": true,
9+
"isolatedModules": true,
10+
"resolveJsonModule": true,
11+
"moduleResolution": "bundler",
12+
"useDefineForClassFields": true
13+
},
14+
"include": ["src"],
15+
"exclude": ["node_modules"]
16+
}

‎jsr.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
22
"name": "@eryue0220/unplugin-stylex",
3-
"version": "0.3.2",
3+
"version": "0.4.0",
44
"exports": {
55
"./index": "./src/index.ts",
66
"./esbuild": "./src/esbuild.ts",
7+
"./farm": "./src/farm.ts",
78
"./rollup": "./src/rollup.ts",
89
"./rspack": "./src/rspack.ts",
910
"./vite": "./src/vite.ts",

0 commit comments

Comments
 (0)