Support a styled API same as the one found styled-components or @emotion/styled

[joseDaKing]

It would be nice if react-fela did support a styled API same as the one found styled-components or @emotion/styled, it could use the useFela hook under the hood if you don't intend to support the feature could you please explain why?

[robinweser]

Heyo! That's actually a good question, I might add this to the FAQ page.
I'm not planning to ship a styled API as I don't think it's that good. It actually is more complex than it needs to be and it includes quite some overhead just to provide the shorthand for every HTML element (e.g. styled.div, styled.h1, etc.).

On the other hand, Fela shipped with pretty much the same API long before styled-components was even a thing: createComponent

The only difference is that it's a generic function with the order of arguments switched. e.g.

const Button = createComponent({
  appearance: "none",
  border: 0,
  backgroundColor: "blue",
  fontSize: 16,
  padding: 10,
  textAlign: "center",
  color: "white",
  ":hover": {
    backgroundColor: "lightblue"
  }
}, "button")

I recommend extracting the style into its own constant though.

It also accepts a function of props and theme if required.

const style = ({ size, theme }) => ({
  appearance: "none",
  border: 0,
  backgroundColor: theme.colors.primary,
  fontSize: size,
  padding: 10,
  textAlign: "center",
  color: "white",
  ":hover": {
    backgroundColor: theme.colors.primaryDark
  }
})

const Button = createComponent(style, "button")

But, as mentioned in the docs I actually recommend useFela.
That said, feel free to create your own API that builds on top of useField.

[joseDaKing]

You are right styled-component API is complex and it includes some overhead but what I meant is to provide a simple styled API like this one,

interface INameProps { $name: string; }

const Box1 = styled("div")<INameProps>(
  // the type of props will be INameProps and div element props
  {},
  props => ({})
);

interface IAgeProps { $age: number; }

const Box2 = styled.extend(Box2)<IAgeProps>(
   // The type of props will be INameProps, IAgeProps and div element props
  props => ({})
);

const test = (
  <Box2 
  as="button" 
  type="submit"
  // css prop for arbitrary styles
  css={{
    margin: "20px"
  }}/>
)

Also, a responsive variant API (like the one found in stitches) can be built on top of the fela styled API, but I will write it on my own, and if you become interested in the future I can contribute to this project.

[robinweser]

Hmm. I don't see how this is any different to createComponent?

Also checkout fela-plugin-responsive-value. This might be just what you're searching for.

[joseDaKing]

You are actually right the difference is almost nothing, therefore I will try to write a higher level styled API that will use method chaning and the builder, it will look more like this:

const Box = styled("div")
    // base Styles that will never change
    .base({
        display: "flex",
        margin: 16
    })

    // Variants that can be mapped to known values 
    .addStaticVariant("size", {
        lg: {
            padding: 16
        },
        md: {
            padding: 32
        },
        sm: {
            padding: 64
        }
    })

    // Dynamic variants
    .addDynamicVariant("space", (value: number) => {
        return {
            margin: value
        };
    })
    // Map props to to cssproperties
    .mapCSSProperties(
        "flexDirection",
        "flexWrap",
        "flexFlow",
        "justifyContent",
        "alignItems",
        "alignContent",
    )
    // Defaults the variant
    .defaults({
        size: "md"
    })
    .build();

const test = (
    <Box
    flexDirection="column-reverse"
    size="lg"
    // Responsive variants
    space={{
        "@media (min-width)": 32
    }}/>
)

[robinweser]

I'm not sure why you would want to have such a complex & verbose API to begin with, but that's definitely something you can do!
Fela itself is really low-level and supports all kind of abstractions on top of it.