Ability to compose existing styles into media queries

[joslarson]

Let me know if this is already possible in some way that I've missed, but it would be really powerful if the following was possible:

// button.css.ts
const base = style({ ... });
const small = style({ ... });
const medium = style({ ... });

// we can compose the above styles to build our button
const smallButton = style([base, small]);

// but what if we want a responsive button size in some cases? it'd be nice if we could do something like the following:
const responsiveButton = style([base, small, {
  '@media': {
    '(min-width: 768px)': medium // or something like getStyleRulesByClassName(medium) if we want to make it explicit we're duplicating styles here to a new  class
  }
}]);

Underneath this would need the ability to duplicate styles associated with an existing classname to a new one.

My end goal here is really to have a version of the recipes lib that would support responsive variants, bringing it closer to what stitches provides, but while remaining static. I've got the following POC API working locally (I'm keeping a copy of the styles passed in to recipe to reference inside responsive recipe):

const button = recipe({
  base: {...},
  variants: {
    size: {
      small: {...},
      medium: {...}
    }
  }
});

const responsiveButton = responsiveRecipe(
  button,
  {
    size: {
      '@initial': 'small',
      '@media (min-width: 768px)': 'medium'
    }
  }
);

But this breaks down when an existing class is passed to a variant, because I can't find a way to retrieve the styles objects for existing classNames at build time.

const button = recipe({
  base: {...},
  variants: {
    size: {
      small: [smallText, {...}],
      medium: [mediumText, {...}]
    }
  }
});

const responsiveButton = responsiveRecipe(
  button,
  {
    size: {
      '@initial': 'small',
      '@media (min-width: 768px)': 'medium'
    }
  }
);

[askoufis]

This is kind of similar to #1359.

I'm unsure which is better between an explicit approach, e.g. something like getStyleRulesByClassName as you mentioned, or an implicit approach where you can just reference a classname anywhere you can use a style object

I think either one would be possible, but I don't know if this would work well in all situations (APIs), as well as any potential type-safety consequences. This might've already been attempted in the past too, I wasn't around in the early days of Vanilla Extract, so there may be a reason why this hasn't been implemented already.

[joslarson]

Initial implementation for discussion: #1371

[cqh963852]

I think such an API would be easier to use?

const drawer = style({
   // default hidden
})

const drawerOpen = style({
   selector:{
      `&${drawerOpen}`:{
        // If used, defaults to display
      }
  }
})

// combine may be used the same as clsx
const responsiveDrawer = combine(drawer,{
   '@media (min-width: 768px)': drawerOpen
})

<div classname={drawer}> // A drawer component that is hidden by default
<div classname={clsx(drawer, drawerOpen)}> // Drawer component expanded by default
<div classname={responsiveDrawer}> // A responsive Drawer