search

leafOfTree / svelte-mode

Emacs major mode for Svelte.
GNU Lesser General Public License v3.0
83 stars 5 forks source link

Doesn't Understand Sass Indented Syntax #10

Open LemongrabThree opened 3 years ago

LemongrabThree commented 3 years ago

Using Sass <style lang="sass">... requires the use of indented syntax like this:

.center
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)

but Emacs keeps forcing the indentation to be like

.center
position: absolute
left: 50%
top: 50%
transform: translate(-50%, -50%)
leafOfTree commented 3 years ago

Hi, there. Unfortunately, at the moment, sass/scss/less syntax are not supported. I'll try to add this support when free.

BTW, if you're interested, you can check https://github.com/leafOfTree/svelte-mode/blob/master/svelte-mode.el and see if you can help add sass support, maybe based on https://github.com/nex3/sass-mode, which should be similar to coffee

LemongrabThree commented 3 years ago

I did some investigating; it looks like sass-mode has all the same stuff that's used to make svelte--coffee-submode work, I'll see if I can hook it up tomorrow.

If I pull it off, can I add the changes to the repo or should I just mail you the changed file?

LemongrabThree commented 3 years ago

Well, tried copying the Coffee submode code and substituting the appropriate identifiers from sass-mode.el, didn't work. I'd normally take this as an opportunity to get into EL seriously, but I'm really busy right now and the semester starts in a week. Guess I'll use SCSS for now. Sorry! :S

leafOfTree commented 3 years ago

Thanks for your time and efforts. It's totally fine. You probably forgot to replace script with style, which is kind of subtle.

I've just added sass support https://github.com/leafOfTree/svelte-mode/commit/3f3a6c2e5e6f49e136380d245462c3769ac6f0c3. Nevertheless, feel free to help with whatever you like. You can folk the repo and then create a pull request with your changes.

Screen Shot 2021-10-11 at 2 13 34 PM
LemongrabThree commented 3 years ago

You probably forgot...

I made that mistake initially and it just gave me CSS highlighting and indentation, but then I changed it to style and it stopped doing any highlighting. So it was loading the submode, but the submode wasn't working.

I just cloned the newest version (by the way, I tried reinstalling through ELPA and it said it can't find it) and it does the same thing - it responds to <style lang="sass"> by loading the appropriate submode, but the submode doesn't work. Is there any other stuff I need to do? I made sure sass-mode works on its own in a .sass. file, tried uninstalling sass-mode because it might have been a wrong version, and also made sure it's actually loading the current version of svelte-mode (M-x desc-var svelte--sass-submode), but all with the same results. Anything else I could be missing?

leafOfTree commented 3 years ago

Not sure.

I tried (M-x package-install sass-mode) (which seems to automatically install haml-mode as a dependency) and loading svelte-mode from a local repo in my Linux env. It works for me.

Below is my env info

You can also try (customize-set-variable 'svelte-display-submode-name t) for better debug info

LemongrabThree commented 3 years ago

Well, I upgraded to Emacs 27.2 (Where did you get 28.0.50? I couldn't find it on the GNU site) and reinstalled sass-mode. Now it works, although there's still one odd bug:

.center
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)

body
font-size: 2em

It correctly indents below a .class or #id selector, but not for the element selector. It also doesn't color the body, indicating it isn't recognizing it as a selector. This doesn't happen if I'm using plain sass-mode. Do you have the same problem?

leafOfTree commented 3 years ago

Where did you get 28.0.50?

Now I remember I probably compiled it from https://github.com/emacs-mirror/emacs.

Do you have the same problem?

Same here. Something wrong with sass indent when in svelte-mode. I'll check it out later.

leafOfTree commented 3 years ago

I only managed to fix the indent in svelte-mode https://github.com/leafOfTree/svelte-mode/commit/6a1d4274af7f4c0f271f77bd96678c3dd1fa68e1. Now it behaves the same to sass-mode.

For syntax, I've no idea why svelte-mode doesn't highlight keywords with a - like font-size. I still need some time to figure it out. The sass-mode corresponding code is https://github.com/nex3/sass-mode/blob/247a0d4b509f10b28e4687cd8763492bca03599b/sass-mode.el#L93.

For me, neither of the two modes highlights the body tag. Do your sass-mode highlight it?

Screenshot from 2021-10-16 15-00-08

LemongrabThree commented 3 years ago

Thanks! That's a big help already.

As for the body tags - no, it doesn't, not in bare Sass either. Nor does it highlight any other element selector, only class and ID selectors.

Another issue:

button:hover
background: #aaaaaa

In both modes for me, it highlights the button:hover line the same colors as the background: #aaaaaa line and fails to indent the background line, indicating it thinks that button:hover is a style property.

leafOfTree commented 3 years ago

Glad to hear that. You're right. The bare sass-mode does have the issue. It hasn't been updated for a long time. I'll take a look when I can.