kripod / kripod/otion

Plugin system

Open
#4 1 comment 1 reaction 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
624
Forks
22
PR merge metrics
No merged PRs in 30d

Description

## Motivation

The ability to specify plugins [similar to Glamor](https://github.com/threepointone/glamor/blob/master/docs/plugins.md).

## 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.

```js
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:

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

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

Contributor guide

Open the contributing guide

Research direction

The issue names no files, tests, or entry points; start by reading the linked Glamor plugin documentation and reviewing the existing css API shown in the examples. Before implementation, clarify the plugin contract, aliasing and translation behavior, and interaction with caching. Done requires an agreed design and validation of the stack and grid examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.