توسعه CSS ها بوسیله ابزار postcss

همانطور که می دانیم جاوااسکریپت، CSS و همچنین محیط اجرای آنها یعنی مرورگرها پایه های اصلی اپلیکیشن های تحت وب است و ما همواره با چند چالش بسیار مهم در رابطه با آنها روبرو هستم که میتواند منجر به عدم کارایی اپلیکیشن های ما گردد، که در این خصوص می توان به موارد زیر اشاره نمود:سازگاری قابلیت‌های جدید css و جاوااسکریپت با مرورگرهای قدیمی.سختی نگهداری و توسعه css ها به علت عدم وجود ساختار منسجم و عدم وجود قابلیت های مانند متغیرها، فانکشن ها و قابلیت های استفاده مجدد برای جلوگیری از تکرار کدها.جهت غلبه بر این چالش های بسیار حیاتی، ابزار کاربردی به شرح ذیل بوجود آماده است.- کامپایلر و یا بهتر بگویم ترنسپایلر babel جهت تبدیل جاواسکرپیت های جدید به جاوااسکریپ قدیمی به منظور ایجاد قابلیت اجرا در مرورگرهای قدیمی.- پیش پردازنده ها یا CSS Preprocessor ها مانند sass و less جهت ساختار دهی و ایجاد قابلیت های برنامه نویسی به css ها اما با وجود دو ابزار خوب فوق جهت جاوااسکریپت ها و CSS ها مشکلات به شرح زیر همچنان در رابطه با css ها وجود دارد.عدم سازگاری قابلیت های جدید css ها با مرورگرهای قدیمی.در پیش پردازنده ها باید تمام قابلیت ها در یک کدبیس وجود داشته باشد.در پیش پردازنده ها تمام کدها باید در درون کدها یا inline نوشته شود.عدم قابلیت خطا یابی در css هاجهت مشکل عدم سازگاری قابلیت های جدید css یک راه استفاده از prefix ها به صورت مثلا زیر است اما در هر صورت استفاده از ابزاری مانند prefix ها دستی است و وقت گیر و یا بهتر بگوییم ابزاری مشابه یکپارچه ای مانند babel جاوااسکریپت برای css ها مورد نیاز است که بسیاری از کارها را به صورت خودکار انجام دهد.خوشبختانه ابزاری در این خصوص که این روزها بسیار فراگیر شده است postcss است که می تواند با صدها پلاگین هایی که برای آن بوجود آمده است، بسیاری از مشکلات ما را رفع نماید و یا حتی می توانیم خودمان بسته به نیاز برای آن پلاگین ایجاد نماییم.پس به طور خلاصه postcss ابزاری است که با استفاده از جاوااسکریپت فایل های css ما را تغییر می دهد و این تغییر بسته به نیاز ما است و ما باید متناسب با نیازمان پلاگین متناسب را پیدا و یا ایجاد، و توسط ابزار postcss برروی فایل های css اعمال نماییم.چرخه کار postcss به صورت زیر است.همانطور که در شکل فوق می بینیم postcss یک فایل css را به یک فایل css دیگر تبدیل می کند و توجه کنید اگر پلاگینی در آن استفاده نشود فایل خروجی css کاملا برابر فایل ورودی css است و پست سی اس اس به تنهای کاری نمی کند و بوسیله پلاگین ها ترنسپایل را انجام میدهد.شاید اینجا بگوید که این قابلیت تو sass وجود داشت اما پلاگین های postcss قابلیت های فراتری برای ما برآورده می کند که در ادامه عرض خواهیم نمود.دامه به چند نمونه خواهیم پرداخت.یک نیاز ساده در css، تعریف متغیر ها است که این کار را می توانیم با پلاگین postcss-simple-vars انجام دهیم و به عنوان مثال فایل ورودی زیرا رابه فایل زیر تبدیل کنیمشاید اینجا بگویید که این قابلیت تو sass وجود داشت اما پلاگین های postcss قابلیت های فراتری برای ما برآورده می کند که در ادامه عرض خواهیم دید.یک نیاز دیگر می تواند استفاده ساده تر از media query باشد به عنوان مثلا با پلاگینpostcss-media-minmaxمی توانیم فایل ورودی زیر را :به فایل خروجی زیر که قابلیت اجرا در مرورگرها دارد تبدیل نماییمو یا به سادگی prefix ها را به صورت اتوماتیک در css های خودمان با پلاگین معروف Autoprefixing اعمال نماییم و فایل زیر رارا به صورت اتوماتیک به prefix ها به صورت زیر مزین نماییم که قابلیت اجرا در تمام مرورگر ها باشد.و یا قابلیت ها جدید css مانندرا با استفاده از پلاگین postcss-preset-env به فایل یا css زیر تبدیل نماییمو یا حتی از خطا در css ها بوسیله پلاگین stylelint جلوگیری نماییم و به عنوان مثال خطای کنسول app.css2:10 Invalid hex colorدر هنگام کامپایل و یا ترنسپایل زیر گرفته خواهد شدصدها پلاگین آماده دیگر در این آدرس https://www.postcss.parts ر ا نیز می توانید جستجو و استفاده نمایید.راه های مختلفی جهت برپایی یا setup پست سی اس اس (PostCss) مانند استفاده از Gulp، Webpack وجود دارد که جهت آن می توانید به مستندات Postcss مراجعه فرمایید.https://github.com/postcss/postcss