feat: V0.3 (#33)

* feat: support rollup (#27) * feat: support webpack (#28) * feat: support webpack * chore: update dep (#31)
eryue0220 · Apr 21, 2024 · 7bd9b10 · 7bd9b10
1 parent 69aef20
commit 7bd9b10
Show file tree

Hide file tree

Showing 26 changed files with 3,372 additions and 853 deletions.
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/package.json b/examples/esbuild-example/package.json
@@ -7,15 +7,15 @@
     "dev": "node scripts/dev.mjs"
   },
   "dependencies": {
-    "@stylexjs/open-props": "^0.5.1",
-    "@stylexjs/stylex": "^0.5.1",
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "unplugin-stylex": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "esbuild": "^0.19.10"
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "esbuild": "^0.19.12"
   }
 }
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/package.json b/examples/rollup-example/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "rollup-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "rollup -c -w",
+    "build": "rollup -c"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-html": "^1.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "rollup": "^4.14.3",
+    "rollup-plugin-serve": "^1.1.1",
+    "unplugin-stylex": "workspace:^"
+  }
+}
diff --git a/examples/rollup-example/public/index.html b/examples/rollup-example/public/index.html
@@ -0,0 +1,26 @@
+<!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>{title}</title>
+    <style>
+        @layer reset {
+            body {
+                box-sizing: border-box;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    </style>
+    {links}
+</head>
+
+<body>
+    <div id="root"></div>
+    {scripts}
+</body>
+
+</html>
diff --git a/examples/rollup-example/rollup.config.js b/examples/rollup-example/rollup.config.js
@@ -0,0 +1,68 @@
+import { readFileSync } from 'fs';
+import nodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import babel from '@rollup/plugin-babel'
+import replace from '@rollup/plugin-replace'
+import html, { makeHtmlAttributes } from '@rollup/plugin-html'
+import serve from 'rollup-plugin-serve'
+import stylexRollupPlugin from 'unplugin-stylex/rollup'
+
+export default {
+  input: 'src/index.jsx',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'iife'
+  },
+  plugins: [
+    nodeResolve({
+      extensions: ['.js', '.jsx']
+    }),
+    commonjs(),
+    babel({
+      babelHelpers: 'bundled',
+      presets: [
+        '@babel/preset-env',
+        '@babel/preset-react'
+      ],
+      extensions: ['.js', '.jsx']
+    }),
+    replace({
+      preventAssignment: false,
+      'process.env.NODE_ENV': '"development"'
+    }),
+    stylexRollupPlugin({
+      dev: true,
+      stylex: {
+        useCSSLayers: true,
+        genConditionalClasses: true,
+        treeshakeCompensation: true,
+      },
+    }),
+    serve({
+      contentBase: ['dist'],
+      host: '127.0.0.1',
+      port: 8081,
+    }),
+    html({
+      publicPath: '/',
+      title: 'Stylex With Rollup',
+      template: ({ attributes, files, publicPath, title }) => {
+        const htmlTemplate = 'public/index.html'
+        const { css, js } = files;
+        const scripts = (js || [])
+          .map(({ fileName }) =>
+            `<script src="${publicPath}${fileName}" ${makeHtmlAttributes(attributes.script)}></script>`
+          )
+          .join('\n')
+        const links = (css || [])
+          .map(({ fileName }) => `<link rel="stylesheet" href="${publicPath}${fileName}" />`)
+          .join('\n')
+        const template = readFileSync(htmlTemplate, 'utf-8')
+        return template
+          .replace(/{title}/g, title)
+          .replace(/{links}/g, links)
+          .replace(/{scripts}/g, scripts)
+      },
+    }),
+  ],
+}
diff --git a/examples/rollup-example/src/index.jsx b/examples/rollup-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/rspack-example/package.json b/examples/rspack-example/package.json
@@ -1,22 +1,23 @@
 {
   "name": "rspack-example",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "rspack serve",
     "build": "rspack build"
   },
   "dependencies": {
-    "@stylexjs/open-props": "^0.5.1",
-    "@stylexjs/stylex": "^0.5.1",
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "unplugin-stylex": "workspace:*"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rspack/cli": "^0.5.4",
-    "@rspack/core": "^0.5.4",
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
-    "html-webpack-plugin": "^5.6.0"
+    "@rspack/cli": "^0.5.9",
+    "@rspack/core": "^0.5.9",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "html-webpack-plugin": "^5.6.0",
+    "unplugin-stylex": "workspace:*"
   }
 }
diff --git a/examples/vite-example/package.json b/examples/vite-example/package.json
@@ -7,16 +7,16 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@stylexjs/open-props": "^0.5.1",
-    "@stylexjs/stylex": "^0.5.1",
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.2.1",
     "unplugin-stylex": "workspace:*",
-    "vite": "^5.0.10"
+    "vite": "^5.2.9"
   }
 }
diff --git a/examples/vue-example/package.json b/examples/vue-example/package.json
@@ -7,16 +7,20 @@
     "build": "vue-tsc && vite build"
   },
   "dependencies": {
-    "@stylexjs/open-props": "^0.5.1",
-    "@stylexjs/stylex": "^0.5.1",
-    "vue": "^3.3.11"
+    "@stylexjs/open-props": "^0.6.0",
+    "@stylexjs/stylex": "^0.6.0",
+    "esbuild-example": "workspace:^",
+    "rollup-example": "^1.0.0",
+    "rspack-example": "workspace:^",
+    "vite-example": "^1.0.39",
+    "vue": "^3.4.23"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
     "unplugin-stylex": "workspace:*",
-    "vite": "^5.0.10",
+    "vite": "^5.2.9",
     "vue-tsc": "^1.8.27"
   }
 }
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({