search

pranaygp / vscode-css-peek

A vscode extension for peeking at CSS definitions from a class or id tag in HTML
MIT License
145 stars 32 forks source link

Add support for .erb files #6

Closed Vuneu closed 7 years ago

Vuneu commented 7 years ago

I can peek/go to definition on HTML files, but I do most of my development on Rails, any chance .erb support could be added?

Thanks!

pranaygp commented 7 years ago

Not super familiar with how the HTML language service works, but could you try just adding .erb as a valid file extension to your workspace/project settings.

The setting you're looking for is: css_peek.searchFileExtensions

Vuneu commented 7 years ago

I think you meant css_peek.activeLanguages, but yes! I added "erb" as an active language and now it's working.

By the way, I noticed that if I define a CSS class like

.card .content {
  /* */
}

And I try to peek at content in a block like: 

<div class="card">
  <div class="front">
    <div class="cover">
    </div>
    <div class="user">
    </div>
    <div class="content text-center">
      <div class="main">
      </div>
    </div> 
  </div> 
</div>

I get the "no definition found for content" dialog.

pranaygp commented 7 years ago

Huh, that's a pretty big bug I overlooked when building this :/

I just realised the way I was finding the rule in CSS was by iterating through 'selectors' and comparing it to the class/id value.

Normally, this would be a comparison between '.content' and '.content', but in your case, it would compare '.content' with '.card .content' and fail :(

Anyway, I fixed it with a new commit. I'll release a patch soon to fix this. I'm also working on migrating over to using a CSS Language service instead which, if I'd used initially, wouldn't have caused this issue to begin with :P