search

pranaygp / vscode-css-peek

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

Can you only show the CSS File I linked? #127

Open cadegore opened 2 years ago

cadegore commented 2 years ago

When I hover the classes, ids or tag name, it will show all the css styles that applied to this class, ids or tag name, I find this is not helpful for me right now, can you least have an option that only focus on the file I to? Thank you

SamuelMiller commented 2 years ago

I too would like to limit CSS Peek to just the relevant CSS file used in the HTML. Right now it takes some time to look through all the CSS in my workspace folder. Maybe there is already a way to do this with the setting cssPeek.peekToExclude, where one can provide a list of file globs that filter out style files not to look for. (By default, node_modules and bower_components). However, I am not able to find any examples of how to do so.

SamuelMiller commented 2 years ago

I was able to add files to exclude with cssPeek.peekToExclude in VS Code's settings. Search for "CSS Peek." It ended up looking like this in ~/Library/Application Support/Code/User/settings.json:

 "cssPeek.peekToExclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/_reference/**",
        "**/dist/**"
    ]
cadegore commented 2 years ago

I was able to add files to exclude with cssPeek.peekToExclude in VS Code's settings. Search for "CSS Peek." It ended up looking like this in ~/Library/Application Support/Code/User/settings.json:

 "cssPeek.peekToExclude": [
        "**/node_modules/**",
        "**/bower_components/**",
        "**/_reference/**",
        "**/dist/**"
    ]

I usually open one workspace with a lot folders, within each folder, I sometimes have the same file name, like style.css, and when I use the extension, it will show up all the style for the element/classes

pranaygp commented 1 year ago

@cadegore there's no easy way unfortunately to know which style file is linked to a certain html file. In a simple case, maybe the html file is linking to the CSS file directly - which is fine. However, with the modern development stack, it's rare that the entire html is in one file. Often the <head> section is in a completely different file (maybe a shared layout), and then the file you're working on actively is bring embedded in that layout.

With React, Vue, Svelte, ejs, pug, etc. - this gets even more complicated and it's virtually impossible for the extension to be aware of what file(s) are specifically being linked

An idea that is possible is to allow you to annotate the files to include or exclude as a comment in each file. So, perhaps, at the top of the file you're working in, you could have a comment like:

<!-- @cssPeek link ../styles/style.css -->
...

It's a bit ugly to have comments like that in your codebase that are specific to a VSCode extension - however if you open up a new issue or pull request for it and there's enough demand/support for it, I'd be happy to merge something like that. Unfortunately, otherwise, the current system is the best compromise