String.raw dans le code source CSS de Tailwind.

Dans cet article, nous analysons l'utilisation de String.raw dans le code source de Tailwindcss.

String.raw

La documentation MDN indique que :

« La méthode statique String.raw() est une fonction de balise de littéraux de modèle.

Ceci est similaire au préfixe r en Python ou au préfixe @ en C# pour les chaînes littérales.

Il est utilisé pour obtenir la forme de chaîne brute des littéraux de modèle, c'est-à-dire des substitutions

(par exemple ${foo}) sont traités, mais les séquences d'échappement (par exemple n) ne le sont pas. "

Exemple 1 :

L'exemple ci-dessous est tiré de MDN :

// Create a variable that uses a Windows
// path without escaping the backslashes:
const filePath = String.raw`C:\Development\profile\aboutme.html`;
console.log(`The file was uploaded from: ${filePath}`);
// Expected output: "The file was uploaded from: C:\Development\profile\aboutme.html"

Le résultat d'exécution de cet exemple ci-dessus ressemble à ceci :

> "The file was uploaded from: C:\Development\profile\aboutme.html"

Exemple 2 :

Si vous exécutez le même exemple sans String.raw en utilisant le code ci-dessous :

// Create a variable that uses a Windows
// path without escaping the backslashes:
const filePath = `C:\Development\profile\aboutme.html`;
console.log(`The file was uploaded from: ${filePath}`);
// Expected output: "The file was uploaded from: C:\Development\profile\aboutme.html"

Le résultat ressemble à ceci :

> "The file was uploaded from: C:Developmentprofileaboutme.html"

Exemple 3 :

Si vous exécutez le même exemple impliquant n en utilisant le code ci-dessous :

const filePathWithoutStringRaw = `\nC:\Development\profile\aboutme.html`;
const filePathWithStringRaw = String.raw`\nC:\Development\profile\aboutme.html`;
console.log("filePathWithoutStringRaw:", filePathWithoutStringRaw)
console.log("*******")
console.log("filePathWithStringRaw:", filePathWithStringRaw)

Le résultat ressemble à ceci :

> "filePathWithoutStringRaw:" "
C:Developmentprofileaboutme.html"
> "*******"
> "filePathWithStringRaw:" "\nC:\Development\profile\aboutme.html"

Comment Tailwindcss utilise String.raw :

Le fichier de test ui.spec.ts attribue String.raw au HTML et au CSS.

Le HTML est utilisé dans de nombreux tests écrits dans ui.spec.ts

Regardons de plus près ce code de test :

for (let [classes, expected] of [
 [
 'bg-linear-to-r from-red-500',
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',
 ],
 [
 'bg-linear-to-r via-red-500',
 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgba(0, 0, 0, 0) 100%)',
 ],
 [
 'bg-linear-to-r to-red-500',
 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 100%)',
 ],
 [
 'bg-linear-to-r from-red-500 to-blue-500',
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
 ],
 [
 'bg-linear-to-r via-red-500 to-blue-500',
 'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 100%)',
 ],
 [
 'bg-linear-to-r from-red-500 via-green-500 to-blue-500',
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
 ],
 [
 'bg-linear-[to_right,var( - color-red-500),var( - color-green-500),var( - color-blue-500)]',
 'linear-gradient(to right, rgb(239, 68, 68), rgb(34, 197, 94), rgb(59, 130, 246))',
 ],
]) {
 test(`background gradient, "${classes}"`, async ({ page }) => {
   let { getPropertyValue } = await render(
   page,
   html`<div id="x" class="${classes}">Hello world</div>`,
   )
   expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
 })
}

Il est intéressant de voir un tableau entier défini avec dans une boucle for.

html`<div id="x" class="${classes}">Hello world</div>`,

${classes} est remplacé par le premier élément du tableau ci-dessous :

[<br>
 'bg-linear-to-r from-red-500',<br>
 'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',<br>
],<br>

À propos de nous :

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et construisez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Nous fournissons également des services de développement Web et de rédaction technique. Contactez-nous à hello@thinkthroo.com pour en savoir plus !

Références :

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/tests/ui.spec.ts

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw

3. https://stackoverflow.com/questions/34772762/what-are-the-actual-uses-of-es6-raw-string-access

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!