Next.js/customizing postcss config

تقدم Next.js كما رأينا دعمًا مدمجًا للتنسيقات الموَّرثة CSS، وسنتابع الحديث عن تهيئة المصرِّف الخاص بهذه التنسيقات.

السلوك الافتراضي لتصريف CSS

تصرّف Next.js تنسيقات CSS التي تقدم دعمًا مدمجًا لها باستخدام PostCSS، وذلك عبر مجموعة التحويلات التالية (في حال لم نهيئ المصرَّف إطلاقًا):

1. Autoprefixer: يضيف تلقائيًا اللاحقات الخاصة بالموّزعين إلى قواعد CSS (وصولًا إلى IE11).
2. Cross-browser Flexbox bugs: وقد صُححت لتسلك سلوك the spec.
3. تُصرّف ميزات CSS الجديدة تلقائيًا لتتوافق مع المتصفح IE 11.

• الخاصية all
• خصائص التوقف
• الخاصية font-variant.
• خصائص الفراغات بين أعمدة وأسطر جدول Gap.
• مجالات استعلام الوسائط media@.

لا تُصرَّف الخاصية CSS Grid (شبكة CSS) ولا الخاصيات المُخصصة Custom Properties التي تستخدم مع الدالة ()var افتراضيًا لتتوافق مع IE11. ولتصرِّف تخطيط شبكة CSS كي تدعم IE11 يمكنك وضع التعليق التالي في أعلى ملف CSS:

/* autoprefixer grid: autoplace */

كما يمكنك دعم IE11 ليعرض تخطيط شبكة CSS في كامل صفحات المشروع بتهيئة autoprefixer بالإعدادات التي نعرضها تاليًا في فقرة "تخصيص الإضافات". ولا تُصرّف أيضًا متغيرات CSS لعدم وجود إمكانية لتصريفها بشكل آمن. إن كنت مضطرًا لاستخدام المتغيرات، فكر باستخدام بدائل مثل متغيرات Sass والتي تُصرَّف من قبل Sass

تخصيص المتصفح المستهدف

تتيح لك Next.js تهيئة المتصفح المستهدف (تهيئة autoprefixer وميزات CSS المُصرّفة) من خلال حقل قائمة المتصفحات Browserslist. ولتخصيص قائمة متصفحات، أنشئ المفتاح browserslist في ملف package.json كالتالي:

{
  "browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}

كما تستيطع استخدام الأداة browserl.ist لتعرض المتصفحات التي تستهدفها بصورة مرئية.

تهيئة وحدات CSS

لا حاجة لأية إعدادات من أجل تهيئة وحدات CSS، وتذكر أن كل ما عليك فعله لاستخدام هذه الوحدات هو تغيير اسم الملف ليكون امتداده module.css.. بإمكانك الاطلاع على معلومات أكثر عن وحدات CSS في توثيق Next.js على موسوعة حسوب.

تخصيص الإضافات

تنبيه: عندما تُعرِّف ملف تهيئة لمصرّف PostCSS، سيعطّل ذلك السلوك الافتراضي لتصريف CSS تمامًا. تأكد من التهيئة اليدوية لكل الميزات التي تحتاجها في التصريف بما في ذلك Autoprefixer. كما ستحتاج إلى تثبيت أية إضافات تشير إليها في ملف الإعدادات المخصص مثل npm install postcss-flexbugs-fixes postcss-preset-env.

لتخصيص إعدادات المصرِّف PostCSS، أنشئ الملف postcss.config.json في جذر مشروعك. لاحظ أن الشيفرة التالية هي الإعدادات الافتراضية التي تستخدمها Next.js:

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

ملاحظة: تتيح لك Next.js تسمية ملف بالامتداد .postcssrc.json أو أن تُقرأ الإعدادات من المفتاح postcss في الملف package.json. يمكنك أيضًا تهيئة PostCSS من خلال الملف postcss.config.js الذي يساعدك في تضمين الإضافات شرطيًا وفقًا للبيئة التي تعمل ضمنها:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // لا تحويلات في مرحلة التطوير
        ],
}

ملاحظة: لا تستخدم ()require لإدراج إضافات، فلا بد من إضافتها كسلسلة نصية. ملاحظة: إن كنت تستخدم الملف postcss.config.js في دعم أدوات ليست للغة Next.js في المشروع نفسه، فعليك استخدام الصيغة الكائنية القابلة للتشارك interoperable object-based format.

module.exports = {
plugins: {
'postcss-flexbugs-fixes': {},
'postcss-preset-env': {
   autoprefixer: {
     flexbox: 'no-2009',
   },
   stage: 3,
   features: {
     'custom-properties': false,
   },
 },
},
}

المصادر

• الصفحة Cutomizing PostCSS Config من توثيق Next.js الرسمي.