docs(tools): Add link to a handy tool

[kentcdodds]

No description provided.

[xymostech]

Looks great for a first pass! It looks like your CSS formatter doesn't do such a great job, I came up with something a little fancier, which you can see here: https://output.jsbin.com/wubiku

function formatCss(css) {
    while(/[{}](?!\s|$)/.test(css)) { //noprotect
        // indent '{'s
        css = css.replace(/(^|\n)( *)([^{}]+){(?!\n|$)/, "$1$2$3 {\n$2  ");
        // indent '}'s
        css = css.replace(/(^|\n)  ( *)([^{}]+)}(?!\n|$)/, "$1  $2$3\n$2}\n$2");
        // indent '}'s after a '}'
        css = css.replace(/(^|\n)  ( *)}(?!\n|$)/, "$1$2}\n");
    }
    return css;
}

I'd also like to have an interface where people can play around with mixing things into the css() function. Not sure what you think a UI would look like for that.

[kentcdodds]

Fantastic! Yeah, I was looking for a better solution 😅 This is great!

I've updated the original jsbin, so we should be good to merge this, then we can think about enhancing it or adding a better tool in the future :-)

[kentcdodds]

ping :-)

[kentcdodds]

The tool has been updated to update the URL as the user types their styles so we can share output :-)

For example 😄

[xymostech]

Cool! I was looking into the CSS formatting, and found that the thing I came up with still has a bunch of bugs. :P Any luck finding a real tool for doing CSS indentation? If not I might just make something quick that's a bit more complicated than some regexes.

[kentcdodds]

For sure! Don't let that stop us from merging this though ;-)

Eventually it'd probably be best to put this in a real deployed tool on a for realz website for Aphrodite. We could have code highlighting and such with Code Mirror (which may actually be our best solution for formatting the CSS).

But let's iterate :-)

[xymostech]

Fair enough!

[ka-role]

https://www.npmjs.com/package/cssbeautify ?

On Wed, May 4, 2016 at 11:16 AM, Emily Eisenberg notifications@github.com
wrote:

Merged #67 #67.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#67 (comment)

[kentcdodds]

@ka-role, thanks for mentioning it. Unfortunately it looks like it's got some bugs: https://jsbin.com/balusi/2/edit?html,css,js,output

[sophiebits]

@ka-role is a role account for the KA organization. >.> How does it speak!