Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a babel plugin to handle the gu unit #500

Open
wants to merge 3 commits into
base: next
from
Open

Add a babel plugin to handle the gu unit #500

wants to merge 3 commits into from

Conversation

@bpierre
Copy link
Member

bpierre commented Aug 18, 2019

See discussion: #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 -).

@bpierre bpierre requested review from sohkai and AquiGorka Aug 18, 2019
@@ -0,0 +1,53 @@
import { isStyled, isHelper } from './utils/detectors'

const GU = 8

This comment has been minimized.

Copy link
@AquiGorka

AquiGorka Aug 19, 2019

Contributor

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

This comment has been minimized.

Copy link
@bpierre

bpierre Aug 19, 2019

Author Member

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.

This comment has been minimized.

Copy link
@AquiGorka

AquiGorka Aug 19, 2019

Contributor

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


## Features

- Adds the `gu` unit to styled component’s CSS blocks (in normal styled

This comment has been minimized.

Copy link
@AquiGorka

AquiGorka Aug 19, 2019

Contributor

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

This comment has been minimized.

Copy link
@bpierre

bpierre Aug 19, 2019

Author Member

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.

Copy link
Contributor

AquiGorka left a comment

❤️ gu

@stale stale bot added the abandoned label Sep 22, 2019
@stale stale bot closed this Sep 29, 2019
@aragon aragon deleted a comment from stale bot Sep 30, 2019
@bpierre bpierre reopened this Sep 30, 2019
@stale stale bot removed the abandoned label Sep 30, 2019
@bpierre bpierre mentioned this pull request Oct 4, 2019
@stale stale bot added the abandoned label Oct 30, 2019
@aragon aragon deleted a comment from stale bot Oct 30, 2019
@stale stale bot removed the abandoned label Oct 30, 2019
bpierre added 2 commits Aug 18, 2019
…d-components
@bpierre bpierre force-pushed the babel-plugin branch from 26f0baa to a61268e Nov 18, 2019
@bpierre bpierre changed the base branch from newstyle to next Nov 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.