UnoCSS Extracting

UnoCSS, kod tabanınızdan yardımcı programların kullanımını arayarak ve talep üzerine karşılık gelen CSS'i oluşturarak çalışır. Bu süreci çıkarma olarak adlandırıyoruz.

Content Sources

UnoCSS, birden fazla kaynaktan yardımcı programların kullanımını çıkarmayı destekler:

• Pipeline - Doğrudan yapı araçları pipeline'ınızdan çıkar
• Filesystem - Dosyaları okuyarak ve izleyerek dosya sisteminizden çıkar
• Inline - Satır içi düz metinden çıkar

Farklı kaynaklardan gelen yardımcı programların kullanımları birleştirilecek ve nihai CSS'i oluşturacaktır.

Extracting from Build Tools Pipeline

Bu, Vite ve Webpack entegrasyonlarında desteklenir.

UnoCSS, yapı araçları pipeline'ınızdan geçen içeriği okuyacak ve bunlardan yardımcı programların kullanımını çıkaracaktır. Bu, çıkarma sırasında ek dosya I/O işlemi yapılmadan uygulamanızda gerçekten kullanılan kullanımları akıllıca çıkardığımız için çıkarmanın en verimli ve doğru yoludur.

Varsayılan olarak, UnoCSS .jsx, .tsx, .vue, .md, .html, .svelte, .astro uzantılı dosyalardan yapı pipeline'ınızdaki yardımcı programların kullanımını çıkaracak ve ardından talep üzerine uygun CSS'i oluşturacaktır. .js ve .ts dosyaları varsayılan olarak DAHİL DEĞİLDİR.

Bunları yapılandırmak için uno.config.ts'inizi güncelleyebilirsiniz:

export default defineConfig({
  content: {
    pipeline: {
      include: [
        // varsayılan
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // js/ts dosyalarını dahil et
        'src/**/*.{js,ts}',
      ],
      // dosyaları hariç tut
      // exclude: []
    },
  },
})

Ayrıca @unocss-include sihirli yorumunu da ekleyebilirsiniz, dosya bazında, UnoCSS'in taramasını istediğiniz dosyadaki herhangi bir yere. *.js veya *.ts dosyalarını taramanız gerekiyorsa, tüm js/ts dosyalarını tarama hedefleri olarak dahil etmek için bunları yapılandırmaya ekleyin.

// ./some-utils.js

// `.js` dosyaları varsayılan olarak dahil olmadığından,
// aşağıdaki yorum UnoCSS'e bu dosyayı zorla taramasını söyler.
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
  inactive: 'bg-gray-200 text-gray-500',
}

Benzer şekilde, tüm dosya için taramayı ve dönüştürmeyi atlamak için @unocss-ignore ekleyebilirsiniz.

UnoCSS'in herhangi bir çıkarma dosyasında çıkarılmadan bir kod bloğunu atlamasını istiyorsanız, çiftler halinde @unocss-skip-start @unocss-skip-end kullanabilirsiniz. Çiftler halinde kullanılması gerektiğini unutmayın.

<p class="text-green text-xl">Green Large</p>

<!-- @unocss-skip-start -->
<!-- `text-red` çıkarılmayacak -->
<p class="text-red">Red</p>
<!-- @unocss-skip-end -->

Extracting from Filesystem

Yapı araçları pipeline'ına erişimi olmayan entegrasyonları kullandığınız durumlarda (örneğin, PostCSS eklentisi) veya kodun pipeline'dan geçmediği backend çerçeveleriyle entegre ettiğinizde, çıkarılacak dosyaları manuel olarak belirtebilirsiniz.

export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})

Eşleşen dosyalar doğrudan dosya sisteminden okunacak ve geliştirme modunda değişiklikler için izlenecektir.

Extracting from Inline Text

Ek olarak, başka bir yerden alabileceğiniz satır içi metinden de yardımcı programların kullanımını çıkarabilirsiniz.

İçeriği döndürmek için bir async fonksiyon da geçebilirsiniz. Ancak fonksiyonun yalnızca derleme zamanında bir kez çağrılacağını unutmayın.

export default defineConfig({
  content: {
    inline: [
      // düz metin
      '<div class="p-4 text-red">Some text</div>',
      // async getter
      async () => {
        const response = await fetch('https://example.com')
        return response.text()
      },
    ],
  },
})

Limitations

UnoCSS yapı zamanında çalıştığından, bu yalnızca statik olarak sunulan yardımcı programların oluşturulacağı ve uygulamanıza gönderileceği anlamına gelir. Çalışma zamanında dinamik olarak kullanılan veya harici kaynaklardan getirilen yardımcı programlar algılanmayabilir veya uygulanmayabilir.

Safelist

Bazen şöyle dinamik birleştirmeler kullanmak isteyebilirsiniz:

<div class="p-${size}"></div>
<!-- bu çalışmaz! -->

UnoCSS'in statik çıkarma kullanarak yapı zamanında çalıştığı gerçeğinden dolayı, derleme zamanında yardımcı programların tüm kombinasyonunu bilmesi mümkün değildir. Bunun için safelist seçeneğini yapılandırabilirsiniz.

safelist: 'p-1 p-2 p-3 p-4'.split(' ')

Karşılık gelen CSS her zaman oluşturulacaktır:

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

Veya daha esnek:

safelist: [
  ...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
]

Çalışma zamanında gerçek dinamik oluşturma arıyorsanız, @unocss/runtime paketine göz atmak isteyebilirsiniz.

Static List Combinations

Dinamik olarak oluşturulmuş yardımcı programların sınırlamasının üstesinden gelmenin bir başka yolu da tüm kombinasyonları statik olarak listeleyen bir nesne kullanmaktır. Örneğin, bunu istiyorsanız:

<div class="text-${color} border-${color}"></div>
<!-- bu çalışmaz! -->

Tüm kombinasyonları listeleyen bir nesne oluşturabilirsiniz (kullanmak istediğiniz color için olası tüm değerleri bildiğinizi varsayarak)

// Statik oldukları için, UnoCSS bunları yapı zamanında çıkarabilir
const classes = {
  red: 'text-red border-red',
  green: 'text-green border-green',
  blue: 'text-blue border-blue',
}

Ve ardından şablonunuzda kullanın:

<div class="${classes[color]}"></div>

Blocklist

safelist'e benzer şekilde, oluşturulmasından bazı yardımcı programları hariç tutmak için blocklist yapılandırabilirsiniz. Bu, bazı çıkarma yanlış pozitiflerini hariç tutmak için kullanışlıdır. safelist'ten farklı olarak, blocklist hem tam eşleşme için string hem de desen eşleşmesi için düzenli ifade kabul eder.

blocklist: [
  'p-1',
  /^p-[2-4]$/,
]

Bu, p-1 ve p-2, p-3, p-4'ün oluşturulmasından hariç tutacaktır.