fix: resolve build error

.npmignore

@@ -3,9 +3,16 @@
 .pnp
 .pnp.js
 .idea
+.eslintignore
+.eslintrc.json
 .eslintcache
+.github
+
+typos.toml
+vitest.config.ts
 
 /examples
 /node_modules
+/src
 /test
 /coverage

README.md

@@ -1,5 +1,8 @@
 # unplugin-stylex · [![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
@@ -22,6 +25,23 @@ pnpm i unplugin-stylex --save-dev
 
 ## Configuration
 
+<details>
+<summary>Vite</summary><br>
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import stylexPlugin from 'unplugin-stylex/vite'
+
+export default defineConfig({
+  plugins: [
+    stylexPlugin({ /* options */}),
+  ],
+})
+```
+
+</br></details>
+
 <details>
 <summary>esbuild</summary><br>
 
@@ -57,23 +77,6 @@ export default defineConfig({
 
 </br></details>
 
-<details>
-<summary>rollup</summary><br>
-
-```js
-// rollup.config.js
-import stylexRollupPlugin from 'unplugin-stylex/rollup'
-
-export default {
-  // other rollup config
-  plugins: [
-    stylexRollupPlugin({ /* options */}),
-  ],
-}
-```
-
-</br></details>
-
 <details>
 <summary>rspack</summary><br>
 
@@ -92,18 +95,18 @@ module.exports = {
 </br></details>
 
 <details>
-<summary>vite</summary><br>
+<summary>rollup</summary><br>
 
 ```js
-// vite.config.js
-import { defineConfig } from 'vite'
-import stylexPlugin from 'unplugin-stylex/vite'
+// rollup.config.js
+import stylexRollupPlugin from 'unplugin-stylex/rollup'
 
-export default defineConfig({
+export default {
+  // other rollup config
   plugins: [
-    stylexPlugin({ /* options */}),
+    stylexRollupPlugin({ /* options */}),
   ],
-})
+}
 ```
 
 </br></details>
@@ -127,16 +130,14 @@ module.exports = {
 
 ## Usage
 
-More detail usages can check [examples](https://github.com/eryue0220/unplugin-stylex/tree/main/examples)
+More detail usage 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

examples/farm-example/farm.config.js

@@ -12,8 +12,17 @@ export default defineConfig({
       targetEnv: 'browser'
     },
   },
+  server: {
+    hmr: true,
+  },
   plugins: [
-    '@farmfe/plugin-react',
-    stylexFarmPlugin({ dev: true }),
+    ['@farmfe/plugin-react', {
+      refresh: true,
+      development: true,
+      runtime: 'automatic',
+    }],
+    stylexFarmPlugin({
+      dev: true,
+    }),
   ],
-});
+})

examples/farm-example/src/index.tsx

@@ -1,4 +1,3 @@
-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'
@@ -36,4 +35,4 @@ function App() {
   )
 }
 
-createRoot(document.querySelector('#root')!).render(<App />)
+createRoot(document.getElementById('root')!).render(<App />)

examples/farm-example/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

examples/rsbuild-example/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "rsbuild-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.6.13",
+    "@rsbuild/plugin-react": "^0.6.13",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "html-webpack-plugin": "^5.6.0",
+    "unplugin-stylex": "workspace:*"
+  }
+}

examples/rsbuild-example/public/index.html

@@ -0,0 +1,23 @@
+<!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 Rsbuild</title>
+    <style>
+        body {
+            box-sizing: border-box;
+            padding: 0;
+            margin: 0;
+        }
+    </style>
+    <link rel="stylesheet" href="stylex.css">
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>

examples/rsbuild-example/rsbuild.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import stylexPlugin from 'unplugin-stylex/rspack';
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+  ],
+  html: {
+    template: './public/index.html',
+  },
+  tools: {
+    rspack: {
+      plugins: [
+        stylexPlugin({
+          dev: true,
+          stylex: {
+            useCSSLayers: true,
+            genConditionalClasses: true,
+            treeshakeCompensation: true,
+          },
+        }),
+      ],
+    },
+  },
+});

examples/vite-example/src/index.jsx → examples/rsbuild-example/src/index.tsx

@@ -35,4 +35,4 @@ function App() {
   )
 }
 
-createRoot(document.getElementById('root')).render(<App />)
+createRoot(document.getElementById('root')!).render(<App />)

examples/rsbuild-example/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}

examples/vite-example/index.html

@@ -18,6 +18,6 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/index.jsx"></script>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 </html>

examples/vite-example/src/index.tsx

@@ -0,0 +1,38 @@
+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.getElementById('root')!).render(<App />)

examples/vite-example/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@eryue0220/unplugin-stylex",
-  "version": "0.0.3",
+  "version": "0.4.0",
   "exports": {
     "./index": "./src/index.ts",
     "./esbuild": "./src/esbuild.ts",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-stylex",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "packageManager": "pnpm@8.11.0",
   "description": "Unplugin for stylex",
   "repository": "https://github.com/eryue0220/unplugin-stylex",
@@ -80,7 +80,7 @@
     "@stylexjs/stylex": "^0.5.1"
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-syntax-flow": "^7.24.1",
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@babel/plugin-syntax-typescript": "^7.24.1",
@@ -89,16 +89,16 @@
     "unplugin": "^1.10.1"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin-ts": "^1.7.2",
-    "@types/node": "^20.12.7",
+    "@stylistic/eslint-plugin-ts": "^1.8.1",
+    "@types/node": "^20.12.11",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitest/coverage-v8": "^1.5.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "babel-plugin-syntax-hermes-parser": "^0.19.2",
     "eslint": "^8.57.0",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vitest": "^1.5.0"
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0"
   }
 }