Eiche fam

The last update I pushed out introduced a collapsed view of the notes. It’s what I prefer, but after being requested to revert the change, I decided to make it an option.

Due to this change, I had to add the permission “storage” back into the extension. Unfortunately, Google does not list “storage” in its optional permissions page in the Chrome API documentation.

This change alone — requiring a new permission — makes it worthy, I think, for a major version bump (as opposed to a minor one). I also cleaned up several CSS bugs I’d introduced in the last update with the collapsed list view. I think they’re all squashed now, but by all means, let me know if you find something. (Feel free to submit feedback on the extension’s Chrome Store support page, raise an issue on Github, or submit a comment below.)

I posted a couple times about how Keep’s markup and CSS use obfuscated class names. A direct result of this is that my own CSS (which is loaded after the Keep website itself finishes loading) ends up looking like this:

.IZ65Hb-n0tgWb {
    .r4nke-YPqjbf {
        font-weight: normal !important;
        font-family: 'Roboto Slab', 'Times New Roman', serif !important;
        padding: 15px !important;
    }
}

In this update, I decided to make this a little more modular. I was already using Sass instead of vanilla CSS, so in places where it made sense, I split the stylesheet apart into separate files: one for variables, and one for the actual styles.

I ended up with something like this:

$font-stack-title: 'Roboto Condensed', 'Droid Sans', arial, sans-serif;

.r4nke-YPqjbf {
  font-weight: bold !important;
  font-family: $font-stack-title !important;
  padding: 10px 15px !important;
}

But the major headache of the stylesheet wasn’t the styles themselves; it was the class names. I wondered if it was possible to use variables for class names. The answer, I found, is yes.

The thing to keep (ha ha) in mind is that you have to use interpolation, similar to how variables are used within native CSS functions, like calc().

So I can do this in my variables file:

$font-stack-body: 'Roboto Slab', 'Times New Roman', serif;
$list-view: IZ65Hb-n0tgWb;
$note-title: r4nke-YPqjbf;

And this in my styles definition file:

.#{$list-view} {
    .#{$note-title} {
        font-weight: normal !important;
        font-family: $font-stack-body !important;
        padding: 15px !important;
    }
}

And now, the code is much, much more readable.