درباره این ابزار
ابزار تبدیل CSS به شیء استایل JS یک بلوک CSS را به یک شیء JavaScript مناسب برای استایلهای inline در React یا کتابخانههای CSS-in-JS مانند styled-components و Emotion تبدیل میکند. declarationها را بهصورت محلی در مرورگر شما تجزیه میکند — هیچ چیز بارگذاری نمیشود — پس مهاجرت یک stylesheet به استایلهای inline تنها یک چسباندن-و-کپی فاصله دارد.
نام هر property به camelCase درمیآید: background-color به backgroundColor، z-index به zIndex. پیشوندهای vendor از قوانین React پیروی میکنند — یک -ms- ابتدایی به ms کوچک میشود (msFilter)، در حالی که -webkit-، -moz- و -o- به Webkit، Moz و O بزرگ میشوند (WebkitBoxShadow). propertyهای سفارشی (--brand-color) بهصورت کلیدهای در گیومه، عیناً حفظ میشوند. مقادیر بهطور پیشفرض بهعنوان رشته تولید میشوند و واحدها و !important را حفظ میکنند؛ یک کلید تغییر عددی به اعداد صحیح و اعشاری برهنه اجازه میدهد بهجای آن به اعداد بدونگیومه تبدیل شوند. کلیدهایی که شناسههای معتبر JavaScript هستند بدون گیومه رها میشوند؛ بقیه بهطور خودکار در گیومه قرار میگیرند.
هنگامی که ورودی یک بلوک declaration ساده باشد (بدون selector) یک شیء مسطح تولید میکند، عالی برای یک prop بهنام style در React. هنگامی که ورودی شامل قواعد کامل با selector باشد، حالت styled/Emotion یک شیء تودرتو که با هر رشته selector کلیدگذاری شده تولید میکند — نحو شیئی که آن کتابخانهها میپذیرند. شما نام const خروجی را کنترل میکنید، و کل چیز بهصورت const styles = { ... }; نوشته میشود، آماده چسباندن.