پست سی‌اس‌اس

پُست سی‌اس‌اس یک ابزار توسعه نرم‌افزار است که از افزایه‌های مبتنی بر جاوا اسکریپت برای خودکارسازی عملیات معمول سی‌اس‌اس استفاده می‌کند. از این ابزار برای تهیه کد ویکی‌پدیا، فیس بوک، وردپرس و گیت‌هاب استفاده شده‌است. پُست سی‌اس‌اس ابزار سی‌اس‌اس محبوبی در بین کاربران ان‌پی‌ام است. این ایده توسط آندری سیتنیک با ایده گرفتن از منشأ آن در کارهای مقدماتی خود برای Evil Martians طراحی شده‌است.

PostCSS

توسعه‌دهنده(ها)	Andrey Sitnik, Ben Briggs, Bogdan Chadkin
انتشار اولیه	۴ نوامبر ۲۰۱۳ (۲۰۱۳-04}})
انتشار پایدار	7.0.14, President Amy / ۲۲ ژانویه ۲۰۱۹ (۲۰۱۹-22}})
مخزن	github.com/postcss/postcss
نوشته‌شده با	JavaScript
سیستم‌عامل	Cross-platform
در دسترس به	English
نوع	CSS development tool
مجوز	MIT License
وبگاه	postcss.org

چگونه کار می‌کند

ساختار

نحوهٔ کار PostCSS

برخلاف سَس و لَس، پست سی‌اس‌اس یک زبان الگوی کامپایل شده با سی‌اس‌اس نیست بلکه چارچوبی برای توسعه ابزارهای CSS است. با این وجود می‌توان از آن برای تهیهٔ یک زبان الگویی مانند سَس و لِس استفاده کرد.

هسته پست سی‌اس‌اس شامل اجزای زیر است:

• تجزیه‌کننده سی‌اس‌اس که یک درخت شیء (درخت نحو انتزاعی) برای یک خط از کد سی‌اس‌اس تولید می‌کند.
• مجموعه کلاس‌هایی که درخت را تشکیل می‌دهند؛
• سازنده سی‌اس‌اس که یک خط سی‌اس‌اس برای درخت شی ایجاد می‌کند.
• سازنده نقشه کد برای تغییرات سی‌اس‌اس ایجاد شده‌است.

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

موارد استفاده

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

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

ابزار رسمی مانند وب‌پک، گالپ، و گرانت استفاده از پست سی‌اس‌اس در سیستم‌های ساخت ممکن می‌سازد. همچنین یک رابط کنسولی برای دانلود وجود دارد. از Browserify یا Webpack می‌توان برای باز کردن پست سی‌اس‌اس در یک مرورگر استفاده‌کرد.

نحوها

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

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

افزایه‌ها

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

لیست کامل افزونه‌ها را می‌توان در postcss.parts یافت. در زیر چند مثال، همراه توضیح این که برای چه چیزی استفاده می‌شوند، آورده‌شده‌است.

• Autoprefixer که برای افزودن و پاک کردن پیشوندهای مرورگر استفاده می‌شود. این محبوب‌ترین افزونه PostCSS است. با توجه به رأی‌گیری وب‌سایت SitePoint، پنجاه‌وشش درصد از پاسخ دهندگان در مارس ۲۰۱۶، از Autoprefixer استفاده کردند.
• ماژول‌های CSS که برای جدا نگاه‌داشتن انتخاب‌گرهای CSS و سازماندهی کد استفاده می‌شود. آن به عنوان بخشی از بستهٔ نرم‌افزاری محبوب Webpack عرضه می‌شود.
• stylelint که برای تجزیه و تحلیل کردن کد CSS برای اشتباهات و بررسی کردن ثبات سبک استفاده می‌شود. توسط ویکی‌پدیا، فیس بوک و GitHub استفاده می‌شود. یک افزونه دیگر، stylefmt کد CSS را مطابق با تنظیمات stylelint اصلاح می‌کند.
• PreCSS که برای انجام برخی از توابع پیش پردازش Sass / Less استفاده می‌شود.
• postcss-preset-en که برای تقلید از ویژگی‌های پیش‌نویس‌های ناتمام CSS استفاده می‌شود.
• cssnano که برای کوچک‌تر کردن CSS، توسط از بین بردن فضاها و بازنویسی کد، استفاده می‌شود. مورد استفاده Webpack، BBC و JSFiddle.
• RTLCSS که برای تغییر کد CSS، به گونه ای که طرح برای نوشتن از راست به چپ مناسب باشد (در عربی و عبری اعمال می‌شود)، استفاده می‌شود. توسط WordPress استفاده می‌شود.
• postcss-units , postcss-inline-svg و postcss-sprites برای کار با گرافیک.

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

انتقادات

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

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

بزرگترین سؤال این است که آیا افزونه‌های PostCSS تنها گزینه ای باشند که هنگام ساخت یک سیستم CSS استفاده می‌شوند. از یک سو، PreCSS یا cssnext می‌تواند بسیاری از کارکردهای Sass و Less را انجام دهد، با توجه به این که SugarSS می‌تواند جایگزین خوبی برای سینتکس مینیمالیستیک Sass و Stylus باشد. از طرف دیگر، برخی از کارشناسان، از جمله خود سازنده PostCSS، توصیه می‌کنند که برای پروژه‌های بزرگ، از همان Sass و Less استفاده شود.

مزایا

• امکانات. با توجه به این که بسیاری از افزونه‌های PostCSS خاص هستند، PostCSS اغلب به Sass و Less اضافه می‌شود.
• اتحاد افزونه‌های PostCSS بیشتر وظایف ساختن CSS، از بررسی کد برای کشف خطاها، تا کوچک سازی، پوشش می‌دهند. در نتیجه، تمام ابزارهای CSS می‌توانند از تجزیه‌گر، معماری و ابزار توسعهٔ یکسان استفاده کنند. PostCSS با یکسان کردن درخت‌های همهٔ افزونه‌ها، بر خلاف حالت عام که هر افزونه‌ای درخت خود را بسازد، عملکرد را بهبود می‌دهد.
• ماژول‌ها کاربر در انتخاب افزونه‌های PostCSS آزاد است و می‌تواند موارد غیرضروری را برای عملکرد سریع‌تر خاموش کند. با افزونه‌های مختلفی که مشکلات مشابه را حل می‌کنند، کاربر می‌تواند بهترین گزینه را متناسب با نیازهای خود انتخاب کند. سازنده PostCSS معتقد است که هرچه تعداد افزونه‌های بیشتری مورد توجه کاربر قرار بگیرد، در نهایت بهتر می‌شوند.
• سرعت. PostCSS به یکی از سریع‌ترین تجزیه‌گرهای CSS مبتنی بر JS مجهز شده‌است. تا بیست برابر سریع‌تر از Ruby Sass و چهار برابر سریع‌تر از انجام پردازش ساده است. با این حال، راندمان واقعی بسیار به تعداد افزونه‌های نصب‌شده بستگی دارد. در واقع، خود سازندگان PostCSS تأیید کرده‌اند که پردازنده‌های مدرن بسیار سریع‌تر از آن کار می‌کنند که افزایش سرعت قابل توجه باشد.

معایب

• پیکربندی دشوار. برخی از توسعه دهندگان تمایل دارند از انتخاب افزونه‌ها و تنظیم آن‌ها برای همکاری با یک‌دیگر خودداری کنند. مجموعه‌های افزونه‌های آماده، فقط یک راه حل جزئی برای این مشکل هستند.
• سینتکس غیر استاندارد. با توجه به استفادهٔ هر پروژه از مجموعه افزونه‌های خاص خود، یک توسعه دهنده جدید ممکن است نفهمد که عملکرد ناشناخته، مربوط به افزونه ناشناختهٔ PostCSS است. مشخص کردن افزونه‌ها، هنگام استفادهٔ postcss توصیه می‌شود، اما بعضی از افراد آن را غیرضروری می‌دانند.
• انتخاب‌گرها و مقادیری که از تجزیه‌گرهای جداگانه استفاده می‌کنند. PostCSS انتخابگرهای CSS و مقادیر خاصیت‌ها را به صورت خط ذخیره می‌کند، بدون اینکه آنها را بیشتر تجزیه کند. برای تجزیه آن‌ها، افزونه‌ها باید از تجزیه‌گرهای اضافی استفاده کنند. تیم PostCSS قصد دارد این مسئله را در نسخه‌های بعدی برطرف کند.
• پردازش‌های متوالی. با داشتن درخت، قادر به پاسخگویی به فقط یک افزونه در هر زمان، ممکن است داشتن تعدادی پلاگین منجر به عملکرد کندتری شود. علاوه بر این، توابعی وجود دارند که هیچ افزونه‌ای قادر به پردازش آن‌ها نیست. تیم PostCSS قصد دارد این مسئله را در نسخه‌های بعدی برطرف کند.

تاریخ

ساخته‌شده در حین پروژهٔ 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 از اصطلاح پردازنده استفاده می‌کند.

پیوند به بیرون

• سایت رسمی
• postcss در گیت‌هاب
• لیست افزونه‌ها