feat: support rollup (#27)

eryue0220 · Mar 22, 2024 · 24efb19 · 24efb19
1 parent 69aef20
commit 24efb19
Show file tree

Hide file tree

Showing 9 changed files with 2,244 additions and 109 deletions.
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.5.1",
+    "@stylexjs/stylex": "^0.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.24.3",
+    "@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.13.0",
+    "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: 'localhost',
+      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,5 +1,6 @@
 {
   "name": "rspack-example",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "rspack serve",
@@ -9,14 +10,14 @@
     "@stylexjs/open-props": "^0.5.1",
     "@stylexjs/stylex": "^0.5.1",
     "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"
+    "html-webpack-plugin": "^5.6.0",
+    "unplugin-stylex": "workspace:*"
   }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "unplugin-stylex",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "packageManager": "[email protected]",
   "description": "Unplugin for stylex",
   "repository": "https://github.com/eryue0220/unplugin-stylex",
@@ -9,6 +9,7 @@
     "stylex",
     "stylex-plugin",
     "esbuild",
+    "rollup",
     "rspack",
     "vite"
   ],
@@ -29,16 +30,21 @@
       "require": "./dist/esbuild.cjs",
       "import": "./dist/esbuild.js"
     },
-    "./vite": {
-      "types": "./dist/vite.d.ts",
-      "require": "./dist/vite.cjs",
-      "import": "./dist/vite.js"
+    "./rollup": {
+      "types": "./dist/rollup.d.ts",
+      "require": "./dist/rollup.cjs",
+      "import": "./dist/rollup.js"
     },
     "./rspack": {
       "types": "./dist/rspack.d.ts",
       "require": "./dist/rspack.cjs",
       "import": "./dist/rspack.js"
     },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.js"
+    },
     "./types": {
       "types": "./dist/types.d.ts",
       "import": "./dist/types.js",