search

wixplosives / codux-core

MIT License
75 stars 8 forks source link

:vars converted to lowercase from camelCase via styles panel #1056

Open mnapthine opened 8 months ago

mnapthine commented 8 months ago

I was playing around with the stylable.io site just to see how things were setup there and playing with Codux in that project.

I noted that when changing a CSS value in the theme.st.css file via the styles panel that suddenly the styles of the Hero had changed. upon further inspection it appeared that the values had changed from lightPrimary1: rgba(10, 16, 32, 0.81); to lightprimary1: rgba(10, 16, 32, 0.81);

I was in the Hero component, selected Button:callToAction and I changed the color, then a whole host of visual changes happened due to the vars not being found.

v15.21.0

idoros commented 8 months ago

Hey @mnapthine , happy to see you'r trying codux and on stylable.io new-site branch 😎

I tried running the same scenario, but couldn't reproduce the issue:

  1. open the hero component board
  2. edit the Hero component
  3. select the "callToAction" button on stage
  4. select the Button:callToAction selector in the style panel

then I tried several changes on the color property in the style panel:

All of the above changes should change the color value in the Button:callToAction and not the definition in :vars.
I might be missing some capability of codux, but I don't know what other UI is currently available that might cause this change.

Are you doing anything different?

mnapthine commented 8 months ago

Hey @idoros! Happy to be here.

So I was messing around a bit more, it's actually not just via the panel but also when I hit the prettier button on the file, I assume prettier is run on save when using the panel.

It reminds me of a very old Prettier issue. In VSCode our stylable files are formatted via stylable intelligence, I assume you guys built stylable intelligence for these type of issues as I remember we did struggle with prettier and stylable files many moons ago but had almost forgotten about it.

I also noted that this happens for state selectors as well so if I open button.st.css and add .root:callToAction {} it becomes .root:calltoaction {} after formatting with prettier.

Can one choose to use the same formatting rules for stylable files within Codux that we use within VSCode or disable format on save for stylable files edited via the panel?

Maybe I have some random config hidden away somewhere that is causing issues?? If you have any suggestions as to where I should look for stray/cached config then do let me know.

Here is a little video that shows the issue. I have tried removing the project and re-adding to no avail. I can try reinstalling Codux (I have updated Version 15.22.0) but it feels like a issue with prettier and stylable files...

For now I will avoid the Prettier button on .st.css files :-)

https://github.com/wixplosives/codux-core/assets/678624/f46962a4-2adb-4c9d-bc41-4468a2049e0e

idoros commented 8 months ago

I took a quick look at whats going on and from what I understand, Codux detects 2 potential formatters:

The quick solution to prevent prettier from formatting .st.css files is to add *.st.css to the project .prettierignore.

We'll explore ways of signaling when this happens and probably allow to configure defaults