feat: refactor unplugin-stylex (#10)

* feat: refactor codebase
eryue0220 · Feb 24, 2024 · a1fe4c7 · a1fe4c7
1 parent 669fdd9
commit a1fe4c7
Show file tree

Hide file tree

Showing 45 changed files with 4,055 additions and 1,067 deletions.
diff --git a/examples/esbuild-example/index.html b/examples/esbuild-example/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Stylex with Esbuild!</title>
+  <style>
+    @layer reset {
+      body {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  </style>
+  <link href="./dist/output.css" rel="stylesheet" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./dist/output.js"></script>
+</body>
+
+</html>
diff --git a/examples/esbuild-example/package.json b/examples/esbuild-example/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "esbuild-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "dev": "node scripts/dev.mjs"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.5.1",
+    "@stylexjs/stylex": "^0.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "unplugin-stylex": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "esbuild": "^0.19.10"
+  }
+}
diff --git a/examples/esbuild-example/scripts/build.mjs b/examples/esbuild-example/scripts/build.mjs
@@ -0,0 +1,4 @@
+import { build } from 'esbuild'
+import { config } from './config.mjs'
+
+await build(config)
diff --git a/examples/esbuild-example/scripts/config.mjs b/examples/esbuild-example/scripts/config.mjs
@@ -0,0 +1,22 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import stylexEsbuildPlugin from 'unplugin-stylex/esbuild'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export const config = {
+  entryPoints: [path.resolve(__dirname, '..', 'src/index.tsx')],
+  bundle: true,
+  outfile: 'dist/output.js',
+  plugins: [
+    stylexEsbuildPlugin({
+      stylex: {
+        useCSSLayers: true,
+        genConditionalClasses: true,
+        treeshakeCompensation: true,
+        stylexImports: ['@stylexjs/stylex'],
+      },
+    })
+  ],
+}
diff --git a/examples/esbuild-example/scripts/core.mjs b/examples/esbuild-example/scripts/core.mjs
@@ -0,0 +1,4 @@
+import esbuild from 'esbuild'
+import { config } from './config.mjs'
+
+export const context = await esbuild.context(config)
diff --git a/examples/esbuild-example/scripts/dev.mjs b/examples/esbuild-example/scripts/dev.mjs
@@ -0,0 +1,17 @@
+import { context } from './core.mjs'
+
+const port = 8000
+
+await context.watch()
+
+await context
+  .serve({
+    servedir: './',
+    port,
+  })
+  .then(() => {
+    console.log(`[info]: server start at http:127.0.0.1:${port}.`)
+  })
+  .catch((error) => {
+    console.error(error)
+  })
diff --git a/examples/esbuild-example/src/index.tsx b/examples/esbuild-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.getElementById('root') as Element).render(<App />)
diff --git a/examples/esbuild/build.js b/examples/esbuild/build.js
diff --git a/examples/esbuild/package.json b/examples/esbuild/package.json
diff --git a/examples/esbuild/src/app.js b/examples/esbuild/src/app.js
diff --git a/examples/esbuild/src/otherTheme.js b/examples/esbuild/src/otherTheme.js
diff --git a/examples/esbuild/src/theme.js b/examples/esbuild/src/theme.js
diff --git a/examples/rspack-example/package.json b/examples/rspack-example/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "rspack-example",
+  "private": true,
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.5.1",
+    "@stylexjs/stylex": "^0.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "unplugin-stylex": "0.1.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"
+  }
+}
diff --git a/examples/rspack/index.html → examples/rspack-example/public/index.html b/examples/rspack/index.html → examples/rspack-example/public/index.html
@@ -6,10 +6,20 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>StyleX with Rspack</title>
+  <style>
+    @layer reset {
+      body {
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  </style>
+  <link rel="stylesheet" href="stylex.css">
 </head>
 
 <body>
-  <div id="app"></div>
+  <div id="root"></div>
 </body>
 
 </html>
diff --git a/examples/rspack-example/rspack.config.js b/examples/rspack-example/rspack.config.js
@@ -0,0 +1,61 @@
+'use strict'
+
+const path = require('path')
+const rspack = require('@rspack/core')
+const { default: stylexRspackPlugin } = require('unplugin-stylex/rspack')
+
+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: /\.jsx?$/,
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'ecmascript',
+              jsx: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+              },
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  devServer: {
+    hot: true,
+    port: 4321,
+  },
+  plugins: [
+    stylexRspackPlugin({
+      dev: isDev,
+      stylex: {
+        useCSSLayers: true,
+      }
+    }),
+    new rspack.HtmlRspackPlugin({
+      template: 'public/index.html',
+    }),
+  ],
+}
diff --git a/examples/rspack-example/src/index.jsx b/examples/rspack-example/src/index.jsx
@@ -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 />)
diff --git a/examples/rspack/package.json b/examples/rspack/package.json