twilio-labs/paste

_before is not applied to BOX Element

moretalk opened this issue · 1 comments

moretalk commented

Description

When I apply styling with the _before element to a BOX I am finding that nothing is actually set. I have tried doing this directly on the Box and also through a CustomizationProvider and nothing is set?

Link to Reproduction

https://codesandbox.io/p/sandbox/modest-meninsky-t3tsj4

Steps to reproduce

Apply style to BOX element with _before. Nothing renders

Paste Core Version

17.7.0

Browser

Google Chrome 121

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response

dosubot commented

🤖

Based on the context provided, it seems like the _before styling is not being applied to the BOX element because the content property in the _before pseudo-class is not being set correctly.

In your code, you have:

_before={{ content: `"Before text"`, position: "absolute", bottom: 0, left: 0 }}

The content property in CSS is used with the ::before and ::after pseudo-elements, to insert generated content. The property is used in conjunction with these pseudo-elements to insert content, specified by the property value, before or after an element's document tree content.

The content property can take several values, but when you want to insert text, you should use a string. In CSS, strings are written in double or single quotes: content: "text". However, in your case, you are using double quotes inside double quotes, which is causing the issue.

To fix this, you should escape the inner quotes:

_before={{ content: '\"Before text\"', position: "absolute", bottom: 0, left: 0 }}

Or use single quotes for the inner quotes:

_before={{ content: "'Before text'", position: "absolute", bottom: 0, left: 0 }}

This should apply the _before styling to the BOX element as expected.

The Paste design system does indeed support the use of pseudo-elements like _before and _after in its Box component. The PseudoPropStyles object explicitly includes _before: "&:before" and _after: "&:after", confirming that these pseudo-elements can be used with the Box component.

You can refer to the following sources for more information:

I hope this helps! If you have any other questions, feel free to ask.

Sources

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

  • 👍2
  • 👎1