Add a babel plugin to handle the gu unit

[bpierre]

See discussion: https://github.com/aragon/aragon-ui/issues/333

babel-plugin-aragon-ui

Plugin greatly inspired from babel-plugin-styled-components, and made to work with it.

What it does

Transforms this:

<div
  css={`
    width: 4gu;
    height: 4gu;
  `}
/>

Into this:

<div
  css={`
    width: 32px;
    height: 32px;
  `}
/>

Features

• Adds the gu unit to styled component’s CSS blocks (in normal styled
  components, in the css prop, or using the css helper).

Installation

In your .babelrc, declare this plugin before styled-components:

{
  "plugins": [
    "@aragon/babel-plugin-aragon-ui",
    "styled-components"
  ]
}

To do

• Support for text styles: -ui-text-style: title1
• Support for theme values: -ui-theme(surfaceContent)

Note: both are using the CSS syntax for proprietary extensions, but we might as well decide to drop them, or not follow it exactly (e.g. by removing the initial -).

[AquiGorka]

Would it make sense to bring this from aragonUI?
import { GU } from '@aragon/ui'

[bpierre]

Yes I thought about it, but it would mean either having a specific aragonUI as a dependency, or having it as a peerDependency, which doesn’t work since we also want to use it from aragonUI itself 😆

So I thought it’s just simpler to have it hardcoded. Another option would be to transform to x * GU, and add the import dynamically, but it seems a bit too much for something that should not change often, if ever.

[AquiGorka]

Yeah, makes sense, tough circular dependency, we'll need to keep this in sync or we might end up with two different values for GU

[AquiGorka]

This paragraph sounds like the description, maybe it should go right after the h1?
Should we add some usage?

[bpierre]

Yes I need to make this a bit better, with some examples to. I also added some “To do” items in the PR description that I’ll add later.

[AquiGorka]

❤️ gu

[Evalir]

Should we pick this up again or just close? A babel plugin for GU is quite nice but maybe doesn't align with current priorities. cc @bpierre

[bpierre]

@Evalir I think we could merge it in its current state, since it is functional and separated from aragonUI. The idea of leaving this open was to have other people testing it a little bit more, but we or someone else can iterate on it in separate PRs. What do you think?

[Evalir]

Sounds good to me! Let's merge and then iterate on it. 😬