Experimental babel macro

[deckchairlabs]

I've been messing around with creating an experimental babel macro (originally forked from https://github.com/atanasster/babel-plugin-theme-ui thanks @atanasster! for sparking the idea), with the idea of breaking functionality out into plugins.

It is still very much a work in progress (handling imports are tricky), and nothing is published yet. Would love to get feedback, feature proposals etc.

The name is not final, as I wouldn't want to steal that namespace from this fine project.

https://github.com/deckchairlabs/theme-ui.macro

[deckchairlabs]

I've published an experimental tag to npm https://www.npmjs.com/package/theme-ui.macro and theres an example create-react-app here https://github.com/deckchairlabs/theme-ui.macro/tree/main/examples/create-react-app

There's still quite a few edge cases to cover, but I'm pretty happy with how it's all progressed!

[atanasster]

hi @deckchairlabs - sounds great. I am not familiar with babel macros and havent looked at your implementation yet - any chance you can make a comparison with the babel plugin - possibly we dont need to develop two different solutions if they solve the same goal. I am not set on the babel plugin development - Although currently the only remaining feature is split files, which i was thinking to solve this week end with a webpack source loader.

[deckchairlabs]

Hey @atanasster I guess the biggest difference is that it's more explicit, meaning you have to import the macro and call it with your theme object. It is also only dependent on babel and babel-plugin-macros being configured for your project, Create React App supports babel macros out of the box.

import transformTheme from 'theme-ui.macro'

export default transformTheme({
  colors: {
    primary: 'red',
  }
})

Plugins are also a core concept for both modifying the resulting theme object, as well as generating code. The one which I am most jazzed about is TypeScript Declaration generation.

It also implements the idea of @apply from libraries like Tailwind and PostCSS which is similar to using variant within your theme object, except that the properties are copied. Which it looks like you have also implemented in the babel plugin

import transformTheme from 'theme-ui.macro'

export default transformTheme({
  colors: {
    primary: 'red',
  },
  buttons: {
    base: {
      paddingX: 2,
      paddingY: 3,
    },
    primary: {
      '@apply': 'buttons.base',
      backgroundColor: 'primary',
    }
  }
})

↓ ↓ ↓ ↓ ↓ ↓ result ↓ ↓ ↓ ↓ ↓ ↓

export default {
  colors: {
    primary: 'red',
  },
  buttons: {
    base: {
      paddingX: 2,
      paddingY: 3,
    },
    primary: {
      paddingX: 2,
      paddingY: 3,
      backgroundColor: 'primary',
    }
  }
}

[atanasster]

Thanks - so do we need the two solutions at all ? Does the babel macros handle multi-files and if not - if I go ahead and implement the webpack source loader for multi-files, will it work with the macro. Just trying to keep our efforts focused, I am fine either way.

[deckchairlabs]

Sorry should have replied directly!

[deckchairlabs]

Import and local variable resolution is handled in the macro, named, default and namespace imports are all working. The only issue is that this is not recursive currently, so will only handle imports one level deep.

I don't think we need both solutions in my opinion, I would personally use the macro since it only requires babel and the bundler can be whatever the developer wants.

But I'd like to hear what @hasparus and others think about the direction.

[deckchairlabs]

Oh yeah I'm TypeScript everything. There could be a validation phase to check that those hardcoded values are defined, might be tricky with css color names though 😬

[deckchairlabs]

One potentially minor runtime performance gain is custom properties, as the theme lookups just translate to the variable value. Only issue at the moment is that useCustomProperties needs to be false, otherwise you end up with below.

.class-name {
  background-color: var(--theme-ui-colors-primary, var(--theme-ui-colors-primary));
}

With useCustomProperties = false

.class-name {
  background-color: var(--theme-ui-colors-primary);
}

[atanasster]

I think With useCustomProperties = false is meant not use css custom vars at all, since they do not work on IE-11. Something like:

.class-name {
  background-color: #ffffff;
}

[atanasster]

In the macro approach, I like the extensibility and the generating theme types. Sounds fun :)

[deckchairlabs]

The macro generates and replaces values with custom properties if you want it to, it's currently separate to the useCustomProperties theme option.

Depending how this goes (#1291) the macro could get its configuration from the theme object. Which would save having to have a separate configuration for the macro (https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#config)