billymoon / Stylus

Stylus Package for Sublime Text 2 / 3
Other
129 stars 31 forks source link

New line with enter does not work inside <style lang=“stylus”> tag #70

Closed PrimozRome closed 8 years ago

PrimozRome commented 8 years ago

Enter key does not work inside sublime text 3 for new line when I am with the cursor at the end of the line inside style lang="stylus" tag...

 <style lang="stylus">
     body
         background: #eee
 </style>

It works though if the stye tag is used without lang="stylus" or if I remove the Stylus package all together. But the syntax highlighting is not working inside < style lang="stylus" > tag ... which sucks.

Any idea what to do?

grassator commented 8 years ago

For the embedded language usually the problem lies in the original package. Which Syntax do you use for this? The code you provide results in CSS syntax for when embedded in HTML. So I need additional details, but might not be able to help depending on the context.

PrimozRome commented 8 years ago

Not sure if I understand your question regarding the syntax use...?

My solution now is that I use shift+enter which will put me into the new line normally. If I remove the Stylus plugin then it works normally, but with stylus plugin I now just use shift+enter. Maybe it's a feature?

grassator commented 8 years ago

My question is what type of file do you enter <style lang="stylus"> into and what other packages do you have installed because for me inside an HTML file that doesn't trigger the stylus syntax highlighting

PrimozRome commented 8 years ago

It's a .vue - Vue JS file... I have couple of packages installed. Standard frontend JS/HTML/CSS workflow packages...

grassator commented 8 years ago

There were already a few issue with Vue.js integration and I would say it's the issue on that end and it's reported as closed: https://github.com/vuejs/vue-syntax-highlight/issues/8

jpokrzyk commented 8 years ago

The SASS sublime plugin works fine in this scenario. Even when I just use it on stylus code in the .vue files. So I would say the fix probably has to happen in this code somewhere.

I spent a couple of hours on this and then got frustrated and gave up. But a lot of that was just learning about sublime plugins and the textmate format. I might take another crack at it at some point.

grassator commented 8 years ago

I've tried to replicate the issue by testing separately Stylus with:

Both seems be working for me. Could you please try with the latest versions of both packages. If the issue persists please provide exact steps to replicate the issue and used versions of both sublime and packages.

jpokrzyk commented 8 years ago

Yep. Hang on. I'll start from scratch and write it up. Thanks for looking into this!

You definitely won't be able to reproduce with Vuejs Synxtax highlight because of: https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage#L80

The source.vue-stylus.embedded.html instead of source.stylus.embedded.html means that's not using your stylus package anymore (at least that's my understanding).

But I'm definitely having the issue with the vue complete package. If you have both plugins installed at the same time they both have the same syntax title of 'Vue Component' so you might still be using vue syntax even though you think you're using vue complete. I only mention that because it happened to me. Hopefully that's why you can't reproduce. If not I'm not sure what the issue would be.

jpokrzyk commented 8 years ago
  1. Uninstall the vue complete package. Let's just work with the vue syntax highlight for now. So install that one if it's not already.
  2. Grab this gist: https://gist.github.com/jpokrzyk/e374b05c4bd5eab5f8c54a8c07041770 or test.vue file from: https://drive.google.com/open?id=0B4xqCaDmiMftR2tzWVNNZ0RVTm8
  3. Do a crtl + / on one of the stylus lines. It should do a html comment (confirming it's not using your plugin). image
  4. Now uncomment.
  5. Now grab Vue Syntax Highlight.zip from https://drive.google.com/open?id=0B4xqCaDmiMftVmhlSm1oejdEWjQ and unzip into your sublime prefs directory. For me that's C:\Users\Jon\AppData\Roaming\Sublime Text 3\Packages\Vue Syntax Highlight. The only difference is the source.stylus.embedded.html instead of source.vue-stylus.embedded.html for the embedded stylus block.
  6. Now crtl + / and comment/uncomment again and make sure you're getting stylus comments image
  7. Now go to the end of line 8 when it's uncommented and try and do a newline with the enter key. Hopefully you're getting the same result and you're unable to get one without shift+enter image

Github wouldn't let me attach zips. Here's the google drive folder with everything: https://drive.google.com/folderview?id=0B4xqCaDmiMftVHl5bGV3Rll2eWM&usp=sharing

Let me know if that works for you for reproducing.

grassator commented 8 years ago

@jpokrzyk Thanks for a thorough report.

The problem turned out to be in the fact that in the is_enabled check for the command in Python I was checking the scope at the start of the document but when sublime dispatched the command it checked the scope under the cursor which resulted in this weird behaviour. This should be fixed now so you can checkout latest master to try it out before changes propagate to package control.

jpokrzyk commented 8 years ago

Nice! Yep that definitely did it. Thanks!