eryue0220 · eryue0220 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ pnpm i unplugin-stylex --save-dev
 <details>
 <summary>Vite</summary><br>
 
-```ts
+```js
 // vite.config.js
 import { defineConfig } from 'vite'
 import stylexPlugin from 'unplugin-stylex/vite'
@@ -45,7 +45,7 @@ export default defineConfig({
 <details>
 <summary>esbuild</summary><br>
 
-```ts
+```js
 // esbuild.config.js
 import { build } from 'esbuild'
 import stylexPlugin from 'unplugin-stylex/esbuild'
@@ -62,7 +62,7 @@ export default {
 <details>
 <summary>rspack</summary><br>
 
-```ts
+```js
 // rspack.config.js
 import stylexPlugin from 'unplugin-stylex/rspack'
 
@@ -76,6 +76,44 @@ module.exports = {
 
 </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>webpack</summary><br>
+
+```js
+// webpack.config.js
+import stylexWebpackPlugin from 'unplugin-stylex/webpack'
+
+module.exports = {
+  // other webpack config
+  plugins: [
+    stylexWebpackPlugin({ /* options */}),
+  ],
+}
+```
+
+</br></details>
+
+## Usage
+
+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

diff --git a/examples/esbuild-example/index.html b/examples/esbuild-example/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Stylex with Esbuild!</title>
+  <title>Stylex with Esbuild</title>
   <style>
     @layer reset {
       body {

diff --git a/examples/esbuild-example/scripts/dev.mjs b/examples/esbuild-example/scripts/dev.mjs
@@ -10,7 +10,7 @@ await context
     port,
   })
   .then(() => {
-    console.log(`[info]: server start at http:127.0.0.1:${port}.`)
+    console.log(`[info]: server start at http://127.0.0.1:${port}.`)
   })
   .catch((error) => {
     console.error(error)

diff --git a/examples/rollup-example/rollup.config.js b/examples/rollup-example/rollup.config.js
@@ -40,7 +40,7 @@ export default {
     }),
     serve({
       contentBase: ['dist'],
-      host: 'localhost',
+      host: '127.0.0.1',
       port: 8081,
     }),
     html({

diff --git a/examples/vue-example/vite.config.js b/examples/vue-example/vite.config.js
@@ -3,6 +3,9 @@ import vue from '@vitejs/plugin-vue'
 import stylexVitePlugin from 'unplugin-stylex/vite'
 
 export default defineConfig({
+  build: {
+    outDir: 'dist'
+  },
   plugins: [
     vue(),
     stylexVitePlugin({

diff --git a/examples/webpack-example/package.json b/examples/webpack-example/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "webpack-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "NODE_ENV=development webpack serve",
+    "build": "webpack build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "babel-loader": "^9.1.3",
+    "html-webpack-plugin": "^5.6.0",
+    "unplugin-stylex": "workspace:*",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.5.1",
+    "@stylexjs/stylex": "^0.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/examples/webpack-example/public/index.html b/examples/webpack-example/public/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 Webpack</title>
+    <style>
+        @layer reset {
+            body {
+                box-sizing: border-box;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    </style>
+    <link rel="stylesheet" href="stylex.css">
+</head>
+
+<body>
+    <div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/webpack-example/src/index.jsx b/examples/webpack-example/src/index.jsx
@@ -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.getElementById('root')).render(<App />)
diff --git a/examples/webpack-example/webpack.config.js b/examples/webpack-example/webpack.config.js
@@ -0,0 +1,61 @@
+'use strict';
+
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { default: stylexWebpackPlugin } = require('unplugin-stylex/webpack')
+
+const isDev = process.env.NODE_ENV === 'development'
+
+module.exports = {
+  context: __dirname,
+  mode: isDev ? 'development' : 'production',
+  target: 'web',
+  cache: true,
+  entry: {
+    main: './src/index.jsx',
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react'
+            ],
+          },
+        },
+      },
+    ],
+  },
+  devServer: {
+    hot: true,
+    port: 8080,
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000
+  },
+  plugins: [
+    stylexWebpackPlugin({
+      dev: true,
+      stylex: {
+        useCSSLayers: true,
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+    }),
+  ],
+}
diff --git a/jsr.json b/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@eryue0220/unplugin-stylex",
-  "version": "0.2.4",
+  "version": "0.0.3",
   "exports": {
     "./index": "./src/index.ts",
     "./esbuild": "./src/esbuild.ts",

diff --git a/package.json b/package.json
@@ -45,6 +45,11 @@
       "require": "./dist/vite.cjs",
       "import": "./dist/vite.js"
     },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "require": "./dist/webpack.cjs",
+      "import": "./dist/webpack.js"
+    },
     "./types": {
       "types": "./dist/types.d.ts",
       "import": "./dist/types.js",
@@ -75,7 +80,7 @@
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@rollup/pluginutils": "^5.1.0",
     "@stylexjs/babel-plugin": "^0.5.1",
-    "unplugin": "^1.7.1"
+    "unplugin": "^1.10.0"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin-ts": "^1.6.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -27,6 +27,16 @@ export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>
   return {
     name: PLUGIN_NAME,
 
+    transformInclude(id) {
+      // webpack will contain these files, which will occur errors
+      const invalidExts = ['.json', '.html', '.jade', '.json5']
+      const extname = path.extname(id)
+      // for handle vite
+      const questionMarkIndex = extname.indexOf('?')
+      const validExtName = questionMarkIndex > -1 ? extname.slice(0, questionMarkIndex) : extname
+      return !invalidExts.includes(validExtName)
+    },
+
     async transform(code, id) {
       const dir = path.dirname(id)
       const basename = path.basename(id)

diff --git a/src/webpack.ts b/src/webpack.ts
@@ -4,14 +4,24 @@
  * @module
  */
 
-import { isDevelopment } from './core/constants'
-import type { UnpluginStylexOptions } from './types'
+import { createWebpackPlugin } from 'unplugin'
+import type { WebpackPluginInstance } from 'unplugin'
+import { unpluginFactory } from './index'
+import type { UnpluginStylexInstance } from './types'
+
+const webpackPlugin: UnpluginStylexInstance<WebpackPluginInstance> = createWebpackPlugin(unpluginFactory)
 
 /**
- * Note: Current, please use @stylexjs/webpack-plugin
+ * Webpack plugin
+ *
+ * @example
+ *
+ * import stylexPlugin from 'unplugin-stylex/webpack'
+ *
+ * module.exports = {
+ *   plugins: [
+ *     stylexPlugin(),
+ *   ],
+ * }
  */
-export default (options?: UnpluginStylexOptions) => {
-  if (isDevelopment || options?.dev) {
-    throw new Error('If you want to use this plugin through webpack, please use "@stylexjs/webpack-plugin" instead')
-  }
-}
+export default webpackPlugin
diff --git a/test/__snapshots__/rollup.test.ts.snap b/test/__snapshots__/rollup.test.ts.snap
diff --git a/test/__snapshots__/webpack.test.ts.snap b/test/__snapshots__/webpack.test.ts.snap
diff --git a/test/rollup.test.ts b/test/rollup.test.ts
diff --git a/test/webpack.test.ts b/test/webpack.test.ts