DEV Community

Cover image for String.raw in Tailwind CSS source code.
thinkThroo
thinkThroo

Posted on

String.raw in Tailwind CSS source code.

In 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"
Enter fullscreen mode Exit fullscreen mode

This above example’s execution result looks like this:

> "The file was uploaded from: C:\Development\profile\aboutme.html"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Result looks like this:

> "The file was uploaded from: C:Developmentprofileaboutme.html"
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Result looks like this:

> "filePathWithoutStringRaw:" "
C:Developmentprofileaboutme.html"
> "*******"
> "filePathWithStringRaw:" "\nC:\Development\profile\aboutme.html"
Enter fullscreen mode Exit fullscreen mode

Image description

How Tailwindcss uses String.raw:

ui.spec.ts test file assigns String.raw to html and css.

Image description

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)
 })
}
Enter fullscreen mode Exit fullscreen mode

It is interesting to see an entire array defined with in a for loop.

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

${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%)',
],
Enter fullscreen mode Exit fullscreen mode

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!

References:

  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

Top comments (0)