We made an open file format called “Stylefile” 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, as well as the rest of the extension.
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.
This will make my life so much easier! Thank you so much!
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.
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".
Changes panel: https://www.dropbox.com/s/qa57kvsazglx22y/changes.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 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.
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.
This extension just tells me what things changed, so I can put them in another CSS file without editing the original minified CSS.
This extension is a nice step in that direction but still involves copy/paste and editing.
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
- add .map support for scss/sass?!
- make this usable in gitlab?!