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

Doesn't seem to work in my VSCode #53

Closed nmaxcom closed 5 years ago

nmaxcom commented 5 years ago

Latest VSCode and css-peek extension, running on macOS 10.12.6.

I had forgotten I had this extension, so when I discovered it wasn't working, I reinstalled it. But it doesn't seem to work even with inline-declared CSS (<style> in the HTML) nor with bootstrap CDN <link>.

If I try 'Peek definition' ⌥F12 on an id that's declared within a style tag a few lines up:

image

Same result when peeking classes loaded from the bootstrap file.

Trying 'Peek references' ⇧F12 on an inline defined item or one from bootstrap I also get the same result:

image

I'm pretty sure I'm doing something wrong, but I don't know what it is.

pranaygp commented 5 years ago

@nmaxcom yeah, right now it only supports extenal stylesheets that you have available locally (i.e. in a dedicated .css, .less or .sass file). I'm planning to add support for<style> tags soon. Supporting external styles from bootstrap CDN unfortunately won't be possible 😢

nmaxcom commented 5 years ago

Oh, okay. I'll keep that in mind.

About not being able to support online styles, I think it wouldn't be that difficult to parse the HTML looking for those online *.css files, downloading them in a temp folder and use your "class/id searcher" against those as well, right?

Anyhow thanks for the answer and the plugin.

pranaygp commented 5 years ago

One problem I see with doing that is it gives you the false sense of ability to modify these CSS files that've been downloaded locally. You might open the file with the peek feature and modify it, but when you actually open your .html file it'll still be using the real file from CDN

nmaxcom commented 5 years ago

I see what you mean. I guess in those particular cases the peeker should act as read-only, maybe even adding a slight color difference to help understand it's read-only (I'm unaware of VSCode specifics to accomplish something like that). For example in CSS frameworks like Bootstrap, you'd never modify the Bootstrap codebase but you'd benefit greatly from getting all those classes available through your intellisense-like feature.

From where I'm standing that would be much better than not having it at all. Just my 2 cents.