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
• خاصيات التوقف Break Properties
• الخاصية font-variant
• خصائص الفراغات بين أعمدة وأسطر جدول Gap
• مجالات استعلام الوسائط media@

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

/* autoprefixer grid: autoplace */

كما يمكنك دعم IE11 ليعرض تخطيط شبكة CSS في كامل صفحات المشروع بتهيئة autoprefixer بالإعدادات التالية وانظر فقرة "تخصيص الإضافات" لمزيد من التفاصيل.

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

ولا تُصرّف أيضًا متغيرات 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,
              },
            },
          ],
        ]
      : [
          // لا تحويلات في مرحلة التطوير
        ],
}

ملاحظة: تسمح Next.js بتسمية الملف باسم postcssrc.js. أيضًا.

لا تستخدم ()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,
      },
    },
  },
}

أمثلة

• Tailwind CSS Example

المصادر

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