Feature idea: Search on CSS selector and return SASS/LESS rule

Often when debugging styling in the browser, you're looking at compiled CSS selectors, and tinkering around with values to get something pixel perfect.

In a perfect world, we'd all be using CSS source maps, but when working with others' build processes, or at companies, they are not always available.

As such, it would be really useful to be able to search for a selector, in this case ".share-bar li > a" and have WebStorm find the SASS as well as the CSS it relates to.

I was thinking about how this could be done: Perhaps if WS finds the text, and recognises it as being a selector in a (compiled) CSS file, it could do a subsequent search in the project's SCSS files, but working down the selector's subjects and combinators until it finds a matching block.

Might not be worth it if most people are using source maps, but would be a very cool feature.

Comment actions Permalink

That sounds like it would work where you do have source maps, but in my current project for example, they're using rails, and it's not set up (not my domain) to generate source maps.

Additionally, Rails compiles the source files once, then Browserify bundles the CSS files again, so source maps get mashed in the process (we have it slated to look at how to update the build process so this doesn't happen) but on a project as big and complex as this, changing the build process has its own pitfalls, so is not a high-priority.

Comment actions Permalink

Not sure if WS keeps its own internal stash of source maps though :)


Please sign in to leave a comment.