Skip to content

Commit 2a909e7

Browse files
nmnnmn
committed
Add RSPack example that uses unplugin
1 parent 3edff76 commit 2a909e7

File tree

10 files changed

+1467
-116
lines changed

10 files changed

+1467
-116
lines changed

‎examples/example-rspack/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# example-rspack
2+
3+
StyleX with Rspack using `@stylexjs/unplugin`.
4+
5+
Scripts
6+
- `npm run dev`: starts Rspack dev server and opens the app.
7+
- `npm run build`: builds into `dist/` with a single `index.css` that includes StyleX CSS.
8+
9+
Notes
10+
- The example imports `src/global.css` to ensure a CSS asset exists; the StyleX plugin appends aggregated CSS to that extracted file (preferably `index.css`).
11+
- Plugin used in `rspack.config.js` via `require('@stylexjs/unplugin').default()`.
12+

‎examples/example-rspack/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "example-rspack",
3+
"private": true,
4+
"version": "0.0.0",
5+
"description": "Example: StyleX with Rspack via @stylexjs/unplugin",
6+
"scripts": {
7+
"build": "rspack build --config ./rspack.config.js",
8+
"dev": "rspack serve --config ./rspack.config.js --open"
9+
},
10+
"dependencies": {
11+
"react": "^18.3.1",
12+
"react-dom": "^18.3.1",
13+
"@stylexjs/stylex": "0.16.2"
14+
},
15+
"devDependencies": {
16+
"@rspack/cli": "^0.7.0",
17+
"@rspack/core": "^0.7.0",
18+
"css-loader": "^7.1.2",
19+
"@stylexjs/unplugin": "0.16.2"
20+
}
21+
}
22+

‎examples/example-rspack/public/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>StyleX + Rspack</title>
7+
<link rel="stylesheet" href="/index.css" />
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script src="/bundle.js"></script>
12+
</body>
13+
</html>
14+

‎examples/example-rspack/rspack.config.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*
8+
*/
9+
10+
const path = require('path');
11+
const rspack = require('@rspack/core');
12+
const stylex = require('@stylexjs/unplugin').default;
13+
14+
/** @type {import('@rspack/core').Configuration} */
15+
module.exports = {
16+
mode: 'development',
17+
context: __dirname,
18+
entry: {
19+
app: path.resolve(__dirname, 'src/main.jsx'),
20+
},
21+
experiments: {
22+
// Disable built-in CSS experiment when using extract plugin
23+
css: false,
24+
},
25+
output: {
26+
path: path.resolve(__dirname, 'dist'),
27+
filename: 'bundle.js',
28+
clean: true,
29+
},
30+
resolve: {
31+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
32+
},
33+
module: {
34+
rules: [
35+
{
36+
test: /\.[jt]sx?$/,
37+
exclude: /node_modules/,
38+
loader: 'builtin:swc-loader',
39+
options: {
40+
jsc: {
41+
parser: { syntax: 'ecmascript', jsx: true },
42+
transform: { react: { runtime: 'automatic' } },
43+
},
44+
},
45+
},
46+
{
47+
test: /\.css$/,
48+
use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
49+
},
50+
],
51+
},
52+
plugins: [
53+
// Use the unplugin adapter for Rspack/webpack
54+
stylex.rspack({}),
55+
new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),
56+
],
57+
devServer: {
58+
static: {
59+
directory: path.join(__dirname, 'public'),
60+
},
61+
port: 5174,
62+
},
63+
};

‎examples/example-rspack/src/App.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import * as stylex from '@stylexjs/stylex';
9+
10+
const styles = stylex.create({
11+
app: {
12+
minHeight: '100vh',
13+
display: 'grid',
14+
placeItems: 'center',
15+
backgroundColor: '#f7f5ff',
16+
},
17+
title: {
18+
color: 'rebeccapurple',
19+
fontSize: 32,
20+
fontWeight: 700,
21+
},
22+
});
23+
24+
export default function App() {
25+
return (
26+
<main {...stylex.props(styles.app)}>
27+
<h1 {...stylex.props(styles.title)}>StyleX + Rspack + unplugin</h1>
28+
</main>
29+
);
30+
}

‎examples/example-rspack/src/global.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* Ensure Rspack produces a CSS asset to inject StyleX into */
2+
:root {
3+
--brand-color: #663399;
4+
}
5+
6+
body {
7+
margin: 0;
8+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
9+
Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji,
10+
Segoe UI Symbol;
11+
}
12+

‎examples/example-rspack/src/main.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
import './global.css';
8+
import React from 'react';
9+
import { createRoot } from 'react-dom/client';
10+
import App from './App.jsx';
11+
12+
const root = createRoot(document.getElementById('root'));
13+
root.render(<App />);
14+

0 commit comments

Comments
 (0)