Style9: Build-Time CSS-in-JS

Facebook a publié sa révision majeure en avril dernier. Il s'agit d'un projet ambitieux, une reconstruction d'un énorme site Web avec un grand nombre d'utilisateurs. Pour y parvenir, ils ont utilisé plusieurs technologies qu'ils ont créées et ouvertes par elles-mêmes, telles que React, GraphQL, Relay et une nouvelle bibliothèque CSS-in-JS appelée Stylex.

Cette nouvelle bibliothèque est utilisée en interne par Facebook, mais ils ont partagé suffisamment d'informations pour permettre d'implémenter Style9 Open Source.

Pourquoi avez-vous besoin d'une autre bibliothèque CIJ?

Il existe déjà un grand nombre de bibliothèques CSS-in-JS (CIJ), il peut donc ne pas être clair pourquoi une autre bibliothèque est nécessaire. Comme l'explique Christopher Chedeau, Style9 a les mêmes avantages que toutes les autres solutions CIJ, y compris les sélecteurs de portée, l'élimination du code mort, l'analyse déterministe et la possibilité de partager les valeurs entre CSS et JavaScript.

Cependant, certains aspects rendent le style9 unique.

Exécution minimum

Bien que les styles soient définis en JavaScript, ils sont extraits par le compilateur dans des fichiers CSS ordinaires. Cela signifie que le fichier JavaScript final ne contiendra aucun styles. La seule chose qui reste est le nom de classe final, que le plus petit temps d'exécution s'appliquera conditionnellement, comme vous le faites habituellement. Cela entraînera des packages de code plus petits, une utilisation réduite de la mémoire et un rendu plus rapide.

Étant donné que les valeurs sont extraites au moment de la compilation, les valeurs vraiment dynamiques ne peuvent pas être utilisées. Heureusement, ces valeurs ne sont pas courantes et comme elles sont uniques, elles ne sont pas affectées par les définitions en ligne. Plus commun est l'application des styles conditionnellement, qui est bien sûr pris en charge. Grâce à Babel's Path.Evaluate, les constantes locales et les expressions mathématiques sont également soutenues.

Sortie atomique

En raison de la façon dont Style9 fonctionne, chaque déclaration de propriété peut devenir une classe distincte avec une seule propriété. Par exemple, si nous utilisons Opacity: 0 à plusieurs endroits de notre code, il n'existera qu'une seule fois dans le CSS généré. L'avantage de cela est que la taille du fichier CSS augmente avec le nombre de déclarations uniques , et non avec le nombre total de déclarations. Étant donné que la plupart des propriétés sont utilisées plusieurs fois, cela peut entraîner une grande réduction du fichier CSS. Par exemple, l'ancienne page d'accueil de Facebook a utilisé 413 Ko de CSS compressé GZIP. Après la révision, la taille CSS de toutes les pages est de 74 Ko. De même, les tailles de fichiers plus petites conduisent à de meilleures performances.

Certaines personnes peuvent s'en plaindre, pensant que les noms de classe générés ne sont pas sémantiques, qu'ils sont opaques et ignorent les cascades. C'est vrai. Nous considérons CSS comme une cible de compilation. Mais il y a une bonne raison. En remettant en question les pratiques qui étaient auparavant considérées comme le mieux, nous pouvons améliorer l'expérience pour les utilisateurs et les développeurs.

De plus, Style9 a de nombreuses autres fonctionnalités puissantes, notamment: des styles tapés avec dactylographie, éliminant les styles inutilisés, la possibilité d'utiliser des variables JavaScript et la prise en charge des requêtes multimédias, des pseudo-sélecteurs et des images clés.

Comment l'utiliser

Tout d'abord, installez-le comme d'habitude:

 <code>npm install style9</code>

Style9 a des plugins pour Rollup, WebPack, Gatsby et Next.js, tous basés sur les plugins Babel. Des instructions sur la façon de les utiliser se trouvent dans le référentiel. Ici, nous utiliserons le plugin WebPack.

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 这将转换style9调用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 这是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 这将对最终的CSS文件中的声明进行排序并删除重复的声明new Style9Plugin(), // 这是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

Définir les styles

La syntaxe pour la création de styles est très similaire aux autres bibliothèques. Nous appelons d'abord Style9. Créer en utilisant un objet de style:

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

Parce que toutes les déclarations produiront des classes atomiques, les abréviations comme Flex: 1 et Background: Blue ne fonctionnera pas car elles définissent plusieurs propriétés. Les propriétés qui peuvent être élargies, telles que le rembourrage, la marge, le débordement, etc., seront automatiquement converties en leur forme complète. Si vous utilisez TypeScript, vous recevrez une erreur lorsque vous utiliserez des propriétés non soutenues.

Styles analytiques

Pour générer le nom de classe, nous pouvons maintenant appeler la fonction renvoyée par style9.Create. Il accepte la clé de style que nous voulons utiliser comme paramètres:

 <code>const className = styles('button');</code>

La fonction fonctionne comme ceci: le style à droite a priorité et fusionne avec le style à gauche, tout comme object.assign. Ce qui suit produira un élément rempli de 12px et le texte est ré-écapurple.

 <code>const className = styles('button', 'padding');</code>

Nous pouvons appliquer des styles conditionnellement en utilisant l'un des formats suivants:

 <code>// 逻辑与styles('button', hasPadding && 'padding'); // 三元运算符styles('button', isGreen ? 'green' : 'red'); // 布尔对象styles({ button: true, green: isGreen, padding: hasPadding });</code>

Ces appels de fonction seront supprimés lors de la compilation et remplacés par une concaténation directe de chaîne. La première ligne du code ci-dessus sera remplacée par quelque chose comme le haspadding 'c1r9f2e5'? 'Cu2kwdz': ''. Aucun code d'exécution n'est laissé.

Styles de combinaison

Nous pouvons étendre l'objet de style en accédant à l'objet de style avec le nom de la propriété et en le transmettant à Style9.

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 将为红色const className = style9(styles.blue, otherStyles.red);</code>

Tout comme un appel de fonction, le style à droite a priorité. Cependant, dans ce cas, le nom de classe ne peut pas être analysé statiquement. Au lieu de cela, les valeurs de propriété seront remplacées par la classe et connectées au moment de l'exécution. Les propriétés sont ajoutées au fichier CSS comme auparavant.

Résumer

Les avantages de CSS-in-JS sont réels. Autrement dit, lorsque nous intégrons des styles dans notre code, il y a un coût de performances. En extrayant des valeurs au moment de la construction, nous pouvons atteindre le meilleur des deux mondes en même temps. Nous pouvons bénéficier de la mise en place de styles avec des balises et de l'utilisation de l'infrastructure JavaScript existante, tout en générant les meilleurs styles de style.

Si Style9 semble amusant, consultez le référentiel et essayez-le. Si vous avez des questions, n'hésitez pas à poser des questions ou à nous contacter.

Remerciements

Grâce à Giuseppe Gurgone pour son travail sur la feuille de style et le DSS, Nicolas Gallagher pour son travail sur React-Native-Web, Satyajit Sahoo et tous les membres de Callstack pour leur travail sur Linaria, Christopher Chedeau, Sebastian McKenzie, Frank Yan, Ashley Watkins, Naman Goel et tout le monde travaillant sur Stylex sur Facebook pour leur volonté pour leur moins. Et toutes les autres personnes que j'ai manquées.

Lien

• johanholmerin / style9
• Construisez un nouveau Facebook.com avec React, GraphQL et Relay - 30 avril 2019
• Construisez un nouveau Facebook avec React et Relay | Frank Yan - 30 octobre 2019
• Rebuild Tech Stack de Facebook.com - 8 mai 2020
• johanholmerin / style9-components.macro: API de composants stylisés pour style9 - expérimental

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!