@stylexswc/swc-plugin

SWC plugin for StyleX (**unofficial)

StyleX is a JavaScript library for defining styles for optimized user interfaces, developed by Meta. The official repo is here.

This is an unofficial plugin for StyleX. It uses SWC instead of Babel for build step, which allows us to completely ditch Babel and make StyleX faster.

This plugin passes almost 100% of tests of the official StyleX library. It is intended as a drop-in replacement for the official StyleX babel plugin.

The usage of StyleX does not change, all changes are internal.

This is specifically useful for Next.js projets as it allows us to use SWC Next.js Compiler.

• Next.js plugin
• StyleX Documentation

Installation

Install the package by using:

npm install --save-dev @stylexswc/nextjs-plugin

Example

Here is a simple example of StyleX use:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    padding: 10,
  },
  element: {
    backgroundColor: 'red',
  },
});

const styleProps = stylex.props(styles.root, styles.element);

Warning

The current resolution of the exports field from package. json is only partially supported, so if you encounter problems, please open an issue with an attached link to reproduce the problem.

License

StyleX is MIT licensed. Stylex SWC plugin is also MIT licensed.