
Show HN: StyleURL – Edit CSS via Chrome Devtools and turn the diff into a gist - firloop
https://www.styleurl.app
======
firloop
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...](https://gist.github.com/Jarred-
Sumner/4197f93e0fc62d7cf235d41eef5a7fa3)

[1]: [https://github.com/Jarred-Sumner/styleurl-
extension#stylefil...](https://github.com/Jarred-Sumner/styleurl-
extension#stylefile---an-open-standard-for-user-style-metadata)

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

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

~~~
maturz
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.

~~~
saintPirelli
Yes please.

------
nikkwong
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!

~~~
paulirish
> 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/](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.

~~~
Jarred
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](https://www.dropbox.com/s/qa57kvsazglx22y/changes.png?dl=0)

StyleURL:
[https://www.dropbox.com/s/5g8erdiskdskkhx/styleurl.png?dl=0](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.

------
flaviocopes
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/](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!

------
101km
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.

~~~
Jarred
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

------
wuliwong
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.

~~~
Jarred
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

~~~
wuliwong
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.

------
otibsa
Suggestions:

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

