Generate "system" CSS

[shawnbot]

This PR adds a build step that generates static CSS for each of our "system" props in #145. You can see the CSS that it generates in docs/system.css.

Selectors

• .bg-{color} for all values in colors.bg.*
• .border-{color} for all values in colors.border.*
• .color-{color}-{index} for all colors.*.* (except colors.bg and colors.border)
• .color-{color} shorthands for colors.*[5]
• .f-{index} for all fontSizes values (responsive)
• .border-width-{index} for all values in borderWidths (missing)
• .font-weight-{name} for all fontWeight values (missing)
• .lh-{name} for all values in lineHeights (missing)
• .max-width-* for all maxWidths values?
• .round-{index} for all radii values (responsive?)
• .w-{ratio} for column grid widths? (missing)

For now I'm also including responsive whitespace (margin and padding) utilities as a test. We won't need them in the initial release because primer-utilities already provides them.

I went with PostCSS because the AST API is super simple and easy to use, and this allows us to chain additional plugins for (later) adding custom property support, minifying the resulting CSS, etc.

[emplums]

This is really really cool work! Amazing job! I don't see anything that pops out so far 👍

Curious why we run this every time we start the server vs just running it when we build in Travis? I'm also interested in what the reasoning is for rebuilding the css often vs just generating the css once? Will new css rules need to be added fairly often as our API changes or will that be a fairly infrequent situation?

[emplums]

Did you end up getting this to work?

[shawnbot]

Nope, not yet. I'm going to try inlining it via our Styles component.

[shawnbot]

@emplums Having it built all the time just ensures that the CSS is up-to-date if you've changed anything before starting the server. The signal that we've forgotten to run it is if there's a diff in docs/system.css, and we could even have CI fail if that's the case. If we're going to inline the contents of that file in the Styles component to make it work in x0, then we need to be sure that it's current.

[shawnbot]

Okay, so I followed up with a bunch of changes to how and where this CSS is generated in #155. @emplums, do you think we should merge this and then that PR, or just merge #155 (which includes this one)?

[shawnbot]

Closing in favor of merging via #155.