Installation

Runtime

All uses of StyleX require the runtime package to be installed.

npm install --save @stylexjs/stylex

Compiler

The recommended way to use StyleX in development and production is with the build-time compiler. This can be done with any bundler that supports Babel - using the metadata generated by the StyleX plugin - and with PostCSS.

Please refer to the StyleX examples for ways to integrate StyleX with different bundlers and frameworks.

Babel

You must configure your project's .babelrc file for StyleX to work as expected. Please see the Babel plugin API reference for more details.

.babelrc.js

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    ...,
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        test: process.env.NODE_ENV === "test",
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
        },
      },
    ],
  ],
};

PostCSS

PostCSS provides a versatile way to integrate StyleX into your project. Create a postcss.config.js file in your project root and add the StyleX plugin to it.

npm install --save-dev postcss @stylexjs/postcss-plugin @stylexjs/babel-plugin

postcss.config.js

module.exports = {
  plugins: {
    '@stylexjs/postcss-plugin': {
      include: [
        './**/*.{js,jsx,ts,tsx}',
        // any other files that should be included
        // this should include NPM dependencies that use StyleX
      ],
      useCSSLayers: true,
    },
    autoprefixer: {},
  },
};

Finally, ensure that your app's entry file imports a global CSS file that includes the following declaration:

@stylex;

The PostCSS plugin will replace the declaration with the generated StyleX styles. Make sure that you only include this declaration once in your app.

ESLint

Use ESLint to catch mistakes. The StyleX compiler doesn’t validate styles and may still compile invalid ones. The ESLint plugin will flag invalid styles and provide fixes for common errors.

npm install --save-dev @stylexjs/eslint-plugin

.eslintrc.js

module.exports = {
  plugins: ["@stylexjs"],
  rules: {
    "@stylexjs/valid-styles": "error",
    '@stylexjs/no-unused': "error",
    '@stylexjs/valid-shorthands': "warning",
    '@stylexjs/sort-keys': "warning"
  },
};