PostCSS

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

يقوم Next.js بتحويل CSS لدعم ميزات CSS المدمجة باستخدام PostCSS.

بدون أي تكوين إضافي، يقوم Next.js بتحويل CSS مع التحويلات التالية:

• Autoprefixer يضيف بادئات المتصفحات تلقائياً لقواعد CSS (حتى IE11).
• يتم تصحيح أخطاء Flexbox عبر المتصفحات لتعمل وفقاً للمواصفات.
• يتم تحويل ميزات CSS الجديدة تلقائياً لتكون متوافقة مع Internet Explorer 11:
  • خاصية all
  • خصائص Break
  • خاصية font-variant
  • خصائص Gap
  • نطاقات استعلامات الوسائط

بشكل افتراضي، لا يتم تحويل CSS Grid و الخصائص المخصصة (متغيرات CSS) لدعم IE11.

لتحويل تخطيط CSS Grid لدعم IE11، يمكنك إضافة التعليق التالي في أعلى ملف CSS الخاص بك:

/* autoprefixer grid: autoplace */

يمكنك أيضاً تمكين دعم IE11 لـ تخطيط CSS Grid في مشروعك بالكامل عن طريق تكوين 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، أنشئ مفتاح browserslist في ملف package.json كما يلي:

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

يمكنك استخدام أداة browsersl.ist لتصور المتصفحات التي تستهدفها.

وحدات CSS

لا حاجة إلى أي تكوين لدعم وحدات CSS. لتمكين وحدات CSS لملف، قم بتغيير امتداد الملف إلى .module.css.

يمكنك معرفة المزيد حول دعم Next.js لوحدات CSS هنا.

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

تحذير: عند تعريف ملف تكوين PostCSS مخصص، يقوم Next.js بتعطيل السلوك الافتراضي بالكامل. تأكد من تكوين جميع الميزات التي تحتاج إلى تحويل يدوياً، بما في ذلك 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. يجب توفير الإضافات كسلاسل نصية.

معلومة مفيدة: إذا كان ملف postcss.config.js الخاص بك يحتاج إلى دعم أدوات أخرى غير Next.js في نفس المشروع، يجب عليك استخدام تنسيق الكائن المتوافق بدلاً من ذلك:

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