@@ -129,103 +129,6 @@ and esbuild.
129
129
```
130
130
</details >
131
131
132
- <details >
133
- <summary >Webpack</summary >
134
-
135
- <DevInstallExample dev = { [` @stylexjs/webpack-plugin ` ]} />
136
-
137
- ``` tsx title="webpack.config.js"
138
- const StylexPlugin = require (' @stylexjs/webpack-plugin' );
139
- const path = require (' path' );
140
-
141
- const config = (env , argv ) => ({
142
- entry: {
143
- main: ' ./src/index.js' ,
144
- },
145
- output: {
146
- path: path .resolve (__dirname , ' .build' ),
147
- filename: ' [name].js' ,
148
- },
149
- module: {
150
- rules: [
151
- {
152
- test: / \. js$ / ,
153
- exclude: / node_modules/ ,
154
- use: ' babel-loader' ,
155
- },
156
- ],
157
- },
158
- plugins: [
159
- // Ensure that the stylex plugin is used before Babel
160
- new StylexPlugin ({
161
- filename: ' styles.[contenthash].css' ,
162
- // get webpack mode and set value for dev
163
- dev: argv .mode === ' development' ,
164
- // Use statically generated CSS files and not runtime injected CSS.
165
- // Even in development.
166
- runtimeInjection: false ,
167
- // optional. default: 'x'
168
- classNamePrefix: ' x' ,
169
- // Required for CSS variable support
170
- unstable_moduleResolution: {
171
- // type: 'commonJS' | 'haste'
172
- // default: 'commonJS'
173
- type: ' commonJS' ,
174
- // The absolute path to the root directory of your project
175
- rootDir: __dirname ,
176
- },
177
- }),
178
- ],
179
- cache: true ,
180
- });
181
-
182
- module .exports = config ;
183
- ```
184
-
185
- </details >
186
-
187
- <details >
188
- <summary >esbuild</summary >
189
-
190
- <DevInstallExample dev = { [` @stylexjs/esbuild-plugin ` ]} />
191
-
192
- ``` tsx title="build.mjs"
193
- import esbuild from ' esbuild' ;
194
- import stylexPlugin from ' @stylexjs/esbuild-plugin' ;
195
- import path from ' path' ;
196
- import { fileURLToPath } from ' url' ;
197
-
198
- const __dirname = path .dirname (fileURLToPath (import .meta .url ));
199
-
200
- esbuild .build ({
201
- entryPoints: [' src/index.js' ],
202
- bundle: true ,
203
- outfile: ' ./build/bundle.js' ,
204
- minify: true ,
205
- plugins: [
206
- stylexPlugin ({
207
- // If set to 'true', bundler will inject styles in-line
208
- // Do not use in production
209
- dev: false ,
210
- // Required. File path for the generated CSS file
211
- generatedCSSFileName: path .resolve (__dirname , ' build/stylex.css' ),
212
- // Aliases for StyleX package imports
213
- // default: '@stylexjs/stylex'
214
- stylexImports: [' @stylexjs/stylex' ],
215
- // Required for CSS variable support
216
- unstable_moduleResolution: {
217
- // type: 'commonJS' | 'haste'
218
- // default: 'commonJS'
219
- type: ' commonJS' ,
220
- // The absolute path to the root of your project
221
- rootDir: __dirname ,
222
- },
223
- }),
224
- ],
225
- })
226
- ```
227
- </details >
228
-
229
132
Please refer to the
230
133
[ StyleX examples] ( https://github.com/facebook/stylex/tree/main/examples )
231
134
for demonstrations on how to use each of these plugins.
0 commit comments