Feature Request: Output responsive arrays #22
Description
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?