كيفية تكوين PostCSS في Next.js

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

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

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

• Autoprefixer يضيف بادئات البائعين تلقائيًا لقواعد CSS (حتى IE11).
• يتم تصحيح أخطاء Cross-browser 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,
      },
    },
  },
}