PostCSS

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.^[3] It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.^[4]

PostCSS is a framework to develop CSS tools.^[5] It can be used to develop a template language such as Sass and LESS.^[6]

The PostCSS core consists of:^[7]

• CSS parser that generates an abstract syntax tree
• Set of classes that comprises the tree
• CSS generator that generates a CSS line for the object tree
• Code map generator for the CSS changes made

Features are made available through plugins. The plugins are small programs working with the object tree. After the core has transformed a CSS string into an object tree, the plugins analyze and change the tree. Then PostCSS generates a new CSS string for the plugin-changed tree.

PostCSS and its plugins are written in JavaScript and distributed through npm, which offer APIs for low-level JavaScript operations.

There are official tools making it possible to use PostCSS with build systems such as Webpack,^[8]Gulp,^[9] and Grunt.^[10] There is also a console interface available.^[11]Browserify or Webpack can be used to open PostCSS in a browser.^[12]

PostCSS plugins perform different CSS processing tasks ranging from analysis and properties sorting to minification.

The complete plugin list can be found on postcss.parts, with some examples listed below.

• أداة Autoprefixer لإضافة ومسح بادئات المتصفح. ^{[ 16 ]}
• وحدات CSS لعزل مُحدِّدات CSS وتنظيم الكود. وهي مُضمَّنة كجزء من Webpack . ^{[ 17 ] [ 18 ]}
• يُستخدم stylelint لتحليل كود CSS بحثًا عن الأخطاء والتحقق من اتساق الأنماط. ^{[ 19 ]}
• يقوم stylefmt بتصحيح كود CSS وفقًا لإعدادات stylelint. ^{[ 20 ]}
• PreCSS لتنفيذ بعض وظائف المعالجة المسبقة لـ Sass / Less . ^{[ 21 ]}
• postcss-preset-env لمحاكاة الميزات من مسودات مواصفات CSS غير المكتملة. ^{[ 22 ]}
• تُستخدم أداة cssnano لتقليل حجم ملفات CSS عن طريق إزالة المسافات وإعادة كتابة الكود. ^{[ 23 ]}
• يُستخدم RTLCSS لتغيير كود CSS بحيث يكون التصميم مناسبًا للكتابة من اليمين إلى اليسار (كما هو الحال في اللغتين العربية والعبرية ). ^{[ 24 ]}
• تُستخدم مكتبات postcss-assets و postcss-inline-svg و postcss-sprites للعمل مع الرسومات. ^{[ 25 ] [ 26 ] [ 27 ]}

خلال مشروع إعادة العمل، اقترح تي جيه هولواي تشوك فكرة معالجة CSS المعيارية في 1 سبتمبر 2012. ^{[ 28 ]} وفي 28 فبراير 2013، أعلن تي جيه ذلك علنًا. ^{[ 29 ]}

في 14 مارس 2013، أسفر عمل أندريه سيتنيك في تطوير واجهة المستخدم الأمامية لموقع Evil Martians عن إطلاق Autoprefixer، وهو إضافة برمجية تعتمد على Rework. ^{[ 30 ]} في البداية، كان اسم الإضافة rework-vendors. ^{[ 31 ]}

مع نمو Autoprefixer، لم يعد Rework قادرًا على تلبية احتياجاته. ^{[ 32 ]} في 7 سبتمبر 2013، ^{[ 33 ]} بدأ أندريه سيتنيك بتطوير PostCSS استنادًا إلى أفكار Rework. ^{[ 34 ]}

في غضون ثلاثة أشهر، تم إصدار أول إضافة لـ PostCSS، وهي grunt-pixrem. ^{[ 35 ]} في 22 ديسمبر 2013، تم نقل الإصدار 1.0 من Autoprefixer إلى PostCSS. ^{[ 36 ]}

بالنسبة لـ PostCSS، ينصب التركيز الأساسي على الأسلوب على الخيمياء . ^{[ 37 ]} يرمز شعار المشروع إلى حجر الفلاسفة . ^{[ 38 ]} تستمد إصدارات PostCSS الرئيسية والثانوية أسماءها من شياطين كتاب Ars Goetia . ^{[ 39 ]} على سبيل المثال، يُطلق على الإصدار 1.0.0 اسم Marquis Decarabia.

أثار مصطلح "المعالج اللاحق" بعض اللبس. ^{[ 40 ]} استخدم فريق PostCSS هذا المصطلح للدلالة على أن PostCSS ليس لغة قوالب (معالج مسبق) بل أداة CSS. مع ذلك، يرى بعض المطورين أن مصطلح "المعالج اللاحق" أنسب لأدوات المتصفح (على سبيل المثال، -prefix-free). ^{[ 41 ]} ازداد الوضع تعقيدًا بعد إصدار PreCSS. الآن، يستخدم فريق PostCSS مصطلح "المعالج" بدلًا من "المعالج اللاحق". ^{[ 42 ]}

• الموقع الرسمي