StyleX - The new Game changer?

Overview:

StyleX, the dynamic styling system empowering Facebook, WhatsApp, Instagram, and other Meta companies, is a revolutionary game-changer. Its distinctive approach involves employing styling at a component level, offering unparalleled flexibility.

The primary objective is to facilitate local styling, allowing each file to be individually styled without redundant code. This approach emphasizes making essential changes while preventing style conflicts through a rule that prioritizes the last defined style.

Installation and Setup:

Now, let's dive into the practical side. To install StyleX, execute the following command:

npm install --save @stylexjs/stylex

For development, tweak your babel.config.js file by incorporating the following code:

// babel.config.js
import styleXPlugin from '@stylexjs/babel-plugin';

const config = {
  plugins: [
    [
      styleXPlugin,
      {
        dev: true,
        test: false,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};

export default config;

StyleX also provides plugins for Webpack, Rollup, and Next.js. In local development, install the dev runtime as a dev dependency:

npm install --save-dev @stylexjs/dev-runtime

Catch mistakes with ESLint using:

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

Modify your .eslintrc.js file accordingly:

module.exports = {
  plugins: ["@stylexjs"],
  rules: {
    "@stylexjs/valid-styles": ["error", {...options}],
  },
};

Styling:

StyleX employs an expressive JavaScript API similar to working with inline styles in React DOM or styles in React Native.

Constraints:

As StyleX relies on ahead-of-time compilation, ensure that your styles are statically analyzable. Raw Style Objects should only contain plain object literals, string literals, number literals, array literals, null or undefined, constants, simple expressions, and built-in methods. Arrow functions are allowed for dynamic styles. Avoid function calls and values imported from other modules, except for CSS Variables created using StyleX from a .stylex.js file.

Creating styles with StyleX is straightforward. Utilize the stylex.create function, import the created constants, and apply them as attributes to your elements.

Example:

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

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

const MyComponent = () => {
  return (
    <div {...stylex.props(styles.base)} />
  );
};

This example showcases the fundamental usage of StyleX. Once you grasp this, the possibilities for customization are vast.

In conclusion, I appreciate the flexibility StyleX provides, and I look forward to incorporating it into my projects.

For more in-depth information on StyleX, refer to the official documentation: StyleX Documentation. Note that the examples provided were extracted from the documentation for enhanced learning and simplified comprehension.

Comments

[Red Ochsenbein (he/him)]

People should really take a look at PandaCSS...

[TANITOLUWA IFEGBESAN]

Surely I will and will try it out and write an article on it also. Thanks bro @syeo66

[val von vorn]

Why use elegant and minimal CSS if you can write more ugly JavaScript boilerplate code instead? This is a game changer for developers getting paid by lines of code!

[TANITOLUWA IFEGBESAN]

😂😂😂hmm... True @valvonvorn for a little app or a personal project, I agree with you but when working on a large-scale project, this would save a lot more time and give you flexibility on your work, aiding the ability to track your styles better as you can make them local.