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

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

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?

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

.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

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

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

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