CSS en dactylographie avec vanilla

Vanilla-Extract: une nouvelle bibliothèque de framework-in-typescript. Il offre une façon légère, robuste et intuitive d'écrire des styles. Vanilla-Extract n'est pas un cadre CSS obligatoire, mais un outil de développeur flexible. Ces dernières années, le champ d'outils CSS a été relativement stable, avec des outils tels que PostCSS, SASS, les modules CSS et les composants stylisés apparaissant avant 2017 (certains encore plus tôt) et sont toujours très populaires aujourd'hui. Tailwind est l'un des rares outils qui ont apporté des changements dans le champ d'outils CSS ces dernières années.

Vanilla-Extrait vise à déclencher à nouveau le changement. Il a été publié cette année et a bénéficié de certaines des dernières tendances, notamment:

• Les développeurs JavaScript se tournent vers TypeScript
• Prise en charge du navigateur pour les propriétés personnalisées CSS
• Style de priorité pratique

Il y a beaucoup d'innovations intelligentes à Vanilla-Extract, ce qui, je pense, le rend significatif.

Zero Runtime Overhead

La bibliothèque CSS-in-JS injecte généralement des styles dans un document lors de l'exécution. Cela présente certains avantages, notamment l'extraction critique du CSS et les styles dynamiques.

Mais généralement, les fichiers CSS individuels fonctionnent mieux. En effet, le code JavaScript doit passer par un processus d'analyse / compilation plus coûteux, tandis que les fichiers CSS séparés peuvent être mis en cache, tandis que le protocole HTTP2 réduit le coût des demandes supplémentaires. De plus, des propriétés personnalisées sont désormais disponibles pour de nombreux styles dynamiques gratuitement.

Par conséquent, Vanilla-Extrait suit Linaria et Astroturf au lieu d'injecter des styles à l'exécution. Ces bibliothèques vous permettent de styliser à l'aide de fonctions JavaScript qui sont extraites au moment de la construction et utilisées pour créer des fichiers CSS. Bien que vous écrivez Vanilla-Extrait à l'aide de TypeScript, cela n'affecte pas la taille globale du package JavaScript de production.

Support dactylographié

L'une des propositions de grande valeur de Vanilla-Extract est qu'elle fournit une vérification de type. S'il est très important de garder le type de base de code en sécurité, pourquoi ne pas faire de même avec les styles aussi?

TypeScript offre de nombreux avantages. Le premier est l'achèvement automatique. Si vous tapez "FO", dans l'éditeur qui prend en charge TypeScript, vous obtenez une liste déroulante avec des options de police (FontFamily, Fontkerning, Fontweight ou d'autres matchs) pour vous. Cela rend les propriétés CSS faciles à découvrir avec la commodité de l'éditeur. Si vous ne vous souvenez pas du nom de Fontvariant, mais sachez qu'il commence par "Font", vous pouvez le taper et faire défiler les options. Dans VS Code, vous n'avez pas besoin de télécharger des outils supplémentaires pour y parvenir.

Cela accélère considérablement l'écriture de styles:

Cela signifie également que votre éditeur vous surveillera tout le temps, en vous assurant de ne pas faire d'erreurs d'orthographe qui peuvent conduire à des bogues frustrants.

Le type Vanilla-Extrait fournit également une interprétation de syntaxe et des liens vers le document MDN pour les propriétés CSS que vous modifiez dans sa définition de type. Cela permet d'économiser l'étape des recherches de Google folles lorsque le style se comporte de manière anormale.

L'écriture avec TypeScript signifie que vous utilisez Camel Nomenclature pour représenter les propriétés CSS, telles que BackgroundColor. Cela peut nécessiter certains changements pour les développeurs qui sont habitués à utiliser une syntaxe CSS ordinaire telle que la couleur arrière-plan.

intégré

Vanilla-Extract fournit une intégration de première partie pour tous les derniers outils d'emballage. Voici une liste complète des intégrations qu'il prend en charge actuellement:

• webpack
• esbuild
• Vite
• Sac de neige
• NextJS
• Gatsby

Cela n'a rien à voir avec le cadre. Vous importez simplement les noms de classe de Vanilla-Extract, qui sont convertis en chaînes au moment de la construction.

Comment utiliser

Pour utiliser VanIlla-Extract, vous pouvez écrire un fichier .css.ts que vos composants peuvent importer. Les appels à ces fonctions sont convertis en chaînes de nom de classe de hachage et dans l'étape de construction. Cela peut ressembler à des modules CSS, et ce n'est pas une coïncidence: Mark Dalgleish, l'un des créateurs de Vanilla-Extract, est également co-créateur de modules CSS.

Fonction de style()

Vous pouvez utiliser style() pour créer une classe CSS portée automatique. Vous passez dans le style de l'élément, puis exportez la valeur de retour. Importez cette valeur quelque part dans votre code utilisateur et il sera converti en nom de classe SPOPE.

 // title.css.ts
Importer {style} de "@ vanilla-exptrait / css";

Export const titlestyle = style ({{
  BackgroundColor: "HSL (210deg, 30%, 90%)",
  Fontfamily: "Helvetica, Sans-Serif",
  Couleur: "HSL (210 degrés, 60%, 25%)",
  rembourrage: 30,
  Borderradius: 20,
});

 // title.ts
import {titlestyle} de "./title.css";

document.getElementById ("root"). innerhtml = `<h1> Extrait de vanille</h1> `;

Les requêtes multimédias et les pseudo-sélecteurs peuvent également être inclus dans la déclaration de style:

 // title.css.ts
BackgroundColor: "HSL (210deg, 30%, 90%)",
Fontfamily: "Helvetica, Sans-Serif",
Couleur: "HSL (210 degrés, 60%, 25%)",
rembourrage: 30,
Borderradius: 20,
"@media": {
  "Écran et (max-largeur: 700px)": {
    rembourrage: 10
  }
},
":flotter":{
  BackgroundColor: "HSL (210deg, 70%, 80%)"
}

Ces appels de fonction style sont une abstraction légère de CSS - tous les noms et valeurs d'attribut sont mappés aux propriétés et valeurs CSS que vous connaissez. Un changement pour s'y habituer est que les valeurs peuvent parfois être déclarées comme des nombres (par exemple, le rembourrage: 30), défautant aux valeurs d'unité des pixels, tandis que certaines valeurs doivent être déclarées comme des chaînes (par exemple, le rembourrage: "10px 20px 15px 15px").

Les propriétés des fonctions style ne peuvent affecter qu'un seul nœud HTML. Cela signifie que vous ne pouvez pas utiliser la nidification pour déclarer le style des éléments de l'élément enfant - auquel vous pourriez être utilisé dans SASS ou PostCSS. Au lieu de cela, vous devez coiffer séparément les éléments enfants. Si l'élément enfant doit être basé sur différents styles de l'élément parent, vous pouvez utiliser selectors pour ajouter des styles qui dépendent de l'élément parent:

 // title.css.ts
Exporter const InNerspan = style ({{
  SÉLECTEURS: {[`$ {titlestyle} &`]: {
    Couleur: "HSL (190 degrés, 90%, 25%)",
    Fontstyle: "italique",
    TextDecoration: "souligner"
  }}
});

 // title.ts
import {titlestyle, innerspan} de "./title.css";
document.getElementById ("root"). innerhtml = 
'<h1> Extrait de vanille</h1>
Un système »;

Alternativement, vous pouvez utiliser l'API Sujet (dont nous parlerons ensuite) pour créer des propriétés personnalisées dans l'élément parent, qui sont utilisés par les nœuds enfants. Cela peut sembler strict, mais il est délibérément conçu pour améliorer la maintenabilité des grandes bases de code. Cela signifie que vous saurez exactement où le style de chaque élément du projet est déclaré.

thème

Vous pouvez utiliser createTheme pour créer des variables dans un objet TypeScript:

 // title.css.ts
import {style, createTheme} à partir de "@ vanilla-extrait / css";

// Créer un thème Export const [MainTheMe, vars] = CreateTheMe ({
  couleur:{
    Texte: "HSL (210deg, 60%, 25%)",
    Contexte: "HSL (210 degrés, 30%, 90%)"
  },
  longueurs: {
    Mediumgap: "30px"
  }
})

// Utilisez l'exportation de sujets const titlestyle = style ({{{{{{
  BackgroundColor: vars.color.background,
  Couleur: Vars.Color.Text,
  Fontfamily: "Helvetica, Sans-Serif",
  rembourrage: Vars.lengths.mediumgap,
  Borderradius: 20,
});

Vanilla-Extract vous permet alors de créer des variations du thème. TypeScript l'aide à garantir que vos variantes utilisent le même nom d'attribut, donc si vous oubliez d'ajouter des attributs d'arrière-plan à votre sujet, vous obtiendrez un avertissement.

Voici comment créer un thème régulier et un mode sombre:

 // title.css.ts
import {style, createTheme} à partir de "@ vanilla-extrait / css";

Export const [MainTheme, vars] = CreateThereme ({
  couleur:{
    Texte: "HSL (210deg, 60%, 25%)",
    Contexte: "HSL (210 degrés, 30%, 90%)"
  },
  longueurs: {
    Mediumgap: "30px"
  }
})
// Variante de thème - Notez que cette partie n'utilise pas d'exportation de syntaxe array const darkmode = createTheme (vars, {
  couleur:{
    Texte: "HSL (210deg, 60%, 80%)",
    Contexte: "HSL (210deg, 30%, 7%)",
  },
  longueurs: {
    Mediumgap: "30px"
  }
})
// Utilisez l'exportation de sujets const titlestyle = style ({{{{{{
  BackgroundColor: vars.color.background,
  Couleur: Vars.Color.Text,
  Fontfamily: "Helvetica, Sans-Serif",
  rembourrage: Vars.lengths.mediumgap,
  Borderradius: 20,
});

Ensuite, en utilisant JavaScript, vous pouvez appliquer dynamiquement le nom de classe renvoyé par Vanilla-Extract pour changer de sujets:

 // title.ts
import {titlestyle, maintheme, darkmode} de "./title.css";

document.getElementById ("root"). innerhtml = 
'<div>
  <h1>Extrait de vanille</h1>
  Mode sombre
</div>'

Comment cela fonctionne-t-il en bas? L'objet que vous déclarez dans la fonction createTheme sera converti en une propriété CSS personnalisée attachée à la classe d'éléments. Ces propriétés personnalisées sont hachées pour éviter les conflits. Le CSS de sortie de notre exemple mainTheme ressemble à ceci:

 .src__ohrzop0 {
  --Color-Brand__ohrzop1: HSL (210deg, 80%, 25%);
  --Color-text__ohrzop2: HSL (210deg, 60%, 25%);
  --Color-Background__ohrzop3: HSL (210deg, 30%, 90%);
  - Longueur-Mediumgap__ohrzop4: 30px;
}

Et la sortie CSS de notre thème darkMode est la suivante:

 .src__ohrzop5 {
  --Color-Brand__ohrzop1: HSL (210deg, 80%, 60%);
  --Color-text__ohrzop2: HSL (210deg, 60%, 80%);
  --Color-Background__ohrzop3: HSL (210deg, 30%, 10%);
  - Longueur-Mediumgap__ohrzop4: 30px;
}

Par conséquent, nous devons simplement modifier le nom de classe dans le code utilisateur. Appliquer le nom de la classe darkmode à l'élément parent mainTheme sera remplacé par darkMode .

Recettes API

style et createTheme sont suffisantes pour styliser un site Web par eux-mêmes, mais Vanilla-Extract fournit quelques API supplémentaires pour une réutilisabilité améliorée. L'API des recettes vous permet de créer de nombreuses variations pour les éléments que vous pouvez choisir dans les balises ou le code utilisateur.

Tout d'abord, vous devez l'installer séparément:

 NPM Install @ Vanilla-Extract / Recipes

Voici comment cela fonctionne. Vous importez recipe et passez dans un objet contenant base et variants :

 // Button.css.ts
import {recette} de '@ VanIlla-Extract / Recipes';

Exportation const Buttonstyles = Recipe ({{
  base:{
    // Les styles appliqués à tous les boutons sont placés ici},
  Variants: {
    // le style que nous choisissons ici}
});

Dans base vous pouvez déclarer les styles qui seront appliqués à toutes les variantes. Dans variants , vous pouvez fournir différentes façons de personnaliser les éléments:

 // Button.css.ts
import {recette} de '@ VanIlla-Extract / Recipes';
Exportation const Buttonstyles = Recipe ({{
  base: {
    Fontweight: "Bold",
  },
  Variants: {
    couleur: {
      normale: {
        BackgroundColor: "HSL (210deg, 30%, 90%)",
      },
      callToaction: {
        BackgroundColor: "HSL (210deg, 80%, 65%)",
      },
    },
    taille: {
      Grand: {
        rembourrage: 30,
      },
      moyen: {
        rembourrage: 15,
      },
    },
  },
});

Vous pouvez ensuite déclarer la variante que vous souhaitez utiliser dans la balise:

 // Button.ts
import {Buttonstyles} depuis "./button.css";

Cliquez sur moi

Vanilla-Extract fournit une complétion automatique pour vos propres noms de variants avec TypeScript!

Vous pouvez nommer les variantes comme vous le souhaitez et mettre tous les attributs que vous souhaitez, par exemple:

 // Button.css.ts
Exportation const Buttonstyles = Recipe ({{
  Variants: {
    animal: {
      chien: {
        BackgroundImage: 'url ("./ dog.png")',
      },
      chat: {
        BackgroundImage: 'url ("./ cat.png")',
      },
      lapin: {
        BackgroundImage: 'url ("./ lapin.png")',
      },
    },
  },
});

Vous pouvez voir que cela est très utile pour construire des systèmes de conception, car vous pouvez créer des composants réutilisables et contrôler la façon dont ils changent. Ces modifications deviennent faciles à repérer avec TypeScript - il vous suffit de taper l'espace CMD / CTRL (sur la plupart des éditeurs) et vous obtenez une liste déroulante répertoriant différentes façons de personnaliser vos composants.

Priorité pratique avec des paillettes

Sprinkles est un cadre de priorité pratique construit sur Vanilla-Extract. Le document Vanilla-Extrait le décrit comme ceci:

Fondamentalement, c'est comme construire votre propre version de zéro runtime, un vent arrière de type, un système de style, etc.

Donc, si vous n'aimez pas nommer des choses (nous avons tous des cauchemars, créez une div de wrapper externe, puis réalisons que nous devons l'envelopper avec ... wrapper externe externe), les paillettes peuvent être votre moyen préféré d'utiliser Vanilla-Extract.

L'API Sprinkles doit également être installée séparément:

 NPM Install @ Vanilla-Extrait / Sprinkles

Maintenant, nous pouvons créer des éléments constitutifs pour nos fonctions pratiques à utiliser. Créons une liste de couleurs et de longueurs en déclarant plusieurs objets. Le nom de la clé JavaScript peut être tout ce que nous voulons. La valeur doit être une valeur CSS valide pour l'attribut CSS que nous prévoyons d'utiliser:

 // Sprinkles.css.ts
const Colors = {
  Blue100: "HSL (210deg, 70%, 15%)",
  Blue200: "HSL (210deg, 60%, 25%)",
  Blue300: "HSL (210deg, 55%, 35%)",
  Blue400: "HSL (210deg, 50%, 45%)",
  Blue500: "HSL (210deg, 45%, 55%)",
  Blue600: "HSL (210deg, 50%, 65%)",
  Blue700: "HSL (207deg, 55%, 75%)",
  Blue800: "HSL (205deg, 60%, 80%)",
  Blue900: "HSL (203deg, 70%, 85%)",
};

const les longueurs = {
  petit: "4px",
  médium: "8px",
  grand: "16px",
  Humungous: "64px"
};

Nous pouvons utiliser la fonction defineProperties pour déclarer quelles propriétés CSS auquel ces valeurs seront appliquées:

• Passez-le un objet contenant des attributs properties .
• Dans properties nous déclarons un objet où les clés sont des propriétés CSS que l'utilisateur peut définir (celles-ci doivent être des propriétés CSS valides), et la valeur est l'objet que nous avons créé plus tôt (notre liste de couleurs et de longueurs).

 // Sprinkles.css.ts
import {DefineProperties} à partir de "@ vanilla-extrait / sprinkles";

const Colors = {
  Blue100: "HSL (210deg, 70%, 15%)"
  // etc.
}

const les longueurs = {
  petit: "4px",
  // etc.
}

Const Properties = DefineProperties ({
  propriétés: {
    // La clé de cet objet doit être un attribut CSS valide // La valeur est l'option que nous offrons à la couleur de l'utilisateur: couleurs,
    BackgroundColor: Couleurs,
    rembourrage: longueurs,
  },
});

Ensuite, la dernière étape consiste à passer la valeur de retour de defineProperties à la fonction createSprinkles et à exporter la valeur de retour:

 // Sprinkles.css.ts
import {DefineProperties, crée desPrinkles} à partir de "@ VanIlla-Extract / Sprinkles";

const Colors = {
  Blue100: "HSL (210deg, 70%, 15%)"
  // etc.
}

const les longueurs = {
  petit: "4px",
  // etc. 
}

Const Properties = DefineProperties ({
  propriétés: {
    couleur: couleurs,
    // etc. 
  },
});
Exporter const Springles = CreatePrinkles (propriétés);

Nous pouvons ensuite démarrer des styles en ligne dans le composant en appelant la fonction sprinkles dans l'attribut class et en sélectionnant l'option que nous voulons pour chaque élément.

 // index.ts
import {Sprinkles} de "./sprinkles.css";
document.getElementById ("root"). innerhtml = `cliquez sur moi
`;

La sortie JavaScript enregistre une chaîne de nom de classe pour chaque attribut de style. Ces noms de classe correspondent à une seule règle dans le fichier CSS de sortie.

 Cliquez sur moi

Comme vous pouvez le voir, cette API vous permet de styliser des éléments dans une balise en utilisant un ensemble de contraintes prédéfinies. Vous pouvez également éviter la tâche difficile de proposer un nom de classe pour chaque élément. Le résultat est quelque chose qui ressemble beaucoup à un vent arrière, mais qui profite également de toutes les infrastructures construites autour de typescript.

L'API Sprinkles vous permet également d'écrire des conditions et des abréviations pour créer des styles réactifs à l'aide de classes d'utilité.

Résumer

Vanilla-Extrait ressemble à une grande avance dans le domaine des outils CSS. Beaucoup de réflexion a été investie dans la construction dans une solution de style intuitive et robuste qui tire parti de toutes les capacités que le typage statique offre.

Dès la lecture

• Documentation de vanilla
• Le discours de Mark sur Vanilla-Extract
• Vanilla-Extrat Discord
• CODESANTAND BOX CODE Exemple

Cette sortie révisée maintient la signification d'origine tout en utilisant différentes structures de formulation et de phrases.

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!