Skip to content

Commit a1fe4c7

Browse files
eryue0220eryue0220
authored
feat: refactor unplugin-stylex (#10)
* feat: refactor codebase
1 parent 669fdd9 commit a1fe4c7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+4055
-1067
lines changed

‎examples/esbuild-example/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<title>Stylex with Esbuild!</title>
8+
<style>
9+
@layer reset {
10+
body {
11+
box-sizing: border-box;
12+
padding: 0;
13+
margin: 0;
14+
}
15+
}
16+
</style>
17+
<link href="./dist/output.css" rel="stylesheet" />
18+
</head>
19+
20+
<body>
21+
<div id="root"></div>
22+
<script type="module" src="./dist/output.js"></script>
23+
</body>
24+
25+
</html>

‎examples/esbuild-example/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "esbuild-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"build": "node scripts/build.mjs",
7+
"dev": "node scripts/dev.mjs"
8+
},
9+
"dependencies": {
10+
"@stylexjs/open-props": "^0.5.1",
11+
"@stylexjs/stylex": "^0.5.1",
12+
"react": "^18.2.0",
13+
"react-dom": "^18.2.0",
14+
"unplugin-stylex": "latest"
15+
},
16+
"devDependencies": {
17+
"@types/react": "^18.2.56",
18+
"@types/react-dom": "^18.2.19",
19+
"esbuild": "^0.19.10"
20+
}
21+
}

‎examples/esbuild-example/scripts/build.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { build } from 'esbuild'
2+
import { config } from './config.mjs'
3+
4+
await build(config)

‎examples/esbuild-example/scripts/config.mjs

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import path from 'path'
2+
import { fileURLToPath } from 'url'
3+
import stylexEsbuildPlugin from 'unplugin-stylex/esbuild'
4+
5+
const __filename = fileURLToPath(import.meta.url)
6+
const __dirname = path.dirname(__filename)
7+
8+
export const config = {
9+
entryPoints: [path.resolve(__dirname, '..', 'src/index.tsx')],
10+
bundle: true,
11+
outfile: 'dist/output.js',
12+
plugins: [
13+
stylexEsbuildPlugin({
14+
stylex: {
15+
useCSSLayers: true,
16+
genConditionalClasses: true,
17+
treeshakeCompensation: true,
18+
stylexImports: ['@stylexjs/stylex'],
19+
},
20+
})
21+
],
22+
}

‎examples/esbuild-example/scripts/core.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import esbuild from 'esbuild'
2+
import { config } from './config.mjs'
3+
4+
export const context = await esbuild.context(config)

‎examples/esbuild-example/scripts/dev.mjs

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { context } from './core.mjs'
2+
3+
const port = 8000
4+
5+
await context.watch()
6+
7+
await context
8+
.serve({
9+
servedir: './',
10+
port,
11+
})
12+
.then(() => {
13+
console.log(`[info]: server start at http:127.0.0.1:${port}.`)
14+
})
15+
.catch((error) => {
16+
console.error(error)
17+
})

‎examples/esbuild-example/src/index.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
import { createRoot } from 'react-dom/client'
3+
import * as stylex from '@stylexjs/stylex'
4+
import { colors } from '@stylexjs/open-props/lib/colors.stylex'
5+
import { sizes } from '@stylexjs/open-props/lib/sizes.stylex'
6+
import { fonts } from '@stylexjs/open-props/lib/fonts.stylex'
7+
8+
const styles = stylex.create({
9+
main: {
10+
width: '100vw',
11+
height: '100vh',
12+
display: 'flex',
13+
alignItems: 'center',
14+
justifyContent: 'center',
15+
backgroundColor: colors.pink7,
16+
},
17+
card: {
18+
backgroundColor: colors.blue9,
19+
padding: sizes.spacing5,
20+
borderRadius: sizes.spacing2,
21+
justifyContent: 'center',
22+
display: 'flex',
23+
alignItems: 'center',
24+
color: colors.gray0,
25+
fontFamily: fonts.mono,
26+
},
27+
})
28+
29+
function App() {
30+
return (
31+
<div {...stylex.props(styles.main)}>
32+
<div {...stylex.props(styles.card)}>
33+
<span>Blue rounded rectangle</span>
34+
</div>
35+
</div>
36+
)
37+
}
38+
39+
createRoot(document.getElementById('root') as Element).render(<App />)

‎examples/esbuild/build.js

-20
This file was deleted.

‎examples/esbuild/package.json

-15
This file was deleted.

‎examples/esbuild/src/app.js

-29
This file was deleted.

‎examples/esbuild/src/otherTheme.js

-10
This file was deleted.

‎examples/esbuild/src/theme.js

-11
This file was deleted.

‎examples/rspack-example/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "rspack-example",
3+
"private": true,
4+
"scripts": {
5+
"dev": "rspack serve",
6+
"build": "rspack build"
7+
},
8+
"dependencies": {
9+
"@stylexjs/open-props": "^0.5.1",
10+
"@stylexjs/stylex": "^0.5.1",
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"unplugin-stylex": "0.1.0"
14+
},
15+
"devDependencies": {
16+
"@rspack/cli": "^0.5.4",
17+
"@rspack/core": "^0.5.4",
18+
"@types/react": "^18.2.56",
19+
"@types/react-dom": "^18.2.19",
20+
"html-webpack-plugin": "^5.6.0"
21+
}
22+
}

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

+11-1
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,20 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>StyleX with Rspack</title>
9+
<style>
10+
@layer reset {
11+
body {
12+
box-sizing: border-box;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
}
17+
</style>
18+
<link rel="stylesheet" href="stylex.css">
919
</head>
1020

1121
<body>
12-
<div id="app"></div>
22+
<div id="root"></div>
1323
</body>
1424

1525
</html>

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
'use strict'
2+
3+
const path = require('path')
4+
const rspack = require('@rspack/core')
5+
const { default: stylexRspackPlugin } = require('unplugin-stylex/rspack')
6+
7+
const isDev = process.env.NODE_ENV === 'development'
8+
9+
module.exports = {
10+
context: __dirname,
11+
mode: isDev ? 'development' : 'production',
12+
target: 'web',
13+
cache: true,
14+
entry: {
15+
main: './src/index.jsx',
16+
},
17+
output: {
18+
path: path.resolve(__dirname, 'dist'),
19+
filename: 'bundle.js',
20+
},
21+
resolve: {
22+
extensions: ['.js', '.jsx'],
23+
},
24+
module: {
25+
rules: [
26+
{
27+
test: /\.jsx?$/,
28+
loader: 'builtin:swc-loader',
29+
options: {
30+
jsc: {
31+
parser: {
32+
syntax: 'ecmascript',
33+
jsx: true,
34+
},
35+
transform: {
36+
react: {
37+
runtime: 'automatic',
38+
},
39+
},
40+
},
41+
},
42+
type: 'javascript/auto',
43+
},
44+
],
45+
},
46+
devServer: {
47+
hot: true,
48+
port: 4321,
49+
},
50+
plugins: [
51+
stylexRspackPlugin({
52+
dev: isDev,
53+
stylex: {
54+
useCSSLayers: true,
55+
}
56+
}),
57+
new rspack.HtmlRspackPlugin({
58+
template: 'public/index.html',
59+
}),
60+
],
61+
}

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

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { createRoot } from 'react-dom/client'
2+
import * as stylex from '@stylexjs/stylex'
3+
import { colors } from '@stylexjs/open-props/lib/colors.stylex'
4+
import { sizes } from '@stylexjs/open-props/lib/sizes.stylex'
5+
import { fonts } from '@stylexjs/open-props/lib/fonts.stylex'
6+
7+
const styles = stylex.create({
8+
main: {
9+
width: '100vw',
10+
height: '100vh',
11+
display: 'flex',
12+
alignItems: 'center',
13+
justifyContent: 'center',
14+
backgroundColor: colors.pink7,
15+
},
16+
card: {
17+
backgroundColor: colors.blue9,
18+
padding: sizes.spacing5,
19+
borderRadius: sizes.spacing2,
20+
justifyContent: 'center',
21+
display: 'flex',
22+
alignItems: 'center',
23+
color: colors.gray0,
24+
fontFamily: fonts.mono,
25+
},
26+
})
27+
28+
function App() {
29+
return (
30+
<div {...stylex.props(styles.main)}>
31+
<div {...stylex.props(styles.card)}>
32+
<span>Blue rounded rectangle</span>
33+
</div>
34+
</div>
35+
)
36+
}
37+
38+
createRoot(document.getElementById('root')).render(<App />)

‎examples/rspack/package.json

-16
This file was deleted.

0 commit comments

Comments
 (0)