Plugins

[gregberge]

🚀 Feature Proposal

An API to easily add plugins to xstyled.

Motivation

Being able to create additional utilities without being part of xstyled core.

Example

// custom-xstyled.js
import baseStyled, { x as baseX } from '@xstyled/...'

const borderInline = style({
  prop: 'borderInline',
})

export const x = baseX.extend(borderInline)
export default baseStyled.extend(borderInline)

I am not sure if we should create a magic API to pollute things. Re-exporting is less user-friendly but avoid conflicts.

[gregberge]

@agriffis what do you think about i?

[agriffis]

@gregberge No magic APIs or pollution. Re-exporting is good—that's what I was thinking. :sweat_smile:

But my idea is still a bit different:

// custom-xstyled.js
import {create, style, system as baseSystem} from '@xstyled/...'

const borderInline = style({
  prop: 'borderInline',
})

const {css, shouldForwardProp, styled, system, x} = create({
  generators: [baseSystem, borderInline],
})

export default styled
export {css, shouldForwardProp, system, x}

so create() takes options and returns an object of functions that you export from your custom-xstyled.js (I always call mine system.js). The advantage of this is that you know the functions are synchronized in their view of the world, such as what generators they honor.

I can take a try at this if you'd like, but it will be a few days again.

[agriffis]

For a bit more context, here is system.js from one of my projects: https://gist.github.com/agriffis/c6116280df1ea26e0f1fe2027f196513

The order is:

1. import base xstyled
2. redefine system with my additions
3. redefine shouldForwardProp based on system
4. redefine styled based on system and shouldForwardProp
5. redefine x based on styled
6. export custom xstyled

Right now I have to re-implement createShouldForwardProp and getCreateStyle and createX for the unified sequence. If there were an xstyled create function then it would alleviate most of this, without needing to export individual creators.

Then xstyled itself would make its own exports using create():

// not a complete list...
const {styled, system, x} = create() // default options

export default styled
export {create, styled, system, x}

[gregberge]

@agriffis I agree that all utilities should be created from a single one. The only concern is package size. Because using x and styled does not require the same amount of code potentially.

[agriffis]

@gregberge That's a valid concern. Do you know there's a difference in package size depending on whether you import styled and/or x, or are you theorizing?

Whatever we try here, we'll have to take some measurements to understand the delta.

[gregberge]

@agriffis it should have a difference because x requires less things than styled but actually I don't think it is real because tree shaking is probably not as effective as that.

[gregberge]

Fixed in v3