Show HN: StyleURL – Edit CSS via Chrome Devtools and turn the diff into a gist | Hacker News Reader

Show HN: StyleURL – Edit CSS via Chrome Devtools and turn the diff into a gist

styleurl.app

94 pointsfirloop22 comments

Worked on StyleURL over the past couple of weeks with my friends Jarred (most of the code) and Lucy Guo (design). The goal is to make it super simple for designers & front-end devs to make changes to CSS on websites and export those changes into a gist[0].

We made an open file format called “Stylefile”[1] that the extension parses to apply shared changes to sites. Eventually, we want to support stylefiles on other platforms than just GitHub.

It was definitely inspired by something that we wanted for ourselves, as well as a reaction to the scummy behavior of Stylish....

It was really fun building this, especially writing the stylesheet diffing module, which diffs two stylesheets and prints the difference as valid CSS. It's open source[1], as well as the rest of the extension[2].

We're not really sure what to build next, or if this is even useful. Please share any feedback, especially what you might use it for.

[0]: https://gist.github.com/Jarred-Sumner/4197f93e0fc62d7cf235d4...

[1]: https://github.com/Jarred-Sumner/styleurl-extension#stylefil...

[2]: https://github.com/lukemiles/stylesheet-differ

[3]: https://github.com/Jarred-Sumner/styleurl-extension

You could look into porting it to Firefox, since they use a similar API now it would hopefully not require much work. There was something called Firediff before but it hasn't been updated for Firefox Quantum.

Yes please.

This looks really cool. I've occasionally dabbled with messing with CSS on sites before. I installed it, I'll give it a whirl when I get a chance.

I have to fanboy in here as well...this tool is exactly what I've been wanting for a long time. You've absolutely nailed the workflow for my use case. Thank you so much for building it.

Oh my god, I've been waiting and looking for something like this for forever. It's a total pain in the arse to change dozens or hundreds of styles on a page in devtools and have to keep a mental model of what's been changed to then manually save each of the changes to disk. It's incredibly painstaking, since devtools doesn't keep a log of all your changes, the closest thing is the inspector-stylesheet, which doesn't work if you're editing an existing stylesheet.

This will make my life so much easier! Thank you so much!

> since devtools doesn't keep a log of all your changes

It does now, although you'll have to find it. :) Flavio mentioned this below, but peek at the new Changes panel: https://umaar.com/dev-tips/137-changes-panel/ And while it does track changes to all resources and inspector-stylesheet, any changes made to inline styles aren't captured yet.

That aside, styleurl looks great and clearly improves the collaboration workflow.

Thanks for the kind words about StyleURL. I didn't know about the Changes panel until recently, that's going to help a lot of developers.

Behind the scenes, StyleURL parses the CSS and uses an AST to do the diff'ing, rather than generating a character-by-character diff like one might see in a pull request on Github. StyleURL creates a more helpful diff because it ignores irrelevant changes (such as whitespace).

As a comparison, on Hacker News, I changed the font-size on body from "10pt" to "12pt".

Screenshot comparison:

Changes panel: https://www.dropbox.com/s/qa57kvsazglx22y/changes.png?dl=0

StyleURL: https://www.dropbox.com/s/5g8erdiskdskkhx/styleurl.png?dl=0

This is a contrived example, but most of the diff shown in the Changes panel is unintentional whitespace changes, whereas StyleURL's diff only shows valid CSS that changed.

The novelty of the Chrome Workspaces wore off for me even though it promises so much, particularly with source maps enabled.

The problem for me was in the details, triggering the CSS compiler and being able to do undo repeatedly (for me most CSS undo things need a few lines changing). Furthermore I have the SCSS files open anyway in my IDE and for me I write a lot of concise comments in the SCSS file for the next guy that has to edit my code.

What does work for me is making my changes in the IDE with that triggering the CSS compiler and, through Chrome Workspaces, having the browser reload the changes automatically. This auto-reload has been a game changer, due to placing emphasis on commenting my code I am not seeing how I am going to be having Chrome update my SCSS files any time soon. The functionality of my IDE is much better for that, it also has syntax checking so I also get all things sorted alphabetically and know if I have gone over the depth of three when it comes to specificity.

Wow, it's literally in the most hard-to-find part of the devtools UI. No wonder I thought it didn't exist.

> dozens or hundreds of styles on a page in devtools

I've never made more than a couple changes at a time in devtools (I'm a front-end dev). Do you write the majority of your css in the browser first before adding it to a css/sass file? I tend to do the opposite, write the bulk of it in an editor and tweak a little in the browser as needed. Just curious of the process.

People do do this... I'm astounded sometimes at the workflows I see, but I've worked with people that wrote all their HTML in dev tools and copied it back to their editor, and wrote huge chunks of JS in the console. The latter tends to not work well, because everything is constantly dirty and state is corrupted.

Actually, you can apply the changes to local files using Chrome's in place editor when you map your local workspace in Devtools. (See the sidebar in Sources tab)

This is amazing. I just tried editing a minified CSS, while the Chrome Dev Tools have a way to show the changes (https://umaar.com/dev-tips/137-changes-panel/) the result I get is the whole minified line.

This extension just tells me what things changed, so I can put them in another CSS file without editing the original minified CSS.

Thank you!

I know you can have a workspace and edit local files via Chrome, but is there really no simple way to "close the loop" and sync the devtools changes to a local file?

This extension is a nice step in that direction but still involves copy/paste and editing.

I bet it's possible to write a webpack plugin that takes CSS changes from StyleURL and saves them to disk

It currently outputs CSS based on the filenames from the sourcemaps, theoretically you could append the changes to the same files via a webpack plugin, and then if you ran it through some step after to make the selectors appear in the right place in the file, you would get the experience you describe, where it's like you edit the CSS in chrome and it saves it to disk directly so you can commit it later

Seemed like too big of a jump though to start off with that, because first asking people to install a Chrome extension is a thing, and then not everyone uses webpack for front-end and I'm sure there'll be complicated edgecases with something like this

I feel really stupid but I don't know how to use it. I clicked the button to open the toolbar in the footer but after that, I don't see where I am supposed to actually input my CSS edits.

Sorry this isn’t easier to figure out, currently working on a short tutorial video which should hopefully make it easier to figure out the first time

I think just a single line somewhere easy to see that tells the user that they edit in the console and can see the changes in your toolbar would suffice.

I believe you are supposed to make the changes using the normal Chrome dev tools

ah yes, you are correct. Thanks.

Suggestions:

- add .map support for scss/sass?! - make this usable in gitlab?!

Reply on news.ycombinator.com