6 ms·

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

94 points by firloop 8y ago

firloop 8y ago
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/4197f93e0fc62d7cf235d41eef5a7fa3 https://gist.github.com/Jarred-Sumner/4197f93e0fc62d7cf235d4... [1]: https://github.com/Jarred-Sumner/styleurl-extension#stylefile---an-open-standard-for-user-style-metadata https://github.com/Jarred-Sumner/styleurl-extension#stylefil... [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
- wuliwong 8y ago
  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.
- maturz 8y ago
  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 8y ago
    Yes please.
- hellojason 8y ago
  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.
deleted 8y ago
[deleted]
nikkwong 8y ago
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!
- buremba 8y ago
  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)
- paulirish 8y ago
  > 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 8y ago
    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.
otibsa 8y ago
Suggestions: - add .map support for scss/sass?! - make this usable in gitlab?!
flaviocopes 8y ago
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 8y ago
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 8y ago
  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 8y ago
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.
- daveidol 8y ago
  I believe you are supposed to make the changes using the normal Chrome dev tools
  - wuliwong 8y ago
    ah yes, you are correct. Thanks.
- Jarred 8y ago
  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 8y ago
    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.

94 points by firloop 8y ago

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/4197f93e0fc62d7cf235d41eef5a7fa3 https://gist.github.com/Jarred-Sumner/4197f93e0fc62d7cf235d4... [1]: https://github.com/Jarred-Sumner/styleurl-extension#stylefile---an-open-standard-for-user-style-metadata https://github.com/Jarred-Sumner/styleurl-extension#stylefil... [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

wuliwong 8y ago
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.
maturz 8y ago
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 8y ago
  Yes please.
hellojason 8y ago
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.

deleted 8y ago

[deleted]

nikkwong 8y ago

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!

buremba 8y ago
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)
paulirish 8y ago
> 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 8y ago
  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.

otibsa 8y ago

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

flaviocopes 8y ago

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 8y ago

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 8y ago
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 8y ago

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.

daveidol 8y ago
I believe you are supposed to make the changes using the normal Chrome dev tools
- wuliwong 8y ago
  ah yes, you are correct. Thanks.
Jarred 8y ago
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 8y ago
  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.