Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Delete esbuild and webpack plugins #954

Merged
merged 1 commit into from
Mar 19, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,19 @@ This is the development monorepo for StyleX.
- `examples`
- Contains examples using StyleX and its integration with build tools.
- `packages`
- Contains the individual packages managed in the monorepo.
- Contains the public and private packages managed in the monorepo.
- [babel-plugin](https://github.com/facebook/stylex/blob/main/packages/babel-plugin)
- [benchmarks](https://github.com/facebook/stylex/blob/main/packages/benchmarks)
- [cli](https://github.com/facebook/stylex/blob/main/packages/cli)
- [docs](https://github.com/facebook/stylex/blob/main/packages/docs)
- [eslint-plugin](https://github.com/facebook/stylex/blob/main/packages/eslint-plugin)
- [open-props](https://github.com/facebook/stylex/blob/main/packages/open-props)
- [postcss-plugin](https://github.com/facebook/stylex/blob/main/packages/postcss-plugin)
- [rollup-plugin](https://github.com/facebook/stylex/blob/main/packages/rollup-plugin)
- [scripts](https://github.com/facebook/stylex/blob/main/packages/scripts)
- [shared](https://github.com/facebook/stylex/blob/main/packages/shared)
- [style-value-parser](https://github.com/facebook/stylex/blob/main/packages/style-value-parser)
- [stylex](https://github.com/facebook/stylex/blob/main/packages/stylex)
- [webpack-plugin](https://github.com/facebook/stylex/blob/main/packages/webpack-plugin)


### Tasks

Expand Down
29 changes: 29 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

97 changes: 0 additions & 97 deletions packages/docs/docs/learn/03-installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -129,103 +129,6 @@ and esbuild.
```
</details>

<details>
<summary>Webpack</summary>

<DevInstallExample dev={[`@stylexjs/webpack-plugin`]} />

```tsx title="webpack.config.js"
const StylexPlugin = require('@stylexjs/webpack-plugin');
const path = require('path');

const config = (env, argv) => ({
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, '.build'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
plugins: [
// Ensure that the stylex plugin is used before Babel
new StylexPlugin({
filename: 'styles.[contenthash].css',
// get webpack mode and set value for dev
dev: argv.mode === 'development',
// Use statically generated CSS files and not runtime injected CSS.
// Even in development.
runtimeInjection: false,
// optional. default: 'x'
classNamePrefix: 'x',
// Required for CSS variable support
unstable_moduleResolution: {
// type: 'commonJS' | 'haste'
// default: 'commonJS'
type: 'commonJS',
// The absolute path to the root directory of your project
rootDir: __dirname,
},
}),
],
cache: true,
});

module.exports = config;
```

</details>

<details>
<summary>esbuild</summary>

<DevInstallExample dev={[`@stylexjs/esbuild-plugin`]} />

```tsx title="build.mjs"
import esbuild from 'esbuild';
import stylexPlugin from '@stylexjs/esbuild-plugin';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
outfile: './build/bundle.js',
minify: true,
plugins: [
stylexPlugin({
// If set to 'true', bundler will inject styles in-line
// Do not use in production
dev: false,
// Required. File path for the generated CSS file
generatedCSSFileName: path.resolve(__dirname, 'build/stylex.css'),
// Aliases for StyleX package imports
// default: '@stylexjs/stylex'
stylexImports: ['@stylexjs/stylex'],
// Required for CSS variable support
unstable_moduleResolution: {
// type: 'commonJS' | 'haste'
// default: 'commonJS'
type: 'commonJS',
// The absolute path to the root of your project
rootDir: __dirname,
},
}),
],
})
```
</details>

Please refer to the
[StyleX examples](https://github.com/facebook/stylex/tree/main/examples)
for demonstrations on how to use each of these plugins.
Expand Down
17 changes: 0 additions & 17 deletions packages/esbuild-plugin/.babelrc.cjs

This file was deleted.

Loading