Plugin system

[souporserious]

Motivation

The ability to specify plugins similar to Glamor.

Basic example

I think a plugin system could be useful for aliasing prop names as well as take advantage of any caching the library may be doing.

This is just a rough idea, but plugins could be created through functions and all they would do is allow translation/resolution of what the incoming props mean. For example, this could be useful for libraries that may alter the CSS API with an API like Stack on top of Flexbox.

import { css, plugin } from "otion";

const stackCss = plugin((prop, value) => {
  switch (prop) {
    case 'axis':
      return ['flexDirection', prop === 'horizontal' ? 'row' : 'column']
    default:
      return [prop, value]
  }
})

stackCss({ axis: 'horizontal' })
// returns .classname { flexDirection: row }

Since plugins are created from a function they scope the custom API but still resolve to the same atomic styles used elsewhere:

import { css, stack, grid } from 'my-lib'

stack({ axis: 'horizontal' }) === css({ flexDirection: 'row' })
grid({ axis: 'horizontal' }) === css({ gridAutoFlow: 'row' })

[kripod]

Thank you for the idea!

I was thinking anout a plugin system during the initial development phases, but decided against them to reduce the scope of the library.

Auto-prefixing is sufficient for property–value pairs, but pseudos may also be supported later.

I would rather support ordinary CSS (e.g. flexbox layout) than custom logic (e.g. a stack with non-standard attributes). For the latter, components could be defined in libraries like React. Frameworks like glaze could also build upon otion to bring more customizability out of the box.