WikiDer > PostCSS

PostCSS
PostCSS
Filosofning toshi, PostCSS logotipi
Tuzuvchi (lar)Andrey Sitnik, Ben Briggs, Bogdan Chadkin[1]
Dastlabki chiqarilish2013 yil 4-noyabr; 7 yil oldin (2013-11-04)
Barqaror chiqish
8.0.0, Prezident Ose / 2020 yil 15-sentyabr; 2 oy oldin (2020-09-15)[2]
Omborgithub.com/ postcss/ postcss
YozilganJavaScript
Operatsion tizimO'zaro faoliyat platforma
Mavjud:Ingliz tili
TuriCSS ishlab chiqish vositasi
LitsenziyaMIT litsenziyasi[3]
Veb-saytpostcss.org

PostCSS a dasturiy ta'minotni ishlab chiqish vositasi ishlatadigan JavaScriptasoslangan plaginlari muntazam avtomatlashtirish CSS operatsiyalar.[4] Bu Andrey Sitnik tomonidan uning yovuz marsliklarga mo'ljallangan so'nggi ishida paydo bo'lgan g'oya bilan ishlab chiqilgan.[5]

Funktsionallik

PostCSS ish oqimi

PostCSS - bu ramka CSS vositalarini ishlab chiqish.[6] Undan Sass va LESS kabi andoza tilini ishlab chiqish uchun foydalanish mumkin.[7]

PostCSS yadrosi quyidagilardan iborat:[8]

  • CSS tahlilchi hosil qiladi mavhum sintaksis daraxti
  • To'plam sinflar daraxtni o'z ichiga oladi
  • CSS generatori ob'ekt daraxti uchun CSS qatorini yaratadi
  • Kod xaritasi ishlab chiqaruvchisi kiritilgan CSS o'zgarishlari uchun

Xususiyatlari plaginlari orqali mavjud. Plaginlar - bu ishlaydigan kichik dasturlar ob'ekt daraxti. Yadro CSS satrini ob'ekt daraxtiga o'zgartirgandan so'ng, plaginlar daraxtni tahlil qiladi va o'zgartiradi. Keyin PostCSS plagin bilan almashtirilgan daraxt uchun yangi CSS qatorini yaratadi.

PostCSS va uning plaginlari yozilgan JavaScript orqali tarqatiladi npm, qaysi taklif API-lar past darajadagi JavaScript operatsiyalari uchun.

Kabi PostCSS-dan foydalanish tizimlari kabi rasmiy vositalar mavjud Veb-paket,[9] Gulp,[10] va Grunt.[11] Bundan tashqari, konsol interfeysi mavjud.[12] Browserify yoki Veb-paket brauzerda PostCSS-ni ochish uchun ishlatilishi mumkin.[13]

Sintaksislar

PostCSS-ni o'zgartirishga imkon beradi tahlilchi va generator. Bunday holda, PostCSS bilan ishlash uchun ishlatilishi mumkin Kamroq[14] va SCSS[15] manbalar. Biroq, PostCSS o'z-o'zidan Sass yoki Less to CSS-ni kompilyatsiya qila olmaydi. Bu nima - asl fayllarni o'zgartirish - masalan, CSS xususiyatlarini saralash yoki xatolarni kodini tekshirish. PostCSS SugarSS-ni qo'llab-quvvatlaydi.

Plaginlar

PostCSS plaginlari tahlil qilish va xususiyatlarni saralashdan tortib turli xil CSS ishlov berish vazifalarini bajaradi minifikatsiya qilish.

To'liq plaginlar ro'yxati quyida keltirilgan ba'zi bir misollar bilan postcss.parts saytida joylashgan.

  • Avtomatik tuzatuvchi brauzer prefikslarini qo'shish va tozalash uchun.[16]
  • CSS modullari CSS selektorlarini ajratib olish va ularni tartibga solish uchun. Uning bir qismi sifatida etkazib beriladi Veb-paket.[17][18]
  • uslublar ga tahlil qilish Xatolar uchun CSS kodi va uslubning muvofiqligini tekshiring.[19]
  • stilfmt CSS kodini stylelint sozlamalariga muvofiq tuzatadi.[20]
  • PreCSS bir qismini bajarish Sass/Kamroq oldindan ishlov berish funktsiyalari.[21]
  • postcss-preset-env tugallanmagan CSS spetsifikatsiyasi qoralamalaridan xususiyatlarni taqlid qilish.[22]
  • cssnano bo'sh joylardan qutulish va kodni qayta yozish orqali CSS-ni kichikroq qilish.[23]
  • RTLCSS dizayni mos bo'lishi uchun CSS kodini o'zgartirish o'ngdan chapga yozish (bunday qo'llanilgan Arabcha va Ibroniycha).[24]
  • postcss-aktivlar, postcss-inline-svg va postcss-sprites grafikalar bilan ishlash.[25][26][27]

Tarix

Rework loyihasi davomida CSS-ni modulli qayta ishlash g'oyasi TJ Xolovaychuk tomonidan 2012 yil 1 sentyabrda taklif qilingan.[28] 2013 yil 28 fevralda TJ buni jamoatchilik oldida bildirdi.[29]

2013 yil 14 martda Andrey Sitnikning Evil Martians uchun oldingi ishi Rop asosidagi Autoprefixer plaginini yaratdi.[30] Dastlab, plagin nomi qayta ishlab chiqaruvchilar edi.[31]

Autoprefixer o'sishi bilan Rework endi o'z ehtiyojlarini qondira olmadi.[32] 2013 yil 7 sentyabr,[33] Andrey Sitnik PostCSS-ni Rework g'oyalari asosida ishlab chiqishni boshladi.[34]

3 oy ichida birinchi PostCSS plagini, grunt-pixrem chiqdi.[35] 2013 yil 22-dekabr, Autoprefixer 1.0 versiyasi PostCSS-ga ko'chirildi.[36]

PostCSS uchun asosiy uslub yo'naltirilgan alkimyo.[37] Loyiha logotipi faylasuf toshi.[38] PostCSS ning katta va kichik versiyalari o'z nomlarini Ars Getiya jinlar.[39] Masalan, 1.0.0 versiyasi Marquis Decarabia deb nomlangan.

Postprocessor atamasi biroz chalkashliklarni keltirib chiqardi.[40] PostCSS jamoasi bu atamadan foydalanib, PostCSS shablon tili (preprocessor) emas, balki CSS vositasi ekanligini ko'rsatdi. Biroq, ba'zi ishlab chiquvchilar postprocessor atamasi brauzer vositalariga mos keladi (masalan, -prefikssiz).[41] PreCSS-ning chiqarilishidan keyin vaziyat yanada murakkablashdi. Endi postprocessor o'rniga PostCSS jamoasi protsessor atamasidan foydalanadi.[42]

Adabiyotlar

  1. ^ PostCSS-ni npm-ga kim chiqarishi mumkin
  2. ^ PostCSS nashrlari
  3. ^ PostCSS reposidagi litsenziya
  4. ^ Tuts + kursida PostCSS haqida birinchi maqola
  5. ^ Yovuz marsliklar PostCSS reposida ish tutishadi
  6. ^ PostCSS munozarasi nima?
  7. ^ PostCSS chuqur sho'ng'in: "PreCSS" bilan qayta ishlash
  8. ^ Andrey Sitnik - PostCSS: Sassdan keyingi kelajak va kam
  9. ^ postcss-loader
  10. ^ gulp-postcss
  11. ^ xirillash-postklar
  12. ^ postcss-cli
  13. ^ Brauzerda postcss-ni ishga tushirish
  14. ^ postcss-kamroq
  15. ^ postcss-scss
  16. ^ avtoprefikser
  17. ^ CSS-modullari
  18. ^ css-loader bog'liqliklari
  19. ^ uslublar
  20. ^ stilfmt
  21. ^ oldindan
  22. ^ preset-env.cssdb.org
  23. ^ cssnano.co
  24. ^ rtlcss.com
  25. ^ postcss-aktivlar
  26. ^ postcss-inline-svg
  27. ^ postcss-sprites
  28. ^ Xolovaychuk, TJ (2012-09-01). "Dastlabki majburiyat · reworkcss / rework @ 0a7be25". GitHub. Olingan 2019-07-21.
  29. ^ Xolovaychuk, TJ (2013-02-28). "Qayta ishlash bilan CSS-ni modulli qayta ishlash - TJ Xolovaychuk". Tumblr. Arxivlandi asl nusxasi 2014-09-18. Olingan 2014-09-18.
  30. ^ Sitnik, Andrey (2013-03-14). "Dastlabki majburiyat · postcss / autoprefixer @ d36346e". GitHub. Olingan 2019-07-21.
  31. ^ Sitnik, Andrey (2013-03-28). "Loyihani autoprefixer deb o'zgartiring · postcss / autoprefixer @ 419a77d". GitHub. Olingan 2019-07-21.
  32. ^ Gallager, Nikolas (2014-06-04). "Avtoprefikser ehtiyojlarini engillashtirish · № 20-son · reworkcss / css". GitHub. Olingan 2019-07-21.
  33. ^ Sitnik, Andrey (2013-09-07). "Init loyihasi · postcss / postcss @ 2d96cea". GitHub. Olingan 2019-07-21.
  34. ^ Sitnik, Andrey (2015-09-07). "PostCSS tug'ilgan kunining ikkinchi kuni - Martian Chronicles, Evil Martians jamoasi blogi". Martian Chronicles, Evil Martians jamoasining blogi. Olingan 2019-07-21.
  35. ^ Rob, Vierzovskiy (2013-12-14). "Dastlabki majburiyat · robwierzbowski / grunt-pixrem @ 0f7b662". GitHub. Olingan 2019-07-21.
  36. ^ [Sitnik, Andrey (2013-12-21). "Release 1.0" Plus ultra "· postcss / autoprefixer". GitHub. Olingan 2019-07-20.
  37. ^ Tisäter, Markus (2015-12-31). "Mockup · № 4-son · postcss / postcss.org". Olingan 2019-07-21.
  38. ^ @PostCSS (2015-08-14). "PostCSS logotipi - bu metallarni oltinga aylantira oladigan faylasuf toshining alkimyo belgisi" (Tweet) - orqali Twitter.
  39. ^ @Autoprefixer (2013-12-17). "Har bir PostCSS versiyasining kod nomi alchemy kitobidagi jinlar ro'yxatidan olingan" Lemegeton Clavicula Salomonis"" (Tweet) - orqali Twitter.
  40. ^ Marohnić, Matija (2014-09-07). "CSS oldingi va keyingi ishlov berish | Silvenonning blogi". Silvenonning blogi. Arxivlandi asl nusxasi 2017-11-09 kunlari. Olingan 2017-11-09.
  41. ^ Kelajakdagi xususiyatlarga asoslangan holda qayta ishlash bilan bog'liq muammo
  42. ^ @PostCSS (2015-07-28). "Xatolarimni tan olish vaqti keldi." Postprocessor "muddati yomon edi. PostCSS jamoasi undan foydalanishni to'xtatdi" (Tweet) - orqali Twitter.

Tashqi havolalar