Meta’s new open source library – StyleX

Facebook aka Meta open source introduced a new CSS library that they use for Facebook, Instagram, and Thread named StyleX.

StyleX is a simple, easy-to-use JavaScript syntax and compiler for styling web apps. https://stylexjs.com/

StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS.

Major features of StyleX

• Scalable

  • It minimizes CSS output with Atomic CSS.

  • With StyleX, styles remain maintainable as your codebase grows.

• Predictable

  • The last style will be always applied to the element.

• Composable

  • Merge and compose arbitrary styles across component and file boundaries.

• Fast

  • No runtime style injection.

  • All the styles are bundled in a static file at compile time.

• Type-Safe

The feature that I liked is that in StyleX the last style will always be applied to the element and all the styles are bundled in a static file at compile-time to boost performance. Let me know which feature you liked in the comment section.

According to StyleX, the library is fast and scalable which means it will be very used for enterprise-grade applications and projects.

We can use it with any javascript framework. We will just need to instance the npm package.

npm install --save @stylexjs/stylex

All done! You successfully installed it to your project.

To get started, you only need to understand 2 things

First, How to create StyleX styles?

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

const styles = stylex.create({  
	base: {    
		fontSize: 16,    
		backgroundColor: 'black'
	},
});

Second, How to use StyleX styles on elements?

<div {...stylex.props(styles.base)} />

Great! Now you are ready to try it yourself.

Try it and let me know your thoughts in the comment section.

Know more at: –

https://stylexjs.com/

https://github.com/facebook/stylex