Bu araç hakkında
CSS'ten JS Stil Nesnesine aracı, bir CSS bloğunu React satır içi stilleri veya styled-components ve Emotion gibi CSS-in-JS kütüphaneleri için uygun bir JavaScript nesnesine dönüştürür. Bildirimleri tarayıcınızda yerel olarak ayrıştırır — hiçbir şey yüklenmez — böylece bir stil sayfasını satır içi stillere taşımak bir yapıştır-ve-kopyala kadar yakındır.
Her özellik adı camelCase yapılır: background-color backgroundColor olur, z-index zIndex olur. Satıcı önekleri React'in kurallarını izler — baştaki bir -ms- küçük harfli ms olur (msFilter), -webkit-, -moz- ve -o- ise Webkit, Moz ve O olarak büyük harflenir (WebkitBoxShadow). Özel özellikler (--brand-color) tırnaklı anahtarlar olarak olduğu gibi korunur. Değerler varsayılan olarak dize olarak üretilir, birimleri ve !important'ı koruyarak; sayısal bir geçiş, çıplak tam sayıların ve ondalıkların bunun yerine tırnaksız sayılar olmasını sağlar. Geçerli JavaScript tanımlayıcısı olan anahtarlar tırnaksız bırakılır; geri kalanı otomatik olarak tırnaklanır.
Girdi düz bir bildirim bloğu olduğunda (seçici yok) tek bir düz nesne üretir, bir React style prop'u için mükemmeldir. Girdi seçicileri olan tam kurallar içerdiğinde, styled/Emotion modu her seçici dizesiyle anahtarlanan iç içe bir nesne üretir — bu kütüphanelerin kabul ettiği nesne sözdizimi. Çıktı const adını siz kontrol edersiniz ve tümü const styles = { ... }; olarak yazılır, yapıştırmaya hazırdır.