رمزگشایی StyleX: سیستم طراحی پیشرفته متا

Summarize this content to 400 words in Persian Lang
هر سال در ماه اکتبر، بزرگترین کنفرانس بین المللی واکنش در گوا، هند برگزار می شود. بله، من در مورد React India صحبت می کنم. امسال (2024) برای من بسیار خاص تر بود زیرا فرصت سخنرانی در این کنفرانس باشکوه را پیدا کردم. اگر تماشای زنده آن را از دست داده اید، ضبط سخنرانی من در اینجا است. اگر خواندن را به تماشای ویدیو ترجیح می دهید، پس این وبلاگ فقط برای شماست! بیایید در آن شیرجه بزنیم.

StyleX چیست؟

StyleX کتابخانه سبک جدید و مقیاس پذیر متا است که اکنون به عنوان سیستم اصلی در پشت پلتفرم هایی مانند فیس بوک، اینستاگرام و واتس اپ استفاده می شود. این به نقاط درد تجربه شده با رویکردهای CSS-in-JS، به ویژه در برنامه های عظیم React می پردازد. StyleX با ارائه یک راه حل ترکیبی که بهترین ویژگی های CSS اتمی و CSS استاتیک را با هم ترکیب می کند، یک جایگزین کارآمد، مدولار و مقیاس پذیر ارائه می دهد.

چگونه و چرا متا StyleX را ایجاد کرد؟

متا StyleX را برای رسیدگی به چالش‌های خاصی که با کتابخانه‌های سنتی CSS-in-JS در پروژه‌های مقیاس بزرگ مواجه می‌شوند، ساخته است:

سبک های استفاده نشده: همانطور که پروژه ها رشد می کنند، CSS اغلب قوانین استفاده نشده را جمع آوری می کند و صفحه سبک را متورم می کند.

مسائل مربوط به عملکرد: راه‌حل‌های CSS-in-JS می‌توانند منجر به فایل‌های CSS بزرگ یا گلوگاه‌های عملکردی شوند، به‌خصوص زمانی که با برنامه همراه باشند.

اندازه کتابخانه CSS-in-JS: بسیاری از کتابخانه‌های محبوبی که برای استایل‌سازی در جاوا اسکریپت استفاده می‌شوند، وزن غیرضروری را به بسته اضافه می‌کنند و بر زمان بارگذاری تأثیر می‌گذارند.

معرفی StyleX: در سال 2019 به عنوان بخشی از اصلاح رابط کاربری فیس بوک ایجاد شد و آنها آن را در دسامبر 2023 به صورت متن باز کردند.

بهینه سازی CSS: قبل از استفاده از StyleX، یک صفحه در فیس بوک حدود 15 تا 45 مگابایت سبک CSS بارگیری می کند. این مقدار با استفاده از یک بسته CSS به شدت به حدود 200-300 کیلوبایت با StyleX کاهش یافت.

هدف StyleX: برای مدیریت موثر پیچیدگی های یک ظاهر طراحی شده در مقیاس ایجاد شده است. چالش‌هایی را که وقتی توسعه‌دهندگان متعدد هزاران مؤلفه ایجاد می‌کنند، برطرف می‌کند، که اغلب منجر به تضاد ویژگی‌ها در CSS می‌شود. StyleX با ارائه یک چارچوب ساختاریافته برای یک ظاهر طراحی، به حفظ ثبات و وضوح در فرآیند استایل کمک می کند.

نسل کلاس اتمی: از ابتدا، StyleX به طور مداوم کلاس‌های اتمی تولید می‌کند، و می‌پذیرد که نام‌های کلاس متعدد در هر جزء برای نگهداری بهتر و کاهش تضادهای سبک‌سازی وجود داشته باشد.

ویژگی های کلیدی StyleX:

نسل CSS اتمی: StyleX از تولید اتمی CSS استفاده می کند، به این معنی که کلاس های کوچک و قابل استفاده مجدد برای هر قانون سبک ایجاد می کند. این رویکرد نه تنها افزونگی را در بسته نهایی CSS به حداقل می رساند، بلکه با کاهش اندازه کلی شیوه نامه ها، عملکرد را نیز بهبود می بخشد.
CSS Deduplication: StyleX با ایجاد شناسه های کلاس منحصر به فرد برای هر سبک، سبک های تکراری را به طور موثر حذف می کند. این فرآیند حذف تکرار تضمین می‌کند که هر جفت ویژگی-مقدار فقط یک بار رندر می‌شود و به خروجی CSS کمتر کمک می‌کند.
“آخرین سبک اعمال شده همیشه برنده است!”: StyleX از یک قانون استایل قابل پیش بینی پیروی می کند که در آن آخرین سبک اعمال شده اولویت دارد. این ویژگی اشکال زدایی را ساده می کند و اعتماد توسعه دهندگان را افزایش می دهد، زیرا نگرانی های مربوط به قوانین سبک متضاد را کاهش می دهد.
برای React بهینه شده است: StyleX که به طور خاص برای برنامه های React طراحی شده است، به طور یکپارچه با اکوسیستم React ادغام می شود. این به توسعه دهندگان اجازه می دهد تا سبک ها را مستقیماً در اجزای خود تعریف کنند و گردش کار توسعه منسجم تری را تقویت کنند.
پشتیبانی از جریان و تایپ اسکریپت: StyleX با “Flow” نوشته شده است (ایجاد شده توسط Meta) و همچنین پشتیبانی قوی از TypeScript ارائه می دهد و API های ایمن برای سبک ها و تم ها را فعال می کند. این نوع ایمنی قابلیت اطمینان و نگهداری کد را افزایش می دهد و مدیریت سناریوهای یک ظاهر طراحی پیچیده را آسان تر می کند.
یک ظاهر طراحی مشروط انعطاف پذیر: با StyleX، توسعه‌دهندگان می‌توانند استایل‌ها را به‌صورت مشروط بر اساس حالت‌های مؤلفه یا props اعمال کنند. این انعطاف‌پذیری به استایل پویا اجازه می‌دهد که با تعاملات کاربر یا تغییرات در وضعیت برنامه سازگار شود.
یک ظاهر طراحی شده با محدوده: ویژگی استایل با محدوده StyleX تضمین می کند که استایل ها فقط برای اجزایی که برای آنها در نظر گرفته شده اند اعمال می شوند. این از عوارض جانبی ناخواسته و مسائل مربوط به ویژگی که اغلب در پایگاه های کد بزرگتر ایجاد می شود جلوگیری می کند.
محاسبات زمان اجرا کمتر: StyleX محاسبات زمان اجرا را با جمع کردن همه سبک ها در یک فایل CSS ثابت در زمان کامپایل به حداقل می رساند. این بهینه سازی منجر به زمان رندر سریعتر و بهبود عملکرد، به ویژه در برنامه های بزرگتر می شود.
قابلیت نگهداری بهتر کد: StyleX با قرار دادن سبک ها با اجزای مربوطه خود و استفاده از کلاس های اتمی، قابلیت نگهداری بهتر کد را ارتقا می دهد. توسعه دهندگان می توانند به راحتی سبک ها را بدون بررسی شیوه نامه های گسترده، درک و اصلاح کنند.
حداقل خروجی CSS: استفاده از CSS اتمی منجر به حداقل خروجی CSS می شود که به ویژه برای عملکرد مفید است. همانطور که پروژه ها در اندازه و پیچیدگی رشد می کنند، StyleX تضمین می کند که بسته CSS بدون به خطر انداختن عملکرد قابل مدیریت باقی می ماند.
برای پروژه های در هر اندازه خوب کار می کند: در حالی که StyleX برای پروژه های در هر اندازه مناسب است، در برنامه های بزرگتر واقعاً برتر است. معماری آن به گونه‌ای طراحی شده است که پیچیدگی‌های نیازهای سبک گسترده را بدون به خطر انداختن عملکرد یا قابلیت نگهداری برطرف کند.

بیایید ببینیم چگونه کار می کند 🧑‍💻

مثال‌های کد در این مقاله در React نوشته شده‌اند و ما در اصل با دو مؤلفه کار خواهیم کرد. App.jsx و Button.jsx. بیایید قبل از اینکه استایل ها را اضافه کنیم، به ساختار اصلی این اجزا نگاهی بیندازیم.

import Button from “./components/Button”;

const App = () => {
return (
<div>
<h1>StyleX by Metah1>
<Button text=”Get Started” />
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

// Button.jsx
import PropTypes from “prop-types”;

const Button = ({ text }) => {
return <button>{text}button>;
};

Button.propTypes = {
text: PropTypes.string.isRequired,
};

export default Button;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اضافه کردن سبک ها با استفاده از StyleX

import PropTypes from “prop-types”;
import * as stylex from “@stylexjs/stylex”;

const styles = stylex.create({
base: {
fontSize: 18,
backgroundColor: “black”,
color: “white”,
},
});

const Button = ({ text }) => {
return <button {…stylex.props(styles.base)}>{text}button>;
};

Button.propTypes = {
text: PropTypes.string.isRequired,
};

export default Button;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای استفاده از این استایل ها باید آنها را از بسته styleX وارد کنیم و سپس با استفاده از استایل ها را تعریف کنیم stylex.create روشی که یک شی را به عنوان پارامتر می گیرد. سپس می توانیم از آن استفاده کنیم stylex.props روشی برای اعمال استایل ها به کامپوننت

در این مثال، base نام سبکی است که می خواهیم اعمال کنیم. ما آنها را صدا می کنیم فضاهای نام در StyleX. اکنون مؤلفه دکمه ما به این شکل است.

اضافه کردن سبک به شبه کلاس ها

import PropTypes from “prop-types”;
import * as stylex from “@stylexjs/stylex”;

const styles = stylex.create({
base: {
fontSize: 18,
backgroundColor: {
default: “black”,
“:hover”: “blue”,
},
color: “white”,
},
});

const Button = ({ text }) => {
return <button {…stylex.props(styles.base)}>{text}button>;
};

Button.propTypes = {
text: PropTypes.string.isRequired,
};

export default Button;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با StyleX، اضافه کردن سبک به شبه کلاس ها بسیار ساده است. در مثال قبلی، backgroundColor یک رشته بود در اینجا، آن را به یک شی با مقدار پیش فرض و یک کلاس شبه تبدیل می کنیم.

کار با پرسش های رسانه ای

import PropTypes from “prop-types”;
import * as stylex from “@stylexjs/stylex”;

const styles = stylex.create({
base: {
fontSize: 18,
backgroundColor: {
default: “black”,
“:hover”: “blue”,
},
color: “white”,
width: {
default: “100px”,
“@media (max-width: 476px)”: “100%”,
},
},
});

const Button = ({ text }) => {
return <button {…stylex.props(styles.base)}>{text}button>;
};

Button.propTypes = {
text: PropTypes.string.isRequired,
};

export default Button;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یکی از مواردی که ما در StyleX در مقایسه با سایر کتابخانه های استایل متفاوت انجام می دهیم، پرس و جوهای رسانه ای است. در اینجا، ما پرس و جوهای رسانه ای را بر اساس نیاز به هر فضای نامی اعمال می کنیم. در این مثال، ما در حال تعریف کردن هستیم width از دکمه بودن 100px برای صفحه نمایش های بزرگتر و 100٪ عرض برای صفحه نمایش های کوچکتر یا دستگاه های تلفن همراه.

بیایید ببینیم چگونه “آخرین سبک اعمال شده همیشه برنده است”

بیایید مثال قبلی را گسترش دهیم تا ببینیم چگونه می توانیم انواع مختلف این دکمه را ایجاد کنیم.

const styles = stylex.create({
base: {
fontSize: 18,
backgroundColor: {
default: “teal”,
“:hover”: “blue”,
},
color: “white”,
width: {
default: “100px”,
“@media (max-width: 476px)”: “100%”,
},
},
highlighted: {
backgroundColor: “orange”,
},
danger: {
backgroundColor: “red”,
},
primary: {
backgroundColor: “green”,
},
});

const Button = ({ text, isHighlighted, variant }) => {
return (
<button
{…stylex.props(
styles.base,
isHighlighted && styles.highlighted, // conditional styling
styles[variant] )}
>
{text}
button>
);
};

Button.propTypes = {
text: PropTypes.string.isRequired,
isHighlighted: PropTypes.bool,
variant: PropTypes.oneOf([“danger”, “primary”]),
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید چند فضای نام دیگر به آن اضافه کنیم stylex.create روش و رنگ های مختلف زمینه را در اختیار آنها قرار دهید. بعلاوه، ما 2 ابزار جدید را در کامپوننت دکمه خود می پذیریم. isHighlighted یک پایه بولی است که برای اعمال آن استفاده می کنیم highlighted فضای نام و variant یک تکیه گاه است که برای اعمال آن استفاده می کنیم primary، danger یا highlighted فضای نام

// App.jsx
import Button from “./components/Button”;

const App = () => {
return (
<div>
<h1>StyleX by Metah1>
<div {…stylex.props(styles.main)}>
<Button text=”Base Button” />
<Button text=”Highlighted Button” isHighlighted />
<Button text=”Danger Button” isHighlighted variant=”danger” />
<Button text=”Primary Button” variant=”primary” />
div>
div>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما چند کپی دیگر از مولفه Button را با پروپوزال های مختلف ایجاد می کنیم. اکنون برنامه ما به این شکل است.

اکنون، نگاهی دقیق تر به «دکمه خطر» بیندازید. با وجود اینکه گذشتیم isHighlighted به عنوان true، highlighted فضای نام اعمال نخواهد شد. را danger آخرین نوع ذکر شده است و بنابراین اعمال خواهد شد. بنابراین، دکمه یک رنگ پس زمینه قرمز خواهد داشت.

نادیده گرفتن سبک ها از والدین

می‌توانیم ویژگی‌های سبک این مؤلفه Button را از آن نادیده بگیریم App.jsx مستقیما

//App.jsx

import Button from “./components/Button”;

const styles = stylex.create({
override: {
backgroundColor: “purple”,
color: “white”,
},
main: {
margin: “1rem”,
display: “flex”,
alignItems: “center”,
gap: “2rem”,
},
});

const App = () => {
return (
<div>
<h1>StyleX by Metah1>
<div {…stylex.props(styles.main)}>
<Button text=”Base Button” />
<Button text=”Highlighted Button” isHighlighted />
<Button text=”Danger Button” isHighlighted variant=”danger” />
<Button text=”Primary Button” variant=”primary” />
<Button
text=”Overriden Button”
isHighlighted
variant=”danger”
style={styles.override}
/>
div>
div>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما در حال نادیده گرفتن آن هستیم backgroundColor و color خواص از danger گونه ای از Button جزء ما یک فضای نام جدید به نام تعریف می کنیم override و خصوصیاتی را که می خواهیم override کنیم را وارد کنیم. این فضای نام به style پشتیبانی

در کامپوننت دکمه ما، این فضای نام را نیز مصرف خواهیم کرد.

// Button.jsx

const styles = stylex.create({
base: {
fontSize: 18,
backgroundColor: {
default: “teal”,
“:hover”: “blue”,
},
color: “white”,
},
highlighted: {
backgroundColor: “orange”,
margin: “1rem”,
},
danger: {
backgroundColor: “red”,
},
primary: {
backgroundColor: “green”,
margin: “1rem”,
},
});

const Button = ({ text, isHighlighted, variant, style }) => {
return (
<button
{…stylex.props(
styles.base,
isHighlighted && styles.highlighted,
styles[variant],
style
)}
>
{text}
button>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، override فضای نام در حال حاضر به هر ویژگی اجازه می دهد. با این حال، StyleX به ما این قابلیت را می‌دهد که ویژگی‌هایی را که می‌توان نادیده گرفت را محدود کرد. این ویژگی به ویژه هنگام استفاده از TypeScript مفید می شود.

import type { StyleXStyles } from “@stylexjs/stylex”;

type Props = {
// …
style?: StyleXStyles<{
color?: string,
backgroundColor?: string,
}>,
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این محدودیت تضمین می کند که فقط backgroundColor و color خواص را می توان نادیده گرفت.

کلاس های اتمی چگونه کار می کنند (داخلی)

اگر به کد مثال قبلی بروید، خواهید دید که ما اضافه کرده ایم margin: “1rem” سبک به 3 فضای نام مختلف – main در App.jsx، highlighted و primary در Button.jsx. وقتی عنصر را با استفاده از Devtools بررسی می کنیم، می بینیم که اجزای مختلف (محفظه اصلی، دکمه هایلایت شده و دکمه اصلی) با همان نام کلاس متصل شده اند و تنها 1 کلاس وجود دارد. x42y017 که نگه می دارد margin: “1rem” سبک

بدین ترتیب StyleX با استفاده از کلاس های اتمی، اندازه باندل خود را به میزان قابل توجهی کاهش داد. پس از رسیدن به یک آستانه خاص، هیچ کلاس جدیدی تولید نمی شود. در عوض، آنها به سادگی از کلاس های موجود استفاده مجدد می کنند.

متغیرهای جهانی و تم

توانایی نادیده گرفتن سبک ها در سطح دانه ای عالی است! با این حال، هر سیستم طراحی معینی باید از نشانه‌ها و مضمون‌های طراحی پشتیبانی کند. اینجاست که StyleX وارد می شود. طراحی APIهای موضوعی در StyleX مستقیماً از APIهای Context React الهام گرفته شده است. متغیرها با مقادیر پیش‌فرض مشابه نحوه ایجاد React Contexts تعریف می‌شوند و می‌توان مضامینی را ایجاد کرد تا مقادیر متفاوتی برای این متغیرها برای زیردرخت‌های UI ارائه کند.

ما می توانیم با ایجاد یک استایل جهانی ایجاد کنیم x.stylex.js فایل مطمئن شوید که این قرارداد نامگذاری را دنبال کنید. در این فایل از stylex.defineVars همانطور که در زیر نشان داده شده است.

// tokens.stylex.js
import * as stylex from ‘@stylexjs/stylex’;
export const DARK = ‘@media (prefers-color-scheme: dark)’;

// This function is processed at compile-time and CSS variable names are automatically generated.
export const colors = stylex.defineVars({
primaryText: { default: ‘black’, [DARK]: ‘white’ },
background: { default: ‘white’, [DARK]: ‘black’ },
borderRadius: ‘4px’,
border: ‘4px solid’,
borderColor: { default: ‘black’, [DARK]: ‘white’ },
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما به موضوع ترجیحی کاربر اشاره می کنیم و آن را روی یک مقدار ثابت تنظیم می کنیم – DARK. علاوه بر این، بیایید با استفاده از این یک تم جدید ایجاد کنیم colors متغیر

// theme.js
import * as stylex from ‘@stylexjs/stylex’;
import { colors, DARK } from ‘./tokens.stylex’;

// MyCustomTheme theme
export const myCustomTheme = stylex.createTheme(colors, {
primaryText: { default: ‘navy’, [DARK]: ‘cyan’ },
background: { default: ‘#ccc’, [DARK]: ‘black’ },
borderRadius: ‘2px’,
border: ‘2px solid’,
borderColor: { default: ‘navy’, [DARK]: ‘cyan’ },
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از ایجاد تم، می توان از آن مانند هر سبک دیگری در StyleX استفاده کرد.

// App.js
import { colors } from “./tokens.stylex”;
import { myCustomTheme } from “./theme”;

const styles = stylex.create({
container: {
color: colors.primaryText,
backgroundColor: colors.background,
border: colors.border,
borderRadius: colors.borderRadius,
},
// other namespaces
});

const App = () => {
return (
<div {…stylex.props(myCustomTheme, styles.container)}>
<h1>StyleX by Metah1>
<p>
StyleX is a CSS-in-JS library that generates atomic CSS classes at
compile-time.
p>
.. .. .. Button container .. .. ..
div>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به این ترتیب می توانیم همان صفحه را با آن ببینیم myCustomTheme به ترتیب در حالت روشن و تاریک.

این یک بسته بندی است 🎉

هورای! ما با موفقیت به کار با StyleX پی بردیم. از اینکه این مقاله را مطالعه کردید متشکرم. امیدوارم درک خوبی از اینکه StyleX چیست، متا چگونه آن را ایجاد کرده و نحوه استفاده از آن را ارائه کرده باشد. لطفا نظرات / سوالات خود را در بخش نظرات یا در بخش نظرات به اشتراک بگذارید توییتر. اگر این وبلاگ برای شما جالب است، ممنون می شوم اگر این پست را لایک کنید (با ایموجی مورد علاقه خود 😁).

آرامش ✌

مراجع

برای آمادگی مصاحبه با من در Topmate ارتباط برقرار کنید

import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Metah1>
      <Button text="Get Started" />
    div>
  );
};

export default App;

// Button.jsx
import PropTypes from "prop-types";

const Button = ({ text }) => {
  return <button>{text}button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: "black",
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

import PropTypes from "prop-types";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "black",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
});

const Button = ({ text }) => {
  return <button {...stylex.props(styles.base)}>{text}button>;
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "teal",
      ":hover": "blue",
    },
    color: "white",
    width: {
      default: "100px",
      "@media (max-width: 476px)": "100%",
    },
  },
  highlighted: {
    backgroundColor: "orange",
  },
  danger: {
    backgroundColor: "red",
  },
  primary: {
    backgroundColor: "green",
  },
});

const Button = ({ text, isHighlighted, variant }) => {
  return (
    <button
      {...stylex.props(
        styles.base,
        isHighlighted && styles.highlighted, // conditional styling
        styles[variant]
      )}
    >
      {text}
    button>
  );
};

Button.propTypes = {
  text: PropTypes.string.isRequired,
  isHighlighted: PropTypes.bool,
  variant: PropTypes.oneOf(["danger", "primary"]),
};

// App.jsx
import Button from "./components/Button";

const App = () => {
  return (
    <div>
      <h1>StyleX by Metah1>
      <div {...stylex.props(styles.main)}>
        <Button text="Base Button" />
        <Button text="Highlighted Button" isHighlighted />
        <Button text="Danger Button" isHighlighted variant="danger" />
        <Button text="Primary Button" variant="primary" />
      div>
    div>
  );
};

export default App;

//App.jsx

import Button from "./components/Button";

const styles = stylex.create({
  override: {
    backgroundColor: "purple",
    color: "white",
  },
  main: {
    margin: "1rem",
    display: "flex",
    alignItems: "center",
    gap: "2rem",
  },
});

const App = () => {
  return (
    <div>
      <h1>StyleX by Metah1>
      <div {...stylex.props(styles.main)}>
        <Button text="Base Button" />
        <Button text="Highlighted Button" isHighlighted />
        <Button text="Danger Button" isHighlighted variant="danger" />
        <Button text="Primary Button" variant="primary" />
        <Button
          text="Overriden Button"
          isHighlighted
          variant="danger"
          style={styles.override}
        />
      div>
    div>
  );
};

// Button.jsx

const styles = stylex.create({
  base: {
    fontSize: 18,
    backgroundColor: {
      default: "teal",
      ":hover": "blue",
    },
    color: "white",
  },
  highlighted: {
    backgroundColor: "orange",
    margin: "1rem",
  },
  danger: {
    backgroundColor: "red",
  },
  primary: {
    backgroundColor: "green",
    margin: "1rem",
  },
});

const Button = ({ text, isHighlighted, variant, style }) => {
  return (
    <button
      {...stylex.props(
        styles.base,
        isHighlighted && styles.highlighted,
        styles[variant],
        style
      )}
    >
      {text}
    button>
  );
};

import type { StyleXStyles } from "@stylexjs/stylex";

type Props = {
  // ...
  style?: StyleXStyles<{
    color?: string,
    backgroundColor?: string,
  }>,
};

// tokens.stylex.js
import * as stylex from '@stylexjs/stylex';
export const DARK = '@media (prefers-color-scheme: dark)';

// This function is processed at compile-time and CSS variable names are automatically generated.
export const colors = stylex.defineVars({
  primaryText: { default: 'black', [DARK]: 'white' },
  background: { default: 'white', [DARK]: 'black' },
  borderRadius: '4px’,
  border: '4px solid’,
  borderColor: { default: 'black', [DARK]: 'white' },
});

// theme.js
import * as stylex from '@stylexjs/stylex';
import { colors, DARK } from './tokens.stylex';

// MyCustomTheme theme
export const myCustomTheme = stylex.createTheme(colors, {
  primaryText: { default: 'navy', [DARK]: 'cyan' },
  background: { default: '#ccc', [DARK]: 'black' },
  borderRadius: '2px’,
  border: '2px solid’,
  borderColor: { default: 'navy', [DARK]: 'cyan' },
});

// App.js
import { colors } from "./tokens.stylex";
import { myCustomTheme } from "./theme";

const styles = stylex.create({
  container: {
    color: colors.primaryText,
    backgroundColor: colors.background,
    border: colors.border,
    borderRadius: colors.borderRadius,
  },
  // other namespaces
});

const App = () => {
  return (
    <div {...stylex.props(myCustomTheme, styles.container)}>
      <h1>StyleX by Metah1>
      <p>
        StyleX is a CSS-in-JS library that generates atomic CSS classes at
        compile-time.
      p>
      .. .. .. Button container .. .. ..
    div>
  );
};