Jadi, Anda ingin menyerah pada prosesor CSS Pre dan Post … – Beragampengetahuan

Pernah ada waktu ketika CSS lokal tidak memiliki banyak fitur dasar yang memungkinkan pengembang untuk menghasilkan cara untuk membuat CSS lebih mudah ditulis.

Metode -metode ini dapat dibagi menjadi dua kelompok:

1. Preprocessor
2. Postprocessor

Preprocessor mencakup alat -alat seperti Sass, Lins dan Stylus. Seperti yang disarankan dengan nama kategori, alat -alat ini memungkinkan Anda untuk menulis CSS dalam sintaksnya sebelum menyusun kode Anda menjadi CSS yang valid.

Postprocessor bekerja dengan cara lain – Anda menulis sintaks CSS non -valid ke file CSS, dan postprocessor akan mengubah nilai -nilai ini menjadi CSS yang valid.

Ada dua postprosesor utama hari ini:

PostCSS adalah anak terbesar di blok, dan Lightning CSS adalah anak yang baru dan penting. Kami akan membicarakannya sedikit.

Saya pikir postprocessor memenangkan permainan yang dikompilasi

Postprosesor telah berada di ambang kemenangan, karena PostCSS selalu menjadi alat yang diperlukan di toolchain.

Plugin postcs yang paling jelas (dan berguna) untuk waktu yang lama adalah autoprefixer – ia menciptakan awalan vendor untuk Anda sehingga Anda tidak harus menghadapinya.

/* Input */
.selector {
  transform: /* ... */; 
}

.selector {
  -webkit-transform: /* ... */;
  transform: /* ... */;
}

Dapat dikatakan bahwa hari ini kita tidak perlu terlalu banyak pengubah otomatis karena browser lebih interaktif, tetapi tidak ada yang ingin tidak memiliki pengubah otomatis karena menghilangkan kekhawatiran kita tentang awalan vendor.

Alasan kecenderungan nyata untuk menyeimbangkan postprosesor meliputi:

1. CSS lokal mendapatkan fungsi dasar
2. Batalkan Dukungan Preprosesor
3. CSS Petir

Biarkan saya memperluas masing -masing.

CSS lokal mendapatkan fungsi dasar

Pertama ada preprocessor CSS karena CS asli tidak memiliki fitur yang sangat penting bagi sebagian besar pengembang, termasuk:

• Variabel CSS
• Fungsi bersarang
• Memungkinkan pengguna untuk memecah CSS menjadi beberapa file tanpa permintaan tambahan tambahan
• Bersyarat if Dan for
• Protein dan fungsi campuran

Ada banyak kemajuan dalam CSS lokal selama bertahun -tahun. Ini telah mendapatkan dukungan browser yang kuat untuk dua fitur pertama:

Dengan hanya dua fitur ini, saya menduga bahwa sebagian besar pengguna CSS bahkan tidak perlu mem-boot pra-prosesor atau pasca-prosesor. Dan, if() Fitur masa depan juga akan ada di CSS.

Namun, bagi kita semua yang perlu memprioritaskan pemeliharaan dan kinerja beban, kita masih membutuhkan fitur ketiga – kemampuan untuk memecah CSS menjadi beberapa file. Ini dapat digunakan dengan SAS use Fitur atau postcs import Fungsi (oleh postcss-import plugin).

PostCSS Juga disertakan plug-in yang dapat membantu Anda membuat persyaratan, pencampuran, dan fitur.

Meskipun, dalam pengalaman saya, lebih baik mengganti mixin dengan tailwind @apply fitur.

Ini membawa kita ke angin.

Batalkan Dukungan Preprosesor

Tailwind 4 telah secara resmi membatalkan dukungan untuk preprosesor. Dari dokumentasi Tailwind:

Tailwind CSS V4.0 adalah alat pembuatan CSS yang berfungsi penuh yang dirancang khusus untuk alur kerja tertentu dan tidak dirancang untuk bekerja dengan preprocessing CSS menggunakan sass, linsesi, atau stylus. Pikirkan CSS Tailwind sendiri sebagai preprocessor Anda – Anda tidak boleh menggunakan Tailwind dengan Sass karena Anda tidak menggunakan Sass dengan stylus. Karena Tailwind dirancang untuk browser modern, Anda tidak benar -benar membutuhkan preprocessing hal -hal seperti bersarang atau variabel, dan tailwind itu sendiri akan melakukan hal -hal seperti bundling impor dan menambahkan awalan vendor.

Jika Anda menyertakan Tailwind 4 melalui metode pemasangan yang paling mudah, Anda tidak dapat menggunakan preprocessor dengan tailwind.

@import `tailwindcss`

Itu karena pernyataan yang diimpor ini membuat tailwind tidak kompatibel dengan Sass, Simest dan Stylus.

Namun, (untungnya), jika file yang diimpor berisi .css memperluas. Jadi, jika Anda ingin menggunakan Tailwind dengan Sass, Anda bisa. Tapi itu hanya sedikit kata.

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Secara pribadi, saya tidak suka gaya tailwind pra-penerbangan, jadi saya mengecualikannya dari file.

@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

Either way, banyak orang tidak tahu bahwa Anda dapat terus menggunakan preprocessor angin sakal. Jadi, saya menduga preprocessor akan menjadi kurang populer dan ada lebih banyak momentum saat penarik tumbuh.

Sekarang, di bawah tailwind adalah postprocessor CSS, yang disebut CSS Lightning, sehingga membuat kita membicarakannya.

CSS Petir

Lightning CSS adalah postprocessor yang dapat melakukan banyak hal yang dibutuhkan pengembang modern – sehingga menggantikan sebagian besar toolchains postcss, yang meliputi:

Selain memiliki serangkaian fitur bawaan yang bagus, ia juga memenangkan postcs karena sangat cepat.

Lightning CSS lebih dari 100 kali lebih cepat dari alat serupa berdasarkan JavaScript. Ini dapat menyusut lebih dari 2,7 juta baris kode per detik pada satu utas.

Kecepatan membantu Lightning CS menang karena banyak pengembang adalah pecandu kecepatan yang tidak keberatan beralih alat untuk mengurangi waktu kompilasi. Tapi CSS Lightning menang juga, karena memiliki distribusi yang hebat.

Ini dapat digunakan secara langsung sebagai plugin vite (didukung oleh banyak kerangka kerja). Ryan Trimble memiliki artikel langkah demi langkah yang dapat diatur menggunakan vite saat Anda membutuhkan bantuan.

// vite.config.mjs
export default {
  css: {
    transformer: 'lightningcss'
  },
  build: {
    cssMinify: 'lightningcss'
  }
};

Jika Anda memerlukan plugin PostCSS tambahan, Anda juga dapat memasukkannya sebagai bagian dari toolchain kode pos Anda.

// postcss.config.js
// Import other plugins...
import lightning from 'postcss-lightningcss'

export default {
  plugins: [lightning, /* Other plugins */],
}

Banyak pengembang terkenal telah beralih ke Lightning CSS, tetapi belum melihat ke belakang. Chris Coyier mengatakan dia akan menggunakan “pengaturan pemrosesan CSS super dasar” sehingga Anda dapat yakin bahwa jika Anda ingin beralih ke petir, Anda tidak boleh menginjak jari kaki apa pun.

Jika Anda ingin meninggalkan preprocessor hari ini

Anda perlu memeriksa fitur yang diperlukan. CSS lokal sudah cukup jika Anda membutuhkannya:

• Variabel CSS
• Fungsi bersarang

Lightning CSS sudah cukup jika diperlukan:

• Variabel CSS
• Fungsi bersarang
• import Pernyataan untuk mendekomposisi CSS menjadi beberapa file

Angin ekor (dengan @apply) Jika perlu, itu sudah cukup:

Jika Anda masih membutuhkan kondisi seperti ini if,,,,, for Dan fitur -fitur lainnya, masih lebih baik untuk tetap dengan Sass sekarang. (Saya mencoba dan mengalami masalah interoperabilitas postcss-for Dan Lightning CS Saya tidak akan membahas detailnya di sini.

Hanya itu yang ingin saya bagikan dengan Anda hari ini. Saya harap ini akan membantu Anda jika Anda telah memikirkan Toolchain CSS.