Styling generated content in applications - Part 1

Today, I want to talk about styling generated content in applications

It often happens that content with HTML markup comes from the server, such as translation texts or the content of articles. Sometimes we have functions that generate text depending on various conditions, for example, text with prices and discounts in the shopping cart

And in our work, there are situations where we need to style certain parts of this content. How can we do that?

Let's consider an example when we need to change the text color of numbers. To do this with minimal code changes, we can add wrappers with data attributes to the generated strings:

  const lHours = `<span data-color="fiery-orange">${hours}</span>`

Read the second part

#FrontendBeer #xss #dompurify #react(c) Frontend Beer

Styling generated content in applications - Part 2

Read the previous part

Then, for example in React, we can render this text using dangerouslySetInnerHTML in an HTML tag. However, since we don't always know what content will come to us, we need to be cautious about possible XSS attacks. To prevent such attacks, we can use specialized utilities, such as the xss library

Here's an example of how to use this tool:


<h1 className="text-wrapper" dangerouslySetInnerHTML={{ __html: xss(getText(2, 35, 35), xssOptions) }} />




And you can style it like this in CSS:


.text-wrapper {
& [data-color="fiery-orange"] {
color: var(--color-fiery-orange);
}
}




Of course, you can configure more complex things than just data attributes, but I wanted to demonstrate how to quickly add styles to specific parts of the text without resorting to complex solutions with components.

As an alternative, you can also consider using the DOMPurify library

You can find an example of using the XSS library in React here

#FrontendBeer #xss #dompurify #react(c) Frontend Beer