Style Dictionary: Belirteçleri Dönüştürme ve Oluşturma

Style Dictionary (Amazon tarafından oluşturulmuştur), JSON biçimindeki tasarım belirteci tanımlarını alan ve bunları her türlü hedef biçimde çıktı olarak üreten bir derleme aracıdır: CSS özel özellikleri, JavaScript ES modülleri, Sass değişkenleri, iOS Swift sabitleri, Android XML kaynakları ve tanımladığınız herhangi bir özel biçim. Tek kaynak, çok sayıda çıktı.

npm install --save-dev style-dictionary ile kurun. npx style-dictionary init ile bir proje yapısı başlatın; bu komut bir config.json (veya config.js) dosyası ile bir tokens/ dizini oluşturur. Yapılandırma, Style Dictionary'e belirteç dosyalarını nerede bulacağını ve çıktıları nereye yazacağını bildirir.

Style Dictionary, yaprak düğümlerinde value özelliği bulunan iç içe bir JSON yapısı kullanır. Örneğin: { "color": { "primary": { "500": { "value": "#3b82f6" } } } }. Değere giden yol (renk, birincil, 500), dönüştürmeden sonra belirteç adına dönüşür ve genellikle color-primary-500 veya --color-primary-500 biçiminde yazılır.

npx style-dictionary build --config config.json komutunu çalıştırın (veya package.json betiklerinde yapılandırılmışsa style-dictionary build komutunu kullanın). Style Dictionary, yapılandırılmış kaynaktaki tüm belirteç dosyalarını okur, dönüşümleri uygular ve çıktıları yapılandırılmış hedeflere yazar. Belirteç biçimindeki hatalar, dosya adı ve yoluyla birlikte bildirilir.

config.json platformları tanımlar: css (özel özelliklere sahip bir CSS dosyası üretir), js (bir JS nesnesi üretir), scss (Sass değişkenleri üretir). Her platform; çıktı dizinini, dosya adını, biçimi (şablonu) ve uygulanacak dönüşümleri (ad ve değer işleme işlevlerini) belirtir.

Style Dictionary yerleşik dönüşümler içerir: name/cti/kebab, iç içe yolu color-primary-500 biçimine dönüştürür; name/cti/camel, colorPrimary500 üretir; size/rem, piksel değerlerini rem birimine dönüştürür; color/hex, renkleri onaltılık biçimde standartlaştırır. Dönüşümler birleştirilebilir ve sırayla uygulanır.

StyleDictionary.registerTransform() ile özel dönüşümler kaydedebilirsiniz. Örneğin, piksel değerlerini iOS noktalarına dönüştüren veya tüm belirteç adlarına şirkete özgü bir önek ekleyen bir dönüşüm oluşturabilirsiniz. Özel dönüşümler, değerlerin çıktıdan önce nasıl işleneceği üzerinde tam denetim sağlar.

Özel biçimler, çıktı dosyasının şablonunu tanımlar. StyleDictionary.registerFormat(), dönüştürülmüş belirteçler sözlüğünü alır ve bir dize döndürür — bu dize dosya içeriğidir. Belirteçleri TypeScript türleri, React tema nesnesi, Tailwind yapılandırma uzantısı veya kullandığınız yığının gerektirdiği başka herhangi bir biçim olarak üretebilirsiniz.

Derlemeden sonra CSS çıktısını genel stil sayfanıza aktarın: @import './tokens/tokens.css'. JS çıktısını bileşenlere veya Tailwind yapılandırmasına aktarın: import tokens from './tokens/tokens.js'. CSS, çalışma zamanında tema oluşturmak için özel özellikler sağlar; JS ise Tailwind ve JavaScript mantığı için tür bilgisi içeren sabitler sağlar.

Style Dictionary, küme parantezleri kullanarak belirteç başvurularını destekler: { "value": "{color.primary.500}" }. Bu, anlamsal belirteç takma adları oluşturur; anlamsal belirteç bir ilkel belirtece başvurur. Derleme sırasında Style Dictionary başvuruları çözümler ve son çözümlenmiş değeri (veya biçiminize bağlı olarak bir CSS değişkeni başvurusunu) üretir.

Belirteçlerin uygulama derlenmeden önce her zaman yeniden oluşturulması için Style Dictionary'i bir prebuild npm betiği olarak çalıştırın. "prebuild": "style-dictionary build" ifadesini package.json dosyasına ekleyin. Böylece belirteç JSON dosyalarındaki her değişiklik, React derlemesi bunları işlemeden önce CSS ve JS çıktılarına yansıtılır.

Style Dictionary'deki dönüşümlerin amacı nedir?

Style Dictionary, belirteç JSON'unu her türlü çıktı biçimine dönüştürür: CSS değişkenleri, JS modülleri, Sass, iOS ve Android. Belirteç JSON'u, yaprak düğümlerinde value bulunan iç içe nesneler kullanır. Dönüşümler adları ve değerleri işler (camelCase, pikselden rem'e); biçimler çıktı şablonunu tanımlar. Belirteç başvuruları ({color.primary.500}) anlamsal takma adlandırmayı mümkün kılar. Belirteçlerin React derlemesinden önce her zaman güncel olması için prebuild betiğiyle işlemi otomatikleştirin.