عرض مصدر Next.js/customizing postcss config

<noinclude>{{DISPLAYTITLE:إعدادات مخصصة للمصرّف PostCSS في Next.js}}</noinclude>
تقدم Next.js دعمًا مدمجًا لتنسيقات [[CSS]]، وسنتابع الحديث عن تهيئة المصرِّف الخاص بهذه التنسيقات وتخصيصه.

== السلوك الافتراضي لتصريف CSS ==
تصرّف Next.js تنسيقات CSS التي [[Next.js/built in css support|تقدم دعمًا مدمجًا]] لها باستخدام PostCSS، وذلك عبر مجموعة التحويلات التالية (في حال لم نهيئ المصرَّف إطلاقًا):

# [https://github.com/postcss/autoprefixer Autoprefixer]: يضيف تلقائيًا اللاحقات الخاصة بالموّزعين إلى قواعد CSS (وصولًا إلى IE11).
# [https://github.com/philipwalton/flexbugs Cross-browser Flexbox bugs]: وقد صُححت لتسلك سلوك [https://www.w3.org/TR/css-flexbox-1/ the spec].
# تُصرّف ميزات CSS الجديدة تلقائيًا لتتوافق مع المتصفح IE 11.

* الخاصية <code>all</code>
* خاصيات التوقف Break Properties
* الخاصية <code>font-variant</code>
* خصائص الفراغات بين أعمدة وأسطر جدول <code>Gap</code>
* [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4 مجالات استعلام الوسائط media@]

لا تُصرَّف الخاصية [[CSS/grid|CSS Grid]] (شبكة CSS) ولا [[CSS/--*|الخاصيات المُخصصة]] Custom Properties افتراضيًا لتتوافق مع IE11. ولتصرِّف تخطيط شبكة CSS كي تدعم IE11 يمكنك وضع التعليق التالي في أعلى ملف CSS:<syntaxhighlight lang="css">
/* autoprefixer grid: autoplace */
</syntaxhighlight>كما يمكنك دعم IE11 ليعرض تخطيط شبكة CSS في كامل صفحات المشروع بتهيئة autoprefixer بالإعدادات التالية وانظر فقرة "تخصيص الإضافات" لمزيد من التفاصيل. <syntaxhighlight lang="javascript">
{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}
</syntaxhighlight>ولا تُصرّف أيضًا متغيرات CSS [https://github.com/MadLittleMods/postcss-css-variables#caveats لعدم وجود إمكانية لتصريفها بشكل آمن]. إن كنت مضطرًا لاستخدام المتغيرات، فكر باستخدام بدائل مثل متغيرات Sass والتي تُصرَّف من قبل [[Sass]].

== تحديد المتصفح المستهدف ==
تتيح لك Next.js تحديد المتصفح المستهدف (تهيئة autoprefixer وميزات CSS المُصرّفة) من خلال حقل قائمة المتصفحات [https://github.com/browserslist/browserslist Browserslist]. ولتخصيص قائمة متصفحات، أنشئ المفتاح <code>browserslist</code> في ملف <code>package.json</code> كالتالي:<syntaxhighlight lang="json">
{
  "browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}
</syntaxhighlight>كما تستيطع استخدام الأداة [https://browserl.ist/?q=%3E0.3%25%2C+not+ie+11%2C+not+dead%2C+not+op_mini+all browserl.ist] لتعرض المتصفحات التي تستهدفها بصورة مرئية.

== تهيئة وحدات CSS ==
لا حاجة لأية إعدادات من أجل تهيئة وحدات CSS، وتذكر أن كل ما عليك فعله لاستخدام هذه الوحدات هو تغيير اسم الملف ليكون امتداده <code>module.css.</code>. بإمكانك الاطلاع على معلومات أكثر عن وحدات CSS في [[Next.js/built in css support|توثيق Next.js]].

== تخصيص الإضافات ==
'''تنبيه''': عندما تُعرِّف ملف تهيئة لمصرّف PostCSS، سيعطّل ذلك السلوك الافتراضي لتصريف CSS تمامًا. تأكد من التهيئة اليدوية لكل الميزات التي تحتاجها في التصريف بما في ذلك Autoprefixer. كما ستحتاج إلى تثبيت أية إضافات تشير إليها في ملف الإعدادات المخصص مثل:<syntaxhighlight lang="json">
npm install postcss-flexbugs-fixes postcss-preset-env
</syntaxhighlight>لتخصيص إعدادات المصرِّف PostCSS، أنشئ الملف <code>postcss.config.json</code> في جذر مشروعك. لاحظ أن الشيفرة التالية هي الإعدادات الافتراضية التي تستخدمها Next.js:<syntaxhighlight lang="json">
{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}
</syntaxhighlight>'''ملاحظة''': تتيح لك Next.js تسمية ملف بالامتداد <code>postcssrc.json.</code> أو أن تُقرأ الإعدادات من المفتاح <code>postcss</code> في الملف <code>package.json</code>.

يمكنك أيضًا تهيئة PostCSS من خلال الملف <code>postcss.config.js</code> الذي يساعدك في تضمين الإضافات شرطيًا وفقًا للبيئة التي تعمل ضمنها:<syntaxhighlight lang="javascript">
module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // لا تحويلات في مرحلة التطوير
        ],
}
</syntaxhighlight>'''ملاحظة''': تسمح Next.js بتسمية الملف باسم <code>postcssrc.js.</code> أيضًا.

لا تستخدم <code>()require</code> لإدراج إضافات، فلا بد من إضافتها كسلسلة نصية.

'''ملاحظة''': إن كنت تستخدم الملف <code>postcss.config.js</code> في دعم أدوات ليست للغة Next.js في المشروع نفسه، فعليك استخدام الصيغة الكائنية القابلة للتشارك interoperable object-based format.<syntaxhighlight lang="javascript">
module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}
</syntaxhighlight>

== أمثلة ==

* [https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss Tailwind CSS Example]

== المصادر ==

* الصفحة [https://nextjs.org/docs/advanced-features/customizing-postcss-config Cutomizing PostCSS Config] من توثيق Next.js الرسمي.