[BREAKING] 📦 Mise à jour des packages autour de SASS

[yaf]

💥 BREAKING_CHANGES

Remplacement de @import en @use , ( utilisation de @use as * dans les app afin d'éviter le doublon de namespace entre page/component ayant le même nom )

Déclaration des @use 'shadows' / 'typography' / 'fonts' / 'breakpoints' pour pouvoir utiliser les différentes variables/mixin associé

@use 'shadows'; 
@use 'typography' 
@use 'fonts'
@use 'breakpoints'

shadows.shadow()
fonts.$font-roboto
breakpoints.device-is()

Il n'est pas nécessaire de déclarer les uses pour les variables css native

🎄 Problème

Lors de la mise à jour de dépendances côté PixJunior, nous nous sommes retrouvés à mettre SASS à jour. Ça entraine quelque mise à jour SASS et du coup, des message d'alerte de dépréciation sur PixUI.

🎁 Proposition

Cette PR est une exploration de la mise à jour de ces paquets autour de SASS. L'idée est aussi de réfléchir à l'ordre dans lequel faire les mise à jours.

Faut-il commencer par mettre à jour les dépendances SASS sur les app, puis mettre à jour sur Pix UI et enfin, mettre à jour PixUI sur les app ?

🌟 Remarques

Des infos supplémentaires, trucs et astuces ?

🎅 Pour tester

Les instructions pour reproduire le problème, les profils de test, le parcours spécifique à utiliser, etc.

[pix-bot-github]

Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr745.review.pix.fr
Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr745/environment

[xav-car]

Si ça force de changer la manière dont on utilises les Design Tokens "tout à fait" . pour le Breaking Change

[laura-bergoens]

Une manière sinon de pas risquer le maxi breaking change serait de faire
@use 'mon/fichier' as *;
WDYT ?

[xav-car]

Une manière sinon de pas risquer le maxi breaking change serait de faire @use 'mon/fichier' as *; WDYT ?

Le @use utilise comme namespace le nom du fichier.

il y aura incompatibilité si on utilise deux fois le même namespace ( component/campaign.scss / authenticated/campaign.scss ) . là il faut utiliser un as * ou un nom plus spécifique.

le passage de @import à @use requiert que là où on utilise des variables/mixins d'autres fichiers, de déclarer son @use.

De ce que j'ai compris 😅

[xav-car]

Fonctionnel sur 1024pix/pix#11042

[laura-bergoens]

cool raoul

[pix-service-auto-merge]

🎉 This PR is included in version 53.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀