CSS preprocessori postprocessordan nimasi bilan farq qiladi?

Savol

CSS preprocessori (Sass/Less) bilan postprocessori (PostCSS) o'rtasidagi farq nimada va Tailwind bu manzarada qayerga joylashadi?

Qisqa javob

Preprocessor (Sass, Less) oddiy CSS'da mavjud bo'lmagan o'z sintaksisini — o'zgaruvchilar, ichma-ichlik, mikslar — qo'shadi va uni toza CSS'ga kompilyatsiya qiladi. Postprocessor (PostCSS) kirishda allaqachon valid CSS'ni oladi va uni pluginlar orqali transformatsiya qiladi — masalan, vendor prefikslarni avtomatik qo'shadi.

Batafsil javob

Preprocessorlar (Sass/SCSS, Less, Stylus):

• Brauzerning CSS-parseri tushunmaydigan o'zining kengaytirilgan sintaksisi (.scss, .less) bilan ishlaydi.
• Uzoq vaqt oddiy CSS'da mavjud bo'lmagan imkoniyatlarni beradi: o'zgaruvchilar ($primary), selektorlarning ichma-ichligi, mikslar (parametrli qayta ishlatiladigan stil bloklari), matematika, @extend, tsikllar/shartlar (Sass'da).
• Ish natijasi — allaqachon brauzerga uzatiladigan oddiy .css'ga kompilyatsiya.
• Bularning ko'pi bugun qisman nativ CSS bilan qoplanadi (CSS-o'zgaruvchilar --var, CSS Nesting orqali ichma-ichlik), shu sababli sof preprocessorlarning dolzarbligi kamaymoqda, lekin mikslar va logika (@each, @if) ularning ustunligi bo'lib qolmoqda.

Postprocessorlar (PostCSS):

• Kirishda kengaytirilgan dialekt emas, balki allaqachon sintaktik jihatdan valid CSSni oladi.
• PostCSS o'zi — bu shunchaki plagin arxitekturasiga ega dvigatel (CSS'ni AST'ga parse qiladi va pluginlarga uni transformatsiya qilish imkonini beradi). Butun logika — pluginlarda:
  • autoprefixer — brauzerlarni qo'llab-quvvatlash jadvali (browserslist) asosida vendor prefikslarni (-webkit-, -moz-) qo'shadi.
  • postcss-preset-env — kelajakdagi CSS'ni bugun yozish imkonini beradi, brauzerlar qo'llab-quvvatlaydigan variantga transpilyatsiya qilib.
  • cssnano — minifikatsiya.
• Muhim farq: postprocessor sintaktik jihatdan hech narsa "o'ylab topmaydi" — u yangi til yaratmaydi, balki allaqachon CSS bo'lgan (yoki deyarli CSS bo'lgan) narsa ustida ishlaydi.

Tailwind CSS — bu utility-first freymvork (o'z qoidalaringizni yozish o'rniga flex, p-4, text-red-500 kabi tayyor klasslar), texnik jihatdan esa u PostCSS-plugin sifatida amalga oshirilgan: bundling bosqichida u sizning razmetka fayllaringizni skanerlaydi, ishlatilgan klasslarni topadi va ular uchun yakuniy CSS generatsiya qiladi. Ya'ni Tailwind — bu preprocessor ham, PostCSS'ga alternativa ham emas, balki PostCSS-konveyerining pluginlaridan/iste'molchilaridan biri.

Amalda preprocessor va postprocessor ko'pincha birga ishlatiladi: .scss yoziladi, Sass uni CSS'ga kompilyatsiya qiladi, so'ngra PostCSS (autoprefixer, Tailwind) natijani qo'shimcha qayta ishlaydi.

Misol

// styles.scss — preprocessor: o'zgaruvchilar, ichma-ichlik, miks
$primary: #3b82f6;

@mixin button-base {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.card {
  border: 1px solid #eee;

  .title {
    color: $primary;
    font-weight: 600;
  }

  .btn {
    @include button-base;
    background: $primary;
  }
}

// postcss.config.js — postprocessor: allaqachon tayyor CSS ustidagi pluginlar
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}, // -webkit-, -moz- va h.k. qo'shadi
    cssnano: process.env.NODE_ENV === 'production' ? {} : false,
  },
}

Qo'shimcha savollar

• Sass imkoniyatlaridan qaysilarini endi preprocessorsiz nativ CSS bilan qilish mumkin?
• browserslist qanday ishlaydi va autoprefixer qaysi prefikslar kerakligini qayerdan biladi?
• Nega Tailwind prodda kichik CSS fayl beradi, garchi freymvorkda minglab klass bo'lsa ham?