Skip to main content

Installation

Runtime​

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

npm install --save @stylexjs/stylex

ESLint​

Use ESLint to catch mistakes. The StyleX has a forgiving compiler that compile invalid styles. The StyleX 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": "warn",
    "@stylexjs/sort-keys": "warn"
  },
};

Compiler​

StyleX offers multiple ways to transform StyleX styles into CSS. Guides for setting up the StyleX transformation pipeline for various bundler and framework setups follow below:

You can also choose to use the CLI or the PostCSS plugin, for more custom setups.

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.

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

Bundler- and framework-specific guides live under this Installation section. You can also check the StyleX examples to see the same setups in runnable projects.

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,
        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.

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.