thinkThrooIn this article, we analyze the usage of String.raw in Tailwindcss source code.
String.raw
MDN documentation says that:
“The String.raw() static method is a tag function of template literals.
This is similar to the r prefix in Python, or the @ prefix in C# for string literals.
It’s used to get the raw string form of template literals — that is, substitutions
(e.g. ${foo}) are processed, but escape sequences (e.g. \n) are not.“
Example 1:
The below example is picked from 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"
This above example’s execution result looks like this:
> "The file was uploaded from: C:\Development\profile\aboutme.html"
Example 2:
If you run the same example without String.raw using the code below:
// 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"
Result looks like this:
> "The file was uploaded from: C:Developmentprofileaboutme.html"
Example 3:
If you run the same example involving \n using the code below:
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)
Result looks like this:
> "filePathWithoutStringRaw:" "
C:Developmentprofileaboutme.html"
> "*******"
> "filePathWithStringRaw:" "\nC:\Development\profile\aboutme.html"
How Tailwindcss uses String.raw:
ui.spec.ts test file assigns String.raw to html and css.
html is found to be used in a lot of tests written in ui.spec.ts
Let’s take a closer look at this test code:
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)
})
}
It is interesting to see an entire array defined with in a for loop.
html`<div id="x" class="${classes}">Hello world</div>`,
${classes} gets replaced with first item of the below array:
[
'bg-linear-to-r from-red-500',
'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',
],
About us:
At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.
10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.
We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)
We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!
