Feature Request: Output responsive arrays

[tony-ho]

First of all, thanks for the library. 😀

I'm using Capsize in a Theme UI (https://theme-ui.com/home) project with responsive styles.

Rather than using Capsize generated CSS-in-JS for each breakpoint in separate media queries, I'd prefer to use the "responsive array" format supported by Theme UI and Styled System (https://styled-system.com/css#responsive-arrays) eg.

const styles = {
  // capHeight: 8, 10
  fontSize: ['12.698412698412698px', '15.873015873015873px'],
  lineHeight: ['16px', '20px'],
  padding: '0.05px 0',
  '::before': {
    content: "''",
    marginTop: ['-0.3029375em', '-0.3021499999999999em'],
    display: 'block',
    height: 0,
  },
  '::after': {
    content: "''",
    marginBottom: ['-0.33493750000000017em', '-0.33415000000000006em'],
    display: 'block',
    height: 0,
  },
}

Currently, I'm using a responsiveCapsize utility function to generate these:

type CapHeightWithLeading = {
  capHeight: number
  leading: number
}

function responsiveCapsize(
  fontMetrics: FontMetrics,
  capHeightsWithLeading: CapHeightWithLeading[]
) {
  const styles = capHeightsWithLeading.map((c) =>
    capsize({
      capHeight: c.capHeight,
      leading: c.leading,
      fontMetrics,
    })
  )

  return {
    fontSize: styles.map((s) => s.fontSize),
    lineHeight: styles.map((s) => s.lineHeight),
    padding: '0.05px 0',
    '::before': {
      content: "''",
      marginTop: styles.map((s) => s['::before'].marginTop),
      display: 'block',
      height: 0,
    },
    '::after': {
      content: "''",
      marginBottom: styles.map((s) => s['::after'].marginBottom),
      display: 'block',
      height: 0,
    },
  }
}

const styles = responsiveCapsize(fontMetrics, [
  { capHeight: 8, leading: 16 },
  { capHeight: 10, leading: 20 },
])

Would you consider adding similar functionality to the Capsize to generate CSS-in-JS output using responsive arrays?

[jesstelford]

Related: chakra-ui/chakra-ui#1199

[tony-ho]

For anyone interested in this functionality, I've published an updated version of my responsiveCapsize utility function to npm: https://www.npmjs.com/package/responsive-capsize

Note that the input format has been changed to accept responsive arrays. eg.

const styles = responsiveCapsize({
  capHeight: [16, 32],
  lineGap: [8, 16],
  fontMetrics
})

Happy to help with integrating this into Capsize, or close this feature request.