Monaco editor CSS nesting support
Closed this issue · 9 comments
Currently, the monaco editor shows errors when using CSS nested selectors.
Is it possible to update the engine to remove these errors? Are there any SDK config options that might solve this issue?
After a brief search, this may be related to my request.
Thank you!
Thank you for raising that up and for the helpful link.
I will watch that issue in Monaco editor till supported and update it.
May be a temporary solution is loading CSS in Monaco editor as SCSS (which is a superset of CSS). Of course, the SCSS compiler will not be used in that case.
What do you think?
Your temp solution works great. Thank you for the tip!
I have implemented this workaround. (use SCSS language in Monaco instead of CSS, till official support lands)
Please try it on this preview URL and let me know if you have any comments:
https://48652ce8.livecodes.pages.dev/
Thank you for reporting this issue.
Yes, this works great. Thank you
I was also hoping it would solve similar issues with CSS @layer. However, even with your SCSS workaround, it still show errors. Not sure if they are similar, but am happy to have the nesting workaround.
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
Yes, this works great. Thank you
I was also hoping it would solve similar issues with CSS
@layer. However, even with your SCSS workaround, it still show errors. Not sure if they are similar, but am happy to have the nesting workaround.https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
@gapmiss
we need to wait for monaco to support that
the css nesting workaround has been merged and should be available in next release
meanwhile, you may test it on https://next.livecodes.io/
thank you for reporting
@hatemhosny FYI… I've noticed since this workaround, that CSS code comments (⌘+/) are being rendered as // instead of /* */
@hatemhosny FYI… I've noticed since this workaround, that CSS code comments (
⌘+/) are being rendered as//instead of/* */
@gapmiss
I see. Let's revert this workaround and wait till new CSS features are officially supported in Monaco.
Thanks again.
@hatemhosny agree, best choice at the moment ... thank you
hi @gapmiss
CSS nesting & @layer are now supported on Monaco editor
demo:
https://livecodes.io/?x=id/hjqjv3avhkh
demo: https://livecodes.io/?x=id/35w66b2vbdk
Thank you :)