Is a withClasses helper function a good idea ...or maybe not? (for React) #130

Brendan-csel · 2021-05-13T09:18:25Z

Brendan-csel
May 13, 2021

Okay so this really is just throwing out something I've been playing with (not strictly related to vanilla-extract).

Do people think this is good, bad or ugly?

Instead of...

const Example1 = () =>
    <div className={styles.wrapper}>
        <h1 className={styles.heading}>My example</h1>
        <p className={classnames(styles.bodyText, styles.SomeOtherStyle)}>Is this a good idea?</p>
    </div>

...I've been playing with a withClasses helper function to let me write...

const Example2 = () =>
    <Wrapper>
        <Heading>My example</Heading>
        <Body>Is this a good idea?</Body>
    </Wrapper>

const Wrapper = withClasses('div', styles.wrapper)
const Heading = withClasses('h1', styles.heading)
const Body = withClasses('p', styles.bodyText, styles.SomeOtherStyle)

I appreciate this is just a cosmetic thing but I kind of like the cleaner look of Example2.

Here is the code for withClasses which seems to work fine with intrinsic components (like div) as well as custom components...

import { ComponentProps, createElement, JSXElementConstructor } from 'react'
import classnames from 'classnames'

const withClasses = <T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(
    component: T,
    ...classes: string[]
) => {
    // dynamic name to show in Devtools
    const name = `${typeof component === 'string' ? component : ""}_${classes[0] }`

    return {[name](props: ComponentProps<T>) {
        return createElement(component, { ...props, className: classnames(props.className, classes) })
    }}[name]
}

Does this already exist? Any downside? Any suggestions? All comments are welcome.

mattcompiles · 2021-05-14T00:23:58Z

mattcompiles
May 14, 2021
Maintainer

This is a stylistic thing that some people prefer. I think the culmination of this idea is something like the Stitches API where you can define an entire component interface through config. I actually experimented with this idea before which you can see here.

Ideally you would also create the component and the styles in the same file. Using our recipe system (how Sprinkles works) you could make something like the following on top of vanilla-extract.

// Heading.css.ts
import { styled } from 'some-library'

export const Heading = styled('h1', {
  fontSize: '24px',

  variants: {
    color: {
      violet: {
        color: 'blueviolet',
      },
      gray: {
        color: 'gainsboro',
      },
    },
  },
})

// App.tsx
import { Heading } from './Heading.css';

const Example2 = () => <Heading color="violet">My example</Heading>

1 reply

Brendan-csel May 14, 2021
Author

Thanks for taking the time to reply Matt - really appreciate your comments.

The approaches you mentioned certainly take things to another level beyond my basic (non-dynamic) combination of classnames and createElement.

..Stitches is very interesting if willing to forego the static CSS extraction. Creating a similar abstraction with vanilla-extract is also interesting. I'll may need to get my head around what those function in the .css.ts files actually do! :)

Brendan-csel · 2021-05-16T00:15:05Z

Brendan-csel
May 16, 2021
Author

After playing with a proper design system like Seek's Braid Design System (soon to be based on vanilla-extract) I can see this idea fades into insignificance.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Is a withClasses helper function a good idea ...or maybe not? (for React) #130

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Is a withClasses helper function a good idea ...or maybe not? (for React) #130

Uh oh!

Uh oh!

Brendan-csel May 13, 2021

Replies: 2 comments · 1 reply

Uh oh!

mattcompiles May 14, 2021 Maintainer

Uh oh!

Brendan-csel May 14, 2021 Author

Uh oh!

Brendan-csel May 16, 2021 Author

Brendan-csel
May 13, 2021

Replies: 2 comments 1 reply

mattcompiles
May 14, 2021
Maintainer

Brendan-csel May 14, 2021
Author

Brendan-csel
May 16, 2021
Author