PostCSS: تاريخ تشغيل Sass الجديد

في الآونة الأخيرة ، PostCSS هي الأداة التي تقوم بجولات على الجانب الأمامي لتطوير الويب.

تم تطوير PostCSS بواسطة Andrey Sitnik ، مبتكر Autoprefixer. إنها حزمة Node.js تم تطويرها كأداة لتحويل كل CSS الخاص بك باستخدام JavaScript ، وبالتالي تحقيق أوقات بناء أسرع بكثير من المعالجات الأخرى.

على الرغم مما يبدو أن اسمه يشير إليه ، فهو ليس معالجًا لاحقًا (كما أنه ليس معالجًا مسبقًا) ، ولكنه بالأحرى ناقل لتحويل PostCSS الخاص (أو خاص بملحق PostCSS ، ليكون أكثر دقة) إلى الفانيليا CSS.

مع ما يقال ، هذا لا يعني أن PostCSS ومعالجات CSS الأخرى لا يمكنها العمل معًا. في الواقع ، إذا كنت جديدًا على عالم CSS قبل / بعد المعالجة ، فإن استخدام PostCSS مع Sass يمكن أن يوفر لك الكثير من المتاعب ، والتي سنواجهها قريبًا.

PostCSS ليس بديلاً عن معالجات CSS الأخرى ؛ بدلاً من ذلك ، انظر إليها على أنها أداة أخرى قد تكون مفيدة عند الحاجة ، إضافة أخرى لمجموعة أدواتك.

بدأ استخدام PostCSS مؤخرًا في الزيادة بشكل كبير ، حيث يتم استخدامه اليوم من قبل بعض أكبر شركات صناعة التكنولوجيا ، مثل Twitter و JetBrains و Wikipedia. اعتمادها ونجاحها على نطاق واسع يرجع إلى حد كبير إلى نمطيتها.

المكونات الإضافية والمكونات الإضافية والمكونات الإضافية

PostCSS هو كل شيء عن الإضافات.

يسمح لك باختيار المكونات الإضافية التي ستستخدمها ، والتخلي عن التبعيات غير الضرورية ، وإعطائك إعدادًا سريعًا وخفيف الوزن للعمل معه ، مع الخصائص الأساسية للمعالجات الأولية الأخرى. كما أنه يسمح لك بإنشاء هيكل مخصص بشكل أكبر لسير عملك مع الحفاظ على فعاليته.

اعتبارًا من تاريخ كتابة هذا المنشور ، يحتوي PostCSS على مستودع يضم أكثر من 200 مكون إضافي ، كل منها مسؤول عن مهام مختلفة. في مستودع GitHub الخاص بـ PostCSS ، يتم تصنيف المكونات الإضافية حسب "حل مشكلات CSS العالمية" و "استخدام CSS في المستقبل اليوم" و "قابلية قراءة أفضل لـ CSS" و "الصور والخطوط" و "Linters" و "أخرى".

ومع ذلك ، ستجد في دليل الملحقات تصنيفًا أكثر دقة. أنصحك بإلقاء نظرة هناك بنفسك للحصول على فكرة أفضل عن قدرات عدد قليل منهم ؛ فهي واسعة جدًا ومثيرة للإعجاب إلى حد ما.

ربما تكون قد سمعت عن أشهر الإضافات PostCSS ، Autoprefixer ، وهي مكتبة شعبية قائمة بذاتها. المكون الإضافي الثاني الأكثر شيوعًا هو CSSNext ، وهو مكون إضافي يسمح لك باستخدام أحدث بنية CSS اليوم ، مثل خصائص CSS المخصصة الجديدة ، على سبيل المثال ، دون القلق بشأن دعم المتصفح.

ليست كل إضافات PostCSS رائدة جدًا بالرغم من ذلك. يمنحك البعض ببساطة القدرات التي ربما تأتي من الصندوق مع المعالجات الأخرى. خذ parent selector على سبيل المثال. باستخدام Sass ، يمكنك البدء في استخدامه فورًا أثناء تثبيت Sass. باستخدام PostCSS ، تحتاج إلى استخدام المكون الإضافي postcss-nested-ancestors . يمكن أن ينطبق الشيء نفسه على extends أو mixins .

إذن ، ما هي ميزة استخدام PostCSS ومكوناته الإضافية؟ الجواب بسيط - يمكنك اختيار المعارك الخاصة بك. إذا كنت تشعر أن الجزء الوحيد من Sass الذي ستستخدمه على الإطلاق هو parent selector ، فيمكنك أن توفر على نفسك ضغوط تنفيذ شيء مثل تثبيت مكتبة Sass في بيئتك لتجميع CSS الخاص بك ، وتسريع العملية باستخدام فقط PostCSS والمكوِّن postcss-nested-ancestors .

هذا مجرد مثال واحد لحالة استخدام PostCSS ، ولكن بمجرد أن تبدأ في التحقق منها بنفسك ، ستدرك بلا شك العديد من حالات الاستخدام الأخرى لها.

استخدام PostCSS الأساسي

أولاً ، دعنا نغطي بعض أساسيات PostCSS ونلقي نظرة على كيفية استخدامها عادةً. في حين أن PostCSS قوي للغاية عند استخدامه مع عداء مهام ، مثل Gulp أو Grunt ، فإنه يمكن أيضًا استخدامه مباشرة من سطر الأوامر باستخدام postcss-cli.

لنفكر في مثال بسيط لحالة الاستخدام. افترض أننا نرغب في استخدام المكون الإضافي postcss-color-rgba-backback من أجل إضافة قيمة HEX احتياطية لجميع ألواننا المنسقة RGBA.

بمجرد قيام NPM بتثبيت postcss و postcss-cli cli و postcss-color-rgba-fallback ، نحتاج إلى تشغيل الأمر التالي:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

باستخدام هذه التعليمات ، نطلب من PostCSS استخدام postcss-color-rgba-fallback ، ومعالجة أي CSS داخل src/css/all.css ، وإخراجها إلى dist/css/all.css .

حسنًا ، كان ذلك سهلاً. الآن ، لنلق نظرة على مثال أكثر تعقيدًا.

استخدام PostCSS جنبًا إلى جنب مع مشغلي المهام و Sass

يمكن دمج PostCSS في سير عملك بسهولة إلى حد ما. كما ذكرنا سابقًا ، فهو يتكامل جيدًا مع متسابقي المهام مثل Grunt أو Gulp أو Webpack ، ويمكن استخدامه حتى مع البرامج النصية NPM. مثال على استخدام PostCSS مع Sass و Gulp بسيط مثل مقتطف الشفرة التالي:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

دعونا نفكك مثال الكود أعلاه.

يقوم بتخزين المراجع لجميع الوحدات المطلوبة (Gulp و Contact CSS و Sass و PostCSS و CSSNext) في سلسلة من المتغيرات.

بعد ذلك ، يسجل مهمة Gulp جديدة تسمى stylesheets . تراقب هذه المهمة الملفات الموجودة في ./src/css/ بالملحق .scss (بغض النظر عن مدى عمق بنية الدليل الفرعي) ، يجمعها Sass ويجمعها جميعًا في ملف all.css واحد.

بمجرد إنشاء ملف all.css ، يتم تمريره إلى PostCSS لتحويل جميع التعليمات البرمجية المتعلقة بـ PostCSS (والمكوِّن الإضافي) إلى CSS الفعلي ، ثم يتم وضع الملف الناتج في ./dist/css .

حسنًا ، لذلك يعد إعداد PostCSS باستخدام عداء المهام والمعالج المسبق أمرًا رائعًا ، ولكن هل هذا كافٍ لتبرير العمل مع PostCSS في المقام الأول؟

دعنا نضع الأمر على هذا النحو: بينما Sass مستقرة وناضجة ولديها مجتمع ضخم وراءها ، قد نرغب في استخدام PostCSS للإضافات مثل Autoprefixer ، على سبيل المثال. نعم ، يمكننا استخدام مكتبة Autoprefixer المستقلة ، ولكن مزايا استخدام Autoprefixer كمكوِّن إضافي PostCSS هي إمكانية إضافة المزيد من المكونات الإضافية إلى سير العمل لاحقًا وتجنب التبعيات الدخيلة على حمولة كبيرة من مكتبات JavaScript.

يتيح لنا هذا الأسلوب أيضًا استخدام خصائص غير مسبوقة وجعلها مسبوقة بناءً على القيم التي يتم جلبها من واجهات برمجة التطبيقات ، مثل تلك الموجودة في Can I Use ، وهو أمر يصعب تحقيقه باستخدام Sass وحده. هذا مفيد جدًا إذا كنا نحاول تجنب الخلطات المعقدة التي قد لا تكون أفضل طريقة لبادئة الكود.

الطريقة الأكثر شيوعًا لدمج PostCSS في سير عملك الحالي ، إذا كنت تستخدم Sass بالفعل ، هي تمرير الإخراج المترجم لملف .sass أو .scss من خلال PostCSS ومكوناته الإضافية. سيؤدي هذا إلى إنشاء ملف CSS آخر يحتوي على إخراج كل من Sass و PostCSS.

إذا كنت تستخدم أداة تشغيل المهام ، فإن استخدام PostCSS يكون سهلاً مثل إضافته إلى سلسلة المهام التي لديك حاليًا ، مباشرة بعد تجميع ملف .sass أو .scss (أو ملفات المعالج الذي تختاره).

يلعب PostCSS بشكل جيد مع الآخرين ، ويمكن أن يكون مصدر ارتياح لبعض نقاط الألم الرئيسية التي نختبرها كمطورين كل يوم.

دعنا نلقي نظرة على مثال آخر لـ PostCSS (واثنين من المكونات الإضافية مثل CSSNext و Autoprefixer) و Sass يعملان معًا. يمكن أن يكون لديك الكود التالي:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

يحتوي هذا المقتطف من الشفرة على بناء جملة Vanilla CSS و Sass. الخصائص المخصصة ، اعتبارًا من يوم كتابة هذه المقالة ، لا تزال في حالة توصية المرشح (CR) ، وهنا يأتي دور المكون الإضافي CSSNext لـ PostCSS.

سيكون هذا المكون الإضافي مسؤولاً عن تحويل أشياء مثل الخصائص المخصصة إلى CSS اليوم. سيحدث شيء مشابه لخاصية transform ، والتي ستكون مسبوقة تلقائيًا بواسطة المكون الإضافي Autoprefixer. سيؤدي الرمز المكتوب مسبقًا إلى شيء مثل:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

تأليف الإضافات لـ PostCSS

كما ذكرنا سابقًا ، تتمثل الميزة الجذابة لـ PostCSS في مستوى التخصيص الذي يسمح به. بفضل انفتاحه ، يعد إنشاء مكون إضافي مخصص خاص بك لـ PostCSS لتغطية احتياجاتك الخاصة مهمة بسيطة إلى حد ما إذا كنت مرتاحًا في كتابة JavaScript.

لدى الأشخاص في PostCSS قائمة قوية جدًا للبدء ، وإذا كنت مهتمًا بتطوير مكون إضافي ، فتحقق من مقالاتهم وأدلةهم الموصى بها. إذا كنت تشعر أنك بحاجة إلى طرح سؤال أو مناقشة أي شيء ، فإن Gitter هو أفضل مكان للبدء.

PostCSS لديه API الخاص به مع قاعدة نشطة جدًا من المتابعين على Twitter. إلى جانب الامتيازات المجتمعية الأخرى المذكورة سابقًا في هذا المنشور ، هذا ما يجعل عملية إنشاء المكون الإضافي ممتعة جدًا وهذا النشاط التعاوني.

لذلك ، لإنشاء ملحق PostCSS ، نحتاج إلى إنشاء وحدة Node.js. (عادةً ما تكون مجلدات المكون الإضافي PostCSS في الدليل node_modules/ مسبوقة ببادئة مثل "postcss-" ، وذلك لتوضيح أنها وحدات تعتمد على PostCSS.)

بالنسبة للمبتدئين ، في ملف index.js الخاص بوحدة البرنامج المساعد الجديدة ، نحتاج إلى تضمين الكود التالي ، والذي سيكون غلاف كود معالجة المكون الإضافي:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

قمنا بتسمية ألوان استبدال المكون الإضافي . سيبحث المكون الإضافي عن كلمة أساسية deepBlackText ويستبدلها بقيمة اللون #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

قام المقتطف السابق بما يلي:

1. باستخدام walkRules() ، تكررت من خلال جميع قواعد CSS الموجودة في ملف .css الحالي الذي نمر به.
2. باستخدام walkDecls() ، تكررت خلال جميع إعلانات CSS الموجودة داخل ملف .css الحالي.
3. ثم قام بتخزين التصريح داخل متغير التصريح والتحقق مما إذا كانت السلسلة deepBlackText موجودة فيه. إذا كان الأمر كذلك ، فقد استبدل التصريح الكامل لإعلان CSS التالي: color: #2e2e2e; .

بمجرد أن يصبح المكون الإضافي جاهزًا ، يمكننا استخدامه مثل هذا مباشرةً من سطر الأوامر:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

أو ، على سبيل المثال ، تم تحميله في ملف Gupl مثل هذا:

 var replacecolors = require('postcss-replacecolors');

هل يجب أن أتخلى عن معالج CSS الحالي من أجل استخدام PostCSS؟

حسنًا ، هذا يعتمد على ما تبحث عنه.

من الشائع رؤية كل من Sass و PostCSS مستخدمين في نفس الوقت ، لأنه من الأسهل على القادمين الجدد العمل مع بعض الأدوات التي توفرها المعالجات السابقة / اللاحقة خارج الصندوق ، إلى جانب ميزات الإضافات PostCSS. يمكن أن يؤدي استخدامها جنبًا إلى جنب أيضًا إلى تجنب إعادة بناء سير عمل محدد مسبقًا بأدوات جديدة نسبيًا ، وعلى الأرجح غير معروفة ، مع توفير طريقة للحفاظ على التطبيقات الحالية المعتمدة على المعالج (مثل مزيج Sass ، الممتد ، المحدد الرئيسي ، محددات العناصر النائبة ، وما إلى ذلك وهلم جرا).

امنح فرصة لـ PostCSS

PostCSS هو الشيء الساخن (نوعًا ما) الجديد في عالم تطوير الواجهة الأمامية. لقد تم اعتماده على نطاق واسع لأنه ليس معالجًا سابقًا / لاحقًا في حد ذاته ، كما أنه مرن بدرجة كافية للتكيف مع البيئة التي يتم إدخاله فيها.

يكمن جزء كبير من قوة PostCSS في مكوناته الإضافية. إذا كان ما تبحث عنه هو النمطية والمرونة والتنوع ، فهذه هي الأداة المناسبة للوظيفة.

إذا كنت تستخدم متسابقات المهام أو المجمعات ، فمن المرجح أن تكون إضافة PostCSS إلى التدفق الحالي بمثابة قطعة من الكعكة. تحقق من دليل التثبيت والاستخدام ، وستجد على الأرجح طريقة سهلة لدمجه مع الأدوات التي تستخدمها بالفعل.

يقول العديد من المطورين إنه موجود لتبقى ، على الأقل في المستقبل المنظور. يمكن أن يكون لـ PostCSS تأثير كبير على كيفية هيكلة CSS الحالية ، ويمكن أن يؤدي ذلك إلى اعتماد أكبر بكثير للمعايير عبر مجتمع تطوير الويب الأمامي.