Skip to content

Latest commit

 

History

History
50 lines (37 loc) · 3.18 KB

doc.md

File metadata and controls

50 lines (37 loc) · 3.18 KB

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

StyleX has taken the best of both world together - build-time (tailwind) & run-time (CSS in JS). Like wise in most of css in JS we co-locate CSS within the JS file & generate the CSS at the build time

Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries.

FB has discovered third pillar to their application architecture. GraphQL and Relay handle the data, React handles the DOM, and now StyleX would handle the styling.

StyleX fixes that by providing “Deterministic Resolution” where you are always guaranteed to get the styling you want. It has taken away the producing unexpected styling.

StyleX has inbuilt-type-support to enforce the component styling. The StyleX API is strongly typed. The styles defined with StyleX are typed too. This is made possible by using JavaScript objects to author raw styles. This is one of the big reasons we have chosen objects over template strings. https://stylexjs.com/docs/learn/thinking-in-stylex/#type-safe-styles

StyleX support conditional writing of styles out of the box. It can support any array, object too. https://stylexjs.com/docs/learn/thinking-in-stylex/#small-api-surface

StyleX compiles to atomic class names, a big performance benefit is that the size of the CSS bundle plateaus as a project grows.

For years, we have had to choose between "Design System" components that come with styles baked in but can be difficult to customize or "Headless" components that are completely unstyled. StyleX empowers developers to build UI components that can have default styles and still be customizable.

Features:

  • Scalable
    • Minimize CSS output with atomic CSS
  • Predictable
    • No specificity issues.
    • “The last style applied always wins!”
  • Composable
    • Apply styles conditionally
    • Merge and compose arbitrary styles across component and file boundaries
  • Fast
    • No runtime style injection.
    • All styles are bundled in a static CSS file at compile-time.
    • Optimized runtime for merging class names.
  • Type-Safe
    • Type-safe APIs.
    • Type-safe styles.
    • Type-safe themes.

facebook/stylex#112

Problem with Tailwind

  • Control over styles
  • Suppose we wanted to put control in passing the style-token for the consumer, but not everything. (not possible)
  • Tailwind comes up with default configuration to override them could be challenging where StyleX comes up with clean slate.
  • Thanks to tailwind team to define the classname as close as possible to CSS properties but some of the classes aren't in define in the same way, therefore u might to learn the taxnomy to the tailwind. In Stylex we use css-properties therefore 0 learning curve.
  • Code readability can get affected in the tailwind but the component defination can get verbose.
  • Handling dynamic style based on the runtime isn't quite easy in the tailwind. We need to upfront know all the variant of the classes that can be used dynamically. Where as the StyleX handle this better it create the static class with creating the variable & the value of the variable can be changed dynamically.