Generate BEM-ish class strings based on cva variants config

[kiastorm]

Great work with this! So simple yet so slick.

I'm using this right now with a BEM-like approach. I'm using another function to generate unique classes for each component, and then writing matching CSS/Sass.

const button = cva('cn-c-button', {
  variants: {
    variant: {
      primary: 'cn-c-button--variant-primary',
      secondary: 'cn-c-button--variant-secondary'
    },
    size: {
      1: 'cn-c-button--size-1',
      2: 'cn-c-button--size-2'
    }
  }
})

I've built another function to generate prefixed classes consistently.

const buttonClasses = createComponentClass("button", {
    variant: ['primary', 'secondary'],
    size: ['1', '2'],
});

const button = cva(buttonClasses.base, { // 'cn-c-button'
    variants: {
        variant: buttonClasses.variants.variant, // 'cn-c-button--variant-primary'
        size: buttonClasses.variants.size, 'cn-c-button--size-1'
    }
});

const buttonIconClasses = createComponentClass("button__icon", {
    placement: ['start', 'end'],
});

const buttonIcon = cva(buttonIconClasses.base, {
    variants: {
        placement: buttonIconClasses.variants.placement, // 'cn-c-button__icon--placement-start'
    }
});

It would be great if I didnt have to create two separate functions and if cva automatically generated the classes for me, or if there was an alternative function that allowed me to do so.

const {cva, prefixed, variant, part, comp, util} = createCva({
  prefix: 'cn',
  categories: {
   comp: 'c',
   util: 'u'
  }
});

prefixed('something') // "cn-something"
variant('button', 'size','2') // "cn-c-button--size-2"
part('button','icon') // "cn-c-button__icon"
comp('modal') // "cn-c-modal"
util('mb-4') // "cn-u-mb-4"

const button = cva('button', { // "cn-c-button"
  variants: {
  // Can send variant name + additional classes
    variant: ['primary', { key: 'secondary', class: util('color-blue-500') }] // "cn-c-button--variant-secondary cn-u-color-blue-500"
  },
})

const buttonIcon = cva(part('button', icon), {
  variants: {
    placement: {
      start: util('justify-self-start',), // "cn-c-button__icon cn-u-justify-self-start"
      end: util('justify-self-end`')
    }
  }
})
// Or maybe?
const buttonIcon = button.part('icon', { ... })

Something like this would be amazing for those of use building custom prefixed CSS libraries, but I'm not sure on it just yet. I haven't fully explored this but g2g

Thank you for your work :)

Related:

• https://bradfrost.com/blog/post/css-architecture-for-design-systems/

[joe-bell]

@kiastorm thanks for sharing, that's a pretty sweet idea! I was thinking about something similar too, but decided to focus on keeping cva as small as possible

Wondering if this would be good to explore as a separate package? 🤔
In other words, could your function wrap cva and extend its functionality?

[kiastorm]

Yeah I think that makes sense. I'm also exploring creating a postcss plugin that seems to have more obvious overlap with cva. Something that would allow syntax like this:

@util mb-$(#space) { // "cn-u-mb-4"
  margin-bottom: $space;
}

@component button { // "cn-c-button"
  color: #fff;
  background-color: yellow;

  @variant variant { 
    @state primary { // "cn-c-button--variant-primary"
      background: blue;
    }
    @state secondary {
      background: red;
    }
  }

  @variant size {
    @state 1 { // "cn-c-button--size-1"
      padding: 0.5rem;
    }
    @state 2 {
      padding: 1rem;
    }
    @state 3 {
      padding: 1.5rem;
    }
  }

  @variant isFullWidth {
    @true { // "cn-c-button--isFullWidth"
      width: 100%;
    }
  }

  @compound-variant size: 1, variant: primary { // "cn-c-button--size-1--x--variant-primary"
    ...
  }
  
  @compound-variant size: 2, variant: primary {
    ....
  }
}

I hadn't used postcss until this past week, so I'm not entirely sure if what I'm suggesting is possible exactly how I'm imagining it, but I see a lot of potential with this. I'll keep you updated 👀

[kiastorm]

The PostCSS plugin would look something like this

generateCvaTypeScriptFile(`${cssFileName}.styles.ts`);

if (atRule.name === 'component') {
  return replaceAtRuleWithSelector['component'](atRule.params[0])
}

if (atRule.name === 'state') {
  return replaceAtRuleWithSelector['state'](atRule.parent.params[0]);
}

if (atRule.name === 'true') {
  return replaceAtRuleWithSelector['true'](atRule.parent.params[0]);
}

if (atRule.name === 'compound-variant') {
  return replaceAtRuleWithSelector['component'](...atRule.params)
}

Which would generate two files

• button.css
• button.styles.ts

// button.styles.ts (generated)

const buttonStyleConfig = ['cn-c-button', {
  variants: {
    variant: {
      primary: 'cn-c-button--variant-primary',
      secondary: 'cn-c-button--variant-secondary',
    },
    size: {
     ....
    }
  },
  compoundVariants: [
    ...
  ]
}]

export const button = cva(...buttonStyleConfig)

// This uses nested selectors but it would actually generate plain CSS
.cn-c-button {
  color: #fff;
  background-color: yellow;

  &--variant-primary {
      background: blue;
    }
    &--variant-secondary {
      background: red;
    }
  }

  &--size-1 {
      padding: 0.5rem;
   }
   &--size-2 {
      padding: 1rem;
    }
    &--size-3 {
      padding: 1.5rem;
    }
  }

  &--variant-isFullWidth {
      width: 100%;
    }
  }

  &--size-1--x--variant-primary {
    ...
  }
  
  &--size-2--x--variant-primary
    ....
  }
}

Although, there are limitations to what you can do with @ rules in PostCSS. I'm trying to figure out how we could then select this component in other files without needing to write the prefixed classname.

@component button-group {
  .cn-c-button {
    // This kind of defeats the entire purpose of hiding the prefix in the component style definition
  }
}

// It seems to me so far that something like this either isn't possible or has limitations that make it undesirable
@define-component button-group {
  @select-component button {
    
  }
}

@component some-component {
  .someClass {
    @select-component button {
      // This is invalid CSS syntax and so can't be parsed by PCSS
    }
  }
}

Maybe I can leave the BEM class builder behind and do something like this

@component .cn-c-button-group {
  @variant variant {
    @state primary .cn-c-button--variant-primary {
      ...
    }
    @state secondary .cn-c-button--variant-primary {
      ...
    }
  }
}