پست سی‌اس‌اس

پُست سی‌اس‌اس یک ابزار توسعه نرم‌افزار است که از افزایه‌های مبتنی بر جاوا اسکریپت برای خودکارسازی عملیات معمول سی‌اس‌اس استفاده می‌کند.First article about PostCSS in Tuts+ course از این ابزار برای تهیه کد ویکی‌پدیا،Adding PostCSS commit in Wikipedia repoWikimedia Stylelint Config فیس بوک،Improving CSS quality at Facebook and beyond وردپرسWordPress webpack PostCSS usageWordPress Stylelint ConfigPostCSS Themes plugin و گیت‌هابPostCSS settings GitHub build toolPrimer Stylelint Config استفاده شده‌است. پُست سی‌اس‌اس ابزار سی‌اس‌اس محبوبی در بین کاربران ان‌پی‌ام است.CSS preprocessors downloads from npm این ایده توسط آندری سیتنیک با ایده گرفتن از منشأ آن در کارهای مقدماتی خود برای Evil Martians طراحی شده‌است.Evil Martians commit in PostCSS repo

 چگونه کار می‌کند 
 ساختار 
چپ|بندانگشتی| نحوهٔ کار PostCSS
برخلاف سَس و لَس، پست سی‌اس‌اس یک زبان الگوی کامپایل شده با سی‌اس‌اس نیست بلکه چارچوبی برای توسعه ابزارهای CSS است.What is PostCSS discussion با این وجود می‌توان از آن برای تهیهٔ یک زبان الگویی مانند سَس و لِس استفاده کرد.PostCSS Deep Dive: Preprocessing with “PreCSS”

هسته پست سی‌اس‌اس شامل اجزای زیر است:Andrey Sitnik - PostCSS: The Future After Sass and LESS
 تجزیه‌کننده سی‌اس‌اس که یک درخت شیء (درخت نحو انتزاعی) برای یک خط از کد سی‌اس‌اس تولید می‌کند.
 مجموعه کلاس‌هایی که درخت را تشکیل می‌دهند؛
 سازنده سی‌اس‌اس که یک خط سی‌اس‌اس برای درخت شی ایجاد می‌کند.
 سازنده نقشه کد برای تغییرات سی‌اس‌اس ایجاد شده‌است.

تمام ویژگی‌های مفید از طریق افزونه‌ها در دسترس قرار می‌گیرند. افزونه‌ها برنامه‌های کوچکی هستند که با درخت شی کار می‌کنند. بعد از اینکه هسته یک رشتهٔ سی‌اس‌اس را به یک درخت شی تبدیل کرد، افزایه‌ها به نوبت، درخت را تحلیل و تغییر می‌دهند. سپس هسته پست سی‌اس‌اس رشتهٔ سی‌اس‌اس جدیدی را برای درخت تغییر یافته در افزونه ایجاد می‌کند.

 موارد استفاده 
هم هسته پست‌سی‌اس‌اس و هم افزونه‌ها در جاوا اسکریپت نوشته شده و از طریق ان‌پی‌ام توزیع می‌شوند.

پست سی‌اس‌اس برای عملکردهای سطح پایین جاوا اسکریپت رابط برنامه‌نویسی کاربردی ارائه می‌دهد:

ابزار رسمی مانند وب‌پک،postcss-loader گالپ،gulp-postcss و گرانتgrunt-postcss استفاده از پست سی‌اس‌اس در سیستم‌های ساخت ممکن می‌سازد. همچنین یک رابط کنسولی برای دانلود وجود دارد. ازpostcss-cli Browserify یا Webpack می‌توان برای باز کردن پست سی‌اس‌اس در یک مرورگر استفاده‌کرد.Running postcss in the browser

 نحوها 
پست سی‌اس‌اس اجازه می‌دهد تجزیه‌کننده و تولیدکننده را تغییر دهید. در این حالت، پست سی‌اس‌اس می‌تواند برای کار با منابع لِسpostcss-less و اس‌سی‌اس‌اسpostcss-scss استفاده‌شود. با این حال، پست سی‌اس‌اس به خودی خود نمی‌تواند سَس یا لِس را به سی‌اس‌اس کامپایل کند، بلکه آنچه که این ابزار انجام می‌دهد تغییر فایل‌های اصلی است - برای مثال، با مرتب‌سازی ویژگی‌های سی‌اس‌اس یا چک‌کردن کد برای خطاها.

علاوه بر این، پست سی‌اس‌اس شوگراس‌اس را پشتیبانی می‌کند. دستور زبان شوگراس‌اس از نظر سادگی و ایجاز تقریباً شبیه سَس و استایلوس است.sugarss

 افزایه‌ها 
تعداد افزونه‌های پست سی‌اس‌اس بیش از ۳۰۰ مورد است.PostCSS plugins list افزونه‌های پست سی‌اس‌اس می‌توانند اکثر کارهای پردازش سی‌اس‌اس اعم از آنالیز و مرتب‌سازی خواص گرفته تا کوچک سازی را انجام دهند. با این حال، تفاوت زیادی بین کیفیت و محبوبیت افزایه‌های پست سی‌اس‌اس موجود است.

لیست کامل افزونه‌ها را می‌توان در postcss.parts یافت. در زیر چند مثال، همراه توضیح این که برای چه چیزی استفاده می‌شوند، آورده‌شده‌است.
 Autoprefixerautoprefixer که برای افزودن و پاک کردن پیشوندهای مرورگر استفاده می‌شود. این محبوب‌ترین افزونه PostCSS است. با توجه به رأی‌گیری وب‌سایت SitePoint، پنجاه‌وشش درصد از پاسخ دهندگان در مارس ۲۰۱۶، از Autoprefixer استفاده کردند.The Results of The Ultimate CSS Survey
 ماژول‌های CSScss-modules که برای جدا نگاه‌داشتن انتخاب‌گرهای CSS و سازماندهی کد استفاده می‌شود. آن به عنوان بخشی از بستهٔ نرم‌افزاری محبوب Webpack عرضه می‌شود.css-loader dependencies
 stylelintstylelint که برای تجزیه و تحلیل کردن کد CSS برای اشتباهات و بررسی کردن ثبات سبک استفاده می‌شود. توسط ویکی‌پدیا، فیس بوک و GitHub استفاده می‌شود. یک افزونه دیگر، stylefmtstylefmt کد CSS را مطابق با تنظیمات stylelint اصلاح می‌کند.
 PreCSSprecss که برای انجام برخی از توابع پیش پردازش Sass / Less استفاده می‌شود.
 postcss-preset-enpreset-env.cssdb.org که برای تقلید از ویژگی‌های پیش‌نویس‌های ناتمام CSS استفاده می‌شود.
 cssnano که برای کوچک‌تر کردن CSS، توسط از بین بردن فضاها و بازنویسی کد، استفاده می‌شود. مورد استفاده Webpack، BBC و JSFiddle.cssnano users list
 RTLCSSrtlcss.com که برای تغییر کد CSS، به گونه ای که طرح برای نوشتن از راست به چپ مناسب باشد (در عربی و عبری اعمال می‌شود)، استفاده می‌شود. توسط WordPress استفاده می‌شود.RTL CSS generation: Switch from CSSJanus to RTLCSS
 postcss-units ,postcss-assets postcss-inline-svgpostcss-inline-svg و postcss-spritespostcss-sprites برای کار با گرافیک.

تعدادی ابزار وجود دارد که عملکرد آن‌ها توسط PostCSS گسترش می‌یابد. به عنوان مثال، بستهٔ نرم‌افزاری محبوب Webpack از PostCSS برای کار با CSS استفاده می‌کند.css-loader sources

 انتقادات 
با وجود این که برخی از افزونه‌ها با انتقاد مواجه شده‌اند،The Trouble With Preprocessing Based on Future Specs برخی از افزونه‌های PostCSS به استاندارد تبدیل شده‌اند. به عنوان مثال، Google برای حل مشکل پیشوندهای مرورگر در CSS، استفاده از Autoprefixer را توصیه می‌کند.

نظر صنعت دربارهٔ PostCSS بسیار مثبت است،An Introduction To PostCSS تا جایی که توسعه دهندگان Sass در نظر گرفته‌اند اضافه شدن PostCSS به Sass مفید است.Extending Sass with PostCSS

بزرگترین سؤال این است که آیا افزونه‌های PostCSS تنها گزینه ای باشند که هنگام ساخت یک سیستم CSS استفاده می‌شوند. از یک سو، PreCSS یا cssnext می‌تواند بسیاری از کارکردهای Sass و Less را انجام دهد،Breaking up with Sass: it’s not you, it’s me با توجه به این که SugarSS می‌تواند جایگزین خوبی برای سینتکس مینیمالیستیک Sass و Stylus باشد.SugarSS discussion on Meteor forum از طرف دیگر، برخی از کارشناسان، از جمله خود سازنده PostCSS، توصیه می‌کنند که برای پروژه‌های بزرگ، از همان Sass و Less استفاده شود.dotCSS 2015 - Andrey Sitnik - Fix Global CSS with PostCSS

 مزایا 
 امکانات. با توجه به این که بسیاری از افزونه‌های PostCSS خاص هستند،PostCSS Mythbusting: Four PostCSS Myths Busted PostCSS اغلب به Sass و Less اضافه می‌شود.Using PostCSS Together with Sass, Stylus, or LESS
 اتحاد افزونه‌های PostCSS بیشتر وظایف ساختن CSS، از بررسی کد برای کشف خطاها، تا کوچک سازی، پوشش می‌دهند. در نتیجه، تمام ابزارهای CSS می‌توانند از تجزیه‌گر، معماری و ابزار توسعهٔ یکسان استفاده کنند. PostCSS با یکسان کردن درخت‌های همهٔ افزونه‌ها، بر خلاف حالت عام که هر افزونه‌ای درخت خود را بسازد، عملکرد را بهبود می‌دهد.
 ماژول‌ها کاربر در انتخاب افزونه‌های PostCSS آزاد است و می‌تواند موارد غیرضروری را برای عملکرد سریع‌تر خاموش کند.PostCSS performance discussion in Twitter با افزونه‌های مختلفی که مشکلات مشابه را حل می‌کنند، کاربر می‌تواند بهترین گزینه را متناسب با نیازهای خود انتخاب کند.PostCSS – Sass Killer or Preprocessing Pretender? سازنده PostCSS معتقد است که هرچه تعداد افزونه‌های بیشتری مورد توجه کاربر قرار بگیرد، در نهایت بهتر می‌شوند.
 سرعت. PostCSS به یکی از سریع‌ترین تجزیه‌گرهای CSS مبتنی بر JS مجهز شده‌است.PostCSS parsers benchmark تا بیست برابر سریع‌تر از Ruby Sass و چهار برابر سریع‌تر از انجام پردازش ساده است.PostCSS preprocessors benchmark با این حال، راندمان واقعی بسیار به تعداد افزونه‌های نصب‌شده بستگی دارد. در واقع، خود سازندگان PostCSS تأیید کرده‌اند که پردازنده‌های مدرن بسیار سریع‌تر از آن کار می‌کنند که افزایش سرعت قابل توجه باشد.PostCSS becomes 1.5x faster

 معایب 
 پیکربندی دشوار. برخی از توسعه دهندگان تمایل دارند از انتخاب افزونه‌ها و تنظیم آن‌ها برای همکاری با یک‌دیگر خودداری کنند. مجموعه‌های افزونه‌های آماده، فقط یک راه حل جزئی برای این مشکل هستند.
 سینتکس غیر استاندارد. با توجه به استفادهٔ هر پروژه از مجموعه افزونه‌های خاص خود، یک توسعه دهنده جدید ممکن است نفهمد که عملکرد ناشناخته، مربوط به افزونه ناشناختهٔ PostCSS است. مشخص کردن افزونه‌ها، هنگام استفادهٔ postcss توصیه می‌شود، اما بعضی از افراد آن را غیرضروری می‌دانند.postcss-use downloads
 انتخاب‌گرها و مقادیری که از تجزیه‌گرهای جداگانه استفاده می‌کنند. PostCSS انتخابگرهای CSS و مقادیر خاصیت‌ها را به صورت خط ذخیره می‌کند، بدون اینکه آنها را بیشتر تجزیه کند. برای تجزیه آن‌ها، افزونه‌ها باید از تجزیه‌گرهای اضافی استفاده کنند. تیم PostCSS قصد دارد این مسئله را در نسخه‌های بعدی برطرف کند.Integrate value & selector parsing into PostCSS core
 پردازش‌های متوالی. با داشتن درخت، قادر به پاسخگویی به فقط یک افزونه در هر زمان، ممکن است داشتن تعدادی پلاگین منجر به عملکرد کندتری شود. علاوه بر این، توابعی وجود دارند که هیچ افزونه‌ای قادر به پردازش آن‌ها نیست. تیم PostCSS قصد دارد این مسئله را در نسخه‌های بعدی برطرف کند.Event based API

 تاریخ 
ساخته‌شده در حین پروژهٔ Rework، ایدهٔ پردازش ماژولار CSS توسط TJ Holowaychuk در تاریخ یکم سپتامبر ۲۰۱۲ پیشنهاد شد. ۲۸ فوریه ۲۰۱۳، TJ آن را به صورت عمومی بیان کرد.

در ۱۴ مارس ۲۰۱۳، کار Andrew Sitnik در front-end برای Evil Martians، منجر به Autoprefixer، که یک افزونه Rework-based است، شد. در ابتدا، نام این افزونه rework-vendors بود.

با بزرگ شدن Autoprefixer، افزونهٔ Rework دیگر نمی‌توانست نیازها را برآورده سازد. در ۷ سپتامبر ۲۰۱۳، Andrew Sitnik توسعه PostCSS را مبتنی بر ایده‌های Rework آغاز کرد.

در ۳ ماه، اولین افزونه PostCSS، به نام grunt-pixrem منتشر شد. در ۲۲ دسامبر ۲۰۱۳، نسخه Autoprefixer 1.0 به PostCSS مهاجرت کرد.[

برای PostCSS، تمرکز اصلی از نظر سبک، کیمیاگری است. لوگوی پروژه نمایانگر سنگ فیلسوف است. نسخه‌های مهم و جزئی PostCSS نام خود را از شیاطین Ars Goetia می‌گیرند. به عنوان مثال، نسخه 1.0.0 Marquis Decarabia نام دارد.

اصطلاح پس‌پردازشگر، موجب سردرگمی شده‌است. تیم PostCSS این اصطلاح را به کار برد تا نشان دهد PostCSS یک زبان قالب (پیش‌پردازنده) نیست، بلکه یک ابزار CSS است. با این حال، برخی از توسعه‌دهندگان، فکر می‌کنند که عبارت postprocessor مناسب تر ابزارهای مرورگر است (برای مثال، بدون نسخه). بعد از انتشار PreCSS اوضاع حتی پیچیده‌تر شده‌است. حال به جای پس‌پردازشگر، تیم PostCSS از اصطلاح پردازنده استفاده می‌کند.

 منابع 

 پیوند به بیرون 
 سایت رسمی

 لیست افزونه‌ها

رده:نرم‌افزارهای آزاد برنامه‌نویسی‌شده با جاوااسکریپت
رده:کامپایلرها و مفسرهای آزاد
رده:نرم‌افزارهای دارای اجازه‌نامه ام‌آی‌تی
رده:تجزیه‌کننده
رده:برگه‌های سبک آبشاری