Loving the CSS editor - please combine with the style attribute!

Ideas and Feedback
1

guys really loving the CSS editor - honestly an amazing feature to have when combined with the className HTML attributes. I feel like it would be even more powerful if we could also combine it with the “style” attribute to make it more versatile by being able to set CSS variables

2

Hi! Not entirely sure I follow, do you have an example of what you mean? Are you trying to set CSS variables from JS/React props?

3

I can think of many use-cases. For example, let’s say I want to add a very specific border to a span in a text-element. Currently, I can’t control the layout of the border with the margin (for some reason it doesn’t work). I could simply add a class in the CSS editor

4 
.u-line { 
  position: relative 
} 

.uline-after { 
  content: ''; 
  position: absolute;
  inset: 0 0 var(--bottom, 0) 0;
  background-color: currentColor;
}

then I just need to specify the --bottom variable in the style of each element with the u-line class. Of course I can create code components for this, but it’s a bit of an overkill for simple style tweaks. As is, there is already a style option in the HTML attributes but I can’t seem to figure out how it works

image.png

5

You could try creating a color token for that, and referencing it from your css, like var(--plasmic-token-NAME)

6

it’s not really about the color, it’s about the --bottom css variable which normally can be set as a style property on HTML elements for flexibility. I just don’t understand the current use-case for the style on the HTML attributes

7

Yeah, you can’t do anything with it right now :thinking_face: