Comment configurer PostCSS dans Next.js

Comportement par défaut

Next.js compile le CSS pour sa prise en charge intégrée du CSS en utilisant PostCSS.

Sans configuration, Next.js compile le CSS avec les transformations suivantes :

• Autoprefixer ajoute automatiquement les préfixes vendeurs aux règles CSS (jusqu'à IE11).
• Les bugs Flexbox cross-browser sont corrigés pour se comporter comme la spécification.
• Les nouvelles fonctionnalités CSS sont automatiquement compilées pour une compatibilité avec Internet Explorer 11 :
  • Propriété all
  • Propriétés Break
  • Propriété font-variant
  • Propriétés Gap
  • Plages de requêtes média

Par défaut, CSS Grid et Custom Properties (variables CSS) ne sont pas compilés pour la prise en charge d'IE11.

Pour compiler CSS Grid Layout pour IE11, vous pouvez placer le commentaire suivant en haut de votre fichier CSS :

/* autoprefixer grid: autoplace */

Vous pouvez également activer la prise en charge d'IE11 pour CSS Grid Layout dans l'ensemble de votre projet en configurant autoprefixer avec la configuration ci-dessous (réduite). Voir "Personnalisation des plugins" ci-dessous pour plus d'informations.

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

Les variables CSS ne sont pas compilées car il n'est pas possible de le faire en toute sécurité. Si vous devez utiliser des variables, envisagez d'utiliser quelque chose comme les variables Sass qui sont compilées par Sass.

Personnalisation des navigateurs cibles

Next.js vous permet de configurer les navigateurs cibles (pour Autoprefixer et les fonctionnalités CSS compilées) via Browserslist.

Pour personnaliser browserslist, créez une clé browserslist dans votre package.json comme suit :

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

Vous pouvez utiliser l'outil browsersl.ist pour visualiser les navigateurs que vous ciblez.

CSS Modules

Aucune configuration n'est nécessaire pour prendre en charge les CSS Modules. Pour activer les CSS Modules pour un fichier, renommez le fichier avec l'extension .module.css.

Vous pouvez en savoir plus sur la prise en charge des CSS Modules par Next.js ici.

Personnalisation des plugins

Avertissement : Lorsque vous définissez un fichier de configuration PostCSS personnalisé, Next.js désactive complètement le comportement par défaut. Assurez-vous de configurer manuellement toutes les fonctionnalités que vous souhaitez compiler, y compris Autoprefixer. Vous devez également installer manuellement tous les plugins inclus dans votre configuration personnalisée, par exemple npm install postcss-flexbugs-fixes postcss-preset-env.

Pour personnaliser la configuration PostCSS, créez un fichier postcss.config.json à la racine de votre projet.

Voici la configuration par défaut utilisée par Next.js :

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

Bon à savoir : Next.js permet également de nommer le fichier .postcssrc.json, ou de lire la configuration à partir de la clé postcss dans package.json.

Il est également possible de configurer PostCSS avec un fichier postcss.config.js, ce qui est utile lorsque vous souhaitez inclure conditionnellement des plugins en fonction de l'environnement :

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // Aucune transformation en développement
        ],
}

Bon à savoir : Next.js permet également de nommer le fichier .postcssrc.js.

N'utilisez pas require() pour importer les plugins PostCSS. Les plugins doivent être fournis sous forme de chaînes de caractères.

Bon à savoir : Si votre postcss.config.js doit prendre en charge d'autres outils non-Next.js dans le même projet, vous devez utiliser le format interopérable basé sur des objets :

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