PostCSS

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

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

بدون أي تكوين، يقوم 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,
      },
    },
  },
}